@extends('layouts.app')

@section('title', 'Instant Book OOH/DOOH')

@section('content')

{{-- ============================================================
     HERO
============================================================ --}}
<section style="padding: 60px 0 30px;">
    <div class="nx-wrap">
        <div class="nx-grid-main">

            {{-- Left: copy --}}
            <div>
                <span class="nx-badge nx-badge-accent" style="margin-bottom:16px;">
                    Platform-first · Instant Book DOOH · Guardrail offers for billboards · Proof-backed payouts
                </span>

                <h1 style="font-size:clamp(32px,4vw,54px); margin:14px 0 16px;">
                    Buy outdoor media<br>like e-commerce.
                </h1>

                <p class="nx-muted" style="font-size:16px; line-height:1.7; max-width:52ch; margin:0 0 24px;">
                    Nexus is not a broker. Owners publish availability and pricing rules,
                    advertisers book and pay on-platform, proof is submitted to a standard,
                    and payouts release after verification rules pass.
                </p>

                {{-- Badges --}}
                <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;">
                    <span class="nx-badge nx-badge-good">✔ On-platform payment</span>
                    <span class="nx-badge nx-badge-good">✔ Proof-of-posting SLA</span>
                    <span class="nx-badge nx-badge-warn">⚡ Instant Book (DOOH)</span>
                    <span class="nx-badge nx-badge-warn">⚖ Guardrail offers (billboards)</span>
                </div>

                {{-- CTAs --}}
                <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px;">
                    <a class="nx-btn nx-btn-primary nx-btn-lg" href="{{ route('explore') }}">
                        Explore & book now
                    </a>
                    @guest
                        <a class="nx-btn nx-btn-lg" href="{{ route('register') }}">
                            Create account
                        </a>
                    @else
                        <a class="nx-btn nx-btn-lg" href="{{ route('advertiser.dashboard') }}">
                            Advertiser portal
                        </a>
                    @endguest
                </div>

                {{-- Stats --}}
                <div style="display:flex; gap:28px; flex-wrap:wrap;">
                    <div>
                        <div style="font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:800;">
                            {{ $doohCount }}+
                        </div>
                        <div class="nx-muted" style="font-size:13px;">DOOH screens</div>
                    </div>
                    <div style="width:1px; background:var(--nx-line);"></div>
                    <div>
                        <div style="font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:800;">
                            {{ $billboardCount }}+
                        </div>
                        <div class="nx-muted" style="font-size:13px;">Billboard placements</div>
                    </div>
                    <div style="width:1px; background:var(--nx-line);"></div>
                    <div>
                        <div style="font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:800;">
                            {{ $cityCount }}
                        </div>
                        <div class="nx-muted" style="font-size:13px;">Cities covered</div>
                    </div>
                </div>
            </div>

            {{-- Right: quick search panel --}}
            <div class="nx-panel">
                <div style="padding:20px;">
                    <div style="font-size:11px; font-weight:800; text-transform:uppercase;
                                letter-spacing:.08em; color:var(--nx-muted); margin-bottom:14px;">
                        Quick search
                    </div>
                    <p class="nx-muted" style="font-size:13px; margin:0 0 14px;">
                        Select placements → checkout → upload creative → proof → report.
                    </p>

                    <div class="nx-divider"></div>

                    <form action="{{ route('explore') }}" method="GET">
                        <label class="nx-label">What do you want to book?</label>
                        <select class="nx-select" name="type">
                            <option value="">DOOH + OOH (all)</option>
                            <option value="dooh">DOOH — Digital screens (Instant Book)</option>
                            <option value="ooh">OOH — Billboards (Guardrail Offer)</option>
                        </select>

                        <div class="nx-grid-2" style="margin-top:2px;">
                            <div>
                                <label class="nx-label">City</label>
                                <select class="nx-select" name="city">
                                    <option value="">All cities</option>
                                    <option value="Nairobi">Nairobi</option>
                                    <option value="Mombasa">Mombasa</option>
                                    <option value="Kisumu">Kisumu</option>
                                    <option value="Nakuru">Nakuru</option>
                                </select>
                            </div>
                            <div>
                                <label class="nx-label">Budget max (KES)</label>
                                <select class="nx-select" name="budget_max">
                                    <option value="">Any budget</option>
                                    <option value="500000">Up to 500k</option>
                                    <option value="1000000">Up to 1M</option>
                                    <option value="3000000">Up to 3M</option>
                                </select>
                            </div>
                        </div>

                        <label class="nx-label">Preferred area</label>
                        <input class="nx-input" name="area"
                               placeholder="Westlands, CBD, Thika Rd, Mombasa Rd"/>

                        <div class="nx-grid-2">
                            <div>
                                <label class="nx-label">Start date</label>
                                <input class="nx-input" type="date" name="start_date"
                                       min="{{ now()->toDateString() }}"/>
                            </div>
                            <div>
                                <label class="nx-label">End date</label>
                                <input class="nx-input" type="date" name="end_date"
                                       min="{{ now()->toDateString() }}"/>
                            </div>
                        </div>

                        <div class="nx-divider"></div>

                        <button type="submit" class="nx-btn nx-btn-primary"
                                style="width:100%; margin-bottom:10px;">
                            Search inventory
                        </button>

                        <p class="nx-muted" style="font-size:12px; margin:0;">
                            Availability must be maintained · Pricing must be fixed or guardrailed ·
                            Proof must meet SLA.
                        </p>
                    </form>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- ============================================================
     FEATURE CARDS
