/* ConductBiology Molecular: the product page for the ASO/siRNA candidate gate.
   Product spec: docs/specs/2026-09-04-conductbench-molecular-candidate-gate-spec.md; tool spec:
   docs/specs/2026-10-04-molecular-v1-spec.md. The tool lives at /molecular/app. The example
   numbers in example-screen.jsx are computed by the engine from the made-up example study. */

/* The check order (tool spec section 6). The first failed check decides the call. */
const CHECK_ORDER = [
  { q: "Did the controls and run checks pass?", call: "invalid" },
  { q: "Is every required result there?", call: "insufficient" },
  { q: "Did cells stay above your viability floor?", call: "stop" },
  { q: "Did knockdown reach its threshold?", call: "stop" },
  { q: "Do replicates and assays agree?", call: "repeat" },
  { q: "Is the confirmation assay in?", call: "confirm" },
];

function MolecularApp() {
  return (
    <>
      <Nav current="molecular" />
      <main>
        <MolecularHero />
        <SendAndGet />
        <CallOrder />
        <ExamplePack />
        <WaysToUse />
      </main>
      <Footer />
    </>
  );
}

function MolecularHero() {
  return (
    <section style={{
      borderBottom: "1px solid var(--ink-200)",
      background: "radial-gradient(1000px 520px at 8% -12%, rgba(13,148,136,.10), transparent 60%), white",
    }}>
      <div className="page-wrap mol-hero">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <span className="mono" style={{ fontSize: 11.5, color: "var(--brand-700)", letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600 }}>
              ConductBiology Molecular
            </span>
            <span className="chip chip-ok"><span className="dot"></span>Available</span>
          </div>
          <h1 style={{
            margin: "16px 0 0",
            fontSize: "clamp(36px, 4.6vw, 60px)",
            lineHeight: 1.04,
            letterSpacing: "-0.025em",
            fontWeight: 700,
            color: "var(--ink-900)",
            textWrap: "balance",
          }}>
            Decide which ASO and siRNA candidates advance to animals
          </h1>
          <p style={{ margin: "22px 0 0", fontSize: 18, lineHeight: 1.55, color: "var(--ink-600)", maxWidth: 560, textWrap: "pretty" }}>
            Load your qPCR, viability, and confirmation results. Get an advance, repeat, or stop call
            for every candidate, with the check that decided it and the wording your data supports.
          </p>
          <div style={{ marginTop: 30, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="/signup" className="btn btn-primary btn-tap"
               style={{ padding: "12px 18px", fontSize: 15, boxShadow: "0 6px 20px -6px rgba(13,148,136,.45)" }}>
              Join the beta <ArrowRight />
            </a>
            <a href="/molecular/app?example=1" className="btn btn-ghost btn-tap" style={{ padding: "12px 18px", fontSize: 15 }}>
              Try the example study
            </a>
          </div>
          <div style={{ marginTop: 14, fontSize: 13, color: "var(--ink-500)" }}>
            Free during the beta · runs in your browser · files are never uploaded
          </div>
        </div>
        <DecisionPackCard />
      </div>
    </section>
  );
}

function SendAndGet() {
  const send = [
    ["Sample sheet", "Sample, candidate, role, replicate, and dose. Or let the tool propose one from your qPCR sample names."],
    ["qPCR exports", "QuantStudio or Design & Analysis results, Bio-Rad CFX Cq results, or a CSV with sample, target, and Cq"],
    ["Viability exports", "A plate-reader table with sample and signal, with blank wells if you have them"],
    ["Confirmation assay", "Optional: protein, target engagement, or phenotype as a percent reduction"],
  ];
  const get = [
    "A call for every candidate: advance, repeat, stop, confirm first, not enough evidence, or invalid run",
    "The check that decided each call, with every check shown in order",
    "Run checks for every plate: no-template controls, positive control, comparator wells",
    "Knockdown by ΔΔCq against one or more reference genes, and viability normalized to your controls",
    "The wording your data supports, and what not to say",
    "A printable report, CSV, and JSON that agree, with a methods paragraph and references",
    "A decision fingerprint: replay the same files and criteria to confirm the calls",
  ];
  const heading = { margin: 0, fontSize: 18, fontWeight: 600, color: "var(--ink-900)" };
  return (
    <section className="section">
      <div className="page-wrap">
        <SectionTitle eyebrow="The tool" title="One finished screen in, one decision pack out" />
        <div className="grid-2" style={{ marginTop: 32, gap: 20 }}>
          <div className="panel" style={{ padding: 26 }}>
            <h3 style={heading}>What you load</h3>
            <dl style={{ margin: "18px 0 0", display: "grid", gap: 14 }}>
              {send.map(([k, v]) => (
                <div key={k}>
                  <dt style={{ fontSize: 14.5, fontWeight: 600, color: "var(--ink-900)" }}>{k}</dt>
                  <dd style={{ margin: "3px 0 0", fontSize: 14, lineHeight: 1.5, color: "var(--ink-600)" }}>{v}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div className="panel" style={{ padding: 26, borderColor: "var(--brand-200)", background: "var(--brand-50)" }}>
            <h3 style={heading}>What you get</h3>
            <ul style={{ listStyle: "none", margin: "18px 0 0", padding: 0, display: "grid", gap: 10 }}>
              {get.map(item => (
                <li key={item} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-800)" }}>
                  <CheckIcon style={{ marginTop: 4, color: "var(--brand-600)", flexShrink: 0 }} />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function CallOrder() {
  return (
    <section id="checks" className="section" style={{ borderTop: "1px solid var(--ink-200)", background: "var(--ink-50)" }}>
      <div className="page-wrap">
        <SectionTitle
          eyebrow="How each call is made"
          title="Checks run in a fixed order"
          sub="The first check a candidate fails decides its call. A strong knockdown can't make up for dying cells or a failed control."
        />
        <ol className="check-list">
          {CHECK_ORDER.map((c, i) => (
            <li key={c.q} className="check-row">
              <span className="mono check-num" aria-hidden="true">{i + 1}</span>
              <span style={{ fontSize: 15, color: "var(--ink-900)", fontWeight: 500 }}>{c.q}</span>
              <span className="check-outcome" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--ink-500)" }}>
                If not: <CallChip call={c.call} />
              </span>
            </li>
          ))}
          <li className="check-row" style={{ borderColor: "#a7f3d0", background: "var(--ok-bg)" }}>
            <span className="mono check-num" aria-hidden="true">{CHECK_ORDER.length + 1}</span>
            <span style={{ fontSize: 15, color: "var(--ink-900)", fontWeight: 500 }}>All checks passed</span>
            <span className="check-outcome"><CallChip call="advance" /></span>
          </li>
        </ol>
        <p style={{ margin: "20px 0 0", maxWidth: 760, fontSize: 14.5, lineHeight: 1.6, color: "var(--ink-600)" }}>
          You lock the thresholds before you load results, and the decision pack records when. Advance is
          only possible when every required result is in.
        </p>
      </div>
    </section>
  );
}

function toneFor(field, value) {
  if (value === "not used" || value === "not needed" || value === "not measured") return "tone-muted";
  if (field === "qc") return value === "pass" ? "" : "tone-bad";
  if (field === "knockdown") return parseInt(value, 10) >= EXAMPLE_THRESHOLDS.knockdown ? "" : "tone-bad";
  if (field === "viability") {
    if (value === "missing") return "tone-warn";
    return parseInt(value, 10) >= EXAMPLE_THRESHOLDS.viability ? "" : "tone-bad";
  }
  if (field === "replicates") return value.startsWith("3 of 3") ? "" : "tone-warn";
  if (field === "confirmation") return value === "pending" ? "tone-warn" : "";
  return "";
}

function ExamplePack() {
  const columns = [
    ["qc", "Run QC"],
    ["knockdown", `Knockdown, ${EXAMPLE_THRESHOLDS.knockdown}% or more`],
    ["viability", `Viability, ${EXAMPLE_THRESHOLDS.viability}% or more`],
    ["replicates", "Replicates"],
    ["confirmation", "Confirmation"],
  ];
  return (
    <section id="example" className="section">
      <div className="page-wrap">
        <SectionTitle
          eyebrow="Example"
          title="The example study, with made-up data"
          sub={`Seven candidates from one screen, as the tool calls them. The thresholds here are for illustration: knockdown of at least ${EXAMPLE_THRESHOLDS.knockdown}% and viability of at least ${EXAMPLE_THRESHOLDS.viability}%. You set your own.`}
        />
        {/* The call and its reason come first; on phones each row becomes a card (see
            .decision-table in molecular/index.html), labelled from data-label. */}
        <div className="panel table-scroll" style={{ marginTop: 28 }}>
          <table className="decision-table">
            <caption className="sr-only">Example candidate calls with made-up data</caption>
            <thead>
              <tr>
                <th scope="col">Candidate</th>
                <th scope="col">Call</th>
                <th scope="col">Deciding check</th>
                {columns.map(([key, label]) => <th key={key} scope="col">{label}</th>)}
              </tr>
            </thead>
            <tbody>
              {EXAMPLE_CANDIDATES.map(c => (
                <tr key={c.id}>
                  <th scope="row" className="mono" style={{ textAlign: "left", fontWeight: 500 }}>{c.id}</th>
                  <td data-label="Call"><CallChip call={c.call} /></td>
                  <td data-label="Deciding check" style={{ color: "var(--ink-700)" }}>{c.reason}</td>
                  {columns.map(([key, label]) => (
                    <td key={key} data-label={label} className={toneFor(key, c[key])}>{c[key]}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <figure style={{ margin: "24px 0 0", maxWidth: 820, padding: "18px 20px", background: "var(--ink-50)",
                         borderRadius: 10, borderLeft: "3px solid var(--brand-500)" }}>
          <figcaption style={{ fontSize: 12, fontWeight: 600, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--ink-500)" }}>
            Wording the data supports, for O-11
          </figcaption>
          <blockquote style={{ margin: "8px 0 0", fontSize: 15.5, lineHeight: 1.6, color: "var(--ink-800)" }}>
            {EXAMPLE_WORDING}
          </blockquote>
        </figure>
        <div style={{ marginTop: 22 }}>
          <a href="/molecular/app?example=1" className="btn btn-ghost btn-tap">Open the example in the tool <ArrowRight /></a>
        </div>
      </div>
    </section>
  );
}

function WaysToUse() {
  const audience = [
    "CROs that screen oligonucleotide candidates for sponsors",
    "RNA-therapeutics teams choosing leads for animal work",
    "Programs where the call has to hold up months later, in a sponsor or internal review",
  ];
  return (
    <section id="service" className="section" style={{ borderTop: "1px solid var(--ink-200)", background: "var(--ink-50)" }}>
      <div className="page-wrap">
        <SectionTitle eyebrow="Two ways to use it" title="Run it yourself, or have us run it with you" />
        <div className="grid-2" style={{ marginTop: 32 }}>
          <div className="card" style={{ padding: 24, display: "grid", gap: 12, alignContent: "start" }}>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, color: "var(--ink-900)" }}>Use the tool</h3>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-600)" }}>
              Lock your criteria, load your files, and export the decision pack. Free during the beta.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a href="/molecular/app" className="btn btn-primary btn-tap">Open the tool <ArrowRight /></a>
              <a href="/signup" className="btn btn-ghost btn-tap">Join the beta</a>
            </div>
          </div>
          <div className="card" style={{ padding: 24, display: "grid", gap: 12, alignContent: "start" }}>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600, color: "var(--ink-900)" }}>Study service</h3>
            <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-600)" }}>
              We agree the criteria with your scientist, map your instrument files, and deliver the signed
              decision pack within a week of clean files. Fixed price per study, quoted up front.
            </p>
            <div><a href={PILOT_HREF} className="btn btn-ghost btn-tap">Request a study <ArrowRight /></a></div>
          </div>
        </div>

        <div className="panel" style={{ marginTop: 20, padding: 26 }}>
          <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>Who it's for</h3>
          <ul style={{ listStyle: "none", margin: "12px 0 0", padding: 0, display: "grid", gap: 8 }}>
            {audience.map(a => (
              <li key={a} style={{ display: "flex", gap: 9, alignItems: "flex-start", fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-700)" }}>
                <CheckIcon style={{ marginTop: 4, color: "var(--brand-600)", flexShrink: 0 }} />
                <span>{a}</span>
              </li>
            ))}
          </ul>
        </div>

        <p style={{ margin: "28px 0 0", maxWidth: 820, fontSize: 13, lineHeight: 1.6, color: "var(--ink-500)" }}>
          For research use. A call states whether a candidate met in-vitro criteria agreed in advance; it is not a
          safety, clinical, or regulatory conclusion.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { MolecularApp });