// Otto landing — features, signals, risk, devices, care sections

// SECTION: WHAT OTTO SEES (live signals)
function SectionSignals() {
  return (
    <section id="signals" style={{ padding: 'clamp(80px, 10vw, 160px) 0', position: 'relative' }}>
      <Container max={1320}>
        <div style={{ maxWidth: 820, marginBottom: 'clamp(40px, 5vw, 72px)' }}>
          <Reveal><MarkerLabel>What Otto sees</MarkerLabel></Reveal>
          <Reveal delay={120}>
            <Headline size="lg" style={{ marginTop: 22 }}>
              The whole picture,<br/>
              <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>not just one number.</span>
            </Headline>
          </Reveal>
          <Reveal delay={260}>
            <Lede style={{ marginTop: 24 }}>
              Your watch knows your heart. Your scale knows your weight. Your labs know your blood.
              Otto is the first thing that knows them all together — and how they change with you.
            </Lede>
          </Reveal>
        </div>

        {/* Big signals grid */}
        <div className="otto-signals-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
          gap: 16,
        }}>
          {/* Heart card — wide */}
          <Reveal style={{ gridColumn: 'span 7' }}>
            <SignalCard
              label="Heart rate"
              value="68" unit="bpm"
              sub="Resting · 7-day average 71"
              pill={{ tone: 'sage', text: 'Normal range' }}
              chart={<Spark values={[72,68,66,70,74,68,65,68,70,68,67,68]} w={500} h={92} fill={true} color={OttoTokens.sage}/>}
              full
            />
          </Reveal>
          {/* HRV trending down */}
          <Reveal delay={120} style={{ gridColumn: 'span 5' }}>
            <SignalCard
              label="Heart rate variability"
              value="42" unit="ms"
              sub="Below your baseline of 52"
              pill={{ tone: 'amber', text: 'Declining' }}
              note="Stress and short sleep can lower HRV. Otto is keeping watch — no action needed yet."
              noteTone="amber"
            />
          </Reveal>

          {/* Sleep */}
          <Reveal style={{ gridColumn: 'span 5' }}>
            <SignalCard
              label="Last night"
              value="6h 8m"
              sub="Snoring 38 min · 2 SpO₂ dips"
              pill={{ tone: 'amber', text: 'Worth screening' }}
              chart={<div style={{ display: 'flex', height: 28, marginTop: 4, borderRadius: 8, overflow: 'hidden', width: '100%' }}>
                <div style={{ width: '12%', background: '#5A7E92' }}/>
                <div style={{ width: '18%', background: '#7FA0B5' }}/>
                <div style={{ width: '40%', background: '#A8C2D2' }}/>
                <div style={{ width: '14%', background: OttoTokens.amber, opacity: 0.7 }}/>
                <div style={{ width: '16%', background: '#7FA0B5' }}/>
              </div>}
            />
          </Reveal>
          {/* Body */}
          <Reveal delay={120} style={{ gridColumn: 'span 7' }}>
            <BodyCard/>
          </Reveal>
        </div>

        {/* Small caption */}
        <Reveal delay={300}>
          <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }}>
            <LiveDot/>
            <span style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 600, letterSpacing: 0.4 }}>
              Synced from your devices in the last few minutes — never sold, never shared.
            </span>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

function SignalCard({ label, value, unit, sub, pill, chart, note, noteTone, full }) {
  return (
    <div style={{
      background: OttoTokens.surface, borderRadius: OttoTokens.rXL,
      padding: 'clamp(24px, 2vw, 32px)',
      boxShadow: '0 1px 0 rgba(28,26,23,0.04), 0 12px 32px -16px rgba(28,26,23,0.10)',
      height: '100%', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div>
          <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>{label}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 12 }}>
            <span style={{ fontFamily: OttoTokens.serif, fontSize: 'clamp(40px, 4.4vw, 64px)', color: OttoTokens.ink, letterSpacing: -1, lineHeight: 1, whiteSpace: 'nowrap' }}>{value}</span>
            {unit && <span style={{ fontFamily: OttoTokens.sans, fontSize: 18, color: OttoTokens.inkMuted }}>{unit}</span>}
          </div>
          <div style={{ fontFamily: OttoTokens.sans, fontSize: 15, color: OttoTokens.inkMuted, marginTop: 10 }}>{sub}</div>
        </div>
        {pill && <Pill tone={pill.tone}>{pill.text}</Pill>}
      </div>
      {chart && <div style={{ marginTop: 'auto', paddingTop: 24 }}>{chart}</div>}
      {note && (
        <div style={{
          marginTop: 18, padding: '14px 16px', borderRadius: 16,
          background: noteTone === 'amber' ? OttoTokens.amberSoft : OttoTokens.sageSoft,
          color: noteTone === 'amber' ? '#7A5524' : OttoTokens.sageDeep,
          fontFamily: OttoTokens.sans, fontSize: 14, lineHeight: 1.5,
        }}>{note}</div>
      )}
    </div>
  );
}

