// WANE landing heroes — Archivo typography + real app screenshots.

const { useState, useEffect, useRef } = React;

// ─── Shared logo V9 ──────────────────────────────────────
function WaneMarkSVG({ size = 60, palette = 'violet' }) {
  const p = palette === 'violet'
    ? { top: '#d8d3ff', bot: '#4a3a9a' }
    : palette === 'lime'
    ? { top: '#e5ffb8', bot: '#6b9a1f' }
    : palette === 'ivory'
    ? { top: '#ffffff', bot: '#c9c6bd' }
    : { top: '#4a4a52', bot: '#0a0b0d' };
  const gid = React.useId().replace(/:/g, '');
  return (
    <svg viewBox="0 0 120 120" width={size} height={size} style={{ display: 'block' }}>
      <defs>
        <linearGradient id={`wm-${gid}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={p.top} />
          <stop offset="100%" stopColor={p.bot} />
        </linearGradient>
      </defs>
      <path d="M 17.9 54 L 27.5 54 L 42 100 L 30 100 Z" fill={`url(#wm-${gid})`} />
      <path d="M 52.4 19 L 58.2 19 L 42 100 L 30 100 Z" fill={`url(#wm-${gid})`} />
      <path d="M 61.8 19 L 67.6 19 L 90 100 L 78 100 Z" fill={`url(#wm-${gid})`} />
      <path d="M 92.5 54 L 102.1 54 L 90 100 L 78 100 Z" fill={`url(#wm-${gid})`} />
    </svg>
  );
}

// ─── Device frame wrapper for screenshots ─────────────────
// Screenshots already include iPhone status bar but not hardware bezel.
function DeviceScreenshot({ src, width = 320, floating = true, tilt = 0, shadow = 'normal', aspect = 2868/1320 }) {
  const height = width * aspect; // preserve aspect of capture (default iPhone)
  const shadows = {
    normal: `0 40px 80px rgba(0,0,0,0.5), 0 80px 120px rgba(75,60,155,0.2), inset 0 0 0 1px rgba(255,255,255,0.08)`,
    hard:   `0 20px 60px rgba(0,0,0,0.6)`,
    soft:   `0 30px 60px rgba(0,0,0,0.3), 0 60px 100px rgba(75,60,155,0.15)`,
    none:   'none',
  };
  return (
    <div data-device="true" style={{
      width, height,
      maxWidth: '100%',
      aspectRatio: `${1} / ${aspect}`,
      borderRadius: width * 0.14,
      background: '#0a0b0d',
      border: `${width * 0.025}px solid #1a1b1d`,
      boxShadow: floating ? shadows[shadow] : 'none',
      overflow: 'hidden',
      transform: tilt ? `rotate(${tilt}deg)` : 'none',
      position: 'relative',
    }}>
      <img src={src} alt="WANE app"
        style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover' }} />
    </div>
  );
}

// Apple/Play Store buttons
function StoreButtons({ dark = false, onClick }) {
  const bg = dark ? '#fff' : '#0a0b0d';
  const fg = dark ? '#0a0b0d' : '#fff';
  return (
    <div data-store-buttons="true" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
      <button onClick={onClick} style={{
        background: bg, color: fg, border: 'none',
        padding: '16px 26px', borderRadius: 99, fontSize: 15, fontWeight: 600,
        fontFamily: 'inherit', letterSpacing: '-0.01em', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 10,
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
        Download on App Store
      </button>
      <button onClick={onClick} style={{
        background: bg, color: fg, border: 'none',
        padding: '16px 26px', borderRadius: 99, fontSize: 15, fontWeight: 600,
        fontFamily: 'inherit', letterSpacing: '-0.01em', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 10,
      }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5V3.5c0-.39.23-.78.62-.97L17.16 12l-13.54 9.47c-.39.19-.62-.11-.62-.97zM5.5 12l8.82 6.17L5.5 6z"/></svg>
        Get on Google Play
      </button>
    </div>
  );
}

// Tag/eyebrow component
function Eyebrow({ children, color = '#d8d3ff', bg = 'rgba(216,211,255,0.08)', border = 'rgba(216,211,255,0.2)' }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
      color, padding: '8px 14px', background: bg,
      border: `1px solid ${border}`, borderRadius: 99,
      textTransform: 'uppercase',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#9dd929', boxShadow: '0 0 10px #9dd929' }} />
      {children}
    </div>
  );
}

// ─── HERO 1 · Editorial Dark (screenshot hero) ────────────
function HeroEditorialDark({ onCTA }) {
  return (
    <section data-hero="true" style={{
      position: 'relative', minHeight: '100vh',
      background: '#0a0b0d', color: '#fff',
      padding: '120px 48px 80px',
      display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 60,
      alignItems: 'center', overflow: 'hidden',
    }}>
      {/* Ambient violet glow */}
      <div style={{
        position: 'absolute', width: 900, height: 900, top: '-30%', right: '-20%',
        background: 'radial-gradient(circle, rgba(74,58,154,0.35) 0%, transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', width: 600, height: 600, bottom: '-20%', left: '-10%',
        background: 'radial-gradient(circle, rgba(157,217,41,0.15) 0%, transparent 60%)',
        filter: 'blur(100px)', pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 700 }}>
        <Eyebrow>Biometric burnout monitoring</Eyebrow>
        <h1 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(56px, 8vw, 128px)', lineHeight: 0.92,
          letterSpacing: '-0.045em', color: '#fff', margin: '32px 0 0',
          textWrap: 'balance',
        }}>
          See burnout<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>before you feel it.</span>
        </h1>
        <p style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 400,
          fontSize: 19, lineHeight: 1.55, letterSpacing: '-0.005em',
          color: 'rgba(255,255,255,0.65)', maxWidth: 520,
          marginTop: 36, marginBottom: 40,
        }}>
          Wane connects to your wearables and reads HRV, sleep, and recovery
          signals to surface chronic stress weeks before symptoms appear.
          No questionnaires. Just your data, working for you.
        </p>
        <StoreButtons dark={true} onClick={onCTA} />
        <div data-hero-stats="true" style={{
          display: 'flex', gap: 48, marginTop: 72, paddingTop: 32,
          borderTop: '1px solid rgba(255,255,255,0.1)',
          flexWrap: 'wrap',
        }}>
          {[
            { v: '6+', l: 'weeks earlier' },
            { v: '22', l: 'biomarkers' },
            { v: '94%', l: 'accuracy' },
          ].map((m, i) => (
            <div key={i}>
              <div style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 600,
                fontSize: 40, color: '#fff', lineHeight: 1, letterSpacing: '-0.035em',
              }}>{m.v}</div>
              <div style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 500, fontSize: 12,
                color: 'rgba(255,255,255,0.5)', marginTop: 8, letterSpacing: 0.4,
              }}>{m.l}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'center', alignItems: 'center',
      }}>
        <DeviceScreenshot src="assets/ss-dashboard.png?v=2" width={380} />
      </div>
    </section>
  );
}

// ─── HERO 2 · Floating stack ──────────────────────────────
function HeroFloatingStack({ onCTA }) {
  return (
    <section data-hero="true" style={{
      position: 'relative', minHeight: '100vh',
      background: 'radial-gradient(ellipse at 70% 30%, #2a1f4a 0%, #0a0b0d 60%)',
      color: '#fff', padding: '120px 48px 80px', overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 40, alignItems: 'center',
    }}>
      <div style={{
        position: 'absolute', width: 700, height: 700, top: '10%', left: '50%',
        background: 'radial-gradient(circle, rgba(139,120,232,0.3) 0%, transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', zIndex: 3, maxWidth: 600 }}>
        <Eyebrow>Biometric burnout monitoring</Eyebrow>
        <h1 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(52px, 7.5vw, 112px)', lineHeight: 0.92,
          letterSpacing: '-0.045em', margin: '32px 0 0', textWrap: 'balance',
        }}>
          The signal<br/>
          your body<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>already sends.</span>
        </h1>
        <p style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 18, lineHeight: 1.55,
          letterSpacing: '-0.005em',
          color: 'rgba(255,255,255,0.65)', maxWidth: 480,
          marginTop: 32, marginBottom: 40,
        }}>
          HRV narrowing. Sleep drift. Resting HR creep. Wane reads the
          subtle signs weeks before you feel them.
        </p>
        <StoreButtons dark={true} onClick={onCTA} />
      </div>
      {/* Floating stack of screenshots */}
      <div data-hero-stack="true" style={{
        position: 'relative', zIndex: 2, height: 720,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {/* Back screenshot (tilted left) */}
        <div style={{
          position: 'absolute', left: '5%', top: '10%',
          filter: 'blur(0.5px)', opacity: 0.85,
        }}>
          <DeviceScreenshot src="assets/ss-cards.png" width={260} tilt={-8} shadow="soft" />
        </div>
        {/* Front screenshot (hero) */}
        <div style={{
          position: 'relative', zIndex: 2,
          transform: 'translate(20px, -20px)',
        }}>
          <DeviceScreenshot src="assets/ss-dashboard.png?v=2" width={340} tilt={3} />
        </div>
      </div>
    </section>
  );
}

