// wf/desktop.jsx — Desktop adaptations of the same 4 home directions

const DeskFrame = ({ children, height = 580 }) => (
  <div className="desk" style={{ height }}>
    <div className="desk-bar">
      <div className="desk-dot" /><div className="desk-dot" /><div className="desk-dot" />
      <div style={{ flex: 1, display:'flex', justifyContent:'center' }}>
        <div style={{
          background:'var(--wf-bg)', border:'1px solid var(--wf-hairline)',
          padding:'2px 14px', fontFamily:'var(--wf-sans)', fontSize: 10, color:'var(--wf-ink-soft)',
        }}>la-villa-des-souvenirs.com/guide</div>
      </div>
    </div>
    <div style={{ height: height - 30, overflow:'hidden' }}>
      {children}
    </div>
  </div>
);

const DeskNav = () => (
  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'18px 40px', borderBottom:'1px solid var(--wf-hairline)' }}>
    <img src="assets/logo.png" alt="logo" style={{ height: 38, opacity: 0.9 }} />
    <div style={{ display:'flex', gap: 28 }}>
      {['Guide','Adresses','Pratique','Contact'].map(l => (
        <span key={l} className="sans" style={{ fontSize: 12, letterSpacing:'0.04em' }}>{l}</span>
      ))}
    </div>
    <div style={{ display:'flex', gap: 10, alignItems:'center' }}>
      <span className="eyebrow">FR / EN</span>
      <PillBtn>Réserver</PillBtn>
    </div>
  </div>
);

// ─── A · Grille d'icônes desktop ────────────────────────────────────────
const DeskGrid = () => (
  <DeskFrame>
    <DeskNav />
    <div style={{ textAlign:'center', padding:'40px 60px 20px' }}>
      <Eyebrow>Chers hôtes,</Eyebrow>
      <div className="serif" style={{ fontSize: 64, lineHeight: 1, fontWeight: 400, marginTop: 8 }}>
        Bienvenue <i style={{ fontWeight:300 }}>à Marseille.</i>
      </div>
      <div className="serif" style={{ fontSize: 16, fontStyle:'italic', color:'var(--wf-ink-soft)', marginTop: 12, maxWidth: 540, margin: '12px auto 0' }}>
        Tout ce qu'il faut savoir sur la maison, et mes adresses préférées dans la ville.
      </div>
    </div>
    <div style={{
      display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:'30px 20px',
      padding:'24px 80px 0'
    }}>
      {CATEGORIES.map(c => (
        <div key={c.id} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 8 }}>
          <div style={{ width: 60, height: 60, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <Icon name={c.icon} size={36} />
          </div>
          <div className="sans" style={{ fontSize: 11, textAlign:'center', letterSpacing:'0.06em', textTransform:'uppercase', lineHeight: 1.2 }}>{c.fr}</div>
        </div>
      ))}
    </div>
  </DeskFrame>
);

// ─── B · Liste éditoriale desktop (2 cols) ──────────────────────────────
const DeskEditorial = () => (
  <DeskFrame height={580}>
    <DeskNav />
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', height: 'calc(100% - 75px)' }}>
      <div style={{ padding: '54px 50px', borderRight: '1px solid var(--wf-hairline)' }}>
        <Eyebrow>Villa des Souvenirs · n°02</Eyebrow>
        <div className="serif" style={{ fontSize: 64, lineHeight: 1, fontWeight: 400, marginTop: 12 }}>
          Le guide<br/><i style={{ fontWeight:300 }}>de la maison.</i>
        </div>
        <Para lines={3} opacity={0.45} />
        <div style={{ marginTop: 18 }}>
          <Photo w="100%" h={200} variant="rect" label="Image éditoriale" />
        </div>
      </div>
      <div style={{ padding:'40px 50px', overflow:'auto' }}>
        {CATEGORIES.slice(0, 8).map((c, i) => (
          <div key={c.id} style={{ display:'flex', alignItems:'baseline', gap: 16, padding:'12px 0', borderBottom:'1px solid var(--wf-hairline)' }}>
            <span className="serif" style={{ fontSize: 14, color:'var(--wf-ink-soft)', fontStyle:'italic', width: 24 }}>{String(i+1).padStart(2,'0')}</span>
            <span className="serif" style={{ fontSize: 22, fontWeight: 400, flex: 1 }}>{c.fr}</span>
            <Icon name="arrow-r" size={16} color="var(--wf-ink-soft)" />
          </div>
        ))}
      </div>
    </div>
  </DeskFrame>
);

