// wf/category.jsx — Four directions for a category page (Restaurants)

// Helper: faux address list data
const ADDRESSES = [
  { name:'Tuba',           kind:'Plage & cuisine de la mer',     dist:'12 min · Goudes',     rating:'4.6', emoji:'arch'   },
  { name:'AM par Alexandre Mazzia', kind:'★★★ · Cuisine du monde', dist:'8 min · 13008',  rating:'4.8', emoji:'circle' },
  { name:'Chez Étienne',   kind:'Pizza marseillaise',             dist:'15 min · Panier',    rating:'4.5', emoji:'rect'   },
  { name:'Livingston',     kind:'Cocktails · bistronomie',        dist:'6 min · Préfecture', rating:'4.7', emoji:'circle' },
  { name:'La Mercerie',    kind:'Bistrot moderne',                dist:'10 min · Noailles',  rating:'4.6', emoji:'arch'   },
];

// ─── A · Liste verticale avec photos rondes ─────────────────────────────
const CatList = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div className="serif" style={{ fontSize: 40, lineHeight: 1, fontWeight: 400, marginTop: 4 }}>
      Restaurants
    </div>
    <div className="serif" style={{ fontSize: 16, fontStyle:'italic', color:'var(--wf-ink-soft)', marginTop: 4 }}>
      mes adresses préférées
    </div>
    <Para lines={2} opacity={0.45} />
    <div className="hairline" style={{ marginTop: 14 }} />
    <div>
      {ADDRESSES.map((a,i) => (
        <div key={i} style={{ display:'flex', gap: 12, alignItems:'center', padding:'12px 0', borderBottom:'1px solid var(--wf-hairline)' }}>
          <Photo w={56} h={56} variant="circle" label="" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="serif" style={{ fontSize: 16, lineHeight: 1.1 }}>{a.name}</div>
            <div className="sans" style={{ fontSize: 10, color:'var(--wf-ink-soft)', marginTop: 2 }}>{a.kind}</div>
            <div style={{ display:'flex', gap: 8, alignItems:'center', marginTop: 4 }}>
              <span className="sans" style={{ fontSize: 9, color:'var(--wf-ink-soft)' }}>{a.dist}</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap: 2 }}>
                <Icon name="star" size={9} />
                <span className="sans" style={{ fontSize: 9 }}>{a.rating}</span>
              </span>
            </div>
          </div>
          <Icon name="chev-r" size={14} color="var(--wf-ink-soft)" />
        </div>
      ))}
    </div>
  </Phone>
);

// ─── B · Magazine éditorial (alternating photo + texte) ─────────────────
const CatMagazine = () => (
  <Phone height={720}>
    <PhoneHeader />
    <Eyebrow>Carnet d'adresses · 01</Eyebrow>
    <div className="serif" style={{ fontSize: 34, lineHeight: 1, fontWeight: 400, marginTop: 6 }}>
      <i>Restaurants.</i>
    </div>
    <div className="serif" style={{ fontSize: 14, color:'var(--wf-ink-soft)', fontStyle:'italic', marginTop: 8 }}>
      Cinq tables que j'aime, du comptoir simple<br/>au grand restaurant.
    </div>

    {ADDRESSES.slice(0, 3).map((a, i) => (
      <div key={i} style={{ marginTop: 16, display:'flex', gap: 12, flexDirection: i % 2 ? 'row-reverse' : 'row', alignItems:'flex-start' }}>
        <Photo w={110} h={130} variant={i === 1 ? 'arch' : 'rect'} label="" />
        <div style={{ flex: 1, paddingTop: 2 }}>
          <span className="eyebrow">0{i+1} · {a.kind.split(' · ')[0]}</span>
          <div className="serif" style={{ fontSize: 18, lineHeight: 1.1, marginTop: 4, fontWeight: 400 }}>{a.name}</div>
          <Para lines={3} opacity={0.4} />
          <div style={{ marginTop: 6, display:'inline-block', borderBottom:'1px solid var(--wf-ink)', paddingBottom: 1 }}>
            <span className="sans" style={{ fontSize: 10, letterSpacing:'0.1em' }}>S'Y RENDRE →</span>
          </div>
        </div>
      </div>
    ))}
  </Phone>
);