function BodyCard() {
  const items = [
    { l: 'Weight', v: '185', u: 'lbs' },
    { l: 'BMI', v: '27.4', u: '' },
    { l: 'Body fat', v: '24.2', u: '%' },
    { l: 'Visceral', v: '9', u: 'lvl', alert: true },
  ];
  return (
    <div style={{
      background: OttoTokens.surface, borderRadius: OttoTokens.rXL,
      padding: 'clamp(24px, 2vw, 32px)',
      boxShadow: '0 1px 0 rgba(28,26,23,0.04), 0 12px 32px -16px rgba(28,26,23,0.10)',
      height: '100%',
    }}>
      <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>
        Body composition · this morning
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 22 }}>
        {items.map(m => (
          <div key={m.l}>
            <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle }}>{m.l}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
              <span style={{ fontFamily: OttoTokens.serif, fontSize: 'clamp(28px, 2.4vw, 38px)', color: m.alert ? OttoTokens.amber : OttoTokens.ink, lineHeight: 1 }}>{m.v}</span>
              <span style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkSubtle }}>{m.u}</span>
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 22, padding: '14px 16px', borderRadius: 16,
        background: OttoTokens.surfaceAlt,
        fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, lineHeight: 1.5,
      }}>
        Visceral fat is the one Otto watches most carefully — it tracks closely with diabetes risk.
      </div>
    </div>
  );
}

