"use client";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { PLANS } from "@/lib/plans";
import {
  Sparkles, Globe2, LayoutGrid, CalendarCheck, ToggleLeft, Mail,
  Wand2, ShieldCheck, Zap, Check, ArrowRight, Instagram, Youtube, Linkedin, Twitter,
} from "lucide-react";

interface LandingProps {
  onEnter: () => void;
}

const FEATURES = [
  {
    icon: Globe2,
    title: "Zero-Prompt Onboarding",
    desc: "Paste your website URL or Instagram handle. We extract your brand name, colors, tone of voice and top services automatically — no forms, no guesswork.",
  },
  {
    icon: LayoutGrid,
    title: "One Prompt → Every Channel",
    desc: "Type \"bakery special this weekend\" and get a full campaign: Instagram posts + story, TikTok video script, LinkedIn post and X copy — all natively formatted.",
  },
  {
    icon: Wand2,
    title: "AIDA Engine Under the Hood",
    desc: "Your one-liner is silently expanded into a proven Attention-Interest-Desire-Action framework before generation. Expert strategy without learning strategy.",
  },
  {
    icon: CalendarCheck,
    title: "Approve & Schedule Calendar",
    desc: "Review every post on a visual weekly calendar, tweak copy inline, then hit \"Schedule All\". Done in 30 seconds.",
  },
  {
    icon: ToggleLeft,
    title: "Organic ↔ Paid Toggle",
    desc: "Post free to your feeds, or flip to Paid mode: pick an objective, a $5/day budget and a location. Three choices. No ad-manager maze.",
  },
  {
    icon: Mail,
    title: "Monday Morning Briefs",
    desc: "Every Monday we email you 5 fresh ad concepts based on local trends. Approve from the email — you never have to remember to log in.",
  },
];

