/* ConductBiology Study record: the product page. Tool spec:
   docs/specs/2026-10-04-study-record-v1-spec.md. The tool lives at /study/app. The figure is
   real output from the made-up example study (scripts/make-study-example.mjs). */

const STUDY_INPUTS = [
  ["Subjects", "A subject sheet with group, sex, genotype, and any other columns. Exclusions carry a reason into the methods."],
  ["qPCR", "QuantStudio, CFX, Design and Analysis, tidy tables, or RDML. Reference genes, then 2^−ΔΔCq or efficiency-corrected fold change against the control group at each timepoint."],
  ["ELISA and plate assays", "Grid, Well-and-value, or kinetic exports with a plate map. Blank correction, 4PL, 5PL, or linear standard curves, dilutions, and range and CV flags."],
  ["Behavior and other tables", "Any table with one row per animal or trial, including EthoVision XT exports. Trials are combined per animal and timepoint."],
  ["Reference files", "Videos, images, ABF, NWB, and protocols are recorded by name and SHA-256, so the record says exactly which file was used."],
  ["Sample matching", "Labels such as HC-M01-24h are matched to the animal and timepoint. Anything that does not match is listed for a quick fix."],
];

const STUDY_OUTPUTS = [
  ["Joined table", "One row per animal and timepoint, every assay side by side, as CSV in wide or long form."],
  ["Readiness checklist", "Missing groups or sex, unmatched samples, high technical SD, curve fit, range, and CV, before anyone reads a p-value."],
  ["Statistics and figures", "Group means with SEM and 95% intervals, Welch's t-tests or ANOVA with Holm-adjusted comparisons against the control, and a dot plot per outcome."],
  ["Methods and provenance", "A methods section that names every file with its fingerprint, the curve fits, the reference genes, the plan, and the tests."],
  ["A record you can replay", "The study record JSON restores the whole study and recomputes the same fingerprint. Save it to your account and pick it up later."],
  ["Registered or exploratory", "Lock the outcomes before adding data and they are reported as registered. Everything else is labeled exploratory."],
];

function StudyPage() {
  return (
    <>
      <Nav current="study" />
      <main>
        <StudyHero />
        <StudyCards eyebrow="What goes in" title="The files your lab already has" items={STUDY_INPUTS} />
        <StudyCards eyebrow="What comes out" title="A study you can hand to anyone" items={STUDY_OUTPUTS} tint />
        <StudyHow />
      </main>
      <Footer />
    </>
  );
}

function StudyHero() {
  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 study-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 Study record</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" }}>
            Every assay for every animal, in one record
          </h1>
          <p style={{ margin: "22px 0 0", fontSize: 18, lineHeight: 1.55, color: "var(--ink-600)", maxWidth: 580, textWrap: "pretty" }}>
            Load the subject sheet with your qPCR, ELISA, and behavior exports. Get one row per animal, group statistics with figures,
            and a methods section that names every file.
          </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="/study/app?example=1" className="btn btn-ghost btn-tap" style={{ padding: "12px 18px", fontSize: 15 }}>Try the example</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>
        <figure className="card" style={{ margin: 0, padding: 14, overflow: "hidden" }}>
          <img src="/study/examples/figure-il6.svg" alt="Dot plot of serum IL-6 at 24 hours in the made-up example: Sham, TBI, and TBI plus treatment, one dot per mouse with mean and SEM" style={{ display: "block", width: "100%", height: "auto" }} />
          <figcaption style={{ marginTop: 8, fontSize: 12, color: "var(--ink-500)" }}>Made-up example: serum IL-6 by ELISA, 4PL standard curve, one dot per mouse. Made in the tool.</figcaption>
        </figure>
      </div>
    </section>
  );
}

function StudyCards({ eyebrow, title, items, tint }) {
  return (
    <section className="section" style={tint ? { background: "var(--ink-50)", borderTop: "1px solid var(--ink-200)", borderBottom: "1px solid var(--ink-200)" } : undefined}>
      <div className="page-wrap">
        <SectionTitle eyebrow={eyebrow} title={title} />
        <div className="grid-3" style={{ marginTop: 32 }}>
          {items.map(([name, body]) => (
            <div key={name} className="card" style={{ padding: 20 }}>
              <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>{name}</h3>
              <p style={{ margin: "8px 0 0", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink-600)" }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StudyHow() {
  const steps = [
    ["1", "Bring the files", "The subject sheet, then each export as it comes off the instrument. Nothing is retyped."],
    ["2", "Fix the plan first", "Name the outcomes, groups, control, and tests, and lock them before the data arrives."],
    ["3", "Match and check", "Every sample is matched to its animal and timepoint, and the checklist shows what needs a look."],
    ["4", "Report and rerun", "Download the tables, figures, and methods, save the record to your account, and replay it any time."],
  ];
  return (
    <section className="section">
      <div className="page-wrap">
        <SectionTitle eyebrow="How it works" title="The same four steps as every module" />
        <div className="grid-4" style={{ marginTop: 32 }}>
          {steps.map(([n, title, body]) => (
            <div key={n} className="card" style={{ padding: 22 }}>
              <div className="mono" style={{ width: 30, height: 30, borderRadius: 6, background: "var(--brand-50)", color: "var(--brand-700)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600 }}>{n}</div>
              <h3 style={{ margin: "14px 0 0", fontSize: 16, fontWeight: 600, color: "var(--ink-900)" }}>{title}</h3>
              <p style={{ margin: "6px 0 0", fontSize: 14, lineHeight: 1.55, color: "var(--ink-600)" }}>{body}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="/study/app" className="btn btn-primary btn-tap" style={{ padding: "12px 18px", fontSize: 15 }}>Open the tool <ArrowRight /></a>
          <a href="/signup" className="btn btn-ghost btn-tap" style={{ padding: "12px 18px", fontSize: 15 }}>Join the beta</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StudyPage });