import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import { Car, Calendar, MapPin, ShieldCheck, Wrench, Gauge, CreditCard, Phone, Search, ChevronRight, Star, Menu, X, Clock3, CheckCircle2, CircleDollarSign, Sparkles } from "lucide-react";

const BRAND = {
  name: "Noir Auto Care",
  tagline: "Luxury you can trust. Pricing you can afford.",
  phone: "(800) 555-0199",
};

const services = [
  {
    slug: "booking-css",
    title: "Booking Pages CSS",
    icon: Calendar,
    blurb: "Dedicated styling system for appointment booking flows with luxury monochrome UX.",
    highlights: ["Step forms", "Sticky CTAs", "Time-slot cards", "Mobile-first"],
  },
  {
    slug: "widget-css",
    title: "Widget CSS",
    icon: Search,
    blurb: "Embeddable service widgets styled to match the site while staying compact and conversion-focused.",
    highlights: ["Embeds", "Side panels", "Service chips", "Fast quote UI"],
  },
  {
    slug: "facebook-css",
    title: "Facebook Business CSS",
    icon: Phone,
    blurb: "Lead-form and business-page style components tailored for Facebook traffic and trust signals.",
    highlights: ["Lead ads", "Messenger CTA", "Review blocks", "Promo cards"],
  },
  {
    slug: "tires",
    title: "Tires",
    icon: Car,
    blurb: "Shop by vehicle, size, or driving style with a polished premium buying flow.",
    highlights: ["By Vehicle", "By Size", "Road hazard options", "Premium + budget tiers"],
  },
  {
    slug: "repair",
    title: "Auto Repair",
    icon: Wrench,
    blurb: "Brake service, diagnostics, steering, suspension, and general repairs with clear next steps.",
    highlights: ["Brakes", "Diagnostics", "Suspension", "Engine repair"],
  },
  {
    slug: "maintenance",
    title: "Maintenance",
    icon: Gauge,
    blurb: "Oil changes, batteries, alignment, AC service, inspections, and routine care.",
    highlights: ["Oil service", "Batteries", "Alignment", "AC service"],
  },
  {
    slug: "financing",
    title: "Financing & Savings",
    icon: CreditCard,
    blurb: "Surface affordability early with offers, payment options, and confidence-building value messaging.",
    highlights: ["Monthly payments", "Coupons", "Bundle savings", "Transparent quotes"],
  },
];

const featuredServices = [
  "Oil Change",
  "Brakes",
  "Batteries",
  "Alignment",
  "Diagnostics",
  "Tire Repair",
  "AC Service",
  "Vehicle Inspection",
];

const trustStats = [
  { value: "4.9/5", label: "average local rating style" },
  { value: "Same Day", label: "service scheduling emphasis" },
  { value: "Easy Quotes", label: "clear price-first positioning" },
  { value: "Premium Care", label: "luxury visual identity" },
];

const reviews = [
  {
    name: "Jordan M.",
    text: "The site feels premium, but the booking flow is simple and fast. That combination builds trust instantly.",
  },
  {
    name: "Kayla R.",
    text: "Everything important is above the fold: tires, oil, brakes, location, and appointment scheduling.",
  },
  {
    name: "Andre T.",
    text: "The black-and-white style makes it look high-end without feeling overpriced or hard to use.",
  },
];

const locationCards = [
  {
    city: "Downtown",
    address: "1420 Main Street",
    hours: "Mon-Fri 7am-7pm • Sat 8am-6pm",
  },
  {
    city: "West Side",
    address: "8500 Commerce Drive",
    hours: "Mon-Fri 7am-7pm • Sun 9am-5pm",
  },
  {
    city: "North Point",
    address: "3001 North Avenue",
    hours: "Open nights and weekends",
  },
];

