// 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, fontSize: "clamp(36px, 4.6vw, 58px)" }}>
            Turn healthcare paperwork into{" "}
            <span 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 style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 14px", background: "#fff", border: "1px solid var(--line)", borderRadius: 999, marginBottom: 22, fontSize: 13, color: "var(--ink-2)" }}>
            <span style={{ fontFamily: "var(--mono)", fontWeight: 600, color: "var(--green-ink)" }}>From $0.04 / page</span>
            <span style={{ width: 4, height: 4, borderRadius: 4, background: "var(--ink-5)" }}/>
            <span>First 500 pages free</span>
            <span style={{ width: 4, height: 4, borderRadius: 4, background: "var(--ink-5)" }}/>
            <span>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>

          <div 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;
