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

const { useState: useASS, useEffect: useASE, useRef: useASR } = 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',
};

function PhoneShell({ children }) {
  return (
    <div style={{
      width: 340, height: 736,
      borderRadius: 44, overflow: 'hidden',
      position: 'relative', background: '#000',
      boxShadow: '0 0 0 1.5px #0a0a0a, 0 0 0 9px #111, 0 24px 48px rgba(0,0,0,0.10)',
      flexShrink: 0,
    }}>
      {/* Dynamic island */}
      <div style={{
        position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
        width: 106, height: 30, borderRadius: 20, background: '#000', zIndex: 50,
      }}/>
      {/* Status bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 48,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 28px 0', zIndex: 40, color: APP.charcoal,
      }}>
        <div style={{ fontFamily: '-apple-system,"SF Pro",system-ui', fontWeight: 600, fontSize: 14 }}>9:41</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <svg width="15" height="10" viewBox="0 0 17 11"><g fill="currentColor">
            <rect x="0" y="7" width="3" height="4" rx="0.7"/>
            <rect x="4.5" y="4.5" width="3" height="6.5" rx="0.7"/>
            <rect x="9" y="2" width="3" height="9" rx="0.7"/>
            <rect x="13.5" y="0" width="3" height="11" rx="0.7"/>
          </g></svg>
          <svg width="21" height="11" viewBox="0 0 25 12">
            <rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke="currentColor" strokeOpacity="0.4" fill="none"/>
            <rect x="2" y="2" width="18" height="8" rx="1.8" fill="currentColor"/>
            <path d="M22.5 4V8C23.2 7.7 23.8 7 23.8 6C23.8 5 23.2 4.3 22.5 4Z" fill="currentColor" fillOpacity="0.4"/>
          </svg>
        </div>
      </div>
      {/* Screen */}
      <div style={{ position: 'absolute', inset: 0, background: APP.bg, paddingTop: 50 }}>
        {children}
      </div>
      {/* Home indicator */}
      <div style={{
        position: 'absolute', bottom: 7, left: '50%', transform: 'translateX(-50%)',
        width: 118, height: 4, borderRadius: 100,
        background: 'rgba(0,0,0,0.18)', zIndex: 60,
      }}/>
    </div>
  );
}

// ── Home screen ───────────────────────────────────────────────
function HomeScreen() {
  // Year grid — 19 cols, mix of sober/past/future dots
  const dots = Array.from({ length: 119 }, (_, i) => {
    if (i < 38) return 'sober';
    if (i < 43) return 'not_sober';
    if (i < 80) return 'sober';
    if (i < 87) return 'past';
    return 'future';
  });

  return (
    <PhoneShell>
      <div style={{ height: '100%', overflowY: 'hidden', padding: '6px 20px 80px' }}>
        {/* Greeting */}
        <div style={{ paddingTop: 8, marginBottom: 16 }}>
          <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.2em', textTransform: 'uppercase', color: APP.fg3 }}>
            GOOD MORNING, NICOLE
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em', marginTop: 2 }}>
            Ready for Day 47?
          </div>
        </div>

        {/* Green check-in card */}
        <div style={{
          background: APP.primary, color: '#fff',
          borderRadius: 32, padding: '20px 22px',
          position: 'relative', overflow: 'hidden',
          marginBottom: 10,
          boxShadow: '0 8px 24px -4px rgba(21,71,52,0.30)',
        }}>
          <div style={{ position: 'absolute', right: -16, top: -16, width: 120, height: 120, borderRadius: '50%', border: '10px solid rgba(255,255,255,0.05)' }}/>
          <div style={{ position: 'absolute', right: -34, top: -34, width: 120, height: 120, borderRadius: '50%', border: '10px solid rgba(255,255,255,0.05)' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <div style={{ background: 'rgba(255,255,255,0.12)', padding: '6px', borderRadius: 10, display: 'flex' }}>
                <svg width="16" height="16" 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"/>
                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                </svg>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: 'rgba(255,255,255,0.8)' }}>Daily Check-In</span>
            </div>
            <div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.2, marginBottom: 6 }}>How are you feeling?</div>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', fontWeight: 500 }}>A quick pulse-check with your AI companion.</div>
          </div>
        </div>

        {/* Log Your Day card */}
        <div style={{
          background: APP.white, borderRadius: 26, padding: '14px 16px',
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8,
          boxShadow: '0 4px 16px rgba(0,0,0,0.04)',
        }}>
          <div style={{ width: 42, height: 42, borderRadius: 14, background: 'rgba(21,71,52,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="20" height="20" 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: 14, color: APP.charcoal }}>Log Your Day</div>
            <div style={{ fontSize: 11, color: APP.fg3, marginTop: 1 }}>Write down your wins and triggers</div>
          </div>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: APP.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="14" height="14" 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>

        {/* Coping Toolkit card */}
        <div style={{
          background: APP.white, borderRadius: 26, padding: '14px 16px',
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10,
          boxShadow: '0 4px 16px rgba(0,0,0,0.04)',
        }}>
          <div style={{ width: 42, height: 42, borderRadius: 14, background: 'rgba(230,107,51,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={APP.orange} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3-1.9 5.8L4 10l5.1 3.2L8 20l4-3.7L16 20l-1-6.8L20 10l-6-1.2z"/></svg>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, fontSize: 14, color: APP.charcoal }}>Coping Toolkit</div>
            <div style={{ fontSize: 11, color: APP.fg3, marginTop: 1 }}>Techniques to manage cravings</div>
          </div>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: APP.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="14" height="14" 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>

        {/* Year grid */}
        <div style={{ background: APP.nearBlack, borderRadius: 32, padding: '18px 18px 14px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: '#fff' }}>Year</div>
            <div style={{ display: 'flex', gap: 16 }}>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: '#4ade80' }}>84%</div>
                <div style={{ fontSize: 8, fontWeight: 700, color: 'rgba(255,255,255,0.35)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>sober</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: '#fff' }}>33%</div>
                <div style={{ fontSize: 8, 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: 4 }}>
            {dots.map((status, i) => (
              <div key={i} style={{
                aspectRatio: '1', borderRadius: '50%',
                background: status === 'sober' ? '#22c55e'
                  : status === 'not_sober' ? '#f87171'
                  : status === 'past' ? '#fff'
                  : 'rgba(255,255,255,0.18)',
              }}/>
            ))}
          </div>
          <div style={{ marginTop: 10, fontSize: 10, fontWeight: 700, color: 'rgba(255,255,255,0.25)' }}>2026</div>
        </div>
      </div>

      {/* Bottom nav */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: APP.white, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        boxShadow: '0 -8px 30px rgba(0,0,0,0.05)',
        padding: '12px 20px 24px',
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      }}>
        {[
          { label: 'Home', active: true, 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: '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: 'Drinks', path: <><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z"/><path d="M6 2v3M10 2v3M14 2v3"/></> },
          { label: 'You', path: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></> },
        ].map(item => (
          <div key={item.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: item.active ? APP.primary : APP.fg4 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={item.active ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">
              {item.path}
            </svg>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>{item.label}</div>
          </div>
        ))}
      </div>
    </PhoneShell>
  );
}

// ── Journal screen ────────────────────────────────────────────
function JournalScreen() {
  const moods = ['😔','😐','🙂','😊','✨'];
  return (
    <PhoneShell>
      <div style={{ height: '100%', overflowY: 'hidden', padding: '6px 20px 80px' }}>
        {/* Header */}
        <div style={{ paddingTop: 8, marginBottom: 16 }}>
          <div style={{ fontSize: 9, fontWeight: 900, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(21,71,52,0.4)', marginBottom: 2 }}>
            Tuesday 29 April
          </div>
          <div style={{ fontSize: 26, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em' }}>Daily Journal</div>
          <div style={{ fontSize: 13, color: APP.fg2, marginTop: 2 }}>Reflect on your progress.</div>
        </div>

        {/* Tab switcher */}
        <div style={{
          display: 'flex', background: 'rgba(208,213,204,0.25)', borderRadius: 18,
          padding: 4, marginBottom: 14, gap: 4,
        }}>
          {[
            { label: 'Write', active: true, icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> },
            { label: 'History (12)', icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg> },
          ].map(tab => (
            <div key={tab.label} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              padding: '9px 0', borderRadius: 14, fontSize: 12, 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.icon}{tab.label}
            </div>
          ))}
        </div>

        {/* Sober today */}
        <div style={{ background: APP.white, borderRadius: 24, padding: '16px', marginBottom: 10, boxShadow: '0 2px 12px rgba(0,0,0,0.04)', border: `1px solid ${APP.sage}` }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: APP.charcoal, marginBottom: 12 }}>Were you sober today?</div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{
              flex: 1, padding: '12px 0', borderRadius: 16, fontWeight: 700, fontSize: 15,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              background: '#22c55e', color: '#fff',
              boxShadow: '0 4px 12px rgba(34,197,94,0.2)',
            }}>
              <svg width="16" height="16" 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: '12px 0', borderRadius: 16, fontWeight: 700, fontSize: 15,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              background: APP.bg, color: APP.fg3, border: `1px solid ${APP.sage}`,
            }}>No</div>
          </div>
        </div>

        {/* Mood row */}
        <div style={{ background: APP.white, borderRadius: 24, padding: '14px 16px', marginBottom: 10, 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 }}>How's your mood? (1-5)</div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {moods.map((m, i) => (
              <div key={i} style={{
                width: 44, height: 44, borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22,
                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>

        {/* Journal prompt */}
        <div style={{ background: APP.white, borderRadius: 24, padding: '14px 16px', boxShadow: '0 2px 12px rgba(0,0,0,0.04)', border: `1px solid ${APP.sage}` }}>
          <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.2em', textTransform: 'uppercase', color: APP.fg3, marginBottom: 8 }}>Daily Summary</div>
          <div style={{ fontSize: 14, 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>

      {/* Bottom nav */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: APP.white, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        boxShadow: '0 -8px 30px rgba(0,0,0,0.05)',
        padding: '12px 20px 24px',
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      }}>
        {[
          { 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: 'Journal', active: true, 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: 'Drinks', path: <><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z"/><path d="M6 2v3M10 2v3M14 2v3"/></> },
          { label: 'You', path: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></> },
        ].map(item => (
          <div key={item.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: item.active ? APP.primary : APP.fg4 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={item.active ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">{item.path}</svg>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>{item.label}</div>
          </div>
        ))}
      </div>
    </PhoneShell>
  );
}

// ── Toolkit screen ────────────────────────────────────────────
function ToolkitScreen() {
  const tools = [
    { title: 'Cold Shower + Music', duration: '5 min', category: 'reset', color: APP.primary },
    { title: 'Walk + Podcast', duration: '30 min', category: 'distraction', color: APP.primary },
    { title: 'Message Safe Person', duration: '2 min', category: 'social', color: APP.primary },
    { title: 'Make Fancy AF Drink', duration: '10 min', category: 'night', color: APP.orange },
    { title: 'Write Consequences', duration: '5 min', category: 'reset', color: APP.primary },
  ];

  const catColors = {
    reset: { bg: 'rgba(21,71,52,0.06)', text: APP.primary },
    distraction: { bg: 'rgba(21,71,52,0.06)', text: APP.primary },
    social: { bg: 'rgba(21,71,52,0.06)', text: APP.primary },
    night: { bg: 'rgba(230,107,51,0.10)', text: APP.orange },
  };

  return (
    <PhoneShell>
      <div style={{ height: '100%', overflowY: 'hidden', padding: '6px 20px 80px' }}>
        {/* Header */}
        <div style={{ paddingTop: 8, marginBottom: 16 }}>
          <div style={{ fontSize: 26, fontWeight: 700, color: APP.charcoal, letterSpacing: '-0.02em' }}>Coping Toolkit</div>
          <div style={{ fontSize: 13, color: APP.fg2, marginTop: 2 }}>Immediate, tap-and-go alternatives.</div>
        </div>

        {/* Tab switcher */}
        <div style={{
          display: 'flex', background: 'rgba(208,213,204,0.25)', borderRadius: 18,
          padding: 4, marginBottom: 14, gap: 4,
        }}>
          {[
            { label: 'Library', active: true, icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/></svg> },
            { label: 'My Tools', icon: <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/></svg> },
          ].map(tab => (
            <div key={tab.label} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
              padding: '9px 0', borderRadius: 14, fontSize: 12, 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.icon}{tab.label}
            </div>
          ))}
        </div>

        {/* Tool list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {tools.map((tool, i) => {
            const cc = catColors[tool.category] || catColors.reset;
            return (
              <div key={i} style={{
                background: APP.white, borderRadius: 22, padding: '13px 14px',
                display: 'flex', alignItems: 'center', gap: 12,
                boxShadow: '0 2px 10px rgba(0,0,0,0.04)',
                border: '1px solid rgba(208,213,204,0.4)',
              }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 14, flexShrink: 0,
                  background: cc.bg, color: cc.text,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="m12 3-1.9 5.8L4 10l5.1 3.2L8 20l4-3.7L16 20l-1-6.8L20 10l-6-1.2z"/>
                  </svg>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 13, color: APP.charcoal }}>{tool.title}</div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 3, alignItems: 'center' }}>
                    <span style={{
                      fontSize: 9, fontWeight: 900, letterSpacing: '0.12em', textTransform: 'uppercase',
                      background: cc.bg, color: cc.text,
                      borderRadius: 9999, padding: '2px 7px',
                    }}>{tool.category}</span>
                    <span style={{ fontSize: 10, color: APP.fg3, fontWeight: 600 }}>{tool.duration}</span>
                  </div>
                </div>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={APP.fg4} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
              </div>
            );
          })}
        </div>
      </div>

      {/* Bottom nav */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: APP.white, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        boxShadow: '0 -8px 30px rgba(0,0,0,0.05)',
        padding: '12px 20px 24px',
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      }}>
        {[
          { 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: '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: 'Drinks', path: <><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z"/><path d="M6 2v3M10 2v3M14 2v3"/></> },
          { label: 'You', path: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></> },
        ].map(item => (
          <div key={item.label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: item.active ? APP.primary : APP.fg4 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={item.active ? 2.5 : 2} strokeLinecap="round" strokeLinejoin="round">{item.path}</svg>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.04em' }}>{item.label}</div>
          </div>
        ))}
      </div>
    </PhoneShell>
  );
}

// ── Mobile swipeable carousel ─────────────────────────────────
function MobileScreensCarousel({ L }) {
  const [activeIdx, setActiveIdx] = useASS(0);
  const screens = [
    { el: <HomeScreen/>, label: 'Home', sub: 'Your day at a glance' },
    { el: <JournalScreen/>, label: 'Journal', sub: 'A short reflection, every day' },
    { el: <ToolkitScreen/>, label: 'Toolkit', sub: 'Techniques for the hard moments' },
  ];
  const onScroll = (e) => {
    const idx = Math.round(e.target.scrollLeft / e.target.offsetWidth);
    setActiveIdx(idx);
  };
  return (
    <div>
      <style>{`.as-carousel::-webkit-scrollbar{display:none}`}</style>
      <div
        className="as-carousel"
        onScroll={onScroll}
        style={{
          display: 'flex', overflowX: 'scroll',
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
          scrollbarWidth: 'none',
          paddingTop: 12,
        }}
      >
        {screens.map((s, i) => (
          <div key={i} style={{
            minWidth: '100%', scrollSnapAlign: 'center',
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 22,
            padding: '0 20px', boxSizing: 'border-box',
          }}>
            {s.el}
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontWeight: 700, fontSize: 15, color: L.charcoal }}>{s.label}</div>
              <div style={{ fontSize: 13, color: L.fg2, marginTop: 4 }}>{s.sub}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 28 }}>
        {screens.map((_, i) => (
          <div key={i} style={{
            height: 6, borderRadius: 3,
            width: i === activeIdx ? 20 : 6,
            background: i === activeIdx ? L.primary : 'rgba(21,71,52,0.2)',
            transition: 'width 300ms ease, background 300ms ease',
          }}/>
        ))}
      </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' }}>
      {/* Header */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: mob ? '0 20px' : '0 40px', marginBottom: mob ? 48 : 72 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <span style={{ fontWeight: 900, fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: L.fg3 }}>The experience</span>
            <h2 style={{
              marginTop: 16, fontSize: mob ? 32 : 56, fontWeight: 700,
              letterSpacing: '-0.03em', lineHeight: 1.05,
              color: L.charcoal, maxWidth: 560, textWrap: 'balance', margin: '16px 0 0',
            }}>
              Everything you need,<br/>
              <span style={{ color: L.primary }}>quietly in your pocket.</span>
            </h2>
          </div>
          {!mob && (
            <p style={{ fontSize: 17, lineHeight: 1.55, color: L.fg2, maxWidth: 340, margin: 0 }}>
              Journal your day, reach for a technique when the pull hits, or swap in a drink that still feels right in the moment.
            </p>
          )}
        </div>
        {mob && (
          <p style={{ fontSize: 15, lineHeight: 1.55, color: L.fg2, margin: '20px 0 0' }}>
            Journal your day, reach for a technique when the pull hits, or swap in a drink that still feels right in the moment.
          </p>
        )}
      </div>

      {mob ? (
        <MobileScreensCarousel L={L}/>
      ) : (
        /* Desktop: staggered trio */
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start', gap: 32, padding: '0 40px' }}>
          <div style={{ transform: 'translateY(-28px)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
            <HomeScreen/>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontWeight: 700, fontSize: 15, color: L.charcoal }}>Home</div>
              <div style={{ fontSize: 13, color: L.fg2, marginTop: 4 }}>Your day at a glance</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
            <JournalScreen/>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontWeight: 700, fontSize: 15, color: L.charcoal }}>Journal</div>
              <div style={{ fontSize: 13, color: L.fg2, marginTop: 4 }}>A short reflection, every day</div>
            </div>
          </div>
          <div style={{ transform: 'translateY(28px)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
            <ToolkitScreen/>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontWeight: 700, fontSize: 15, color: L.charcoal }}>Toolkit</div>
              <div style={{ fontSize: 13, color: L.fg2, marginTop: 4 }}>Techniques for the hard moments</div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

window.LandingAppScreens = AppScreensSection;