// ─── C · Carte + liste latérale ─────────────────────────────────────────
const CatMap = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div className="serif" style={{ fontSize: 30, fontWeight: 400, marginTop: 2 }}>Restaurants</div>
    <div style={{ display:'flex', gap: 8, marginTop: 8 }}>
      {['Tout','Bistrot','Plage','Étoilé','Pizza'].map((p,i) => (
        <PillBtn key={i} dark={i === 0}>{p}</PillBtn>
      ))}
    </div>
    {/* map placeholder */}
    <div style={{ margin: '14px -22px 0', position:'relative' }}>
      <div className="ph" style={{
        height: 200, borderRadius: 0, borderLeft: 0, borderRight: 0,
        background:`
          repeating-linear-gradient(90deg, transparent 0 40px, rgba(58,42,26,0.05) 40px 41px),
          repeating-linear-gradient(0deg,  transparent 0 40px, rgba(58,42,26,0.05) 40px 41px),
          var(--wf-bg)
        `,
        fontFamily:'var(--wf-hand)', color:'var(--wf-ink-soft)'
      }}>
        Carte Google · épingles
      </div>
      {/* pin dots */}
      {[[60,40],[140,80],[210,120],[100,160]].map(([x,y],i)=>(
        <div key={i} style={{ position:'absolute', left: x, top: y, transform:'translate(-50%,-100%)' }}>
          <Icon name="pin" size={20} color="var(--wf-accent-deep)" />
        </div>
      ))}
    </div>
    {/* scroll list */}
    <div style={{ marginTop: 14 }}>
      {ADDRESSES.slice(0,3).map((a,i) => (
        <div key={i} style={{ display:'flex', gap: 10, alignItems:'center', padding:'10px 0', borderBottom:'1px solid var(--wf-hairline)' }}>
          <div style={{ width: 22, height: 22, borderRadius: 99, border:'1px solid var(--wf-ink)', display:'flex', alignItems:'center', justifyContent:'center' }}>
            <span className="sans" style={{ fontSize: 10 }}>{i+1}</span>
          </div>
          <Photo w={44} h={44} variant="rect" label="" />
          <div style={{ flex:1 }}>
            <div className="serif" style={{ fontSize: 14 }}>{a.name}</div>
            <div className="sans" style={{ fontSize: 9, color:'var(--wf-ink-soft)' }}>{a.dist}</div>
          </div>
          <Icon name="chev-r" size={14} color="var(--wf-ink-soft)" />
        </div>
      ))}
    </div>
  </Phone>
);

// ─── D · Mosaïque immersive (full-bleed images) ─────────────────────────
const CatMosaic = () => (
  <Phone height={720}>
    <PhoneHeader />
    <Eyebrow>Restaurants</Eyebrow>
    <div className="serif" style={{ fontSize: 36, lineHeight: 1, fontWeight: 300, marginTop: 8 }}>
      <i>Mes</i> tables<br/>préférées.
    </div>

    {/* asymmetric photo mosaic */}
    <div style={{ marginTop: 18, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8 }}>
      {ADDRESSES.slice(0, 4).map((a, i) => {
        const tall = i === 0 || i === 3;
        return (
          <div key={i} style={{ gridRow: i === 0 ? 'span 2' : 'auto', position:'relative' }}>
            <Photo w="100%" h={tall ? 200 : 100} variant="rect" label="" />
            <div style={{ position:'absolute', left: 8, bottom: 8, right: 8, color:'white' }}>
              <div className="serif" style={{ fontSize: 14, color:'white', textShadow:'0 1px 2px rgba(0,0,0,0.4)', lineHeight:1.05 }}>{a.name}</div>
              <div className="sans" style={{ fontSize: 9, color:'white', textShadow:'0 1px 2px rgba(0,0,0,0.4)', marginTop:2 }}>{a.dist.split(' · ')[1]}</div>
            </div>
          </div>
        );
      })}
    </div>

    <div style={{ marginTop: 14, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
      <span className="eyebrow">15 adresses au total</span>
      <Icon name="arrow-r" size={16} />
    </div>
  </Phone>
);

Object.assign(window, { CatList, CatMagazine, CatMap, CatMosaic });