@extends('layouts.marketing')

@section('content')
    <section class="grid gap-12 pb-20 pt-8 lg:grid-cols-[1.08fr_0.92fr] lg:items-center">
        <div class="space-y-8">
            <div class="inline-flex rounded-full border border-orange-300/20 bg-orange-300/10 px-4 py-2 text-sm text-orange-100">
                AI estimating software for painters, HVAC, plumbing, electrical, and general contractors
            </div>

            <div class="space-y-6">
                <h1 class="max-w-4xl text-5xl font-bold tracking-tight text-white sm:text-6xl xl:text-7xl">
                    Turn rough job notes into a clean, client-ready estimate before your next call ends.
                </h1>
                <p class="max-w-2xl text-lg leading-8 text-slate-300 sm:text-xl">
                    ContractorEstimateAI helps American contractors move faster from lead to signed work. Describe the job once, then generate line items, pricing, and a polished PDF proposal without the usual admin drag.
                </p>
            </div>

            <div class="flex flex-wrap gap-4">
                <a href="{{ route('register') }}" class="rounded-full bg-orange-500 px-7 py-3 text-base font-semibold text-slate-950 transition hover:bg-orange-400">Start Free</a>
                <a href="{{ route('marketing.pricing') }}" class="rounded-full border border-white/10 px-7 py-3 text-base font-semibold text-white transition hover:bg-white/10">See Plans</a>
            </div>

            <div class="flex flex-wrap gap-2 text-xs text-slate-300">
                <span class="rounded-full border border-white/10 bg-white/5 px-3 py-1">No credit card required to create an account</span>
                <span class="rounded-full border border-white/10 bg-white/5 px-3 py-1">Built for U.S. contractor workflows</span>
                <span class="rounded-full border border-white/10 bg-white/5 px-3 py-1">Professional PDF proposals included</span>
            </div>

            <div class="grid gap-4 sm:grid-cols-3">
                <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                    <p class="text-sm text-slate-400">Built for speed</p>
                    <p class="mt-2 text-xl font-semibold text-white">Create professional estimates in under 60 seconds.</p>
                </div>
                <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                    <p class="text-sm text-slate-400">Built for trust</p>
                    <p class="mt-2 text-xl font-semibold text-white">Send PDFs that make your company feel organized and credible.</p>
                </div>
                <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                    <p class="text-sm text-slate-400">Built for growth</p>
                    <p class="mt-2 text-xl font-semibold text-white">Scale your quoting workflow without adding office chaos.</p>
                </div>
            </div>
        </div>

        <div class="section-glow hero-panel rounded-[2rem] bg-slate-950/75 p-6">
            <div class="rounded-[1.5rem] border border-white/10 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm uppercase tracking-[0.3em] text-orange-200/70">Live workflow preview</p>
                        <h2 class="mt-2 text-2xl font-semibold text-white">From scope to polished proposal</h2>
                    </div>
                    <div class="rounded-full border border-emerald-400/30 bg-emerald-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-emerald-100">
                        Ready fast
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <div class="rounded-2xl bg-white/5 p-4">
                        <p class="text-sm text-slate-400">Job description</p>
                        <p class="mt-2 font-medium text-white">Paint a 3-bedroom house including prep, trim, and materials for a homeowner in Detroit.</p>
                    </div>

                    <div class="space-y-3 rounded-2xl border border-white/10 bg-white/5 p-4">
                        <div class="flex items-center justify-between text-sm">
                            <span>Surface prep and masking</span>
                            <span>$270.00</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span>Interior painting labor</span>
                            <span>$990.00</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span>Paint and materials</span>
                            <span>$304.00</span>
                        </div>
                        <div class="border-t border-white/10 pt-3">
                            <div class="flex items-center justify-between text-sm text-slate-300">
                                <span>Subtotal</span>
                                <span>$1,564.00</span>
                            </div>
                            <div class="mt-2 flex items-center justify-between text-sm text-slate-300">
                                <span>Tax</span>
                                <span>$93.84</span>
                            </div>
                            <div class="mt-2 flex items-center justify-between text-base font-semibold text-orange-100">
                                <span>Total</span>
                                <span>$1,657.84</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-6 pb-20 lg:grid-cols-3">
        <a href="{{ route('marketing.features') }}" class="rounded-[1.75rem] border border-white/10 bg-white/5 p-6 transition hover:border-orange-300/30 hover:bg-white/10">
            <p class="text-sm uppercase tracking-[0.24em] text-orange-200/70">Features</p>
            <h2 class="mt-3 text-2xl font-semibold text-white">See what the workflow actually does.</h2>
            <p class="mt-3 leading-7 text-slate-300">Explore AI line items, polished PDFs, and the proposal flow that makes small crews look sharper.</p>
        </a>
        <a href="{{ route('marketing.pricing') }}" class="rounded-[1.75rem] border border-white/10 bg-white/5 p-6 transition hover:border-orange-300/30 hover:bg-white/10">
            <p class="text-sm uppercase tracking-[0.24em] text-orange-200/70">Pricing</p>
            <h2 class="mt-3 text-2xl font-semibold text-white">Show clear plans with a cleaner buying path.</h2>
            <p class="mt-3 leading-7 text-slate-300">Free, Starter, and Pro now live on their own page for higher-intent search traffic and stronger purchase clarity.</p>
        </a>
        <a href="{{ route('marketing.industries') }}" class="rounded-[1.75rem] border border-white/10 bg-white/5 p-6 transition hover:border-orange-300/30 hover:bg-white/10">
            <p class="text-sm uppercase tracking-[0.24em] text-orange-200/70">Industries</p>
            <h2 class="mt-3 text-2xl font-semibold text-white">Give each trade its own message and search entry point.</h2>
            <p class="mt-3 leading-7 text-slate-300">Industry pages target how painters, HVAC, plumbing, electrical, and GC teams actually sell jobs.</p>
        </a>
    </section>

    <section class="pb-20">
        <div class="grid gap-4 rounded-[2rem] border border-white/10 bg-white/5 p-6 md:grid-cols-4">
            <div>
                <p class="text-xs uppercase tracking-[0.28em] text-slate-400">Why sign up</p>
                <p class="mt-2 text-lg font-semibold text-white">The fastest path to a better first impression.</p>
            </div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-200">Reply to leads faster</div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-200">Send estimates that look organized</div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/40 p-4 text-sm text-slate-200">Reduce admin time on every quote</div>
        </div>
    </section>

    <section class="pb-20">
        <div class="mb-8 max-w-3xl">
            <p class="text-sm uppercase tracking-[0.3em] text-orange-200/70">Industry pages</p>
            <h2 class="mt-3 text-4xl font-bold tracking-tight text-white">A better SEO structure is a hub plus distinct, useful pages.</h2>
            <p class="mt-4 text-lg leading-8 text-slate-300">Instead of stuffing everything into one page, the site now has clear search entry points with unique messaging and stronger internal linking.</p>
        </div>

        <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($industryPages as $industry)
                <a href="{{ route('marketing.industry', $industry['slug']) }}" class="rounded-[1.75rem] border border-white/10 bg-slate-950/50 p-6 transition hover:border-orange-300/30 hover:bg-white/10">
                    <p class="text-sm uppercase tracking-[0.24em] text-orange-200/70">{{ $industry['name'] }}</p>
                    <h3 class="mt-3 text-2xl font-semibold text-white">{{ $industry['headline'] }}</h3>
                    <p class="mt-3 leading-7 text-slate-300">{{ $industry['subheadline'] }}</p>
                </a>
            @endforeach
        </div>
    </section>

    <section class="pb-8">
        <div class="section-glow rounded-[2.25rem] bg-slate-950/75 px-8 py-10 text-center">
            <p class="text-sm uppercase tracking-[0.3em] text-orange-200/70">Ready to launch</p>
            <h2 class="mx-auto mt-4 max-w-3xl text-4xl font-bold tracking-tight text-white">Keep the homepage for conversion and use focused subpages for search intent.</h2>
            <p class="mx-auto mt-4 max-w-2xl text-lg leading-8 text-slate-300">This structure gives buyers cleaner navigation, gives Google clearer topic signals, and gives every important intent its own page.</p>
            <div class="mt-8 flex flex-wrap justify-center gap-4">
                <a href="{{ route('register') }}" class="rounded-full bg-orange-500 px-7 py-3 text-base font-semibold text-slate-950 transition hover:bg-orange-400">Create Free Account</a>
                <a href="{{ route('marketing.industries') }}" class="rounded-full border border-white/10 px-7 py-3 text-base font-semibold text-white transition hover:bg-white/10">Browse Industries</a>
            </div>
        </div>
    </section>
@endsection