============================================================ --}}
<section style="padding:40px 0;">
    <div class="nx-wrap">
        <div class="nx-grid-3">

            <div class="nx-card">
                <div style="width:42px;height:42px;border-radius:16px;display:grid;
                            place-items:center;font-weight:900;font-size:18px;
                            background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.25);
                            margin-bottom:14px;">
                    ↯
                </div>
                <h4 style="margin:0 0 8px;">Instant booking (DOOH)</h4>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">
                    Slot-based inventory with fixed pricing and schedule visibility.
                    Book and pay in minutes with no back-and-forth.
                </p>
            </div>

            <div class="nx-card">
                <div style="width:42px;height:42px;border-radius:16px;display:grid;
                            place-items:center;font-weight:900;font-size:18px;
                            background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.25);
                            margin-bottom:14px;">
                    ≋
                </div>
                <h4 style="margin:0 0 8px;">Guardrail negotiation (OOH)</h4>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">
                    Offers are automated by owner rules: auto-accept, auto-counter,
                    or auto-reject. No manual back-and-forth required.
                </p>
            </div>

            <div class="nx-card">
                <div style="width:42px;height:42px;border-radius:16px;display:grid;
                            place-items:center;font-weight:900;font-size:18px;
                            background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.25);
                            margin-bottom:14px;">
                    ✓
                </div>
                <h4 style="margin:0 0 8px;">Payout after proof</h4>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">
                    Funds release when proof passes policy checks. Owners that miss
                    SLAs get ranked down and paid later.
                </p>
            </div>

        </div>
    </div>
</section>

{{-- ============================================================
     FEATURED PLACEMENTS
============================================================ --}}
@if($featuredPlacements->count())
<section style="padding:40px 0;">
    <div class="nx-wrap">
        <div style="display:flex; justify-content:space-between; align-items:center;
                    flex-wrap:wrap; gap:12px; margin-bottom:20px;">
            <div>
                <h2 style="margin:0 0 6px;">Featured placements</h2>
                <p class="nx-muted" style="margin:0;">
                    Hand-picked high-compliance inventory.
                </p>
            </div>
            <a class="nx-btn" href="{{ route('explore') }}">View all →</a>
        </div>

        <div class="nx-grid-3">
            @foreach($featuredPlacements as $placement)
            <div class="nx-card" style="padding:0; overflow:hidden;">

                {{-- Thumbnail --}}
                <div style="height:160px; background:
                    {{ $placement->isDooh()
                        ? 'linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,197,94,.12))'
                        : 'linear-gradient(135deg,rgba(251,191,36,.16),rgba(124,92,255,.10))' }};
                    display:flex; align-items:flex-end; padding:12px;">
                    <span class="nx-badge {{ $placement->isInstantBook() ? 'nx-badge-good' : 'nx-badge-warn' }}">
                        {{ $placement->getBookingModeBadge() }}
                    </span>
                </div>

                <div style="padding:16px;">
                    <h4 style="margin:0 0 6px; font-size:15px;">{{ $placement->name }}</h4>
                    <p class="nx-muted" style="margin:0 0 10px; font-size:13px; line-height:1.5;">
                        {{ $placement->area }}, {{ $placement->city }}
                        · Trust: {{ $placement->trust_score }}/5
                    </p>

                    @if($placement->pricingPolicy)
                    <div style="font-weight:800; margin-bottom:12px;">
                        {{ $placement->pricingPolicy->getFormattedPrice() }}
                        <span class="nx-muted" style="font-weight:400; font-size:13px;">
                            / {{ $placement->pricingPolicy->billing_period }}
                        </span>
                    </div>
                    @endif

                    <a class="nx-btn nx-btn-primary"
                       style="width:100%;"
                       href="{{ $placement->isDooh()
                            ? route('placement.dooh', $placement)
                            : route('placement.billboard', $placement) }}">
                        {{ $placement->isInstantBook() ? 'Book now' : 'Make offer' }}
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============================================================
     HOW IT WORKS