// ─── HERO 3 · Split (before/after with real screenshots) ──
function HeroSplitReal({ onCTA }) {
  return (
    <section data-hero="true" style={{
      position: 'relative', minHeight: '100vh',
      background: '#0a0b0d', color: '#fff',
      padding: '120px 48px 80px',
      display: 'grid', gridTemplateColumns: '1fr', gap: 0,
      overflow: 'hidden',
    }}>
      {/* Centered title */}
      <div style={{
        textAlign: 'center', maxWidth: 900, margin: '0 auto', position: 'relative', zIndex: 3,
      }}>
        <Eyebrow>Biometric burnout monitoring</Eyebrow>
        <h1 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 600,
          fontSize: 'clamp(56px, 8vw, 128px)', lineHeight: 0.92,
          letterSpacing: '-0.045em', margin: '28px 0 0', textWrap: 'balance',
        }}>
          Your body knows.<br/>
          <span style={{
            background: 'linear-gradient(135deg, #d8d3ff 0%, #8b78e8 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            fontWeight: 700,
          }}>Wane translates.</span>
        </h1>
        <p style={{
          fontFamily: 'Archivo, sans-serif', fontSize: 18, lineHeight: 1.55,
          letterSpacing: '-0.005em',
          color: 'rgba(255,255,255,0.6)', maxWidth: 560, margin: '32px auto 40px',
        }}>
          Read the signs your wearable already captures — HRV, sleep staging,
          recovery latency — before burnout shows up in how you feel.
        </p>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <StoreButtons dark={true} onClick={onCTA} />
        </div>
      </div>
      {/* Two devices side-by-side below */}
      <div style={{
        marginTop: 60, display: 'flex', justifyContent: 'center',
        gap: 40, flexWrap: 'wrap', position: 'relative', zIndex: 2,
      }}>
        <div style={{ textAlign: 'center' }}>
          <DeviceScreenshot src="assets/ss-dashboard.png?v=2" width={280} tilt={-2} shadow="soft" />
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontWeight: 600, fontSize: 11,
            color: '#d8d3ff', letterSpacing: 0.8, marginTop: 20, textTransform: 'uppercase',
          }}>Daily score</div>
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 14,
            color: 'rgba(255,255,255,0.55)', marginTop: 6, maxWidth: 240, margin: '6px auto 0',
          }}>One number. Honestly calibrated.</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <DeviceScreenshot src="assets/ss-cards.png" width={280} tilt={2} shadow="soft" />
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontWeight: 600, fontSize: 11,
            color: '#9dd929', letterSpacing: 0.8, marginTop: 20, textTransform: 'uppercase',
          }}>Daily vibes</div>
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 14,
            color: 'rgba(255,255,255,0.55)', marginTop: 6, maxWidth: 240, margin: '6px auto 0',
          }}>Tone of the day, tuned to your signals.</div>
        </div>
      </div>
      {/* Ambient */}
      <div style={{
        position: 'absolute', width: 1000, height: 800, bottom: '-30%', left: '50%',
        transform: 'translateX(-50%)',
        background: 'radial-gradient(ellipse, rgba(74,58,154,0.35) 0%, transparent 60%)',
        filter: 'blur(80px)', pointerEvents: 'none',
      }} />
    </section>
  );
}

