// wf/home.jsx — Four directions for the home / menu

// ─── A · Grille d'icônes (proche de l'exemple) ──────────────────────────
const HomeGrid = () => {
  const cats = CATEGORIES;
  return (
    <Phone height={720}>
      <PhoneHeader />
      <div style={{ textAlign:'center', marginTop: 4 }}>
        <div className="eyebrow" style={{ letterSpacing:'0.3em' }}>Chère hôte,</div>
        <div className="serif" style={{ fontSize: 46, lineHeight: 1, marginTop: 8, fontWeight: 400 }}>
          Bienvenue.
        </div>
        <div className="serif" style={{ fontSize: 46, lineHeight: 1, fontStyle: 'italic', fontWeight: 300, marginTop: -2 }}>
          à Marseille
        </div>
        <div className="eyebrow" style={{ letterSpacing:'0.22em', marginTop: 14 }}>Choisissez une rubrique</div>
      </div>

      <div style={{
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)',
        gap: '18px 10px', marginTop: 22, padding: '0 4px'
      }}>
        {cats.slice(0, 9).map(c => (
          <div key={c.id} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 6 }}>
            <div style={{
              width: 56, height: 56,
              display:'flex', alignItems:'center', justifyContent:'center',
            }}>
              <Icon name={c.icon} size={32} />
            </div>
            <div className="sans" style={{ fontSize: 10, textAlign:'center', letterSpacing:'0.04em', lineHeight: 1.15 }}>
              {c.fr.toUpperCase()}
            </div>
          </div>
        ))}
      </div>

      <div style={{ position:'absolute', bottom: 42, left: 22, right: 22, display:'flex', justifyContent:'center', gap: 6 }}>
        {cats.slice(9).map(c => (
          <div key={c.id} style={{ display:'flex', flexDirection:'column', alignItems:'center', flex: 1 }}>
            <Icon name={c.icon} size={22} />
            <div className="sans" style={{ fontSize: 9, letterSpacing: '0.06em', marginTop: 4, textAlign:'center' }}>
              {c.fr.toUpperCase()}
            </div>
          </div>
        ))}
      </div>
    </Phone>
  );
};

// ─── B · Liste éditoriale verticale ─────────────────────────────────────
const HomeEditorial = () => {
  const rows = CATEGORIES.slice(0, 8);
  return (
    <Phone height={720}>
      <PhoneHeader />
      <div style={{ marginTop: 2 }}>
        <div className="eyebrow">Villa des Souvenirs · n°02</div>
        <div className="serif" style={{ fontSize: 38, lineHeight: 1, marginTop: 10, fontWeight: 400 }}>
          Le guide<br/>
          <i style={{ fontWeight: 300 }}>de la maison.</i>
        </div>
      </div>
      <div className="hairline" style={{ marginTop: 18 }} />
      <div>
        {rows.map((c, i) => (
          <a key={c.id} style={{ display:'flex', alignItems:'center', gap: 14, padding: '14px 0', borderBottom:'1px solid var(--wf-hairline)', textDecoration:'none' }}>
            <span className="serif" style={{ fontSize: 13, color:'var(--wf-ink-soft)', width: 18, fontStyle:'italic' }}>
              {String(i+1).padStart(2,'0')}
            </span>
            <Icon name={c.icon} size={20} />
            <div style={{ flex:1 }}>
              <div className="serif" style={{ fontSize: 19, lineHeight: 1.1 }}>{c.fr}</div>
            </div>
            <Icon name="chev-r" size={16} color="var(--wf-ink-soft)" />
          </a>
        ))}
      </div>
    </Phone>
  );
};

// ─── C · Hero photo + grille cards ──────────────────────────────────────
const HomeHero = () => {
  const cats = CATEGORIES.slice(0, 6);
  return (
    <Phone height={720}>
      <PhoneHeader />
      {/* Full-bleed hero (extends past content padding via negative margin) */}
      <div style={{ margin: '0 -22px' }}>
        <Photo w="100%" h={240} variant="rect" label="Photo · vue mer / façade" style={{ borderRadius: 0 }} />
      </div>
      <div style={{ marginTop: 18, textAlign:'center' }}>
        <Eyebrow>Bienvenue dans la villa</Eyebrow>
        <div className="serif" style={{ fontSize: 28, lineHeight: 1.1, marginTop: 8, fontWeight: 400 }}>
          Du cocon urbain à<br/>
          <i style={{ fontWeight: 300 }}>l'exception absolue.</i>
        </div>
      </div>
      <div style={{
        display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, marginTop: 22
      }}>
        {cats.map(c => (
          <div key={c.id} style={{
            border:'1px solid var(--wf-hairline)', padding: '14px 12px',
            display:'flex', alignItems:'center', gap: 10
          }}>
            <Icon name={c.icon} size={22} />
            <div className="serif" style={{ fontSize: 14, lineHeight: 1.1 }}>{c.fr}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 16, textAlign:'center' }}>
        <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)', borderBottom:'1px solid var(--wf-ink-soft)' }}>
          Voir toutes les rubriques →
        </span>
      </div>
    </Phone>
  );
};

// ─── D · Index typographique ────────────────────────────────────────────
const HomeIndex = () => {
  const rows = CATEGORIES;
  return (
    <Phone height={720}>
      <PhoneHeader right="FR" />
      <div style={{ marginTop: 6 }}>
        <Eyebrow>Index</Eyebrow>
        <div className="serif" style={{ fontSize: 30, lineHeight: 1.05, marginTop: 8, fontWeight: 300 }}>
          <i>Ici, le temps ralentit.</i><br/>
          Les volumes respirent.
        </div>
      </div>
      <div style={{ marginTop: 22 }}>
        {rows.map((c, i) => (
          <div key={c.id} style={{
            display:'flex', alignItems:'baseline', gap: 10,
            padding: '8px 0',
            borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--wf-hairline)'
          }}>
            <span className="sans" style={{ fontSize: 10, color:'var(--wf-ink-soft)', letterSpacing:'0.18em', width: 24 }}>
              {String(i+1).padStart(2,'0')}
            </span>
            <span className="serif" style={{ fontSize: 17, fontWeight: 300, flex: 1 }}>{c.fr}</span>
            <span className="sans" style={{ fontSize: 9, color:'var(--wf-ink-soft)', letterSpacing:'0.16em' }}>
              p. {String((i+1)*2).padStart(2,'0')}
            </span>
          </div>
        ))}
      </div>
      <div style={{ position:'absolute', bottom: 38, left: 0, right: 0, textAlign:'center' }}>
        <div className="eyebrow" style={{ letterSpacing:'0.32em' }}>La Villa des Souvenirs · Marseille</div>
      </div>
    </Phone>
  );
};

Object.assign(window, { HomeGrid, HomeEditorial, HomeHero, HomeIndex });