function Button({ children, primary = false, className = "", ...props }) {
  return (
    <button
      className={`rounded-2xl px-4 py-3 text-sm font-semibold transition ${
        primary
          ? "bg-white text-black hover:bg-zinc-200"
          : "border border-white/15 bg-white/5 text-white hover:border-white/30 hover:bg-white/10"
      } ${className}`}
      {...props}
    >
      {children}
    </button>
  );
}

function SectionTitle({ eyebrow, title, body }) {
  return (
    <div className="max-w-3xl">
      <div className="text-xs uppercase tracking-[0.35em] text-white/45">{eyebrow}</div>
      <h2 className="mt-3 text-3xl font-semibold tracking-tight md:text-5xl">{title}</h2>
      {body ? <p className="mt-4 text-sm leading-7 text-white/65 md:text-base">{body}</p> : null}
    </div>
  );
}

function Header({ page, setPage }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["home", "Home"],
    ["services", "Services"],
    ["landing", "Landing Page"],
    ["brand", "Brand System"],
    ["booking-css", "Booking CSS"],
    ["widget-css", "Widget CSS"],
    ["facebook-css", "Facebook CSS"],
    ["contact", "Contact"],
  ];

  return (
    <header className="sticky top-0 z-50 border-b border-white/10 bg-black/85 backdrop-blur-xl">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 md:px-6 lg:px-10">
        <button className="text-left" onClick={() => setPage("home")}>
          <div className="text-xl font-semibold tracking-[0.3em] text-white md:text-2xl">NOIR</div>
          <div className="text-[10px] uppercase tracking-[0.35em] text-white/45 md:text-xs">Auto Care</div>
        </button>

        <nav className="hidden items-center gap-7 lg:flex">
          {links.map(([key, label]) => (
            <button
              key={key}
              onClick={() => setPage(key)}
              className={`text-sm transition ${page === key ? "text-white" : "text-white/65 hover:text-white"}`}
            >
              {label}
            </button>
          ))}
        </nav>

        <div className="hidden items-center gap-3 lg:flex">
          <Button>Request Quote</Button>
          <Button primary>Schedule Service</Button>
        </div>

        <button
          className="rounded-2xl border border-white/10 p-2 text-white lg:hidden"
          onClick={() => setOpen(!open)}
          aria-label="Open menu"
        >
          {open ? <X size={20} /> : <Menu size={20} />}
        </button>
      </div>

      {open ? (
        <div className="border-t border-white/10 px-4 py-4 lg:hidden">
          <div className="flex flex-col gap-2">
            {links.map(([key, label]) => (
              <button
                key={key}
                onClick={() => {
                  setPage(key);
                  setOpen(false);
                }}
                className={`rounded-2xl px-3 py-3 text-left text-sm ${page === key ? "bg-white text-black" : "bg-white/5 text-white"}`}
              >
                {label}
              </button>
            ))}
            <div className="mt-2 grid grid-cols-2 gap-2">
              <Button>Quote</Button>
              <Button primary>Book</Button>
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function Hero({ setPage }) {
  return (
    <section className="relative overflow-hidden border-b border-white/10">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.16),transparent_25%),radial-gradient(circle_at_bottom_left,rgba(255,255,255,0.08),transparent_30%)]" />
      <div className="mx-auto grid max-w-7xl gap-10 px-4 py-12 md:px-6 md:py-16 lg:grid-cols-[1.1fr_0.9fr] lg:px-10 lg:py-24">
        <motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45 }} className="relative z-10">
          <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-[11px] uppercase tracking-[0.3em] text-white/60 md:text-xs">
            <Sparkles size={14} /> Premium service architecture inspired by national auto-care UX
          </div>
          <h1 className="mt-5 max-w-4xl text-4xl font-semibold leading-tight tracking-tight md:text-6xl">
            A trust-first auto care website with a luxury black-and-white identity.
          </h1>
          <p className="mt-5 max-w-2xl text-sm leading-7 text-white/70 md:text-lg">
            This concept blends the familiar service funnel used by large automotive service brands with an upscale monochrome design system that feels dependable, modern, and affordable.
          </p>

          <div className="mt-8 flex flex-wrap gap-3">
            <Button primary onClick={() => setPage("landing")}>View Landing Page</Button>
            <Button onClick={() => setPage("services")}>Explore Service Pages</Button>
            <Button onClick={() => setPage("brand")}>Brand System</Button>
          </div>

          <div className="mt-8 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
            {trustStats.map((item) => (
              <div key={item.label} className="rounded-3xl border border-white/10 bg-white/5 p-5">
                <div className="text-2xl font-semibold">{item.value}</div>
                <div className="mt-1 text-xs uppercase tracking-[0.2em] text-white/50">{item.label}</div>
              </div>
            ))}
          </div>
        </motion.div>

        <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.45, delay: 0.05 }} className="relative z-10">
          <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/10 to-white/5 p-5 shadow-[0_24px_90px_rgba(0,0,0,0.45)] md:p-6">
            <div className="flex items-center justify-between">
              <div>
                <div className="text-xs uppercase tracking-[0.3em] text-white/45">Quick Service Finder</div>
                <div className="mt-1 text-2xl font-semibold">Book in under 60 seconds</div>
              </div>
              <div className="rounded-full border border-white/15 px-3 py-1 text-xs text-white/60">Mobile-first</div>
            </div>

            <div className="mt-5 space-y-3">
              {[
                "Choose service: Tires, Oil, Brakes, Alignment, Battery",
                "Enter vehicle details or tire size",
                "Select ZIP code and store",
                "See clear quote path and available appointments",
              ].map((step, index) => (
                <div key={step} className="rounded-2xl border border-white/10 bg-black/40 p-4">
                  <div className="text-[11px] uppercase tracking-[0.3em] text-white/40">Step {index + 1}</div>
                  <div className="mt-1 text-sm text-white/85">{step}</div>
                </div>
              ))}
            </div>

            <div className="mt-5 grid grid-cols-2 gap-3">
              <Button className="w-full">Find a Store</Button>
              <Button primary className="w-full">Get Pricing</Button>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

