// Workflow examples — 8 doc types as cards. Hover reveals extracted fields.
const Examples = () => {
  const [hover, setHover] = React.useState(null);
  return (
    <section id="examples" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Document types</span>
          <h2>Built for the messy stuff your team actually receives.</h2>
          <p className="lede">Faxes, scans, PDFs, photos, handwritten forms. Reqscan recognizes the document, extracts the right fields for that type, and routes the result to the system where the work happens next.</p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {window.DOCS.map((d) => (
            <div key={d.id}
              onMouseEnter={() => setHover(d.id)}
              onMouseLeave={() => setHover(null)}
              className="card"
              style={{
                padding: 0, overflow: "hidden",
                position: "relative", display: "flex", flexDirection: "column",
                transition: "transform .15s ease, box-shadow .15s ease",
                transform: hover === d.id ? "translateY(-2px)" : "none",
                boxShadow: hover === d.id ? "var(--shadow)" : "var(--shadow-sm)",
                cursor: "default",
              }}>
              {/* Mini doc preview */}
              <div style={{ aspectRatio: "4 / 3", background: "var(--bg-soft)", borderBottom: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", inset: 18, transform: hover === d.id ? "translateX(-46%) scale(0.95) rotate(-2deg)" : "rotate(-1.5deg)", transition: "transform .35s ease", boxShadow: "var(--shadow)", borderRadius: 4, overflow: "hidden", background: "#fff" }}>
                  <window.DocLineup kind={d.preview} />
                </div>
                {/* Extracted fields slide-in */}
                <div style={{ position: "absolute", inset: 18, left: "52%", background: "#fff", border: "1px solid var(--line)", borderRadius: 6, padding: "8px 10px", overflow: "hidden", opacity: hover === d.id ? 1 : 0, transform: hover === d.id ? "translateX(0)" : "translateX(8%)", transition: "opacity .25s ease, transform .35s ease", display: "flex", flexDirection: "column", gap: 4 }}>
                  <div className="mono text-4" style={{ fontSize: 10 }}>extracted.json</div>
                  {d.fields.slice(0, 5).map(([k, v]) => (
                    <div key={k} style={{ fontSize: 10.5, lineHeight: 1.3, fontFamily: "var(--mono)" }}>
                      <span style={{ color: "var(--ink-4)" }}>{k}: </span>
                      <span style={{ color: "var(--ink)" }}>{v.length > 16 ? v.slice(0, 14) + "…" : v}</span>
                    </div>
                  ))}
                  <div className="mono text-5" style={{ fontSize: 10, marginTop: 2 }}>+ {d.fields.length - 5} more</div>
                </div>
              </div>
              <div style={{ padding: "14px 16px", display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontSize: 14.5, fontWeight: 600 }}>{d.label}</span>
                  <span className={`pill ${d.pillClass}`} style={{ fontSize: 10.5 }}>{d.type}</span>
                </div>
                <div style={{ fontSize: 12.5, color: "var(--ink-4)", lineHeight: 1.4 }}>
                  → {d.destination}
                </div>
              </div>
            </div>
          ))}
        </div>

        <p style={{ marginTop: 28, fontSize: 13, color: "var(--ink-4)", textAlign: "center" }}>
          Hover any card to peek at the structured output. Don't see your document? <a href="contact.html" style={{ color: "var(--green-ink)", textDecoration: "underline" }}>Tell us about it.</a>
        </p>
      </div>
    </section>
  );
};

window.Examples = Examples;