/* Stethos — landing page, sections B (baseline → footer) + composition. */
const DS_B = window.LatentHealthDesignSystem_2f3a71;
const { Button: BtnB, Badge: BadgeB, Card: CardB, Eyebrow: EyebrowB } = DS_B;
const { Container: C, Section: S, Nav: NavC, Hero: HeroC, ProblemSection: ProblemC,
  DataFlowSection: FlowC, InsightSection: InsightC, CounterSection: CounterC } = window;

/* ---------------- Personal baseline (live) ---------------- */
function BaselineSection() {
  const BaselineLive = window.BaselineLive;
  return (
    <S style={{ borderBottom: '1px solid var(--border)', textAlign: 'center' }}>
      <EyebrowB>The personal baseline</EyebrowB>
      <h2 style={{ fontSize: 'clamp(26px,3.6vw,44px)', letterSpacing: '-0.025em', marginTop: 14, fontWeight: 500, lineHeight: 1.1, maxWidth: 880, margin: '14px auto 0' }}>
        A post-op patient calling eight times is normal. A stable patient calling eight times is an alarm.
      </h2>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--text-secondary)', marginTop: 22, maxWidth: 700, margin: '22px auto 0' }}>
        Every signal is scored against that patient’s own baseline, established over their first hours
        We don't compare Margaret to the hospital average.
        <span style={{ color: 'var(--text-primary)' }}> We compare her to herself.</span>
      </p>
      <div style={{ marginTop: 40 }}><BaselineLive /></div>
    </S>
  );
}

/* ---------------- No new hardware (live) ---------------- */
function HardwareSection() {
  const HardwareLive = window.HardwareLive;
  return (
    <S style={{ borderBottom: '1px solid var(--border)', textAlign: 'center' }}>
      <EyebrowB>No new hardware</EyebrowB>
      <h2 style={{ fontSize: 'clamp(26px,3.4vw,42px)', letterSpacing: '-0.025em', marginTop: 14, fontWeight: 500, maxWidth: 780, margin: '14px auto 0' }}>
        The microphone is already in the room. It’s the call bell.
      </h2>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--text-secondary)', marginTop: 22, maxWidth: 680, margin: '22px auto 0' }}>
        Twelve of our sixteen signals come from infrastructure your hospital has already paid for:
        the nurse-call system, the intercom, RTLS badges, the EMR. Today, that data is discarded the
        moment the call ends. Watch the system come online.
      </p>
      <div style={{ marginTop: 40 }}><HardwareLive /></div>
    </S>
  );
}

/* ---------------- Mandate ---------------- */
function MandateSection() {
  return (
    <S id="mandate" style={{ borderBottom: '1px solid var(--border)', textAlign: 'center' }} pad={96}>
      <div style={{ maxWidth: 700, margin: '0 auto' }}>
        <EyebrowB style={{ color: 'var(--status-warning)' }}>This is not optional</EyebrowB>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 20, lineHeight: 1.6, color: 'var(--text-secondary)', marginTop: 22 }}>
          Under <span style={{ color: 'var(--text-primary)' }}>Accreditation Canada’s Qmentum program</span>, the standard nearly
          every hospital in the country is assessed against, Client-Centred Care is one of eight
          required quality dimensions, backed by Required Organizational Practices audited on-site
          every four years. Hospitals across Canada are held accountable to an experience they
          currently cannot see until it is over.
        </p>
      </div>
    </S>
  );
}

/* ---------------- CTA ---------------- */
function CTASection() {
  return (
    <S style={{ borderBottom: '1px solid var(--border)' }}>
      <div style={{
        borderRadius: 'var(--radius-2xl)', border: '1px solid var(--cyan-tint-strong)',
        background: 'linear-gradient(180deg, rgba(77,163,255,0.06), var(--surface-1))',
        padding: '64px 48px', textAlign: 'center', boxShadow: 'var(--glow-cyan)',
      }}>
        <h2 style={{ fontSize: 'clamp(28px,3.6vw,42px)', letterSpacing: '-0.025em', fontWeight: 500, maxWidth: 720, margin: '0 auto' }}>
          See a patient decline in real time. And catch it.
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 620, margin: '20px auto 0' }}>
          Watch a simulated ward, generate a patient, and follow their experience trajectory hour by
          hour, including the intervention that changes the outcome.
        </p>
        <div style={{ marginTop: 34, display: 'flex', justifyContent: 'center' }}>
          <BtnB variant="primary" size="lg" iconRight="→" href="/demo">Launch the live demo</BtnB>
        </div>
      </div>
    </S>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  return (
    <footer style={{ padding: '48px 0 64px' }}>
      <C style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
            <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--cyan-500)', boxShadow: '0 0 10px 1px var(--cyan-glow)' }}></span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>Stethos</span>
          </div>
          <div style={{ flex: 1 }}></div>
          <a href="https://github.com/housieee/SmartRoom" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)' }}>GitHub ↗</a>
        </div>
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.7, maxWidth: 640 }}>
          Stethos is a working prototype built on synthetic data. Model: ridge regression over
          four engineered features, trained on 5,000 simulated stays.
        </p>
      </C>
    </footer>
  );
}

/* ---------------- Composition ---------------- */
function Landing() {
  return (
    <div>
      <NavC />
      <HeroC />
      <ProblemC />
      <FlowC />
      <InsightC />
      <CounterC />
      <BaselineSection />
      <HardwareSection />
      <MandateSection />
      <CTASection />
      <Footer />
    </div>
  );
}

Object.assign(window, { BaselineSection, HardwareSection, MandateSection, CTASection, Footer, Landing });