// Door Optic landing page — main app
const { useState, useEffect, useRef, useMemo } = React;

// === Default tweaks (host can rewrite this block) ===
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0a7c5a",
  "theme": "light",
  "heroVariant": "card",
  "headlineStyle": "results"
}/*EDITMODE-END*/;

// === Icons ===
const Icon = {
  Arrow: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  Check: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M20 6 9 17l-5-5" />
    </svg>
  ),
  Mail: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m3 7 9 6 9-6" />
    </svg>
  ),
  Play: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M8 5v14l11-7z" />
    </svg>
  ),
  Lock: (p) => (
    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="5" y="11" width="14" height="10" rx="2" />
      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  ),
  Spark: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2l1.8 6.4L20 10l-6.2 1.6L12 18l-1.8-6.4L4 10l6.2-1.6z"/>
    </svg>
  ),
};

// === Logo ===
function Brand() {
  return (
    <a className="brand" href="#top" aria-label="Door Optic">
      <span className="brand-mark" aria-hidden="true"></span>
      <span className="brand-wm">door<span className="opt">optic</span></span>
    </a>
  );
}

// === Nav ===
function Nav({ onCTA }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="shell nav-inner">
        <Brand />
        <nav>
          <a href="#how">How it works</a>
          <a href="#score">Struggle Score</a>
          <a href="#product">Product</a>
        </nav>
        <div className="nav-spacer"></div>
        <div className="nav-cta">
          <a href="#demo" className="ghost">Sign in</a>
          <button className="btn btn-primary" onClick={onCTA}>
            Book a demo <span className="btn-arrow"><Icon.Arrow /></span>
          </button>
        </div>
      </div>
    </header>
  );
}

