// Patient-facing Jessie app — 4 screens + timeline

/* ============================================
   AtronicsLogoMark
   Renders the actual Atronics Labs logo PNG at any size.
   Uses the real brand file so it stays pixel-perfect faithful.

   Props:
     size — pixel size of the mark (square). Default 44.
     rounding — currently ignored (the source file already has rounded
                corners). Kept in the signature for API compatibility
                with callers that pass it.
============================================ */
function AtronicsLogoMark({ size = 44, rounding }) {
  return (
    <img
      src="/jessie-prototype/atronics-logo.png"
      alt="Atronics Labs"
      width={size}
      height={size}
      style={{
        display: 'block',
        flexShrink: 0,
        width: size,
        height: size,
        // The source PNG's corners are already rounded; no extra CSS radius needed.
      }}
    />
  );
}

function PatientApp() {
  const [screen, setScreen] = React.useState(1);
  // Language preference is set on the very first screen and carried
  // through the entire session. Passed down so downstream screens can
  // reference it (e.g. "sending check-ins in Español").
  const [language, setLanguage] = React.useState('en');

  const goTo = (n) => setScreen(n);
  const next = () => setScreen(s => Math.min(7, s + 1));
  const reset = () => setScreen(1);

  return (
    <section id="patient" className="section" data-screen-label="02 Patient App">
      <div className="section__eyebrow">
        <span className="section__eyebrow-dot"></span>
        <span>Patient interface · Continuity between encounters</span>
      </div>

      <h2 className="section__title serif">
        You're still connected while you wait.
      </h2>

      <p className="section__lede">
        Not a chatbot. Not a portal. A calm, conversational layer that stays with the patient between triage and handoff — and quietly recognizes when something has changed.
      </p>

      {/* Screen navigator */}
      <div style={{
        display: 'flex',
        gap: 8,
        marginBottom: 40,
        padding: 6,
        background: 'var(--bg-inset)',
        borderRadius: 999,
        width: 'fit-content',
      }}>
        {[
          { n: 1, label: 'Welcome' },
          { n: 2, label: 'Initial check-in' },
          { n: 3, label: "You're checked in" },
          { n: 4, label: 'Care journey' },
          { n: 5, label: 'Reassessment' },
          { n: 6, label: 'What changed' },
          { n: 7, label: 'Update captured' },
        ].map(s => (
          <button
            key={s.n}
            onClick={() => goTo(s.n)}
            style={{
              padding: '8px 16px',
              borderRadius: 999,
              border: 'none',
              cursor: 'pointer',
              fontFamily: 'inherit',
              fontSize: 13,
              fontWeight: 500,
              background: screen === s.n ? 'var(--ink-1)' : 'transparent',
              color: screen === s.n ? 'var(--bg-elevated)' : 'var(--ink-3)',
              transition: 'all 120ms ease',
            }}
          >
            <span className="mono" style={{ marginRight: 8, opacity: 0.6, fontSize: 11 }}>0{s.n}</span>
            {s.label}
          </button>
        ))}
        <button
          onClick={reset}
          style={{
            padding: '8px 12px',
            borderRadius: 999,
            border: 'none',
            cursor: 'pointer',
            background: 'transparent',
            color: 'var(--ink-4)',
            fontSize: 12,
            marginLeft: 4,
          }}
        >
          ↺ reset
        </button>
      </div>

      {/* Phone row */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '340px 1fr',
        gap: 80,
        alignItems: 'start',
      }}>
        {/* The phone */}
        <div>
          <div className="phone">
            <PhoneStatusBar />
            <div className="phone__screen">
              {screen === 1 && <ScreenLanguageWelcome onNext={next} language={language} onLanguageChange={setLanguage} />}
              {screen === 2 && <ScreenIntake onNext={next} />}
              {screen === 3 && <ScreenPatientID onNext={next} language={language} />}
              {screen === 4 && <ScreenWelcome onNext={next} />}
              {screen === 5 && <ScreenCheckIn onNext={next} />}
              {screen === 6 && <ScreenChange onNext={next} />}
              {screen === 7 && <ScreenCaptured />}
            </div>
          </div>
          <div className="phone__caption">Screen 0{screen} · Patient 1042</div>
        </div>

        {/* Side annotation */}
        <div style={{ paddingTop: 20 }}>
          <ScreenAnnotation screen={screen} />
        </div>
      </div>

      {/* Timeline */}
      <div style={{ marginTop: 100 }}>
        <PatientTimeline />
      </div>
    </section>
  );
}

/* ============================================
   Phone status bar
   ============================================ */

function PhoneStatusBar() {
  return (
    <div className="phone__status">
      <span>12:52</span>
      <div className="phone__status-right">
        <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
          <path d="M1 8L4 5L7 7L15 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
        <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
          <rect x="0.5" y="2" width="10" height="6" rx="1.5" stroke="currentColor" strokeWidth="1"/>
          <rect x="2" y="3.5" width="7" height="3" fill="currentColor"/>
          <rect x="11.5" y="4" width="1.5" height="2" rx="0.5" fill="currentColor"/>
        </svg>
      </div>
    </div>
  );
}

/* ============================================
   Screen 1 — Welcome · Atronics + language preference
   The very first screen. Big Atronics wordmark + Jessie, a single
   sentence, and a language chooser. Sets the language for the entire
   session so every downstream screen inherits it.
   ============================================ */

const LANGUAGES = [
  { code: 'en',    label: 'English',   native: 'English',    greeting: 'Welcome.' },
  { code: 'es',    label: 'Spanish',   native: 'Español',    greeting: 'Bienvenido.' },
  { code: 'pl',    label: 'Polish',    native: 'Polski',     greeting: 'Witamy.' },
  { code: 'zh',    label: 'Mandarin',  native: '中文',       greeting: '欢迎。' },
  { code: 'ar',    label: 'Arabic',    native: 'العربية',    greeting: 'أهلاً وسهلاً.' },
  { code: 'ru',    label: 'Russian',   native: 'Русский',    greeting: 'Добро пожаловать.' },
  { code: 'other', label: 'Other',     native: 'Other',      greeting: 'Welcome.' },
];

