import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Check,
  Sparkles,
  Palette,
  Layout,
  PenTool,
  Megaphone,
  Layers,
  Mail,
  Phone,
  MapPin,
  Globe,
  ShieldCheck,
  Timer,
  BadgeCheck,
  FileText,
  ExternalLink,
  ChevronDown,
} from "lucide-react";

// shadcn/ui
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

/**
 * Storybook Media — AI-designed single-page marketing site
 * - Drop into a Next.js / Vite React project with shadcn/ui + tailwind + framer-motion + lucide-react
 * - Replace placeholders (email/phone/location/portfolio items) with your real details
 */

const brand = {
  name: "Storybook Media",
  domain: "storybookmedia.co.uk",
  tagline: "Graphic design that reads like a story — and sells like one.",
  valueProp:
    "We blend human craft with AI-assisted workflow to deliver premium brand, web, and marketing design — fast, consistent, and conversion-focused.",
};

const fadeUp = {
  hidden: { opacity: 0, y: 18 },
  show: { opacity: 1, y: 0, transition: { duration: 0.55, ease: "easeOut" } },
};

function cx(...classes) {
  return classes.filter(Boolean).join(" ");
}

function LogoMark() {
  return (
    <div className="flex items-center gap-2">
      <div className="relative h-10 w-10">
        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/70 to-white/10 shadow-sm ring-1 ring-white/20" />
        <div className="absolute left-2 top-2 h-6 w-6 rounded-xl bg-white/10 ring-1 ring-white/20" />
        <div className="absolute right-2 bottom-2 h-4 w-4 rounded-lg bg-white/10 ring-1 ring-white/20" />
      </div>
      <div className="leading-tight">
        <div className="text-sm font-semibold tracking-wide text-white/90">{brand.name}</div>
        <div className="text-xs text-white/60">{brand.domain}</div>
      </div>
    </div>
  );
}

function Pill({ icon: Icon, children }) {
  return (
    <div className="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white/70 ring-1 ring-white/10">
      <Icon className="h-4 w-4" />
      <span>{children}</span>
    </div>
  );
}

function SectionTitle({ eyebrow, title, desc }) {
  return (
    <div className="mx-auto max-w-2xl text-center">
      {eyebrow ? (
        <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-1 text-xs text-white/70 ring-1 ring-white/10">
          <Sparkles className="h-4 w-4" />
          <span>{eyebrow}</span>
        </div>
      ) : null}
      <h2 className="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">{title}</h2>
      {desc ? <p className="mt-3 text-pretty text-base text-white/70">{desc}</p> : null}
    </div>
  );
}

function PrimaryCTA({ label = "Book a discovery call" }) {
  return (
    <Button
      size="lg"
      className="rounded-2xl bg-white text-black hover:bg-white/90"
      onClick={() => {
        const el = document.getElementById("contact");
        el?.scrollIntoView({ behavior: "smooth" });
      }}
    >
      {label}
      <ArrowRight className="ml-2 h-4 w-4" />
    </Button>
  );
}

function SecondaryCTA() {
  return (
    <Button
      variant="outline"
      size="lg"
      className="rounded-2xl border-white/20 bg-transparent text-white hover:bg-white/10"
      onClick={() => {
        const el = document.getElementById("work");
        el?.scrollIntoView({ behavior: "smooth" });
      }}
    >
      View work
      <ExternalLink className="ml-2 h-4 w-4" />
    </Button>
  );
}

function Metric({ label, value }) {
  return (
    <div className="rounded-2xl bg-white/5 p-4 ring-1 ring-white/10">
      <div className="text-2xl font-semibold text-white">{value}</div>
      <div className="mt-1 text-xs text-white/60">{label}</div>
    </div>
  );
}

