// PULS3 UI Kit — full screens
// Renders marketing + iOS screens showcasing the design system in context.
// Depends on: window.IOSDevice (from ui_kits/ios-frame.jsx).

/* ============================================================
   Shared primitives
   ============================================================ */

const GlowBG = ({ opacity = 0.22 }) => (
  <>
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at top, rgba(26,78,78,0.6), rgba(13,38,38,0.3))',
      pointerEvents: 'none', zIndex: 0,
    }} />
    <div style={{
      position: 'absolute', borderRadius: '50%', filter: 'blur(120px)', opacity,
      background: '#00D4FF', width: 320, height: 320, top: -120, left: -80, zIndex: 0,
    }} />
    <div style={{
      position: 'absolute', borderRadius: '50%', filter: 'blur(120px)', opacity,
      background: '#A78BDB', width: 280, height: 280, bottom: -80, right: -60, zIndex: 0,
    }} />
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at top, rgba(255,255,255,0.08), transparent 60%, rgba(0,0,0,0.24))',
      pointerEvents: 'none', zIndex: 0,
    }} />
  </>
);

const BrandDot = ({ size = 10 }) => (
  <span style={{
    width: size, height: size, borderRadius: '50%',
    background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
    display: 'inline-block',
  }} />
);

const Wordmark = ({ size = 17 }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: '"Sora", sans-serif', fontWeight: 700,
    letterSpacing: '0.02em', fontSize: size, color: '#fff',
  }}>
    <BrandDot size={size * 0.6} />
    PULS3
  </span>
);

// stroked feather-style glyphs
const Ic = ({ d, size = 20, stroke = 1.5 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
    {d}
  </svg>
);
const IcSleep = (p) => <Ic {...p} d={<path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>} />;
const IcMove  = (p) => <Ic {...p} d={<><circle cx="13" cy="4" r="2"/><path d="M9 22l2-8 5 3v7"/><path d="M8 10V7l4-1 4 3 3 1"/></>} />;
const IcFood  = (p) => <Ic {...p} d={<path d="M17 8C8 10 5.9 16.17 3.82 21.34M17 8a4 4 0 0 0-4-4c-4 0-9 3-9 11a4 4 0 0 0 4 4c6 0 9-4 9-11z"/>} />;
const IcHeart = (p) => <Ic {...p} d={<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>} />;
const IcSpark = (p) => <Ic {...p} d={<path d="M12 2l1.8 5.4L19 9l-5.2 1.6L12 16l-1.8-5.4L5 9l5.2-1.6L12 2z"/>} />;
const IcShield= (p) => <Ic {...p} d={<><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></>} />;
const IcSend  = (p) => <Ic {...p} d={<><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4 20-7z"/></>} />;
const IcBolt  = (p) => <Ic {...p} d={<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>} />;
const IcChat  = (p) => <Ic {...p} d={<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>} />;

/* ============================================================
   Marketing — puls3.app hero
   ============================================================ */

function MarketingHero() {
  return (
    <div style={{
      width: 1200, height: 820, position: 'relative', overflow: 'hidden',
      background: '#1A3E3E', color: '#fff',
      fontFamily: '"Space Grotesk", sans-serif',
    }}>
      <GlowBG opacity={0.22} />

      {/* Nav */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 56, zIndex: 10,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 48px',
        background: 'rgba(26,62,62,0.72)',
        backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
        borderBottom: '1px solid rgba(255,255,255,0.06)',
      }}>
        <Wordmark />
        <div style={{ display: 'flex', gap: 28, fontSize: 13.5, color: 'rgba(255,255,255,0.72)' }}>
          <span>Sleep</span><span>Nutrition</span><span>Movement</span><span>Stress</span><span>Women's health</span>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={ghostBtn}>See how it works</button>
          <button style={primaryBtn}>Get early access</button>
        </div>
      </div>

      {/* Hero */}
      <div style={{
        position: 'relative', zIndex: 2, padding: '120px 48px 0', display: 'grid',
        gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center', height: '100%',
      }}>
        <div>
          <div style={eyebrow}>Privacy-first health coaching</div>
          <h1 style={{
            fontFamily: '"Sora", sans-serif', fontSize: 72, fontWeight: 700,
            letterSpacing: '-0.02em', lineHeight: 1.05, margin: '22px 0 24px',
          }}>
            One health team.<br />
            <span style={{
              background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>Knows your whole life.</span>
          </h1>
          <p style={{
            fontSize: 20, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)',
            maxWidth: 480, margin: '0 0 36px',
          }}>
            PULS3 gives you one clear next step for sleep, nutrition, exercise, and stress.
            Your health data stays on your phone.
          </p>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <button style={{ ...primaryBtn, padding: '14px 24px', fontSize: 15 }}>Join the waitlist</button>
            <button style={{ ...ghostBtn, padding: '14px 24px', fontSize: 15 }}>Watch a demo →</button>
          </div>
          <div style={{
            marginTop: 40, display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 13, color: 'rgba(255,255,255,0.5)',
          }}>
            <span style={{ color: '#7BA8C9' }}><IcShield size={16} /></span>
            On-device by default · iPhone only · Free in beta
          </div>
        </div>

        {/* Floating phone preview */}
        <div style={{ position: 'relative', height: 620, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{ transform: 'scale(0.72) rotate(-1.5deg)', transformOrigin: 'center' }}>
            <IOSDevice dark={true} width={402} height={820}>
              <FocusChatContent />
            </IOSDevice>
          </div>
        </div>
      </div>
    </div>
  );
}

const eyebrow = {
  fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
  color: '#00D4FF', fontWeight: 500,
};
const primaryBtn = {
  background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
  color: '#031019', border: 'none', borderRadius: 10,
  padding: '10px 18px', fontWeight: 700, fontSize: 13.5,
  fontFamily: '"Space Grotesk", sans-serif', cursor: 'pointer',
};
const ghostBtn = {
  background: 'transparent', color: '#fff',
  border: '1px solid rgba(255,255,255,0.12)', borderRadius: 10,
  padding: '10px 18px', fontWeight: 600, fontSize: 13.5,
  fontFamily: '"Space Grotesk", sans-serif', cursor: 'pointer',
};

/* ============================================================
   Marketing — pillars section
   ============================================================ */

function MarketingPillars() {
  const pillars = [
    { name: 'Sleep',     color: '#A78BDB', Icon: IcSleep, line: 'Why you wake at 3am, and what shifts it.' },
    { name: 'Nutrition', color: '#F28059', Icon: IcFood,  line: 'Eats that match what your body is asking for.' },
    { name: 'Movement',  color: '#FAC257', Icon: IcMove,  line: 'The right amount today — not a streak to chase.' },
    { name: 'Stress',    color: '#00D4FF', Icon: IcHeart, line: 'Recover instead of grinding through it.' },
    { name: 'Mood',      color: '#D97B87', Icon: IcSpark, line: 'Patterns your coach notices before you do.' },
  ];
  return (
    <div style={{
      width: 1200, height: 820, position: 'relative', overflow: 'hidden',
      background: '#0D2626', color: '#fff', padding: '80px 48px',
      fontFamily: '"Space Grotesk", sans-serif', boxSizing: 'border-box',
    }}>
      <GlowBG opacity={0.14} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={eyebrow}>Your team</div>
        <h2 style={{
          fontFamily: '"Sora", sans-serif', fontSize: 52, fontWeight: 700,
          letterSpacing: '-0.02em', lineHeight: 1.1, margin: '18px 0 16px', maxWidth: 760,
          textWrap: 'balance',
        }}>
          Five specialists, one coach that remembers you across all of them.
        </h2>
        <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.72)', maxWidth: 580, margin: '0 0 56px', lineHeight: 1.5 }}>
          When your sleep changes, your nutrition coach already knows. No re-explaining, no fragmented apps.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
          {pillars.map(p => (
            <div key={p.name} style={glassCard}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: `${p.color}20`, color: p.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                border: `1px solid ${p.color}40`, marginBottom: 14,
              }}>
                <p.Icon size={22} />
              </div>
              <div style={{ fontFamily: '"Sora", sans-serif', fontSize: 20, fontWeight: 600, marginBottom: 6 }}>
                {p.name}
              </div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.68)', lineHeight: 1.5 }}>
                {p.line}
              </div>
            </div>
          ))}
        </div>

        {/* Trust band */}
        <div style={{ ...glassCard, marginTop: 28, padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 20 }}>
          <div style={{ color: '#7BA8C9', flexShrink: 0 }}><IcShield size={32} stroke={1.3} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: '"Sora", sans-serif', fontSize: 18, fontWeight: 600, marginBottom: 4 }}>
              Your data stays on your phone.
            </div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.68)', lineHeight: 1.5 }}>
              PULS3 reads your Health data on-device. We can't see it. You can disconnect anytime.
            </div>
          </div>
          <button style={ghostBtn}>How it works</button>
        </div>
      </div>
    </div>
  );
}

const glassCard = {
  background: 'rgba(255,255,255,0.05)',
  border: '1px solid rgba(255,255,255,0.10)',
  borderRadius: 20,
  padding: 22,
  backdropFilter: 'blur(16px)',
  WebkitBackdropFilter: 'blur(16px)',
};

/* ============================================================
   iOS — Onboarding (chat intro + chips)
   ============================================================ */

function OnboardingContent() {
  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: '#1A3E3E', color: '#fff',
      fontFamily: '-apple-system, "SF Pro", system-ui',
    }}>
      <GlowBG opacity={0.2} />
      <div style={{ position: 'relative', zIndex: 1, padding: '72px 20px 24px', display: 'flex', flexDirection: 'column', height: '100%', boxSizing: 'border-box' }}>

        {/* Coach ident */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <CoachAvatar />
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>PULS3</div>
            <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.5)' }}>Your coach</div>
          </div>
        </div>

        {/* Messages */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <AssistantBubble>Hi, I'm your coach. Before we start — what's going on for you right now?</AssistantBubble>
          <AssistantBubble>You can tap any that sound like you. Or none of them — that's also an answer.</AssistantBubble>

          <ChipPanel>
            <Chip selected>Hot flashes</Chip>
            <Chip>Sleep changes</Chip>
            <Chip>Mood shifts</Chip>
            <Chip>Brain fog</Chip>
            <Chip selected>Joint aches</Chip>
            <Chip>Period changes</Chip>
            <Chip>Not right now</Chip>
          </ChipPanel>
        </div>

        {/* Continue */}
        <div style={{ marginTop: 14 }}>
          <button style={{
            width: '100%', padding: '14px', borderRadius: 14,
            background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
            color: '#031019', border: 'none', fontSize: 16, fontWeight: 700,
            fontFamily: '-apple-system, system-ui',
          }}>Continue</button>
          <div style={{ textAlign: 'center', marginTop: 10, fontSize: 12.5, color: 'rgba(255,255,255,0.45)' }}>
            Step 2 of 6
          </div>
        </div>
      </div>
    </div>
  );
}

const CoachAvatar = ({ size = 36 }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: 'linear-gradient(135deg, #A78BDB, #00D4FF)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#fff', fontWeight: 700, fontSize: size * 0.42,
    boxShadow: '0 0 16px rgba(167,139,219,0.35)',
    flexShrink: 0,
  }}>P</div>
);

const AssistantBubble = ({ children }) => (
  <div style={{
    alignSelf: 'flex-start', maxWidth: '85%',
    background: 'rgba(255,255,255,0.08)',
    border: '1px solid rgba(255,255,255,0.12)',
    backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
    color: '#fff', padding: '11px 15px', borderRadius: 24,
    fontSize: 15, lineHeight: 1.5,
  }}>{children}</div>
);

const UserBubble = ({ children }) => (
  <div style={{
    alignSelf: 'flex-end', maxWidth: '80%',
    background: 'linear-gradient(135deg, rgba(155,138,212,0.65), rgba(123,107,191,0.50))',
    color: '#fff', padding: '10px 14px', borderRadius: 24,
    fontSize: 15, lineHeight: 1.5,
  }}>{children}</div>
);

const ChipPanel = ({ children }) => (
  <div style={{
    padding: 10, borderRadius: 18,
    background: 'rgba(155,138,212,0.12)',
    border: '1px solid rgba(185,166,232,0.26)',
    display: 'flex', flexWrap: 'wrap', gap: 8,
    alignSelf: 'stretch', marginTop: 4,
  }}>{children}</div>
);

const Chip = ({ children, selected }) => (
  <span style={{
    fontFamily: '-apple-system, system-ui', fontWeight: 600, fontSize: 13,
    padding: '8px 14px', borderRadius: 999,
    display: 'inline-flex', alignItems: 'center', gap: 5,
    background: selected ? 'rgba(255,255,255,0.94)' : 'rgba(255,255,255,0.12)',
    color: selected ? '#000' : '#fff',
  }}>
    {selected && (
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    )}
    {children}
  </span>
);

/* ============================================================
   iOS — Dashboard (morning briefing)
   ============================================================ */

function DashboardContent() {
  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: '#1A3E3E', color: '#fff',
      fontFamily: '-apple-system, "SF Pro", system-ui',
    }}>
      <GlowBG opacity={0.18} />
      <div style={{
        position: 'relative', zIndex: 1, padding: '66px 20px 110px',
        overflowY: 'auto', height: '100%', boxSizing: 'border-box',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', fontWeight: 500 }}>Tuesday · 7:12 am</div>
          <CoachAvatar size={32} />
        </div>
        <div style={{
          fontFamily: '-apple-system, system-ui', fontSize: 28, fontWeight: 600,
          letterSpacing: '-0.01em', lineHeight: 1.15, marginTop: 6, marginBottom: 22,
        }}>
          Good morning, Nora.<br />
          <span style={{ color: 'rgba(255,255,255,0.72)' }}>Here's what I'm seeing.</span>
        </div>

        {/* Insight card */}
        <div style={{
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(255,255,255,0.15)',
          backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
          borderRadius: 24, padding: 18, marginBottom: 16,
          boxShadow: '0 8px 32px rgba(0,0,0,0.30)', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 'inherit',
            background: 'linear-gradient(135deg, rgba(167,139,219,0.05), rgba(0,212,255,0.03))',
            pointerEvents: 'none',
          }} />
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 7, color: '#A78BDB', fontSize: 13, fontWeight: 500, marginBottom: 10 }}>
              <IcSleep size={15} /> Sleep this week
            </div>
            <div style={{
              fontSize: 48, fontWeight: 700, letterSpacing: '0.02em', lineHeight: 1,
              background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              textShadow: '0 0 10px rgba(0,212,255,0.35)', marginBottom: 10,
            }}>5.5 hrs</div>
            <div style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)' }}>
              Your deep sleep dropped after Tuesday. That lines up with where you are in your cycle — your body's working harder to regulate temperature right now.
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
              <Chip>What can I do?</Chip>
              <Chip>Tell me more</Chip>
            </div>
          </div>
        </div>

        {/* Pillar grid */}
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.12em', margin: '18px 4px 10px' }}>
          Your week
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <PillarTile color="#FAC257" Icon={IcMove}  label="Movement"  value="4 / 5"    sub="days active" />
          <PillarTile color="#F28059" Icon={IcFood}  label="Nutrition" value="Steady"   sub="protein on track" />
          <PillarTile color="#00D4FF" Icon={IcHeart} label="Recovery"  value="62 ms"    sub="HRV trending up" />
          <PillarTile color="#D97B87" Icon={IcSpark} label="Mood"      value="Lighter"  sub="than last week" />
        </div>

        {/* Nudge */}
        <div style={{
          marginTop: 18, padding: 14, borderRadius: 20,
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.10)',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: 12, flexShrink: 0,
            background: 'rgba(0,212,255,0.15)', color: '#00D4FF',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '1px solid rgba(0,212,255,0.25)',
          }}><IcBolt size={18} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 2 }}>One thing for today</div>
            <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', lineHeight: 1.45 }}>
              A slow 20-minute walk after lunch. That's it.
            </div>
          </div>
        </div>
      </div>

      {/* Tab bar */}
      <TabBar active="Today" />
    </div>
  );
}

const PillarTile = ({ color, Icon, label, value, sub }) => (
  <div style={{
    background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.10)',
    borderRadius: 20, padding: 14,
    backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 7, color, fontSize: 12.5, fontWeight: 500, marginBottom: 10 }}>
      <Icon size={14} />{label}
    </div>
    <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em' }}>{value}</div>
    <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>{sub}</div>
  </div>
);

const TabBar = ({ active }) => {
  const items = [
    { name: 'Today',    Icon: IcSpark },
    { name: 'Chat',     Icon: IcChat },
    { name: 'History',  Icon: IcBolt },
    { name: 'You',      Icon: IcShield },
  ];
  return (
    <div style={{
      position: 'absolute', left: 12, right: 12, bottom: 22, zIndex: 5,
      height: 62, borderRadius: 22,
      background: 'rgba(13,38,38,0.72)',
      border: '1px solid rgba(255,255,255,0.10)',
      backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-around',
      padding: '0 8px',
    }}>
      {items.map(it => {
        const isActive = it.name === active;
        return (
          <div key={it.name} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            color: isActive ? '#fff' : 'rgba(255,255,255,0.48)',
          }}>
            <it.Icon size={20} stroke={isActive ? 2 : 1.5} />
            <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '0.01em' }}>{it.name}</div>
          </div>
        );
      })}
    </div>
  );
};

