// How it works — Ingest, Extract, Review, Export. Each is a real-looking UI panel.
const HowItWorks = () => {
  const steps = [
    {
      n: "01", title: "Ingest", icon: "Upload", tone: "ingest",
      copy: "Drop a file, forward an email, point a fax line, plug in a scanner, or send to our API. Reqscan handles whatever your team already does.",
      panel: "ingest",
    },
    {
      n: "02", title: "Extract", icon: "Bolt", tone: "extract",
      copy: "Our model reads handwriting and printed text, then locates tables, checkboxes, and the key fields for that document type. Trained on physician scrawl.",
      panel: "extract",
    },
    {
      n: "03", title: "Review", icon: "Eye", tone: "review",
      copy: "Confidence scores per field. Missing or unreadable fields are flagged for a one-click correction. Auto-approve clean documents, queue the rest.",
      panel: "review",
    },
    {
      n: "04", title: "Deliver", icon: "Route", tone: "deliver",
      copy: "Reqscan returns clean structured data — CSV, JSON, REST, or webhook. You decide where it lands. Most teams hand it off to their existing integration layer.",
      panel: "export",
    },
  ];

  return (
    <section id="how" className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How it works</span>
          <h2>Four stages, one pipeline.</h2>
          <p className="lede">Each stage maps to something your team is already doing manually. Reqscan replaces the typing, not the judgement.</p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          {steps.map((s) => {
            const I = window.Icons[s.icon];
            return (
              <div key={s.n} className="card" style={{ padding: 0, overflow: "hidden" }}>
                <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--line)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
                    <span className="mono text-4" style={{ fontSize: 12, letterSpacing: "0.06em" }}>{s.n}</span>
                    <span style={{ width: 32, height: 32, borderRadius: 8, background: `var(--i-${s.tone}-bg)`, color: `var(--i-${s.tone}-fg)`, display: "grid", placeItems: "center" }}>
                      <I size={16} stroke={2}/>
                    </span>
                    <h3 style={{ fontSize: 22, letterSpacing: "-0.02em" }}>{s.title}</h3>
                  </div>
                  <p style={{ fontSize: 14.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{s.copy}</p>
                </div>
                <div style={{ padding: 20, background: "#fcfcfb" }}>
                  <StepPanel kind={s.panel}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const StepPanel = ({ kind }) => {
  if (kind === "ingest") {
    const sources = [
      { i: "Upload", l: "Drag & drop", s: "PDF, JPG, TIFF, HEIC" },
      { i: "Mail", l: "Forward email", s: "intake@your-org.reqscan.com" },
      { i: "Fax", l: "Dedicated fax line", s: "+1 305 555 0114" },
      { i: "Scanner", l: "Watched folder", s: "SMB / S3 / Drive" },
      { i: "Api", l: "POST /v1/documents", s: "Webhook on completion" },
    ];
    return (
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        {sources.map((s) => {
          const I = window.Icons[s.i];
          return (
            <div key={s.l} className="card" style={{ padding: "10px 12px", display: "flex", gap: 10, alignItems: "center", background: "#fff" }}>
              <span style={{ width: 28, height: 28, background: "var(--bg-tint)", borderRadius: 6, display: "grid", placeItems: "center", color: "var(--ink-2)" }}><I size={15}/></span>
              <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
                <span style={{ fontSize: 13, fontWeight: 550 }}>{s.l}</span>
                <span className="mono text-4" style={{ fontSize: 11 }}>{s.s}</span>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  if (kind === "extract") {
    return (
      <div className="card" style={{ background: "#fff", padding: 0, overflow: "hidden" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontSize: 12 }}>
          <span style={{ fontWeight: 600 }}>Token map · pg 2</span>
          <span className="text-4 mono">conf 0.94</span>
        </div>
        <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 6 }}>
          {[
            { k: "PATIENT_NAME", v: "Maria Alvarez", c: 0.98 },
            { k: "DOB", v: "1978-04-12", c: 0.97 },
            { k: "TESTS", v: "[CBC, CMP, TSH]", c: 0.94 },
            { k: "ICD10", v: "E11.9, R73.09", c: 0.91 },
            { k: "NPI", v: "1487291023", c: 0.93 },
          ].map((f) => (
            <div key={f.k} style={{ display: "grid", gridTemplateColumns: "120px 1fr 60px", gap: 10, alignItems: "center", fontSize: 12 }}>
              <span className="mono text-4">{f.k}</span>
              <span className="mono">{f.v}</span>
              <span style={{ height: 5, background: "var(--bg-tint)", borderRadius: 999, position: "relative", overflow: "hidden" }}>
                <span style={{ position: "absolute", inset: 0, width: `${f.c * 100}%`, background: "var(--green)", borderRadius: 999 }}/>
              </span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === "review") {
    return (
      <div className="card" style={{ background: "#fff", padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ display: "flex", gap: 8 }}>
          <span className="pill pill-green"><window.Icons.Check size={11} stroke={2.6}/> 6 auto-approved</span>
          <span className="pill pill-amber"><window.Icons.Flag size={11} stroke={2}/> 2 flagged</span>
        </div>
        <div style={{ border: "1px solid var(--line-strong)", borderRadius: 8, padding: 10, background: "#fef9ef" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
            <span style={{ fontSize: 12.5, fontWeight: 600 }}>Field flagged · weight</span>
            <span className="mono text-4" style={{ fontSize: 11 }}>conf 0.41</span>
          </div>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 8 }}>Looks like "1B5 lbs" — verify or correct.</div>
          <div style={{ display: "flex", gap: 6 }}>
            <button className="btn btn-sm" style={{ background: "var(--green)", color: "#fff" }}>Set to 185 lbs</button>
            <button className="btn btn-sm btn-ghost">Skip</button>
            <button className="btn btn-sm btn-ghost">View page</button>
          </div>
        </div>
      </div>
    );
  }

  if (kind === "export") {
    const formats = [
      { l: "JSON", s: "Per-document, per-field, with confidence" },
      { l: "CSV", s: "Bulk download from the dashboard" },
      { l: "Webhook", s: "POST on completion to your endpoint" },
      { l: "REST API", s: "GET /v1/documents/{id}" },
    ];
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <div className="card" style={{ background: "#fff", padding: 0, overflow: "hidden" }}>
          {formats.map((d, i) => (
            <div key={d.l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "10px 12px", borderBottom: i < formats.length - 1 ? "1px solid var(--line)" : 0 }}>
              <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{d.l}</span>
                <span className="text-4" style={{ fontSize: 11.5 }}>{d.s}</span>
              </div>
              <window.Icons.Check size={14} stroke={2.4} style={{ color: "var(--green)" }} />
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11.5, color: "var(--ink-4)", lineHeight: 1.45, padding: "4px 4px 0" }}>
          Reqscan stops at structured data. Your team — or a Reqscan partner — wires it into Epic, Athena, your LIMS, or whatever sits downstream.
        </div>
      </div>
    );
  }
  return null;
};

window.HowItWorks = HowItWorks;