function ScreenLanguageWelcome({ onNext, language, onLanguageChange }) {
  const active = LANGUAGES.find(l => l.code === language) || LANGUAGES[0];

  return (
    <div className="stack" style={{ flex: 1, gap: 0, paddingTop: 4 }}>
      {/* Atronics lockup — hero size, centered above the greeting */}
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, marginBottom: 28 }}>
        <AtronicsLogoMark size={64} />
        <div style={{ textAlign: 'center' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-1)', fontWeight: 700 }}>
            Atronics Labs
          </div>
          <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-4)', marginTop: 3 }}>
            Jessie
          </div>
        </div>
      </div>

      {/* Greeting — swaps to the selected language */}
      <div style={{ marginBottom: 8 }}>
        <div className="serif" style={{
          fontSize: 44,
          lineHeight: 1.05,
          letterSpacing: '-0.02em',
          color: 'var(--ink-1)',
          fontStyle: 'italic',
        }}>
          {active.greeting}
        </div>
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink-3)', margin: 0, marginBottom: 22 }}>
        I'm Jessie. I'll stay with you between visits with your care team — sending updates in your language.
      </p>

      {/* Language chooser */}
      <div>
        <div className="mono" style={{
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--ink-4)',
          fontWeight: 600,
          marginBottom: 10,
        }}>
          Choose your language
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {LANGUAGES.map(lang => {
            const selected = lang.code === language;
            return (
              <button
                key={lang.code}
                onClick={() => onLanguageChange(lang.code)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 12,
                  padding: '11px 14px',
                  background: selected ? 'var(--accent-tint)' : 'var(--bg-card)',
                  border: selected ? '1.5px solid var(--accent)' : '1px solid var(--line-2)',
                  borderRadius: 10,
                  fontFamily: 'inherit',
                  textAlign: 'left',
                  cursor: 'pointer',
                  transition: 'all 120ms ease',
                }}
                aria-pressed={selected}
              >
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, minWidth: 0 }}>
                  <span style={{
                    fontSize: 14,
                    fontWeight: 600,
                    color: 'var(--ink-1)',
                    letterSpacing: '-0.005em',
                  }}>
                    {lang.native}
                  </span>
                  {lang.native !== lang.label && (
                    <span className="mono" style={{
                      fontSize: 10,
                      color: 'var(--ink-4)',
                      letterSpacing: '0.04em',
                    }}>
                      {lang.label}
                    </span>
                  )}
                </div>
                {selected && (
                  <svg width="16" height="16" viewBox="0 0 16 16" style={{ flexShrink: 0 }}>
                    <circle cx="8" cy="8" r="7" fill="var(--accent)"/>
                    <path d="M5 8L7 10L11 6" stroke="var(--accent-ink, #0A0A0A)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                  </svg>
                )}
              </button>
            );
          })}
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 14 }}></div>

      <button className="btn btn--primary btn--full btn--lg" onClick={onNext}>
        Continue
      </button>
    </div>
  );
}

/* ============================================
   Screen 2 — Initial intake
   First thing a patient does on arrival: name, DOB, reason, pain.
   Structured capture that anchors every later comparison.
   ============================================ */

function ScreenIntake({ onNext }) {
  const [name, setName] = React.useState('Sarah Chen');
  const [dob, setDob] = React.useState('1978-03-14');
  const [reason, setReason] = React.useState('Chest tightness');
  const [pain, setPain] = React.useState(5);
  const [idCaptured, setIdCaptured] = React.useState(false);
  const [insCaptured, setInsCaptured] = React.useState(false);

  const canContinue = name.trim() && dob && reason.trim();

  const inputStyle = {
    width: '100%',
    padding: '12px 14px',
    background: 'var(--bg-card)',
    border: '1.5px solid var(--line-2)',
    borderRadius: 12,
    fontFamily: 'inherit',
    fontSize: 15,
    color: 'var(--ink-1)',
    outline: 'none',
    transition: 'border-color 120ms ease',
    WebkitAppearance: 'none',
  };

  const labelStyle = {
    display: 'block',
    fontSize: 11,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: 'var(--ink-4)',
    fontFamily: 'var(--mono)',
    fontWeight: 600,
    marginBottom: 6,
  };

  return (
    <div className="stack" style={{ flex: 1, gap: 0, paddingTop: 12, overflowY: 'auto' }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 20 }}>
        Initial check-in · 9:38 PM
      </div>

      <h1 className="serif" style={{ fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, marginBottom: 6 }}>
        Let's get you started.
      </h1>
      <p style={{ fontSize: 13, color: 'var(--ink-4)', margin: 0, marginBottom: 22 }}>
        A few basics so your care team knows who they're seeing.
      </p>

      <div className="stack gap-16" style={{ gap: 14 }}>
        {/* Name */}
        <div>
          <label htmlFor="intake-name" style={labelStyle}>Full name</label>
          <input
            id="intake-name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="First and last name"
            style={inputStyle}
          />
        </div>

        {/* DOB */}
        <div>
          <label htmlFor="intake-dob" style={labelStyle}>Date of birth</label>
          <input
            id="intake-dob"
            type="date"
            value={dob}
            onChange={(e) => setDob(e.target.value)}
            style={inputStyle}
          />
        </div>

        {/* Reason */}
        <div>
          <label htmlFor="intake-reason" style={labelStyle}>What brings you in today?</label>
          <input
            id="intake-reason"
            type="text"
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            placeholder="A short phrase is fine"
            style={inputStyle}
          />
        </div>

        {/* Pain level */}
        <div>
          <label htmlFor="intake-pain" style={labelStyle}>Pain level right now</label>
          <PainScale value={pain} onChange={setPain} />
        </div>

        {/* Optional captures — ID + insurance */}
        <div>
          <label style={{...labelStyle, display: 'flex', justifyContent: 'space-between'}}>
            <span>Photo ID · insurance</span>
            <span style={{ opacity: 0.7, letterSpacing: '0.08em' }}>Optional</span>
          </label>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <CaptureTile
              icon="id"
              label="Photo ID"
              hint="Driver's license or passport"
              captured={idCaptured}
              onToggle={() => setIdCaptured(v => !v)}
            />
            <CaptureTile
              icon="ins"
              label="Insurance card"
              hint="Front of your card"
              captured={insCaptured}
              onToggle={() => setInsCaptured(v => !v)}
            />
          </div>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 8, lineHeight: 1.4 }}>
            You can skip these and add them at the front desk — this just saves a step later.
          </div>
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 20 }}></div>

      <button
        className="btn btn--primary btn--full btn--lg"
        onClick={onNext}
        disabled={!canContinue}
        style={{
          opacity: canContinue ? 1 : 0.4,
          cursor: canContinue ? 'pointer' : 'not-allowed',
          marginTop: 20,
        }}
      >
        Continue
      </button>
      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-4)', marginTop: 12 }}>
        We'll compare everything you tell us later against this starting point.
      </div>
    </div>
  );
}

