// Simplified phone mockup showing Sobella's home screen — for landing hero
const { useState: useLandingPhoneState } = React;

function LandingPhoneMock() {
  const C = {
    primary: '#154734',
    bg: '#FFF1E4',
    charcoal: '#1F1E1D',
    orange: '#E66B33',
    fg2: 'rgba(31,30,29,0.60)',
    fg3: 'rgba(31,30,29,0.40)',
    fg4: 'rgba(31,30,29,0.30)',
  };

  return (
    <div style={{
      width: 402, height: 874, borderRadius: 48, overflow: 'hidden',
      position: 'relative', background: '#000',
      boxShadow: '0 0 0 2px #0a0a0a, 0 40px 80px rgba(0,0,0,0.18), 0 0 0 12px #111',
    }}>
      {/* Dynamic island */}
      <div style={{
        position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
        width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
      }}/>

      {/* Status bar */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 54,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 36px 0', zIndex: 40,
        color: C.charcoal,
      }}>
        <div style={{
          fontFamily: '-apple-system, "SF Pro", system-ui',
          fontWeight: 600, fontSize: 16,
        }}>9:41</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <svg width="17" height="11" 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="25" height="12" 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: C.bg,
        display: 'flex', flexDirection: 'column',
        paddingTop: 60,
      }}>
        {/* Header wordmark */}
        <div style={{
          padding: '16px 24px 8px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{
            fontWeight: 900, fontSize: 13, letterSpacing: '0.8em',
            textTransform: 'uppercase', color: C.charcoal,
            marginRight: '-0.8em',
          }}>SOBELLA</span>
        </div>

        <div style={{ flex: 1, padding: '12px 22px 100px', overflow: 'hidden' }}>
          <div style={{
            fontWeight: 900, fontSize: 11, letterSpacing: '0.3em',
            textTransform: 'uppercase', color: C.fg3,
          }}>Good morning, Maren</div>

          {/* Hero card */}
          <div style={{
            marginTop: 14, position: 'relative', overflow: 'hidden',
            background: C.primary, borderRadius: 36, padding: 26,
            color: '#fff', boxShadow: '0 10px 30px -8px rgba(21,71,52,0.25)',
          }}>
            <div style={{
              position: 'absolute', top: -40, right: -40, width: 180, height: 180,
              borderRadius: '50%', border: '10px solid rgba(255,255,255,0.05)',
            }}/>
            <div style={{
              position: 'absolute', top: -10, right: -10, width: 120, height: 120,
              borderRadius: '50%', border: '10px solid rgba(255,255,255,0.05)',
            }}/>
            <div style={{ position: 'relative' }}>
              <div style={{
                fontWeight: 900, fontSize: 10, letterSpacing: '0.3em',
                color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase',
              }}>Ready for</div>
              <div style={{
                marginTop: 6, fontSize: 36, fontWeight: 700,
                letterSpacing: '-0.02em', lineHeight: 1.1,
              }}>Day 12?</div>
              <div style={{
                marginTop: 12, fontSize: 14, lineHeight: 1.5,
                color: 'rgba(255,255,255,0.75)', maxWidth: 220,
              }}>
                Your companion is here. One quiet day at a time.
              </div>
              <button style={{
                marginTop: 20, background: '#fff', color: C.primary,
                border: 'none', fontFamily: 'inherit',
                padding: '11px 18px', borderRadius: 9999,
                fontWeight: 700, fontSize: 13, cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                Daily check-in
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M5 12h14M12 5l7 7-7 7"/>
                </svg>
              </button>
            </div>
          </div>

          {/* Row cards */}
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { t: 'Log your day', s: 'A short journal prompt', tint: 'primary', ic: 'pen' },
              { t: 'Coping toolkit', s: '5 techniques ready', tint: 'orange', ic: 'spark' },
              { t: 'Alcohol-free drinks', s: '24 saved', tint: 'primary', ic: 'cup' },
            ].map((r, i) => (
              <div key={i} style={{
                background: '#fff', borderRadius: 24, padding: 16,
                display: 'flex', alignItems: 'center', gap: 14,
                boxShadow: '0 4px 20px -2px rgba(21,71,52,0.08)',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 14,
                  background: r.tint === 'orange' ? 'rgba(230,107,51,0.10)' : 'rgba(21,71,52,0.06)',
                  color: r.tint === 'orange' ? C.orange : C.primary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  {r.ic === 'pen' && <svg width="20" height="20" 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>}
                  {r.ic === 'spark' && <svg width="20" height="20" 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>}
                  {r.ic === 'cup' && <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/></svg>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 15, color: C.charcoal }}>{r.t}</div>
                  <div style={{ fontSize: 12, color: C.fg3, marginTop: 2, fontWeight: 500 }}>{r.s}</div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke={C.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: '#fff', borderTopLeftRadius: 36, borderTopRightRadius: 36,
          boxShadow: '0 -10px 40px rgba(0,0,0,0.04)',
          padding: '14px 24px 28px',
          display: 'flex', justifyContent: 'space-around', alignItems: 'center',
        }}>
          {[
            { label: 'Home', active: true, i: 'home' },
            { label: 'Journal', i: 'book' },
            { label: 'Drinks', i: 'cup' },
            { label: 'You', i: 'user' },
          ].map(item => (
            <div key={item.label} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              color: item.active ? C.primary : C.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.i === 'home' && <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></>}
                {item.i === 'book' && <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"/>}
                {item.i === 'cup' && <><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"/></>}
                {item.i === 'user' && <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>}
              </svg>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.05em' }}>
                {item.label}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Home indicator */}
      <div style={{
        position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
        width: 139, height: 5, borderRadius: 100,
        background: 'rgba(0,0,0,0.25)', zIndex: 60,
      }}/>
    </div>
  );
}

window.LandingPhoneMock = LandingPhoneMock;