// ─── C · Hero photo desktop ─────────────────────────────────────────────
const DeskHero = () => (
  <DeskFrame height={580}>
    <DeskNav />
    <div style={{ position:'relative', height: 'calc(100% - 75px)' }}>
      <Photo w="100%" h="100%" variant="rect" label="Photo plein cadre · vue mer" style={{ borderRadius: 0 }} />
      <div style={{ position:'absolute', inset: 0, background:'linear-gradient(180deg, rgba(58,42,26,0.15) 0%, rgba(58,42,26,0.55) 100%)' }} />

      <div style={{ position:'absolute', top: 50, left: 60, right: 60, color:'white' }}>
        <span className="eyebrow" style={{ color:'rgba(255,255,255,0.8)' }}>Bienvenue dans la villa</span>
        <div className="serif" style={{ fontSize: 72, lineHeight: 1, fontWeight: 300, color: 'white', marginTop: 10 }}>
          Du cocon urbain à<br/><i>l'exception absolue.</i>
        </div>
      </div>

      <div style={{
        position:'absolute', left: 60, right: 60, bottom: 40,
        display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap: 12,
      }}>
        {CATEGORIES.slice(0, 6).map(c => (
          <div key={c.id} style={{
            background:'rgba(251,247,238,0.92)', backdropFilter:'blur(8px)',
            padding:'16px 14px',
            display:'flex', flexDirection:'column', gap: 10, alignItems:'center'
          }}>
            <Icon name={c.icon} size={26} />
            <div className="sans" style={{ fontSize: 11, letterSpacing:'0.06em', textAlign:'center' }}>{c.fr}</div>
          </div>
        ))}
      </div>
    </div>
  </DeskFrame>
);

// ─── D · Index typographique desktop ────────────────────────────────────
const DeskIndex = () => (
  <DeskFrame height={580}>
    <DeskNav />
    <div style={{ padding:'46px 80px', height: 'calc(100% - 75px)' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
        <div>
          <Eyebrow>Index</Eyebrow>
          <div className="serif" style={{ fontSize: 48, lineHeight: 1, fontWeight: 300, marginTop: 8 }}>
            <i>Ici, le temps ralentit.</i><br/>Les volumes respirent.
          </div>
        </div>
        <div className="eyebrow" style={{ letterSpacing:'0.32em' }}>La Villa des Souvenirs · Marseille</div>
      </div>

      <div style={{
        marginTop: 36, display:'grid', gridTemplateColumns:'1fr 1fr', columnGap: 60, rowGap: 0
      }}>
        {CATEGORIES.map((c, i) => (
          <div key={c.id} style={{ display:'flex', alignItems:'baseline', gap: 14, padding:'9px 0', borderBottom:'1px solid var(--wf-hairline)' }}>
            <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)', letterSpacing:'0.18em', width: 30 }}>{String(i+1).padStart(2,'0')}</span>
            <span className="serif" style={{ fontSize: 20, flex: 1, fontWeight: 300 }}>{c.fr}</span>
            <span className="sans" style={{ fontSize: 10, color:'var(--wf-ink-soft)', letterSpacing:'0.16em' }}>p. {String((i+1)*2).padStart(2,'0')}</span>
          </div>
        ))}
      </div>
    </div>
  </DeskFrame>
);

Object.assign(window, { DeskFrame, DeskNav, DeskGrid, DeskEditorial, DeskHero, DeskIndex });