/* Capture tile — tap to "capture" a document (demo only, no camera).
   Two states: empty (icon + label + hint) → captured (checkmark + thumbnail).
   Tap the captured tile again to retake. */
function CaptureTile({ icon, label, hint, captured, onToggle }) {
  return (
    <button
      onClick={onToggle}
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        gap: 8,
        padding: '14px 14px 12px',
        height: 128,
        background: captured ? 'var(--accent-tint)' : 'var(--bg-card)',
        border: `1.5px ${captured ? 'solid' : 'dashed'} ${captured ? 'var(--accent)' : 'var(--line-3)'}`,
        borderRadius: 12,
        cursor: 'pointer',
        fontFamily: 'inherit',
        textAlign: 'left',
        transition: 'all 140ms ease',
        position: 'relative',
        overflow: 'hidden',
      }}
      aria-pressed={captured}
      aria-label={captured ? `${label} captured — tap to retake` : `Capture ${label}`}
    >
      {/* Icon or captured document preview */}
      {captured ? (
        <CapturedDocGlyph icon={icon} />
      ) : (
        <CaptureIcon icon={icon} />
      )}

      <div style={{ width: '100%' }}>
        <div style={{
          fontSize: 13,
          fontWeight: 600,
          color: 'var(--ink-1)',
          marginBottom: 2,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
          <span>{label}</span>
          {captured && (
            <svg width="14" height="14" viewBox="0 0 16 16" style={{ flexShrink: 0 }}>
              <circle cx="8" cy="8" r="7" fill="var(--accent)"/>
              <path d="M5 8L7 10L11 6" stroke="var(--accent-ink, #0A0A0A)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
            </svg>
          )}
        </div>
        <div style={{ fontSize: 11, color: captured ? 'var(--accent-ink, var(--ink-2))' : 'var(--ink-4)', lineHeight: 1.35 }}>
          {captured ? 'Captured · tap to retake' : hint}
        </div>
      </div>
    </button>
  );
}

/* Empty-state camera icon inside a capture tile. */
function CaptureIcon({ icon }) {
  return (
    <div style={{
      width: 40,
      height: 40,
      borderRadius: 10,
      background: 'var(--bg-inset)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: 'var(--ink-3)',
    }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 8h3l2-3h6l2 3h3a1 1 0 011 1v10a1 1 0 01-1 1H4a1 1 0 01-1-1V9a1 1 0 011-1z"/>
        <circle cx="12" cy="13" r="3.5"/>
      </svg>
    </div>
  );
}

/* Captured document glyph — a stylized card shape hinting at the doc type. */
function CapturedDocGlyph({ icon }) {
  return (
    <div style={{
      width: 56,
      height: 36,
      borderRadius: 5,
      background: 'var(--bg-elevated)',
      border: '1px solid rgba(14,17,22,0.14)',
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      gap: 4,
      padding: 4,
      boxShadow: '0 1px 3px rgba(14,17,22,0.08)',
    }}>
      {/* Portrait square */}
      <div style={{
        width: 20, height: 26,
        borderRadius: 2,
        background: 'linear-gradient(180deg, var(--ink-4) 0%, var(--ink-3) 100%)',
        flexShrink: 0,
      }}/>
      {/* Text lines */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, flex: 1 }}>
        <div style={{ height: 3, background: 'var(--ink-4)', borderRadius: 999, width: '90%' }}/>
        <div style={{ height: 3, background: 'var(--ink-5, var(--ink-4))', borderRadius: 999, width: '70%', opacity: 0.6 }}/>
        <div style={{ height: 3, background: 'var(--ink-5, var(--ink-4))', borderRadius: 999, width: '80%', opacity: 0.5 }}/>
        {icon === 'ins' && (
          <div style={{ height: 3, background: 'var(--accent)', borderRadius: 999, width: '50%', marginTop: 1 }}/>
        )}
      </div>
    </div>
  );
}

/* Small pain scale (0–10) — anchored labels + segmented track.
   Reused visual language with the reassessment pain slider so
   patients and clinicians read the delta the same way. */
function PainScale({ value, onChange }) {
  return (
    <div>
      <div style={{
        display: 'flex',
        gap: 4,
        marginBottom: 8,
      }}>
        {Array.from({ length: 11 }, (_, i) => {
          const isSelected = value === i;
          const isFilled = i <= value;
          return (
            <button
              key={i}
              onClick={() => onChange(i)}
              style={{
                flex: 1,
                minWidth: 0,
                aspectRatio: '1 / 1',
                padding: 0,
                borderRadius: 6,
                border: isSelected ? '1.5px solid var(--ink-1)' : '1px solid var(--line-2)',
                background: isFilled ? (isSelected ? 'var(--ink-1)' : 'var(--accent-tint)') : 'var(--bg-card)',
                color: isFilled && isSelected ? 'white' : 'var(--ink-2)',
                fontFamily: 'var(--mono)',
                fontSize: 12,
                fontWeight: 600,
                cursor: 'pointer',
                transition: 'all 120ms ease',
              }}
              aria-label={`Pain level ${i}`}
            >
              {i}
            </button>
          );
        })}
      </div>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        fontSize: 11,
        color: 'var(--ink-4)',
        fontFamily: 'var(--mono)',
        letterSpacing: '0.02em',
      }}>
        <span>0 · no pain</span>
        <span>10 · worst imaginable</span>
      </div>
    </div>
  );
}

/* ============================================
   Screen 2 — You're checked in · Patient ID card
   Airline-boarding-pass style confirmation. Hero patient number,
   echo of what they entered, "show this to the front desk" microcopy,
   and a QR placeholder. Auto-advances after 5s or on tap.
   ============================================ */

