/* Landing page sections */

function Hero() {
  return (
    <section style={{
      position: "relative",
      borderBottom: "1px solid var(--ink-200)",
      background: "radial-gradient(1100px 600px at 12% -10%, rgba(13,148,136,.10), transparent 60%), radial-gradient(900px 500px at 105% 110%, rgba(124,58,237,.06), transparent 60%), white",
      overflow: "hidden",
    }}>
      {/* subtle grid */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px)",
        backgroundSize: "56px 56px",
        maskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%)",
      }} />

      <div className="hero-grid" style={{
        position: "relative", maxWidth: 1320, margin: "0 auto",
        padding: "92px 24px 80px",
      }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "5px 12px 5px 5px",
                        borderRadius: 999, background: "white", color: "var(--ink-700)",
                        fontSize: 12, fontWeight: 500, border: "1px solid var(--ink-200)",
                        boxShadow: "var(--shadow-sm)" }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 4,
              padding: "3px 8px", borderRadius: 999,
              background: "var(--brand-600)", color: "white",
              fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".06em", fontWeight: 600,
            }}>
              v3.2
            </span>
            <span>The bioinformatics workspace from <strong style={{ color: "var(--ink-900)" }}>ConductScience</strong></span>
          </div>

          <h1 style={{
            margin: "22px 0 0",
            fontSize: "clamp(44px, 5.4vw, 76px)",
            lineHeight: 0.98,
            letterSpacing: "-0.035em",
            fontWeight: 600,
            color: "var(--ink-900)",
            textWrap: "balance",
          }}>
            The study record,
            <br/>
            <span style={{
              background: "linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 45%, #0e7490 100%)",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
              color: "transparent",
              fontStyle: "italic",
              fontFamily: "'Iowan Old Style', Georgia, serif",
              fontWeight: 500,
              letterSpacing: "-0.025em",
            }}>finally joined.</span>
          </h1>

          <p style={{
            margin: "26px 0 0",
            fontSize: 19, lineHeight: 1.5, color: "var(--ink-600)",
            maxWidth: 540, textWrap: "pretty",
          }}>
            Drop in your qPCR runs, ELISA plates, sample maps, and behavior exports.
            Get one analysis-ready table back — with provenance, missingness checks,
            and a methods draft you can paste straight into the paper.
          </p>

          <div style={{ marginTop: 32, display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
            <a href="#" className="btn btn-primary"
               style={{ padding: "12px 18px", fontSize: 15, boxShadow: "0 6px 20px -6px rgba(13,148,136,.45)" }}>
              Start free
              <ArrowRight />
            </a>
            <a href="/demo/" className="btn btn-ghost" style={{ padding: "12px 18px", fontSize: 15 }}>
              Open the workspace →
            </a>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: "var(--ink-500)", display: "flex", alignItems: "center", gap: 8 }}>
            <span className="dot" style={{ color: "var(--ok)" }}></span>
            Free for small labs · SOC 2 Type II · your data stays yours
          </div>
        </div>

        <HeroVisual />
      </div>

      <HeroMarquee />
    </section>
  );
}