export default function Landing({ onEnter }: LandingProps) {
  return (
    <div className="min-h-screen bg-stone-50 text-stone-900">
      {/* NAV */}
      <header className="sticky top-0 z-40 border-b border-stone-200/70 bg-stone-50/80 backdrop-blur">
        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
          <div className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-600 text-white">
              <Sparkles className="h-4 w-4" />
            </div>
            <span className="text-lg font-bold tracking-tight">AdStudio<span className="text-orange-600">AI</span></span>
          </div>
          <nav className="hidden items-center gap-6 text-sm font-medium text-stone-600 md:flex">
            <a href="#features" className="hover:text-stone-900">Features</a>
            <a href="#how" className="hover:text-stone-900">How it works</a>
            <a href="#pricing" className="hover:text-stone-900">Pricing</a>
          </nav>
          <Button onClick={onEnter} className="bg-orange-600 hover:bg-orange-700">
            Open the Studio <ArrowRight className="ml-1 h-4 w-4" />
          </Button>
        </div>
      </header>

      {/* HERO */}
      <section className="relative overflow-hidden bg-stone-950 text-white">
        <div className="pointer-events-none absolute -top-40 left-1/2 h-[480px] w-[720px] -translate-x-1/2 rounded-full bg-orange-600/25 blur-[120px]" />
        <div className="pointer-events-none absolute bottom-0 right-0 h-64 w-64 rounded-full bg-amber-500/10 blur-[80px]" />
        <div className="relative mx-auto max-w-6xl px-4 py-20 md:py-28">
          <div className="mx-auto max-w-3xl text-center">
            <Badge className="mb-5 border-orange-500/30 bg-orange-500/10 text-orange-300 hover:bg-orange-500/20">
              <Zap className="mr-1 h-3 w-3" /> One-prompt multi-channel marketing machine
            </Badge>
            <h1 className="text-4xl font-extrabold leading-tight tracking-tight md:text-6xl">
              You run the business.
              <br />
              <span className="bg-gradient-to-r from-orange-400 via-amber-300 to-orange-400 bg-clip-text text-transparent">
                We run the ads.
              </span>
            </h1>
            <p className="mx-auto mt-6 max-w-2xl text-lg text-stone-300 md:text-xl">
              AdStudioAI turns a single line — or just your website URL — into ready-to-post
              campaigns for Instagram, TikTok, LinkedIn, X and Facebook. No design skills.
              No copywriting. No ad-manager maze.
            </p>
            <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <Button onClick={onEnter} size="lg" className="h-12 bg-orange-600 px-8 text-base font-semibold hover:bg-orange-700">
                Start with your URL — free demo <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
              <a href="#how" className="text-sm font-medium text-stone-300 underline-offset-4 hover:underline">
                See how it works ↓
              </a>
            </div>
            <p className="mt-4 text-xs text-stone-500">No credit card. Set up your first brand in under 60 seconds.</p>
          </div>

          {/* fake product strip */}
          <div className="relative mx-auto mt-14 max-w-4xl rounded-2xl border border-white/10 bg-white/5 p-3 shadow-2xl backdrop-blur">
            <div className="grid gap-3 sm:grid-cols-3">
              {[
                { ch: "Instagram", copy: "☕️ New autumn menu just dropped! Pumpkin spice latte + fresh croissants = your new morning ritual. #shoplocal #coffeelove", tone: "bg-pink-500/15 text-pink-300" },
                { ch: "TikTok", copy: "Hook: \"POV: your café finally gets you\" → 15s pour-shot script with trending audio", tone: "bg-fuchsia-500/15 text-fuchsia-300" },
                { ch: "LinkedIn", copy: "After 6 years on Main St, we're expanding our roastery. Here's what it means for wholesale partners…", tone: "bg-sky-500/15 text-sky-300" },
              ].map((c) => (
                <div key={c.ch} className="rounded-xl bg-stone-900/80 p-4 text-left">
                  <span className={`inline-block rounded-md px-2 py-0.5 text-[11px] font-semibold ${c.tone}`}>{c.ch}</span>
                  <p className="mt-2 line-clamp-3 text-xs leading-relaxed text-stone-300">{c.copy}</p>
                  <div className="mt-3 h-14 rounded-lg bg-gradient-to-br from-orange-500/40 via-amber-400/20 to-stone-800" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* GAP / POSITIONING */}
      <section className="mx-auto max-w-6xl px-4 py-16 md:py-20">
        <div className="grid items-center gap-10 lg:grid-cols-2">
          <div>
            <Badge variant="outline" className="mb-4 border-stone-300 text-stone-600">The market gap</Badge>
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
              Every tool is either <span className="text-stone-400">too simple</span> or <span className="text-stone-400">too complex</span>.
            </h2>
            <p className="mt-4 text-lg text-stone-600">
              Simple generators produce generic graphics that look like spam. Enterprise suites make you
              manage pixels, tokens and dashboards built for marketers. Small-business owners get stuck in between.
            </p>
            <p className="mt-3 text-lg text-stone-600">
              AdStudioAI is the third option: <strong className="text-stone-900">expert-grade output, one-line input.</strong>
            </p>
          </div>
          <div className="space-y-3">
            {[
              { name: "Generic generators", verdict: "Too simple", detail: "Spammy static graphics, no brand memory", bad: true },
              { name: "Enterprise ad suites", verdict: "Too complex", detail: "Pixel setup, API tokens, training courses", bad: true },
              { name: "AdStudioAI", verdict: "Just right", detail: "URL in → scheduled multi-channel campaign out", bad: false },
            ].map((row) => (
              <div key={row.name} className={`flex items-center justify-between rounded-xl border p-4 ${row.bad ? "border-stone-200 bg-white opacity-75" : "border-orange-300 bg-orange-50 shadow-sm"}`}>
                <div>
                  <p className="font-semibold">{row.name}</p>
                  <p className="text-sm text-stone-500">{row.detail}</p>
                </div>
                <span className={`rounded-full px-3 py-1 text-xs font-bold ${row.bad ? "bg-stone-100 text-stone-500" : "bg-orange-600 text-white"}`}>
                  {row.verdict}
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section id="features" className="border-y border-stone-200 bg-white py-16 md:py-24">
        <div className="mx-auto max-w-6xl px-4">
          <div className="mx-auto mb-12 max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl">Features that make people stay</h2>
            <p className="mt-3 text-lg text-stone-600">
              Not just image generation — a complete retention loop built for busy owners.
            </p>
          </div>
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {FEATURES.map((f) => (
              <div key={f.title} className="group rounded-2xl border border-stone-200 bg-stone-50 p-6 transition-all hover:-translate-y-0.5 hover:border-orange-200 hover:shadow-md">
                <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-xl bg-orange-100 text-orange-600 transition-colors group-hover:bg-orange-600 group-hover:text-white">
                  <f.icon className="h-5 w-5" />
                </div>
                <h3 className="mb-2 text-lg font-semibold">{f.title}</h3>
                <p className="text-sm leading-relaxed text-stone-600">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="how" className="mx-auto max-w-6xl px-4 py-16 md:py-24">
        <div className="mx-auto mb-12 max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl">From idea to scheduled in 3 steps</h2>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {[
            { n: "1", t: "Drop your URL", d: "We scrape your brand: name, colors, tone, best-selling services. Edit anything you like.", icon: Globe2 },
            { n: "2", t: "Type one line", d: "\"Weekend bakery special\" is enough. Our AIDA engine expands it into expert briefs per channel.", icon: Wand2 },
            { n: "3", t: "Approve & Schedule", d: "Review the package on the calendar, tweak copy, hit Schedule All. 30 seconds, done.", icon: CalendarCheck },
          ].map((s) => (
            <div key={s.n} className="relative rounded-2xl border border-stone-200 bg-white p-6 text-center shadow-sm">
              <div className="absolute -top-4 left-1/2 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full bg-orange-600 text-sm font-bold text-white">
                {s.n}
              </div>
              <s.icon className="mx-auto mb-3 mt-2 h-8 w-8 text-orange-600" />
              <h3 className="mb-2 text-lg font-semibold">{s.t}</h3>
              <p className="text-sm text-stone-600">{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="border-t border-stone-200 bg-white py-16 md:py-24">
        <div className="mx-auto max-w-6xl px-4">
          <div className="mx-auto mb-12 max-w-2xl text-center">
            <h2 className="text-3xl font-bold tracking-tight md:text-4xl">Simple flat pricing</h2>
            <p className="mt-3 text-lg text-stone-600">No credit systems. No per-image tokens. Cancel anytime.</p>
          </div>
          <div className="grid gap-6 lg:grid-cols-3">
            {Object.values(PLANS).map((plan) => {
              const highlight = plan.id === "GROWTH";
              return (
                <div key={plan.id} className={`relative rounded-2xl border p-7 ${highlight ? "border-orange-300 bg-orange-50 shadow-lg shadow-orange-100" : "border-stone-200 bg-white"}`}>
                  {highlight && (
                    <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-orange-600 px-3 py-1 text-xs font-bold text-white">
                      MOST POPULAR
                    </span>
                  )}
                  <h3 className="text-lg font-bold">{plan.name}</h3>
                  <p className="mt-1 text-sm text-stone-500">Best for: {plan.bestFor}</p>
                  <div className="mt-4 flex items-baseline gap-1">
                    <span className="text-4xl font-extrabold">${plan.price}</span>
                    <span className="text-stone-500">/ month</span>
                  </div>
                  <ul className="mt-6 space-y-2.5">
                    {plan.features.map((feat) => (
                      <li key={feat} className="flex items-start gap-2 text-sm">
                        <Check className="mt-0.5 h-4 w-4 shrink-0 text-orange-600" />
                        <span className="text-stone-700">{feat}</span>
                      </li>
                    ))}
                  </ul>
                  <Button onClick={onEnter} className={`mt-7 w-full ${highlight ? "bg-orange-600 hover:bg-orange-700" : "bg-stone-900 hover:bg-stone-800"}`}>
                    Start with {plan.name}
                  </Button>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* FOOTER CTA */}
      <section className="bg-stone-950 py-16 text-center text-white">
        <div className="mx-auto max-w-2xl px-4">
          <h2 className="text-3xl font-bold md:text-4xl">Your next week of ads is 30 seconds away</h2>
          <p className="mt-3 text-stone-400">Join the owners who advertise consistently — without hiring anyone.</p>
          <Button onClick={onEnter} size="lg" className="mt-8 h-12 bg-orange-600 px-8 text-base hover:bg-orange-700">
            Open the Studio <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
          <div className="mt-12 flex items-center justify-center gap-6 text-stone-500">
            <ShieldCheck className="h-4 w-4" /><span className="text-xs">Organic posting first · paid campaigns when you&apos;re ready</span>
          </div>
          <div className="mt-8 flex items-center justify-center gap-4 text-stone-600">
            <Instagram className="h-4 w-4" /><Youtube className="h-4 w-4" /><Linkedin className="h-4 w-4" /><Twitter className="h-4 w-4" />
          </div>
          <p className="mt-6 text-xs text-stone-600">© 2026 AdStudioAI — built for small business owners.</p>
        </div>
      </section>
    </div>
  );
}