@extends('layouts.public')
@section('content')
@php
    $tag = trim($site['tagline'] ?? 'Build the school. Prove the progress.');
    $lines = array_values(array_filter(preg_split('/\.\s+/', rtrim($tag, '.')) ?: []));
    $leaks = $copy['leaks'] ?? [];
    $principles = $copy['principles'] ?? [];
@endphp

<section class="hero">
    <div class="hero-grid" aria-hidden="true"></div>
    <div class="hero-glow" aria-hidden="true"></div>
    <div class="hero-grain" aria-hidden="true"></div>
    <div class="relative z-10 mx-auto grid max-w-6xl items-center gap-12 px-5 lg:grid-cols-12 lg:gap-10">
        <div class="rise lg:col-span-7">
            <p class="hero-chip">
                <span class="h-1.5 w-1.5 rounded-full bg-[#c4a06a]"></span>
                {{ $site['category'] ?? 'Installed School Growth' }} · {{ $site['city'] ?? 'Lahore' }}
            </p>
            <h1 class="display-hero mt-6 max-w-3xl">
                @foreach($lines as $line)
                    <span class="block {{ $loop->last && $loop->count > 1 ? 'gold-text' : '' }}">{{ $line }}.</span>
                @endforeach
            </h1>
            <p class="speakable mt-6 max-w-xl text-base leading-7 text-cream/75 sm:text-lg sm:leading-8">{{ $site['position'] }}</p>
            <div class="mt-8 flex flex-col gap-3 sm:flex-row">
                <a href="{{ route('scan') }}" data-track="offer_click" class="btn btn-light"><i data-lucide="clipboard-list" class="h-4 w-4"></i> Book a School Health Scan <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
                <a href="#fit" class="btn btn-line border-white/30"><i data-lucide="compass" class="h-4 w-4"></i> Find the right engagement</a>
            </div>
            <dl class="hero-facts">
                @foreach($copy['facts'] ?? [] as $fact)
                    <div><dd><strong>{{ $fact['title'] }}</strong><span>{{ $fact['text'] }}</span></dd></div>
                @endforeach
            </dl>
        </div>
        <aside class="hero-frame rise lg:col-span-5" style="animation-delay:.12s" aria-labelledby="campus-frame">
            <div class="hero-scan" aria-hidden="true"></div>
            <div class="relative flex items-start justify-between gap-3">
                <div>
                    <p class="text-[11px] uppercase tracking-[0.18em] text-[#c4a06a]">Campus frame</p>
                    <h2 id="campus-frame" class="mt-1 text-xl font-semibold tracking-tight">Five domains, unsigned</h2>
                </div>
                <p class="rounded-full border border-white/15 px-2.5 py-1 text-[10px] uppercase tracking-[0.14em] text-white/55">Sample</p>
            </div>
            <ul class="relative mt-5">
                @foreach($copy['domains'] as $domain)
                    <li class="flex items-center justify-between gap-3 border-b border-white/10 py-2.5 text-sm">
                        <span class="flex items-center gap-3">
                            <span class="grid h-7 w-7 place-items-center rounded-full border border-[#c4a06a]/45 text-[11px] text-[#c4a06a]">0{{ $loop->iteration }}</span>
                            {{ $domain['name'] }}
                        </span>
                        <span class="text-[10px] uppercase tracking-[0.14em] text-white/40">Unsigned</span>
                    </li>
                @endforeach
            </ul>
            <ol class="relative mt-5 grid grid-cols-4 gap-2">
                @foreach($copy['steps'] as $step)
                    <li>
                        <span class="block h-0.5 rounded-full bg-gradient-to-r from-[#c4a06a] to-white/15"></span>
                        <p class="mt-2 text-[10px] uppercase tracking-[0.12em] text-white/40">{{ $step['when'] }}</p>
                        <p class="mt-0.5 text-xs font-semibold leading-4">{{ $step['title'] }}</p>
                    </li>
                @endforeach
            </ol>
            <p class="relative mt-4 text-[11px] leading-5 text-white/45">Not a client result. A number appears only after the owner signs the definition.</p>
        </aside>
    </div>
    <div class="relative z-10 mx-auto mt-12 max-w-6xl px-5 lg:mt-16">
        <div class="rail sm:grid-cols-3">
            @foreach($principles as $row)
                <div class="flex gap-3 border-line px-5 py-5 sm:border-r last:border-r-0 {{ $loop->first ? '' : 'border-t sm:border-t-0' }}">
                    <i data-lucide="{{ $row['icon'] }}" class="mt-0.5 h-5 w-5 shrink-0 text-brass"></i>
                    <div>
                        <p class="font-semibold">{{ $row['title'] }}</p>
                        <p class="mt-1 text-sm leading-6 text-muted">{{ $row['text'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="mx-auto max-w-6xl px-5 py-20 lg:py-24">
    <p class="kicker">01 — The leaks</p>
    <h2 class="section-title mt-3 max-w-2xl">What the owner is already paying</h2>
    <p class="mt-4 max-w-xl text-sm leading-7 text-muted">These are not marketing problems. They are the cost of a school that still runs on the owner.</p>
    <div class="mt-10 grid gap-4 md:grid-cols-2">
        @foreach($leaks as $row)
            <article class="leak {{ $loop->iteration % 2 === 1 ? 'md:min-h-44' : '' }}">
                <div class="flex items-center justify-between">
                    <i data-lucide="{{ $row['icon'] }}" class="h-5 w-5 text-brass"></i>
                    <span class="text-xs font-semibold tracking-[0.16em] text-brass">0{{ $loop->iteration }}</span>
                </div>
                <h3 class="mt-8 text-2xl font-semibold tracking-tight">{{ $row['title'] }}</h3>
                <p class="mt-2 max-w-sm text-sm leading-6 text-muted">{{ $row['text'] }}</p>
            </article>
        @endforeach
    </div>
</section>

<section id="fit" class="scroll-mt-28 bg-cream py-16 lg:py-20">
    <div class="mx-auto max-w-6xl px-5">
        @include('components.owner-fit')
    </div>
</section>

<section class="mx-auto max-w-6xl px-5 py-20 lg:py-24">
    <p class="kicker">03 — How to buy it</p>
    <h2 class="section-title mt-3 max-w-2xl">Four engagements. One method.</h2>
    <div class="mt-10 grid gap-4 lg:grid-cols-3">
        @foreach($offers as $offer)
            @if($loop->first)
                <a href="{{ route('offers.show', $offer) }}" data-track="offer_click" data-offer="{{ $offer->slug }}" class="offer-feature group lg:col-span-3 lg:grid lg:grid-cols-[auto_1fr_auto] lg:items-end lg:gap-10">
                    <span class="text-sm font-semibold tracking-[0.18em] text-[#c4a06a]">0{{ $loop->iteration }}</span>
                    <span>
                        <span class="block text-xs uppercase tracking-[0.16em] text-cream/50">{{ $offer->duration }} · start here</span>
                        <span class="mt-2 block text-3xl font-semibold tracking-tight sm:text-4xl">{{ $offer->title }}</span>
                        <span class="mt-3 block max-w-2xl text-sm leading-6 text-cream/70">{{ $offer->summary }}</span>
                    </span>
                    <span class="mt-6 inline-flex items-center gap-2 text-sm font-semibold lg:mt-0">See the deliverables <i data-lucide="arrow-right" class="h-4 w-4 transition group-hover:translate-x-0.5"></i></span>
                </a>
            @else
                <a href="{{ route('offers.show', $offer) }}" data-track="offer_click" data-offer="{{ $offer->slug }}" class="offer-card group">
                    <span class="text-sm font-semibold text-brass">0{{ $loop->iteration }}</span>
                    <span class="mt-4 block text-[11px] uppercase tracking-[0.16em] text-muted">{{ $offer->duration }}</span>
                    <span class="mt-2 block text-2xl font-semibold tracking-tight">{{ $offer->title }}</span>
                    <span class="mt-3 block flex-1 text-sm leading-6 text-muted">{{ $offer->summary }}</span>
                    <span class="mt-6 inline-flex items-center gap-1 text-sm font-semibold">Open <i data-lucide="arrow-right" class="h-4 w-4 transition group-hover:translate-x-0.5"></i></span>
                </a>
            @endif
        @endforeach
    </div>
</section>

<section class="bg-cream py-20 lg:py-24">
    <div class="mx-auto max-w-6xl px-5">
        <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
                <p class="kicker">04 — Edspire 90</p>
                <h2 class="section-title mt-3">The only public method</h2>
            </div>
            <a href="{{ route('method') }}" class="inline-flex items-center gap-1 text-sm font-semibold text-brass-deep"><i data-lucide="calendar" class="h-4 w-4"></i> Open the full calendar</a>
        </div>
        <ol class="mt-10 grid gap-4 md:grid-cols-4">
            @foreach($copy['steps'] as $i => $step)
                <li class="step-card panel p-5">
                    <span class="grid h-9 w-9 place-items-center rounded-full bg-ink text-xs font-semibold text-cream">0{{ $i + 1 }}</span>
                    <p class="mt-4 text-[11px] font-semibold uppercase tracking-[0.16em] text-brass">{{ $step['when'] }}</p>
                    <h3 class="mt-2 text-lg font-semibold tracking-tight">{{ $step['title'] }}</h3>
                    <p class="mt-2 text-sm leading-6 text-muted">{{ $step['text'] }}</p>
                </li>
            @endforeach
        </ol>
        <div class="mt-12">
            <p class="mb-3 text-sm font-semibold">Audit to action</p>
            @include('components.audit-trail')
        </div>
    </div>
</section>

<section class="mx-auto max-w-6xl px-5 py-20 lg:py-24">
    <p class="kicker">05 — The buying criterion</p>
    <h2 class="section-title mt-3 max-w-3xl">Not a workshop. Not a franchise. An installed system.</h2>
    <div class="mt-10">@include('components.compare')</div>
</section>

<section class="bg-cream py-20 lg:py-24">
    <div class="mx-auto grid max-w-6xl gap-8 px-5 lg:grid-cols-[.8fr_1.2fr]">
        <div class="panel overflow-hidden">
            @if(!empty($site['founder_photo']))
                <img src="{{ $site['founder_photo'] }}" alt="{{ $site['founder_name'] }}, {{ $site['founder_role'] }} of Edspire Global" class="founder-photo" width="1200" height="900">
            @endif
            <div class="bg-ink px-6 py-8 text-cream">
                <p class="kicker text-[#c4a06a]">06 — Founder</p>
                @if(empty($site['founder_photo']))
                    <p class="mt-6 grid h-16 w-16 place-items-center rounded-2xl border border-white/15 text-xl font-semibold">TG</p>
                @endif
                <h2 class="mt-5 text-3xl font-semibold tracking-tight">{{ $site['founder_name'] }}</h2>
                <p class="mt-1 text-sm text-cream/60">{{ $site['founder_role'] }}</p>
            </div>
            <div class="px-6 py-6">
                <p class="text-sm leading-7">{{ $site['founder_bio'] }}</p>
                <a href="{{ route('about') }}" class="mt-5 inline-flex items-center gap-1 text-sm font-semibold">The practice <i data-lucide="arrow-right" class="h-4 w-4"></i></a>
            </div>
        </div>
        <div>
            <h2 class="section-title text-[clamp(1.7rem,3vw,2.4rem)]">Questions before a scan</h2>
            <div class="mt-6 divide-y divide-line rounded-[1.35rem] border border-line bg-paper" x-data="{ open: null }">
                @foreach($faqs as $faq)
                    <div>
                        <button type="button" class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left font-semibold" @click="open = open === {{ $faq->id }} ? null : {{ $faq->id }}" :aria-expanded="(open === {{ $faq->id }}).toString()">
                            {{ $faq->question }}
                            <i data-lucide="plus" class="h-4 w-4 shrink-0" x-show="open !== {{ $faq->id }}"></i>
                            <i data-lucide="minus" class="h-4 w-4 shrink-0" x-show="open === {{ $faq->id }}" x-cloak></i>
                        </button>
                        <div x-show="open === {{ $faq->id }}" x-cloak class="px-5 pb-4 text-sm leading-6 text-muted">{{ $faq->answer }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

@if($insights->isNotEmpty())
<section class="mx-auto max-w-6xl px-5 py-20 lg:py-24">
    <div class="mb-8 flex items-end justify-between gap-4">
        <div>
            <p class="kicker">07 — Reading</p>
            <h2 class="section-title mt-3">For owners</h2>
        </div>
        <a href="{{ route('insights') }}" class="inline-flex items-center gap-1 text-sm font-semibold"><i data-lucide="notebook-pen" class="h-4 w-4"></i> All insights</a>
    </div>
    <div class="grid gap-4 md:grid-cols-3">
        @foreach($insights as $post)
            <a href="{{ route('insights.show', $post) }}" class="leak flex h-full flex-col">
                <p class="text-[11px] uppercase tracking-[0.16em] text-brass">Insight</p>
                <h3 class="mt-6 text-2xl font-semibold leading-8 tracking-tight">{{ $post->title }}</h3>
                <p class="mt-3 text-sm leading-6 text-muted">{{ $post->excerpt }}</p>
            </a>
        @endforeach
    </div>
</section>
@endif

<section class="relative overflow-hidden bg-ink text-cream">
    <div class="hero-grid opacity-60" aria-hidden="true"></div>
    <div class="relative mx-auto flex max-w-6xl flex-col items-start justify-between gap-8 px-5 py-20 lg:flex-row lg:items-end lg:py-24">
        <div>
            <p class="kicker text-[#c4a06a]">The small first decision</p>
            <h2 class="section-title mt-4 max-w-3xl text-cream">Five domains. An owner readout. Then you choose.</h2>
        </div>
        <a href="{{ route('scan') }}" data-track="offer_click" class="btn btn-light shrink-0"><i data-lucide="clipboard-list" class="h-4 w-4"></i> Book the scan</a>
    </div>
</section>
@endsection