/* ============================================================
   iOS — Focus chat (used inside marketing hero + its own screen)
   ============================================================ */

function FocusChatContent() {
  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: '#1A3E3E', color: '#fff',
      fontFamily: '-apple-system, "SF Pro", system-ui',
    }}>
      <GlowBG opacity={0.22} />
      <div style={{
        position: 'relative', zIndex: 1, padding: '66px 20px 24px',
        display: 'flex', flexDirection: 'column', height: '100%', boxSizing: 'border-box',
      }}>

        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, paddingBottom: 14, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
          <CoachAvatar size={36} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>PULS3</div>
            <div style={{ fontSize: 12, color: '#8CDDB3', display: 'flex', alignItems: 'center', gap: 5 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#8CDDB3' }} /> Listening
            </div>
          </div>
        </div>

        {/* Messages */}
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10, overflowY: 'auto' }}>
          <div style={{ alignSelf: 'center', fontSize: 11, color: 'rgba(255,255,255,0.4)', margin: '4px 0 8px' }}>Today · 7:12 am</div>
          <AssistantBubble>I noticed your sleep has been lighter this week. That tracks with where you are in your cycle.</AssistantBubble>
          <UserBubble>Is that why I've been waking up at 3?</UserBubble>
          <AssistantBubble>Probably. Your body works harder to regulate temperature around this part of your cycle — it's really common.</AssistantBubble>
          <AssistantBubble>Want me to suggest one small thing for tonight, or would you rather just know what's going on?</AssistantBubble>

          <ChipPanel>
            <Chip>Try one thing</Chip>
            <Chip>Just tell me more</Chip>
            <Chip>Not right now</Chip>
          </ChipPanel>
        </div>

        {/* Composer */}
        <div style={{
          marginTop: 12, display: 'flex', alignItems: 'center', gap: 8,
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 22, padding: '8px 8px 8px 16px',
          backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
        }}>
          <div style={{ flex: 1, fontSize: 15, color: 'rgba(255,255,255,0.45)' }}>Type a message…</div>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'linear-gradient(135deg, #00D4FF, #A78BDB)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#031019',
          }}>
            <IcSend size={16} stroke={2} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   iOS — Warm error screen
   ============================================================ */

function ErrorContent() {
  return (
    <div style={{
      height: '100%', position: 'relative', overflow: 'hidden',
      background: '#1A3E3E', color: '#fff',
      fontFamily: '-apple-system, "SF Pro", system-ui',
    }}>
      <GlowBG opacity={0.18} />
      <div style={{
        position: 'relative', zIndex: 1, padding: '80px 22px 40px',
        display: 'flex', flexDirection: 'column', height: '100%', boxSizing: 'border-box',
        justifyContent: 'center',
      }}>
        <div style={{
          background: 'rgba(255,255,255,0.08)',
          border: '1px solid rgba(232,131,107,0.15)',
          borderRadius: 24, padding: 20,
          backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'rgba(232,131,107,0.06)', borderRadius: 'inherit', pointerEvents: 'none' }} />
          <div style={{ position: 'relative' }}>
            <div style={{
              width: 44, height: 44, borderRadius: 14,
              background: 'rgba(232,131,107,0.15)', color: '#E8836B',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1px solid rgba(232,131,107,0.30)', marginBottom: 14,
            }}>
              <Ic size={22} d={<><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="12" y1="9" x2="12" y2="13"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/></>} />
            </div>
            <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 8 }}>
              Hmm, that didn't quite work.
            </div>
            <div style={{ fontSize: 15, color: 'rgba(255,255,255,0.72)', lineHeight: 1.55, marginBottom: 16 }}>
              I wasn't able to read your sleep data just now. This happens sometimes — it's not you.
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Chip selected>Try again</Chip>
              <Chip>Skip for now</Chip>
            </div>
          </div>
        </div>

        <div style={{ textAlign: 'center', fontSize: 12, color: 'rgba(255,255,255,0.45)', marginTop: 20 }}>
          Your data hasn't moved anywhere.
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Export to window
   ============================================================ */

Object.assign(window, {
  MarketingHero, MarketingPillars,
  OnboardingContent, DashboardContent, FocusChatContent, ErrorContent,
});