@extends('layouts.app')

@section('title', 'TekLab | Ingenierie numerique, web et IA')

@section('content')
    <section class="hero-section d-flex align-items-center position-relative overflow-hidden">
        <div class="ambient-field" aria-hidden="true">
            <span class="ambient-orb ambient-orb-primary"></span>
            <span class="ambient-orb ambient-orb-secondary"></span>
        </div>

        <div class="container">
            <div class="row align-items-center gy-5">
                <div class="col-lg-7 reveal-up hero-copy">
                    <h1 class="hero-title mb-4">Donnez vie à vos projets numériques.</h1>
                    <div class="hero-mobile-orb d-lg-none" aria-hidden="true">
                        <div class="lab-orb focal-object w-100" data-three-orb>
                            <div class="hero-orb-canvas"></div>
                            <span class="orb-particle orb-particle-one"></span>
                            <span class="orb-particle orb-particle-two"></span>
                        </div>
                    </div>
                    <p class="hero-lead mb-5 col-xl-10">
                        Vos idées méritent plus qu'un concept : nous les transformons en solutions digitales robustes, évolutives et performantes.
                    </p>
                    <div class="d-flex flex-column flex-sm-row gap-3">
                        <a href="#contact" class="btn btn-teklab-primary btn-lg px-5 js-scroll">Nous Contacter</a>
                        <a href="#tarifs" class="btn btn-teklab-outline btn-lg px-5 js-scroll">Nos Tarifs</a>
                    </div>
                </div>

                <div class="col-lg-5 d-none d-lg-flex justify-content-center reveal-up">
                    <div class="hero-focal-point">
                        <div class="lab-orb focal-object w-100" data-three-orb aria-hidden="true">
                            <div class="hero-orb-canvas"></div>
                            <span class="orb-particle orb-particle-one"></span>
                            <span class="orb-particle orb-particle-two"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="tarifs" class="section-space tariffs-section position-relative overflow-hidden">
        <div class="container position-relative">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-4 mb-5 reveal-up">
                <div>
                    <span class="font-technical text-primary small">Nos tarifs</span>
                    <h2 class="display-6 fw-bold mt-3 mb-0">Des offres claires pour lancer votre projet.</h2>
                </div>
                <div class="tariff-currency-switch" aria-label="Choisir la devise des tarifs">
                    <button class="tariff-currency-option" type="button" data-currency-option="eur">EUR</button>
                    <button class="tariff-currency-option" type="button" data-currency-option="mga">MGA</button>
                </div>
            </div>

            <div class="tariff-card-track">
                <article class="surface-card tariff-card h-100" tabindex="0">
                    <div class="tariff-card-header">
                        <i class="bi bi-window-stack service-icon fs-4"></i>
                        <span class="font-technical small text-primary">Site web</span>
                    </div>
                    <h3 class="h4 fw-bold mt-4">Site Vitrine Dynamique</h3>
                    <div class="tariff-price mt-3">
                        <span class="tariff-price-prefix">A partir de</span>
                        <strong data-tariff-price data-eur="194" data-mga="950000">194 &euro; / 950 000 Ar</strong>
                    </div>
                    <ul class="tariff-features list-unstyled mt-4 mb-0">
                        <li><i class="bi bi-check2"></i>Compatible iPhone, tablette, PC et Mac</li>
                        <li><i class="bi bi-check2"></i>Formulaire de devis ou contact</li>
                        <li><i class="bi bi-check2"></i>Page d'administration textes et photos</li>
                        <li><i class="bi bi-check2"></i>1 adresse email pro</li>
                        <li><i class="bi bi-check2"></i>Domaine/hebergement 1 an offerts (.fr ou .com)</li>
                    </ul>
                    <a class="tariff-link js-scroll" href="#contact">Demander ce pack</a>
                </article>

                <article class="surface-card tariff-card h-100 tariff-card-featured" tabindex="0">
                    <div class="tariff-card-header">
                        <i class="bi bi-phone service-icon fs-4"></i>
                        <span class="font-technical small text-primary">Mobile</span>
                    </div>
                    <h3 class="h4 fw-bold mt-4">Application Mobile</h3>
                    <div class="tariff-price mt-3">
                        <span class="tariff-price-prefix">A partir de</span>
                        <strong data-tariff-price data-eur="180" data-mga="869400">180 &euro; / 869 400 Ar</strong>
                    </div>
                    <ul class="tariff-features list-unstyled mt-4 mb-0">
                        <li><i class="bi bi-check2"></i>Interface mobile responsive et fluide</li>
                        <li><i class="bi bi-check2"></i>Parcours adapte aux besoins metier</li>
                        <li><i class="bi bi-check2"></i>Connexion API ou base de donnees possible</li>
                        <li><i class="bi bi-check2"></i>Preparation Android/iOS selon le besoin</li>
                    </ul>
                    <a class="tariff-link js-scroll" href="#contact">Discuter de l'application</a>
                </article>

                <article class="surface-card tariff-card h-100" tabindex="0">
                    <div class="tariff-card-header">
                        <i class="bi bi-cpu service-icon fs-4"></i>
                        <span class="font-technical small text-primary">Sur mesure</span>
                    </div>
                    <h3 class="h4 fw-bold mt-4">Logiciel sur mesure</h3>
                    <div class="tariff-price mt-3">
                        <span class="tariff-price-prefix">A partir de</span>
                        <strong data-tariff-price data-eur="100" data-mga="483000">100 &euro; / 483 000 Ar</strong>
                    </div>
                    <p class="text-white-50 mt-4 mb-0">
                        Le prix final depend des fonctionnalites, du volume de donnees et du niveau d'automatisation attendu.
                    </p>
                    <ul class="tariff-features list-unstyled mt-4 mb-0">
                        <li><i class="bi bi-check2"></i>Analyse du besoin et cadrage technique</li>
                        <li><i class="bi bi-check2"></i>Dashboard, workflow ou outil interne</li>
                        <li><i class="bi bi-check2"></i>Architecture evolutive et maintenable</li>
                    </ul>
                    <a class="tariff-link js-scroll" href="#contact">Obtenir une estimation</a>
                </article>
            </div>
        </div>
    </section>

    <section id="solutions" class="section-space bg-black bg-opacity-25 position-relative overflow-hidden">
        <svg class="constellation-lines" aria-hidden="true" viewBox="0 0 1200 620" preserveAspectRatio="none">
            <path class="filament filament-one" d="M80 160 C260 40 390 260 560 185 S840 80 1120 210"></path>
            <path class="filament filament-two" d="M100 460 C310 575 420 360 610 440 S900 570 1110 390"></path>
            <circle class="orbit-ring" cx="600" cy="310" r="230"></circle>
        </svg>

        <div class="container">
            <div class="text-center mb-5 reveal-up">
                <span class="font-technical text-primary small">Synergie technologique</span>
                <h2 class="display-6 fw-bold mt-3">L'ecosysteme TekLab</h2>
            </div>

            <div class="row g-4">
                @foreach ($services as $service)
                    <div class="col-md-6 col-xl-3 reveal-up">
                        <article class="surface-card service-card p-4">
                            <i class="bi {{ $service['icon'] }} service-icon fs-4 mb-4"></i>
                            <h3 class="h5 fw-bold">{{ $service['title'] }}</h3>
                            <p class="text-white-50 mb-0">{{ $service['description'] }}</p>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section id="langages" class="section-space language-section position-relative overflow-hidden">
        <span class="ambient-orb language-orb" aria-hidden="true"></span>

        <div class="container">
            <div class="row align-items-end gy-4 mb-4">
                <div class="col-lg-7 reveal-up">
                    <span class="font-technical text-primary small">Stack technique</span>
                    <h2 class="display-6 fw-bold mt-3 mb-0">Les langages et outils qui propulsent vos solutions.</h2>
                </div>
                <div class="col-lg-5 reveal-up">
                    <p class="text-white-50 fs-5 mb-0">
                        Une constellation interactive de technologies web, backend, data et cloud, organisee comme un systeme vivant.
                    </p>
                </div>
            </div>

            <div class="language-panel reveal-up">
                <div class="language-visual" data-language-table aria-label="Visualisation 3D des langages"></div>

                <div class="language-fallback" data-language-fallback>
                    @foreach (['HTML', 'CSS', 'JavaScript', 'TypeScript', 'PHP', 'Laravel', 'Python', 'Node.js', 'MySQL', 'PostgreSQL', 'Redis', 'Docker', 'AWS', 'Git', 'Bootstrap'] as $language)
                        <span>{{ $language }}</span>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section id="projets" class="section-space">
        <div class="container">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-5 reveal-up">
                <div>
                    <span class="font-technical text-primary small">Etudes de cas techniques</span>
                    <h2 class="display-6 fw-bold mt-3 mb-0">Galerie de travaux</h2>
                </div>
                <a href="#contact" class="text-white text-decoration-none border-bottom border-white border-opacity-25 pb-1 js-scroll">Discuter d'un projet</a>
            </div>

            <div class="project-showcase reveal-up">
                @foreach ($projects as $project)
                    <article class="project-card" tabindex="0">
                        <div class="project-visual">
                            <img src="{{ asset($project['image']) }}" alt="{{ $project['title'] }}" loading="lazy">
                            <div class="project-overlay">
                                <span class="badge rounded-pill text-bg-dark border border-white border-opacity-10 mb-3">
                                    {{ $project['category'] }}
                                </span>
                                <h3 class="h4 fw-bold mb-2">{{ $project['title'] }}</h3>
                                <p class="text-white-50 mb-0">{{ $project['description'] }}</p>
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section-space position-relative overflow-hidden">
        <span class="ambient-orb stats-orb" aria-hidden="true"></span>

        <div class="container">
            <div class="row g-4 text-center">
                @foreach ($stats as $stat)
                    <div class="col-6 col-lg-3 reveal-up">
                        <div class="stat-value">{{ $stat['value'] }}</div>
                        <div class="font-technical small text-primary">{{ $stat['label'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <div class="modal fade contact-modal" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content surface-card contact-floatbox p-4 p-lg-5">
                <button class="btn-close contact-modal-close" type="button" data-bs-dismiss="modal" aria-label="Fermer"></button>

                <div class="row gy-5 align-items-start">
                    <div class="col-lg-4">
                        <span class="font-technical text-primary small">Demarrer</span>
                        <h2 id="contactModalLabel" class="display-6 fw-bold mt-3 mb-4">Pret a evoluer ?</h2>
                        <p class="text-white-50 fs-5 mb-0">
                            Envoyez les grandes lignes de votre besoin. La demande sera enregistree proprement en base et l'equipe pourra la traiter.
                        </p>
                    </div>

                    <div class="col-lg-8">
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif

                        <form method="POST" action="{{ route('contact.store') }}" novalidate>
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label" for="full_name">Nom complet</label>
                                    <input id="full_name" name="full_name" type="text" class="form-control @error('full_name') is-invalid @enderror" value="{{ old('full_name') }}" required>
                                    @error('full_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="email">Email</label>
                                    <input id="email" name="email" type="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" required>
                                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="phone">Telephone</label>
                                    <input id="phone" name="phone" type="text" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone') }}">
                                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="company">Entreprise</label>
                                    <input id="company" name="company" type="text" class="form-control @error('company') is-invalid @enderror" value="{{ old('company') }}">
                                    @error('company')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="project_type">Type de projet</label>
                                    <select id="project_type" name="project_type" class="form-select @error('project_type') is-invalid @enderror" required>
                                        <option value="">Selectionner</option>
                                        @foreach ($projectTypes as $projectType)
                                            <option value="{{ $projectType }}" @selected(old('project_type') === $projectType)>{{ $projectType }}</option>
                                        @endforeach
                                    </select>
                                    @error('project_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label" for="budget_range">Budget estime</label>
                                    <select id="budget_range" name="budget_range" class="form-select @error('budget_range') is-invalid @enderror">
                                        <option value="">A definir</option>
                                        @foreach ($budgetRanges as $budgetRange)
                                            <option value="{{ $budgetRange }}" @selected(old('budget_range') === $budgetRange)>{{ $budgetRange }}</option>
                                        @endforeach
                                    </select>
                                    @error('budget_range')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>

                                <div class="col-12">
                                    <label class="form-label" for="message">Message</label>
                                    <textarea id="message" name="message" rows="5" class="form-control @error('message') is-invalid @enderror" placeholder="Objectif, delai, contexte technique..." required>{{ old('message') }}</textarea>
                                    @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                            </div>

                            <button class="btn btn-teklab-primary btn-lg px-5 mt-4" type="submit">Contacter l'equipe technique</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection