// Otto landing — coach quote, pricing, FAQ, footer

// SECTION: HOW IT WORKS — three steps
function SectionHow() {
  const steps = [
    { n: '01', t: 'Connect what you already use', d: 'Apple Watch, scale, Strava, your last lab results, and more.' },
    { n: '02', t: 'Otto listens for weeks before speaking', d: 'No daily nags. Otto waits until a trend is real, then explains it in plain English.' },
    { n: '03', t: 'Two taps from flag to clinician', d: 'When something needs a person, Otto books a test or a clinician — most of them within 48 hours.' },
  ];
  return (
    <section style={{
      padding: 'clamp(80px, 10vw, 160px) 0',
      background: OttoTokens.ink, color: '#FAF7F1',
    }}>
      <Container max={1320}>
        <div style={{ maxWidth: 760, marginBottom: 'clamp(48px, 6vw, 80px)' }}>
          <Reveal>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontFamily: OttoTokens.sans, fontSize: 13, fontWeight: 600,
              letterSpacing: 1.6, textTransform: 'uppercase', color: 'rgba(250,247,241,0.55)',
            }}>
              <span style={{ width: 24, height: 1, background: OttoTokens.sage }}/>
              How it works
            </div>
          </Reveal>
          <Reveal delay={120}>
            <Headline size="lg" style={{ marginTop: 22, color: '#FAF7F1' }}>
              Three steps,<br/>
              <span style={{ color: 'rgba(250,247,241,0.55)', fontStyle: 'italic' }}>then Otto's just there.</span>
            </Headline>
          </Reveal>
        </div>

        <div className="otto-how-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 120}>
              <div style={{
                padding: '36px 32px', borderRadius: OttoTokens.rLg,
                background: 'rgba(250,247,241,0.04)',
                border: '0.5px solid rgba(250,247,241,0.10)',
                height: '100%',
              }}>
                <div style={{
                  fontFamily: OttoTokens.serif, fontStyle: 'italic',
                  fontSize: 56, color: OttoTokens.sage, lineHeight: 1, letterSpacing: -1,
                }}>{s.n}</div>
                <div style={{
                  fontFamily: OttoTokens.serif, fontSize: 26, color: '#FAF7F1',
                  marginTop: 24, lineHeight: 1.2, letterSpacing: -0.3,
                }}>{s.t}</div>
                <div style={{
                  fontFamily: OttoTokens.sans, fontSize: 16, lineHeight: 1.55,
                  color: 'rgba(250,247,241,0.65)', marginTop: 16,
                }}>{s.d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// SECTION: TESTIMONIAL / EDITORIAL QUOTE
function SectionVoice() {
  return (
    <section style={{ padding: 'clamp(80px, 10vw, 160px) 0' }}>
      <Container max={1080}>
        <Reveal>
          <div style={{
            fontFamily: OttoTokens.serif, fontStyle: 'italic',
            fontSize: 'clamp(28px, 3.6vw, 56px)',
            lineHeight: 1.25, letterSpacing: -0.5,
            color: OttoTokens.ink, textAlign: 'center', textWrap: 'balance',
          }}>
            "I'm 62. My wife is 64. We don't want a dashboard.
            <br/>
            <span style={{ color: OttoTokens.inkMuted }}>We want someone keeping an eye, who tells us when it's time to do something.</span>
            <br/>That's all Otto does. It's enough."
          </div>
        </Reveal>
        <Reveal delay={240}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
            marginTop: 40,
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              background: 'linear-gradient(135deg, #C4B89E, #8C7A60)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: OttoTokens.serif, fontSize: 22, color: '#fff',
            }}>R</div>
            <div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 16, fontWeight: 600, color: OttoTokens.ink }}>Robert &amp; Anne, Portland</div>
              <div style={{ fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle, marginTop: 2 }}>With Otto since November</div>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// SECTION: PRICING
function SectionPricing() {
  const plans = [
    {
      name: 'Otto', kind: 'Quiet companion',
      price: 19, suffix: '/month',
      sub: 'For staying on top of preventive care while you feel well.',
      features: [
        'Connects to your watch, scale & Strava',
        'Weekly trend summary in plain language',
        'Risk flags with sources, never alarms',
        'Lab scan import & timeline',
        'Two-tap booking for routine tests',
      ],
      cta: 'Start with Otto', kindCta: 'primary', featured: false,
    },
    {
      name: 'Otto Care', kind: 'For those managing more',
      price: 49, suffix: '/month',
      sub: 'For people with comorbidities or family history that needs watching.',
      features: [
        'Everything in Otto, plus:',
        'Periodic voice & text check-ins',
        'Otto rings if a number is worrying',
        'Coordinated specialist appointments',
        'Shared view with your spouse or child',
        'Priority video visits, 7 days a week',
      ],
      cta: 'Start Otto Care', kindCta: 'sage', featured: true,
    },
  ];
  return (
    <section id="pricing" style={{
      padding: 'clamp(80px, 10vw, 160px) 0',
      background: OttoTokens.surfaceAlt,
      borderTop: `0.5px solid ${OttoTokens.hairline}`,
    }}>
      <Container max={1180}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
          <Reveal><MarkerLabel>Pricing</MarkerLabel></Reveal>
          <Reveal delay={120}>
            <Headline size="lg" style={{ marginTop: 22 }}>
              Two ways to be<br/>
              <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>quietly looked after.</span>
            </Headline>
          </Reveal>
          <Reveal delay={240}>
            <Lede style={{ marginTop: 22, marginInline: 'auto' }}>
              Cancel anytime. First month free. No data ever sold or shared with your insurer.
            </Lede>
          </Reveal>
        </div>

        <div className="otto-price-grid" style={{
          marginTop: 'clamp(48px, 6vw, 80px)',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
        }}>
          {plans.map((p, i) => (
            <Reveal key={p.name} delay={i * 120}>
              <div style={{
                background: p.featured ? OttoTokens.ink : OttoTokens.surface,
                color: p.featured ? '#FAF7F1' : OttoTokens.ink,
                borderRadius: OttoTokens.rXL,
                padding: 'clamp(28px, 3vw, 44px)',
                height: '100%', display: 'flex', flexDirection: 'column',
                boxShadow: p.featured
                  ? '0 24px 60px -24px rgba(28,26,23,0.45)'
                  : '0 1px 0 rgba(28,26,23,0.04), 0 12px 32px -16px rgba(28,26,23,0.10)',
                border: p.featured ? 'none' : `1px solid ${OttoTokens.hairline}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontFamily: OttoTokens.sans, fontSize: 12, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', color: p.featured ? 'rgba(250,247,241,0.55)' : OttoTokens.inkSubtle }}>
                    {p.kind}
                  </div>
                  {p.featured && <Pill tone="sage" style={{ background: OttoTokens.sage, color: '#fff' }}>Most popular</Pill>}
                </div>
                <div style={{ fontFamily: OttoTokens.serif, fontStyle: 'italic', fontSize: 'clamp(40px, 4vw, 56px)', marginTop: 18, letterSpacing: -1, lineHeight: 1 }}>
                  {p.name}
                </div>
                <div style={{ fontFamily: OttoTokens.sans, fontSize: 16, lineHeight: 1.5, marginTop: 14, color: p.featured ? 'rgba(250,247,241,0.7)' : OttoTokens.inkMuted, maxWidth: 380 }}>
                  {p.sub}
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 28 }}>
                  <span style={{ fontFamily: OttoTokens.serif, fontSize: 'clamp(56px, 6vw, 84px)', letterSpacing: -2, lineHeight: 1 }}>${p.price}</span>
                  <span style={{ fontFamily: OttoTokens.sans, fontSize: 18, color: p.featured ? 'rgba(250,247,241,0.6)' : OttoTokens.inkMuted }}>{p.suffix}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 28, marginBottom: 28 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontFamily: OttoTokens.sans, fontSize: 16, lineHeight: 1.5, color: p.featured ? 'rgba(250,247,241,0.92)' : OttoTokens.ink }}>
                      <span style={{
                        marginTop: 6, width: 6, height: 6, borderRadius: '50%',
                        background: p.featured ? OttoTokens.sage : OttoTokens.sage, flexShrink: 0,
                      }}/>
                      {f}
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 'auto' }}>
                  <a href="#download" style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                    minHeight: 60, padding: '0 28px', borderRadius: 999,
                    background: p.featured ? OttoTokens.sage : OttoTokens.ink,
                    color: '#fff',
                    fontFamily: OttoTokens.sans, fontSize: 17, fontWeight: 600,
                    textDecoration: 'none', letterSpacing: -0.2,
                  }}>{p.cta} →</a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// SECTION: FAQ
function SectionFAQ() {
  const items = [
    { q: 'Is Otto a doctor?', a: 'No. Otto is a careful watcher and a guide. She suggests when to test, when to call, and explains your numbers — but a real clinician makes diagnoses and prescribes treatment. Otto helps you find one and brings them the right context.' },
    { q: 'What devices do I need to start?', a: 'An iPhone (iOS 17+) is enough. Otto works beautifully with Apple Watch, but you can begin without one. As you connect a scale, Strava, or upload a recent lab, Otto gets sharper.' },
    { q: 'How does Otto handle my data?', a: 'Your health data is encrypted, stored only in your iCloud account, and never sold. Otto cannot share anything with your insurer or employer. You can delete everything at any time, in one tap.' },
    { q: 'Will Otto bother me with notifications?', a: 'Almost never. Otto reads trends across days and weeks before saying anything. Most weeks you will see a single quiet summary. She rings only when something genuinely calls for it.' },
    { q: 'My spouse and I want to share Otto. Can we?', a: 'Otto Care includes a partner view — you can grant a spouse, an adult child, or a chosen caregiver a read-only window into your trends and upcoming appointments.' },
    { q: 'I already have a chronic condition. Is Otto for me?', a: 'Yes. Otto Care is built specifically for people managing hypertension, type 2 diabetes, atrial fibrillation, COPD, and similar conditions — keeping a steady eye on the numbers your specialist cares about, between visits.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: 'clamp(80px, 10vw, 160px) 0' }}>
      <Container max={920}>
        <div style={{ textAlign: 'center', marginBottom: 'clamp(40px, 5vw, 72px)' }}>
          <Reveal><MarkerLabel>Common questions</MarkerLabel></Reveal>
          <Reveal delay={120}>
            <Headline size="md" style={{ marginTop: 18 }}>
              Things people ask, before they trust Otto.
            </Headline>
          </Reveal>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {items.map((it, i) => (
            <Reveal key={it.q} delay={i * 50}>
              <div style={{
                borderTop: `0.5px solid ${OttoTokens.hairline}`,
                borderBottom: i === items.length - 1 ? `0.5px solid ${OttoTokens.hairline}` : 'none',
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', padding: '24px 4px', cursor: 'pointer',
                  background: 'transparent', border: 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18,
                  fontFamily: OttoTokens.serif, fontSize: 'clamp(20px, 1.6vw, 24px)',
                  color: OttoTokens.ink, textAlign: 'left',
                  letterSpacing: -0.2, lineHeight: 1.3,
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: '50%',
                    background: open === i ? OttoTokens.ink : 'rgba(28,26,23,0.06)',
                    color: open === i ? '#FAF7F1' : OttoTokens.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                    transition: 'all 200ms ease',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)',
                  }}>
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: open === i ? 320 : 0, overflow: 'hidden',
                  transition: 'max-height 380ms cubic-bezier(.2,.8,.2,1)',
                }}>
                  <div style={{
                    paddingBottom: 28, paddingRight: 60,
                    fontFamily: OttoTokens.sans, fontSize: 17, lineHeight: 1.6,
                    color: OttoTokens.inkMuted,
                  }}>
                    {it.a}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}

// SECTION: BIG CTA
function SectionFinalCTA() {
  return (
    <section id="download" style={{ padding: 'clamp(80px, 10vw, 160px) 0' }}>
      <Container max={1120}>
        <Reveal>
          <div style={{
            background: 'linear-gradient(135deg, #4F7A6F 0%, #365C53 100%)',
            color: '#fff', borderRadius: 'clamp(28px, 3vw, 48px)',
            padding: 'clamp(48px, 6vw, 96px)',
            textAlign: 'center', position: 'relative', overflow: 'hidden',
          }}>
            <div aria-hidden style={{
              position: 'absolute', top: '-30%', left: '-10%',
              width: '40%', aspectRatio: '1/1', borderRadius: '50%',
              background: 'rgba(255,255,255,0.06)', filter: 'blur(40px)',
            }}/>
            <div aria-hidden style={{
              position: 'absolute', bottom: '-30%', right: '-10%',
              width: '40%', aspectRatio: '1/1', borderRadius: '50%',
              background: 'rgba(255,255,255,0.08)', filter: 'blur(40px)',
            }}/>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
                <OttoMark size={32} color="#fff"/>
                <span style={{ fontFamily: OttoTokens.serif, fontStyle: 'italic', fontSize: 22, color: '#fff' }}>Otto</span>
              </div>
              <Headline size="lg" style={{ color: '#fff' }}>
                Begin a quieter<br/>
                <span style={{ color: 'rgba(255,255,255,0.7)', fontStyle: 'italic' }}>relationship</span> with your health.
              </Headline>
              <Lede style={{
                marginInline: 'auto', marginTop: 24,
                color: 'rgba(255,255,255,0.85)',
              }}>
                First month free. Five minutes to set up. Cancel any time.
              </Lede>
              <div style={{ marginTop: 40, display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center' }}>
                <a href="mailto:hello@ottohealth.app" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10,
                  padding: '14px 28px', minHeight: 64, borderRadius: 999,
                  background: 'transparent', color: '#fff',
                  border: '1.5px solid rgba(255,255,255,0.35)',
                  fontFamily: OttoTokens.sans, fontSize: 17, fontWeight: 600,
                  textDecoration: 'none',
                }}>Talk to Us</a>
              </div>
            </div>
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

// FOOTER
function Footer() {
  const cols = [
    { h: 'Otto', l: ['How it works', 'What Otto sees', 'Preventive care', 'Otto Care', 'Pricing'] },
    { h: 'Trust', l: ['Privacy promise', 'Security', 'Clinical advisors', 'Research', 'HIPAA & GDPR'] },
    { h: 'Help', l: ['Get started', 'Setup with a partner', 'Connect a device', 'Contact a person', 'FAQ'] },
    { h: 'Company', l: ['About', 'Careers', 'Press', 'Patient stories', 'Contact'] },
  ];
  return (
    <footer style={{
      background: OttoTokens.ink, color: 'rgba(250,247,241,0.7)',
      padding: '80px 0 40px',
    }}>
      <Container max={1320}>
        <div className="otto-footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr)',
          gap: 'clamp(28px, 3vw, 56px)',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <OttoMark size={32} color="#FAF7F1"/>
              <span style={{ fontFamily: OttoTokens.serif, fontStyle: 'italic', fontSize: 28, color: '#FAF7F1' }}>Otto</span>
            </div>
            <p style={{
              fontFamily: OttoTokens.serif, fontStyle: 'italic',
              fontSize: 18, lineHeight: 1.5, marginTop: 18, maxWidth: 320,
              color: 'rgba(250,247,241,0.55)',
            }}>
              A quiet companion for the rest of your health.
            </p>
            <p style={{
              fontFamily: OttoTokens.serif,
              fontSize: 14, lineHeight: 1.5, marginTop: 18, maxWidth: 320,
              color: 'rgba(250,247,241,0.55)',
            }}>
              hello@ottohealth.app
            </p>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{
                fontFamily: OttoTokens.sans, fontSize: 12, fontWeight: 700,
                letterSpacing: 1.4, textTransform: 'uppercase',
                color: '#FAF7F1', marginBottom: 18,
              }}>{c.h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {c.l.map(li => (
                  <a key={li} href="#" style={{
                    fontFamily: OttoTokens.sans, fontSize: 15,
                    color: 'rgba(250,247,241,0.6)', textDecoration: 'none',
                    transition: 'color 160ms ease',
                  }}
                  onMouseEnter={e => e.currentTarget.style.color = '#FAF7F1'}
                  onMouseLeave={e => e.currentTarget.style.color = 'rgba(250,247,241,0.6)'}
                  >{li}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 80, paddingTop: 24,
          borderTop: '0.5px solid rgba(250,247,241,0.10)',
          display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', gap: 16,
          fontFamily: OttoTokens.sans, fontSize: 13, color: 'rgba(250,247,241,0.45)',
        }}>
          <div>© 2026 Otto Health, Inc.</div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>Otto is not a diagnostic device.</span>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { SectionHow, SectionVoice, SectionPricing, SectionFAQ, SectionFinalCTA, Footer });
