const { useState, useEffect, useMemo, useRef } = React;
const { ArrowRight, ArrowUpRight, ChevronDown, Search, Lock, Database, Sparkles, Send,
  Check, Plus, MapPin, Building, Truck, Stethoscope, Wrench, Coffee, CreditCard,
  Shield, Webhook, Calendar, Filter, Menu, X, Dot, Cpu, Briefcase, Banknote, HardHat } = window.Icons;
const { VERTICAL_STYLES, ROWS, TICKER } = window.Data;
const { IconRestaurant, IconHomeServices, IconInsurance, IconFintech } = window.VerticalIcons;
const Reveal = window.Reveal;

// ─── Wordmark ──────────────────────────────────────────────────────────────
function Wordmark({ dark = false, size = "text-xl" }) {
  return (
    <a href="#top" className={`font-display ${size} font-semibold tracking-tightest ${dark ? "text-white" : "text-ink-900"} flex items-baseline gap-0`}>
      <span>sunwrit</span>
      <span className="text-accent">.</span>
    </a>
  );
}

// ─── Vertical badge ────────────────────────────────────────────────────────
function VerticalBadge({ name, size = "sm" }) {
  const s = VERTICAL_STYLES[name] || VERTICAL_STYLES["Construction"];
  const px = size === "sm" ? "px-2 py-0.5 text-[11px]" : "px-2.5 py-1 text-xs";
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full font-medium ${px} ${s.bg} ${s.text}`}>
      <Dot className={s.dot} />
      {name}
    </span>
  );
}

// ─── Nav ───────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["How it works", "#how"],
    ["Pricing", "#pricing"],
    ["Sample data", "#sample"],
    ["Contact", "#contact"],
  ];
  return (
    <header className={`fixed top-0 inset-x-0 z-40 ${scrolled ? "nav-scrolled" : ""}`}>
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between">
        <Wordmark />
        <nav className="hidden md:flex items-center gap-8">
          {links.map(([l, h]) => (
            <a key={h} href={h} className="text-sm text-ink-600 hover:text-ink-900 transition-colors">{l}</a>
          ))}
        </nav>
        <div className="hidden md:flex items-center gap-3">
          <a href="#contact" className="text-sm font-medium text-ink-700 hover:text-ink-900">Sign in</a>
          <a href="#contact" className="btn-primary inline-flex items-center gap-1.5 bg-ink-900 text-white text-sm font-medium px-3.5 py-2 rounded-lg hover:bg-ink-800">
            Get a sample <ArrowRight size={14} />
          </a>
        </div>
        <button className="md:hidden p-2 -mr-2" onClick={() => setOpen(v => !v)} aria-label="menu">
          {open ? <X /> : <Menu />}
        </button>
      </div>
      {open && (
        <div className="md:hidden border-t border-ink-200 bg-ink-50">
          <div className="px-6 py-4 flex flex-col gap-3">
            {links.map(([l, h]) => <a key={h} href={h} onClick={() => setOpen(false)} className="text-sm text-ink-700 py-1">{l}</a>)}
            <a href="#contact" className="mt-2 inline-flex items-center justify-center bg-ink-900 text-white text-sm font-medium px-4 py-2.5 rounded-lg">Get a sample</a>
          </div>
        </div>
      )}
    </header>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────────
const HERO_PRESETS = {
  "off-white":   { base: "#FAFAF7", a: null,         b: null,         c: null,         dot: "rgba(11,18,32,0.07)" },
  "florida":     { base: "#FAFAF7", a: "#F97316",    b: "#FACC15",    c: "#10B981",    dot: "rgba(11,18,32,0.07)" },
  "citrus":      { base: "#FFF7ED", a: "#FB923C",    b: "#FDE68A",    c: "#F472B6",    dot: "rgba(154,52,18,0.10)" },
  "aurora":      { base: "#F5F3FF", a: "#A78BFA",    b: "#34D399",    c: "#60A5FA",    dot: "rgba(76,29,149,0.10)" },
  "coastal":     { base: "#F0F9FF", a: "#38BDF8",    b: "#22D3EE",    c: "#A78BFA",    dot: "rgba(7,89,133,0.10)" },
  "sunset":      { base: "#FFF1F2", a: "#FB7185",    b: "#F97316",    c: "#A78BFA",    dot: "rgba(159,18,57,0.10)" },
  "midnight":    { base: "#0B1220", a: "#6366F1",    b: "#0EA5E9",    c: "#F97316",    dot: "rgba(255,255,255,0.06)", dark: true },
};

function Hero({ tw }) {
  const preset = HERO_PRESETS[tw.heroPreset] || HERO_PRESETS["off-white"];
  const intensity = tw.heroIntensity / 100; // 0..1
  const dark = preset.dark;
  const angle = tw.heroAngle;

  const blobStyle = (color, x, y, size) => ({
    position: "absolute",
    left: x, top: y,
    width: size, height: size,
    background: color,
    opacity: intensity,
    borderRadius: "50%",
    filter: `blur(${tw.heroBlur}px)`,
    pointerEvents: "none",
    mixBlendMode: dark ? "screen" : "multiply",
  });

  return (
    <section id="top" className="relative pt-28 lg:pt-36 pb-16 lg:pb-24 overflow-hidden" style={{ background: preset.base }}>
      {/* Color hue layers */}
      {preset.a && tw.heroShowA && <div style={blobStyle(preset.a, "-10%", "-20%", "55vw")} />}
      {preset.b && tw.heroShowB && <div style={blobStyle(preset.b, "55%",  "-10%", "45vw")} />}
      {preset.c && tw.heroShowC && <div style={blobStyle(preset.c, "20%",  "30%",  "60vw")} />}

      {/* Optional gradient sweep */}
      {tw.heroSweep && preset.a && (
        <div className="absolute inset-0 pointer-events-none" style={{
          background: `linear-gradient(${angle}deg, ${preset.a}${Math.round(intensity*60).toString(16).padStart(2,"0")} 0%, transparent 60%)`,
          mixBlendMode: dark ? "screen" : "multiply",
        }} />
      )}

      <div className="absolute inset-0 dotgrid opacity-60 pointer-events-none"
           style={{ backgroundImage: `radial-gradient(${preset.dot} 1px, transparent 1px)` }} />
      <div className="absolute inset-0 hero-rule pointer-events-none opacity-50" />
      <div className={`relative max-w-[1240px] mx-auto px-6 lg:px-10 ${dark ? "text-white" : ""}`}>
        {/* status pill */}
        <div className="flex items-center gap-2 mb-6">
          <span className={`inline-flex items-center gap-2 ring-soft rounded-full px-3 py-1 text-xs font-medium ${dark ? "bg-white/10 text-white/80 border border-white/10" : "bg-white text-ink-600"}`}>
            <span className="relative flex w-2 h-2">
              <span className="absolute inset-0 rounded-full bg-emerald-500 live-dot" />
              <span className="relative w-2 h-2 rounded-full bg-emerald-500" />
            </span>
            Last sync · Mon, Apr 27 · 2,841 new entities this week
          </span>
        </div>

        <h1 className={`font-display font-bold tracking-tightest text-[44px] sm:text-[60px] lg:text-[76px] leading-[0.98] max-w-[14ch] ${dark ? "text-white" : "text-ink-900"}`}>
          Every new Florida business, before your competitors find them.
        </h1>

        <p className={`mt-6 max-w-2xl text-lg lg:text-[21px] leading-relaxed font-light ${dark ? "text-white/65" : "text-ink-600"}`}>
          Weekly feeds of newly-formed LLCs and corporations from the Florida Division of Corporations
          — segmented by vertical, enriched with founder contact info, delivered straight to your CRM.
        </p>

        <div className="mt-9 flex flex-wrap items-center gap-3">
          <a href="#contact" className="btn-primary inline-flex items-center gap-2 bg-accent hover:bg-accent-600 text-white font-semibold px-5 py-3 rounded-lg text-[15px]">
            Get a free sample <ArrowRight size={16} />
          </a>
          <a href="#pricing" className={`btn-ghost inline-flex items-center gap-2 border font-semibold px-5 py-3 rounded-lg text-[15px] ${dark ? "bg-white/5 border-white/15 hover:border-white/40 text-white" : "bg-white border-ink-200 hover:border-ink-400 text-ink-800"}`}>
            See pricing
          </a>
          <span className={`text-xs ml-1 ${dark ? "text-white/50" : "text-ink-500"}`}>No credit card required. Sample includes last week's data.</span>
        </div>

        {/* Sample table preview card — sits below CTAs */}
        <SampleTablePreview />
      </div>
    </section>
  );
}

function SampleTablePreview() {
  const previewRows = ROWS.slice(0, 6);
  return (
    <div className="mt-14 lg:mt-20">
      <div className="bg-white rounded-2xl shadow-card ring-soft overflow-hidden">
        {/* Window chrome */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-ink-100 bg-ink-50/60">
          <div className="flex items-center gap-2">
            <span className="w-2.5 h-2.5 rounded-full bg-ink-200" />
            <span className="w-2.5 h-2.5 rounded-full bg-ink-200" />
            <span className="w-2.5 h-2.5 rounded-full bg-ink-200" />
            <span className="ml-3 font-mono text-[11px] text-ink-500">sunwrit / florida-feed / week-17.csv</span>
          </div>
          <div className="hidden sm:flex items-center gap-2 text-[11px] text-ink-500">
            <span className="relative flex w-1.5 h-1.5"><span className="absolute inset-0 rounded-full bg-emerald-500 live-dot" /><span className="relative w-1.5 h-1.5 rounded-full bg-emerald-500" /></span>
            Live · refreshed Mon 6:00am ET
          </div>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="text-left text-[11px] uppercase tracking-wider text-ink-400 font-medium">
                <th className="py-3 px-4 font-medium">Entity</th>
                <th className="py-3 px-4 font-medium">City</th>
                <th className="py-3 px-4 font-medium">Vertical</th>
                <th className="py-3 px-4 font-medium">Filed</th>
                <th className="py-3 px-4 font-medium">Officer contact</th>
              </tr>
            </thead>
            <tbody>
              {previewRows.map((r, i) => (
                <tr key={i} className="row-hover border-t border-ink-100">
                  <td className="py-3.5 px-4 font-medium text-ink-900 whitespace-nowrap">{r.name}</td>
                  <td className="py-3.5 px-4 text-ink-600 whitespace-nowrap">{r.city}</td>
                  <td className="py-3.5 px-4"><VerticalBadge name={r.vertical} /></td>
                  <td className="py-3.5 px-4 text-ink-600 whitespace-nowrap font-mono text-xs">{r.filedDate}</td>
                  <td className="py-3.5 px-4">
                    <div className={`text-ink-700 ${i >= 3 ? "lock-blur" : ""}`}>{r.officer} · {r.email}</div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="flex items-center justify-between px-4 py-3 border-t border-ink-100 bg-ink-50/60 text-xs text-ink-500">
          <span>Showing 6 of <span className="font-mono text-ink-700">2,841</span> entities filed Apr 21–27</span>
          <a href="#sample" className="inline-flex items-center gap-1 text-ink-700 hover:text-accent-600 font-medium">View full sample <ArrowRight size={12} /></a>
        </div>
      </div>
    </div>
  );
}

// ─── Trust bar / ticker ────────────────────────────────────────────────────
function TrustBar() {
  const items = [...TICKER, ...TICKER]; // duplicate for seamless ticker
  return (
    <section className="bg-white border-y border-ink-200">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 py-8">
        <div className="flex flex-col lg:flex-row gap-8 lg:gap-12 items-start lg:items-center justify-between">
          <div className="flex items-center gap-3 text-xs text-ink-500">
            <Database size={14} />
            <span>Built on data from the Florida Division of Corporations.</span>
            <span className="hidden sm:inline text-ink-300">·</span>
            <span className="hidden sm:inline">Compliant with CAN-SPAM and Florida public records law.</span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 lg:gap-10 text-sm">
            <div>
              <div className="font-display text-2xl font-bold text-ink-900 tracking-tighter">13,800<span className="text-accent">+</span></div>
              <div className="text-xs text-ink-500 mt-0.5">new entities tracked / week</div>
            </div>
            <div>
              <div className="font-display text-2xl font-bold text-ink-900 tracking-tighter">67/67</div>
              <div className="text-xs text-ink-500 mt-0.5">Florida counties covered</div>
            </div>
            <div>
              <div className="font-display text-2xl font-bold text-ink-900 tracking-tighter">20</div>
              <div className="text-xs text-ink-500 mt-0.5">verticals · Home Services, Restaurants, Healthcare, Logistics, +16</div>
            </div>
          </div>
        </div>
      </div>
      {/* Ticker of recent filings */}
      <div className="border-t border-ink-200 py-3 overflow-hidden bg-ink-50/40">
        <div className="ticker-track flex gap-10 whitespace-nowrap font-mono text-[11px] text-ink-500">
          {items.map((t, i) => (
            <span key={i} className="inline-flex items-center gap-2">
              <span className="w-1 h-1 rounded-full bg-accent" /> {t}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── How it works ──────────────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: "01",
      icon: <Database size={22} />,
      title: "We pull the data",
      body: "Every weekday, we ingest the Florida Division of Corporations daily corporate filing feed. Every new LLC, corporation, and partnership.",
    },
    {
      n: "02",
      icon: <Sparkles size={22} />,
      title: "We classify and enrich",
      body: "Each entity is tagged by vertical (restaurant, construction, healthcare, etc.) using AI, then enriched with verified founder contact info — name, email, phone where available.",
    },
    {
      n: "03",
      icon: <Send size={22} />,
      title: "You get the leads",
      body: "Filtered to your vertical and counties. Delivered Monday morning as CSV, Airtable view, or direct webhook into HubSpot, Pipedrive, or your CRM.",
    },
  ];
  return (
    <section id="how" className="py-24 lg:py-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <Reveal>
          <div className="max-w-2xl">
            <div className="font-mono text-xs text-accent-600 uppercase tracking-widest mb-4">How it works</div>
            <h2 className="font-display text-4xl lg:text-5xl font-bold tracking-tighter text-ink-900 leading-[1.05]">
              From the state's filing system to your CRM, in three steps.
            </h2>
          </div>
        </Reveal>
        <div className="mt-14 grid grid-cols-1 md:grid-cols-3 gap-px bg-ink-200 rounded-2xl overflow-hidden ring-soft">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={Math.min(i + 1, 4)} className="bg-ink-50 p-8 lg:p-10">
              <div className="flex items-center justify-between">
                <div className="w-11 h-11 rounded-xl bg-ink-900 text-white flex items-center justify-center">{s.icon}</div>
                <span className="font-mono text-xs text-ink-400">{s.n}</span>
              </div>
              <h3 className="mt-8 font-display text-xl font-semibold tracking-tight text-ink-900">{s.title}</h3>
              <p className="mt-3 text-[15px] text-ink-600 leading-relaxed font-light">{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Live sample table ────────────────────────────────────────────────────
function LiveSampleTable() {
  const [vertical, setVertical] = useState("All verticals");
  const [county, setCounty] = useState("All counties");
  const [range, setRange] = useState("Last 7 days");
  const [query, setQuery] = useState("");
  const [vOpen, setVOpen] = useState(false);
  const [cOpen, setCOpen] = useState(false);
  const [rOpen, setROpen] = useState(false);

  const verticals = ["All verticals", ...new Set(ROWS.map(r => r.vertical))];
  const counties  = ["All counties",  ...new Set(ROWS.map(r => r.county))];
  const ranges    = ["Last 7 days", "Last 14 days", "Last 30 days", "This quarter"];

  const filtered = useMemo(() => ROWS.filter(r => {
    if (vertical !== "All verticals" && r.vertical !== vertical) return false;
    if (county   !== "All counties"  && r.county   !== county) return false;
    if (query) {
      const q = query.toLowerCase();
      if (!r.name.toLowerCase().includes(q) && !r.city.toLowerCase().includes(q) && !r.officer.toLowerCase().includes(q)) return false;
    }
    return true;
  }), [vertical, county, query]);

  return (
    <section id="sample" className="bg-white border-y border-ink-200 py-24 lg:py-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="flex flex-col lg:flex-row lg:items-end justify-between gap-6 mb-10">
          <Reveal className="max-w-2xl">
            <div className="font-mono text-xs text-accent-600 uppercase tracking-widest mb-4">Live sample</div>
            <h2 className="font-display text-4xl lg:text-5xl font-bold tracking-tighter text-ink-900 leading-[1.05]">
              This is what last week looked like.
            </h2>
            <p className="mt-4 text-[17px] text-ink-600 font-light leading-relaxed">
              A real slice of the Apr 21–27 feed. Filter, search, and see what your subscription would deliver every Monday morning.
            </p>
          </Reveal>
          <div className="flex items-center gap-2 text-xs text-ink-500">
            <span className="relative flex w-2 h-2"><span className="absolute inset-0 rounded-full bg-emerald-500 live-dot" /><span className="relative w-2 h-2 rounded-full bg-emerald-500" /></span>
            Updated 14 minutes ago
          </div>
        </div>

        <div className="bg-white rounded-2xl shadow-card ring-soft overflow-hidden">
          {/* Toolbar */}
          <div className="flex flex-col md:flex-row md:items-center gap-3 p-4 border-b border-ink-100">
            <Dropdown label={vertical} open={vOpen} setOpen={setVOpen} options={verticals} onChange={setVertical} icon={<Filter size={13} />} />
            <Dropdown label={county}   open={cOpen} setOpen={setCOpen} options={counties}  onChange={setCounty} icon={<MapPin size={13} />} />
            <Dropdown label={range}    open={rOpen} setOpen={setROpen} options={ranges}    onChange={setRange} icon={<Calendar size={13} />} />
            <div className="md:ml-auto md:w-72 relative">
              <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-ink-400" />
              <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search entity, city, officer…"
                className="w-full pl-9 pr-3 py-2 text-sm bg-ink-50 border border-ink-200 rounded-lg focus:outline-none focus:border-ink-400 placeholder-ink-400"
              />
            </div>
          </div>

          {/* Desktop table */}
          <div className="hidden md:block overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-ink-50/70">
                <tr className="text-left text-[11px] uppercase tracking-wider text-ink-500 font-medium">
                  <th className="py-3 px-4 font-medium">Entity name</th>
                  <th className="py-3 px-4 font-medium">City</th>
                  <th className="py-3 px-4 font-medium">County</th>
                  <th className="py-3 px-4 font-medium">Vertical</th>
                  <th className="py-3 px-4 font-medium">Filed</th>
                  <th className="py-3 px-4 font-medium">Officer</th>
                  <th className="py-3 px-4 font-medium">Email</th>
                  <th className="py-3 px-4 font-medium">Phone</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((r, i) => (
                  <tr key={i} className="row-hover border-t border-ink-100">
                    <td className="py-3.5 px-4 font-medium text-ink-900 whitespace-nowrap">{r.name}</td>
                    <td className="py-3.5 px-4 text-ink-600 whitespace-nowrap">{r.city}</td>
                    <td className="py-3.5 px-4 text-ink-600 whitespace-nowrap">{r.county}</td>
                    <td className="py-3.5 px-4"><VerticalBadge name={r.vertical} /></td>
                    <td className="py-3.5 px-4 text-ink-500 whitespace-nowrap text-xs">{r.filed}</td>
                    <td className={`py-3.5 px-4 text-ink-700 whitespace-nowrap ${r.locked ? "" : ""}`}>{r.officer}</td>
                    <td className="py-3.5 px-4 text-ink-600 whitespace-nowrap font-mono text-xs">
                      <span className={r.locked ? "lock-blur" : ""}>{r.email}</span>
                      {r.locked && <UnlockTag />}
                    </td>
                    <td className="py-3.5 px-4 text-ink-600 whitespace-nowrap font-mono text-xs">
                      <span className={r.locked ? "lock-blur" : ""}>{r.phone}</span>
                    </td>
                  </tr>
                ))}
                {filtered.length === 0 && (
                  <tr><td colSpan="8" className="py-10 px-4 text-center text-sm text-ink-400">No matches. Try clearing filters.</td></tr>
                )}
              </tbody>
            </table>
          </div>

          {/* Mobile cards */}
          <div className="md:hidden divide-y divide-ink-100">
            {filtered.map((r, i) => (
              <div key={i} className="p-4">
                <div className="flex items-start justify-between gap-3">
                  <div className="font-medium text-ink-900 text-[13px] leading-tight">{r.name}</div>
                  <VerticalBadge name={r.vertical} />
                </div>
                <div className="mt-2 text-xs text-ink-500">{r.city}, {r.county} County · <span className="font-mono">{r.filed}</span></div>
                <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                  <div>
                    <div className="text-ink-400">Officer</div>
                    <div className="text-ink-700">{r.officer}</div>
                  </div>
                  <div>
                    <div className="text-ink-400">Email</div>
                    <div className={`text-ink-700 font-mono ${r.locked ? "lock-blur" : ""}`}>{r.email}</div>
                  </div>
                </div>
                {r.locked && <div className="mt-3"><UnlockTag /></div>}
              </div>
            ))}
          </div>

          <div className="flex items-center justify-between px-4 py-3 border-t border-ink-100 bg-ink-50/60 text-xs text-ink-500">
            <span>Showing <span className="font-mono text-ink-700">{filtered.length}</span> of <span className="font-mono text-ink-700">2,841</span> entities</span>
            <a href="#contact" className="inline-flex items-center gap-1 text-ink-700 hover:text-accent-600 font-medium">Unlock full feed <ArrowRight size={12} /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Dropdown({ label, open, setOpen, options, onChange, icon }) {
  return (
    <div className="relative">
      <button
        onClick={() => setOpen(!open)}
        className="chip inline-flex items-center gap-2 px-3 py-2 text-sm bg-white border border-ink-200 rounded-lg text-ink-700 hover:border-ink-400"
      >
        {icon}
        <span>{label}</span>
        <ChevronDown size={13} />
      </button>
      {open && (
        <div className="absolute z-10 mt-1.5 min-w-[200px] bg-white border border-ink-200 rounded-lg shadow-card py-1">
          {options.map((o) => (
            <button
              key={o}
              onClick={() => { onChange(o); setOpen(false); }}
              className={`w-full text-left px-3 py-1.5 text-sm hover:bg-ink-50 ${o === label ? "text-ink-900 font-medium" : "text-ink-600"}`}
            >
              {o}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function UnlockTag() {
  return (
    <span className="ml-2 inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-ink-900 text-white">
      <Lock size={10} stroke={2} /> Unlock
    </span>
  );
}

// ─── Who it's for ─────────────────────────────────────────────────────────
function WhoItsFor() {
  const cols = [
    { icon: <IconRestaurant />,   title: "Restaurant industry sales", body: "Toast / Square reps, Sysco / US Foods DSRs, restaurant equipment dealers." },
    { icon: <IconHomeServices />, title: "Home services SaaS",        body: "ServiceTitan, Jobber, Housecall Pro reps targeting new contractors." },
    { icon: <IconInsurance />,    title: "Commercial insurance",      body: "Independent agents writing BOP, commercial auto, workers' comp." },
    { icon: <IconFintech />,      title: "Fintech & business banking", body: "Mercury, Brex, Ramp partner teams reaching new founders week one." },
  ];
  return (
    <section className="py-24 lg:py-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <Reveal>
          <div className="max-w-2xl">
            <div className="font-mono text-xs text-accent-600 uppercase tracking-widest mb-4">Built for</div>
            <h2 className="font-display text-4xl lg:text-5xl font-bold tracking-tighter text-ink-900 leading-[1.05]">
              Sales teams that want to be first.
            </h2>
          </div>
        </Reveal>
        <div className="mt-14 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
          {cols.map((c, i) => (
            <Reveal key={i} delay={Math.min(i + 1, 4)}
                    className="group bg-white ring-soft rounded-2xl p-7 hover:shadow-card transition-shadow">
              <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-ink-50 to-ink-100 border border-ink-200 flex items-center justify-center text-ink-800">
                {c.icon}
              </div>
              <h3 className="mt-6 font-display font-semibold text-ink-900 text-[17px] tracking-tight">{c.title}</h3>
              <p className="mt-2 text-sm text-ink-600 font-light leading-relaxed">{c.body}</p>
              <a href="#sample" className="mt-5 inline-flex items-center gap-1 text-sm font-medium text-ink-800 group-hover:text-accent-600">
                View sample <ArrowUpRight size={13} />
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Pricing ──────────────────────────────────────────────────────────────
function Pricing() {
  const tiers = [
    {
      name: "Vertical Feed",
      price: 349,
      tagline: "One vertical, all 67 counties.",
      bullets: [
        "1 vertical (e.g. Restaurants OR Home Services)",
        "All 67 Florida counties",
        "Weekly Monday delivery",
        "CSV or Airtable view",
        "Founder contact info",
        "Cancel anytime",
      ],
      cta: "Start with one vertical",
      featured: false,
    },
    {
      name: "Multi-Vertical",
      price: 699,
      tagline: "Most teams start here.",
      bullets: [
        "Up to 3 verticals",
        "All 67 Florida counties",
        "Weekly + on-demand pulls",
        "Webhook delivery to CRM",
        "Priority support",
        "Cancel anytime",
      ],
      cta: "Get Multi-Vertical",
      featured: true,
    },
    {
      name: "All-Florida Firehose",
      price: 1499,
      tagline: "Every entity, every day.",
      bullets: [
        "Every new entity, all verticals",
        "All 67 counties, daily delivery",
        "API access",
        "Historical archive (24 months)",
        "White-glove onboarding",
        "Dedicated Slack channel",
      ],
      cta: "Talk to founder",
      featured: false,
    },
  ];
  return (
    <section id="pricing" className="bg-white border-y border-ink-200 py-24 lg:py-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <Reveal>
          <div className="max-w-2xl">
            <div className="font-mono text-xs text-accent-600 uppercase tracking-widest mb-4">Pricing</div>
            <h2 className="font-display text-4xl lg:text-5xl font-bold tracking-tighter text-ink-900 leading-[1.05]">
              Simple monthly subscriptions. No seats, no per-record fees.
            </h2>
          </div>
        </Reveal>
        <div className="mt-14 grid grid-cols-1 lg:grid-cols-3 gap-5">
          {tiers.map((t, i) => (
            <Reveal
              key={t.name}
              delay={Math.min(i + 1, 3)}
              className={`relative rounded-2xl p-8 lg:p-9 flex flex-col
                ${t.featured ? "bg-ink-900 text-white shadow-elev" : "bg-white ring-soft"}`}
            >
              {t.featured && (
                <span className="absolute -top-3 left-8 inline-flex items-center gap-1.5 bg-accent text-white text-[11px] font-semibold uppercase tracking-wider px-2.5 py-1 rounded-full">
                  Most popular
                </span>
              )}
              <div className={t.featured ? "text-white/70 text-sm" : "text-ink-500 text-sm"}>{t.tagline}</div>
              <h3 className={`mt-2 font-display text-2xl font-semibold tracking-tight ${t.featured ? "text-white" : "text-ink-900"}`}>{t.name}</h3>
              <div className="mt-6 flex items-baseline gap-1">
                <span className={`font-display text-5xl font-bold tracking-tighter ${t.featured ? "text-white" : "text-ink-900"}`}>${t.price}</span>
                <span className={`text-sm ${t.featured ? "text-white/60" : "text-ink-500"}`}>/ month</span>
              </div>
              <ul className="mt-7 space-y-3 text-sm">
                {t.bullets.map((b) => (
                  <li key={b} className="flex items-start gap-2.5">
                    <Check size={16} className={t.featured ? "text-accent mt-0.5 flex-shrink-0" : "text-emerald-600 mt-0.5 flex-shrink-0"} />
                    <span className={t.featured ? "text-white/85" : "text-ink-700"}>{b}</span>
                  </li>
                ))}
              </ul>
              <a
                href="#contact"
                className={`btn-primary mt-8 inline-flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-semibold
                  ${t.featured
                    ? "bg-accent hover:bg-accent-600 text-white"
                    : "bg-ink-900 hover:bg-ink-800 text-white"}`}
              >
                {t.cta} <ArrowRight size={14} />
              </a>
            </Reveal>
          ))}
        </div>
        <p className="mt-10 text-sm text-ink-500 max-w-2xl">
          <span className="font-medium text-ink-700">Per-lead pricing also available</span> — $25–150 / lead depending on
          vertical and enrichment level. <a href="#contact" className="underline decoration-ink-300 underline-offset-2 hover:text-ink-800">Reach out for a custom quote.</a>
        </p>
      </div>
    </section>
  );
}

// ─── FAQ ──────────────────────────────────────────────────────────────────
function FAQ() {
  const qs = [
    {
      q: "Where does this data come from?",
      a: "Every record originates from the Florida Division of Corporations' daily corporate filings — public records the state publishes itself. We ingest the SunBiz nightly drop, classify each entity by vertical with a fine-tuned model, and enrich officer contact info from a stack of public and licensed sources.",
    },
    {
      q: "Is this legal?",
      a: "Yes. Florida business filings are public records under Florida Statute Chapter 119. Our outreach guidance is CAN-SPAM compliant, and we publish a transparency policy explaining exactly what's included and where each field comes from. We do not sell consumer data.",
    },
    {
      q: "How fresh is the data?",
      a: "Filings are synced every weekday morning. Multi-Vertical and Firehose subscribers can request on-demand pulls at any time. The standard weekly drop lands in your inbox or CRM by 9am ET Monday.",
    },
    {
      q: "Can you filter by county or zip code?",
      a: "All plans cover every Florida county. You can scope your delivery to a list of counties or a radius around a zip code at no extra cost. Multi-Vertical and Firehose support more granular geofencing.",
    },
    {
      q: "What if I want a vertical that's not listed?",
      a: "Tell us. We currently classify 20 verticals; we can train a new classifier in about a week for any niche with enough Florida volume to be useful (about 200+ entities/month).",
    },
    {
      q: "How do I integrate with my CRM?",
      a: "CSV and Airtable are zero-setup. Webhook delivery posts each new record directly into HubSpot, Pipedrive, Salesforce, Attio, or Close — usually in under 15 minutes. The Firehose plan exposes a paginated REST API.",
    },
  ];
  return (
    <section className="py-24 lg:py-32">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10 grid grid-cols-1 lg:grid-cols-12 gap-12">
        <Reveal className="lg:col-span-4">
          <div className="font-mono text-xs text-accent-600 uppercase tracking-widest mb-4">FAQ</div>
          <h2 className="font-display text-4xl lg:text-5xl font-bold tracking-tighter text-ink-900 leading-[1.05]">
            Questions, answered straight.
          </h2>
          <p className="mt-4 text-[15px] text-ink-600 font-light leading-relaxed">
            Don't see yours? <a href="#contact" className="underline decoration-ink-300 underline-offset-2 hover:text-ink-800">Email the founder directly.</a>
          </p>
        </Reveal>
        <div className="lg:col-span-8">
          <Reveal className="divide-y divide-ink-200 border-y border-ink-200" delay={1}>
            {qs.map((it, i) => (
              <details key={i} className="group py-5">
                <summary className="flex items-center justify-between gap-6">
                  <span className="font-display text-lg font-semibold text-ink-900 tracking-tight">{it.q}</span>
                  <span className="faq-icon flex-shrink-0 w-7 h-7 rounded-full border border-ink-200 flex items-center justify-center text-ink-500"><Plus size={14} /></span>
                </summary>
                <p className="mt-3 pr-10 text-[15px] text-ink-600 font-light leading-relaxed">{it.a}</p>
              </details>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─── Final CTA ────────────────────────────────────────────────────────────
function FinalCTA() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); if (email.includes("@")) setSent(true); };
  return (
    <section id="contact" className="relative py-24 lg:py-32 bg-ink-900 overflow-hidden">
      <div className="absolute inset-0 dotgrid-dark pointer-events-none opacity-80" />
      <div className="relative max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="max-w-2xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 rounded-full px-3 py-1 text-xs text-white/70 mb-7">
            <span className="relative flex w-1.5 h-1.5"><span className="absolute inset-0 rounded-full bg-emerald-400 live-dot" /><span className="relative w-1.5 h-1.5 rounded-full bg-emerald-400" /></span>
            Next drop · Mon, May 4 · 6:00am ET
          </div>
          <h2 className="font-display text-4xl lg:text-6xl font-bold tracking-tightest text-white leading-[1]">
            Get a free sample of last week's data.
          </h2>
          <p className="mt-5 text-lg text-white/65 font-light max-w-xl mx-auto">
            Drop your work email. We'll send last Monday's full feed for one vertical of your choice — no follow-up unless you ask.
          </p>
          {!sent ? (
            <form onSubmit={submit} className="mt-9 flex flex-col sm:flex-row gap-2 max-w-lg mx-auto">
              <input
                type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com"
                className="flex-1 bg-white/5 border border-white/15 focus:border-white/40 rounded-lg px-4 py-3 text-white placeholder-white/40 text-[15px] focus:outline-none"
              />
              <button type="submit" className="btn-primary inline-flex items-center justify-center gap-2 bg-accent hover:bg-accent-600 text-white font-semibold px-5 py-3 rounded-lg text-[15px]">
                Send me the sample <ArrowRight size={16} />
              </button>
            </form>
          ) : (
            <div className="mt-9 max-w-lg mx-auto bg-white/5 border border-emerald-500/30 rounded-lg p-5 flex items-start gap-3 text-left">
              <div className="w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400 flex-shrink-0"><Check size={16} stroke={2} /></div>
              <div>
                <div className="text-white font-medium text-sm">Sample is on the way to {email}</div>
                <div className="text-white/60 text-xs mt-1">It usually lands within 5 minutes. If not, check your spam folder.</div>
              </div>
            </div>
          )}
          <p className="mt-5 text-xs text-white/45">No credit card. No spam. Just the data.</p>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────
function Footer() {
  const cols = [
    { title: "Product", links: ["How it works", "Pricing", "Sample data", "FAQ"] },
    { title: "Company", links: ["About", "Contact", "Blog"] },
    { title: "Legal",   links: ["Privacy", "Terms", "CAN-SPAM compliance", "Florida public records statement"] },
  ];
  return (
    <footer className="bg-ink-900 text-white/70 pt-16 pb-10">
      <div className="max-w-[1240px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12">
          <div className="col-span-2">
            <Wordmark dark size="text-2xl" />
            <p className="mt-5 text-sm text-white/55 font-light max-w-xs leading-relaxed">
              Weekly feeds of newly-formed Florida businesses, classified by vertical and enriched for outbound.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div className="font-mono text-[10px] uppercase tracking-widest text-white/40 mb-4">{c.title}</div>
              <ul className="space-y-2.5 text-sm">
                {c.links.map((l) => (
                  <li key={l}><a href="#" className="text-white/70 hover:text-white transition-colors">{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-14 pt-6 border-t border-white/10 flex flex-col sm:flex-row justify-between gap-3 text-xs text-white/45">
          <div>© 2026 sunwrit · Florida, USA · Data sourced from public records of the Florida Division of Corporations.</div>
          <div className="flex items-center gap-2"><MapPin size={12} /> Tampa · St. Petersburg</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, TrustBar, HowItWorks, LiveSampleTable, WhoItsFor, Pricing, FAQ, FinalCTA, Footer,
});