function HomePage({ setPage }) {
  return (
    <>
      <Hero setPage={setPage} />

      <section className="mx-auto max-w-7xl px-4 py-14 md:px-6 lg:px-10 lg:py-20">
        <SectionTitle
          eyebrow="Business model structure"
          title="Built around the same high-intent user paths customers already understand"
          body="The source inspiration prominently pushes shoppers into tires, repair, maintenance, quotes, store lookup, financing, and scheduling. This concept keeps that same conversion logic while giving it a more premium visual system."
        />

        <div className="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-4">
          {services.map((service) => {
            const Icon = service.icon;
            return (
              <motion.div whileHover={{ y: -4 }} key={service.slug} className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6">
                <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/15 bg-white/5">
                  <Icon size={20} />
                </div>
                <h3 className="mt-5 text-2xl font-semibold">{service.title}</h3>
                <p className="mt-3 text-sm leading-6 text-white/65">{service.blurb}</p>
                <div className="mt-5 flex flex-wrap gap-2">
                  {service.highlights.map((h) => (
                    <span key={h} className="rounded-full border border-white/10 px-3 py-1 text-xs text-white/65">{h}</span>
                  ))}
                </div>
                <button onClick={() => setPage("services")} className="mt-6 inline-flex items-center gap-2 text-sm text-white">
                  View page pattern <ChevronRight size={16} />
                </button>
              </motion.div>
            );
          })}
        </div>
      </section>

      <section className="border-y border-white/10 bg-white/[0.02]">
        <div className="mx-auto max-w-7xl px-4 py-14 md:px-6 lg:px-10 lg:py-20">
          <div className="grid gap-8 lg:grid-cols-[0.95fr_1.05fr]">
            <div>
              <SectionTitle
                eyebrow="Why the layout works"
                title="Luxury look, practical conversion flow"
                body="The homepage keeps important automotive actions near the top: schedule an appointment, request a quote, find a store, and jump into core services. That mirrors what Firestone emphasizes across navigation, service categories, and booking entry points. ([firestonecompleteautocare.com](https://www.firestonecompleteautocare.com/))"
              />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              {[
                ["Trust", "Visible locations, hours, and scheduling options reinforce reliability."],
                ["Affordability", "Savings and financing content should appear early, not buried."],
                ["Usability", "Fast entry into tires, oil, brakes, batteries, and alignment."],
                ["Luxury", "Monochrome palette, strong contrast, clean spacing, elevated card treatment."],
              ].map(([title, body]) => (
                <div key={title} className="rounded-3xl border border-white/10 bg-black/35 p-5">
                  <div className="text-lg font-semibold">{title}</div>
                  <div className="mt-2 text-sm leading-6 text-white/65">{body}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-14 md:px-6 lg:px-10 lg:py-20">
        <SectionTitle
          eyebrow="Featured services"
          title="Top revenue services should stay visible above the fold and in the first scroll"
          body="The inspiration site heavily emphasizes tires, oil changes, brakes, batteries, alignment, store finding, and quotes. This grid keeps those exact categories easy to scan and tap on mobile. ([firestonecompleteautocare.com](https://www.firestonecompleteautocare.com/))"
        />
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {featuredServices.map((item) => (
            <div key={item} className="rounded-3xl border border-white/10 bg-white/[0.03] p-5">
              <div className="text-lg font-medium">{item}</div>
              <div className="mt-2 text-sm text-white/60">Fast quote path + clear appointment CTA</div>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 pb-14 md:px-6 lg:px-10 lg:pb-20">
        <div className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
          <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.05] to-white/[0.02] p-6 md:p-8">
            <SectionTitle
              eyebrow="Store experience"
              title="Location finder should feel premium, not generic"
              body="The reference site places strong emphasis on store discovery, hours, directions, and appointment access. This concept turns that into a cleaner card-based layout that feels more upscale. ([firestonecompleteautocare.com](https://www.firestonecompleteautocare.com/))"
            />
            <div className="mt-6 grid gap-4">
              {locationCards.map((card) => (
                <div key={card.city} className="rounded-3xl border border-white/10 bg-black/30 p-5">
                  <div className="flex flex-wrap items-start justify-between gap-4">
                    <div>
                      <div className="text-xl font-semibold">{BRAND.name} {card.city}</div>
                      <div className="mt-2 flex items-center gap-2 text-sm text-white/65"><MapPin size={16} /> {card.address}</div>
                      <div className="mt-2 flex items-center gap-2 text-sm text-white/65"><Clock3 size={16} /> {card.hours}</div>
                    </div>
                    <Button primary>Book Now</Button>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
            <div className="text-xs uppercase tracking-[0.35em] text-white/45">Social proof</div>
            <h3 className="mt-3 text-3xl font-semibold">Customer confidence without visual clutter</h3>
            <div className="mt-6 space-y-4">
              {reviews.map((review) => (
                <div key={review.name} className="rounded-3xl border border-white/10 bg-black/25 p-5">
                  <div className="mb-2 flex items-center gap-1 text-white">
                    {Array.from({ length: 5 }).map((_, i) => <Star key={i} size={16} fill="currentColor" />)}
                  </div>
                  <div className="text-sm leading-7 text-white/70">{review.text}</div>
                  <div className="mt-3 text-sm font-semibold">{review.name}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function ServiceTemplate({ title, intro, bullets, cta }) {
  return (
    <div className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle eyebrow="Service page pattern" title={title} body={intro} />
      <div className="mt-8 grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Quick action</div>
          <div className="mt-3 text-3xl font-semibold">{cta}</div>
          <div className="mt-5 space-y-3">
            {[
              "Enter year, make, model",
              "Confirm ZIP code or location",
              "Choose store and time",
              "Review service details and submit",
            ].map((line, i) => (
              <div key={line} className="rounded-2xl border border-white/10 bg-black/35 p-4">
                <div className="text-[11px] uppercase tracking-[0.3em] text-white/45">Flow {i + 1}</div>
                <div className="mt-1 text-sm text-white/80">{line}</div>
              </div>
            ))}
          </div>
          <div className="mt-5 grid grid-cols-2 gap-3">
            <Button>Request Quote</Button>
            <Button primary>Schedule</Button>
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.05] to-transparent p-6">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Content structure</div>
          <div className="mt-4 grid gap-4 sm:grid-cols-2">
            {bullets.map((b) => (
              <div key={b} className="rounded-2xl border border-white/10 bg-black/30 p-5 text-sm text-white/75">
                <div className="flex items-start gap-3">
                  <CheckCircle2 size={18} className="mt-0.5" />
                  <span>{b}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ServicesPage() {
  const tabs = useMemo(
    () => [
      {
        key: "tires",
        label: "Tires",
        intro:
          "Tire pages should let users shop by vehicle, by size, and eventually by brand. Keep the quote and booking path obvious at every step.",
        bullets: [
          "Hero with vehicle / size tabs",
          "Premium, mid-tier, and affordable product bands",
          "Warranty and road-hazard reassurance",
          "Sticky booking CTA on mobile",
        ],
        cta: "Find your perfect set",
      },
      {
        key: "repair",
        label: "Auto Repair",
        intro:
          "Repair pages should feel trustworthy, not technical or intimidating. Organize the service menu by common problems and common categories.",
        bullets: [
          "Brakes, suspension, engine, diagnostic categories",
          "Short trust-building explanations",
          "Request quote and book service at all decision points",
          "Repair timeline and next-step explanation blocks",
        ],
        cta: "Get repair options",
      },
      {
        key: "maintenance",
        label: "Maintenance",
        intro:
          "Maintenance pages should reduce friction. Oil changes, batteries, alignment, and inspections must be one or two taps away on mobile.",
        bullets: [
          "Simple service cards with estimated time",
          "Store locator integrated near top",
          "Membership or repeat-customer value section",
          "Bundle pricing or routine care plans",
        ],
        cta: "Schedule maintenance",
      },
    ],
    []
  );
  const [active, setActive] = useState("tires");
  const current = tabs.find((t) => t.key === active) || tabs[0];

  return (
    <section>
      <div className="mx-auto max-w-7xl px-4 pt-12 md:px-6 lg:px-10">
        <SectionTitle
          eyebrow="Multi-page website"
          title="Service pages designed for conversion, trust, and mobile usability"
          body="The reference structure breaks users into major categories like tires, repair, and maintenance, then funnels them into quotes, store selection, and scheduling. This version keeps that logic but refines the UX and visual polish. ([firestonecompleteautocare.com](https://www.firestonecompleteautocare.com/))"
        />
        <div className="mt-8 flex flex-wrap gap-3">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActive(tab.key)}
              className={`rounded-full px-4 py-2 text-sm ${active === tab.key ? "bg-white text-black" : "border border-white/15 bg-white/5 text-white"}`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>
      <ServiceTemplate title={current.label} intro={current.intro} bullets={current.bullets} cta={current.cta} />
    </section>
  );
}

function LandingPage() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle
        eyebrow="Mobile-first landing page"
        title="A focused landing page for ads, social traffic, or local search"
        body="This version strips the experience down to the highest-value conversion actions: choose service, choose vehicle, pick a store, and book. It is ideal for local ad campaigns, seasonal offers, or a single-store conversion page."
      />

      <div className="mt-8 grid gap-6 lg:grid-cols-[1fr_0.95fr]">
        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.06] to-white/[0.02] p-6 md:p-8">
          <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-2 text-xs uppercase tracking-[0.3em] text-white/55">
            <ShieldCheck size={14} /> Trusted local auto care
          </div>
          <h3 className="mt-5 text-3xl font-semibold md:text-5xl">Premium service without premium confusion.</h3>
          <p className="mt-4 max-w-xl text-sm leading-7 text-white/70 md:text-base">
            Book tires, oil, brakes, batteries, or alignment in minutes. Clean interface. Fast path. Transparent value.
          </p>
          <div className="mt-7 flex flex-wrap gap-3">
            <Button primary>Book Appointment</Button>
            <Button>View Pricing</Button>
          </div>

          <div className="mt-8 grid gap-3 sm:grid-cols-2">
            {[
              "Above-the-fold phone and booking CTA",
              "Single-column mobile-friendly layout",
              "Service chips for top tasks",
              "Short trust-bar with reviews, warranty, and financing",
            ].map((item) => (
              <div key={item} className="rounded-2xl border border-white/10 bg-black/30 p-4 text-sm text-white/75">
                {item}
              </div>
            ))}
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Lead capture / booking card</div>
          <div className="mt-3 text-2xl font-semibold">Get pricing near you</div>
          <div className="mt-5 space-y-3">
            {[
              "ZIP code",
              "Year / Make / Model",
              "Select service",
              "Preferred day / time",
            ].map((field) => (
              <div key={field} className="rounded-2xl border border-white/10 bg-black/40 px-4 py-4 text-sm text-white/55">
                {field}
              </div>
            ))}
          </div>
          <Button primary className="mt-5 w-full">See Appointments</Button>
          <div className="mt-5 rounded-2xl border border-dashed border-white/15 p-4 text-sm leading-6 text-white/60">
            Best for paid traffic, Instagram/TikTok bio links, local SEO landing pages, and promo campaigns.
          </div>
        </div>
      </div>
    </section>
  );
}

function BrandPage() {
  const colors = [
    ["Obsidian", "#000000"],
    ["Graphite", "#111111"],
    ["Charcoal", "#1E1E1E"],
    ["Mist", "#EDEDED"],
    ["Pearl", "#FFFFFF"],
  ];

  return (
    <section className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle
        eyebrow="Brand-specific version"
        title="Black-and-white system designed to signal luxury, trust, and affordability"
        body="Instead of bright promo colors, this identity leans on contrast, spacing, restraint, and premium typography rhythm. The result feels high-end while still practical for a service business."
      />

      <div className="mt-8 grid gap-6 lg:grid-cols-[1fr_1fr]">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Color system</div>
          <div className="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-5">
            {colors.map(([name, hex]) => (
              <div key={hex} className="space-y-2">
                <div className="h-20 rounded-2xl border border-white/10" style={{ backgroundColor: hex }} />
                <div className="text-sm font-medium">{name}</div>
                <div className="text-xs text-white/55">{hex}</div>
              </div>
            ))}
          </div>

          <div className="mt-8 rounded-3xl border border-white/10 bg-black/30 p-5">
            <div className="text-xs uppercase tracking-[0.35em] text-white/45">Tone words</div>
            <div className="mt-3 flex flex-wrap gap-2">
              {[
                "Refined",
                "Reliable",
                "Fast",
                "Clean",
                "Transparent",
                "Professional",
                "Affordable",
              ].map((word) => (
                <span key={word} className="rounded-full border border-white/10 px-3 py-1 text-xs text-white/70">{word}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.05] to-transparent p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Applied UX rules</div>
          <div className="mt-5 space-y-4">
            {[
              "Use white CTA buttons only for primary actions like booking and getting pricing.",
              "Keep secondary actions in subtle outlined cards so the screen stays premium and uncluttered.",
              "Pair luxury visuals with trust elements: reviews, store hours, warranties, phone number, and financing.",
              "Use service-first language instead of abstract brand-first copy.",
              "Make mobile tap targets large and the first scroll conversion-oriented.",
            ].map((rule) => (
              <div key={rule} className="rounded-2xl border border-white/10 bg-black/30 p-4 text-sm leading-6 text-white/75">
                {rule}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BookingCssPage() {
  const cssSnippet = `.booking-shell {
  background: linear-gradient(180deg, #111111 0%, #000000 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  color: #ffffff;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.booking-step {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 16px;
}

.booking-primary-btn {
  background: #ffffff;
  color: #000000;
  border-radius: 18px;
  padding: 14px 20px;
  font-weight: 700;
}

.booking-primary-btn:hover {
  background: #e5e5e5;
}`;

  return (
    <section className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle
        eyebrow="Booking pages CSS"
        title="Luxury monochrome styling for booking flows"
        body="This section adds a dedicated CSS direction for multi-step booking pages so scheduling, service selection, and confirmation screens all match the main site experience."
      />

      <div className="mt-8 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Use cases</div>
          <div className="mt-5 grid gap-4">
            {[
              "Service selection pages",
              "Calendar and time-slot selection",
              "Vehicle information forms",
              "Booking confirmation screens",
            ].map((item) => (
              <div key={item} className="rounded-2xl border border-white/10 bg-black/30 p-4 text-sm text-white/75">
                {item}
              </div>
            ))}
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.06] to-white/[0.02] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Starter CSS</div>
          <pre className="mt-4 overflow-x-auto rounded-3xl border border-white/10 bg-black/50 p-5 text-xs leading-6 text-white/80">
            <code>{cssSnippet}</code>
          </pre>
        </div>
      </div>
    </section>
  );
}

function WidgetCssPage() {
  const cssSnippet = `.service-widget {
  width: 100%;
  max-width: 420px;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 20px;
  color: #fff;
}

.widget-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
}

.widget-input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #151515;
  color: #fff;
  padding: 14px 16px;
}`;

  return (
    <section className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle
        eyebrow="Widget CSS"
        title="Embeddable widget styling for quotes, booking, and service search"
        body="This section is for smaller embedded components that can sit on landing pages, sidebars, or external pages while still looking premium and brand-consistent."
      />

      <div className="mt-8 grid gap-6 lg:grid-cols-[1fr_1fr]">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Widget types</div>
          <div className="mt-5 flex flex-wrap gap-2">
            {[
              "Get Quote",
              "Find Store",
              "Pick Service",
              "Schedule Now",
              "Tire Search",
              "Promo Offer",
            ].map((item) => (
              <span key={item} className="rounded-full border border-white/10 px-3 py-2 text-xs text-white/70">{item}</span>
            ))}
          </div>
          <div className="mt-6 rounded-3xl border border-white/10 bg-black/30 p-5 text-sm leading-7 text-white/70">
            Best for compact booking cards, homepage side modules, embedded service finders, and ad campaign destination widgets.
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.06] to-transparent p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Starter CSS</div>
          <pre className="mt-4 overflow-x-auto rounded-3xl border border-white/10 bg-black/50 p-5 text-xs leading-6 text-white/80">
            <code>{cssSnippet}</code>
          </pre>
        </div>
      </div>
    </section>
  );
}

function FacebookBusinessCssPage() {
  const cssSnippet = `.fb-business-card {
  background: linear-gradient(180deg, #121212 0%, #050505 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 20px;
  color: #ffffff;
}

.fb-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fb-secondary-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #ffffff;
  border-radius: 16px;
  padding: 12px 16px;
}

.fb-review-badge {
  display: inline-block;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  padding: 6px 12px;
  font-weight: 700;
}`;

  return (
    <section className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle
        eyebrow="Facebook business CSS"
        title="Facebook-friendly business styling for trust, leads, and messaging"
        body="This section supports Facebook traffic by styling lead cards, promo blocks, click-to-message sections, and review-driven conversion modules in the same black-and-white luxury system."
      />

      <div className="mt-8 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Facebook-focused modules</div>
          <div className="mt-5 grid gap-4 sm:grid-cols-2">
            {[
              "Lead generation cards",
              "Messenger call-to-action rows",
              "Service promo banners",
              "Review and trust badges",
              "Offer countdown cards",
              "Book now promo blocks",
            ].map((item) => (
              <div key={item} className="rounded-2xl border border-white/10 bg-black/30 p-4 text-sm text-white/75">
                {item}
              </div>
            ))}
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.06] to-white/[0.02] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Starter CSS</div>
          <pre className="mt-4 overflow-x-auto rounded-3xl border border-white/10 bg-black/50 p-5 text-xs leading-6 text-white/80">
            <code>{cssSnippet}</code>
          </pre>
        </div>
      </div>
    </section>
  );
}

function ContactPage() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-12 md:px-6 lg:px-10 lg:py-16">
      <SectionTitle
        eyebrow="Brand-ready contact page"
        title={`A polished contact and conversion page for ${BRAND.name}`}
        body="This page keeps the phone number, store search, and quote request accessible while maintaining the same monochrome premium feel."
      />

      <div className="mt-8 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Get in touch</div>
          <div className="mt-4 space-y-4 text-white/80">
            <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/30 p-4"><Phone size={18} /> {BRAND.phone}</div>
            <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/30 p-4"><MapPin size={18} /> Find your nearest location</div>
            <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/30 p-4"><Calendar size={18} /> Schedule online anytime</div>
            <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/30 p-4"><CircleDollarSign size={18} /> Request a transparent quote</div>
          </div>
        </div>

        <div className="rounded-[2rem] border border-white/10 bg-gradient-to-b from-white/[0.06] to-white/[0.02] p-6 md:p-8">
          <div className="text-xs uppercase tracking-[0.35em] text-white/45">Search + quote</div>
          <div className="mt-3 text-2xl font-semibold">Start your service request</div>
          <div className="mt-5 space-y-3">
            {[
              "Search by service",
              "ZIP code",
              "Vehicle details",
              "Preferred appointment time",
            ].map((f) => (
              <div key={f} className="flex items-center gap-3 rounded-2xl border border-white/10 bg-black/35 px-4 py-4 text-sm text-white/55">
                <Search size={16} /> {f}
              </div>
            ))}
          </div>
          <div className="mt-5 grid grid-cols-2 gap-3">
            <Button>Request Quote</Button>
            <Button primary>Continue</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function LuxuryAutoCareMonochromeSystem() {
  const [page, setPage] = useState("home");

  return (
    <div className="min-h-screen bg-black text-white">
      <Header page={page} setPage={setPage} />

      {page === "home" && <HomePage setPage={setPage} />}
      {page === "services" && <ServicesPage />}
      {page === "landing" && <LandingPage />}
      {page === "brand" && <BrandPage />}
      {page === "booking-css" && <BookingCssPage />}
      {page === "widget-css" && <WidgetCssPage />}
      {page === "facebook-css" && <FacebookBusinessCssPage />}
      {page === "contact" && <ContactPage />}

      <footer className="border-t border-white/10 bg-white/[0.02]">
        <div className="mx-auto grid max-w-7xl gap-8 px-4 py-10 md:px-6 lg:grid-cols-[1fr_auto] lg:px-10">
          <div>
            <div className="text-xl font-semibold tracking-[0.25em]">NOIR AUTO CARE</div>
            <div className="mt-2 max-w-2xl text-sm leading-6 text-white/60">
              Inspired by the conversion-driven structure of Firestone’s public-facing experience, including strong navigation for tires, repair, maintenance, quote requests, store finding, and appointment scheduling. ([firestonecompleteautocare.com](https://www.firestonecompleteautocare.com/))
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-3">
            <Button>Request Quote</Button>
            <Button primary>Schedule Service</Button>
          </div>
        </div>
      </footer>
    </div>
  );
}