/* global React */
const { Button, Card, Chip, ClaimCeiling, GradientText } = window.OregonCoastAIDesignSystem_e04d97;

function ServiceScreen({ onNav, onRequestDemo }) {
  const Section = window.OCASection, Wrap = window.OCAWrap, Kicker = window.OCAKicker, SH = window.OCASH, Sub = window.OCASub;

  const services = [
    ["Trial enrichment & responder ID", "Resolve an already-diagnosed cohort into molecular-state classes and identify the responder-enriched subgroup before you randomize — concentrate power where the effect lives.", ["Pre-randomization", "Methods-only"]],
    ["Retrospective re-analysis", "Re-read a completed or ambiguous trial. De-mix the ITT population and test whether a diluted effect resolves inside a coherent subgroup — turning a near-miss into a defensible hypothesis.", ["Salvage signal", "Versioned"]],
    ["Stratification for new design", "Structure-aware stratification factors and abstention envelopes for your next protocol, so heterogeneity is controlled up front rather than explained away later.", ["Protocol-ready", "Auditable"]],
    ["Companion methods packet", "Insert-ready methods, data-governance, and claim-ceiling language for regulatory submissions, publications, or SBIR / NIH review.", ["Grant-ready", "Human-verified"]],
    ["Longitudinal trajectory tracking", "Where serial samples exist, track each subject's path through the spectral-covariance state space — stability, displacement, and dwell as a review-oriented readout.", ["Severable add-on", "Review-only"]],
    ["Specificity comparator", "Compare a fibromyalgia direction-sensitive spectral profile against inflammatory-comparator baselines and report specificity-support, target-only, low-confidence, or abstain — never an unqualified call.", ["Bounded", "Abstainable"]],
  ];

  const ladder = [
    ["01", "Feasibility read", "Fixed-scope, fixed-fee assessment on public or shared data. Is the subgroup structure you need actually reachable in your assay? We answer with feasibility — or an honest no.", "Lowest risk · fastest path", "var(--accent)"],
    ["02", "Sponsored de-mixing", "Your data under NDA. Full registered workflow with an immutable experiment ID; prior baselines are never overwritten. Deliverable: structured results + human report + checksum.", "Under NDA · versioned", "var(--accent-2)"],
    ["03", "Co-development / grant track", "Oregon Coast AI as a PI-eligible entity for SBIR / NIH / ARPA-H, or a multi-study methods program feeding your regulatory and publication trail.", "Long-horizon · methods program", "var(--accent-3)"],
  ];

  return (
    <div>
      <header style={{ padding: "56px 0 40px", borderBottom: "1px solid var(--border-line)" }}>
        <Wrap wide>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-accent)" }}>What we sell</div>
          <h2 style={{ fontSize: "clamp(28px,4.4vw,46px)", lineHeight: 1.12, margin: "14px 0 16px", fontWeight: 700, color: "var(--text-strong)", maxWidth: "20ch" }}>
            De-mixing as a <GradientText>scoped service</GradientText>.
          </h2>
          <p style={{ fontSize: "clamp(16px,1.6vw,19px)", color: "var(--text-body)", maxWidth: "62ch", margin: 0, lineHeight: 1.6 }}>
            You bring an already-diagnosed cohort and a claim you want to support; we bring an instrumented, gated pipeline and ship bounded, defensible results. Every engagement is fixed in scope and named in its deliverable.
          </p>
          <div style={{ display: "flex", gap: "12px", marginTop: "24px", flexWrap: "wrap" }}>
            <Button onClick={onRequestDemo}>Request demo access</Button>
            <Button variant="secondary" onClick={() => onNav("intake")}>Request a feasibility read</Button>
          </div>
        </Wrap>
      </header>

      {/* Service lines */}
      <Section wide id="services">
        <Kicker>Service lines</Kicker>
        <SH>Six ways to put de-mixing to work</SH>
        <Sub>Each line ships a named artifact with trust cues you can cite in a protocol, a board deck, or an audit trail.</Sub>
        <div className="cards-3">
          {services.map(([t, d, chips]) => (
            <Card key={t} title={t} footer={<div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>{chips.map((c) => <Chip key={c} tone="trust">{c}</Chip>)}</div>}>{d}</Card>
          ))}
        </div>
      </Section>

      {/* Why it lands — research-backed BD framing */}
      <Section wide id="why">
        <Kicker>Why sponsors engage</Kicker>
        <SH>The cost of a mixed cohort is a failed read</SH>
        <Sub>This is the same logic precision-medicine programs already use to justify biomarker enrichment: concentrate the study on the patients carrying the signal, and a real effect stops hiding behind the group mean.</Sub>
        <div className="cards-2">
          <div style={{ background: "var(--surface-inset)", border: "1px solid var(--border-line)", borderRadius: "var(--radius-lg)", padding: "24px" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-muted)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: "12px" }}>Without de-mixing</div>
            <ul style={{ margin: 0, paddingLeft: "18px", color: "var(--text-body)", fontSize: "15px", lineHeight: 1.7 }}>
              <li>Responders and non-responders pooled into one arm</li>
              <li>Effect size pulled toward placebo; power bled away</li>
              <li>Subgroups argued post-hoc — read as data-dredging</li>
              <li>A working compound risks the shelf</li>
            </ul>
          </div>
          <div style={{ background: "var(--tint-accent)", border: "1px solid var(--tint-success-border)", borderRadius: "var(--radius-lg)", padding: "24px" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "11px", color: "var(--text-accent)", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: "12px" }}>With de-mixing</div>
            <ul style={{ margin: 0, paddingLeft: "18px", color: "var(--text-body)", fontSize: "15px", lineHeight: 1.7 }}>
              <li>Pre-registered molecular-state classes, gated and abstainable</li>
              <li>Effect concentrated in the responder-enriched class</li>
              <li>Structure-aware stratification reviewers can defend</li>
              <li>A clear, falsifiable next experiment</li>
            </ul>
          </div>
        </div>
        <div style={{ margin: "20px 0 0" }}><ClaimCeiling>We do not claim to rescue any specific trial or product. De-mixing generates bounded hypotheses for confirmatory study — it is not a substitute for an adequately powered, pre-specified analysis.</ClaimCeiling></div>
      </Section>

      {/* Engagement ladder */}
      <Section wide id="ladder">
        <Kicker>Engagement ladder</Kicker>
        <SH>Start small, escalate on evidence</SH>
        <Sub>The first engagement is deliberately low-risk and fixed-fee. We earn the next step with a result you can check — not a roadmap you have to trust.</Sub>
        <div className="cards-3">
          {ladder.map(([n, t, d, tag, col]) => (
            <div key={n} style={{ background: "var(--surface-card)", border: "1px solid var(--border-line)", borderRadius: "var(--radius-lg)", padding: "22px", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: col }} />
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "13px", color: col, fontWeight: 600, marginBottom: "10px" }}>STEP {n}</div>
              <h4 style={{ margin: "0 0 10px", fontSize: "18px", fontWeight: 600, color: "var(--text-strong)" }}>{t}</h4>
              <p style={{ margin: "0 0 14px", color: "var(--text-muted)", fontSize: "14px", lineHeight: 1.55 }}>{d}</p>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "10.5px", color: "var(--text-muted)", letterSpacing: "0.04em", borderTop: "1px solid var(--border-line)", paddingTop: "12px" }}>{tag}</div>
            </div>
          ))}
        </div>
      </Section>

      {/* IP & confidentiality */}
      <Section wide id="confidentiality">
        <Kicker>IP &amp; confidentiality</Kicker>
        <SH>Your data, bounded engagement</SH>
        <p style={{ color: "var(--text-body)", maxWidth: "64ch", fontSize: "16px", lineHeight: 1.6 }}>
          Client data and proprietary IP stay inside scoped study boundaries. Core methods remain separated from your assets; public claims and partner deliverables pass human-verified gates. Where two engagements touch related work, we maintain silent independence between IP tracks.
        </p>
      </Section>
    </div>
  );
}

window.ServiceScreen = ServiceScreen;