// Mobile homepage mock, shown inside an iOS device frame
function MobileHome({ go }) {
  return (
    <div style={{ height: '100%', background: 'var(--bg)', overflowY: 'auto', position: 'relative' }} className="linen">
      {/* Status bar spacer */}
      <div style={{ height: 60 }}/>
      {/* Top bar */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 20px' }}>
        <Icon.menu size={20}/>
        <Logo compact size={0.85}/>
        <Icon.search size={20}/>
      </div>

      {/* Hero */}
      <div style={{ padding: '32px 24px 0' }}>
        <div className="eyebrow" style={{ fontSize: 10, marginBottom: 18 }}>Issue no. 14</div>
        <h1 className="serif" style={{ fontSize: 50, lineHeight: 0.98, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
          Cannabis,<br/><em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>slowly.</em>
        </h1>
        <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 20 }}>
          A field guide to good shops, soft linens, and the quiet afternoon.
        </p>
        <button className="btn btn-primary" onClick={() => go('/directory')}
                style={{ marginTop: 20, padding: '12px 18px', fontSize: 13 }}>
          <Icon.search size={12}/> Find a shop near you
        </button>
      </div>

      {/* Hero image */}
      <div style={{ padding: '28px 24px 0' }}>
        <WarmImg src={IMG.hempFarmMobile} aspect="2/3" placeholder="hemp farm at sunset"/>
      </div>

      {/* Stories rail */}
      <div style={{ padding: '44px 0 0' }}>
        <div style={{ padding: '0 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
          <div>
            <div className="eyebrow" style={{ fontSize: 10, marginBottom: 6 }}>— This week</div>
            <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>From the porch</div>
          </div>
          <a href="#" className="tlink" style={{ fontSize: 12 }}>All →</a>
        </div>
        <div className="noscroll" style={{ display: 'flex', gap: 14, padding: '0 24px 8px', overflowX: 'auto' }}>
          {[
            { t: 'Nine ways to set a slow evening', c: 'At home', img: IMG.candle },
            { t: 'The shop in Hudson that feels like a kitchen', c: 'Field notes', img: IMG.dispensary2 },
            { t: 'A quiet morning, a soft chair', c: 'Rituals', img: IMG.tea },
          ].map((s, i) => (
            <div key={i} style={{ minWidth: 200, flexShrink: 0 }}>
              <div style={{ overflow: 'hidden', marginBottom: 12 }}>
                <WarmImg src={s.img} aspect="4/5" placeholder="story"/>
              </div>
              <div className="eyebrow" style={{ fontSize: 9, color: 'var(--accent-deep)' }}>{s.c}</div>
              <div className="serif" style={{ fontSize: 16, lineHeight: 1.2, marginTop: 6, fontWeight: 500 }}>{s.t}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Directory teaser */}
      <div style={{ margin: '44px 24px 0', padding: 20, background: 'var(--bg-tint)', borderRadius: 4 }}>
        <div className="eyebrow" style={{ fontSize: 10, marginBottom: 8 }}>— The directory</div>
        <div className="serif" style={{ fontSize: 22, lineHeight: 1.2, fontWeight: 500 }}>
          412 shops.<br/>Every one visited.
        </div>
        <form onSubmit={e => { e.preventDefault(); go('/directory'); }}
              style={{ marginTop: 16, display: 'flex', gap: 6, background: 'white', padding: 5, borderRadius: 999 }}>
          <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', color: 'var(--ink-soft)' }}>
            <Icon.pin size={12}/>
          </div>
          <input placeholder="ZIP or city" style={{ border: 'none', outline: 'none', flex: 1, fontSize: 13, background: 'transparent' }}/>
          <button type="submit" className="btn btn-primary" style={{ padding: '8px 14px', fontSize: 11 }}>Browse</button>
        </form>
      </div>

      {/* Goods row */}
      <div style={{ padding: '44px 0 80px' }}>
        <div style={{ padding: '0 24px', marginBottom: 18 }}>
          <div className="eyebrow" style={{ fontSize: 10, marginBottom: 6 }}>— Goods we love</div>
          <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>Hemp linen, small candles</div>
        </div>
        <div style={{ padding: '0 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {[
            { n: 'Heavy linen throw', p: '$142', img: IMG.bedding },
            { n: 'Field candle No. 3', p: '$38', img: IMG.candle },
          ].map((g, i) => (
            <div key={i}>
              <div style={{ background: 'white', padding: 8 }}>
                <WarmImg src={g.img} aspect="1/1" placeholder={g.n}/>
              </div>
              <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div className="serif" style={{ fontSize: 13, fontWeight: 500 }}>{g.n}</div>
                <div className="serif" style={{ fontSize: 13, color: 'var(--accent-deep)' }}>{g.p}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MobileHome });