@props(['about', 'aboutForces'])

<section id="about" class="relative overflow-hidden py-12 md:py-20">
    <div class="mx-auto grid max-w-7xl grid-cols-1 items-start gap-16 px-6 lg:grid-cols-[0.9fr_1.1fr]">
        <div class="reveal order-2 lg:order-none">
            <div id="portrait-card" class="glass-strong gold-border sticky top-28 mx-auto aspect-[4/5] w-full max-w-md overflow-hidden rounded-3xl p-2">
                <div class="relative flex h-full w-full items-end overflow-hidden rounded-[calc(1.5rem-4px)]">
                    <img src="{{ $about->portraitUrl() }}" alt="Catherine Dubreuil Le Roy" class="absolute inset-0 h-full w-full object-cover" loading="lazy" width="800" height="1000" />
                    <div class="absolute inset-0" style="background: linear-gradient(to top, oklch(0.15 0.04 245 / 0.85) 0%, oklch(0.15 0.04 245 / 0.3) 40%, transparent 70%);"></div>
                    <div class="relative w-full p-8">
                        <div class="text-[10px] uppercase tracking-[0.28em] text-gold">{{ lpick('Fondatrice', 'Founder', 'Gründerin') }}</div>
                        <div class="mt-3 font-serif text-3xl text-cream">Catherine<br /><em class="text-gradient-gold">Dubreuil Le Roy</em></div>
                        <div class="mt-3 flex flex-wrap gap-2">
                            <span class="rounded-full border border-gold/30 bg-navy-deep/60 px-3 py-1 text-[10px] uppercase tracking-widest text-cream/70">Maurice</span>
                            <span class="rounded-full border border-gold/30 bg-navy-deep/60 px-3 py-1 text-[10px] uppercase tracking-widest text-cream/70">{{ lpick('Trilingue', 'Trilingual', 'Dreisprachig') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-8 lg:mt-32">
                <div class="reveal glass gold-border mt-10 rounded-2xl p-6" data-delay="0.35">
                    <div class="text-[11px] uppercase tracking-[0.22em] text-gold">{{ lpick('Notre force collective', 'Our collective strength', 'Unsere gemeinsame Stärke') }}</div>
                    <ul class="mt-4 space-y-3">
                        @foreach ($aboutForces as $force)
                            <li class="flex items-start gap-3 text-sm text-cream/80">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mt-0.5 shrink-0 text-gold" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
                                <span>{{ $force->trad('texte') }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        <div class="order-1 lg:order-none">
            <div class="reveal section-eyebrow">{{ $about->trad('eyebrow') }}</div>
            <h2 class="reveal display-title mt-4" data-delay="0.1">{!! $about->tradEm('title') !!}</h2>

            <p class="reveal mt-8 text-md leading-relaxed text-cream/80" data-delay="0.2">{!! str($about->trad('bio1') ?? '')->sanitizeHtml() !!}</p>
            <p class="reveal mt-5 text-md leading-relaxed text-cream/80" data-delay="0.3">{!! str($about->trad('bio2') ?? '')->sanitizeHtml() !!}</p>
            <p class="reveal mt-5 text-md leading-relaxed text-cream/80" data-delay="0.35">{!! str($about->trad('bio3') ?? '')->sanitizeHtml() !!}</p>
            @if ($about->trad('bio4'))
                <p class="reveal mt-5 text-md leading-relaxed text-cream/80" data-delay="0.4">{!! str($about->trad('bio4') ?? '')->sanitizeHtml() !!}</p>
            @endif
           
            <div class="reveal mt-8" data-delay="0.5">
                <a href="{{ $about->abt_linkedin_url }}" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 btn-ghost-gold">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.95v5.66H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.27zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.44c.98 0 1.79-.77 1.79-1.72V1.72C24 .77 23.19 0 22.22 0z"/></svg>
                    {{ lpick('Voir le profil LinkedIn', 'View LinkedIn profile', 'LinkedIn-Profil ansehen') }}
                </a>
            </div>
        </div>
    </div>
</section>