// SECTION: RISKS / WHAT OTTO WATCHES
function SectionRisks() {
  const risks = [
    { name: 'Pre-diabetes', score: 68, tone: 'amber', status: 'Elevated', why: 'A1c 5.8 · visceral fat lvl 9 · post-meal fatigue' },
    { name: 'Hypertension', score: 71, tone: 'clay', status: 'Elevated', why: 'BP 138/88 · 3-day uptrend · BMI 27.4' },
    { name: 'Cardiovascular', score: 45, tone: 'amber', status: 'Moderate', why: 'LDL 142 · low HRV · family history of MI at 62' },
    { name: 'Sleep apnea', score: 38, tone: 'amber', status: 'Worth screening', why: 'Snoring 38 min · 2 overnight SpO₂ dips below 90%' },
    { name: 'Cognitive', score: 12, tone: 'sage', status: 'Watching', why: 'Baseline being established — no concerns yet' },
  ];

  return (
    <section style={{
      padding: 'clamp(80px, 10vw, 160px) 0',
      background: OttoTokens.surfaceAlt,
      borderTop: `0.5px solid ${OttoTokens.hairline}`,
      borderBottom: `0.5px solid ${OttoTokens.hairline}`,
    }}>
      <Container max={1320}>
        <div className="otto-risks-grid" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(40px, 6vw, 96px)',
          alignItems: 'flex-start',
        }}>
          {/* Left copy */}
          <div style={{ position: 'sticky', top: 120 }}>
            <Reveal><MarkerLabel tone="amber">Otto watches, gently</MarkerLabel></Reveal>
            <Reveal delay={120}>
              <Headline size="lg" style={{ marginTop: 22 }}>
                Five things worth<br/>
                <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>watching</span> — long before they're worth worrying about.
              </Headline>
            </Reveal>
            <Reveal delay={260}>
              <Lede style={{ marginTop: 24 }}>
                Otto reads the trends in your numbers, your habits, and your family history. When something starts to drift, you'll know in plain language — not as a panic, but as a quiet nudge.
              </Lede>
            </Reveal>
            <Reveal delay={400}>
              <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'Trends across weeks, not snapshots',
                  'Plain-English reasons for every flag',
                  'Suggests the next test, not a diagnosis',
                ].map(l => (
                  <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: OttoTokens.sans, fontSize: 17, color: OttoTokens.ink }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: '50%',
                      background: OttoTokens.sageSoft, color: OttoTokens.sageDeep,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 13, fontWeight: 700, flexShrink: 0,
                    }}>✓</span>
                    {l}
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          {/* Right risk cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {risks.map((r, i) => (
              <Reveal key={r.name} delay={i * 80}>
                <RiskRow risk={r}/>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

function RiskRow({ risk: r }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); }}, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const c = r.tone === 'clay' ? OttoTokens.clay : r.tone === 'amber' ? OttoTokens.amber : OttoTokens.sage;
  return (
    <div ref={ref} style={{
      background: OttoTokens.surface, borderRadius: OttoTokens.rLg,
      padding: '22px 26px',
      boxShadow: '0 1px 0 rgba(28,26,23,0.04), 0 8px 24px -16px rgba(28,26,23,0.10)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
        <Dot tone={r.tone}/>
        <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{r.status}</span>
        <span style={{ flex: 1 }}/>
        <span style={{ fontFamily: OttoTokens.serif, fontSize: 24, color: OttoTokens.ink }}>{r.score}<span style={{ color: OttoTokens.inkSubtle, fontSize: 14, fontFamily: OttoTokens.sans }}>/100</span></span>
      </div>
      <div style={{ fontFamily: OttoTokens.serif, fontSize: 26, color: OttoTokens.ink, letterSpacing: -0.3, marginBottom: 10 }}>{r.name}</div>
      <div style={{ height: 6, background: 'rgba(28,26,23,0.06)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{
          height: '100%', width: shown ? `${r.score}%` : '0%',
          background: c, borderRadius: 3,
          transition: 'width 1100ms cubic-bezier(.2,.8,.2,1)',
        }}/>
      </div>
      <div style={{ marginTop: 14, fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkMuted, lineHeight: 1.5 }}>
        <span style={{ fontWeight: 700, color: OttoTokens.inkSubtle, fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', marginRight: 8 }}>Why</span>
        {r.why}
      </div>
    </div>
  );
}

// SECTION: HOW OTTO LISTENS (devices + inputs)
function SectionInputs() {
  const inputs = [
    { icon: '⌚', t: 'Apple Watch', sub: 'Heart, ECG, sleep, SpO₂, falls' },
    { icon: '⚖', t: 'Smart scale', sub: 'Weight, body comp, vascular age' },
    { icon: '🚴', t: 'Strava & Apple Fitness', sub: 'Steps, VO₂max, routes' },
    { icon: '🩸', t: 'Lab test scans', sub: 'Photograph any PDF or paper result' },
    { icon: '💬', t: 'Text check-ins', sub: 'A short conversation, when life shifts' },
    { icon: '🎙', t: 'Voice & video calls', sub: 'Otto rings if a number is worrying' },
    { icon: '📅', t: 'Online appointments', sub: 'Book a clinician or test in two taps' },
    { icon: '👨‍👩‍👧', t: 'Family history', sub: 'Parents, siblings, what they had when' },
  ];
  return (
    <section id="how" style={{ padding: 'clamp(80px, 10vw, 160px) 0' }}>
      <Container max={1320}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', maxWidth: 820, margin: '0 auto' }}>
          <Reveal><MarkerLabel>How Otto listens</MarkerLabel></Reveal>
          <Reveal delay={120}>
            <Headline size="lg" style={{ marginTop: 22 }}>
              Eight quiet inputs.<br/>
              <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>One careful mind.</span>
            </Headline>
          </Reveal>
          <Reveal delay={260}>
            <Lede style={{ marginTop: 24 }}>
              You don't need to learn anything new. Otto sits between the things you already wear, weigh on, and do — and brings the picture together.
            </Lede>
          </Reveal>
        </div>

        <div className="otto-inputs-grid" style={{
          marginTop: 'clamp(48px, 6vw, 80px)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
        }}>
          {inputs.map((i, idx) => (
            <Reveal key={i.t} delay={idx * 50}>
              <div style={{
                background: OttoTokens.surface, borderRadius: OttoTokens.rLg,
                padding: '28px 24px', height: '100%',
                boxShadow: '0 1px 0 rgba(28,26,23,0.04), 0 8px 24px -18px rgba(28,26,23,0.08)',
                transition: 'transform 240ms ease, box-shadow 240ms ease',
                cursor: 'default',
              }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(28,26,23,0.04), 0 18px 40px -18px rgba(28,26,23,0.18)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 1px 0 rgba(28,26,23,0.04), 0 8px 24px -18px rgba(28,26,23,0.08)'; }}
              >
                <div style={{
                  width: 56, height: 56, borderRadius: 18,
                  background: OttoTokens.sageSoft,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 28, marginBottom: 16,
                }}>{i.icon}</div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 18, fontWeight: 600, color: OttoTokens.ink }}>{i.t}</div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 15, color: OttoTokens.inkMuted, marginTop: 6, lineHeight: 1.4 }}>{i.sub}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// SECTION: PREVENTIVE & CARE
function SectionCare() {
  return (
    <section id="care" style={{
      padding: 'clamp(80px, 10vw, 160px) 0',
      background: 'linear-gradient(180deg, #F4F0E8 0%, #E9E2D2 100%)',
    }}>
      <Container max={1320}>
        <div className="otto-care-grid" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 0.95fr) minmax(0, 1fr)',
          gap: 'clamp(40px, 6vw, 96px)', alignItems: 'center',
        }}>
          {/* Left: phone */}
          <div className="otto-care-phone" style={{ display: 'flex', justifyContent: 'center' }}>
            <img
              src="assets/phone-preventive.png"
              alt="Otto preventive care screen"
              style={{ width: '100%', maxWidth: 406, height: 'auto', display: 'block', borderRadius: 56 }}
            />
          </div>
          {/* Right: copy */}
          <div>
            <Reveal><MarkerLabel>From flag to action</MarkerLabel></Reveal>
            <Reveal delay={120}>
              <Headline size="lg" style={{ marginTop: 22 }}>
                Otto knows what's<br/>
                <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>overdue.</span> And helps book it.
              </Headline>
            </Reveal>
            <Reveal delay={260}>
              <Lede style={{ marginTop: 24 }}>
                Routine bloodwork, DEXA, retinal scans, cardiology — Otto keeps a private calendar of everything you've done and everything that's quietly due. Two taps and a clinician's on the phone, or a lab is reserved for Tuesday at 8.
              </Lede>
            </Reveal>

            <Reveal delay={400}>
              <div style={{
                marginTop: 36, padding: '24px 28px',
                background: OttoTokens.surface, borderRadius: OttoTokens.rLg,
                boxShadow: '0 1px 0 rgba(28,26,23,0.04), 0 12px 32px -18px rgba(28,26,23,0.12)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <Dot tone="sage"/>
                  <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.sageDeep, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase' }}>What Otto would do next</span>
                </div>
                <div style={{ fontFamily: OttoTokens.serif, fontSize: 22, color: OttoTokens.ink, lineHeight: 1.35 }}>
                  Book your overdue A1c and lipid panel. The other risks improve in step with these two.
                </div>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 18 }}>
                  <button style={{
                    padding: '12px 20px', borderRadius: 999, border: 'none', cursor: 'pointer',
                    background: OttoTokens.sage, color: '#fff',
                    fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 600,
                  }}>Book Tuesday 8am</button>
                  <button style={{
                    padding: '12px 20px', borderRadius: 999, cursor: 'pointer',
                    background: 'transparent', color: OttoTokens.ink,
                    border: '1px solid rgba(28,26,23,0.18)',
                    fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 600,
                  }}>See alternatives</button>
                </div>
              </div>
            </Reveal>

            <Reveal delay={540}>
              <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
                {[
                  { n: 74, l: 'Coverage of your top risks', s: '%' },
                  { n: 12, l: 'Tests Otto tracks for you', s: '' },
                  { n: 2, l: 'Taps to book a real clinician', s: '' },
                ].map(s => (
                  <div key={s.l}>
                    <div style={{ fontFamily: OttoTokens.serif, fontSize: 'clamp(40px, 4vw, 56px)', color: OttoTokens.ink, lineHeight: 1, letterSpacing: -1 }}>
                      <CountUpInView to={s.n} suffix={s.s}/>
                    </div>
                    <div style={{ fontFamily: OttoTokens.sans, fontSize: 13, color: OttoTokens.inkMuted, marginTop: 8, lineHeight: 1.4 }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { SectionSignals, SectionRisks, SectionInputs, SectionCare });