function ScreenPatientID({ onNext }) {
  // In production, the patient number would be minted by the EHR when the
  // encounter is created. Hardcoded here to match the phone caption used
  // throughout the rest of the mockup.
  const patientNo = '1042';
  const patientName = 'Sarah Chen';
  const dobDisplay = '03 / 14 / 1978';
  const complaint = 'Chest tightness';
  const checkinTime = '9:38 PM';

  return (
    <div className="stack" style={{ flex: 1, gap: 0, paddingTop: 12 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 16 }}>
        Checked in · {checkinTime}
      </div>

      <h1 className="serif" style={{ fontSize: 28, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, marginBottom: 6 }}>
        You're all set.
      </h1>
      <p style={{ fontSize: 13, color: 'var(--ink-4)', margin: 0, marginBottom: 20 }}>
        The team knows you're here. When they call your number, that's you.
      </p>

      {/* The card — boarding-pass style */}
      <div style={{
        background: 'var(--bg-elevated)',
        border: '1.5px solid var(--ink-1)',
        borderRadius: 18,
        overflow: 'hidden',
        boxShadow: '0 12px 32px -12px rgba(14,17,22,0.16)',
      }}>
        {/* Top strip — accent band */}
        <div style={{
          background: 'var(--ink-1)',
          color: 'var(--bg-elevated)',
          padding: '10px 16px',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
        }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <AtronicsLogoMark size={18} rounding={0.22} />
            <span style={{ color: 'var(--accent)' }}>Patient</span>
          </span>
          <span style={{ opacity: 0.7 }}>Emergency Department</span>
        </div>

        {/* Hero — the patient number */}
        <div style={{ padding: '22px 20px 18px', textAlign: 'center' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 6 }}>
            Your patient number
          </div>
          <div className="serif" style={{
            fontSize: 84,
            lineHeight: 1,
            letterSpacing: '-0.03em',
            color: 'var(--ink-1)',
            fontVariantNumeric: 'tabular-nums',
            marginBottom: 12,
          }}>
            {patientNo}
          </div>
          <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink-1)', marginBottom: 2 }}>
            {patientName}
          </div>
          <div style={{ fontSize: 12, color: 'var(--ink-4)', fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>
            DOB {dobDisplay}
          </div>
        </div>

        {/* Perforated divider — dashed line with two circular cutouts */}
        <div style={{ position: 'relative', height: 14, background: 'var(--bg-elevated)' }}>
          <div style={{
            position: 'absolute',
            left: -7, top: 0,
            width: 14, height: 14,
            borderRadius: 999,
            background: 'var(--bg-page, #FAFAF7)',
            border: '1.5px solid var(--ink-1)',
            borderLeft: 'none',
          }}/>
          <div style={{
            position: 'absolute',
            right: -7, top: 0,
            width: 14, height: 14,
            borderRadius: 999,
            background: 'var(--bg-page, #FAFAF7)',
            border: '1.5px solid var(--ink-1)',
            borderRight: 'none',
          }}/>
          <div style={{
            position: 'absolute',
            left: 20, right: 20, top: 6,
            borderTop: '1.5px dashed var(--line-3)',
          }}/>
        </div>

        {/* Bottom stub — QR + complaint */}
        <div style={{
          padding: '16px 20px 18px',
          display: 'grid',
          gridTemplateColumns: '64px 1fr',
          gap: 14,
          alignItems: 'center',
        }}>
          <QRPlaceholder />
          <div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.14em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 4 }}>
              You told us
            </div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-1)', lineHeight: 1.3, marginBottom: 6 }}>
              {complaint}
            </div>
            <div style={{ fontSize: 10, color: 'var(--ink-4)', fontFamily: 'var(--mono)', letterSpacing: '0.02em', lineHeight: 1.3 }}>
              Show this to the front desk
            </div>
          </div>
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 12 }}></div>

      {/* Reassurance strip */}
      <div style={{
        padding: '10px 14px',
        background: 'var(--accent-tint)',
        border: '1px solid rgba(212, 255, 58, 0.35)',
        borderRadius: 12,
        display: 'flex',
        gap: 10,
        alignItems: 'center',
        marginBottom: 12,
      }}>
        <svg width="16" height="16" viewBox="0 0 16 16" style={{ flexShrink: 0 }}>
          <circle cx="8" cy="8" r="7" fill="var(--accent)"/>
          <path d="M5 8L7 10L11 6" stroke="var(--accent-ink, #0A0A0A)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
        </svg>
        <div style={{ fontSize: 12, color: 'var(--accent-ink, var(--ink-1))', lineHeight: 1.4 }}>
          You'll hear <strong>{patientNo}</strong> called when a room opens.
        </div>
      </div>

      <button
        className="btn btn--primary btn--full btn--lg"
        onClick={onNext}
      >
        Continue
      </button>
    </div>
  );
}

/* Placeholder QR square — SVG checkerboard with the three corner anchors
   drawn as concentric rings. Not scannable — visual only. */
function QRPlaceholder() {
  const cells = [];
  // Deterministic pseudo-random pattern so it looks like a real QR
  const pattern = [
    0b1010111011010,
    0b0101100110101,
    0b1110010110110,
    0b1001101011010,
    0b0110110100101,
    0b1101010011010,
    0b0011101101101,
    0b1010010110010,
    0b1100110100110,
    0b0101011010101,
    0b1011100101010,
    0b0110010111001,
    0b1101101010110,
  ];
  const size = 13;
  const cell = 64 / size;
  for (let y = 0; y < size; y++) {
    for (let x = 0; x < size; x++) {
      // Skip the 3 anchor regions (top-left, top-right, bottom-left, 4x4)
      const inTL = x < 4 && y < 4;
      const inTR = x >= size - 4 && y < 4;
      const inBL = x < 4 && y >= size - 4;
      if (inTL || inTR || inBL) continue;
      if ((pattern[y] >> x) & 1) {
        cells.push(<rect key={`${x}-${y}`} x={x * cell} y={y * cell} width={cell} height={cell} fill="var(--ink-1)"/>);
      }
    }
  }
  const anchors = [
    { x: 0, y: 0 },
    { x: size - 4, y: 0 },
    { x: 0, y: size - 4 },
  ];
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" style={{ borderRadius: 6, background: 'var(--bg-elevated)' }} aria-label="Patient QR code">
      {cells}
      {anchors.map(({ x, y }, i) => (
        <g key={i} transform={`translate(${x * cell}, ${y * cell})`}>
          <rect x="0" y="0" width={4 * cell} height={4 * cell} fill="var(--ink-1)"/>
          <rect x={cell * 0.6} y={cell * 0.6} width={cell * 2.8} height={cell * 2.8} fill="var(--bg-elevated)"/>
          <rect x={cell * 1.2} y={cell * 1.2} width={cell * 1.6} height={cell * 1.6} fill="var(--ink-1)"/>
        </g>
      ))}
    </svg>
  );
}