// === Reusable mock dashboard (HTML/CSS, no screenshot) ===
function MockDashboard({ compact = false }) {
  const leads = [
    { name: "DANIEL J. COOPER", loc: "BOULDER · 3 props", owner: "", contact: "d.cooper@hostmail.com · (303) 555-0142", score: 19, rank: 31, tags: [["SOLE OWNER","ok"], ["LICENSED","ok"], ["ABOVE MARKET","warn"]] },
    { name: "ALPINE EQUITY PARTNERS", loc: "BOULDER · 11 props", owner: "K. Walsh", contact: "k.walsh@hostmail.com · (970) 555-0188", score: 24, rank: 32, tags: [["LLC / ENTITY","ok"], ["LICENSED","ok"], ["PORTFOLIO","mute"]] },
    { name: "MARGARET & ROBERT HSU", loc: "LONGMONT · 2 props", owner: "", contact: "m.hsu@hostmail.com · (303) 555-0421", score: 26, rank: 33, tags: [["JOINT OWNER","mute"], ["VACANT UNIT","warn"], ["UNLICENSED RENTAL","danger"]] },
    { name: "BRIGHTLINE CAPITAL LLC", loc: "BOULDER · 5 props", owner: "J. Carter", contact: "j.carter@hostmail.com · (555) 209-1144", score: 29, rank: 34, tags: [["PORTFOLIO","mute"], ["UNLICENSED RENTAL","danger"], ["OUT OF STATE","danger"]], selected: true },
  ];

  return (
    <div className="mockdash">
      <div className="md-topbar">
        <span className="md-logo" aria-hidden="true"></span>
        <span className="md-title">Prospect Pipeline</span>
        <span className="md-county">Boulder County</span>
        <div className="md-topright">
          <span className="md-sample">SAMPLE DATA</span>
          <span>May 18, 2026</span>
          <span className="ico" aria-hidden="true">☾</span>
          <span className="ico" aria-hidden="true">↻</span>
          <span className="admin">⚭ Admin</span>
          <span className="ico" aria-hidden="true">⎋</span>
        </div>
      </div>

      <div className="md-stats">
        <div className="md-stat"><div className="n">200</div><div className="l">Fresh Leads</div></div>
        <div className="md-stat"><div className="n">0</div><div className="l">In Pipeline</div></div>
        <div className="md-stat"><div className="n">167</div><div className="l">Enriched</div></div>
        <div className="md-stat"><div className="n">18.4<span className="pts">pts</span></div><div className="l">Avg Score</div></div>
      </div>

      <div className="md-tabs">
        <div className="md-tab active">Leads <span className="badge">200</span></div>
        <div className="md-tab">Pipeline <span className="badge">0</span></div>
        <div className="md-tab">Discarded <span className="badge">0</span></div>
        <div className="md-tab">Property Map</div>
        <div className="md-tab">Activity</div>
        <div className="md-tab">Settings</div>
      </div>

      <div className="md-body">
        <div className="md-list">
          <div className="md-search">⌕ Search owner, address, city…</div>
          <div className="md-filters">
            <div className="md-filter">All Cities</div>
            <div className="md-filter">Any Score</div>
            <div className="md-filter">All</div>
          </div>
          <div className="md-records">
            <span>200 records</span>
            <span>Score ▾</span>
          </div>
          {leads.map((ld, i) => (
            <div key={i} className={`md-leadcard${ld.selected ? " selected" : ""}`}>
              <div className="md-leadcard-head">
                <div>
                  <div className="md-leadcard-name"><span className="dot"></span>{ld.name}</div>
                  <div className="md-leadcard-loc">{ld.loc}</div>
                </div>
                <div className="md-leadcard-score"><span className="n">{ld.score}</span><div className="r">#{ld.rank}</div></div>
              </div>
              {ld.owner && <div className="md-leadcard-owner">{ld.owner}</div>}
              {ld.contact && <div className="md-leadcard-contact">{ld.contact}</div>}
              <div className="md-leadcard-tags">
                {ld.tags.map(([t, c], j) => <span key={j} className={`md-tag ${c}`}>{t}</span>)}
              </div>
              <div className="md-leadcard-status">New</div>
            </div>
          ))}
        </div>

        <div className="md-detail">
          <div className="md-detail-head">
            <div>
              <div className="md-detail-name">BRIGHTLINE CAPITAL LLC <span className="badge">NEW</span></div>
              <div className="md-detail-addr">1840 PEARL ST #4A, BOULDER · <span className="owner">J. Carter</span></div>
            </div>
            <div className="md-detail-score">29<span className="pts">pts</span></div>
          </div>

          <div className="md-detail-contacts">
            <span className="md-pill email">
              <span className="ico"><svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span>
              j.carter@hostmail.com
              <span className="check">✓</span>
            </span>
            <span className="md-pill phone">
              <span className="ico"><svg viewBox="0 0 24 24" width="100%" height="100%" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span>
              (555) 209-1144
            </span>
            <span className="md-pill tag-state">FL</span>
            <span className="md-pill tag-port">PORTFOLIO</span>
            <span className="md-pill tag-state">UNLICENSED RENTAL</span>
            <span className="md-pill tag-state">OUT OF STATE</span>
            <span className="md-pill tag-neutral">LLC / ENTITY</span>
          </div>

          <div className="md-detail-actions">
            <button className="md-action-primary">✉ Draft Email</button>
            <button className="md-action-status">Status: New</button>
          </div>

          <div className="md-detail-grid">
            <div>
              <div className="md-section-label">PROPERTIES (5) <span className="qmark">?</span></div>
              <div className="md-props">
                <div className="md-prop"><span className="home">⌂</span>1840 PEARL ST #4A, BOULDER <span className="vac">Vacant · Long · $3,150</span></div>
                <div className="md-prop"><span className="home">⌂</span>2904 IRIS AVE, BOULDER</div>
                <div className="md-prop"><span className="home">⌂</span>3712 ARAPAHOE AVE, BOULDER</div>
                <div className="md-prop"><span className="home">⌂</span>1265 BROADWAY #B, BOULDER</div>
                <div className="md-prop"><span className="home">⌂</span>4421 TABLE MESA DR, BOULDER</div>
              </div>

              <div className="md-mailing">
                <div className="md-section-label">MAILING ADDRESS</div>
                <div className="md-mailing-addr">1782 OCEAN BLVD, MIAMI, FL 33139</div>
              </div>
            </div>

            <div>
              <div className="md-section-label">SCORE BREAKDOWN</div>
              <div className="md-breakdown">
                <div className="md-br-row"><span>LLC / business entity</span><span className="pt">+2</span></div>
                <div className="md-br-row"><span>5 properties owned</span><span className="pt">+5</span></div>
                <div className="md-br-row"><span>Out of state owner</span><span className="pt">+5</span></div>
                <div className="md-br-row"><span>Listed 11% above market rent</span><span className="pt">+5</span></div>
                <div className="md-br-row"><span>Unlicensed rental (compliance gap)</span><span className="pt">+12</span></div>
                <div className="md-br-total"><span>Total</span><span className="pt">29</span></div>
              </div>
            </div>
          </div>
        </div>

        <div className="md-map">
          <div className="md-mapcity" style={{ top: "44%", left: "32%" }}>BOULDER</div>
          <div className="md-mapcity" style={{ top: "62%", left: "44%", fontSize: "0.8cqw" }}>LOUISVILLE</div>
          <div className="md-mapcity" style={{ top: "18%", left: "55%", fontSize: "0.8cqw" }}>NIWOT</div>
          <div className="md-mapdot" style={{ top: "38%", left: "30%", width: "0.7cqw", height: "0.7cqw" }}></div>
          <div className="md-mapdot" style={{ top: "44%", left: "36%", width: "0.9cqw", height: "0.9cqw" }}></div>
          <div className="md-mapdot" style={{ top: "41%", left: "33%", width: "0.6cqw", height: "0.6cqw" }}></div>
          <div className="md-mapdot" style={{ top: "48%", left: "38%", width: "0.7cqw", height: "0.7cqw" }}></div>
          <div className="md-mapdot" style={{ top: "52%", left: "34%", width: "0.6cqw", height: "0.6cqw" }}></div>
          <div className="md-mapdot" style={{ top: "55%", left: "42%", width: "0.7cqw", height: "0.7cqw" }}></div>
          <div className="md-mapdot" style={{ top: "33%", left: "40%", width: "0.6cqw", height: "0.6cqw" }}></div>
          <div className="md-maplabel">Leaflet · OpenStreetMap</div>
        </div>
      </div>
    </div>
  );
}

