@props(['reglage'])

<section id="top" class="relative isolate flex min-h-screen items-center overflow-hidden pt-32">
    <div id="hero-bg" class="absolute inset-0 -z-10" style="transform: scale(1.08); transition: transform 0.15s ease-out;">
        <img src="{{ $reglage->heroImageUrl() }}" alt="" class="hero-slide absolute inset-0 h-full w-full object-cover opacity-100" style="transition: opacity 1.6s ease-in-out;" fetchpriority="high" width="1920" height="1080" />
        <img src="{{ asset('assets/hero-logistique.jpg') }}" alt="" class="hero-slide absolute inset-0 h-full w-full object-cover opacity-0" style="transition: opacity 1.6s ease-in-out;" loading="lazy" width="1920" height="1285" />
        <img src="{{ asset('assets/hero-mine.jpg') }}" alt="" class="hero-slide absolute inset-0 h-full w-full object-cover opacity-0" style="transition: opacity 1.6s ease-in-out;" loading="lazy" width="1920" height="1278" />
        <img src="{{ asset('assets/hero-water.jpg') }}" alt="" class="hero-slide absolute inset-0 h-full w-full object-cover opacity-0" style="transition: opacity 1.6s ease-in-out;" loading="lazy" width="1920" height="1249" />
        <div class="absolute inset-0" style="background: linear-gradient(120deg, oklch(0.15 0.04 245 / 0.92) 0%, oklch(0.22 0.05 240 / 0.75) 50%, oklch(0.15 0.04 245 / 0.85) 100%);"></div>
    </div>

    <div id="hero-blob1" aria-hidden="true" class="absolute left-[10%] top-[15%] -z-10 h-[420px] w-[420px] rounded-full blur-3xl floaty-slow" style="transition: transform 0.2s ease-out;">
        <div class="h-full w-full rounded-full" style="background: radial-gradient(circle, oklch(0.72 0.13 78 / 0.35), transparent 65%);"></div>
    </div>
    <div id="hero-blob2" aria-hidden="true" class="absolute -right-24 bottom-10 -z-10 h-[520px] w-[520px] rounded-full blur-3xl floaty" style="transition: transform 0.2s ease-out;">
        <div class="h-full w-full rounded-full" style="background: radial-gradient(circle, oklch(0.55 0.12 240 / 0.4), transparent 65%);"></div>
    </div>

    <div aria-hidden="true" class="pointer-events-none absolute inset-0 opacity-[0.08] mix-blend-overlay" style="background-image: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>&quot;);"></div>

    <div class="relative mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-16 px-6 pb-24 lg:grid-cols-[1.15fr_0.85fr]">
        <div>
            <div class="hero-fade section-eyebrow mb-8" data-delay="0">{{ $reglage->trad('hero_eyebrow') }}</div>

            <h1 class="display-title max-w-md lg:max-w-lg" style="font-size: clamp(2.75rem, 6vw, 5.25rem);">
                <span class="hero-line"><span>{!! $reglage->tradEm('hero_title') !!}</span></span>
            </h1>

            <p class="hero-fade mt-8 max-w-xl text-base leading-relaxed text-cream/75 md:text-lg" data-delay="0.9">
                {{ $reglage->trad('hero_soustitre') }}
            </p>

            <div class="hero-fade mt-10 flex flex-wrap items-center gap-4" data-delay="1.1">
                <a href="https://calendly.com/catherine-obvious-way/30min" target="_blank" rel="noopener" class="shimmer btn-primary-gold group">
                    {{ $reglage->trad('hero_cta1') }}
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-500 group-hover:translate-x-1"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </a>
                <a href="#services" class="btn-ghost-gold">{{ $reglage->trad('hero_cta2') }}</a>
            </div>

            @if ($reglage->trad('hero_trust'))
                <div class="hero-fade mt-14 flex items-center gap-3 text-xs uppercase tracking-[0.22em] text-cream/50" data-delay="1.4">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-gold"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                    {{ $reglage->trad('hero_trust') }}
                </div>
            @endif
        </div>

        {{-- Carte géographique : structurelle, non éditable --}}
        <div class="relative mx-auto w-full max-w-md hero-fade" data-delay="0.4">
            <div id="hero-geo-card" class="glass-strong gold-border relative overflow-hidden rounded-3xl p-8" style="transition: transform 0.2s ease-out;">
                <svg viewBox="0 0 400 400" class="w-full" role="img" aria-label="Carte de la zone Océan Indien et Afrique">
                    <defs>
                        <radialGradient id="pulse" cx="50%" cy="50%" r="50%">
                            <stop offset="0%" stop-color="#C9963A" stop-opacity="0.5" />
                            <stop offset="100%" stop-color="#C9963A" stop-opacity="0" />
                        </radialGradient>
                        <filter id="glow"><feGaussianBlur stdDeviation="2" /></filter>
                    </defs>
                    <g stroke="rgba(201,150,58,0.08)" stroke-width="0.5">
                        <line x1="0" y1="80" x2="400" y2="80"/><line x1="80" y1="0" x2="80" y2="400"/>
                        <line x1="0" y1="160" x2="400" y2="160"/><line x1="160" y1="0" x2="160" y2="400"/>
                        <line x1="0" y1="240" x2="400" y2="240"/><line x1="240" y1="0" x2="240" y2="400"/>
                        <line x1="0" y1="320" x2="400" y2="320"/><line x1="320" y1="0" x2="320" y2="400"/>
                    </g>
                    <path d="M0 60 L45 45 L78 100 L88 180 L72 260 L48 320 L20 380 L0 400 Z" fill="rgba(201,150,58,0.08)" stroke="rgba(201,150,58,0.45)" stroke-width="1"/>
                    <text x="30" y="200" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="13" letter-spacing="3">{{ lpick('AFRIQUE', 'AFRICA', 'AFRIKA') }}</text>
                    <path d="M180 230 L200 240 L205 270 L195 310 L170 350 L155 355 L145 335 L148 300 L160 265 Z" fill="rgba(201,150,58,0.06)" stroke="rgba(201,150,58,0.4)" stroke-width="0.8"/>
                    <text x="155" y="320" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="12" letter-spacing="1.5">{{ lpick('MADAGASCAR', 'MADAGASCAR', 'MADAGASKAR') }}</text>
                    <circle cx="290" cy="320" r="30" fill="url(#pulse)">
                        <animate attributeName="r" values="26;38;26" dur="3s" repeatCount="indefinite"/>
                        <animate attributeName="opacity" values="0.8;0.1;0.8" dur="3s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="290" cy="320" r="12" fill="#C9963A" filter="url(#glow)"/>
                    <circle cx="290" cy="320" r="2.5" fill="#fff" opacity="0.9"/>
                    <text x="305" y="316" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="13" letter-spacing="2">{{ lpick('Île MAURICE', 'MAURITIUS', 'MAURITIUS') }}</text>
                    <g stroke="rgba(201,150,58,0.8)" stroke-width="0.7" stroke-dasharray="3 3" fill="none">
                        <line x1="290" y1="320" x2="250" y2="160"><animate attributeName="stroke-dashoffset" from="0" to="12" dur="1.5s" repeatCount="indefinite"/></line>
                        <line x1="290" y1="320" x2="180" y2="290"/>
                        <line x1="290" y1="320" x2="120" y2="220"/>
                        <line x1="290" y1="320" x2="60" y2="240"><animate attributeName="stroke-dashoffset" from="0" to="12" dur="1.5s" repeatCount="indefinite"/></line>
                    </g>
                    <circle cx="250" cy="160" r="3" fill="#C9963A" opacity="0.85"/>
                    <text x="258" y="158" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="13" letter-spacing="1.2">{{ lpick('SEYCHELLES', 'SEYCHELLES', 'SEYCHELLEN') }}</text>
                    <circle cx="120" cy="220" r="2.5" fill="#C9963A" opacity="0.8"/>
                    <text x="60" y="212" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="11" letter-spacing="1.2">{{ lpick('COMORES', 'COMOROS', 'KOMOREN') }}</text>
                    <text x="60" y="224" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="11" letter-spacing="1.2">MAYOTTE</text>
                    <circle cx="280" cy="335" r="2.5" fill="#C9963A" opacity="0.8"/>
                    <text x="290" y="348" fill="#E8C88A" font-family="Cormorant Garamond, serif" font-size="9" letter-spacing="1.2">{{ lpick('RÉUNION', 'REUNION', 'RÉUNION') }}</text>
                </svg>

                <div class="mt-6 flex items-center justify-between">
                    <div>
                        <div class="text-xs uppercase tracking-[0.2em] text-cream/50">{{ lpick('Hub régional', 'Regional hub', 'Regionaler Hub') }}</div>
                        <div class="font-serif text-2xl text-gradient-gold">{{ lpick('Île Maurice', 'Mauritius', 'Mauritius') }}</div>
                    </div>
                    <div class="rounded-full border border-gold/40 px-3 py-1 text-[10px] uppercase tracking-widest text-gold">Live</div>
                </div>
            </div>
        </div>
    </div>

    <div class="hero-fade absolute bottom-8 left-1/2 -translate-x-1/2 text-cream/50" data-delay="1.8">
        <div class="mx-auto h-10 w-6 rounded-full border border-cream/30">
            <div class="scroll-dot mx-auto mt-2 h-2 w-[2px] rounded-full bg-gold"></div>
        </div>
    </div>
</section>