// Otto landing — collapsing header + hero

function Header() {
  const y = useScrollY();
  const [open, setOpen] = React.useState(false);
  const collapsed = y > 40;
  const links = [
    { label: 'How Otto works', href: '#how' },
    { label: 'What Otto sees', href: '#signals' },
    { label: 'Care', href: '#care' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'FAQ', href: '#faq' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: collapsed ? 'rgba(244,240,232,0.82)' : 'rgba(244,240,232,0)',
      backdropFilter: collapsed ? 'blur(20px) saturate(160%)' : 'none',
      WebkitBackdropFilter: collapsed ? 'blur(20px) saturate(160%)' : 'none',
      borderBottom: `0.5px solid ${collapsed ? 'rgba(28,26,23,0.08)' : 'transparent'}`,
      transition: 'background 300ms ease, border-color 300ms ease, backdrop-filter 300ms ease',
    }}>
      <Container max={1320} style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: collapsed ? 64 : 92,
        transition: 'height 300ms cubic-bezier(.2,.8,.2,1)',
      }}>
        {/* Logo */}
        <a href="#" style={{
          display: 'flex', alignItems: 'center', gap: 10,
          textDecoration: 'none', color: OttoTokens.ink,
        }}>
          <div style={{
            transform: collapsed ? 'scale(0.86)' : 'scale(1)',
            transition: 'transform 300ms ease', transformOrigin: 'left center',
          }}>
            <OttoMark size={collapsed ? 28 : 34}/>
          </div>
          <span style={{
            fontFamily: OttoTokens.serif, fontStyle: 'italic',
            fontSize: collapsed ? 22 : 26, fontWeight: 500,
            transition: 'font-size 300ms ease',
          }}>Otto</span>
        </a>

        {/* Nav */}
        <nav className="otto-nav-desktop" style={{
          display: 'flex', alignItems: 'center', gap: 'clamp(18px, 2.4vw, 36px)',
        }}>
          {links.map(l => (
            <a key={l.label} href={l.href} style={{
              fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 500,
              color: OttoTokens.inkMuted, textDecoration: 'none',
              padding: '6px 0', position: 'relative',
              transition: 'color 180ms ease',
            }}
            onMouseEnter={e => e.currentTarget.style.color = OttoTokens.ink}
            onMouseLeave={e => e.currentTarget.style.color = OttoTokens.inkMuted}
            >{l.label}</a>
          ))}
        </nav>

        {/* Right side actions */}
        <div className="otto-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="#signin" style={{
            fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 500,
            color: OttoTokens.ink, textDecoration: 'none', padding: '8px 4px',
          }}>Sign in</a>
          <a href="#download" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: collapsed ? '10px 18px' : '12px 22px',
            borderRadius: 999, background: OttoTokens.ink, color: '#FAF7F1',
            fontFamily: OttoTokens.sans, fontSize: 15, fontWeight: 600,
            textDecoration: 'none',
            transition: 'padding 300ms ease, transform 200ms ease',
          }}
          onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-1px)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
          >
            Get Otto
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8m-3-3l3 3-3 3" stroke="#FAF7F1" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>

        {/* Mobile burger */}
        <button className="otto-nav-mobile" onClick={() => setOpen(!open)} aria-label="Menu" style={{
          display: 'none', width: 44, height: 44, borderRadius: 12,
          background: 'transparent', border: 'none', cursor: 'pointer',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="22" height="16" viewBox="0 0 22 16" fill="none">
            <path d={open ? "M2 2l18 12M2 14L20 2" : "M2 2h18M2 8h18M2 14h18"} stroke={OttoTokens.ink} strokeWidth="1.8" strokeLinecap="round"/>
          </svg>
        </button>
      </Container>

      {/* Mobile dropdown */}
      {open && (
        <div className="otto-nav-mobile-panel" style={{
          background: 'rgba(244,240,232,0.98)',
          backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
          borderTop: '0.5px solid rgba(28,26,23,0.08)',
          padding: '20px 24px 28px',
          animation: 'ottoFade 240ms ease',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {links.map(l => (
              <a key={l.label} href={l.href} onClick={() => setOpen(false)} style={{
                padding: '14px 0', fontFamily: OttoTokens.serif, fontSize: 22,
                color: OttoTokens.ink, textDecoration: 'none',
                borderBottom: `0.5px solid ${OttoTokens.hairline}`,
              }}>{l.label}</a>
            ))}
            <a href="#download" style={{
              marginTop: 20, padding: '16px 0', textAlign: 'center',
              background: OttoTokens.ink, color: '#FAF7F1', borderRadius: 999,
              fontFamily: OttoTokens.sans, fontSize: 16, fontWeight: 600,
              textDecoration: 'none',
            }}>Get Otto</a>
          </div>
        </div>
      )}
    </header>
  );
}

// Hero: editorial headline + phone with floating "thought bubbles" from Otto
function Hero() {
  const y = useScrollY();
  const phoneY = Math.max(-40, -y * 0.08);
  // Scale phone to never exceed available column width on narrow viewports
  const framedPhoneW = 406; // 390px screen + 8px bezel each side
  const phoneScale = Math.min(0.92, (window.innerWidth - 40) / framedPhoneW);

  return (
    <section style={{
      position: 'relative',
      paddingTop: 'clamp(40px, 6vw, 80px)',
      paddingBottom: 'clamp(60px, 8vw, 120px)',
      overflow: 'hidden',
    }}>
      {/* Soft warm radial behind hero */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(227,237,233,0.55) 0%, rgba(244,240,232,0) 70%)',
      }}/>

      <Container max={1320} style={{ position: 'relative' }}>
        <div className="otto-hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 0.9fr)',
          gap: 'clamp(32px, 5vw, 80px)',
          alignItems: 'center',
        }}>
          {/* Left: copy */}
          <div>
            <Reveal>
              <MarkerLabel>For health, after 50</MarkerLabel>
            </Reveal>
            <Reveal delay={120}>
              <Headline size="xl" style={{ marginTop: 22 }}>
                A quiet companion<br/>
                <span style={{ color: OttoTokens.inkMuted, fontStyle: 'italic' }}>for the rest</span> of your health.
              </Headline>
            </Reveal>
            <Reveal delay={260}>
              <Lede style={{ marginTop: 28, fontSize: 'clamp(19px, 1.5vw, 24px)' }}>
                Otto is a personal AI that listens to your watch, your scale, your labs and your life — then quietly flags what's worth your attention. No dashboards to learn. No noise.
              </Lede>
            </Reveal>
            <Reveal delay={420}>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 36 }}>
                <CTA kind="primary" href="#download">
                  Download for iPhone
                </CTA>
                <CTA kind="ghost" href="#how">
                  See how it works
                </CTA>
              </div>
            </Reveal>
            <Reveal delay={560}>
              <div style={{
                marginTop: 36, display: 'flex', alignItems: 'center', gap: 14,
                fontFamily: OttoTokens.sans, fontSize: 14, color: OttoTokens.inkSubtle,
              }}>
                <div style={{ display: 'flex' }}>
                  {['#C4B89E','#8C7A60','#A6B5A8','#D6C7AE'].map((c, i) => (
                    <div key={i} style={{
                      width: 32, height: 32, borderRadius: '50%',
                      background: c, marginLeft: i ? -10 : 0,
                      border: '2px solid #F4F0E8',
                      fontFamily: OttoTokens.serif, fontSize: 13, color: '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{['M','J','S','R'][i]}</div>
                  ))}
                </div>
                <div>
                    Early users aged 50–84 are already taking control of their health with Otto.
                </div>
              </div>
            </Reveal>
          </div>

          {/* Right: phone with floating cards */}
          <div className="otto-hero-phone" style={{
            position: 'relative', display: 'flex', justifyContent: 'center',
            transform: `translateY(${phoneY}px)`,
            transition: 'transform 200ms linear',
          }}>
            <img
              src="assets/phone-home.png"
              alt="Otto app home screen"
              style={{
                width: 406 * phoneScale,
                height: 'auto',
                display: 'block',
                borderRadius: 56 * phoneScale,
              }}
            />

            {/* Floating "Otto noticed" bubble */}
            <FloatBubble side="left" top={220} delay={1000}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <OttoMark size={20} color={OttoTokens.sage}/>
                <div>
                  <div style={{ fontFamily: OttoTokens.sans, fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: OttoTokens.inkSubtle }}>Otto noticed</div>
                  <div style={{ fontFamily: OttoTokens.serif, fontSize: 17, color: OttoTokens.ink, marginTop: 4, lineHeight: 1.3 }}>Your HRV has dipped four nights in a row.</div>
                </div>
              </div>
            </FloatBubble>

            {/* Floating signals tile */}
            <FloatBubble side="right" top={420} delay={1500}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 12,
                  background: OttoTokens.sageSoft, color: OttoTokens.sageDeep,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <path d="M3 12h4l2-6 4 12 2-6h6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <div>
                  <div style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle, fontWeight: 600 }}>Resting heart rate</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 1 }}>
                    <span style={{ fontFamily: OttoTokens.serif, fontSize: 26, color: OttoTokens.ink, lineHeight: 1 }}>68</span>
                    <span style={{ fontFamily: OttoTokens.sans, fontSize: 12, color: OttoTokens.inkSubtle }}>bpm · normal</span>
                  </div>
                </div>
              </div>
            </FloatBubble>
          </div>
        </div>

        {/* Trusted-by strip */}
        <Reveal delay={700}>
          <div style={{
            marginTop: 'clamp(60px, 8vw, 100px)',
            display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center',
            gap: 'clamp(28px, 5vw, 64px)',
            paddingTop: 32,
            borderTop: `0.5px solid ${OttoTokens.hairline}`,
          }}>
            <span style={{
              fontFamily: OttoTokens.sans, fontSize: 12, fontWeight: 700,
              letterSpacing: 1.6, textTransform: 'uppercase', color: OttoTokens.inkSubtle,
            }}>Listens to</span>
            {['Apple Watch','Withings','Strava','Quest Diagnostics','Labcorp','Oura'].map(n => (
              <span key={n} style={{
                fontFamily: OttoTokens.serif, fontStyle: 'italic',
                fontSize: 'clamp(18px, 1.7vw, 24px)', color: OttoTokens.inkMuted,
              }}>{n}</span>
            ))}
          </div>
        </Reveal>
      </Container>
    </section>
  );
}

function FloatBubble({ children, side = 'left', top = 200, delay = 0 }) {
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setShown(true), delay);
    return () => clearTimeout(t);
  }, [delay]);
  return (
    <div className={`otto-float-bubble otto-float-${side}`} style={{
      position: 'absolute', top, [side]: -20,
      background: '#fff', borderRadius: 18,
      boxShadow: '0 1px 0 rgba(28,26,23,0.04), 0 16px 40px -16px rgba(28,26,23,0.18)',
      padding: '14px 18px', maxWidth: 260,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(12px)',
      transition: 'opacity 600ms ease, transform 600ms cubic-bezier(.2,.8,.2,1)',
      animation: shown ? `ottoFloat 6s ease-in-out ${delay}ms infinite` : 'none',
      zIndex: 5,
    }}>{children}</div>
  );
}

Object.assign(window, { Header, Hero });