// === Animated Lead Card (hero) ===
const LEADS = [
  {
    name: "VAUGHN PROPERTIES LLC",
    addr: "412 Pearl St, Boulder · 7 props",
    tags: [
      { t: "OUT OF STATE", c: "danger" },
      { t: "UNLICENSED RENTAL", c: "danger" },
      { t: "PORTFOLIO", c: "mute" },
      { t: "LLC / ENTITY", c: "neutral" },
    ],
    breakdown: [
      ["LLC / business entity", 2],
      ["7 properties owned", 7],
      ["Out of state owner", 5],
      ["Unlicensed rental (compliance gap)", 12],
    ],
  },
  {
    name: "ASPEN HOLDINGS GROUP",
    addr: "1820 Spruce Ave, Longmont · 12 props",
    tags: [
      { t: "VACANT > 45D", c: "warn" },
      { t: "LISTED ABOVE MARKET", c: "warn" },
      { t: "MULTI-PROP", c: "mute" },
      { t: "OUT OF STATE", c: "danger" },
    ],
    breakdown: [
      ["12 properties owned", 8],
      ["Vacant unit > 45 days", 6],
      ["Listed 14% above market rent", 7],
      ["Out of state owner", 5],
    ],
  },
  {
    name: "SUMMIT VIEW HOMES LLC",
    addr: "927 Folsom St, Boulder · 4 props",
    tags: [
      { t: "LISTED ABOVE MARKET", c: "warn" },
      { t: "UNLICENSED RENTAL", c: "danger" },
      { t: "LLC / ENTITY", c: "neutral" },
    ],
    breakdown: [
      ["LLC / business entity", 2],
      ["Listed 9% above market rent", 6],
      ["Unlicensed rental", 12],
      ["4 properties owned", 4],
    ],
  },
];

