import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { NewsletterForm } from "@/components/NewsletterForm";
import {
  WrenchScrewdriverIcon,
  ShieldExclamationIcon,
  CurrencyDollarIcon,
  BookmarkSquareIcon,
  LinkIcon,
  LockOpenIcon,
} from "@heroicons/react/20/solid";

export const metadata: Metadata = {
  title: { absolute: "Battl Builders — Free AR-15 Build Planner" },
  description:
    "Pick compatible AR-15 parts, catch mismatches before you order, and compare live prices from real retailers. Free, no account required.",
};

export default function HomePage() {
  return (
    <main className="min-h-screen bg-black text-zinc-50">
      {/* Grid background — retained from previous implementation */}
      <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden opacity-[0.55]">
        <svg
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          xmlns="http://www.w3.org/2000/svg"
        >
          <defs>
            <pattern
              id="battlGrid"
              x="0"
              y="0"
              width="80"
              height="80"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 80 0 L 0 0 0 80"
                fill="none"
                stroke="#fbbf24"
                strokeWidth="0.5"
                strokeOpacity="0.35"
              />
            </pattern>
            <pattern
              id="battlHex"
              width="140"
              height="140"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M70 4 L136 40 L136 110 L70 146 L4 110 L4 40 Z"
                fill="none"
                stroke="#fbbf24"
                strokeWidth="0.4"
                strokeOpacity="0.25"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#battlGrid)" />
          <rect width="100%" height="100%" fill="url(#battlHex)" />
        </svg>
      </div>

      <div className="relative z-10">
        {/* ── 1. Nav ── */}
        <nav className="mx-auto flex max-w-5xl items-center justify-between px-4 py-5">
          <Image
            src="/battl/battl-logo-mark-f.svg"
            alt="Battl Builders"
            width={260}
            height={48}
          />
          <div className="flex items-center gap-2">
            <Link
              href="/login"
              data-umami-event="nav_signin_clicked"
              className="rounded-md border border-zinc-800 bg-zinc-950/60 px-3 py-2 text-xs font-medium text-zinc-200 hover:bg-zinc-900 hover:text-white"
            >
              Sign In
            </Link>
            <Link
              href="/builder"
              data-umami-event="cta_start_build_clicked"
              data-umami-event-location="nav"
              className="rounded-md border border-amber-500/70 bg-amber-500/90 px-3 py-2 text-xs font-semibold text-black hover:bg-amber-400"
            >
              Start a Build
            </Link>
          </div>
        </nav>

        {/* ── 2. Hero ── */}
        <section className="mx-auto max-w-[760px] px-4 pb-16 pt-20 text-center">
          <div className="mb-7 inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/40 px-4 py-[5px] text-[10px] uppercase tracking-[0.2em] text-white/55">
            <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-amber-400" />
            AR-15 Builder &nbsp;·&nbsp; 100% Free
          </div>

          <h1 className="text-[clamp(38px,6.5vw,64px)] font-bold leading-[1.05] tracking-[-0.035em] text-white">
            Stop Guessing.
            <span className="block text-amber-300">Start Building.</span>
          </h1>

          <p className="mx-auto mt-6 max-w-[540px] text-[17px] leading-[1.65] text-zinc-400">
            Not sure which parts work together? We&apos;ll walk you through it.
            Pick your components, get warned about anything that won&apos;t fit,
            and see real prices from real retailers — all in one place.
          </p>

          <div className="mt-10 flex flex-col items-center gap-3">
            <Link
              href="/builder"
              data-umami-event="cta_start_build_clicked"
              data-umami-event-location="hero"
              className="inline-flex items-center gap-2 rounded-lg bg-amber-500/90 px-[38px] py-[15px] text-[15px] font-extrabold tracking-[0.03em] text-black shadow-[0_0_40px_rgba(251,191,36,0.2)] hover:bg-amber-400"
            >
              Start a Build →
            </Link>
            <span className="text-[11px] tracking-[0.05em] text-zinc-600">
              100% Free · No account required
            </span>
          </div>
        </section>

        {/* ── 3. How It Works ── */}
        <section className="mx-auto max-w-5xl px-4 py-[72px]">
          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-[85%]">
            THE PROCESS
          </p>
          <h2 className="mb-1.5 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
            3 Steps. One Battl-Ready Build.
          </h2>
          <p className="mb-12 text-center text-sm text-zinc-500">
            No experience required. No part numbers to memorize.
          </p>

          <div
            className="mx-auto grid max-w-[840px] grid-cols-1 gap-[2px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-3"
          >
            {[
              {
                num: "Step 01",
                title: "Pick your parts",
                body: "Browse real components organized by what they do — barrel, trigger, lower, upper, and more. No prior knowledge required.",
              },
              {
                num: "Step 02",
                title: "Flag the conflicts",
                body: "Gas length, buffer weight, caliber — Battl catches the mismatches before you spend money on the wrong part.",
              },
              {
                num: "Step 03",
                title: "Price it. Pull the trigger.",
                body: "Live prices from real retailers, side by side. Click through to buy. We never touch your order.",
              },
            ].map((step) => (
              <div key={step.num} className="bg-[#0d0d0f] px-6 py-8">
                <p className="mb-3.5 text-[11px] font-bold uppercase tracking-[0.15em] text-amber-400 opacity-80">
                  {step.num}
                </p>
                <h3 className="mb-2.5 text-base font-bold tracking-[-0.01em] text-white">
                  {step.title}
                </h3>
                <p className="text-[13px] leading-[1.6] text-zinc-500">
                  {step.body}
                </p>
              </div>
            ))}
          </div>
        </section>

        {/* ── 4. Builder Preview Video ── */}
        <section className="px-4 pb-[72px]">
          <div className="mx-auto max-w-[900px] overflow-hidden rounded-[14px] border border-white/[0.07] bg-black shadow-[0_24px_80px_rgba(0,0,0,0.7),0_0_0_1px_rgba(251,191,36,0.05)]">
            <div className="relative">
              <video
                autoPlay
                loop
                muted
                playsInline
                poster="/builder-preview.png"
                className="w-full object-cover"
              >
                <source src="/builder-preview.mp4" type="video/mp4" />
              </video>
              <div
                aria-hidden="true"
                className="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black"
              />
            </div>
          </div>
        </section>

        {/* ── 5. Feature Cards ── */}
        <section className="mx-auto max-w-5xl px-4 py-[72px]">
          <p className="mb-3 text-center text-[10px] font-bold uppercase tracking-[0.25em] text-amber-400 opacity-[85%]">
            WHAT YOU GET
          </p>
          <h2 className="mb-2 text-center text-[30px] font-bold tracking-[-0.025em] text-white">
            Built by gun nerds, for the everyday AR builder.
          </h2>
          <p className="mb-11 text-center text-[13px] uppercase tracking-[0.02em] text-zinc-600">
            NO SUBSCRIPTIONS · NO SPONSORED RANKINGS · NO BULLSHIT
          </p>

          <div
            className="mx-auto grid max-w-[900px] grid-cols-1 gap-[1px] overflow-hidden rounded-xl border border-zinc-900 bg-zinc-900 sm:grid-cols-2 lg:grid-cols-3"
          >
            {(
              [
                {
                  Icon: WrenchScrewdriverIcon,
                  title: "Build by role, not part number",
                  body: "Parts organized by function. Know what you need, not what SKU to search for.",
                },
                {
                  Icon: ShieldExclamationIcon,
                  title: "Conflicts caught early",
                  body: "Gas system, buffer weight, caliber — flagged before checkout, not after the box arrives.",
                },
                {
                  Icon: CurrencyDollarIcon,
                  title: "Real prices. Real retailers.",
                  body: "Running total with live prices. No estimated MSRP. What it actually costs, today.",
                },
                {
                  Icon: BookmarkSquareIcon,
                  title: "Save your work",
                  body: "Free account. Save builds, pick up where you left off, run multiple configs in parallel.",
                },
                {
                  Icon: LinkIcon,
                  title: "Share the build",
                  body: "One link. Your buddy sees the full parts list — no login, no friction, no excuses.",
                },
                {
                  Icon: LockOpenIcon,
                  title: "No gates. No friction.",
                  body: "Browse and build freely. Create an account only when you're ready to save.",
                },
              ] as const
            ).map(({ Icon, title, body }) => (
              <div key={title} className="bg-[#0d0d0f] p-6">
                <Icon
                  className="mb-3.5 h-5 w-5 text-amber-400"
                  aria-hidden="true"
                />
                <h3 className="mb-1.5 text-[13px] font-bold tracking-[-0.01em] text-zinc-200">
                  {title}
                </h3>
                <p className="text-xs leading-[1.6] text-zinc-600">{body}</p>
              </div>
            ))}
          </div>
        </section>

        {/* ── 6. SEO Copy Block ── */}
        <section className="border-t border-zinc-900 px-4 py-[72px]">
          <div className="mx-auto max-w-[680px]">
            <h2 className="mb-4 text-[22px] font-bold tracking-[-0.02em] text-zinc-300">
              What is Battl Builders?
            </h2>
            <p className="mb-3.5 text-sm leading-[1.75] text-zinc-500">
              Battl Builders is a free{" "}
              <strong className="font-semibold text-zinc-300">
                AR-15 build planner
              </strong>{" "}
              — the tool you&apos;ve been doing in spreadsheets, rebuilt for how
              builders actually work. Select parts by what they do, validate
              compatibility as you go, and price your build across multiple
              retailers without opening a new tab.
            </p>
            <p className="mb-3.5 text-sm leading-[1.75] text-zinc-500">
              Most{" "}
              <strong className="font-semibold text-zinc-300">
                AR-15 compatibility mistakes
              </strong>{" "}
              happen at the parts list stage: wrong gas system length for the
              barrel, buffer weight that fights your stock, caliber mismatches
              between upper and lower. Battl flags those conflicts automatically,
              so you catch them before they cost you a return label.
            </p>
            <p className="text-sm leading-[1.75] text-zinc-500">
              Whether you&apos;re planning your first rifle or spec&apos;ing a
              dedicated precision upper, Battl Builders gives you a structured,
              guided way to research parts and{" "}
              <strong className="font-semibold text-zinc-300">
                buy with confidence
              </strong>
              .
            </p>
          </div>
        </section>

        {/* ── 7. Final CTA ── */}
        <section className="border-t border-zinc-900 px-4 py-24 text-center">
          <h2 className="mb-3 text-[36px] font-bold tracking-[-0.03em] text-white">
            Your build starts here.
          </h2>
          <p className="mb-8 text-sm text-zinc-600">
            Free. No account required. Takes five minutes to get rolling.
          </p>
          <Link
            href="/builder"
            data-umami-event="cta_start_build_clicked"
            data-umami-event-location="final_cta"
            className="inline-flex items-center gap-2 rounded-lg bg-amber-500/90 px-[38px] py-[15px] text-[15px] font-extrabold tracking-[0.03em] text-black shadow-[0_0_40px_rgba(251,191,36,0.2)] hover:bg-amber-400"
          >
            Start a Build →
          </Link>
        </section>

        {/* ── 8. Footer ── */}
        <footer className="border-t border-zinc-900">
          <div className="mx-auto max-w-5xl px-4 py-12">
            <div className="grid grid-cols-1 gap-10 sm:grid-cols-3">
              {/* Brand */}
              <div>
                <Image
                  src="/battl/battl-logo-mark-f.svg"
                  alt="Battl Builders"
                  width={160}
                  height={32}
                  className="mb-3 opacity-70"
                />
                <p className="text-xs leading-relaxed text-zinc-600">
                  Free AR-15 build planner. No subscriptions. No sponsored rankings.
                </p>
              </div>

              {/* Product links */}
              <div>
                <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
                  Product
                </p>
                <ul className="space-y-2 text-sm text-zinc-500">
                  <li>
                    <Link href="/builder" className="hover:text-zinc-300">
                      Builder
                    </Link>
                  </li>
                  <li>
                    <Link href="/guides" className="hover:text-zinc-300">
                      Guides
                    </Link>
                  </li>
                  <li>
                    <Link href="/about" className="hover:text-zinc-300">
                      About
                    </Link>
                  </li>
                </ul>
              </div>

              {/* Newsletter */}
              <div>
                <p className="mb-1.5 text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500">
                  Stay in the loop
                </p>
                <p className="mb-3 text-xs text-zinc-600">
                  Build tips and new features. No spam.
                </p>
                <NewsletterForm />
              </div>
            </div>
          </div>

          {/* Bottom bar */}
          <div className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900/60 px-4 py-4 text-[11px] text-zinc-700">
            <span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
            <div className="flex gap-4">
              <Link href="/privacy" className="hover:text-zinc-500">
                Privacy
              </Link>
              <Link href="/tos" className="hover:text-zinc-500">
                Terms
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </main>
  );
}
