// Mobile-only swipe-tab hero panel: Inbox / Document / Fields.
const MobileTabs = ({ active, activeId, setActiveId, phase, revealed }) => {
  const [tab, setTab] = React.useState("doc");
  const tabs = [["inbox", "Inbox"], ["doc", "Document"], ["fields", "Fields"]];
  return (
    <div className="hero-mobile" style={{ display: "none" }}>
      <div style={{ display: "flex", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
        {tabs.map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{
            flex: 1, padding: "12px 8px", border: 0, background: tab === k ? "#fff" : "transparent",
            fontSize: 13, fontWeight: 600, cursor: "pointer",
            color: tab === k ? "var(--ink)" : "var(--ink-4)",
            borderBottom: tab === k ? "2px solid var(--green)" : "2px solid transparent",
            marginBottom: -1,
          }}>{l}{k === "inbox" ? ` · ${window.DOCS.length}` : k === "fields" ? ` · ${active.fields.length}` : ""}</button>
        ))}
      </div>
      {tab === "inbox" && (
        <div style={{ display: "flex", flexDirection: "column", maxHeight: 520, overflow: "auto" }}>
          {window.DOCS.map((d) => {
            const sel = d.id === activeId;
            return (
              <button key={d.id} onClick={() => { setActiveId(d.id); setTab("doc"); }} style={{
                textAlign: "left", padding: "12px 16px", borderBottom: "1px solid var(--line)",
                background: sel ? "var(--green-tint)" : "transparent",
                borderLeft: sel ? "3px solid var(--green)" : "3px solid transparent",
                cursor: "pointer", display: "flex", flexDirection: "column", gap: 4,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 14, fontWeight: 550 }}>{d.label}</span>
                  <span className="mono text-5" style={{ fontSize: 11 }}>{d.received}</span>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-4)" }}>{d.sender}</div>
                <div style={{ display: "flex", gap: 6, marginTop: 2 }}>
                  <span className={`pill ${d.pillClass}`} style={{ fontSize: 10.5, padding: "2px 7px" }}>{d.type}</span>
                  <span className="pill" style={{ fontSize: 10.5, padding: "2px 7px" }}>{d.pages}p</span>
                </div>
              </button>
            );
          })}
        </div>
      )}
      {tab === "doc" && (
        <div style={{ background: "var(--bg-soft)", padding: "24px 16px 18px", display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
          <div style={{ width: "100%", display: "flex", justifyContent: "space-between", fontSize: 11.5, color: "var(--ink-4)" }}>
            <span className="mono">{active.id}.pdf · pg 1/{active.pages}</span>
            <span className="pill pill-green" style={{ fontSize: 10.5, padding: "2px 7px" }}>
              <span className="dot dot-green"/> {(active.confidence * 100).toFixed(0)}%
            </span>
          </div>
          <div style={{ width: 260, height: 340, background: "#fff",
            boxShadow: "0 1px 0 rgba(0,0,0,0.05), 0 18px 36px rgba(12,20,16,0.12)",
            borderRadius: 4, position: "relative", overflow: "hidden", transform: "rotate(-1deg)" }}>
            <window.DocLineup kind={active.preview} />
            {phase === "scan" && <div className="scan-beam" style={{ animation: "scanbeam 0.8s ease-in-out forwards" }}/>}
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-4)", textAlign: "center", padding: "0 8px" }}>{active.summary}</div>
          <div style={{ display: "flex", gap: 6, justifyContent: "center", flexWrap: "wrap" }}>
            {[{ k: "scan", l: "Scanning" }, { k: "extract", l: "Extracting" }, { k: "done", l: "Reviewed" }].map((s) => {
              const order = ["scan", "extract", "done"].indexOf(phase);
              const here = ["scan", "extract", "done"].indexOf(s.k);
              const act = here <= order;
              return (
                <span key={s.k} style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  fontSize: 11, padding: "4px 10px", borderRadius: 999,
                  background: act ? "var(--green-soft)" : "#fff",
                  color: act ? "var(--green-ink)" : "var(--ink-4)",
                  border: `1px solid ${act ? "#cce8d5" : "var(--line)"}`,
                }}>
                  <span className="dot" style={{ background: act ? "var(--green)" : "var(--ink-5)" }}/>{s.l}
                </span>
              );
            })}
          </div>
          <button onClick={() => setTab("fields")} className="btn btn-ghost btn-sm arrow" style={{ marginTop: 4 }}>See extracted fields</button>
        </div>
      )}
      {tab === "fields" && (
        <div style={{ background: "#fff" }}>
          {active.fields.map(([k, v], i) => {
            const shown = i < revealed;
            return (
              <div key={k} className="field-row" style={{ opacity: shown ? 1 : 0, transform: shown ? "translateY(0)" : "translateY(4px)", transition: "opacity .2s ease, transform .2s ease" }}>
                <span className="field-key">{k}</span>
                <span className="field-val" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{v}</span>
                <window.Icons.Check size={13} stroke={2.4} style={{ color: "var(--green)" }} />
              </div>
            );
          })}
          {active.flags.length > 0 && (
            <div style={{ padding: "10px 14px", background: "#fef9ef", borderTop: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 6 }}>
              {active.flags.map((f) => (
                <div key={f.key} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--amber)" }}>
                  <window.Icons.Flag size={13} stroke={2}/>{f.text}
                </div>
              ))}
            </div>
          )}
          <div style={{ padding: "14px 16px", borderTop: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 8 }}>
            <div style={{ fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-4)", fontWeight: 600 }}>Routed to</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, fontWeight: 500 }}>
              <window.Icons.Route size={14} />{active.destination}
            </div>
            <div style={{ display: "flex", gap: 6, marginTop: 4, flexWrap: "wrap" }}>
              <span className="pill" style={{ fontSize: 11 }}>CSV</span>
              <span className="pill" style={{ fontSize: 11 }}>JSON</span>
              <span className="pill" style={{ fontSize: 11 }}>API</span>
              <span className="pill" style={{ fontSize: 11 }}>Webhook</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// Hero v2 — adds price anchor, sharper CTAs, risk-reversal microcopy.
const HeroV2 = () => {
  const { useState, useEffect, useMemo } = React;
  const [activeId, setActiveId] = useState(window.DOCS[0].id);
  const [phase, setPhase] = useState("done");
  const [revealed, setRevealed] = useState(8);
  const active = useMemo(() => window.DOCS.find((d) => d.id === activeId), [activeId]);

  useEffect(() => {
    setPhase("scan");
    setRevealed(0);
    const t1 = setTimeout(() => setPhase("extract"), 700);
    const ints = [];
    for (let i = 1; i <= active.fields.length; i++) {
      ints.push(setTimeout(() => setRevealed(i), 700 + i * 90));
    }
    const tend = setTimeout(() => setPhase("done"), 700 + active.fields.length * 90 + 200);
    return () => { clearTimeout(t1); clearTimeout(tend); ints.forEach(clearTimeout); };
  }, [activeId]);

  return (
    <section style={{ paddingTop: 40, paddingBottom: 88, background: "var(--bg-soft)" }}>
      <div className="container">
        <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center", marginBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 18, justifyContent: "center" }}>Healthcare document intake automation</div>
          <h1 style={{ marginBottom: 18 }}>
            Turn healthcare paperwork into{" "}
            <span className="hero-headline-accent" style={{ color: "var(--green-ink)", position: "relative", whiteSpace: "nowrap" }}>
              structured data
              <svg style={{ position: "absolute", left: 0, right: 0, bottom: -4, width: "100%" }} height="10" viewBox="0 0 400 10" preserveAspectRatio="none">
                <path d="M2,7 Q100,2 200,6 T398,5" stroke="var(--green)" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
              </svg>
            </span>.
          </h1>
          <p className="lede" style={{ margin: "0 auto 14px", fontSize: 18 }}>
            Reqscan reads faxes, scans, PDFs, and handwritten forms — then extracts the fields your team needs for intake, billing, referrals, and lab orders.
          </p>
          {/* Price anchor */}
          <div className="hero-price-anchor" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, padding: "8px 14px", background: "#fff", border: "1px solid var(--line)", borderRadius: 999, marginBottom: 22, fontSize: 13, color: "var(--ink-2)", maxWidth: "100%" }}>
            <span style={{ fontFamily: "var(--mono)", fontWeight: 600, color: "var(--green-ink)", whiteSpace: "nowrap" }}>From $0.04 / page</span>
            <span style={{ width: 4, height: 4, borderRadius: 4, background: "var(--ink-5)", flexShrink: 0 }}/>
            <span style={{ whiteSpace: "nowrap" }}>First 500 pages free</span>
            <span style={{ width: 4, height: 4, borderRadius: 4, background: "var(--ink-5)", flexShrink: 0 }}/>
            <span style={{ whiteSpace: "nowrap" }}>No implementation fee</span>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", justifyContent: "center" }}>
            <a href="contact.html" className="btn btn-green arrow">Request free trial</a>
            <a href="#examples" className="btn btn-ghost">See it on a sample</a>
          </div>
          {/* Risk reversal */}
          <div style={{ marginTop: 12, fontSize: 12, color: "var(--ink-4)" }}>
            No credit card · BAA on request · Cancel any time
          </div>
        </div>

        <div className="card" style={{ padding: 0, overflow: "hidden", boxShadow: "0 1px 0 rgba(12,20,16,0.04), 0 40px 80px -20px rgba(12,20,16,0.18)", borderRadius: 16 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px", borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="dot" style={{ background: "#e06a5e" }}/>
              <span className="dot" style={{ background: "#e0b75e" }}/>
              <span className="dot" style={{ background: "#7bbd86" }}/>
              <span className="mono text-4" style={{ marginLeft: 8 }}>app.reqscan.com / inbox</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 16, fontSize: 12, color: "var(--ink-4)" }}>
              <span>Today · 8 new</span>
              <span className="pill pill-green">All systems normal</span>
            </div>
          </div>

          <MobileTabs active={active} activeId={activeId} setActiveId={setActiveId} phase={phase} revealed={revealed}/>
          <div className="hero-3col" style={{ display: "grid", gridTemplateColumns: "320px 1fr 360px", minHeight: 580 }}>
            <div style={{ borderRight: "1px solid var(--line)", background: "#fcfcfb" }}>
              <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>Inbox</span>
                <span className="pill">{window.DOCS.length}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {window.DOCS.map((d) => {
                  const sel = d.id === activeId;
                  return (
                    <button key={d.id} onClick={() => setActiveId(d.id)} style={{
                      textAlign: "left", padding: "12px 14px", borderBottom: "1px solid var(--line)",
                      background: sel ? "var(--green-tint)" : "transparent",
                      borderLeft: sel ? "3px solid var(--green)" : "3px solid transparent",
                      cursor: "pointer", display: "flex", flexDirection: "column", gap: 4,
                    }}>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontSize: 13, fontWeight: 550 }}>{d.label}</span>
                        <span className="mono text-5" style={{ fontSize: 11 }}>{d.received}</span>
                      </div>
                      <div style={{ fontSize: 12, color: "var(--ink-4)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.sender}</div>
                      <div style={{ display: "flex", gap: 6, marginTop: 2 }}>
                        <span className={`pill ${d.pillClass}`} style={{ fontSize: 10.5, padding: "2px 7px" }}>{d.type}</span>
                        <span className="pill" style={{ fontSize: 10.5, padding: "2px 7px" }}>{d.pages}p</span>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>

            <div style={{ background: "var(--bg-soft)", padding: 24, display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
              <div style={{ position: "absolute", top: 14, left: 16, fontSize: 12, color: "var(--ink-4)", display: "flex", alignItems: "center", gap: 8 }}>
                <span className="mono">{active.id}.pdf</span><span>·</span><span>{active.summary}</span>
              </div>
              <div style={{
                width: 320, height: 420, background: "#fff",
                boxShadow: "0 1px 0 rgba(0,0,0,0.05), 0 24px 48px rgba(12,20,16,0.12)",
                borderRadius: 4, position: "relative", overflow: "hidden", transform: "rotate(-1deg)",
              }}>
                <window.DocLineup kind={active.preview} />
                {phase === "scan" && <div className="scan-beam" style={{ animation: "scanbeam 0.8s ease-in-out forwards" }}/>}
                <div style={{ position: "absolute", bottom: 8, left: 8, display: "flex", gap: 6 }}>
                  <span className="pill pill-green" style={{ fontSize: 10.5, padding: "2px 7px", background: "rgba(255,255,255,0.95)" }}>
                    <span className="dot dot-green"/> {(active.confidence * 100).toFixed(0)}% confidence
                  </span>
                </div>
              </div>
              <div style={{ position: "absolute", right: 16, top: 14, fontSize: 12, color: "var(--ink-4)" }} className="mono">pg 1 / {active.pages}</div>
              <div style={{ position: "absolute", bottom: 14, left: 24, right: 24, display: "flex", justifyContent: "center", gap: 8 }}>
                {[{ k: "scan", l: "Scanning" }, { k: "extract", l: "Extracting" }, { k: "done", l: "Reviewed" }].map((s) => {
                  const order = ["scan", "extract", "done"].indexOf(phase);
                  const here = ["scan", "extract", "done"].indexOf(s.k);
                  const act = here <= order;
                  return (
                    <span key={s.k} style={{
                      display: "inline-flex", alignItems: "center", gap: 6,
                      fontSize: 11, padding: "4px 10px", borderRadius: 999,
                      background: act ? "var(--green-soft)" : "#fff",
                      color: act ? "var(--green-ink)" : "var(--ink-4)",
                      border: `1px solid ${act ? "#cce8d5" : "var(--line)"}`,
                    }}>
                      <span className="dot" style={{ background: act ? "var(--green)" : "var(--ink-5)" }}/>{s.l}
                    </span>
                  );
                })}
              </div>
            </div>

            <div style={{ background: "#fff", display: "flex", flexDirection: "column" }}>
              <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>Extracted fields</span>
                <span className="mono text-4" style={{ fontSize: 11 }}>{active.fields.length} fields · JSON</span>
              </div>
              <div style={{ flex: 1, overflow: "hidden" }}>
                {active.fields.map(([k, v], i) => {
                  const shown = i < revealed;
                  return (
                    <div key={k} className="field-row" style={{ opacity: shown ? 1 : 0, transform: shown ? "translateY(0)" : "translateY(4px)", transition: "opacity .2s ease, transform .2s ease" }}>
                      <span className="field-key">{k}</span>
                      <span className="field-val" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{v}</span>
                      <window.Icons.Check size={13} stroke={2.4} style={{ color: "var(--green)" }} />
                    </div>
                  );
                })}
              </div>
              {active.flags.length > 0 && (
                <div style={{ padding: "10px 14px", background: "#fef9ef", borderTop: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 6 }}>
                  {active.flags.map((f) => (
                    <div key={f.key} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--amber)" }}>
                      <window.Icons.Flag size={13} stroke={2}/>{f.text}
                    </div>
                  ))}
                </div>
              )}
              <div style={{ padding: "12px 14px", borderTop: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--ink-4)", fontWeight: 600 }}>Routed to</div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 500 }}>
                  <window.Icons.Route size={14} />{active.destination}
                </div>
                <div style={{ display: "flex", gap: 8, marginTop: 4 }}>
                  <span className="pill" style={{ fontSize: 11 }}>CSV</span>
                  <span className="pill" style={{ fontSize: 11 }}>JSON</span>
                  <span className="pill" style={{ fontSize: 11 }}>API</span>
                  <span className="pill" style={{ fontSize: 11 }}>Webhook</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.HeroV2 = HeroV2;