@php
    use Illuminate\Support\Facades\Storage;
    $img = fn (string $f) => Storage::disk('public')->exists("site/{$f}") ? Storage::url("site/{$f}") : null;
    $who = $page->publishedSections->firstWhere('eyebrow', 'Who We Are');
    $valueIcons = [
        'Integrity' => 'heroicon-o-shield-check', 'Local Understanding' => 'heroicon-o-globe-africa',
        'Partnership' => 'heroicon-o-hand-raised', 'Professional Excellence' => 'heroicon-o-academic-cap',
        'Long-Term Perspective' => 'heroicon-o-clock', 'Healthcare Impact' => 'heroicon-o-heart',
    ];
    $reasons = [
        ['heroicon-o-globe-africa', 'Local Market Understanding', 'We understand the Tanzanian healthcare environment and the factors that influence market development.'],
        ['heroicon-o-rectangle-group', 'Healthcare-Sector Knowledge', 'Our understanding extends across Tanzania’s healthcare ecosystem, identifying relevant opportunities.'],
        ['heroicon-o-map', 'Practical Market Access', 'We help organisations identify appropriate pathways and develop practical strategies for Tanzania.'],
        ['heroicon-o-clock', 'Long-Term Approach', 'We build sustainable relationships and develop opportunities over time, not one-off transactions.'],
    ];
@endphp