function LeadCard({ lead, animKey }) {
  const total = lead.breakdown.reduce((s, [, n]) => s + n, 0);
  const [shown, setShown] = useState(0);
  const [scoreN, setScoreN] = useState(0);

  useEffect(() => {
    setShown(0);
    setScoreN(0);
    const stagger = 350;
    const timers = [];
    lead.breakdown.forEach((_, i) => {
      timers.push(setTimeout(() => setShown(i + 1), 700 + i * stagger));
    });
    // count up the total
    const runUp = setTimeout(() => {
      const start = performance.now();
      const dur = 1400;
      const tick = (t) => {
        const p = Math.min(1, (t - start) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setScoreN(Math.round(total * eased));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, 500);
    timers.push(runUp);
    return () => timers.forEach(clearTimeout);
  }, [animKey, total]);

  return (
    <div className="lead-card fade-in" key={animKey}>
      <div className="lead-row">
        <div>
          <div className="lead-name">
            {lead.name}
            <span className="badge-new">NEW</span>
          </div>
          <div className="lead-addr">{lead.addr}</div>
        </div>
        <div className="score-display">
          <span className="score-num">{scoreN}</span>
          <span className="score-pts">pts</span>
        </div>
      </div>
      <div className="lead-tags">
        {lead.tags.map((tg, i) => (
          <span key={i} className={`tag tag-${tg.c}`}>{tg.t}</span>
        ))}
      </div>
      <div className="score-breakdown">
        <div className="sb-label">SCORE BREAKDOWN</div>
        <div className="sb-rows">
          {lead.breakdown.map(([label, n], i) => (
            <div key={i} className="sb-row" style={{ opacity: shown > i ? 1 : 0, transform: `translateY(${shown > i ? 0 : 6}px)`, transition: "opacity .35s ease, transform .35s ease" }}>
              <span className="left">{label}</span>
              <span className="right">+{n}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="lead-action">
        <button className="draft-btn"><Icon.Mail /> Draft Email</button>
        <span className="status-pill"><span className="dot-g"></span>Status: New</span>
      </div>
    </div>
  );
}

function HeroVisual({ variant }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (variant !== "card") return;
    const iv = setInterval(() => setIdx((i) => (i + 1) % LEADS.length), 6500);
    return () => clearInterval(iv);
  }, [variant]);

  if (variant === "screenshot") {
    return (
      <div className="lead-stage" style={{ padding: 0 }}>
        <div className="showcase" style={{ margin: 0 }}>
          <div className="showcase-chrome">
            <div className="chrome-dots"><span></span><span></span><span></span></div>
            <div className="chrome-bar"><Icon.Lock /> app.dooroptic.com/pipeline</div>
          </div>
          <MockDashboard />
        </div>
      </div>
    );
  }

  return (
    <div className="lead-stage">
      <div className="float tl">RANK <span className="v">#34 / 200</span></div>
      <div className="float br">ENRICHED <span className="v">2m ago</span></div>
      <LeadCard lead={LEADS[idx]} animKey={idx} />
    </div>
  );
}

// === Hero ===
function Hero({ tweaks, onCTA }) {
  const headlines = {
    results: <>Grow your portfolio with landlords <span className="em">ready to outsource</span>.</>,
    contrarian: <>Stop chasing leads. <span className="em">Start with the ones who actually need you.</span></>,
    numbers: <>200+ ranked PMC leads. <span className="em">Per market.</span> Refreshed daily.</>,
    calm: <>The lead engine for <span className="em">property managers</span>.</>,
  };
  return (
    <section className="hero" id="top">
      <div className="shell hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>Lead intelligence for property managers</span>
          <h1 className="h1">{headlines[tweaks.headlineStyle] || headlines.results}</h1>
          <p className="lede">
            Door Optic ranks <strong>every landlord in your market</strong> by how likely they are to outsource — using license records, rent indexes, business filings and owner enrichment. Then we write the cold email for you.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={onCTA}>
              Book a 20-min demo <span className="btn-arrow"><Icon.Arrow /></span>
            </button>
            <a href="#product" className="btn btn-ghost btn-lg"><Icon.Play /> Watch the walkthrough</a>
          </div>
          <div className="hero-foot">
            <span><Icon.Check className="check" /> No card, no commitment</span>
            <span className="sep"></span>
            <span><Icon.Check className="check" /> Real leads, your market</span>
            <span className="sep"></span>
            <span><Icon.Check className="check" /> Live in 24 hours</span>
          </div>
        </div>
        <div>
          <HeroVisual variant={tweaks.heroVariant} />
        </div>
      </div>

      <div className="shell">
        <div className="logos">
          <span className="label">Built on data from</span>
          <span className="logo-pill"><span className="glyph">[ ]</span>County Assessors</span>
          <span className="logo-pill"><span className="glyph">$</span>Rent Indexes</span>
          <span className="logo-pill"><span className="glyph">⌬</span>Business Filings</span>
          <span className="logo-pill"><span className="glyph">@</span>Owner Enrichment</span>
        </div>
      </div>
    </section>
  );
}

// === Stats ===
function Stats() {
  const items = [
    { n: "200+", l: "ranked leads per county, refreshed daily", k: "COVERAGE" },
    { n: "92", u: "%", l: "of contact records include a verified email or phone", k: "ENRICHMENT" },
    { n: "8.4", u: "×", l: "higher reply rate than generic landlord mailing lists", k: "PERFORMANCE" },
    { n: "24", u: "h", l: "from signing your contract to your first warm leads", k: "ONBOARDING" },
  ];
  return (
    <section className="section" style={{ paddingTop: 48, paddingBottom: 48 }}>
      <div className="shell">
        <div className="stats">
          {items.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat-k">{s.k}</div>
              <div className="stat-n" style={{ marginTop: 12 }}>
                {s.n}{s.u && <span className="unit">{s.u}</span>}
              </div>
              <div className="stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === How it works ===
function HowItWorks() {
  const steps = [
    {
      n: "01 / INGEST",
      h: "Pull every landlord in your county",
      p: "We ingest assessor rolls, rental licenses, eviction filings, and court dockets — then resolve them into a single owner record.",
      viz: (
        <div className="viz-mono">
          <div>→ assessor.json &nbsp;<span style={{color:"var(--accent)"}}>✓</span></div>
          <div>→ court_docket &nbsp;<span style={{color:"var(--accent)"}}>✓</span></div>
          <div>→ rental_lic &nbsp;&nbsp;<span style={{color:"var(--accent)"}}>✓</span></div>
          <div>→ rent_index &nbsp;&nbsp;<span style={{color:"var(--accent)"}}>✓</span></div>
        </div>
      ),
    },
    {
      n: "02 / SCORE",
      h: "Rank by Struggle Score",
      p: "A weighted score from 0–40+ that signals which owners are most likely overwhelmed, non-compliant, or financially squeezed.",
      viz: (
        <div className="viz-bars">
          {[18, 28, 35, 22, 42, 38, 50, 32, 48, 60, 44, 52].map((h, i) => (
            <div key={i} className="b" style={{ height: h, opacity: 0.4 + i / 20 }}></div>
          ))}
        </div>
      ),
    },
    {
      n: "03 / ENRICH",
      h: "Surface real contact info",
      p: "We enrich each landlord with verified email + phone, then dedupe across LLCs, trusts and registered agents.",
      viz: (
        <div style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start" }}>
          <div className="viz-pill"><span className="d"></span>email · verified</div>
          <div className="viz-pill"><span className="d"></span>mobile · verified</div>
          <div className="viz-pill"><span className="d"></span>LLC → person resolved</div>
        </div>
      ),
    },
    {
      n: "04 / TRACK",
      h: "Send, then track through your pipeline",
      p: "Every lead comes with a personalized draft email. Edit, send, then set status as you go — Contacted, Follow-up, Meeting, Won — all kept in one tracked view.",
      viz: (
        <div style={{ display: "flex", flexDirection: "column", gap: 5, fontFamily: "Geist Mono, monospace", fontSize: 10, color: "var(--ink-2)", lineHeight: 1.4, padding: "0 8px", textAlign: "left" }}>
          <div><span style={{ color: "var(--accent)" }}>●</span> New → <span style={{ color: "var(--accent)" }}>Contacted</span></div>
          <div><span style={{ color: "var(--muted-2)" }}>○</span> Follow-up</div>
          <div><span style={{ color: "var(--muted-2)" }}>○</span> Meeting set</div>
          <div><span style={{ color: "var(--muted-2)" }}>○</span> Won</div>
        </div>
      ),
    },
  ];
  return (
    <section className="section" id="how">
      <div className="shell">
        <div className="section-eyebrow">How it works</div>
        <h2 className="section-title">From <span className="em">county records</span> to a ranked, ready-to-send pipeline. In four steps.</h2>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-n">{s.n}</div>
              <div className="step-vis">{s.viz}</div>
              <h3>{s.h}</h3>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Struggle Score Deep Dive ===
function ScoreDeepDive() {
  const [score, setScore] = useState(0);
  const targetScore = 32;
  const ref = useRef(null);
  useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        const start = performance.now();
        const dur = 1500;
        const tick = (t) => {
          const p = Math.min(1, (t - start) / dur);
          setScore(Math.round(targetScore * (1 - Math.pow(1 - p, 3))));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const breakdown = [
    { label: "Owns 9+ rental units", src: "ASSESSOR", pts: 7 },
    { label: "Operates without rental license", src: "CITY LIC", pts: 8 },
    { label: "Vacant unit listed 45+ days", src: "RENT INDEX", pts: 6 },
    { label: "Listed 12% above market rent", src: "RENT INDEX", pts: 5 },
    { label: "Out-of-state mailing address", src: "ASSESSOR", pts: 6 },
  ];

  return (
    <section className="section" id="score" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="shell">
        <div className="section-eyebrow">Struggle Score</div>
        <h2 className="section-title">The single number that tells you <span className="em">who might need your help</span>.</h2>
        <p className="section-lede">A composite signal from five data domains. Higher means more likely to outsource — overstretched portfolio, sitting vacancies, or compliance gaps.</p>

        <div className="deep">
          <div ref={ref} className="gauge">
            <div className="gauge-row">
              <span className="gauge-title">STRUGGLE SCORE · LIVE PREVIEW</span>
              <span className="tag tag-danger">HIGH PRIORITY</span>
            </div>
            <div className="gauge-big">
              {score}<span className="pts">/ 40 pts</span>
            </div>
            <div className="gauge-bar">
              <div className="gauge-bar-fill" style={{ width: `${(score / 40) * 100}%` }}></div>
            </div>
            <div className="gauge-scale">
              <span>0 · COLD</span>
              <span>15 · WARM</span>
              <span>25 · HOT</span>
              <span>40 · MAX</span>
            </div>
            <div className="gauge-rows">
              {breakdown.map((b, i) => (
                <div className="gr" key={i}>
                  <span>{b.label}</span>
                  <span className="src">{b.src}</span>
                  <span className="pt">+{b.pts}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", margin: 0 }}>Every point is traceable.</h3>
            <p style={{ color: "var(--muted)", margin: "10px 0 0", lineHeight: 1.55 }}>
              Hover any score, see exactly which signal contributed. No black boxes. No vibes.
            </p>
            <div className="deep-points">
              <div className="deep-pt"><div className="num">01</div><div><h4>Compliance gaps</h4><p>Unlicensed rentals and expired registrations — the signals that tell you a landlord is operating outside the city's rules and is open to a hand.</p></div></div>
              <div className="deep-pt"><div className="num">02</div><div><h4>Pricing & vacancy</h4><p>Units sitting empty past market norms, or listed well above comparable rent — surfaced from rent indexes and listing data.</p></div></div>
              <div className="deep-pt"><div className="num">03</div><div><h4>Operational load</h4><p>Portfolio size, geographic dispersion, out-of-state ownership — the structural signs an owner is overstretched.</p></div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Email card section ===
function EmailFeature() {
  return (
    <section className="section" id="product">
      <div className="shell">
        <div className="deep" style={{ marginTop: 0 }}>
          <div>
            <div className="section-eyebrow">Ready-to-send</div>
            <h2 className="section-title">Personalized emails, <span className="em">ready to send</span>.</h2>
            <p className="section-lede">Every lead arrives with a draft that references the owner's specific properties and the signal that surfaced them. Edit the draft, send when you're ready, and track every reply through your pipeline.</p>
            <div className="deep-points">
              <div className="deep-pt"><div className="num">→</div><div><h4>Specific, not spammy</h4><p>Plain-spoken outreach that names the actual properties and the public signal — written like one operator talking to another, not a marketer.</p></div></div>
              <div className="deep-pt"><div className="num">→</div><div><h4>Edit in place</h4><p>Tweak any draft, save your own voice as a snippet, and reuse it across thousands of leads.</p></div></div>
              <div className="deep-pt"><div className="num">→</div><div><h4>Track through your pipeline</h4><p>Set status as you go — New, Contacted, Follow-up, Meeting, Won. Every lead, every note, in one tracked view.</p></div></div>
            </div>
          </div>
          <div className="email-card">
            <div className="email-head">
              <div className="from">From: me@example.com</div>
              <div className="meta">DRAFT · 36s ago</div>
            </div>
            <div className="email-subj">Quick check-in on your Boulder rentals</div>
            <div className="email-body">
              <p style={{ margin: "0 0 10px" }}>Hi [Owner],</p>
              <p style={{ margin: "0 0 10px" }}>I'm with All County — we manage rentals around Boulder and work with a few owners who have <span className="highlight">multiple properties in the area</span>. Since you're managing from out of state, figured it might be worth a quick check-in.</p>
              <p style={{ margin: "0 0 10px" }}>I've been tracking what's moving locally, and your units on <span className="highlight">Monroe and Madison</span> are priced a bit higher than comparable rentals nearby. Even a small adjustment can make a real difference in days-to-lease and tenant quality.</p>
              <p style={{ margin: 0 }}>If you want a quick comparison on what we're seeing, happy to share. No obligation.</p>
            </div>
            <div className="email-actions">
              <button className="btn btn-accent" style={{ height: 36 }}><Icon.Mail /> Send</button>
              <button className="btn btn-ghost" style={{ height: 36 }}>Edit draft</button>
              <span style={{ marginLeft: "auto", fontFamily: "Geist Mono, monospace", fontSize: 11, color: "var(--muted)" }}>2 signals cited · ready to send</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Product showcase (full screenshot) ===
function Showcase() {
  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="shell">
        <div className="section-eyebrow">The pipeline view</div>
        <h2 className="section-title">A single screen for your week's <span className="em">most likely closes</span>.</h2>
        <p className="section-lede">Filter by county, score range, or tag. Open a lead, see every public signal, draft the email, mark the status.</p>
        <div className="showcase">
          <div className="showcase-chrome">
            <div className="chrome-dots"><span></span><span></span><span></span></div>
            <div className="chrome-bar"><Icon.Lock /> app.dooroptic.com/pipeline</div>
          </div>
          <MockDashboard />
        </div>
      </div>
    </section>
  );
}

// === Testimonials (unused; user has no real quotes) ===
function TestimonialsUnused() {
  const items = [
    {
      quote: <>We added <span className="hl">340 doors</span> in our first 4 months on Door Optic. Best lead source we've ever used.</>,
      name: "Marcus Holloway",
      role: "Founder, All County PM · Boulder",
      initials: "MH",
      res: "+340 doors / 4mo",
    },
    {
      quote: <>The Struggle Score is shockingly accurate. The first 50 emails got <span className="hl">11 replies</span>. Eleven.</>,
      name: "Diana Chen",
      role: "VP Growth, Northrock Realty",
      initials: "DC",
      res: "22% reply rate",
    },
    {
      quote: <>I stopped buying landlord lists. Door Optic finds the owners who are actually <span className="hl">ready to outsource</span>.</>,
      name: "Rafael Ortiz",
      role: "Principal, Mile High Property Co.",
      initials: "RO",
      res: "+$48k MRR",
    },
  ];
  return (
    <section className="section" id="customers">
      <div className="shell">
        <div className="section-eyebrow">From the field</div>
        <h2 className="section-title">PMCs are <span className="em">winning doors</span> with Door Optic.</h2>
        <div className="tgrid">
          {items.map((t, i) => (
            <div className="tcard" key={i}>
              <div className="quote">"{t.quote}"</div>
              <div className="tcard-foot">
                <div className="avatar">{t.initials}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
                <span className="res">{t.res}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Demo form ===
function DemoForm({ formRef }) {
  const [data, setData] = useState({ name: "", email: "", company: "", doors: "", market: "", notes: "" });
  const [errors, setErrors] = useState({});
  const [state, setState] = useState("idle"); // idle | submitting | success | error
  const set = (k, v) => { setData((d) => ({ ...d, [k]: v })); setErrors((e) => ({ ...e, [k]: undefined })); };

  const validate = () => {
    const e = {};
    if (!data.name.trim()) e.name = "Required";
    if (!data.email.trim()) e.email = "Required";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = "Not a valid email";
    if (!data.company.trim()) e.company = "Required";
    if (!data.market.trim()) e.market = "Required";
    return e;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length) return;
    setState("submitting");
    try {
      const res = await fetch("https://formspree.io/f/mbdblznq", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify({
          name: data.name,
          email: data.email,
          company: data.company,
          doors: data.doors,
          market: data.market,
          notes: data.notes,
          _subject: `New Door Optic demo request: ${data.company} (${data.market})`,
        }),
      });
      if (!res.ok) throw new Error("submit failed");
      setState("success");
    } catch (err) {
      setState("error");
    }
  };

  return (
    <section className="section" id="demo" ref={formRef}>
      <div className="shell">
        <div className="cta-block">
          <div className="cta-grid">
            <div>
              <div className="section-eyebrow">Book a demo</div>
              <h2>See your <span className="em">county's</span> ranked landlord list in 20 minutes.</h2>
              <p>We'll pull live data from your market on the call. If the leads don't look better than what you're using today, we'll buy you lunch.</p>
              <ul className="cta-bullets">
                <li><Icon.Check /> 20-min walkthrough with a founder</li>
                <li><Icon.Check /> Live pull from <em>your</em> county</li>
                <li><Icon.Check /> Sample 25 leads to keep — even if you don't sign</li>
                <li><Icon.Check /> No card, no contract, no awkward sales push</li>
              </ul>
            </div>

            <div className="form-card">
              {state === "success" ? (
                <div className="form-success">
                  <div className="check"><Icon.Check /></div>
                  <h3>You're on the list.</h3>
                  <p>We'll email <strong>{data.email}</strong> within one business day with calendar options and your sample lead pack.</p>
                  <div className="meta">REQ-{Math.floor(Math.random()*9000+1000)} · QUEUED · ~14h to first response</div>
                </div>
              ) : (
                <form onSubmit={submit} noValidate>
                  <div className="form-head">
                    <span className="ttl">Request access</span>
                    <span className="est">~ 60 sec</span>
                  </div>
                  <div className="field-row">
                    <div className={`field${errors.name ? " error" : ""}`}>
                      <label>Full name</label>
                      <input type="text" placeholder="Alex Rivera" value={data.name} onChange={(e) => set("name", e.target.value)} />
                      {errors.name && <span className="field-err">{errors.name}</span>}
                    </div>
                    <div className={`field${errors.email ? " error" : ""}`}>
                      <label>Work email</label>
                      <input type="email" placeholder="alex@yourpmc.com" value={data.email} onChange={(e) => set("email", e.target.value)} />
                      {errors.email && <span className="field-err">{errors.email}</span>}
                    </div>
                  </div>
                  <div className={`field${errors.company ? " error" : ""}`}>
                    <label>Company</label>
                    <input type="text" placeholder="Your PMC" value={data.company} onChange={(e) => set("company", e.target.value)} />
                    {errors.company && <span className="field-err">{errors.company}</span>}
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label>Doors managed</label>
                      <select value={data.doors} onChange={(e) => set("doors", e.target.value)}>
                        <option value="">Select range</option>
                        <option>Under 50</option>
                        <option>50–200</option>
                        <option>200–500</option>
                        <option>500–1,500</option>
                        <option>1,500+</option>
                      </select>
                    </div>
                    <div className={`field${errors.market ? " error" : ""}`}>
                      <label>Primary market</label>
                      <input type="text" placeholder="Boulder, CO" value={data.market} onChange={(e) => set("market", e.target.value)} />
                      {errors.market && <span className="field-err">{errors.market}</span>}
                    </div>
                  </div>
                  <button type="submit" className="submit-btn" disabled={state === "submitting"}>
                    {state === "submitting" ? "Sending…" : <>Book demo & get sample leads <Icon.Arrow /></>}
                  </button>
                  {state === "error" && (
                    <div className="field-err" style={{ marginTop: 10, textAlign: "center" }}>
                      Something went wrong. Email us directly at hello@dooroptic.com.
                    </div>
                  )}
                  <div className="form-foot">We'll never share your details. Unsubscribe in one click.</div>
                </form>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Footer ===
function Footer() {
  return (
    <footer>
      <div className="shell">
        <div className="foot-grid">
          <div>
            <Brand />
            <p className="foot-tag">Lead intelligence for property management companies. Built in Boulder.</p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#score">Struggle Score</a></li>
              <li><a href="#product">Pipeline</a></li>
              <li><a href="#demo">Book a demo</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Door Optic, Inc.</span>
          <span className="mono" style={{ fontSize: 11 }}>dooroptic.com</span>
        </div>
      </div>
    </footer>
  );
}

// === Tweaks ===
function AppTweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme">
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          options={[{ label: "Light", value: "light" }, { label: "Dark", value: "dark" }]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          options={["#0a7c5a", "#1d4ed8", "#c2410c", "#7c3aed"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio
          label="Visual"
          value={tweaks.heroVariant}
          options={[
            { label: "Animated", value: "card" },
            { label: "Screenshot", value: "screenshot" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSelect
          label="Headline"
          value={tweaks.headlineStyle}
          options={[
            { label: "Calm & confident", value: "results" },
            { label: "Contrarian / punchy", value: "contrarian" },
            { label: "Numbers-first", value: "numbers" },
            { label: "Direct benefit", value: "calm" },
          ]}
          onChange={(v) => setTweak("headlineStyle", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// === App root ===
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const formRef = useRef(null);

  // Apply accent + theme to CSS vars
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", tweaks.accent);
    // derive deep + soft + tint from accent
    root.style.setProperty("--accent-deep", `color-mix(in oklab, ${tweaks.accent} 80%, black)`);
    root.style.setProperty("--accent-soft", `color-mix(in oklab, ${tweaks.accent} 12%, white)`);
    root.style.setProperty("--accent-tint", `color-mix(in oklab, ${tweaks.accent} 5%, var(--bg))`);
    root.setAttribute("data-theme", tweaks.theme);
  }, [tweaks.accent, tweaks.theme]);

  const scrollToForm = () => {
    if (formRef.current) {
      window.scrollTo({ top: formRef.current.offsetTop - 40, behavior: "smooth" });
    }
  };

  return (
    <>
      <Nav onCTA={scrollToForm} />
      <Hero tweaks={tweaks} onCTA={scrollToForm} />
      <Stats />
      <HowItWorks />
      <ScoreDeepDive />
      <EmailFeature />
      <Showcase />
      <DemoForm formRef={formRef} />
      <Footer />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);