// The 10-second story: Patient → Jessie → Change → Care team

function StoryHero() {
  return (
    <section id="story" className="section section--dark" data-screen-label="01 The 10-Second Story">
      <div className="section__eyebrow">
        <span className="section__eyebrow-dot"></span>
        <span>The 10-second story</span>
      </div>

      <h1 className="section__title serif" style={{ color: '#F5F2EC', maxWidth: '18ch', fontSize: 64 }}>
        The chart is a snapshot.<br/>
        <em style={{ fontStyle: 'italic', color: 'var(--accent-fg)' }}>The patient is a movie.</em>
      </h1>

      <p className="section__lede" style={{ marginBottom: 72, maxWidth: '52ch' }}>
        Jessie maintains continuity between care encounters — collecting, comparing, and surfacing meaningful change while the patient waits.
      </p>

      {/* The four beats */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 0,
        borderTop: '1px solid rgba(255,255,255,0.08)',
        borderBottom: '1px solid rgba(255,255,255,0.08)',
      }}>
        {/* Beat 1 — patient */}
        <StoryBeat
          num="01"
          label="Patient"
          time="12:52 AM"
        >
          <div style={{
            fontFamily: 'var(--serif)',
            fontSize: 28,
            lineHeight: 1.2,
            color: '#F5F2EC',
            fontStyle: 'italic',
            letterSpacing: '-0.01em',
          }}>
            "My chest hurts more than before and now I'm feeling dizzy."
          </div>
        </StoryBeat>

        {/* Beat 2 — Jessie */}
        <StoryBeat
          num="02"
          label="Jessie"
          time="Compares to 9:42 PM"
          divider
        >
          <div style={{ color: 'rgba(255,255,255,0.75)', fontSize: 14, lineHeight: 1.55 }}>
            Recognizes what has changed since the earlier state — not what the patient said, but <em style={{ color: '#F5F2EC', fontStyle: 'normal', fontWeight: 500 }}>how the patient has changed.</em>
          </div>
        </StoryBeat>

        {/* Beat 3 — the delta */}
        <StoryBeat
          num="03"
          label="Structured change"
          time="Pain · Symptoms"
          divider
        >
          <div className="stack gap-16">
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6, fontWeight: 600 }}>Pain</div>
              <div className="delta delta--lg" style={{ color: '#F5F2EC' }}>
                <span className="delta__from" style={{ color: 'rgba(255,255,255,0.35)', textDecorationColor: 'rgba(255,255,255,0.35)' }}>5</span>
                <span className="delta__arrow">→</span>
                <span className="delta__to" style={{ color: '#F5F2EC' }}>8</span>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6, fontWeight: 600 }}>Symptom</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span className="chip-new">New</span>
                <span className="serif" style={{ fontSize: 24, color: '#F5F2EC' }}>Dizziness</span>
              </div>
            </div>
          </div>
        </StoryBeat>

        {/* Beat 4 — care team */}
        <StoryBeat
          num="04"
          label="Care team"
          time="Routed · 1:03 AM"
          divider
        >
          <div style={{ color: 'rgba(255,255,255,0.75)', fontSize: 14, lineHeight: 1.55 }}>
            Meaningful change surfaced through the appropriate workflow — a human decides what happens next.
          </div>
          <div style={{ marginTop: 20 }}>
            <span className="pill pill--red" style={{ background: 'rgba(180, 35, 24, 0.16)', color: '#F7B4A9' }}>
              <span className="pill__dot" style={{ background: '#F7B4A9' }}></span>
              Change detected
            </span>
          </div>
        </StoryBeat>
      </div>

      <div style={{ marginTop: 40, color: 'rgba(255,255,255,0.5)', fontSize: 13, fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>
        Care happens in moments. Jessie maintains continuity between them.
      </div>
    </section>
  );
}

function StoryBeat({ num, label, time, children, divider }) {
  return (
    <div style={{
      padding: '48px 40px',
      borderLeft: divider ? '1px solid rgba(255,255,255,0.08)' : 'none',
      display: 'flex',
      flexDirection: 'column',
      gap: 28,
      minHeight: 360,
    }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.08em' }}>
          {num} · {label.toUpperCase()}
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.35)' }}>
          {time}
        </div>
      </div>
      <div style={{ flex: 1 }}>{children}</div>
    </div>
  );
}

window.StoryHero = StoryHero;