<x-layout :title="null" :description="$page->meta_description">
    {{-- ===================== HERO ===================== --}}
    <section class="relative overflow-hidden bg-gradient-to-b from-teal-100 via-teal-50 to-white">
        <div class="pointer-events-none absolute inset-0" aria-hidden="true">
            <div class="absolute -left-40 top-0 h-[38rem] w-[38rem] rounded-full bg-teal-200/40 blur-3xl"></div>
            <div class="absolute right-1/3 top-1/4 h-96 w-96 rounded-full bg-white/50 blur-3xl"></div>
        </div>
        <div class="container-x relative">
            <div class="grid items-center gap-10 pb-28 pt-14 lg:grid-cols-2 lg:pb-36 lg:pt-20">
                <div>
                    <span class="chip">Your Strategic Healthcare Partner</span>
                    <h1 class="mt-6 font-display text-[2.6rem] font-extrabold leading-[1.05] text-ink sm:text-6xl lg:text-[4.2rem]">{{ $page->hero_heading }}</h1>
                    <p class="mt-6 max-w-xl text-lg leading-relaxed text-muted">{{ $page->hero_subheading }}</p>
                    <div class="mt-9 flex flex-wrap items-center gap-x-7 gap-y-4">
                        <x-ui.button :href="url('/why-tanzania')" variant="primary">Explore Tanzania</x-ui.button>
                        <a href="{{ url('/our-approach') }}" class="group inline-flex items-center gap-3 text-sm font-semibold text-ink">
                            <span class="grid h-12 w-12 place-items-center rounded-full bg-white text-teal-600 shadow-card ring-1 ring-teal-500/15 transition group-hover:scale-105">
                                <svg class="h-4 w-4 translate-x-0.5" viewBox="0 0 20 20" fill="currentColor"><path d="M6.3 3.3a1 1 0 011.02-.05l9 5a1 1 0 010 1.75l-9 5A1 1 0 016 14.1V5.9a1 1 0 01.3-.6z"/></svg>
                            </span>
                            See how we work
                        </a>
                    </div>
                </div>
                <div class="relative">
                    <div class="relative mx-auto max-w-md lg:ml-auto">
                        <div class="overflow-hidden rounded-[2.5rem] rounded-tr-[6rem] shadow-soft ring-1 ring-white/60">
                            <img src="{{ $img('hero-dar-skyline.jpg') }}" alt="Dar es Salaam, Tanzania" class="aspect-[4/5] w-full object-cover">
                        </div>
                        <div class="absolute -left-4 top-12 flex items-center gap-3 rounded-2xl bg-white/95 p-3 pr-5 shadow-card ring-1 ring-line backdrop-blur">
                            <span class="icon-tile-navy h-11 w-11"><x-ui.icon name="heroicon-o-squares-2x2" class="h-6 w-6" /></span>
                            <span><span class="block font-display text-xl font-extrabold text-ink">{{ $sectors->count() ?: 6 }} Sectors</span><span class="block text-xs text-muted">Healthcare sectors served</span></span>
                        </div>
                        <div class="absolute -right-3 bottom-12 flex items-center gap-3 rounded-2xl bg-white/95 p-3 pr-5 shadow-card ring-1 ring-line backdrop-blur">
                            <span class="icon-circle h-11 w-11"><x-ui.icon name="heroicon-o-map-pin" class="h-6 w-6" /></span>
                            <span><span class="block font-display text-lg font-extrabold text-ink">TZ + UK</span><span class="block text-xs text-muted">Local &amp; international</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== FEATURE BAR ===================== --}}
    <div class="relative z-10 -mt-20 lg:-mt-24">
        <div class="container-x">
            <div class="grid overflow-hidden rounded-3xl bg-white shadow-soft ring-1 ring-line sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['heroicon-o-envelope', 'Email', $settings->email, 'mailto:' . $settings->email],
                    ['heroicon-o-map-pin', 'Offices', 'Dar es Salaam & UK', null],
                    ['heroicon-o-clipboard-document-check', 'Regulatory', 'TMDA pathway support', url('/regulatory-compliance')],
                ] as [$icon, $label, $value, $link])
                    <div class="flex items-center gap-4 border-line p-6 {{ !$loop->first ? 'sm:border-l' : '' }}">
                        <span class="icon-circle h-12 w-12 shrink-0"><x-ui.icon :name="$icon" class="h-6 w-6" /></span>
                        <span class="min-w-0"><span class="mono-label block text-xs font-semibold uppercase tracking-wide text-muted">{{ $label }}</span>
                        @if ($link)<a href="{{ $link }}" class="block truncate text-sm font-semibold text-ink hover:text-teal-700">{{ $value }}</a>@else<span class="block text-sm font-semibold text-ink">{{ $value }}</span>@endif</span>
                    </div>
                @endforeach
                <div class="flex items-center justify-center bg-teal-600 p-6"><a href="{{ route('contact.show') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-white">Let’s Talk <x-ui.icon name="heroicon-o-arrow-right" class="h-4 w-4" /></a></div>
            </div>
        </div>
    </div>

    {{-- ===================== OUR VALUES ===================== --}}
    @if ($values->isNotEmpty())
        <section class="section">
            <div class="container-x">
                <div class="mx-auto max-w-2xl text-center" data-reveal>
                    <p class="chip mx-auto">Our Values</p>
                    <h2 class="mt-5 font-display text-3xl font-bold text-ink sm:text-[2.6rem]">The Principles That Guide How We Work</h2>
                </div>
                <div class="mx-auto mt-14 grid max-w-5xl gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($values as $i => $value)
                        <div class="rounded-3xl bg-white p-8 text-center shadow-card ring-1 ring-line transition hover:-translate-y-1 hover:shadow-soft {{ $loop->iteration % 2 == 0 ? 'lg:mt-8' : '' }}" data-reveal data-reveal-delay="{{ ($i % 3) * 90 }}">
                            <span class="icon-circle mx-auto h-16 w-16"><x-ui.icon :name="$valueIcons[$value->title] ?? ($value->icon ?: 'heroicon-o-sparkles')" class="h-8 w-8" /></span>
                            <h3 class="mt-5 font-display text-xl font-bold text-ink">{{ $value->title }}</h3>
                            <p class="mt-3 text-sm leading-relaxed text-muted">{{ $value->description }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ===================== ABOUT US ===================== --}}
    @if ($who)
        <section class="section bg-canvas">
            <div class="container-x">
                <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
                    <div class="relative" data-reveal>
                        <div class="overflow-hidden rounded-[2.5rem] rounded-bl-[6rem] shadow-soft">
                            <img src="{{ $img('who-we-are.jpg') ?? $img('hero-dar-skyline.jpg') }}" alt="Medisafe Suppliers Limited" class="aspect-[4/5] w-full object-cover">
                        </div>
                        <div class="absolute -bottom-6 -right-4 rounded-2xl bg-teal-600 px-6 py-5 text-white shadow-soft">
                            <p class="font-display text-3xl font-extrabold">TZ+UK</p><p class="text-xs text-teal-100">Local & international</p>
                        </div>
                    </div>
                    <div data-reveal data-reveal-delay="120">
                        <span class="chip">About Us</span>
                        <h2 class="mt-5 font-display text-3xl font-bold text-ink sm:text-[2.6rem]">{{ $who->heading }}</h2>
                        <p class="mt-5 text-lg leading-relaxed text-muted">{{ $who->body }}</p>
                        <ul class="mt-7 grid gap-3 sm:grid-cols-2">
                            @foreach (['Market access & entry strategy', 'Regulatory & TMDA coordination', 'Commercial development', 'Strategic partnerships'] as $point)
                                <li class="flex items-start gap-2.5 text-[0.95rem] font-medium text-ink"><x-ui.icon name="heroicon-s-check-circle" class="mt-0.5 h-5 w-5 shrink-0 text-teal-600" />{{ $point }}</li>
                            @endforeach
                        </ul>
                        <div class="mt-9"><x-ui.button :href="url('/who-we-are')" variant="primary">Discover Medisafe Suppliers Limited</x-ui.button></div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    {{-- ===================== CAPABILITIES — slider ===================== --}}
    <section class="section" x-data="{ scroll(dir) { const t = $refs.track; t.scrollBy({ left: dir * (t.querySelector('div')?.offsetWidth ?? 320) * 1.05, behavior: 'smooth' }); } }">
        <div class="container-x">
            <div class="flex flex-wrap items-end justify-between gap-6" data-reveal>
                <div class="max-w-2xl">
                    <p class="chip">What We Do</p>
                    <h2 class="mt-5 font-display text-3xl font-bold leading-[1.1] text-ink sm:text-[2.6rem]">Our Core Capabilities</h2>
                    <p class="mt-4 text-lg leading-relaxed text-muted">Regulatory coordination, market access, commercial development and healthcare engagement — brought together for Tanzania.</p>
                </div>
                <div class="flex gap-3">
                    <button type="button" @click="scroll(-1)" class="grid h-12 w-12 place-items-center rounded-full border border-line text-ink transition hover:border-teal-500 hover:bg-teal-600 hover:text-white" aria-label="Previous"><x-ui.icon name="heroicon-o-arrow-left" class="h-5 w-5" /></button>
                    <button type="button" @click="scroll(1)" class="grid h-12 w-12 place-items-center rounded-full border border-line text-ink transition hover:border-teal-500 hover:bg-teal-600 hover:text-white" aria-label="Next"><x-ui.icon name="heroicon-o-arrow-right" class="h-5 w-5" /></button>
                </div>
            </div>

            <div x-ref="track" class="mt-12 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" data-reveal>
                @foreach ($services as $service)
                    <a href="{{ url('/what-we-do') }}" class="group flex w-[19rem] shrink-0 snap-start flex-col rounded-3xl bg-white p-8 shadow-card ring-1 ring-line transition hover:-translate-y-1 hover:shadow-soft">
                        <span class="icon-tile-navy h-16 w-16"><x-ui.icon :name="$service->icon ?: 'heroicon-o-sparkles'" class="h-8 w-8" /></span>
                        <h3 class="mt-6 font-display text-xl font-bold text-ink">{{ $service->title }}</h3>
                        <p class="mt-3 flex-1 text-sm leading-relaxed text-muted">{{ $service->summary }}</p>
                        <span class="mt-6 inline-flex items-center gap-1.5 text-sm font-semibold text-teal-700">Learn more <x-ui.icon name="heroicon-o-arrow-right" class="h-4 w-4 transition group-hover:translate-x-1" /></span>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ===================== APPROACH BAND ===================== --}}
    @if ($steps->isNotEmpty())
        <section class="bg-canvas py-16 lg:py-20">
            <div class="container-x">
                <div class="flex flex-wrap items-end justify-between gap-4" data-reveal>
                    <div class="max-w-xl"><p class="chip">Our Approach</p><h2 class="mt-4 font-display text-3xl font-bold leading-[1.1] text-ink sm:text-4xl">Building the Right Pathway Together</h2></div>
                    <x-ui.button :href="url('/our-approach')" variant="ghost" class="shrink-0">See how we work</x-ui.button>
                </div>
                <div class="mt-12 grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($steps as $i => $step)
                        <div class="flex gap-5" data-reveal data-reveal-delay="{{ ($i % 3) * 80 }}">
                            <span class="font-display text-3xl font-extrabold text-teal-500/35">{{ $step->number }}</span>
                            <div><h3 class="font-display text-lg font-bold text-ink">{{ $step->title }}</h3><p class="mt-1.5 text-sm leading-relaxed text-muted">{{ \Illuminate\Support\Str::limit($step->description, 96) }}</p></div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ===================== WHY PARTNER (Awards) ===================== --}}
    <section class="section bg-canvas">
        <div class="container-x">
            <div class="grid gap-12 lg:grid-cols-12 lg:gap-16">
                <div class="lg:col-span-4" data-reveal>
                    <span class="chip">Why Partner With Us</span>
                    <h2 class="mt-5 font-display text-3xl font-bold text-ink sm:text-[2.4rem]">Local Understanding. Strategic Perspective.</h2>
                    <p class="mt-5 leading-relaxed text-muted">International healthcare organisations entering a new market need a local partner who understands the environment and can turn strategy into practical action.</p>
                    <div class="mt-8"><x-ui.button :href="url('/why-partner')" variant="ghost">Why Partner With Us</x-ui.button></div>
                </div>
                <div class="grid gap-6 sm:grid-cols-2 lg:col-span-8" data-reveal data-reveal-delay="120">
                    @foreach ($reasons as $r)
                        <div class="flex gap-4 rounded-3xl bg-white p-6 shadow-card ring-1 ring-line">
                            <span class="icon-circle h-12 w-12 shrink-0"><x-ui.icon :name="$r[0]" class="h-6 w-6" /></span>
                            <div><h3 class="font-display text-lg font-bold text-ink">{{ $r[1] }}</h3><p class="mt-1.5 text-sm leading-relaxed text-muted">{{ $r[2] }}</p></div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- ===================== NETWORK — reviews carousel ===================== --}}
    @if ($network->isNotEmpty())
        <section class="section" x-data="{ scroll(dir) { const t = $refs.rtrack; t.scrollBy({ left: dir * (t.querySelector('article')?.offsetWidth ?? 480) * 1.05, behavior: 'smooth' }); } }">
            <div class="container-x">
                <div class="flex flex-wrap items-end justify-between gap-6" data-reveal>
                    <div class="max-w-2xl">
                        <p class="chip">Healthcare Network</p>
                        <h2 class="mt-5 font-display text-3xl font-bold leading-[1.1] text-ink sm:text-[2.6rem]">Connected Across Tanzania’s Healthcare Ecosystem</h2>
                    </div>
                    <div class="flex gap-3">
                        <button type="button" @click="scroll(-1)" class="grid h-12 w-12 place-items-center rounded-full border border-line text-ink transition hover:border-teal-500 hover:bg-teal-600 hover:text-white" aria-label="Previous"><x-ui.icon name="heroicon-o-arrow-left" class="h-5 w-5" /></button>
                        <button type="button" @click="scroll(1)" class="grid h-12 w-12 place-items-center rounded-full border border-line text-ink transition hover:border-teal-500 hover:bg-teal-600 hover:text-white" aria-label="Next"><x-ui.icon name="heroicon-o-arrow-right" class="h-5 w-5" /></button>
                    </div>
                </div>

                <div x-ref="rtrack" class="mt-12 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" data-reveal>
                    @foreach ($network as $item)
                        <article class="flex w-full max-w-[34rem] shrink-0 snap-start flex-col rounded-3xl bg-white p-9 shadow-card ring-1 ring-line lg:w-[34rem]">
                            <svg class="h-10 w-10 text-teal-500/25" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9.5 5C6.5 6 5 8.5 5 12v6h6v-6H8c0-2 .8-3.4 2.5-4L9.5 5Zm9 0c-3 1-4.5 3.5-4.5 7v6h6v-6h-3c0-2 .8-3.4 2.5-4L18.5 5Z"/></svg>
                            <p class="mt-5 flex-1 text-[1.0625rem] leading-[1.7] text-ink">{{ $item->summary }} {{ \Illuminate\Support\Str::limit(strip_tags($item->body), 150) }}</p>
                            <div class="mt-7 flex items-center gap-4 border-t border-line pt-6">
                                <span class="icon-tile-navy h-12 w-12"><x-ui.icon name="heroicon-o-building-office-2" class="h-6 w-6" /></span>
                                <span class="flex-1">
                                    <span class="block font-display font-bold text-ink">{{ $item->name }}</span>
                                    <span class="block text-xs text-muted">{{ $item->event_dates ? $item->event_dates : 'Established engagement' }}</span>
                                </span>
                                <a href="{{ route('network.show', $item) }}" class="mono inline-flex items-center gap-1.5 text-sm font-semibold text-teal-700 hover:text-teal-800">Read <x-ui.icon name="heroicon-o-arrow-right" class="h-4 w-4" /></a>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ===================== CTA BAND ===================== --}}
    <section class="bg-teal-600">
        <div class="container-x py-16 lg:py-20">
            <div class="flex flex-col items-center gap-6 text-center lg:flex-row lg:justify-between lg:text-left">
                <div class="max-w-2xl">
                    <h2 class="font-display text-3xl font-bold text-white sm:text-[2.6rem]">Looking to Establish or Grow Your Presence in Tanzania?</h2>
                    <p class="mt-3 text-teal-100">Let’s explore the opportunity together.</p>
                </div>
                <a href="{{ route('contact.show') }}" class="inline-flex shrink-0 items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-teal-700 transition hover:bg-teal-50">Let’s Talk <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h9.69L9.72 5.53a.75.75 0 011.06-1.06l5 5a.75.75 0 010 1.06l-5 5a.75.75 0 11-1.06-1.06l3.72-3.72H3.75A.75.75 0 013 10z" clip-rule="evenodd"/></svg></a>
            </div>
        </div>
    </section>

    {{-- ===================== INSIGHTS (Blog) ===================== --}}
    @if ($insights->isNotEmpty())
        <section class="section">
            <div class="container-x">
                <div class="flex flex-wrap items-end justify-between gap-6" data-reveal>
                    <div class="max-w-xl"><p class="chip">Insights</p><h2 class="mt-5 font-display text-3xl font-bold text-ink sm:text-[2.6rem]">Tanzania Healthcare Market Insights</h2></div>
                    <x-ui.button :href="route('insights.index')" variant="ghost" class="shrink-0">View All Insights</x-ui.button>
                </div>
                <div class="mt-14 grid gap-6 md:grid-cols-3">
                    @foreach ($insights as $i => $insight)<div data-reveal data-reveal-delay="{{ $i * 90 }}"><x-cards.insight :insight="$insight" /></div>@endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ===================== ENQUIRY (Appointment) ===================== --}}
    <section class="section bg-canvas">
        <div class="container-x">
            <div class="overflow-hidden rounded-[2.5rem] bg-white shadow-soft ring-1 ring-line lg:grid lg:grid-cols-2">
                <div class="relative hidden bg-gradient-to-br from-teal-600 to-teal-800 p-12 text-white lg:block">
                    <span class="chip-dark">Make an enquiry</span>
                    <h2 class="mt-5 font-display text-3xl font-bold">Let’s Discuss Your Tanzania Healthcare Opportunity</h2>
                    <p class="mt-4 text-teal-100">Market entry, regulatory requirements, commercial opportunities, partnerships, investment or manufacturing — we welcome the opportunity to hear from you.</p>
                    <figure class="mt-10 text-white/90"><x-ui.tanzania-map class="h-56 w-56" /></figure>
                </div>
                <form action="{{ route('contact.store') }}" method="POST" class="p-8 lg:p-12">
                    @csrf
                    <div class="hidden" aria-hidden="true"><label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label></div>
                    @if (session('success'))<div class="mb-5 rounded-xl border border-teal-200 bg-teal-50 px-4 py-3 text-sm text-teal-800">{{ session('success') }}</div>@endif
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-forms.field name="name" label="Name" required />
                        <x-forms.field name="organisation" label="Organisation" />
                        <x-forms.field name="country" label="Country" />
                        <x-forms.field name="email" label="Email" type="email" required />
                    </div>
                    <div class="mt-4">
                        <label for="area_of_interest" class="mb-1.5 block text-sm font-semibold text-ink">Area of Interest</label>
                        <select id="area_of_interest" name="area_of_interest" class="w-full rounded-xl border border-line bg-white px-4 py-3 text-sm text-ink focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20">
                            <option value="">Select an area…</option>
                            @foreach ($areas ?? \App\Http\Controllers\ContactController::AREAS as $area)<option value="{{ $area }}">{{ $area }}</option>@endforeach
                        </select>
                    </div>
                    <div class="mt-4">
                        <label for="message" class="mb-1.5 block text-sm font-semibold text-ink">Message <span class="text-teal-600">*</span></label>
                        <textarea id="message" name="message" rows="4" required class="w-full rounded-xl border border-line bg-white px-4 py-3 text-sm text-ink focus:border-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-500/20" placeholder="How can we support your objectives in Tanzania?"></textarea>
                    </div>
                    <button type="submit" class="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-full bg-teal-600 px-7 py-3.5 text-sm font-semibold text-white transition hover:bg-teal-700">Submit Enquiry <x-ui.icon name="heroicon-o-arrow-right" class="h-4 w-4" /></button>
                </form>
            </div>
        </div>
    </section>
</x-layout>