/* ============================================
   Screen 3 — Welcome / Continuity
   ============================================ */

function ScreenWelcome({ onNext }) {
  return (
    <div className="stack" style={{ flex: 1, minHeight: 0, gap: 0 }}>
      <div style={{ paddingTop: 20 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 24 }}>
          Jessie
        </div>

        <h1 className="serif" style={{ fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.02em', margin: 0, marginBottom: 12 }}>
          Hi, I'm Jessie.
        </h1>
        <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-3)', margin: 0 }}>
          I'm here to help you stay connected with your care team while you wait.
        </p>
      </div>

      {/* Care journey */}
      <div style={{
        marginTop: 36,
        padding: 20,
        background: 'var(--bg-inset)',
        borderRadius: 16,
      }}>
        <div className="uc" style={{ color: 'var(--ink-4)', marginBottom: 16, fontSize: 10 }}>
          Your care journey
        </div>
        <JourneyStep label="Check-in" time="9:38 PM" status="done"/>
        <JourneyStep label="Initial assessment" time="9:42 PM" status="done"/>
        <JourneyStep label="Waiting for next care interaction" time="52 min so far" status="current"/>
        <JourneyStep label="Provider handoff" time="—" status="upcoming" last/>
      </div>

      <div style={{ flex: 1 }}></div>

      <button className="btn btn--primary btn--full btn--lg" onClick={onNext}>
        Check in with Jessie
      </button>
      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-4)', marginTop: 12 }}>
        Takes about 30 seconds
      </div>
    </div>
  );
}

function JourneyStep({ label, time, status, last }) {
  const dotColor = status === 'done' ? 'var(--accent)' :
                    status === 'current' ? 'var(--ink-1)' :
                    'var(--ink-5)';
  return (
    <div style={{ display: 'flex', gap: 12, position: 'relative', paddingBottom: last ? 0 : 14 }}>
      <div style={{ position: 'relative', flexShrink: 0, width: 16 }}>
        {status === 'done' && (
          <svg width="16" height="16" viewBox="0 0 16 16" style={{ marginTop: 2 }}>
            <circle cx="8" cy="8" r="7" fill="var(--accent)"/>
            <path d="M5 8L7 10L11 6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          </svg>
        )}
        {status === 'current' && (
          <div style={{ width: 12, height: 12, borderRadius: 999, background: 'var(--ink-1)', marginTop: 4, marginLeft: 2, boxShadow: '0 0 0 4px rgba(14,17,22,0.08)' }}></div>
        )}
        {status === 'upcoming' && (
          <div style={{ width: 12, height: 12, borderRadius: 999, border: '1.5px solid var(--ink-5)', marginTop: 4, marginLeft: 2 }}></div>
        )}
        {!last && (
          <div style={{
            position: 'absolute',
            top: 20,
            bottom: -14,
            left: 7,
            borderLeft: `1.5px ${status === 'done' ? 'solid' : 'dashed'} ${status === 'done' ? 'var(--accent)' : 'var(--ink-5)'}`,
            opacity: 0.5,
          }}></div>
        )}
      </div>
      <div style={{ flex: 1, paddingTop: 1 }}>
        <div style={{ fontSize: 13, fontWeight: status === 'current' ? 600 : 500, color: status === 'upcoming' ? 'var(--ink-4)' : 'var(--ink-1)' }}>
          {label}
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 2 }}>
          {time}
        </div>
      </div>
    </div>
  );
}

/* ============================================
   Screen 2 — Check-in
   ============================================ */

function ScreenCheckIn({ onNext }) {
  const [selected, setSelected] = React.useState(null);

  const select = (v) => {
    setSelected(v);
    setTimeout(onNext, 350);
  };

  return (
    <div className="stack" style={{ flex: 1, gap: 0, paddingTop: 12 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 20 }}>
        Check-in · 12:52 AM
      </div>

      <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, marginBottom: 8 }}>
        How are you feeling compared with earlier?
      </h1>
      <p style={{ fontSize: 13, color: 'var(--ink-4)', margin: 0, marginBottom: 32 }}>
        Since your assessment at 9:42 PM.
      </p>

      <div className="stack gap-12">
        <FeelOption emoji="😊" label="Better" value="better" selected={selected} onSelect={select} />
        <FeelOption emoji="😐" label="About the same" value="same" selected={selected} onSelect={select} />
        <FeelOption emoji="😣" label="Worse" value="worse" selected={selected} onSelect={select} recommended />
      </div>

      <div style={{ flex: 1 }}></div>

      <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--ink-4)', marginTop: 16 }}>
        Your responses are private and reviewed by your care team.
      </div>
    </div>
  );
}

function FeelOption({ emoji, label, value, selected, onSelect, recommended }) {
  const isSelected = selected === value;
  return (
    <button
      onClick={() => onSelect(value)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: 16,
        padding: '20px 20px',
        background: isSelected ? 'var(--accent-tint)' : 'var(--bg-card)',
        border: `1.5px solid ${isSelected ? 'var(--accent)' : 'var(--line-2)'}`,
        borderRadius: 16,
        cursor: 'pointer',
        fontFamily: 'inherit',
        textAlign: 'left',
        transition: 'all 120ms ease',
      }}
    >
      <span style={{ fontSize: 28, lineHeight: 1 }}>{emoji}</span>
      <span style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink-1)', flex: 1 }}>{label}</span>
      {isSelected && (
        <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="var(--accent)"/><path d="M6 10L9 13L14 7" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
      )}
    </button>
  );
}

/* ============================================
   Screen 3 — Change capture
   ============================================ */

