// zScrow — landing app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "emerald",
  "density": "regular",
  "headline": "internet",
  "heroVisual": "card"
}/*EDITMODE-END*/;

const ACCENTS = {
  emerald: { hex: "#00E58F", name: "Emerald" },
  cyan:    { hex: "#60A5FA", name: "Cyan-blue" },
  violet:  { hex: "#A78BFA", name: "Violet" },
};

function applyAccent(key) {
  const root = document.documentElement;
  const hex = ACCENTS[key]?.hex || ACCENTS.emerald.hex;
  // convert #rrggbb to "r,g,b"
  const r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
  root.style.setProperty("--accent", hex);
  root.style.setProperty("--accent-2", `rgba(${r},${g},${b},0.12)`);
  root.style.setProperty("--accent-3", `rgba(${r},${g},${b},0.22)`);
}

function applyDensity(d) {
  const r = document.documentElement;
  r.classList.remove("density-compact", "density-regular");
  r.classList.add(`density-${d}`);
}

// ─────────────────────── Nav ───────────────────────
function Nav({ onStartDeal }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#" className="brand">
          <span className="brand-dot" />
          zScrow
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#cases">Use cases</a>
          <a href="#why">Why zScrow</a>
          <a href="pricing.html">Pricing</a>
          <a href="contact.html">Contact</a>
        </div>
        <div className="nav-cta">
          <a href="signin.html" className="btn btn-link">Sign in</a>
          <button className="btn btn-primary" onClick={onStartDeal}>Start a deal <IconArrow size={14} stroke={2}/></button>
        </div>
      </div>
    </nav>
  );
}

// ─────────────────────── Hero deal card ───────────────────────
function DealCard() {
  return (
    <div className="deal-stage">
      <div className="deal-card">
        <div className="deal-head">
          <span className="deal-id mono">DEAL · ZS-9F2C·48A1</span>
          <span className="deal-status"><span className="dot"/>Funds in zScrow</span>
        </div>

        <div className="deal-amount-row">
          <div className="deal-amount tnum">
            <span className="ccy">USD</span><CountUp to={48500} prefix="$" />
          </div>
          <div className="deal-meta">
            <span className="label">Asset</span>
            Facebook group sale
          </div>
        </div>

        <div className="parties">
          <div className="party">
            <div className="avatar av-1">MR</div>
            <div className="party-info">
              <div className="name">Mara R.</div>
              <div className="role mono">Buyer</div>
            </div>
          </div>
          <div className="flow-arrow">
            <svg width="28" height="14" viewBox="0 0 28 14" fill="none">
              <path d="M1 7h24M21 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div className="party">
            <div className="avatar av-2">DK</div>
            <div className="party-info">
              <div className="name">Dom K.</div>
              <div className="role mono">Seller</div>
            </div>
          </div>
        </div>

        <div className="deal-progress">
          <div className="progress-track">
            <div className="progress-seg done"></div>
            <div className="progress-seg done"></div>
            <div className="progress-seg active"></div>
            <div className="progress-seg"></div>
          </div>
          <div className="progress-rows">
            <div className="progress-row done">
              <span className="check"><IconCheck size={11} stroke={2.5}/></span>
              <span className="label">Terms agreed</span>
              <span className="time mono">10:42</span>
            </div>
            <div className="progress-row done">
              <span className="check"><IconCheck size={11} stroke={2.5}/></span>
              <span className="label">Buyer funded escrow</span>
              <span className="time mono">10:46</span>
            </div>
            <div className="progress-row active">
              <span className="check"><span style={{width:6,height:6,background:"currentColor",borderRadius:"50%"}}/></span>
              <span className="label">Awaiting transfer of asset</span>
              <span className="time mono">— —</span>
            </div>
            <div className="progress-row pending">
              <span className="check"></span>
              <span className="label">Buyer approves &amp; funds release</span>
              <span className="time mono">— —</span>
            </div>
          </div>
        </div>
      </div>

      <div className="deal-annot a-1"><span className="accent">●</span>Held by zScrow</div>
      <div className="deal-annot a-2">Auto-release · 24h</div>
    </div>
  );
}

