@extends('layouts.site')

@section('meta_description', setting('meta_description', ''))

@section('content')

{{-- ================= HERO ================= --}}
<section class="relative overflow-hidden">
    <div class="wrap grid items-center gap-14 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
        <div>
            @if ($comingSoon)
                <p class="inline-flex items-center gap-2 rounded-full border border-amber/40 bg-amber/10 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-amber">
                    <span class="tele-dot bg-amber!"></span> Pre-launch &middot; early access opening soon
                </p>
            @endif

            <h1 class="mt-5 text-4xl font-extrabold leading-[1.05] sm:text-5xl lg:text-[3.4rem]">
                {{ setting('hero_headline', 'Every pump, tank and bore. One dashboard.') }}
            </h1>

            <p class="mt-5 max-w-xl text-lg text-ink/70">
                {{ setting('hero_subline', 'FarmPilot connects the gear you already own — diesel pumps, tanks, bores, weather stations, solar — and lets you automate it in plain English. No more driving 40 minutes to flick a switch.') }}
            </p>

            <form id="waitlist" method="POST" action="{{ route('newsletter.subscribe') }}"
                  class="mt-8 flex max-w-md flex-col gap-3 sm:flex-row">
                @csrf
                <input type="hidden" name="source" value="coming-soon">
                <input type="text" name="company_website" value="" class="hidden" tabindex="-1" autocomplete="off" aria-hidden="true">
                <label for="hero-email" class="sr-only">Email address</label>
                <input id="hero-email" type="email" name="email" required
                       placeholder="you@station.com.au" class="field-input sm:flex-1">
                <button type="submit" class="btn-water shrink-0">
                    {{ $comingSoon ? 'Get early access' : 'Start free' }}
                </button>
            </form>
            @error('email')
                <p class="mt-2 text-sm text-red-700">{{ $message }}</p>
            @enderror
            <p class="mt-3 text-xs text-stone">
                Founding members lock in launch pricing for life. Unsubscribe any time.
            </p>
        </div>

        {{-- Signature: live-style telemetry panel --}}
        <div class="tele-panel rounded-xl p-6" aria-hidden="true">
            <div class="flex items-center justify-between border-b border-white/10 pb-4">
                <p class="tele-label text-white/70!">NORTH BORE &middot; BLOCK 7</p>
                <p class="flex items-center gap-2 text-[11px] uppercase tracking-wider text-emerald-400" style="font-family: var(--font-tele)">
                    <span class="tele-dot"></span> Online
                </p>
            </div>

            <div class="mt-2">
                <div class="tele-row"><span class="tele-label">Pump</span><span class="tele-value" data-tele="rpm">RUNNING &middot; 1,840 rpm</span></div>
                <div class="tele-row"><span class="tele-label">Header tank</span><span class="tele-value" data-tele="tank">62%</span></div>
                <div class="tele-row"><span class="tele-label">Oil pressure</span><span class="tele-value">312 kPa</span></div>
                <div class="tele-row"><span class="tele-label">Soil moisture</span><span class="tele-warn tele-value" data-tele="soil">19%</span></div>
                <div class="tele-row"><span class="tele-label">Rain (24h)</span><span class="tele-value">0.2 mm</span></div>
                <div class="tele-row border-0!"><span class="tele-label">Solar</span><span class="tele-value" data-tele="solar">4.1 kW</span></div>
            </div>

            <div class="mt-5 rounded-lg border border-emerald-900/60 bg-emerald-950/40 p-4" style="font-family: var(--font-tele)">
                <p class="text-[11px] uppercase tracking-wider text-white/45">Automation rule &middot; active</p>
                <p class="mt-2 text-[13px] leading-relaxed text-emerald-200">
                    <span class="text-white/60">IF</span> tank &lt; 40%
                    <span class="text-white/60">AND</span> no rain forecast<br>
                    <span class="text-white/60">THEN</span> start pump &rarr; SMS Dave
                </p>
            </div>
        </div>
    </div>
</section>

{{-- ================= DEVICE RAIL ================= --}}
<section class="border-y border-hairline bg-white/60">
    <div class="wrap flex flex-wrap items-center gap-x-8 gap-y-3 py-5 text-[13px]" style="font-family: var(--font-tele)">
        <span class="eyebrow tracking-[0.18em]!">Connects</span>
        @foreach (['Diesel pumps', 'Water tanks', 'Bores', 'Weather stations', 'Solar & batteries', 'Generators', 'Soil probes', 'Cameras'] as $device)
            <span class="text-ink/70">{{ $device }}</span>
        @endforeach
        <span class="text-stone">+ anything with an API</span>
    </div>
</section>

{{-- ================= FEATURES ================= --}}
@if (count($features))
<section class="wrap py-20" id="features">
    <p class="eyebrow">What FarmPilot does</p>
    <h2 class="mt-3 max-w-2xl text-3xl font-bold sm:text-4xl">Built for the way a farm actually runs</h2>

    <div class="mt-12 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($features as $feature)
            <div class="border-t-2 border-field pt-5">
                @if (empty!($feature['tag']))
                    <p class="eyebrow text-field!">{{ $feature['tag'] }}</p>
                @endif
                <h3 class="mt-2 text-lg font-bold">{{ $feature['title'] }}</h3>
                <p class="mt-2 text-[15px] leading-relaxed text-ink/70">{{ $feature['description'] }}</p>
            </div>
        @endforeach
    </div>