function ScreenChange({ onNext }) {
  const [text, setText] = React.useState("My chest hurts more than before and now I'm feeling dizzy.");
  const [pain, setPain] = React.useState(8);

  // Red-flag detection — Jessie scans the extracted text for known
  // red-flag concepts (worsening chest pain + dizziness / new focal
  // deficit / SOB / etc). In production this is a rule pass on the
  // extracted symptom set; the demo uses simple keyword presence.
  const lowered = text.toLowerCase();
  const redFlag = (
    (lowered.includes('chest') && (lowered.includes('worse') || lowered.includes('more'))) ||
    lowered.includes('dizzy') ||
    lowered.includes('short of breath') ||
    lowered.includes('numb')
  );

  return (
    <div className="stack" style={{ flex: 1, gap: 0, paddingTop: 12 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 20 }}>
        Tell me what's changed
      </div>

      <h1 className="serif" style={{ fontSize: 26, lineHeight: 1.2, letterSpacing: '-0.02em', margin: 0, marginBottom: 20 }}>
        You can type, speak, or tap.
      </h1>

      {/* Voice + text input */}
      <div style={{
        background: 'var(--bg-inset)',
        borderRadius: 16,
        padding: 16,
        marginBottom: 20,
      }}>
        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          rows={3}
          style={{
            width: '100%',
            border: 'none',
            background: 'transparent',
            resize: 'none',
            outline: 'none',
            fontFamily: 'inherit',
            fontSize: 15,
            lineHeight: 1.5,
            color: 'var(--ink-1)',
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: 'var(--bg-card)', border: '1px solid var(--line-2)',
            padding: '6px 12px', borderRadius: 999,
            fontFamily: 'inherit', fontSize: 12, color: 'var(--ink-2)', cursor: 'pointer',
          }}>
            <svg width="10" height="12" viewBox="0 0 10 12" fill="none">
              <rect x="3" y="0.5" width="4" height="7" rx="2" fill="var(--accent)"/>
              <path d="M1 6C1 8.20914 2.79086 10 5 10C7.20914 10 9 8.20914 9 6" stroke="var(--ink-3)" strokeWidth="1" strokeLinecap="round"/>
              <path d="M5 10V12" stroke="var(--ink-3)" strokeWidth="1" strokeLinecap="round"/>
            </svg>
            Speak instead
          </button>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>{text.length} chars</span>
        </div>
      </div>

      {/* Red-flag detection banner — appears inline as Jessie extracts the text.
          Distinct from the routine "meaningful change" path: routes DIRECTLY to
          a nurse page, not to In Basket. Uses red signal color, not lime. */}
      {redFlag && (
        <div style={{
          display: 'grid',
          gridTemplateColumns: '20px 1fr',
          gap: 10,
          padding: '12px 14px',
          background: 'var(--sig-red-tint)',
          border: '1px solid rgba(180, 35, 24, 0.32)',
          borderRadius: 12,
          marginBottom: 20,
        }}>
          <svg width="20" height="20" viewBox="0 0 20 20" style={{ marginTop: 1 }}>
            <path d="M10 2 L18 17 L2 17 Z" fill="none" stroke="var(--sig-red)" strokeWidth="1.6" strokeLinejoin="round"/>
            <path d="M10 8 V12" stroke="var(--sig-red)" strokeWidth="1.6" strokeLinecap="round"/>
            <circle cx="10" cy="14.2" r="0.9" fill="var(--sig-red)"/>
          </svg>
          <div>
            <div style={{
              fontFamily: 'var(--mono)',
              fontSize: 10,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: 'var(--sig-red)',
              fontWeight: 700,
              marginBottom: 3,
            }}>
              Red-flag symptom detected
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-1)', lineHeight: 1.45, fontWeight: 500 }}>
              Worsening chest pain + dizziness. Jessie will page a nurse directly instead of routing to In Basket.
            </div>
          </div>
        </div>
      )}

      {/* Quick pain */}
      <div className="uc" style={{ color: 'var(--ink-4)', marginBottom: 10, fontSize: 10 }}>
        Pain right now
      </div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
        {[1,2,3,4,5,6,7,8,9,10].map(n => (
          <button
            key={n}
            onClick={() => setPain(n)}
            style={{
              flex: 1,
              padding: '10px 0',
              border: `1.5px solid ${pain === n ? 'var(--accent)' : 'var(--line-2)'}`,
              background: pain === n ? 'var(--accent)' : 'var(--bg-card)',
              color: pain === n ? 'white' : 'var(--ink-2)',
              borderRadius: 8,
              fontFamily: 'var(--serif)',
              fontSize: 15,
              cursor: 'pointer',
              fontWeight: 500,
            }}
          >
            {n}
          </button>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-4)', marginBottom: 20 }}>
        <span>None</span>
        <span>Was 5 at triage</span>
        <span>Worst</span>
      </div>

      <div style={{ flex: 1 }}></div>

      <button
        className="btn btn--primary btn--full btn--lg"
        onClick={onNext}
        style={redFlag ? {
          background: 'var(--sig-red)',
          borderColor: 'var(--sig-red)',
        } : undefined}
      >
        {redFlag ? 'Page my care team now' : 'Send to my care team'}
      </button>
    </div>
  );
}

/* ============================================
   Screen 4 — Structured change (the aha moment)
   ============================================ */

function ScreenCaptured() {
  return (
    <div className="stack" style={{ flex: 1, gap: 0, paddingTop: 12, overflow: 'auto' }} data-screen-label="Patient · Structured change">
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
        <svg width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="var(--accent)"/><path d="M5 8L7 10L11 6" stroke="white" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        <span className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--ink-4)', textTransform: 'uppercase' }}>
          Update captured
        </span>
      </div>

      <h1 className="serif" style={{ fontSize: 22, lineHeight: 1.2, margin: 0, marginBottom: 6, color: 'var(--ink-1)' }}>
        Here's what changed
      </h1>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginBottom: 24 }}>
        Compared to your assessment at 9:42 PM
      </div>

      {/* THE DELTA — hero moment */}
      <div style={{
        padding: '28px 20px',
        background: 'var(--bg-inset)',
        borderRadius: 20,
        marginBottom: 12,
      }}>
        <div className="uc" style={{ color: 'var(--ink-4)', marginBottom: 8, fontSize: 10 }}>Pain</div>
        <div className="delta delta--lg" style={{ fontSize: 68 }}>
          <span className="delta__from">5</span>
          <span className="delta__arrow">→</span>
          <span className="delta__to">8</span>
        </div>
      </div>

      <div style={{
        padding: '20px',
        background: 'var(--bg-inset)',
        borderRadius: 20,
        marginBottom: 12,
      }}>
        <div className="uc" style={{ color: 'var(--ink-4)', marginBottom: 10, fontSize: 10 }}>New symptom</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="chip-new">New</span>
          <span className="serif" style={{ fontSize: 28, color: 'var(--ink-1)' }}>Dizziness</span>
        </div>
      </div>

      <div style={{
        padding: '16px 20px',
        background: 'var(--bg-inset)',
        borderRadius: 20,
        marginBottom: 24,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}>
        <span className="uc" style={{ color: 'var(--ink-4)', fontSize: 10 }}>Reported</span>
        <span className="mono" style={{ fontSize: 14, color: 'var(--ink-1)', fontWeight: 500 }}>12:52 AM</span>
      </div>

      <div style={{
        padding: 16,
        borderRadius: 12,
        background: 'var(--accent-tint)',
        color: 'var(--accent-ink)',
        fontSize: 13,
        lineHeight: 1.5,
        display: 'flex',
        gap: 12,
        alignItems: 'flex-start',
        marginBottom: 12,
      }}>
        <svg width="16" height="16" viewBox="0 0 16 16" style={{ flexShrink: 0, marginTop: 2 }}>
          <circle cx="8" cy="8" r="7" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
          <path d="M8 4V9" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round"/>
          <circle cx="8" cy="11.5" r="0.8" fill="var(--accent)"/>
        </svg>
        <div>
          Your update has been added to your care timeline. A member of your team will review it.
        </div>
      </div>

      {/* Human-in-the-loop close — the clinician actually looked at it.
          Completes the story arc: capture → structure → route → HUMAN REVIEW.
          Shows Jessie's guardrail as a felt thing, not a bullet point. */}
      <div style={{
        padding: '14px 16px',
        borderRadius: 12,
        background: 'var(--bg-card)',
        border: '1px solid var(--line-2)',
        display: 'flex',
        gap: 12,
        alignItems: 'center',
      }}>
        {/* small clinician avatar chip */}
        <div style={{
          flexShrink: 0,
          width: 32,
          height: 32,
          borderRadius: 999,
          background: 'var(--ink-1)',
          color: 'var(--accent)',
          display: 'grid',
          placeItems: 'center',
          fontFamily: 'var(--sans)',
          fontSize: 12,
          fontWeight: 700,
          letterSpacing: '-0.01em',
        }}>
          KM
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mono" style={{
            fontSize: 10,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            color: 'var(--ink-4)',
            fontWeight: 600,
            marginBottom: 3,
          }}>
            12:58 AM · Human review
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-1)', lineHeight: 1.35, fontWeight: 500 }}>
            RN Kim opened your update.
          </div>
        </div>
        {/* animated live-dot */}
        <div style={{
          flexShrink: 0,
          width: 8,
          height: 8,
          borderRadius: 999,
          background: 'var(--accent)',
          boxShadow: '0 0 0 4px var(--accent-tint)',
        }}/>
      </div>

      <div style={{ flex: 1, minHeight: 12 }}></div>
    </div>
  );
}