function HeroMarquee() {
  const items = [
    "Trusted by 1,200+ research institutions",
    "Cited in 1,646+ peer-reviewed papers",
    "Harvard · Stanford · MIT · Yale · Johns Hopkins",
    "qPCR · RDML · IL-6 / TNFα fold change",
    "ELISA · pg/mL · multiplex panel",
    "Subject × timepoint join · 108 rows",
    "Methods + provenance · reproducible from file hashes",
    "ConductVision behavior · native attach",
    "ConductSignal physiology · connected",
  ];
  return (
    <div style={{
      position: "relative",
      borderTop: "1px solid var(--ink-200)",
      background: "rgba(255,255,255,.6)",
      backdropFilter: "blur(6px)",
      WebkitBackdropFilter: "blur(6px)",
      padding: "14px 0",
      overflow: "hidden",
      maskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)",
      WebkitMaskImage: "linear-gradient(90deg, transparent, black 8%, black 92%, transparent)",
    }}>
      <div style={{
        display: "flex", gap: 40, whiteSpace: "nowrap",
        animation: "cb-marquee 48s linear infinite",
        width: "max-content",
      }}>
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} className="mono" style={{ fontSize: 12, color: "var(--ink-500)", letterSpacing: ".03em" }}>
            <span style={{ color: "var(--brand-600)", marginRight: 12 }}>◆</span>{t}
          </span>
        ))}
      </div>
    </div>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual" style={{ position: "relative", height: 560 }}>
      {/* Glow underneath */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: "10% -10% 10% -10%",
        background: "radial-gradient(closest-side, rgba(13,148,136,.18), transparent 70%)",
        filter: "blur(20px)", pointerEvents: "none",
      }} />

      {/* Connecting lines SVG */}
      <svg viewBox="0 0 600 560" preserveAspectRatio="none" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 1,
      }}>
        <defs>
          <linearGradient id="cbflow" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#0d9488" stopOpacity="0.0"/>
            <stop offset="40%" stopColor="#0d9488" stopOpacity="0.55"/>
            <stop offset="100%" stopColor="#0d9488" stopOpacity="0.9"/>
          </linearGradient>
        </defs>
        {[
          "M 60 110 C 240 110, 280 280, 440 280",
          "M 60 200 C 240 200, 280 280, 440 280",
          "M 60 320 C 240 320, 280 280, 440 280",
          "M 60 430 C 240 430, 280 280, 440 280",
        ].map((d, i) => (
          <path key={i} d={d} fill="none" stroke="url(#cbflow)" strokeWidth="1.5" strokeDasharray="4 4">
            <animate attributeName="stroke-dashoffset" from="0" to="-16" dur={`${1.4 + i * 0.15}s`} repeatCount="indefinite" />
          </path>
        ))}
      </svg>

      {/* Left column — floating file cards */}
      <FloatingFileCard
        style={{ top: 70, left: -16, animationDelay: "0s" }}
        source="bench" sourceLabel="bench · RDML"
        name="qpcr_run_0524.rdml"
        rows={[
          ["A1 · M01-BL", "Il6",   "Ct 23.42"],
          ["A2 · M01-BL", "Tnf",   "Ct 24.18"],
          ["A4 · M01-BL", "Gapdh", "Ct 18.92"],
        ]}
        accent="var(--brand-600)"
      />
      <FloatingFileCard
        style={{ top: 178, left: 4, animationDelay: "0.4s" }}
        source="bench" sourceLabel="bench · ELISA"
        name="il6_tnfa_elisa_plate.csv"
        rows={[
          ["M01-BL", "IL-6", "12.4"],
          ["M13-24H", "IL-6", "189.2"],
          ["M25-24H", "IL-6", "67.4"],
        ]}
        accent="var(--brand-600)"
      />
      <FloatingFileCard
        style={{ top: 286, left: -16, animationDelay: "0.8s" }}
        source="bench" sourceLabel="bench · map"
        name="sample_map.csv"
        rows={[
          ["M01 · qPCR · BL", "ok"],
          ["M02 · qPCR · —", "warn"],
          ["M13 · ELISA · 24H", "ok"],
        ]}
        accent="var(--brand-600)"
        compact
      />
      <FloatingFileCard
        style={{ top: 396, left: 4, animationDelay: "1.2s" }}
        source="vision" sourceLabel="vision · native"
        name="open_field_summary.csv"
        rows={[
          ["M13 · 24h", "1,842 cm"],
          ["M14 · 24h", "1,671 cm"],
          ["M19 · 24h", "1,798 cm"],
        ]}
        accent="var(--src-vision)"
        compact
      />

      {/* Right — central joined study record card */}
      <div className="hero-record" style={{
        position: "absolute", top: 90, right: 0,
        width: 340,
        background: "white",
        border: "1px solid var(--ink-200)",
        borderRadius: 14,
        boxShadow: "0 30px 60px -20px rgba(15,23,42,.18), 0 12px 24px -12px rgba(13,148,136,.18)",
        overflow: "hidden",
        zIndex: 2,
        animation: "cb-rise 0.9s cubic-bezier(.2,.7,.2,1) both",
      }}>
        {/* Window chrome */}
        <div style={{
          padding: "10px 14px", background: "var(--ink-50)",
          borderBottom: "1px solid var(--ink-200)",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <span style={{ display: "flex", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: "#e57373" }} />
            <span style={{ width: 8, height: 8, borderRadius: 99, background: "#f6c454" }} />
            <span style={{ width: 8, height: 8, borderRadius: 99, background: "#85c887" }} />
          </span>
          <span className="mono" style={{ fontSize: 10.5, color: "var(--ink-600)" }}>study · STD-2026-014</span>
          <span className="chip chip-bench" style={{ marginLeft: "auto", padding: "1px 7px", fontSize: 9.5 }}>4 sources</span>
        </div>

        {/* Title block */}
        <div style={{ padding: "16px 18px 12px" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--brand-700)", letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600 }}>
            Joined study record
          </div>
          <div style={{ marginTop: 6, fontSize: 14, fontWeight: 600, color: "var(--ink-900)", lineHeight: 1.3 }}>
            TBI inflammatory markers cohort
          </div>
          <div className="mono" style={{ marginTop: 3, fontSize: 10.5, color: "var(--ink-500)" }}>
            36 mice · 3 groups · 3 timepoints · 108 rows
          </div>
        </div>

        {/* Mini joined table */}
        <div style={{ borderTop: "1px solid var(--ink-100)" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-mono)", fontSize: 10.5 }}>
            <thead>
              <tr style={{ background: "var(--ink-50)" }}>
                <th style={{ textAlign: "left", padding: "5px 12px", fontWeight: 600, color: "var(--ink-500)", letterSpacing: ".06em", textTransform: "uppercase", fontSize: 9 }}>sub</th>
                <th style={{ textAlign: "left", padding: "5px 4px", fontWeight: 600, color: "var(--src-vision)", letterSpacing: ".06em", textTransform: "uppercase", fontSize: 9 }}>dist</th>
                <th style={{ textAlign: "left", padding: "5px 4px", fontWeight: 600, color: "var(--brand-700)", letterSpacing: ".06em", textTransform: "uppercase", fontSize: 9 }}>qpcr</th>
                <th style={{ textAlign: "left", padding: "5px 12px", fontWeight: 600, color: "var(--brand-700)", letterSpacing: ".06em", textTransform: "uppercase", fontSize: 9 }}>elisa</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["M01", "—",     "0.94×", "12.4"],
                ["M02", "—",     "1.06×", "11.8"],
                ["M13", "1842",  "5.21×", "189.2"],
                ["M14", "1671",  "4.87×", "203.7"],
                ["M19", "1798",  "4.32×", "172.4"],
                ["M25", "2491",  "2.41×", "67.4"],
                ["M26", "2588",  "2.18×", "58.1"],
              ].map((r, i) => (
                <tr key={i} style={{ borderTop: "1px solid var(--ink-100)" }}>
                  <td style={{ padding: "5px 12px", color: "var(--ink-900)", fontWeight: 500 }}>{r[0]}</td>
                  <td style={{ padding: "5px 4px", color: r[1] === "—" ? "var(--ink-300)" : "var(--src-vision)" }}>{r[1]}</td>
                  <td style={{ padding: "5px 4px", color: "var(--brand-700)" }}>{r[2]}</td>
                  <td style={{ padding: "5px 12px", color: "var(--brand-700)" }}>{r[3]}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Readiness footer */}
        <div style={{ padding: "12px 18px", borderTop: "1px solid var(--ink-200)", background: "var(--ink-50)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
            <span style={{ fontSize: 10.5, color: "var(--ink-500)", letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>Readiness</span>
            <span className="mono" style={{ fontSize: 11, fontWeight: 600, color: "var(--brand-700)" }}>83 / 100</span>
          </div>
          <div style={{ height: 4, background: "var(--ink-100)", borderRadius: 99, marginTop: 6, overflow: "hidden" }}>
            <div style={{ width: "83%", height: "100%", background: "var(--brand-500)",
                          animation: "cb-grow 1.4s cubic-bezier(.2,.7,.2,1) 0.3s both" }} />
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 8, fontSize: 10.5, color: "var(--ink-600)" }}>
            <span><span className="dot" style={{ color: "var(--ok)" }}></span> 5 ok</span>
            <span><span className="dot" style={{ color: "var(--warn)" }}></span> 2 warn</span>
            <span><span className="dot" style={{ color: "var(--block)" }}></span> 0 block</span>
          </div>
        </div>
      </div>

      {/* Floating accent pill — "joined live" */}
      <div style={{
        position: "absolute", right: -8, top: 50, zIndex: 3,
        padding: "5px 10px", borderRadius: 999,
        background: "var(--ink-900)", color: "white",
        fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: ".06em", fontWeight: 500,
        boxShadow: "0 6px 16px -4px rgba(15,23,42,.3)",
        display: "inline-flex", alignItems: "center", gap: 6,
        animation: "cb-rise 0.9s cubic-bezier(.2,.7,.2,1) 0.3s both",
      }}>
        <span className="dot" style={{ color: "var(--brand-400)", background: "var(--brand-400)",
                                       boxShadow: "0 0 0 0 rgba(45,212,191,.7)",
                                       animation: "cb-pulse 1.6s ease-in-out infinite" }} />
        joined · 09:42
      </div>
    </div>
  );
}

function FloatingFileCard({ style, source, sourceLabel, name, rows, accent, compact }) {
  return (
    <div style={{
      position: "absolute",
      width: compact ? 196 : 208,
      background: "white",
      border: "1px solid var(--ink-200)",
      borderRadius: 10,
      boxShadow: "0 14px 28px -14px rgba(15,23,42,.18), 0 4px 10px -4px rgba(15,23,42,.06)",
      zIndex: 2,
      animation: `cb-rise 0.9s cubic-bezier(.2,.7,.2,1) both, cb-bob 6s ease-in-out infinite`,
      ...style,
    }}>
      <div style={{ padding: "8px 12px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8,
                    borderBottom: "1px solid var(--ink-100)" }}>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-900)", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {name}
        </span>
        <span className={`chip chip-${source}`} style={{ flexShrink: 0, padding: "1px 6px", fontSize: 9.5 }}>
          {sourceLabel.split("·")[0].trim()}
        </span>
      </div>
      <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-mono)", fontSize: 10 }}>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} style={{ borderTop: i === 0 ? "none" : "1px solid var(--ink-100)" }}>
              {r.map((v, j) => (
                <td key={j} style={{
                  padding: "5px 12px",
                  color: j === 0 ? "var(--ink-700)" : j === r.length - 1 ? accent : "var(--ink-600)",
                  textAlign: j === r.length - 1 ? "right" : "left",
                  whiteSpace: "nowrap",
                }}>{v}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function GroupChip({ group }) {
  const style = group === "Sham"
    ? { bg: "var(--ink-100)", color: "var(--ink-700)" }
    : group === "TBI"
    ? { bg: "var(--block-bg)", color: "var(--block)" }
    : { bg: "var(--src-bench-bg)", color: "var(--brand-700)" };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", padding: "2px 8px", borderRadius: 4,
      fontSize: 11.5, fontWeight: 500, background: style.bg, color: style.color,
    }}>{group}</span>
  );
}

function FileChip({ name, source }) {
  const cls = source === "vision" ? "chip-vision" : source === "signal" ? "chip-signal" : "chip-bench";
  const label = source === "vision" ? "vision" : source === "signal" ? "signal" : "bench";
  return (
    <span className={`chip ${cls}`} style={{ padding: "4px 10px", fontSize: 11.5 }}>
      <FileIcon /> {name}
      <span style={{ opacity: .6 }}>·</span> {label}
    </span>
  );
}

function StatBar() {
  const stats = [
    ["1,200+", "research institutions"],
    ["1,646+", "peer-reviewed citations"],
    ["800+", "universities"],
    ["50+", "countries"],
    ["10+ yrs", "operating ConductScience"],
  ];
  return (
    <section style={{ borderBottom: "1px solid var(--ink-200)", background: "var(--ink-50)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "18px 24px",
                    display: "grid", gridTemplateColumns: `repeat(${stats.length}, 1fr)`, gap: 0 }}>
        {stats.map(([v, l], i) => (
          <div key={l} style={{
            padding: "8px 24px",
            borderLeft: i === 0 ? "none" : "1px solid var(--ink-200)",
          }}>
            <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: "var(--ink-900)", letterSpacing: "-0.01em" }}>{v}</div>
            <div style={{ fontSize: 12, color: "var(--ink-500)", marginTop: 2, letterSpacing: ".02em" }}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      n: "01", title: "Drop in your files",
      body: "RDML, plate-reader CSV, sample map, behavior summary. Native ConductVision and ConductSignal attach coming.",
      icon: <IconFiles />,
    },
    {
      n: "02", title: "ConductBench joins them",
      body: "On subject_id × timepoint. 108 samples · 4 files · 3 timepoints fall into one table with source columns.",
      icon: <IconJoin />,
    },
    {
      n: "03", title: "Readiness checks fire",
      body: "Missing timepoints, missing sex, mismatched units, unattached references — all visible before you analyze.",
      icon: <IconCheck2 />,
    },
    {
      n: "04", title: "Export joined record",
      body: "Methods text, joined endpoint table, group summary, file provenance. Reproducible from file hashes.",
      icon: <IconExport />,
    },
  ];
  return (
    <section style={{ padding: "80px 0 60px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 24px" }}>
        <SectionTitle eyebrow="How it works" title="From scattered files to one study record" sub="Four steps, end to end — no scripts to maintain, no spreadsheet acrobatics." />
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {steps.map(s => (
            <div key={s.n} className="card" style={{ padding: 22 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: 36, height: 36,
                              borderRadius: 8, background: "var(--brand-50)", color: "var(--brand-700)" }}>
                  {s.icon}
                </div>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-400)" }}>{s.n}</div>
              </div>
              <h3 style={{ margin: "18px 0 0", fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>{s.title}</h3>
              <p style={{ margin: "8px 0 0", fontSize: 13.5, lineHeight: 1.55, color: "var(--ink-600)" }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DemoPreview() {
  return (
    <section style={{ padding: "20px 0 80px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 24px" }}>
        <SectionTitle
          eyebrow="Interactive demo"
          title="Open a real study in your browser"
          sub={<>One coherent study — TBI cohort, behavior + qPCR + ELISA — loaded with no signup so you can poke around. Same workspace your team uses on a Monday morning.</>}
        />

        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 24, alignItems: "stretch" }}>
          <div className="panel" style={{ padding: 22 }}>
            <span className="chip chip-bench">study overview</span>
            <h3 style={{ margin: "14px 0 0", fontSize: 19, fontWeight: 600, color: "var(--ink-900)", lineHeight: 1.3 }}>
              {DEMO_STUDY.title}
            </h3>
            <dl style={{ margin: "16px 0 0", display: "grid", gridTemplateColumns: "max-content 1fr", gap: "8px 16px", fontSize: 13 }}>
              {[
                ["Study ID", <span className="mono">{DEMO_STUDY.id}</span>],
                ["Species", DEMO_STUDY.species],
                ["Cohort", `${DEMO_STUDY.cohortSize} mice across ${DEMO_STUDY.groups.length} groups`],
                ["Assays", DEMO_STUDY.assayTypes.join(" · ")],
                ["Status", <span className="chip chip-warn" style={{ padding: "2px 8px" }}>{DEMO_STUDY.status}</span>],
                ["Owner", DEMO_STUDY.pi],
              ].map(([k, v]) => (
                <React.Fragment key={k}>
                  <dt style={{ color: "var(--ink-500)" }}>{k}</dt>
                  <dd style={{ margin: 0, color: "var(--ink-800)" }}>{v}</dd>
                </React.Fragment>
              ))}
            </dl>
            <div style={{ marginTop: 22 }}>
              <a href="/demo/" className="btn btn-primary" style={{ width: "100%" }}>
                Open this study in the workspace
                <ArrowRight />
              </a>
            </div>
            <div className="mono" style={{ marginTop: 12, fontSize: 11, color: "var(--ink-500)", textAlign: "center" }}>
              loads instantly · no signup · synthetic data
            </div>
          </div>

          {/* Readiness panel preview */}
          <div className="panel">
            <div className="panel-head">
              <h3>Metadata readiness</h3>
              <span className="mono" style={{ fontSize: 11, color: "var(--ink-500)" }}>8 checks · refreshed 09:42</span>
            </div>
            <div style={{ padding: "4px 0" }}>
              {DEMO_READINESS.slice(0, 5).map((r, i) => (
                <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "12px 16px",
                                       borderTop: i === 0 ? "none" : "1px solid var(--ink-100)" }}>
                  <SeverityIcon severity={r.severity} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--ink-900)" }}>{r.label}</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-600)", marginTop: 2, lineHeight: 1.5 }}>{r.detail}</div>
                  </div>
                  {r.file && <span className="chip" style={{ flexShrink: 0 }}>{r.file}</span>}
                </div>
              ))}
            </div>
            <div style={{ padding: "12px 16px", borderTop: "1px solid var(--ink-200)", background: "var(--ink-50)",
                          display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12.5, color: "var(--ink-600)" }}>
              <span>+ 3 more checks in the workspace</span>
              <a href="/demo/#readiness" className="btn-link" style={{ fontSize: 12.5 }}>See all checks →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Workflows() {
  return (
    <section id="workflows" style={{ padding: "20px 0 80px", borderTop: "1px solid var(--ink-200)", background: "var(--ink-50)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "60px 24px 0" }}>
        <SectionTitle
          eyebrow="Workflows"
          title="Two workflows. One study record."
          sub="Drop your assay files in. Drop your behavior exports in. The joined-on-subject record reviewers actually want falls out the other side."
        />

        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 20 }}>
          <WorkflowCard
            id="workflow-qpcr"
            title="qPCR & ELISA study record"
            status="Live"
            statusVariant="ok"
            inputs={[
              ["qpcr_run_0524.rdml",       "RDML · 4 plates · IL-6, TNFα, GAPDH"],
              ["il6_tnfa_elisa_plate.csv", "CSV · IL-6 + TNFα · pg/mL"],
              ["sample_map.csv",           "CSV · subject ↔ sample ↔ assay"],
            ]}
            outputs={[
              "Joined endpoint table (subject × timepoint)",
              "Fold-change vs. sham baseline (2^−ΔΔCt)",
              "Group summary (mean ± SEM)",
              "Methods + provenance text",
            ]}
            problem="Bench scientists shoulder the join. Sample maps don't line up with qPCR wells. Units are implicit. Two missing timepoints kill a publication figure."
          />
          <WorkflowCard
            id="workflow-behavior"
            title="Behavior + assay record"
            status="Live · ConductVision + ConductSignal"
            statusVariant="ok"
            inputs={[
              ["open_field_summary.csv", "CSV or native ConductVision attach"],
              ["eeg_features.parquet",    "ConductSignal artifact · spectral features"],
              ["… your bench assays",     "qPCR / ELISA / IHC / sequencing"],
            ]}
            outputs={[
              "Joined behavior × molecular row per subject",
              "Per-subject phenotype panel",
              "Cross-modality correlation",
              "Reproducible methods across modalities",
            ]}
            problem="Behavior, signal, and bench assays each live in their own tool. The joined-on-subject table is what reviewers actually want."
          />
        </div>
      </div>
    </section>
  );
}

function WorkflowCard({ id, title, status, statusVariant, inputs, outputs, problem }) {
  const chip = statusVariant === "ok" ? "chip-ok" : statusVariant === "vision" ? "chip-vision" : "chip-bench";
  return (
    <div id={id} className="panel" style={{ padding: 24 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
        <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: "var(--ink-900)" }}>{title}</h3>
        <span className={`chip ${chip}`}><span className="dot"></span>{status}</span>
      </div>

      <p style={{ marginTop: 12, fontSize: 13.5, color: "var(--ink-600)", lineHeight: 1.55 }}>
        <strong style={{ color: "var(--ink-800)" }}>Problem.</strong> {problem}
      </p>

      <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--ink-500)" }}>
            Inputs
          </div>
          <ul style={{ listStyle: "none", margin: "10px 0 0", padding: 0, display: "grid", gap: 8 }}>
            {inputs.map(([f, d]) => (
              <li key={f} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                <FileIcon style={{ marginTop: 3, color: "var(--ink-400)" }} />
                <div style={{ minWidth: 0 }}>
                  <div className="mono" style={{ fontSize: 12, color: "var(--ink-900)" }}>{f}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-500)" }}>{d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--ink-500)" }}>
            Outputs
          </div>
          <ul style={{ listStyle: "none", margin: "10px 0 0", padding: 0, display: "grid", gap: 8 }}>
            {outputs.map(o => (
              <li key={o} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 13, color: "var(--ink-800)" }}>
                <CheckIcon style={{ marginTop: 3, color: "var(--brand-600)" }} /> {o}
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div style={{ marginTop: 22, paddingTop: 16, borderTop: "1px solid var(--ink-100)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="/demo/" className="btn btn-ghost btn-sm">Open in workspace →</a>
        <span className="mono" style={{ fontSize: 11, color: "var(--ink-500)" }}>included on every plan</span>
      </div>
    </div>
  );
}

function Integrations() {
  const items = [
    {
      name: "ConductVision",
      role: "Phenotype source",
      desc: "Behavior sessions attach automatically to subject IDs. Open field, fear conditioning, social, novel object.",
      hue: "vision",
      status: "Native",
    },
    {
      name: "ConductSignal",
      role: "Physiology source",
      desc: "EEG, EMG, and fiber-photometry analyses attach as Research Artifacts. Joined on subject × timepoint.",
      hue: "signal",
      status: "Native",
    },
    {
      name: "ConductScience account",
      role: "Identity & ownership",
      desc: "One account layer across the platform — SSO, role-based access, audit trail.",
      hue: "info",
      status: "Connected",
    },
    {
      name: "qPCR / ELISA tools",
      role: "Assay sources",
      desc: "ConductScience instruments and free tools publish runs directly to your studies.",
      hue: "bench",
      status: "Connected",
    },
  ];
  return (
    <section style={{ padding: "80px 0" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 24px" }}>
        <SectionTitle
          eyebrow="The platform"
          title="ConductBench sits at the center of the research stack"
          sub={<>Every other ConductScience tool publishes into the study record. One subject ID across behavior, physiology, and bench assays.</>}
        />
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {items.map(i => (
            <div key={i.name} className="panel" style={{ padding: 20 }}>
              <span className={`chip chip-${i.hue}`}>{i.role}</span>
              <h3 style={{ margin: "14px 0 0", fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>{i.name}</h3>
              <p style={{ margin: "8px 0 0", fontSize: 13, color: "var(--ink-600)", lineHeight: 1.55 }}>{i.desc}</p>
              <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 6 }}>
                <span className="dot" style={{ color: "var(--ok)" }}></span>
                <span className="mono" style={{ fontSize: 11, color: "var(--ok)", letterSpacing: ".06em", fontWeight: 600 }}>
                  {i.status.toUpperCase()}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Customers() {
  const institutions = [
    "Harvard", "Stanford", "MIT", "Yale",
    "Johns Hopkins", "Columbia", "Princeton", "UC Berkeley",
    "Duke", "UCSF", "Oxford", "Caltech",
    "NIH", "FDA", "HHMI", "Broad Institute",
    "Allen Institute", "Mayo Clinic", "Baylor", "Karolinska",
    "AstraZeneca", "Regeneron", "Vertex", "Genentech",
  ];
  const journals = [
    "Nature", "Cell", "Neuron", "Science",
    "eLife", "Nature Neuroscience", "Cell Reports", "PNAS",
    "Science Advances", "Nature Communications", "Molecular Psychiatry", "JCI Insight",
  ];
  const credentials = [
    { name: "Harvard Innovation Labs", sub: "2021 Spring Venture cohort" },
    { name: "NIH Replication Prize", sub: "Submission partner · 2026" },
    { name: "BBB Accredited", sub: "A+ rating" },
    { name: "BAA Compliant", sub: "HIPAA-ready" },
  ];

  return (
    <section id="customers" style={{ padding: "96px 0", borderTop: "1px solid var(--ink-200)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 24px" }}>

        {/* Heading */}
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--brand-700)", letterSpacing: ".14em", textTransform: "uppercase", fontWeight: 600 }}>
            Trusted by world-class researchers
          </div>
          <h2 style={{ margin: "12px 0 0", fontSize: 38, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ink-900)", lineHeight: 1.1, textWrap: "balance" }}>
            ConductBench is built on the ConductScience research platform
          </h2>
          <p style={{ margin: "16px 0 0", fontSize: 17, color: "var(--ink-600)", lineHeight: 1.55 }}>
            For more than a decade, ConductScience has supplied the equipment, software, and infrastructure behind landmark behavioral and molecular studies. ConductBench inherits that track record.
          </p>
        </div>

        {/* The numbers — from conductscience.com */}
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
          background: "white",
          border: "1px solid var(--ink-200)",
          borderRadius: 14,
          overflow: "hidden",
          boxShadow: "var(--shadow-sm)",
        }}>
          {[
            ["1,200+", "research institutions"],
            ["1,646+", "peer-reviewed citations"],
            ["800+",   "universities"],
            ["50+",    "countries"],
            ["10+ yrs","ConductScience platform"],
          ].map(([v, l], i) => (
            <div key={l} style={{
              padding: "26px 22px",
              borderLeft: i === 0 ? "none" : "1px solid var(--ink-200)",
            }}>
              <div className="mono" style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em",
                                              color: "var(--ink-900)" }}>{v}</div>
              <div style={{ fontSize: 12.5, color: "var(--ink-500)", marginTop: 4, letterSpacing: ".01em" }}>{l}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 12, textAlign: "center" }} className="mono">
          <span style={{ fontSize: 11, color: "var(--ink-500)", letterSpacing: ".06em" }}>
            source · conductscience.com · figures current 2026 Q2
          </span>
        </div>

        {/* Institutions wall */}
        <div style={{ marginTop: 56 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-500)", letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, whiteSpace: "nowrap" }}>
              Institutions running ConductScience tools
            </div>
            <div style={{ flex: 1, height: 1, background: "var(--ink-200)" }} />
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 1,
                        background: "var(--ink-200)",
                        border: "1px solid var(--ink-200)", borderRadius: 12, overflow: "hidden" }}>
            {institutions.map(name => (
              <div key={name} style={{
                background: "white",
                padding: "20px 14px",
                display: "flex", alignItems: "center", justifyContent: "center",
                minHeight: 64,
              }}>
                <span style={{
                  fontSize: 14, fontWeight: 600,
                  color: "var(--ink-800)",
                  letterSpacing: "-0.01em",
                  fontFamily: "Georgia, 'Iowan Old Style', serif",
                  textAlign: "center", lineHeight: 1.2,
                }}>{name}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Citations + credentials */}
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20 }}>
          {/* Citations panel */}
          <div className="panel" style={{ padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: "var(--brand-700)", letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600 }}>
                  Cited in
                </div>
                <h3 style={{ margin: "6px 0 0", fontSize: 20, fontWeight: 600, color: "var(--ink-900)", letterSpacing: "-0.01em" }}>
                  1,646+ peer-reviewed papers
                </h3>
              </div>
              <a href="https://conductscience.com/citations/" target="_blank" rel="noopener" className="btn btn-ghost btn-sm">
                Browse citations →
              </a>
            </div>
            <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 8 }}>
              {journals.map(j => (
                <span key={j} style={{
                  padding: "6px 12px",
                  borderRadius: 999,
                  background: "var(--ink-50)",
                  border: "1px solid var(--ink-200)",
                  color: "var(--ink-800)",
                  fontSize: 12.5,
                  fontWeight: 500,
                  fontFamily: "Georgia, 'Iowan Old Style', serif",
                  letterSpacing: "-0.005em",
                }}>{j}</span>
              ))}
              <span style={{
                padding: "6px 12px", borderRadius: 999,
                background: "var(--brand-50)", border: "1px solid var(--brand-200)",
                color: "var(--brand-700)", fontSize: 12.5, fontWeight: 500,
              }}>… and more</span>
            </div>
            <div style={{ marginTop: 22, padding: "16px 18px", background: "var(--ink-50)",
                          borderRadius: 10, borderLeft: "3px solid var(--brand-500)" }}>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55,
                          color: "var(--ink-800)", fontFamily: "Georgia, 'Iowan Old Style', serif" }}>
                “Open field locomotor activity was recorded using ConductVision automated tracking software…”
              </p>
              <div className="mono" style={{ marginTop: 8, fontSize: 11.5, color: "var(--ink-500)" }}>
                eLife · 2024 · Garcia et al. <a href="https://conductscience.com/citations/" target="_blank" rel="noopener" style={{ color: "var(--brand-700)" }}>+ 1,645 more →</a>
              </div>
            </div>
          </div>

          {/* Credentials column */}
          <div style={{ display: "grid", gap: 12, alignContent: "start" }}>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-500)", letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 600 }}>
              Credentials & affiliations
            </div>
            {credentials.map(c => (
              <div key={c.name} className="panel" style={{ padding: "14px 16px", display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8,
                  background: "var(--brand-50)", color: "var(--brand-700)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0,
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 2l2.5 5.5 6 .5-4.5 4 1.5 6-5.5-3-5.5 3 1.5-6-4.5-4 6-.5z"/>
                  </svg>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink-900)" }}>{c.name}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-500)" }}>{c.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const tiers = [
    {
      name: "Free",
      price: "$0",
      cadence: "/ mo",
      desc: "For postdocs, grad students, and small projects.",
      cta: "Start free",
      featured: false,
      features: [
        "1 study · up to 50 samples",
        "qPCR / RDML + ELISA / CSV parsers",
        "Joined endpoint table",
        "Methods + provenance text",
        "Community support",
      ],
    },
    {
      name: "Lab",
      price: "$49",
      cadence: "/ seat / mo",
      desc: "For working bench labs running active studies.",
      cta: "Start 30-day trial",
      featured: true,
      features: [
        "Unlimited studies & samples",
        "Native ConductVision attach",
        "Native ConductSignal attach",
        "Group summary + statistics export",
        "PDF / CSV / parquet export",
        "Email support + onboarding",
      ],
    },
    {
      name: "Institution",
      price: "Contact",
      cadence: "sales",
      desc: "For institutes, pharma R&D, and multi-site programs.",
      cta: "Talk to sales",
      featured: false,
      features: [
        "Everything in Lab",
        "SSO + role-based access",
        "Audit trail + retention policy",
        "BAA · HIPAA-ready deployment",
        "Private cloud option",
        "Dedicated success engineer",
      ],
    },
  ];
  return (
    <section id="pricing" style={{ padding: "80px 0", background: "var(--ink-50)", borderTop: "1px solid var(--ink-200)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 24px" }}>
        <div style={{ textAlign: "center", maxWidth: 660, margin: "0 auto" }}>
          <div className="mono" style={{ fontSize: 11.5, color: "var(--brand-700)", letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600 }}>
            Pricing
          </div>
          <h2 style={{ margin: "10px 0 0", fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ink-900)" }}>
            Free for small labs. Honest for everyone else.
          </h2>
          <p style={{ margin: "12px 0 0", fontSize: 16, color: "var(--ink-600)", lineHeight: 1.55 }}>
            Per-seat for labs. Annual contracts for institutions. No usage caps that punish you for a big quarter.
          </p>
        </div>

        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {tiers.map(t => (
            <div key={t.name} style={{
              background: "white",
              border: t.featured ? "2px solid var(--brand-600)" : "1px solid var(--ink-200)",
              borderRadius: 14, padding: 26,
              position: "relative",
              boxShadow: t.featured ? "0 20px 50px -16px rgba(13,148,136,.25)" : "var(--shadow-sm)",
            }}>
              {t.featured && (
                <span style={{
                  position: "absolute", top: -12, right: 20,
                  padding: "4px 10px", borderRadius: 99,
                  background: "var(--brand-600)", color: "white",
                  fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: ".06em", fontWeight: 600,
                }}>MOST POPULAR</span>
              )}
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, color: "var(--ink-900)" }}>{t.name}</h3>
              </div>
              <div style={{ marginTop: 14, display: "flex", alignItems: "baseline", gap: 6 }}>
                <div style={{ fontSize: 38, fontWeight: 600, color: "var(--ink-900)", letterSpacing: "-0.02em" }}>{t.price}</div>
                <div style={{ fontSize: 13, color: "var(--ink-500)" }}>{t.cadence}</div>
              </div>
              <p style={{ margin: "6px 0 0", fontSize: 13, color: "var(--ink-600)", lineHeight: 1.5 }}>{t.desc}</p>
              <a href="#" className={t.featured ? "btn btn-primary" : "btn btn-ghost"}
                 style={{ marginTop: 18, width: "100%", padding: "10px 14px" }}>
                {t.cta}
              </a>
              <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "grid", gap: 9 }}>
                {t.features.map(f => (
                  <li key={f} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 13, color: "var(--ink-700)" }}>
                    <CheckIcon style={{ marginTop: 3, color: "var(--brand-600)", flexShrink: 0 }} />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 26, textAlign: "center", fontSize: 13, color: "var(--ink-600)" }}>
          Academic discount available · grant codes accepted ·
          <a href="#" style={{ color: "var(--brand-700)", fontWeight: 500 }}> compare all features →</a>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ padding: "96px 0", background: "var(--ink-900)", color: "white" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 24px", textAlign: "center" }}>
        <h2 style={{ margin: 0, fontSize: 48, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.05, textWrap: "balance", maxWidth: 760, marginInline: "auto" }}>
          The study record your reviewer asks for.<br/>
          <span style={{ color: "var(--brand-400)", fontStyle: "italic", fontFamily: "'Iowan Old Style', Georgia, serif", fontWeight: 500 }}>
            Twelve minutes after you upload.
          </span>
        </h2>
        <p style={{ margin: "20px auto 0", maxWidth: 540, fontSize: 17, lineHeight: 1.55, color: "rgba(255,255,255,.7)" }}>
          Free for small labs. No credit card. Your data stays yours — exportable any time, never used for training.
        </p>
        <div style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="#" className="btn btn-primary" style={{ padding: "13px 22px", fontSize: 15.5, boxShadow: "0 6px 20px -6px rgba(13,148,136,.55)" }}>
            Start free <ArrowRight />
          </a>
          <a href="/demo/" className="btn" style={{ padding: "13px 22px", fontSize: 15.5,
                                                                  background: "rgba(255,255,255,.08)", color: "white",
                                                                  border: "1px solid rgba(255,255,255,.15)" }}>
            Open the workspace
          </a>
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
                      borderTop: "1px solid rgba(255,255,255,.1)", borderBottom: "1px solid rgba(255,255,255,.1)",
                      maxWidth: 880, marginInline: "auto" }}>
          {[
            ["1,200+", "research institutions"],
            ["1,646+", "peer-reviewed citations"],
            ["SOC 2",  "Type II · HIPAA-ready"],
            ["10+ yrs","ConductScience platform"],
          ].map(([v, l], i) => (
            <div key={l} style={{ padding: "20px 16px", borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,.1)" }}>
              <div className="mono" style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>{v}</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,.55)", marginTop: 2 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Field({ label, type = "text", placeholder, full }) {
  return (
    <label style={{ gridColumn: full ? "1 / -1" : "auto", display: "block" }}>
      <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-700)", marginBottom: 6 }}>{label}</div>
      <input type={type} placeholder={placeholder}
             style={{
               width: "100%", padding: "10px 12px", fontSize: 14, fontFamily: "inherit",
               background: "var(--ink-50)", border: "1px solid var(--ink-200)", borderRadius: 8,
               color: "var(--ink-900)", outline: "none",
             }}
             onFocus={(e) => { e.target.style.borderColor = "var(--brand-500)"; e.target.style.background = "white"; }}
             onBlur={(e) => { e.target.style.borderColor = "var(--ink-200)"; e.target.style.background = "var(--ink-50)"; }}
      />
    </label>
  );
}

function FieldArea({ label, placeholder, full }) {
  return (
    <label style={{ gridColumn: full ? "1 / -1" : "auto", display: "block" }}>
      <div style={{ fontSize: 12, fontWeight: 500, color: "var(--ink-700)", marginBottom: 6 }}>{label}</div>
      <textarea placeholder={placeholder} rows={3}
                style={{
                  width: "100%", padding: "10px 12px", fontSize: 14, fontFamily: "inherit",
                  background: "var(--ink-50)", border: "1px solid var(--ink-200)", borderRadius: 8,
                  color: "var(--ink-900)", outline: "none", resize: "vertical",
                }} />
    </label>
  );
}

function CheckRow({ label }) {
  return (
    <label style={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--ink-700)" }}>
      <input type="checkbox" style={{ width: 16, height: 16, accentColor: "var(--brand-600)" }} />
      {label}
    </label>
  );
}

function SectionTitle({ eyebrow, title, sub }) {
  return (
    <div style={{ maxWidth: 740 }}>
      <div className="mono" style={{ fontSize: 11.5, color: "var(--brand-700)", letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600 }}>
        {eyebrow}
      </div>
      <h2 style={{ margin: "10px 0 0", fontSize: 32, fontWeight: 600, letterSpacing: "-0.015em", color: "var(--ink-900)", lineHeight: 1.15 }}>
        {title}
      </h2>
      {sub && <p style={{ margin: "12px 0 0", fontSize: 16, color: "var(--ink-600)", lineHeight: 1.55 }}>{sub}</p>}
    </div>
  );
}

function SeverityIcon({ severity }) {
  if (severity === "complete") return <span style={{ display: "inline-flex", width: 22, height: 22, borderRadius: 99, background: "var(--ok-bg)", color: "var(--ok)", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><CheckIcon /></span>;
  if (severity === "warning") return <span style={{ display: "inline-flex", width: 22, height: 22, borderRadius: 99, background: "var(--warn-bg)", color: "var(--warn)", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><WarnIcon /></span>;
  return <span style={{ display: "inline-flex", width: 22, height: 22, borderRadius: 99, background: "var(--block-bg)", color: "var(--block)", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><BlockIcon /></span>;
}

/* Icons */
function ArrowRight() { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>; }
function CheckIcon(p={}) { return <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6L9 17l-5-5"/></svg>; }
function WarnIcon() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>; }
function BlockIcon() { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>; }
function FileIcon(p={}) { return <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>; }
function IconFiles() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/><path d="M9 13h6M9 17h4"/></svg>; }
function IconJoin() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5"/></svg>; }
function IconCheck2() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>; }
function IconExport() { return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg>; }

Object.assign(window, { Hero, StatBar, HowItWorks, DemoPreview, Workflows, Customers, Integrations, Pricing, FinalCTA });