</section>
@endif

{{-- ================= TESTIMONIALS ================= --}}
@if ($testimonials->isNotEmpty())
<section class="border-y border-hairline bg-field-deep text-paper">
    <div class="wrap py-20">
        <p class="eyebrow text-paper/50!">From the paddock</p>
        <h2 class="mt-3 text-3xl font-bold sm:text-4xl">Farmers testing FarmPilot</h2>

        <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($testimonials as $testimonial)
                <figure class="rounded-lg border border-white/10 bg-white/5 p-6">
                    <blockquote class="text-[15px] leading-relaxed text-paper/90">
                        &ldquo;{{ $testimonial->quote }}&rdquo;
                    </blockquote>
                    <figcaption class="mt-5 flex items-center gap-3">
                        @if ($testimonial->avatar)
                            <img src="{{ Storage::disk('public')->url($testimonial->avatar) }}" alt=""
                                 class="size-10 rounded-full object-cover" loading="lazy">
                        @endif
                        <div>
                            <p class="text-sm font-semibold">{{ $testimonial->name }}</p>
                            @if ($testimonial->role_company)
                                <p class="text-xs text-paper/55">{{ $testimonial->role_company }}</p>
                            @endif
                        </div>
                    </figcaption>
                </figure>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ================= PLANS PREVIEW ================= --}}
@if ($plans->isNotEmpty())
<section class="wrap py-20" id="pricing">
    <div class="flex flex-wrap items-end justify-between gap-4">
        <div>
            <p class="eyebrow">Pricing</p>
            <h2 class="mt-3 text-3xl font-bold sm:text-4xl">Flat, predictable pricing</h2>
            <p class="mt-3 max-w-xl text-ink/70">No per-API-call surprises. Pick a tier, connect your gear, get on with the season.</p>
        </div>
        <a href="{{ route('plans') }}" class="btn-ghost">Compare plans</a>
    </div>

    <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
        @foreach ($plans as $plan)
            <div class="relative rounded-xl border {{ $plan->highlighted ? 'border-amber shadow-lg shadow-amber/10' : 'border-hairline' }} bg-white p-6">
                @if ($plan->highlighted)
                    <p class="absolute -top-3 left-6 rounded-full bg-amber px-3 py-0.5 text-[11px] font-bold uppercase tracking-wider text-white">Most popular</p>
                @endif
                <h3 class="text-lg font-bold">{{ $plan->name }}</h3>
                <p class="mt-1 text-sm text-stone">{{ $plan->description }}</p>
                <p class="mt-4 display text-3xl font-extrabold">
                    ${{ number_format($plan->price_cents / 100, 0) }}<span class="text-sm font-medium text-stone">/{{ $plan->interval }}</span>
                </p>
                <ul class="mt-5 space-y-2 text-sm text-ink/80">
                    @foreach ($plan->features ?? [] as $feature)
                        <li class="flex gap-2"><span class="text-field">&#10003;</span> {{ $feature }}</li>
                    @endforeach
                </ul>
            </div>
        @endforeach
    </div>
</section>
@endif

{{-- ================= FINAL CTA ================= --}}
<section class="wrap pb-8">
    <div class="tele-panel rounded-xl px-8 py-12 text-center sm:px-16">
        <p class="eyebrow text-emerald-400/80!">{{ $comingSoon ? 'Launching soon' : 'Get started' }}</p>
        <h2 class="mt-3 text-3xl font-bold text-white sm:text-4xl">Stop driving out to flick switches</h2>
        <p class="mx-auto mt-3 max-w-xl text-paper/60">
            Join the early access list and be first through the gate — founding members keep launch pricing for life.
        </p>
        <form method="POST" action="{{ route('newsletter.subscribe') }}"
              class="mx-auto mt-7 flex max-w-md flex-col gap-3 sm:flex-row">
            @csrf
            <input type="hidden" name="source" value="cta">
            <input type="text" name="company_website" value="" class="hidden" tabindex="-1" autocomplete="off" aria-hidden="true">
            <label for="cta-email" class="sr-only">Email address</label>
            <input id="cta-email" type="email" name="email" required placeholder="you@station.com.au"
                   class="field-input border-white/15! bg-white/10! text-white! placeholder:text-white/40! sm:flex-1">
            <button type="submit" class="btn-water shrink-0">Join the list</button>
        </form>
    </div>
</section>

@endsection

@push('scripts')
<script>
    // Gentle telemetry drift on the hero panel. Respects reduced motion.
    if (window.matchMedia!('(prefers-reduced-motion: reduce)').matches) {
        const drift = (el, fn, ms) => el && setInterval(() => { el.textContent = fn(); }, ms);
        const rand = (min, max) => Math.floor(min + Math.random() * (max - min));

        drift(document.querySelector('[data-tele="rpm"]'),   () => `RUNNING · ${rand(1815, 1875).toLocaleString()} rpm`, 2600);
        drift(document.querySelector('[data-tele="tank"]'),  () => `${rand(61, 64)}%`, 4800);
        drift(document.querySelector('[data-tele="soil"]'),  () => `${rand(18, 21)}%`, 6200);
        drift(document.querySelector('[data-tele="solar"]'), () => `${(rand(38, 44) / 10).toFixed(1)} kW`, 3400);
    }
</script>
@endpush