function ServiceCard({ icon: Icon, title, bullets }) {
  return (
    <Card className="rounded-2xl border-white/10 bg-white/5 shadow-sm">
      <CardHeader>
        <CardTitle className="flex items-center gap-3 text-white">
          <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
            <Icon className="h-5 w-5" />
          </span>
          <span>{title}</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ul className="space-y-2 text-sm text-white/70">
          {bullets.map((b) => (
            <li key={b} className="flex gap-2">
              <Check className="mt-0.5 h-4 w-4 flex-none text-white/70" />
              <span>{b}</span>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}

function WorkCard({ item }) {
  return (
    <Card className="group rounded-2xl border-white/10 bg-white/5 shadow-sm">
      <CardContent className="p-5">
        <div className="flex items-start justify-between gap-4">
          <div>
            <div className="text-sm font-semibold text-white">{item.title}</div>
            <div className="mt-1 text-xs text-white/60">{item.category}</div>
          </div>
          <Badge className="rounded-full bg-white/10 text-white/80 ring-1 ring-white/10">{item.year}</Badge>
        </div>

        <div className="mt-4 overflow-hidden rounded-2xl bg-gradient-to-br from-white/10 to-white/5 ring-1 ring-white/10">
          <div className="aspect-[16/10] w-full" />
        </div>

        <p className="mt-4 text-sm text-white/70">{item.description}</p>

        <div className="mt-4 flex flex-wrap gap-2">
          {item.tags.map((t) => (
            <span key={t} className="rounded-full bg-white/5 px-3 py-1 text-[11px] text-white/70 ring-1 ring-white/10">
              {t}
            </span>
          ))}
        </div>

        <div className="mt-5 flex items-center justify-between">
          <span className="text-xs text-white/60">Placeholder preview — swap for real images</span>
          <ChevronDown className="h-4 w-4 text-white/50 transition-transform group-hover:translate-y-0.5" />
        </div>
      </CardContent>
    </Card>
  );
}

function PricingCard({ plan, featured = false }) {
  return (
    <Card
      className={cx(
        "rounded-2xl border-white/10 bg-white/5 shadow-sm",
        featured && "bg-white/10 ring-1 ring-white/20"
      )}
    >
      <CardHeader>
        <CardTitle className="flex items-center justify-between text-white">
          <span>{plan.name}</span>
          {featured ? (
            <Badge className="rounded-full bg-white text-black">Most popular</Badge>
          ) : (
            <Badge className="rounded-full bg-white/10 text-white/80 ring-1 ring-white/10">{plan.badge}</Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-end gap-2">
          <div className="text-3xl font-semibold text-white">{plan.price}</div>
          <div className="pb-1 text-xs text-white/60">{plan.unit}</div>
        </div>
        <p className="mt-3 text-sm text-white/70">{plan.desc}</p>
        <ul className="mt-4 space-y-2 text-sm text-white/70">
          {plan.features.map((f) => (
            <li key={f} className="flex gap-2">
              <Check className="mt-0.5 h-4 w-4 flex-none text-white/70" />
              <span>{f}</span>
            </li>
          ))}
        </ul>
        <Button
          className={cx(
            "mt-6 w-full rounded-2xl",
            featured ? "bg-white text-black hover:bg-white/90" : "bg-white/10 text-white hover:bg-white/15"
          )}
          onClick={() => {
            const el = document.getElementById("contact");
            el?.scrollIntoView({ behavior: "smooth" });
          }}
        >
          Get started
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
        <div className="mt-3 text-center text-[11px] text-white/55">{plan.note}</div>
      </CardContent>
    </Card>
  );
}

export default function StorybookMediaSite() {
  const [budget, setBudget] = useState("1500-3000");
  const [service, setService] = useState("brand");
  const [status, setStatus] = useState("idle");

  const work = useMemo(
    () => [
      {
        title: "Luxury Villa Launch Kit",
        category: "Brand + Social",
        year: "2026",
        description:
          "Visual identity, brochure, and paid-social templates built for a premium property campaign. Cohesive system designed for speed across channels.",
        tags: ["Identity", "Brochure", "Instagram", "Ads"],
      },
      {
        title: "E‑commerce Refresh",
        category: "Web + UI",
        year: "2026",
        description:
          "Homepage + product page redesign with a focus on clarity, trust signals, and conversion. Components delivered as a reusable design system.",
        tags: ["UI", "Design system", "Conversion"],
      },
      {
        title: "Podcast Visual Pack",
        category: "Content",
        year: "2025",
        description:
          "Covers, thumbnails, and motion-ready layouts for a weekly show. Built for consistency across YouTube, Spotify, and social clips.",
        tags: ["Thumbnails", "Templates", "Motion"],
      },
    ],
    []
  );

  const plans = useMemo(
    () => [
      {
        name: "Design Sprint",
        badge: "Fast start",
        price: "£950",
        unit: "from",
        desc: "A focused, high-impact sprint to solve one design problem — quickly.",
        features: [
          "Kickoff + goals + references",
          "2–3 concepts",
          "1 primary deliverable",
          "2 revision rounds",
          "Final files + handover",
        ],
        note: "Typical turnaround: 5–7 working days.",
      },
      {
        name: "Brand System",
        badge: "Most requested",
        price: "£2,500",
        unit: "from",
        desc: "A complete identity system you can scale across web, print, and social.",
        features: [
          "Logo suite + marks",
          "Colour + typography system",
          "Brand guidelines (PDF)",
          "Social + document templates",
          "Asset kit for your team",
        ],
        note: "Typical turnaround: 2–3 weeks.",
      },
      {
        name: "Monthly Studio",
        badge: "Ongoing",
        price: "£1,200",
        unit: "/month",
        desc: "A flexible retainer for teams who need steady design output.",
        features: [
          "Priority queue",
          "Unlimited requests (fair usage)",
          "Weekly delivery cadence",
          "Async collaboration",
          "Optional web updates",
        ],
        note: "Pause or cancel any time.",
      },
    ],
    []
  );

  function submit(e) {
    e.preventDefault();
    setStatus("sending");

    // Replace with your preferred backend handler (Formspree, Netlify Forms, custom API, etc.)
    // For now, simulate submission.
    window.setTimeout(() => setStatus("sent"), 900);
  }

  return (
    <div className="min-h-screen bg-black text-white">
      {/* Background */}
      <div className="pointer-events-none fixed inset-0 -z-10">
        <div className="absolute inset-0 bg-[radial-gradient(800px_circle_at_20%_10%,rgba(255,255,255,0.10),transparent_40%),radial-gradient(900px_circle_at_80%_30%,rgba(255,255,255,0.07),transparent_45%),radial-gradient(900px_circle_at_60%_90%,rgba(255,255,255,0.06),transparent_45%)]" />
        <div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(0,0,0,0.2),rgba(0,0,0,1))]" />
        <div className="absolute inset-0 opacity-40 [background-image:linear-gradient(to_right,rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.06)_1px,transparent_1px)] [background-size:64px_64px]" />
      </div>

      {/* Nav */}
      <header className="sticky top-0 z-40 border-b border-white/10 bg-black/40 backdrop-blur">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3 sm:px-6">
          <a href="#" className="rounded-2xl focus:outline-none focus:ring-2 focus:ring-white/30">
            <LogoMark />
          </a>
          <nav className="hidden items-center gap-6 text-sm text-white/70 sm:flex">
            <a className="hover:text-white" href="#services">Services</a>
            <a className="hover:text-white" href="#work">Work</a>
            <a className="hover:text-white" href="#process">Process</a>
            <a className="hover:text-white" href="#pricing">Pricing</a>
            <a className="hover:text-white" href="#faq">FAQ</a>
          </nav>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              className="hidden rounded-2xl border-white/20 bg-transparent text-white hover:bg-white/10 sm:inline-flex"
              onClick={() => {
                const el = document.getElementById("contact");
                el?.scrollIntoView({ behavior: "smooth" });
              }}
            >
              Contact
            </Button>
            <PrimaryCTA label="Start a project" />
          </div>
        </div>
      </header>

      {/* Hero */}
      <main>
        <section className="mx-auto max-w-6xl px-4 pb-14 pt-14 sm:px-6 sm:pb-24 sm:pt-20">
          <motion.div initial="hidden" animate="show" variants={{ show: { transition: { staggerChildren: 0.08 } } }}>
            <motion.div variants={fadeUp} className="flex flex-wrap gap-2">
              <Pill icon={BadgeCheck}>Senior-level design</Pill>
              <Pill icon={Timer}>Fast delivery</Pill>
              <Pill icon={ShieldCheck}>Clean, consistent systems</Pill>
            </motion.div>

            <motion.h1
              variants={fadeUp}
              className="mt-6 text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl"
            >
              {brand.tagline}
            </motion.h1>

            <motion.p variants={fadeUp} className="mt-5 max-w-2xl text-pretty text-base text-white/70 sm:text-lg">
              {brand.valueProp}
            </motion.p>

            <motion.div variants={fadeUp} className="mt-8 flex flex-col gap-3 sm:flex-row">
              <PrimaryCTA />
              <SecondaryCTA />
            </motion.div>

            <motion.div variants={fadeUp} className="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-4">
              <Metric label="Avg. first concepts" value="48h" />
              <Metric label="Revision rounds" value="2–3" />
              <Metric label="Deliverables" value="Web + Print" />
              <Metric label="Workflow" value="AI-assisted" />
            </motion.div>

            <motion.div variants={fadeUp} className="mt-12 rounded-2xl border border-white/10 bg-white/5 p-5 sm:p-6">
              <div className="flex flex-col justify-between gap-6 sm:flex-row sm:items-center">
                <div>
                  <div className="text-sm font-semibold text-white">What we do best</div>
                  <div className="mt-1 text-sm text-white/70">
                    Brand systems, websites, and marketing design for premium businesses.
                  </div>
                </div>
                <div className="flex flex-wrap items-center gap-2">
                  <Badge className="rounded-full bg-white/10 text-white/80 ring-1 ring-white/10">Brand Identity</Badge>
                  <Badge className="rounded-full bg-white/10 text-white/80 ring-1 ring-white/10">Web & UI</Badge>
                  <Badge className="rounded-full bg-white/10 text-white/80 ring-1 ring-white/10">Social Templates</Badge>
                  <Badge className="rounded-full bg-white/10 text-white/80 ring-1 ring-white/10">Brochures</Badge>
                </div>
              </div>
            </motion.div>
          </motion.div>
        </section>

        {/* Services */}
        <section id="services" className="mx-auto max-w-6xl px-4 py-14 sm:px-6 sm:py-20">
          <SectionTitle
            eyebrow="Services"
            title="Design support that scales with your business"
            desc="Pick a sprint, build a full system, or keep us on a monthly studio retainer — always with clean deliverables and a simple process."
          />

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <ServiceCard
              icon={Palette}
              title="Brand Identity"
              bullets={["Logo & marks", "Colour + typography", "Guidelines", "Templates"]}
            />
            <ServiceCard
              icon={Layout}
              title="Web & UI Design"
              bullets={["Landing pages", "Full websites", "Design systems", "Handoff-ready files"]}
            />
            <ServiceCard
              icon={Megaphone}
              title="Marketing Design"
              bullets={["Ads + social", "Brochures + flyers", "Pitch decks", "Email graphics"]}
            />
            <ServiceCard
              icon={PenTool}
              title="Creative Direction"
              bullets={["Moodboards", "Visual strategy", "Campaign concepts", "Art direction"]}
            />
            <ServiceCard
              icon={Layers}
              title="Template Systems"
              bullets={["Canva/figma templates", "Content packs", "On-brand consistency", "Team-ready kits"]}
            />
            <ServiceCard
              icon={FileText}
              title="Print & Production"
              bullets={["Press-ready files", "Signage", "Packaging", "Supplier coordination"]}
            />
          </div>
        </section>

        {/* Work */}
        <section id="work" className="mx-auto max-w-6xl px-4 py-14 sm:px-6 sm:py-20">
          <SectionTitle
            eyebrow="Selected work"
            title="A few recent projects"
            desc="These are example placeholders. Replace titles, copy, and add images to match your real portfolio."
          />

          <div className="mt-10 grid gap-4 lg:grid-cols-3">
            {work.map((item) => (
              <WorkCard key={item.title} item={item} />
            ))}
          </div>

          <div className="mt-10 flex flex-col items-center gap-3">
            <div className="text-center text-sm text-white/70">
              Want a dedicated portfolio page? Add routes for /work and /case-studies.
            </div>
            <Button
              variant="outline"
              className="rounded-2xl border-white/20 bg-transparent text-white hover:bg-white/10"
              onClick={() => {
                const el = document.getElementById("contact");
                el?.scrollIntoView({ behavior: "smooth" });
              }}
            >
              Request a full case-study deck
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </section>

        {/* Process */}
        <section id="process" className="mx-auto max-w-6xl px-4 py-14 sm:px-6 sm:py-20">
          <SectionTitle
            eyebrow="Process"
            title="Simple steps. Clean results."
            desc="No messy back-and-forth. We run a tight loop: brief → concepts → refinements → delivery."
          />

          <div className="mt-10 grid gap-4 lg:grid-cols-4">
            {[{
              title: "1) Discovery",
              desc: "Goals, audience, references, and constraints. We lock scope and success metrics.",
              icon: Globe,
            },{
              title: "2) Concepting",
              desc: "Multiple directions quickly — using AI-assisted exploration + human curation.",
              icon: Sparkles,
            },{
              title: "3) Refinement",
              desc: "Iterate the best route with structured feedback and version control.",
              icon: BadgeCheck,
            },{
              title: "4) Delivery",
              desc: "Production-ready files, templates, and handover notes so your team can ship.",
              icon: ShieldCheck,
            }].map((step) => (
              <Card key={step.title} className="rounded-2xl border-white/10 bg-white/5 shadow-sm">
                <CardContent className="p-5">
                  <div className="flex items-start gap-3">
                    <div className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
                      <step.icon className="h-5 w-5" />
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-white">{step.title}</div>
                      <div className="mt-1 text-sm text-white/70">{step.desc}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* Pricing */}
        <section id="pricing" className="mx-auto max-w-6xl px-4 py-14 sm:px-6 sm:py-20">
          <SectionTitle
            eyebrow="Pricing"
            title="Clear packages — with room to customise"
            desc="Fixed starting points for common needs. If your scope is different, we’ll quote quickly after a short discovery call."
          />

          <div className="mt-10 grid gap-4 lg:grid-cols-3">
            <PricingCard plan={plans[0]} />
            <PricingCard plan={plans[1]} featured />
            <PricingCard plan={plans[2]} />
          </div>

          <div className="mx-auto mt-8 max-w-3xl rounded-2xl border border-white/10 bg-white/5 p-5 text-sm text-white/70">
            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-center gap-2">
                <ShieldCheck className="h-4 w-4" />
                <span>Every package includes source files + usage rights.</span>
              </div>
              <div className="flex items-center gap-2">
                <Timer className="h-4 w-4" />
                <span>Rush delivery available when slots allow.</span>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section id="faq" className="mx-auto max-w-6xl px-4 py-14 sm:px-6 sm:py-20">
          <SectionTitle
            eyebrow="FAQ"
            title="Good questions we get a lot"
            desc="If you’re unsure where to start, send a message — we’ll point you to the best option."
          />

          <div className="mx-auto mt-10 max-w-3xl">
            <Accordion type="single" collapsible className="rounded-2xl border border-white/10 bg-white/5 px-2">
              {[{
                q: "What does AI-assisted actually mean?",
                a: "We use AI for rapid exploration (variations, layout options, copy starters) and then apply human design judgement to curate, refine, and deliver production-ready work. You’re hiring taste, not just tools.",
              },{
                q: "Can you work with our existing brand?",
                a: "Yes — we can extend or refresh what you have. If the foundation is messy, we’ll propose a light brand tidy first so everything stays consistent.",
              },{
                q: "What do you need from us to start?",
                a: "A short brief: your offer, audience, references you like/dislike, timelines, and any existing assets (logo, fonts, photos). We’ll guide you through it.",
              },{
                q: "Do you build websites too?",
                a: "We can deliver full design + handoff, or we can build the site as well (Next.js/React). If you prefer WordPress, Webflow, or Squarespace, we can supply design and templates.",
              }].map((item) => (
                <AccordionItem key={item.q} value={item.q} className="border-white/10">
                  <AccordionTrigger className="text-left text-white">{item.q}</AccordionTrigger>
                  <AccordionContent className="text-white/70">{item.a}</AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </section>

        {/* Contact */}
        <section id="contact" className="mx-auto max-w-6xl px-4 pb-20 pt-14 sm:px-6 sm:pb-28 sm:pt-20">
          <div className="grid gap-6 lg:grid-cols-2">
            <div>
              <SectionTitle
                eyebrow="Contact"
                title="Tell us what you’re building"
                desc="Share your goals and timelines. We’ll reply with next steps, a quick estimate, and availability."
              />

              <div className="mt-8 grid gap-3">
                <Card className="rounded-2xl border-white/10 bg-white/5 shadow-sm">
                  <CardContent className="p-5">
                    <div className="flex items-start gap-3">
                      <div className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
                        <Mail className="h-5 w-5" />
                      </div>
                      <div>
                        <div className="text-sm font-semibold text-white">Email</div>
                        <div className="mt-1 text-sm text-white/70">hello@storybookmedia.co.uk</div>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <div className="grid gap-3 sm:grid-cols-2">
                  <Card className="rounded-2xl border-white/10 bg-white/5 shadow-sm">
                    <CardContent className="p-5">
                      <div className="flex items-start gap-3">
                        <div className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
                          <Phone className="h-5 w-5" />
                        </div>
                        <div>
                          <div className="text-sm font-semibold text-white">Phone</div>
                          <div className="mt-1 text-sm text-white/70">+44 (0)0000 000000</div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                  <Card className="rounded-2xl border-white/10 bg-white/5 shadow-sm">
                    <CardContent className="p-5">
                      <div className="flex items-start gap-3">
                        <div className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
                          <MapPin className="h-5 w-5" />
                        </div>
                        <div>
                          <div className="text-sm font-semibold text-white">Location</div>
                          <div className="mt-1 text-sm text-white/70">UK • Remote</div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </div>

            <Card className="rounded-2xl border-white/10 bg-white/5 shadow-sm">
              <CardContent className="p-6">
                <form onSubmit={submit} className="space-y-4">
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-2">
                      <label className="text-xs text-white/70">Name</label>
                      <Input className="rounded-2xl border-white/10 bg-black/40" placeholder="Your name" required />
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs text-white/70">Email</label>
                      <Input
                        className="rounded-2xl border-white/10 bg-black/40"
                        placeholder="you@company.com"
                        type="email"
                        required
                      />
                    </div>
                  </div>

                  <div className="grid gap-3 sm:grid-cols-2">
                    <div className="space-y-2">
                      <label className="text-xs text-white/70">Service</label>
                      <Select value={service} onValueChange={setService}>
                        <SelectTrigger className="rounded-2xl border-white/10 bg-black/40">
                          <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="brand">Brand identity</SelectItem>
                          <SelectItem value="web">Website / UI design</SelectItem>
                          <SelectItem value="marketing">Marketing design</SelectItem>
                          <SelectItem value="templates">Templates system</SelectItem>
                          <SelectItem value="retainer">Monthly studio</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <label className="text-xs text-white/70">Budget range</label>
                      <Select value={budget} onValueChange={setBudget}>
                        <SelectTrigger className="rounded-2xl border-white/10 bg-black/40">
                          <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="under-1000">Under £1,000</SelectItem>
                          <SelectItem value="1500-3000">£1,500–£3,000</SelectItem>
                          <SelectItem value="3000-6000">£3,000–£6,000</SelectItem>
                          <SelectItem value="6000-plus">£6,000+</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-xs text-white/70">Project details</label>
                    <Textarea
                      className="min-h-[140px] rounded-2xl border-white/10 bg-black/40"
                      placeholder="What are you launching? What do you need designed? Any timelines?"
                      required
                    />
                  </div>

                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <Button
                      type="submit"
                      className="rounded-2xl bg-white text-black hover:bg-white/90"
                      disabled={status === "sending" || status === "sent"}
                    >
                      {status === "idle" && "Send enquiry"}
                      {status === "sending" && "Sending…"}
                      {status === "sent" && "Sent ✓"}
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                    <div className="text-xs text-white/55">
                      By sending, you agree we can contact you about your enquiry.
                    </div>
                  </div>
                </form>

                <div className="mt-6 rounded-2xl border border-white/10 bg-black/30 p-4">
                  <div className="flex items-start gap-3">
                    <div className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/10">
                      <Sparkles className="h-5 w-5" />
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-white">Prefer a quick call?</div>
                      <div className="mt-1 text-sm text-white/70">
                        Drop your availability and we’ll send a calendar link.
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

        {/* Footer */}
        <footer className="border-t border-white/10 bg-black/40">
          <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-10 text-sm text-white/60 sm:px-6 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex items-center gap-2">
              <LogoMark />
              <span className="hidden sm:inline">•</span>
              <span>© {new Date().getFullYear()} {brand.name}. All rights reserved.</span>
            </div>
            <div className="flex flex-wrap gap-4">
              <a className="hover:text-white" href="#services">Services</a>
              <a className="hover:text-white" href="#work">Work</a>
              <a className="hover:text-white" href="#pricing">Pricing</a>
              <a className="hover:text-white" href="#contact">Contact</a>
            </div>
          </div>
        </footer>
      </main>
    </div>
  );
}