// ─── HERO 4 · Liquid glass ────────────────────────────────
// Fluid blob shapes, frosted glass panels, iOS liquid-glass aesthetic.
function HeroLiquid({ onCTA }) {
  return (
    <section data-hero="true" style={{
      position: 'relative', minHeight: '100vh',
      background: '#06070a', color: '#fff',
      padding: '120px 48px 80px', overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60,
      alignItems: 'center',
    }}>
      {/* Liquid blobs — animated SVG filter blur */}
      <svg style={{ position: 'absolute', width: 0, height: 0 }}>
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="40" />
            <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" />
          </filter>
        </defs>
      </svg>

      {/* Blob field */}
      <div style={{
        position: 'absolute', inset: 0, filter: 'url(#goo)', pointerEvents: 'none', opacity: 0.85,
      }}>
        <div style={{
          position: 'absolute', width: 480, height: 480, borderRadius: '50%',
          background: '#4a3a9a', top: '-10%', right: '5%',
          animation: 'blobA 18s ease-in-out infinite',
        }} />
        <div style={{
          position: 'absolute', width: 380, height: 380, borderRadius: '50%',
          background: '#8b78e8', top: '20%', right: '-8%',
          animation: 'blobB 22s ease-in-out infinite',
        }} />
        <div style={{
          position: 'absolute', width: 300, height: 300, borderRadius: '50%',
          background: '#9dd929', bottom: '-5%', left: '35%',
          animation: 'blobC 26s ease-in-out infinite', opacity: 0.6,
        }} />
        <div style={{
          position: 'absolute', width: 420, height: 420, borderRadius: '50%',
          background: '#2a1f4a', bottom: '10%', left: '-10%',
          animation: 'blobD 20s ease-in-out infinite',
        }} />
      </div>

      <style>{`
        @keyframes blobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px, 60px) scale(1.1); } }
        @keyframes blobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px, -40px) scale(0.9); } }
        @keyframes blobC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px, -80px) scale(1.15); } }
        @keyframes blobD { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(70px, 40px) scale(1.05); } }
      `}</style>

      {/* Noise/grain overlay for depth */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 50% 50%, transparent 30%, rgba(6,7,10,0.7) 100%)',
        pointerEvents: 'none',
      }} />

      {/* LEFT — frosted glass content card */}
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 680 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px 8px 10px', borderRadius: 99,
          background: 'rgba(255,255,255,0.06)',
          backdropFilter: 'blur(20px) saturate(140%)',
          WebkitBackdropFilter: 'blur(20px) saturate(140%)',
          border: '1px solid rgba(255,255,255,0.12)',
          fontFamily: 'Archivo, sans-serif', fontSize: 12, fontWeight: 500,
          letterSpacing: '-0.005em', color: 'rgba(255,255,255,0.9)',
        }}>
          <span style={{
            width: 8, height: 8, borderRadius: '50%', background: '#9dd929',
            boxShadow: '0 0 12px #9dd929',
          }} />
          Live biometric monitoring
        </div>

        <h1 style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 500,
          fontSize: 'clamp(60px, 8.5vw, 136px)', lineHeight: 0.9,
          letterSpacing: '-0.05em', color: '#fff',
          margin: '36px 0 0', textWrap: 'balance',
        }}>
          See burnout
          <br />
          <span style={{
            fontStyle: 'italic', fontWeight: 400,
            background: 'linear-gradient(120deg, #d8d3ff 0%, #fff 50%, #9dd929 100%)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          }}>before</span>
          <span style={{ fontWeight: 500 }}> you feel it.</span>
        </h1>

        <p style={{
          fontFamily: 'Archivo, sans-serif', fontWeight: 400,
          fontSize: 19, lineHeight: 1.55, letterSpacing: '-0.005em',
          color: 'rgba(255,255,255,0.7)', maxWidth: 520,
          marginTop: 36, marginBottom: 40,
        }}>
          Wane reads HRV, sleep depth, and recovery from your wearables —
          and flags chronic stress <em style={{ color: '#d8d3ff', fontStyle: 'normal' }}>weeks</em> before
          you crash.
        </p>

        <div style={{
          display: 'inline-flex', padding: 6, borderRadius: 99,
          background: 'rgba(255,255,255,0.05)',
          backdropFilter: 'blur(20px) saturate(140%)',
          WebkitBackdropFilter: 'blur(20px) saturate(140%)',
          border: '1px solid rgba(255,255,255,0.1)',
          gap: 6,
        }}>
          <button onClick={onCTA} style={{
            background: '#fff', color: '#0a0b0d', border: 'none',
            padding: '14px 28px', borderRadius: 99, fontFamily: 'inherit',
            fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', cursor: 'pointer',
          }}>Download for iOS</button>
          <button onClick={onCTA} style={{
            background: '#fff', color: '#0a0b0d', border: 'none',
            padding: '14px 28px', borderRadius: 99, fontFamily: 'inherit',
            fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', cursor: 'pointer',
          }}>Download for Android</button>
        </div>

        <div data-hero-stats="true" style={{
          display: 'flex', gap: 12, marginTop: 56, flexWrap: 'wrap',
        }}>
          {[
            { v: '6+', l: 'weeks earlier' },
            { v: '22', l: 'biomarkers' },
            { v: '94%', l: 'accuracy' },
          ].map((m, i) => (
            <div key={i} style={{
              flex: '1 1 100px', padding: '18px 20px', borderRadius: 16,
              background: 'rgba(255,255,255,0.04)',
              backdropFilter: 'blur(20px) saturate(140%)',
              WebkitBackdropFilter: 'blur(20px) saturate(140%)',
              border: '1px solid rgba(255,255,255,0.08)',
            }}>
              <div style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 600,
                fontSize: 34, color: '#fff', lineHeight: 1, letterSpacing: '-0.035em',
              }}>{m.v}</div>
              <div style={{
                fontFamily: 'Archivo, sans-serif', fontWeight: 500, fontSize: 11,
                color: 'rgba(255,255,255,0.55)', marginTop: 8, letterSpacing: 0.4,
              }}>{m.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* RIGHT — screenshot inside a tilted frosted glass slab */}
      <div data-hero-right="true" style={{
        position: 'relative', zIndex: 2,
        display: 'flex', justifyContent: 'center', alignItems: 'center',
        minWidth: 0,
      }}>
        <div data-hero-glass-slab="true" style={{
          position: 'relative',
          padding: 24, borderRadius: 48,
          background: 'rgba(255,255,255,0.06)',
          backdropFilter: 'blur(30px) saturate(180%)',
          WebkitBackdropFilter: 'blur(30px) saturate(180%)',
          border: '1px solid rgba(255,255,255,0.15)',
          boxShadow: '0 40px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.2)',
          transform: 'rotate(-2deg)',
        }}>
          {/* Specular highlight */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: '40%',
            background: 'linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%)',
            borderRadius: '48px 48px 0 0',
            pointerEvents: 'none',
          }} />
          <DeviceScreenshot src="assets/ss-dashboard.png?v=2" width={340} shadow="none" />
        </div>

        {/* Floating glass chip — top-right */}
        <div data-hero-chip="true" style={{
          position: 'absolute', top: '8%', right: '0%',
          padding: '14px 18px', borderRadius: 18,
          background: 'rgba(255,255,255,0.08)',
          backdropFilter: 'blur(24px) saturate(160%)',
          WebkitBackdropFilter: 'blur(24px) saturate(160%)',
          border: '1px solid rgba(255,255,255,0.15)',
          boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
          display: 'flex', alignItems: 'center', gap: 12,
          transform: 'rotate(3deg)',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: 'linear-gradient(135deg, #9dd929 0%, #6ba319 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Archivo, sans-serif', fontWeight: 700, fontSize: 16, color: '#0a0b0d',
          }}>↑</div>
          <div>
            <div style={{
              fontFamily: 'Archivo, sans-serif', fontSize: 11, fontWeight: 500,
              color: 'rgba(255,255,255,0.6)', letterSpacing: 0.3,
            }}>HRV recovery</div>
            <div style={{
              fontFamily: 'Archivo, sans-serif', fontSize: 18, fontWeight: 600,
              color: '#fff', letterSpacing: '-0.02em', marginTop: 2,
            }}>+12ms this week</div>
          </div>
        </div>

        {/* Floating glass chip — bottom-left */}
        <div data-hero-chip="true" style={{
          position: 'absolute', bottom: '6%', left: '-2%',
          padding: '12px 16px', borderRadius: 16,
          background: 'rgba(255,255,255,0.08)',
          backdropFilter: 'blur(24px) saturate(160%)',
          WebkitBackdropFilter: 'blur(24px) saturate(160%)',
          border: '1px solid rgba(255,255,255,0.15)',
          boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
          transform: 'rotate(-4deg)',
          maxWidth: 220,
        }}>
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 10, fontWeight: 600,
            color: '#d8d3ff', letterSpacing: 0.6, textTransform: 'uppercase',
          }}>Early signal</div>
          <div style={{
            fontFamily: 'Archivo, sans-serif', fontSize: 13, fontWeight: 400, lineHeight: 1.4,
            color: 'rgba(255,255,255,0.9)', marginTop: 4, letterSpacing: '-0.005em',
          }}>Sleep depth trending down 4 nights in a row.</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  WaneMarkSVG, DeviceScreenshot, StoreButtons, Eyebrow,
  HeroEditorialDark, HeroFloatingStack, HeroSplitReal, HeroLiquid,
});