/* ============================================
   Side annotation — reads like a designer's notes
   ============================================ */

function ScreenAnnotation({ screen }) {
  const notes = {
    1: {
      title: 'Language before anything else.',
      body: 'The very first screen is not a form — it\'s a greeting. Atronics + Jessie identify themselves, the headline swaps to the chosen language, and the patient picks how they want the entire session to happen. Everything downstream inherits this choice.',
      pts: [
        ['Language first', 'Set once. Every downstream screen and check-in respects the choice.'],
        ['Native + English label', 'Each option shows its own script alongside the English name so patients can find their language even if the UI is still in English.'],
        ['Atronics identity', 'The Atronics mark and wordmark set the trust context before the first ask.'],
      ],
    },
    2: {
      title: 'Structured from the first tap.',
      body: 'The initial check-in captures the identity, age, chief complaint, and baseline pain reading that every downstream comparison depends on. Photo ID and insurance are surfaced as optional captures on the same screen so the front desk can skip the paperwork loop for patients who complete them. Every future update from Jessie is a delta against this baseline record.',
      pts: [
        ['Required fields', 'Name · DOB · Reason · Pain — the minimum viable clinical snapshot'],
        ['Baseline pain', 'The 0–10 scale captured here becomes the reference for every reassessment'],
        ['Optional captures', 'Photo ID and insurance card — reduce front-desk friction without gating clinical intake'],
        ['Native inputs', 'Text · date · scale — no custom form widgets, no learning curve'],
      ],
    },
    3: {
      title: 'The patient number is a real thing.',
      body: 'Airline-boarding-pass moment. The patient just gave Jessie their identity — now Jessie hands them a claim ticket. "You are Patient 1042" is the bridge between the digital intake and the physical waiting room. When the nurse calls the number, the patient knows it\'s theirs.',
      pts: [
        ['Hero number', 'Displayed at 84px — the same tabular-numeral treatment as the 5 → 8 delta glyph'],
        ['Echo of intake', 'Name · DOB · chief complaint quoted back so the patient can verify what Jessie captured'],
        ['QR + "show this to the front desk"', 'The card is physical utility, not decoration — front desk scans to pull the encounter'],
        ['Number sourcing', 'In production, minted by the EHR when the encounter opens. Demo hardcodes 1042 to match the rest of the mockup.'],
      ],
    },
    4: {
      title: 'Continuity, not chatter.',
      body: 'The care-journey screen shows the patient exactly where they are — three completed steps, one in-progress, one ahead. Jessie is a checkpoint on that path, not a separate destination.',
      pts: [
        ['Care journey', 'Renders the encounter graph the ED already runs on'],
        ['Time-stamped steps', 'Continuity is expressed in real timestamps, not abstract statuses'],
        ['Single primary action', 'One button. The rest is transparency.'],
      ],
    },
    5: {
      title: 'Zero-effort input.',
      body: 'The first question is the only one Jessie asks by default. "Worse" opens more structured capture; "Better" or "Same" completes the check-in in under 10 seconds. Configurable per organization.',
      pts: [
        ['Three states', 'Better · Same · Worse — the smallest useful vocabulary of change'],
        ['Auto-advance on select', 'No confirmation tap. Patients waiting are not patient with forms.'],
        ['Comparative framing', '"Compared with earlier" — every question is grounded in prior state'],
      ],
    },
    6: {
      title: 'Natural language, structured — with a safety branch.',
      body: 'The patient speaks or types. Jessie extracts pain and symptoms into the schema the care team already uses. When the extraction hits a red-flag concept — worsening chest pain, dizziness, focal deficit, SOB — the routing switches: not In Basket, but a direct nurse page. The button label and color change so the patient sees the shift too.',
      pts: [
        ['Voice + text + tap', 'Three input paths — Jessie meets the patient where they are'],
        ['Numeric pain rescale', 'Anchored to the triage value (5) so the delta is obvious'],
        ['Original words preserved', 'The clinician sees both quote and structured data'],
        ['Red-flag branch', 'Rule-first detection on the extracted symptom set. Bypasses In Basket. This is the safety story CMOs will ask about.'],
      ],
    },
    7: {
      title: 'This is the product.',
      body: 'Not the conversation. Not the chatbot. The ability to compare 12:52 AM to 9:42 PM and surface only what is different. The 5 → 8 is the entire thesis of Atronics in one glyph — and the loop closes with a human, not the model, opening the update.',
      pts: [
        ['Longitudinal comparison', 'Jessie remembers the earlier state and quantifies the delta'],
        ['Reassurance without over-promising', 'Update was captured — a human decides what happens next'],
        ['Same visual language as the care team', 'Patient and clinician see the same shape of change'],
        ['Human-in-the-loop close', '"RN Kim opened your update" — the guardrail as a felt moment, not a bullet point'],
      ],
    },
  };
  const n = notes[screen];
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 12 }}>
        Design note · 0{screen}
      </div>
      <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, marginBottom: 16 }}>
        {n.title}
      </h3>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--ink-3)', margin: 0, marginBottom: 28, maxWidth: '54ch' }}>
        {n.body}
      </p>
      <div className="stack gap-16">
        {n.pts.map(([label, body], i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 20, paddingTop: 16, borderTop: '1px solid var(--line-1)' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--ink-3)', textTransform: 'uppercase', fontWeight: 600 }}>
              {label}
            </div>
            <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>
              {body}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================
   Patient Timeline
   ============================================ */

function PatientTimeline() {
  return (
    <div>
      <div className="continuity" style={{ marginBottom: 24 }}>
        <span>Longitudinal view</span>
        <span className="continuity__line"></span>
        <span>Patient 1042 · today</span>
      </div>

      <h3 className="serif" style={{ fontSize: 42, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0, marginBottom: 12, maxWidth: '20ch' }}>
        Your care, as a movie — not a snapshot.
      </h3>
      <p style={{ fontSize: 16, color: 'var(--ink-3)', margin: 0, marginBottom: 40, maxWidth: '54ch' }}>
        Information persists across time. Every encounter and every check-in builds on the last.
      </p>

      <div style={{
        background: 'var(--bg-elevated)',
        border: '1px solid var(--line-1)',
        borderRadius: 22,
        padding: '40px 48px',
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 32 }}>
          <div style={{ position: 'sticky', top: 20, alignSelf: 'start' }}>
            <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 6 }}>Patient</div>
            <div className="serif" style={{ fontSize: 32, letterSpacing: '-0.02em', color: 'var(--ink-1)' }}>1042</div>
            <div style={{ marginTop: 20, fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5 }}>
              <div><strong style={{ color: 'var(--ink-2)' }}>Age</strong> · 54</div>
              <div><strong style={{ color: 'var(--ink-2)' }}>Chief complaint</strong> · Chest discomfort</div>
              <div><strong style={{ color: 'var(--ink-2)' }}>ESI</strong> · 3</div>
              <div><strong style={{ color: 'var(--ink-2)' }}>Location</strong> · Waiting · Zone B</div>
            </div>
          </div>

          <div className="tl">
            <div className="tl__row">
              <div className="tl__dot"></div>
              <div className="tl__time">9:42 PM · Initial assessment</div>
              <div className="tl__title">Triage complete</div>
              <div className="tl__body">
                Pain <strong style={{ color: 'var(--ink-1)' }}>5/10</strong> · No dizziness reported · Vitals within normal range · Chief complaint documented
              </div>
            </div>

            <div className="tl__row">
              <div className="tl__dot"></div>
              <div className="tl__time">10:18 PM · Jessie check-in</div>
              <div className="tl__title">No meaningful change reported</div>
              <div className="tl__body">
                Patient reported feeling "about the same." Auto-closed. No update surfaced to care team.
              </div>
            </div>

            <div className="tl__row">
              <div className="tl__dot"></div>
              <div className="tl__time">11:04 PM · Jessie check-in</div>
              <div className="tl__title">No meaningful change reported</div>
              <div className="tl__body">
                Patient reported feeling "about the same." Auto-closed.
              </div>
            </div>

            <div className="tl__row" style={{ paddingBottom: 32 }}>
              <div className="tl__dot tl__dot--sig"></div>
              <div className="tl__time" style={{ color: 'var(--sig-red)' }}>12:52 AM · CHANGE DETECTED</div>
              <div className="tl__title" style={{ fontSize: 16, marginBottom: 12 }}>Patient reports worsening symptoms</div>

              <div style={{ padding: '16px 18px', background: 'var(--bg-card)', border: '1px solid var(--line-1)', borderRadius: 12, marginBottom: 14 }}>
                <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 8 }}>Patient's words</div>
                <div className="serif" style={{ fontSize: 18, fontStyle: 'italic', color: 'var(--ink-1)', lineHeight: 1.4 }}>
                  "My chest hurts more than before and now I'm feeling dizzy."
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <div style={{ padding: '14px 16px', background: 'var(--bg-card)', border: '1px solid var(--line-2)', borderRadius: 12 }}>
                  <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 6 }}>Pain</div>
                  <div className="delta delta--md">
                    <span className="delta__from">5</span>
                    <span className="delta__arrow">→</span>
                    <span className="delta__to">8</span>
                  </div>
                </div>
                <div style={{ padding: '14px 16px', background: 'var(--bg-card)', border: '1px solid var(--line-2)', borderRadius: 12 }}>
                  <div className="uc" style={{ color: 'var(--ink-4)', fontSize: 10, marginBottom: 6 }}>New symptom</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span className="chip-new">New</span>
                    <span className="serif" style={{ fontSize: 22, color: 'var(--ink-1)' }}>Dizziness</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="tl__row">
              <div className="tl__dot tl__dot--accent"></div>
              <div className="tl__time">1:03 AM · Update reviewed</div>
              <div className="tl__title">RN Rodríguez acknowledged</div>
              <div className="tl__body">
                Routed per the ED chest-pain reassessment workflow. Provider notified. Patient re-evaluated within 8 minutes.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.PatientApp = PatientApp;