// Faithful reproductions of real Sobella app screens
// Colours, corner radii, and card layouts match the actual app exactly

const { useState: useASS, useEffect: useASE } = React;
function useWindowWidth() {
  const [w, setW] = useASS(window.innerWidth);
  useASE(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return w;
}

const APP = {
  primary:    '#154734',
  charcoal:   '#1F1E1D',
  nearBlack:  '#141413',
  orange:     '#E66B33',
  bg:         '#FFF1E4',
  bgWarm:     '#E8DFD1',
  sage:       '#D0D5CC',
  fg2:        'rgba(31,30,29,0.60)',
  fg3:        'rgba(31,30,29,0.40)',
  fg4:        'rgba(31,30,29,0.28)',
  fg5:        'rgba(31,30,29,0.12)',
  white:      '#FFFFFF',
};

// ── Nav items ────────────────────────────────────────────────────
const NAV_ITEMS = [
  {
    label: 'Home',
    path: <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></>,
  },
  {
    label: 'Chat',
    path: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
  },
  {
    label: 'Journal',
    path: <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>,
  },
  {
    label: 'Lifestyle',
    path: <><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></>,
  },
  {
    label: 'Toolkit',
    path: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
  },
];

function BottomNav({ activeLabel, onNavigate }) {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'rgba(252,248,244,0.95)',
      backdropFilter: 'blur(12px)',
      borderTopLeftRadius: 28, borderTopRightRadius: 28,
      boxShadow: '0 -4px 20px rgba(0,0,0,0.04)',
      padding: '10px 6px 20px',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      zIndex: 40,
    }}>
      {NAV_ITEMS.map(item => {
        const active = item.label === activeLabel;
        return (
          <div
            key={item.label}
            onClick={() => onNavigate(item.label)}
            style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
              color: active ? APP.primary : APP.fg4,
              flex: 1, cursor: 'pointer',
              transition: 'color 200ms ease',
            }}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              strokeWidth={active ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">
              {item.path}
            </svg>
            <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '0.04em' }}>{item.label}</div>
          </div>
        );
      })}
    </div>
  );
}

function PhoneShell({ children }) {
  return (
    <div style={{
      width: 310, height: 672,
      borderRadius: 44, overflow: 'hidden',
      position: 'relative', background: '#000',
      boxShadow: '0 0 0 1.5px #0a0a0a, 0 0 0 9px #111, 0 32px 64px rgba(0,0,0,0.18)',
      flexShrink: 0,
    }}>
      {/* Dynamic island */}
      <div style={{
        position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
        width: 96, height: 28, borderRadius: 20, background: '#000', zIndex: 50,
      }}/>
      {/* Screen */}
      <div style={{ position: 'absolute', inset: 0, background: APP.bg }}>
        {children}
      </div>
      {/* Home indicator */}
      <div style={{
        position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
        width: 100, height: 4, borderRadius: 100,
        background: 'rgba(0,0,0,0.15)', zIndex: 60,
      }}/>
    </div>
  );
}

// ── Screen content components (no PhoneShell wrapper) ────────────

function HomeContent({ onNavigate }) {
  const dots = Array.from({ length: 148 }, (_, i) => {
    if (i < 62) return 'sober';
    if (i < 68) return 'not_sober';
    return i < 100 ? 'sober' : i < 110 ? 'past' : 'future';
  });
  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44, paddingBottom: 88, overflowY: 'hidden' }}>
      <div style={{ padding: '6px 18px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ paddingBottom: 4 }}>
          <div style={{ fontSize: 9, fontWeight: 900, letterSpacing: '0.2em', textTransform: 'uppercase', color: APP.fg3 }}>GOOD MORNING, NICOLE</div>
          <div style={{ fontSize: 24, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em', marginTop: 2 }}>Ready for Day 47?</div>
        </div>

        <div onClick={() => onNavigate('Chat')} style={{ background: APP.primary, color: '#fff', borderRadius: 28, padding: '16px 18px', position: 'relative', overflow: 'hidden', boxShadow: '0 6px 20px -4px rgba(21,71,52,0.35)', cursor: 'pointer', transition: 'opacity 150ms' }} onMouseDown={e => e.currentTarget.style.opacity='0.85'} onMouseUp={e => e.currentTarget.style.opacity='1'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
          <div style={{ position: 'absolute', right: -16, top: -16, width: 100, height: 100, borderRadius: '50%', border: '9px solid rgba(255,255,255,0.05)' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
            <div style={{ background: 'rgba(255,255,255,0.12)', padding: '5px', borderRadius: 9, display: 'flex' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
              </svg>
            </div>
            <span style={{ fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.8)' }}>Daily Check-In</span>
          </div>
          <div style={{ fontSize: 18, fontWeight: 700, lineHeight: 1.2, marginBottom: 4 }}>How are you feeling?</div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', fontWeight: 500 }}>A quick pulse-check with your AI companion.</div>
        </div>

        <div onClick={() => onNavigate('Journal')} style={{ background: APP.white, borderRadius: 22, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 2px 12px rgba(0,0,0,0.04)', cursor: 'pointer', transition: 'opacity 150ms' }} onMouseDown={e => e.currentTarget.style.opacity='0.7'} onMouseUp={e => e.currentTarget.style.opacity='1'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(21,71,52,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={APP.primary} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, fontSize: 13, color: APP.charcoal }}>Log Your Day</div>
            <div style={{ fontSize: 10, color: APP.fg3, marginTop: 1 }}>Write down your wins and triggers</div>
          </div>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={APP.fg4} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>

        <div onClick={() => onNavigate('Toolkit')} style={{ background: APP.white, borderRadius: 22, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 2px 12px rgba(0,0,0,0.04)', cursor: 'pointer', transition: 'opacity 150ms' }} onMouseDown={e => e.currentTarget.style.opacity='0.7'} onMouseUp={e => e.currentTarget.style.opacity='1'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(230,107,51,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={APP.orange} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z"/>
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, fontSize: 13, color: APP.charcoal }}>Coping Toolkit</div>
            <div style={{ fontSize: 10, color: APP.fg3, marginTop: 1 }}>Techniques to manage cravings</div>
          </div>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke={APP.fg4} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </div>

        <div onClick={() => onNavigate('Lifestyle')} style={{ background: APP.white, borderRadius: 24, overflow: 'hidden', display: 'flex', minHeight: 90, boxShadow: '0 2px 12px rgba(0,0,0,0.04)', cursor: 'pointer', transition: 'opacity 150ms' }} onMouseDown={e => e.currentTarget.style.opacity='0.7'} onMouseUp={e => e.currentTarget.style.opacity='1'} onMouseLeave={e => e.currentTarget.style.opacity='1'}>
          <div style={{ flex: 1.4, padding: '14px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ fontSize: 7, fontWeight: 900, letterSpacing: '0.2em', textTransform: 'uppercase', color: APP.fg3, marginBottom: 4 }}>SIP SOMETHING DIFFERENT</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: APP.charcoal, lineHeight: 1.2 }}>Alcohol Free Drinks</div>
          </div>
          <div style={{ flex: 1, background: '#d4c4b0', overflow: 'hidden' }}>
            <img src="https://images.pexels.com/photos/2789328/pexels-photo-2789328.jpeg?auto=compress&cs=tinysrgb&w=400" style={{ width: '100%', height: '100%', objectFit: 'cover' }} alt="Drinks"/>
          </div>
        </div>

        <div style={{ background: APP.nearBlack, borderRadius: 28, padding: '14px 16px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#fff' }}>Year</div>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#4ade80' }}>84%</div>
                <div style={{ fontSize: 7, fontWeight: 700, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>sober</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>40%</div>
                <div style={{ fontSize: 7, fontWeight: 700, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>complete</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(19, 1fr)', gap: 3 }}>
            {dots.map((status, i) => (
              <div key={i} style={{
                aspectRatio: '1', borderRadius: '50%',
                background: status === 'sober' ? '#22c55e' : status === 'not_sober' ? '#f87171' : status === 'past' ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.15)',
              }}/>
            ))}
          </div>
          <div style={{ marginTop: 8, fontSize: 9, fontWeight: 700, color: 'rgba(255,255,255,0.25)' }}>2026</div>
        </div>
      </div>
    </div>
  );
}

function ChatContent() {
  const messages = [
    { from: 'ai', text: "Good morning, Nicole! How are you feeling today?" },
    { from: 'user', text: "Pretty good actually. Had a hard moment last night but got through it." },
    { from: 'ai', text: "That's a real win — sitting with a craving and coming out the other side. What helped you through it?" },
    { from: 'user', text: "Made a fancy mocktail and put on a podcast. Felt stupid but it worked 😅" },
    { from: 'ai', text: "Not stupid at all — that's exactly what the toolkit is for. You should be proud." },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44, paddingBottom: 88, display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '8px 18px 10px', borderBottom: `1px solid ${APP.fg5}` }}>
        <div style={{ fontSize: 24, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em' }}>Sobella AI</div>
        <div style={{ fontSize: 11, color: APP.fg3, marginTop: 1 }}>Your sober companion</div>
      </div>
      <div style={{ flex: 1, overflowY: 'hidden', padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {messages.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.from === 'user' ? 'flex-end' : 'flex-start' }}>
            <div style={{
              maxWidth: '78%', padding: '9px 13px', borderRadius: 18,
              borderBottomLeftRadius: m.from === 'ai' ? 4 : 18,
              borderBottomRightRadius: m.from === 'user' ? 4 : 18,
              background: m.from === 'user' ? APP.primary : APP.white,
              color: m.from === 'user' ? '#fff' : APP.charcoal,
              fontSize: 12, lineHeight: 1.45, fontWeight: 500,
              boxShadow: '0 1px 4px rgba(0,0,0,0.06)',
            }}>{m.text}</div>
          </div>
        ))}
      </div>
      <div style={{ padding: '0 14px 10px', display: 'flex', gap: 8 }}>
        <div style={{ flex: 1, background: APP.white, borderRadius: 24, padding: '10px 16px', fontSize: 12, color: APP.fg4, border: `1px solid ${APP.sage}` }}>Message…</div>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: APP.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13"/><path d="M22 2L15 22l-4-9-9-4z"/></svg>
        </div>
      </div>
    </div>
  );
}

function JournalContent() {
  const moods = ['😔','😐','🙂','😊','✨'];
  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44, paddingBottom: 88, overflowY: 'hidden' }}>
      <div style={{ padding: '6px 18px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ paddingBottom: 4 }}>
          <div style={{ fontSize: 8, fontWeight: 900, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(21,71,52,0.4)', marginBottom: 2 }}>Tuesday 27 May</div>
          <div style={{ fontSize: 24, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em' }}>Daily Journal</div>
          <div style={{ fontSize: 12, color: APP.fg2, marginTop: 2 }}>Reflect on your progress.</div>
        </div>

        <div style={{ display: 'flex', background: 'rgba(208,213,204,0.25)', borderRadius: 16, padding: 3, gap: 3 }}>
          {[{ label: 'Write', active: true }, { label: 'History (12)' }].map(tab => (
            <div key={tab.label} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '8px 0', borderRadius: 12, fontSize: 11, fontWeight: 700,
              background: tab.active ? APP.white : 'transparent',
              color: tab.active ? APP.primary : APP.fg3,
              boxShadow: tab.active ? '0 1px 4px rgba(0,0,0,0.06)' : 'none',
            }}>{tab.label}</div>
          ))}
        </div>

        <div style={{ background: APP.white, borderRadius: 22, padding: '14px', boxShadow: '0 2px 12px rgba(0,0,0,0.04)', border: `1px solid ${APP.sage}` }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: APP.charcoal, marginBottom: 10 }}>Were you sober today?</div>
          <div style={{ display: 'flex', gap: 7 }}>
            <div style={{ flex: 1, padding: '10px 0', borderRadius: 14, fontWeight: 700, fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, background: '#22c55e', color: '#fff', boxShadow: '0 3px 10px rgba(34,197,94,0.2)' }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              Yes
            </div>
            <div style={{ flex: 1, padding: '10px 0', borderRadius: 14, fontWeight: 700, fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', background: APP.bg, color: APP.fg3, border: `1px solid ${APP.sage}` }}>No</div>
          </div>
        </div>

        <div style={{ background: APP.white, borderRadius: 22, padding: '12px 14px', boxShadow: '0 2px 12px rgba(0,0,0,0.04)', border: `1px solid ${APP.sage}` }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: APP.charcoal, marginBottom: 9 }}>How's your mood? (1–5)</div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {moods.map((m, i) => (
              <div key={i} style={{ width: 40, height: 40, borderRadius: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, background: i === 3 ? 'rgba(21,71,52,0.08)' : 'transparent', border: i === 3 ? '1.5px solid rgba(21,71,52,0.2)' : '1.5px solid transparent' }}>{m}</div>
            ))}
          </div>
        </div>

        <div style={{ background: APP.white, borderRadius: 22, padding: '12px 14px', boxShadow: '0 2px 12px rgba(0,0,0,0.04)', border: `1px solid ${APP.sage}` }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: APP.charcoal, marginBottom: 8 }}>Craving intensity (1–5)</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[1,2,3,4,5].map(n => (
              <div key={n} style={{ flex: 1, height: 32, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, background: n === 2 ? APP.primary : APP.bg, color: n === 2 ? '#fff' : APP.fg3 }}>{n}</div>
            ))}
          </div>
        </div>

        <div style={{ background: APP.white, borderRadius: 22, padding: '12px 14px', boxShadow: '0 2px 12px rgba(0,0,0,0.04)', border: `1px solid ${APP.sage}` }}>
          <div style={{ fontSize: 9, fontWeight: 900, letterSpacing: '0.2em', textTransform: 'uppercase', color: APP.fg3, marginBottom: 6 }}>Daily Summary</div>
          <div style={{ fontSize: 13, color: APP.charcoal, lineHeight: 1.5 }}>Walked past the off-licence without even thinking. Didn't realise until I was halfway home…</div>
        </div>
      </div>
    </div>
  );
}

function LifestyleContent() {
  const tracks = [
    { title: 'Morning Reset',            category: 'Morning',  duration: '8:47' },
    { title: 'Beat the Craving',         category: 'Craving',  duration: '6:54' },
    { title: 'After a Bad Day',          category: 'Emotions', duration: '8:23' },
    { title: 'Remember Why You Started', category: 'Mindset',  duration: '7:17' },
    { title: 'Calm Before Going Out',    category: 'Social',   duration: '7:19' },
    { title: 'Be Kinder to Yourself',    category: 'Self',     duration: '6:59' },
    { title: "Let's Unwind",             category: 'Evening',  duration: '9:29' },
  ];
  const catColor = {
    Morning:  '#d97706', Craving: '#dc2626', Emotions: '#7c3aed',
    Mindset:  '#0d9488', Social:  '#2563eb', Self:     '#db2777',
    Evening:  '#4f46e5',
  };
  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44, paddingBottom: 88, overflowY: 'hidden' }}>
      <div style={{ padding: '6px 18px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ paddingBottom: 2 }}>
          <div style={{ fontSize: 24, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em' }}>Guided Meditations</div>
          <div style={{ fontSize: 12, color: APP.fg2, marginTop: 2 }}>Designed specifically for recovery.</div>
        </div>
        {tracks.map((t, i) => {
          const col = catColor[t.category] || APP.primary;
          return (
            <div key={i} style={{ background: APP.white, borderRadius: 20, padding: '11px 13px', display: 'flex', alignItems: 'center', gap: 11, boxShadow: '0 2px 10px rgba(0,0,0,0.04)', border: '1px solid rgba(208,213,204,0.3)' }}>
              {/* Play button */}
              <div style={{ width: 38, height: 38, borderRadius: '50%', flexShrink: 0, background: `${col}14`, border: `1.5px solid ${col}30`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill={col} stroke="none"><polygon points="5 3 19 12 5 21 5 3"/></svg>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 12.5, color: APP.charcoal, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.title}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 2 }}>
                  <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '0.1em', textTransform: 'uppercase', color: col }}>{t.category}</span>
                </div>
              </div>
              <span style={{ fontSize: 10, fontWeight: 700, color: APP.fg4, flexShrink: 0 }}>{t.duration}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ToolkitContent() {
  const pepCategories = [
    { emoji: '🌱', label: 'Day One', color: '#0d9488', bg: 'rgba(13,148,136,0.08)', talks: [
      { title: 'Welcome to Sobella', sub: 'Your first steps into sober life', duration: '3 min' },
      { title: 'Why You\'re Doing This', sub: 'Reconnecting with your reason', duration: '4 min' },
    ]},
    { emoji: '🔥', label: 'Cravings', color: '#d97706', bg: 'rgba(217,119,6,0.08)', talks: [
      { title: 'Urge', sub: 'When you feel like using right now', duration: '3 min', free: true },
      { title: 'Triggered', sub: 'When something sets you off unexpectedly', duration: '2 min' },
      { title: 'Craving at Night', sub: 'Late-night urges and restlessness', duration: '3 min' },
    ]},
    { emoji: '🥂', label: 'Social', color: '#2563eb', bg: 'rgba(37,99,235,0.08)', talks: [
      { title: 'FOMO', sub: 'When everyone else seems to be drinking', duration: '2 min' },
      { title: 'Social Anxiety', sub: 'Before events, dates, dinners, parties', duration: '3 min' },
    ]},
  ];

  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44, paddingBottom: 88, overflowY: 'hidden' }}>
      <div style={{ padding: '6px 18px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {/* Header */}
        <div>
          <div style={{ fontSize: 24, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em' }}>Toolkit</div>
          <div style={{ fontSize: 12, color: APP.fg2, marginTop: 2 }}>Tools and audio support for every moment.</div>
        </div>

        {/* Search bar */}
        <div style={{ background: APP.white, border: `1px solid ${APP.sage}`, borderRadius: 18, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8, boxShadow: '0 1px 6px rgba(0,0,0,0.04)' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={APP.fg4} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          <span style={{ fontSize: 12, color: APP.fg4, fontWeight: 500 }}>Search pep talks, tools…</span>
        </div>

        {/* 3-tab switcher */}
        <div style={{ display: 'flex', background: 'rgba(208,213,204,0.25)', borderRadius: 16, padding: 3, gap: 2 }}>
          {[
            { label: '🎧 In the Moment', active: true },
            { label: '📖 Library' },
            { label: '🔧 Mine (0)' },
          ].map(tab => (
            <div key={tab.label} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '7px 2px', borderRadius: 12, fontSize: 9, fontWeight: 700,
              background: tab.active ? APP.white : 'transparent',
              color: tab.active ? APP.primary : APP.fg3,
              boxShadow: tab.active ? '0 1px 4px rgba(0,0,0,0.06)' : 'none',
              textAlign: 'center',
            }}>{tab.label}</div>
          ))}
        </div>

        {/* Pep talk list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {pepCategories.map(cat => (
            <div key={cat.label}>
              {/* Category header */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 7 }}>
                <span style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.15em', textTransform: 'uppercase', color: cat.color }}>
                  {cat.emoji} {cat.label}
                </span>
                <div style={{ flex: 1, height: 1, background: 'rgba(208,213,204,0.4)' }}/>
              </div>
              {/* Talks */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {cat.talks.map((talk, i) => (
                  <div key={i} style={{ background: APP.white, borderRadius: 16, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 1px 6px rgba(0,0,0,0.05)', border: '1px solid rgba(208,213,204,0.3)' }}>
                    <div style={{ width: 36, height: 36, borderRadius: 12, flexShrink: 0, background: cat.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>{cat.emoji}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 12, color: APP.charcoal }}>{talk.title}</div>
                      <div style={{ fontSize: 9, color: APP.fg3, marginTop: 1 }}>{talk.sub}</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 5, flexShrink: 0 }}>
                      <span style={{ fontSize: 9, color: APP.fg4, fontWeight: 700 }}>{talk.duration}</span>
                      <div style={{ width: 26, height: 26, borderRadius: '50%', background: talk.free ? cat.bg : 'rgba(208,213,204,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        {talk.free
                          ? <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={cat.color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                          : <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke={APP.fg4} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                        }
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Tab descriptions ──────────────────────────────────────────────
const TAB_COPY = {
  Home:      { label: 'Home',      sub: 'Your day at a glance' },
  Chat:      { label: 'AI Chat',   sub: 'Your always-on sober companion' },
  Journal:   { label: 'Journal',   sub: 'A short reflection, every day' },
  Lifestyle: { label: 'Lifestyle', sub: 'Build a life you enjoy sober' },
  Toolkit:   { label: 'Toolkit',   sub: 'Techniques for the hard moments' },
};

// ── Single interactive phone ──────────────────────────────────────
function InteractivePhone() {
  const [active, setActive] = useASS('Home');
  const content = {
    Home:      <HomeContent onNavigate={setActive} />,
    Chat:      <ChatContent />,
    Journal:   <JournalContent />,
    Lifestyle: <LifestyleContent />,
    Toolkit:   <ToolkitContent />,
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
      <PhoneShell>
        {content[active]}
        <BottomNav activeLabel={active} onNavigate={setActive} />
      </PhoneShell>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontWeight: 700, fontSize: 16, color: APP.charcoal }}>{TAB_COPY[active].label}</div>
        <div style={{ fontSize: 13, color: APP.fg2, marginTop: 4 }}>{TAB_COPY[active].sub}</div>
      </div>
    </div>
  );
}

// ── Section wrapper ───────────────────────────────────────────────
function AppScreensSection() {
  const L = window.LandingTokens;
  const w = useWindowWidth();
  const mob = w < 768;

  return (
    <section style={{ background: L.bgWarm, padding: mob ? '80px 0 100px' : '120px 0 140px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: mob ? '0 20px' : '0 60px' }}>
        {mob ? (
          /* Mobile: header then phone */
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 48 }}>
            <div style={{ textAlign: 'center' }}>
              <span style={{ fontWeight: 900, fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: L.fg3 }}>The experience</span>
              <h2 style={{ marginTop: 16, fontSize: 32, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, color: L.charcoal, textWrap: 'balance' }}>
                Everything you need,<br/>
                <span style={{ color: L.primary }}>quietly in your pocket.</span>
              </h2>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: L.fg2, margin: '20px 0 0' }}>
                Tap the nav below to explore the app.
              </p>
            </div>
            <InteractivePhone />
          </div>
        ) : (
          /* Desktop: copy left, phone right */
          <div style={{ display: 'flex', alignItems: 'center', gap: 80, justifyContent: 'center' }}>
            <div style={{ flex: 1, maxWidth: 440 }}>
              <span style={{ fontWeight: 900, fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: L.fg3 }}>The experience</span>
              <h2 style={{ marginTop: 16, fontSize: 52, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.05, color: L.charcoal, textWrap: 'balance' }}>
                Everything you need,<br/>
                <span style={{ color: L.primary }}>quietly in your pocket.</span>
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: L.fg2, margin: '24px 0 0', maxWidth: 380 }}>
                Journal your day, reach for a technique when the pull hits, or chat with your AI companion at any hour. Tap through the screens to explore.
              </p>
            </div>
            <InteractivePhone />
          </div>
        )}
      </div>
    </section>
  );
}

window.LandingAppScreens = AppScreensSection;