============================================================ --}}
<section style="padding:40px 0;" id="how-it-works">
    <div class="nx-wrap">
        <h2 style="margin:0 0 8px;">How it works (platform-first)</h2>
        <p class="nx-muted" style="margin:0 0 24px; max-width:70ch;">
            We don't rely on ops to coordinate deals. Owners publish availability and rules;
            advertisers book and pay; the platform enforces proof requirements and payout release.
        </p>

        <div class="nx-grid-3">
            @foreach([
                ['1', 'Inventory is structured',
                 'Each placement has a Nexus ID, availability calendar, pricing policy, and proof template.'],
                ['2', 'Book and pay',
                 'DOOH is instant-book at fixed price. Billboards use automated offers within owner guardrails.'],
                ['3', 'Proof → payout → report',
                 'Owners submit proof within SLA. Platform validates. Payout releases. Report generates automatically.'],
            ] as [$n, $title, $desc])
            <div class="nx-card" style="background:rgba(17,28,63,.34);">
                <div style="width:34px;height:34px;border-radius:12px;display:grid;
                            place-items:center;font-weight:900;
                            background:rgba(124,92,255,.18);border:1px solid rgba(124,92,255,.25);
                            margin-bottom:14px;">
                    {{ $n }}
                </div>
                <h4 style="margin:0 0 8px;">{{ $title }}</h4>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">{{ $desc }}</p>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ============================================================
     PROOF & SLAs
============================================================ --}}
<section style="padding:40px 0;" id="proof">
    <div class="nx-wrap">
        <h2 style="margin:0 0 8px;">Proof & SLAs</h2>
        <p class="nx-muted" style="margin:0 0 24px; max-width:70ch;">
            Proof isn't a nice-to-have. It's how the platform enforces quality.
            Miss the SLA, fail proof checks, or lose disputes — your trust score drops.
        </p>

        <div class="nx-grid-3">
            <div class="nx-card">
                <div class="nx-badge nx-badge-good" style="margin-bottom:12px;">✓ Standard templates</div>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">
                    DOOH: screen photo + playback log. Billboards: minimum 3 images
                    (wide, close, angle/traffic direction).
                </p>
            </div>
            <div class="nx-card">
                <div class="nx-badge nx-badge-warn" style="margin-bottom:12px;">⏱ SLA windows</div>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">
                    Proof must be uploaded within the defined window (e.g., 24 hours).
                    Automated reminders and penalties apply.
                </p>
            </div>
            <div class="nx-card">
                <div class="nx-badge" style="margin-bottom:12px;">⚑ Dispute workflow</div>
                <p class="nx-muted" style="margin:0; font-size:14px; line-height:1.6;">
                    Evidence-based tickets. Payout holds until resolution.
                    Outcomes feed trust score and ranking.
                </p>
            </div>
        </div>
    </div>
</section>

{{-- ============================================================
     CTA BANNER
============================================================ --}}
<section style="padding:40px 0 60px;">
    <div class="nx-wrap">
        <div class="nx-card" style="text-align:center; padding:48px 24px;
             background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(34,197,94,.06));">
            <h2 style="margin:0 0 12px;">Ready to book outdoor media the right way?</h2>
            <p class="nx-muted" style="margin:0 0 24px; max-width:55ch; margin-left:auto; margin-right:auto;">
                Instant Book DOOH screens or make guardrail offers on billboards.
                Payment, proof, and reporting all in one place.
            </p>
            <div style="display:flex; gap:12px; justify-content:center; flex-wrap:wrap;">
                <a class="nx-btn nx-btn-primary nx-btn-lg" href="{{ route('explore') }}">
                    Explore inventory
                </a>
                @guest
                <a class="nx-btn nx-btn-lg" href="{{ route('register') }}">
                    Create free account
                </a>
                @endguest
            </div>
        </div>
    </div>
</section>

@endsection