// ─────────────────────── Start a deal modal ───────────────────────
const DEAL_CATEGORIES = [
  { id: "domain",    Icon: IconGlobe,     label: "Domain",          hint: "Premium / brokered transfer" },
  { id: "social",    Icon: IconAt,        label: "Social account",  hint: "FB, IG, TikTok, YouTube" },
  { id: "creator",   Icon: IconSparkle,   label: "Creator deal",    hint: "Sponsorship, milestones" },
  { id: "saas",      Icon: IconMonitor,   label: "Website / SaaS",  hint: "Indie acqui-hire, codebase" },
  { id: "freelance", Icon: IconBriefcase, label: "Freelance / agency", hint: "Project, retainer" },
  { id: "digital",   Icon: IconLink,      label: "Digital goods",   hint: "Licenses, files, audiences" },
];

function StartDealModal({ open, onClose }) {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    category: "",
    role: "buyer",
    amount: "",
    currency: "USD",
    counterpartyEmail: "",
    title: "",
  });

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  React.useEffect(() => {
    if (!open) {
      const t = setTimeout(() => { setStep(1); }, 250);
      return () => clearTimeout(t);
    }
  }, [open]);

  if (!open) return null;

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const amountNum = parseFloat(data.amount) || 0;
  const isCustom = amountNum >= 10000;
  const fee = isCustom ? 0 : +(amountNum * 0.05).toFixed(2);
  const total = data.role === "buyer" ? +(amountNum + fee).toFixed(2) : amountNum;
  const fmt = (n) => n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  const canStep1 = !!data.category;
  const canStep2 = data.title.trim().length > 1 && amountNum > 0;
  const canStep3 = /.+@.+\..+/.test(data.counterpartyEmail);

  const close = () => onClose();

  return (
    <div className="modal-backdrop" onMouseDown={close}>
      <div className="modal modal-deal" onMouseDown={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="deal-modal-title">
        <button className="modal-close" onClick={close} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M2 2l10 10M12 2L2 12"/></svg>
        </button>

        <div className="modal-grid">
          <aside className="modal-aside">
            <div className="brand" style={{ marginBottom: 22 }}>
              <span className="brand-dot" /> zScrow
            </div>
            <div className="modal-aside-eyebrow mono">DEAL · DRAFT</div>
            <h3 id="deal-modal-title" className="modal-aside-title">A deal you can both trust.</h3>
            <p className="modal-aside-sub">Funds sit in a regulated, segregated account. Nobody can pull them until the asset transfers and both sides sign off.</p>

            <ul className="modal-aside-list">
              <li><span className="check"><IconCheck size={11} stroke={2.5}/></span>Funds locked until release</li>
              <li><span className="check"><IconCheck size={11} stroke={2.5}/></span>KYC on both counterparties</li>
              <li><span className="check"><IconCheck size={11} stroke={2.5}/></span>Dispute review within 48h</li>
              <li><span className="check"><IconCheck size={11} stroke={2.5}/></span>Full audit log, every step</li>
            </ul>

            <div className="modal-aside-fee">
              <div className="row"><span>Deal amount</span><span className="mono tnum">{data.currency} {fmt(amountNum)}</span></div>
              {isCustom ? (
                <div className="row"><span>zScrow fee</span><span className="mono" style={{ color: "var(--accent)" }}>Custom · contact</span></div>
              ) : (
                <div className="row"><span>zScrow fee · 5%</span><span className="mono tnum">{data.currency} {fmt(fee)}</span></div>
              )}
              <div className="row total">
                <span>{data.role === "buyer" ? "You fund" : "You receive"}</span>
                <span className="mono tnum">{isCustom ? "—" : `${data.currency} ${fmt(total)}`}</span>
              </div>
            </div>
          </aside>

          <section className="modal-main">
            <div className="modal-steps mono">
              <span className={step >= 1 ? "active" : ""}>01 · Type</span>
              <span className="sep" />
              <span className={step >= 2 ? "active" : ""}>02 · Terms</span>
              <span className="sep" />
              <span className={step >= 3 ? "active" : ""}>03 · Counterparty</span>
            </div>

            {step === 1 && (
              <div className="modal-step">
                <h4>What are you closing?</h4>
                <p className="muted">Pick the deal type — it changes how we handle the asset transfer.</p>
                <div className="cat-grid">
                  {DEAL_CATEGORIES.map(({ id, Icon, label, hint }) => (
                    <button
                      key={id}
                      type="button"
                      className={`cat-tile ${data.category === id ? "selected" : ""}`}
                      onClick={() => set("category", id)}
                    >
                      <div className="cat-icon"><Icon size={20} stroke={1.6}/></div>
                      <div className="cat-label">{label}</div>
                      <div className="cat-hint">{hint}</div>
                    </button>
                  ))}
                </div>

                <div className="role-row">
                  <span className="role-label">I am the</span>
                  <div className="role-pills">
                    <button type="button" className={`role-pill ${data.role === "buyer" ? "selected" : ""}`} onClick={() => set("role", "buyer")}>Buyer</button>
                    <button type="button" className={`role-pill ${data.role === "seller" ? "selected" : ""}`} onClick={() => set("role", "seller")}>Seller</button>
                  </div>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="modal-step">
                <h4>Terms of the deal</h4>
                <p className="muted">A short title both sides will see, plus the price.</p>

                <label className="field">
                  <span>Deal title</span>
                  <input type="text" value={data.title} onChange={(e) => set("title", e.target.value)} placeholder="e.g. Acquisition of @brand handle on Instagram" />
                </label>

                <div className="field-row">
                  <label className="field" style={{ flex: 2 }}>
                    <span>Amount</span>
                    <input type="number" min="0" step="0.01" value={data.amount} onChange={(e) => set("amount", e.target.value)} placeholder="0.00" />
                  </label>
                  <label className="field" style={{ flex: 1 }}>
                    <span>Currency</span>
                    <select value={data.currency} onChange={(e) => set("currency", e.target.value)}>
                      <option>USD</option>
                      <option>EUR</option>
                      <option>GBP</option>
                      <option>USDC</option>
                    </select>
                  </label>
                </div>

                <div className="modal-callout">
                  <IconShield size={16} stroke={1.6}/>
                  <div>
                    {isCustom
                      ? <>Deals over $10,000 use <strong style={{ color: "var(--text)" }}>custom pricing</strong> — our team will reach out within one business day.</>
                      : <>Flat <strong style={{ color: "var(--text)" }}>5% fee</strong> for deals under $10,000. Held by a regulated partner — segregated, audit-logged, never co-mingled.</>
                    }
                  </div>
                </div>
              </div>
            )}

            {step === 3 && (
              <div className="modal-step">
                <h4>Who is on the other side?</h4>
                <p className="muted">We&rsquo;ll send them an invite to verify and review the terms before any money moves.</p>

                <label className="field">
                  <span>Counterparty email</span>
                  <input type="email" value={data.counterpartyEmail} onChange={(e) => set("counterpartyEmail", e.target.value)} placeholder="them@example.com" />
                </label>

                <div className="review-card">
                  <div className="review-row"><span>Type</span><span>{DEAL_CATEGORIES.find(c => c.id === data.category)?.label || "—"}</span></div>
                  <div className="review-row"><span>Role</span><span style={{ textTransform: "capitalize" }}>{data.role}</span></div>
                  <div className="review-row"><span>Title</span><span style={{ textAlign: "right", maxWidth: "60%" }}>{data.title || "—"}</span></div>
                  <div className="review-row"><span>Amount</span><span className="mono tnum">{data.currency} {fmt(amountNum)}</span></div>
                  <div className="review-row"><span>Fee</span><span className="mono" style={isCustom ? { color: "var(--accent)" } : {}}>{isCustom ? "Custom" : `${data.currency} ${fmt(fee)} · 5%`}</span></div>
                  <div className="review-row total">
                    <span>{data.role === "buyer" ? "You fund" : "You receive"}</span>
                    <span className="mono tnum">{isCustom ? "—" : `${data.currency} ${fmt(total)}`}</span>
                  </div>
                </div>

                <p className="muted" style={{ fontSize: 12.5 }}>
                  By continuing you agree to zScrow&rsquo;s <a href="terms.html" style={{ color: "var(--text)", textDecoration: "underline" }}>terms</a> and <a href="privacy.html" style={{ color: "var(--text)", textDecoration: "underline" }}>privacy policy</a>. KYC is required before funds release.
                </p>
              </div>
            )}

            <div className="modal-actions">
              {step > 1 ? (
                <button type="button" className="btn btn-ghost" onClick={() => setStep(step - 1)}>Back</button>
              ) : (
                <button type="button" className="btn btn-ghost" onClick={close}>Cancel</button>
              )}
              {step < 3 && (
                <button
                  type="button"
                  className="btn btn-primary"
                  disabled={(step === 1 && !canStep1) || (step === 2 && !canStep2)}
                  onClick={() => setStep(step + 1)}
                >
                  Continue <IconArrow size={14} stroke={2}/>
                </button>
              )}
              {step === 3 && (
                <a
                  href={canStep3 ? (isCustom ? "contact.html" : "register.html") : "#"}
                  className={`btn btn-primary ${canStep3 ? "" : "is-disabled"}`}
                  onClick={(e) => { if (!canStep3) e.preventDefault(); }}
                >
                  {isCustom ? "Talk to sales" : "Create account & lock in"} <IconArrow size={14} stroke={2}/>
                </a>
              )}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────── Hero ───────────────────────
function Hero({ headline, onStartDeal }) {
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow"><span className="pulse"/> <span className="mono">v2.4 · LIVE ON MAINNET RAILS</span></div>
          {headline === "internet" ? (
            <h1 className="h-display">
              Escrow for the<br/>
              <span className="accent">internet economy.</span>
            </h1>
          ) : (
            <h1 className="h-display">
              The safest way to<br/>
              <span className="accent">close any online deal.</span>
            </h1>
          )}
          <p className="h-sub">
            Buy and sell domains, social accounts, influencer deals, and digital
            assets — with funds held safely until both sides are happy. From $50
            to $500K+, on cards, wires, or stablecoins.
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={onStartDeal}>Start a deal <IconArrow size={15} stroke={2}/></button>
            <a href="#how" className="btn btn-ghost btn-lg">See how it works</a>
          </div>

          <div className="hero-trust">
            <div>
              <strong><CountUp to={12480}/>+</strong>
              <span style={{marginLeft: 8}}>creators, brokers &amp; operators</span>
            </div>
            <div className="sep" />
            <div>
              <strong>$<CountUp to={184}/>M</strong>
              <span style={{marginLeft: 8}}>transacted in 2025</span>
            </div>
            <div className="sep" />
            <div>
              <span>SOC&nbsp;2 · KYC/AML</span>
            </div>
          </div>
        </div>

        <DealCard />
      </div>
    </section>
  );
}

// ─────────────────────── How it works ───────────────────────
function How() {
  return (
    <section className="how" id="how">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">How it works</div>
          <h2 className="section-title">Three steps. Zero ambiguity.</h2>
          <p className="section-sub">A linear flow with hard checkpoints. No party can skip ahead, no party can pull funds before terms are met.</p>
        </div>
        <InView className="steps" inViewClass="in-view">
          <div className="step-connector"><div className="fill"/></div>

          <div className="step">
            <div className="step-num mono">01</div>
            <h3>Create the deal</h3>
            <p>Define terms, price, deliverables and timelines. Both parties sign before money moves.</p>
            <div className="step-icon mono">[ TERMS · DELIVERABLES · SIG ]</div>
          </div>

          <div className="step">
            <div className="step-num mono">02</div>
            <h3>Buyer funds escrow</h3>
            <p>Funds sit in a segregated, regulated account — verifiable, untouchable, audit-logged.</p>
            <div className="step-icon mono">[ FUNDS · LOCKED · SEGREGATED ]</div>
          </div>

          <div className="step">
            <div className="step-num mono">03</div>
            <h3>Deliver, approve, release</h3>
            <p>Seller transfers the asset. Buyer signs off. Funds release in seconds, not days.</p>
            <div className="step-icon mono">[ APPROVE · RELEASE · DONE ]</div>
          </div>
        </InView>
      </div>
    </section>
  );
}

// ─────────────────────── Use cases ───────────────────────
function Cases() {
  const cases = [
    { Icon: IconGlobe,    tag: "01", t: "Domain sales", d: "Premium domains, expired drops, brokered six-figure transfers." },
    { Icon: IconAt,       tag: "02", t: "Social accounts", d: "FB pages, IG handles, TikTok, YouTube channels — handle transfer + escrow." },
    { Icon: IconSparkle,  tag: "03", t: "Influencer deals", d: "Sponsorships, brand collabs, milestone-based creator agreements." },
    { Icon: IconMonitor,  tag: "04", t: "Websites & SaaS", d: "Acqui-hires, indie SaaS sales, full asset and codebase transfers." },
    { Icon: IconBriefcase,tag: "05", t: "Freelance & agency", d: "Milestone releases on high-ticket project work, no awkward invoicing." },
    { Icon: IconLink,     tag: "06", t: "Digital goods", d: "Licenses, source code, design files, audience lists, anything ownable." },
  ];
  return (
    <section className="section cases" id="cases">
      <div className="wrap">
        <div className="section-head">
          <div className="section-eyebrow">Use cases</div>
          <h2 className="section-title">Built for digital-native deals.</h2>
          <p className="section-sub">If trust is the bottleneck and the asset lives online — zScrow holds the line.</p>
        </div>
        <div className="cases-grid">
          {cases.map(({Icon, tag, t, d}) => (
            <div key={t} className="case">
              <span className="case-tag mono">{tag}</span>
              <div className="case-icon"><Icon size={26} stroke={1.5} /></div>
              <h3>{t}</h3>
              <p>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── Why zScrow ───────────────────────
function Why() {
  const items = [
    { Icon: IconScale,  t: "Any size, any deal", d: "From $50 add-ons to $500K+ acquisitions, on a single rail.", figure: "$50 – $500K+" },
    { Icon: IconShield, t: "Built-in dispute resolution", d: "Human review with full deal history, signed terms and audit logs.", figure: "< 48h SLA" },
    { Icon: IconChip,   t: "Multiple payment rails", d: "Cards, ACH, SWIFT wire, stablecoins. Pay how the deal demands.", figure: "USD · USDC · WIRE" },
    { Icon: IconBolt,   t: "Milestone releases", d: "Break large deals into tranches that release as work lands.", figure: "Multi-tranche" },
    { Icon: IconUsers,  t: "Identity-verified counterparties", d: "KYC/AML on both sides. No anon wallets pretending to be a buyer.", figure: "KYC · sanctions" },
    { Icon: IconDoc,    t: "Transparent flat fees", d: "5% on deals under $10K. Custom pricing above. No subscriptions, no hidden line items.", figure: "5% / Custom" },
  ];
  return (
    <section className="section why" id="why">
      <div className="wrap why-grid">
        <div>
          <div className="section-eyebrow">Why zScrow</div>
          <h2 className="section-title" style={{marginBottom: 20}}>The infrastructure layer for online trust.</h2>
          <p className="section-sub" style={{marginBottom: 28}}>
            Old-world escrow rebuilt for the speed and shape of internet deals.
            Regulated where it matters, fast everywhere else.
          </p>

          <div className="why-stats">
            <div style={{fontFamily: "JetBrains Mono", fontSize: 11, letterSpacing: ".18em", color: "var(--accent)", textTransform: "uppercase"}}>Live network</div>
            <div className="why-stats-grid">
              <div className="why-stat">
                <div className="v"><CountUp to={184} prefix="$" suffix="M"/></div>
                <div className="l">Volume YTD</div>
              </div>
              <div className="why-stat">
                <div className="v"><CountUp to={12480}/>+</div>
                <div className="l">Active operators</div>
              </div>
              <div className="why-stat">
                <div className="v"><CountUp to={99.94} decimals={2} suffix="%"/></div>
                <div className="l">Deals released cleanly</div>
              </div>
              <div className="why-stat">
                <div className="v"><CountUp to={47}/></div>
                <div className="l">Countries supported</div>
              </div>
            </div>
          </div>
        </div>

        <div className="why-list">
          {items.map(({Icon, t, d, figure}) => (
            <div key={t} className="why-item">
              <div className="why-icon"><Icon size={18} stroke={1.6}/></div>
              <div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
              <div className="figure mono">{figure}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── Final CTA ───────────────────────
function Final({ onStartDeal }) {
  return (
    <section className="final">
      <div className="wrap">
        <h2>Your next deal<br/>deserves zScrow.</h2>
        <p>Start in under a minute. Pay nothing until the deal closes.</p>
        <div className="hero-cta">
          <button className="btn btn-primary btn-lg" onClick={onStartDeal}>Start a deal <IconArrow size={15} stroke={2}/></button>
          <a href="contact.html" className="btn btn-ghost btn-lg">Talk to sales</a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── Footer ───────────────────────
function Footer({ onStartDeal }) {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <a href="#" className="brand" style={{marginBottom: 16, display: "inline-flex"}}>
              <span className="brand-dot" /> zScrow
            </a>
            <p style={{color: "var(--text-faint)", fontSize: 12.5, lineHeight: 1.55, maxWidth: 260, margin: "8px 0 0"}}>
              Escrow infrastructure for internet-native deals. Funds held by regulated partners; segregated and audit-logged.
            </p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onStartDeal && onStartDeal(); }}>Start a deal</a></li>
              <li><a href="pricing.html">Pricing</a></li>
              <li><a href="#">Integrations</a></li>
              <li><a href="#">API</a></li>
            </ul>
          </div>
          <div>
            <h5>Use cases</h5>
            <ul>
              <li><a href="#">Domains</a></li>
              <li><a href="#">Social accounts</a></li>
              <li><a href="#">Creator deals</a></li>
              <li><a href="#">SaaS sales</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Trust &amp; security</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
          <div>
            <h5>Legal</h5>
            <ul>
              <li><a href="terms.html">Terms</a></li>
              <li><a href="privacy.html">Privacy</a></li>
              <li><a href="#">Compliance</a></li>
              <li><a href="#">Disclosures</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 zScrow, Inc. · Funds held by regulated partner banks.</div>
          <div className="foot-compliance">
            <span className="badge">KYC/AML</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────── App ───────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [dealOpen, setDealOpen] = useState(false);
  const openDeal = () => setDealOpen(true);
  const closeDeal = () => setDealOpen(false);

  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { applyDensity(t.density); }, [t.density]);

  useEffect(() => {
    const checkHash = () => {
      if (window.location.hash === "#start-deal") {
        setDealOpen(true);
        history.replaceState(null, "", window.location.pathname + window.location.search);
      }
    };
    checkHash();
    window.addEventListener("hashchange", checkHash);
    return () => window.removeEventListener("hashchange", checkHash);
  }, []);

  return (
    <>
      <Nav onStartDeal={openDeal} />
      <div className="nav-spacer" />
      <Hero headline={t.headline} onStartDeal={openDeal} />
      <How />
      <Cases />
      <Why />
      <Final onStartDeal={openDeal} />
      <Footer onStartDeal={openDeal} />
      <StartDealModal open={dealOpen} onClose={closeDeal} />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={["emerald", "cyan", "violet"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["regular", "compact"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Headline"
          value={t.headline}
          options={["internet", "safest"]}
          onChange={(v) => setTweak("headline", v)}
        />
      </TweaksPanel>
    </>
  );
}

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