// wf/detail.jsx — Three directions for an individual address detail page

const ADDRESS = {
  name: 'Tuba Club',
  kind: 'Plage · Cuisine de la mer',
  area: 'Les Goudes · 13008',
  dist: '12 min en voiture · 4 km',
  rating: '4.6',
  reviews: '812 avis Google',
  phone: '+33 4 91 …',
  price: '€€€',
  hours: 'Tous les jours · 12h–22h',
};

// ─── A · Photo arche + bloc d'infos centré ──────────────────────────────
const DetailA = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
      <Icon name="arrow-l" size={16} />
      <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)', letterSpacing:'0.08em' }}>RESTAURANTS</span>
    </div>

    <div style={{ marginTop: 14, display:'flex', justifyContent:'center' }}>
      <Photo w={200} h={240} variant="arch" label="Photo établissement" />
    </div>

    <div style={{ textAlign:'center', marginTop: 16 }}>
      <Eyebrow>{ADDRESS.kind}</Eyebrow>
      <div className="serif" style={{ fontSize: 30, fontWeight: 400, marginTop: 6 }}>
        {ADDRESS.name}
      </div>
      <div className="serif" style={{ fontSize: 14, fontStyle:'italic', color:'var(--wf-ink-soft)', marginTop: 4 }}>
        {ADDRESS.area}
      </div>
    </div>

    <div style={{
      display:'grid', gridTemplateColumns:'1fr 1fr 1fr',
      borderTop:'1px solid var(--wf-hairline)',
      borderBottom:'1px solid var(--wf-hairline)',
      marginTop: 16, padding:'10px 0', textAlign:'center'
    }}>
      <div>
        <div className="serif" style={{ fontSize: 16 }}>{ADDRESS.rating}</div>
        <div className="eyebrow" style={{ letterSpacing:'0.16em' }}>Google</div>
      </div>
      <div style={{ borderLeft:'1px solid var(--wf-hairline)', borderRight:'1px solid var(--wf-hairline)' }}>
        <div className="serif" style={{ fontSize: 16 }}>12'</div>
        <div className="eyebrow" style={{ letterSpacing:'0.16em' }}>Voiture</div>
      </div>
      <div>
        <div className="serif" style={{ fontSize: 16 }}>{ADDRESS.price}</div>
        <div className="eyebrow" style={{ letterSpacing:'0.16em' }}>Prix</div>
      </div>
    </div>

    <div style={{ marginTop: 12 }}>
      <span className="hand" style={{ color:'var(--wf-ink-soft)' }}>
        « Pourquoi j'aime cet endroit »
      </span>
      <Para lines={4} opacity={0.45} />
    </div>

    <div style={{ position:'absolute', bottom: 36, left: 22, right: 22, display:'flex', gap: 8 }}>
      <AccentBtn w="100%">Itinéraire Google Maps</AccentBtn>
    </div>
  </Phone>
);

// ─── B · Full-bleed photo + sticky info ─────────────────────────────────
const DetailB = () => (
  <Phone height={720}>
    {/* hero photo full-bleed */}
    <div style={{ position:'absolute', top: 0, left: 0, right: 0, height: 340 }}>
      <Photo w="100%" h={340} variant="rect" label="Photo plein cadre" style={{ borderRadius: 0 }} />
      <div style={{ position:'absolute', inset: 0, background:'linear-gradient(180deg, rgba(58,42,26,0.55) 0%, transparent 30%, transparent 60%, rgba(58,42,26,0.6) 100%)' }} />
      {/* top bar over photo */}
      <div style={{ position:'absolute', top: 50, left: 22, right: 22, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <Icon name="arrow-l" size={20} color="white" />
        <Icon name="plus" size={20} color="white" />
      </div>
      {/* title on photo */}
      <div style={{ position:'absolute', bottom: 20, left: 22, right: 22 }}>
        <div className="eyebrow" style={{ color:'rgba(255,255,255,0.85)', letterSpacing:'0.24em' }}>★ 4.6 · 812 avis</div>
        <div className="serif" style={{ fontSize: 38, color:'white', fontWeight: 400, lineHeight: 1 }}>Tuba Club</div>
        <div className="serif" style={{ fontSize: 14, fontStyle:'italic', color:'rgba(255,255,255,0.85)' }}>Plage · cuisine de la mer</div>
      </div>
    </div>

    {/* lower content offset down */}
    <div style={{ marginTop: 290, position:'relative', background:'var(--wf-bg)' }}>
      <div className="hand" style={{ fontSize: 18, fontStyle:'italic', color:'var(--wf-ink-soft)' }}>
        « Ma cantine de bord de mer »
      </div>
      <Para lines={4} opacity={0.45} />

      <div style={{ marginTop: 12, display:'flex', flexDirection:'column', gap: 8 }}>
        {[
          ['pin', 'Les Goudes — 13008', 'Voir sur la carte'],
          ['clock','Tous les jours · 12h–22h', 'Réservation conseillée'],
          ['phone','+33 4 91 …', 'Appeler'],
          ['globe','tubaclub.fr', 'Site web'],
        ].map(([k,a,b],i) => (
          <div key={i} style={{ display:'flex', gap: 10, padding:'8px 0', borderBottom:'1px solid var(--wf-hairline)' }}>
            <Icon name={k} size={16} />
            <div style={{ flex: 1 }}>
              <div className="sans" style={{ fontSize: 12 }}>{a}</div>
              <div className="sans" style={{ fontSize: 10, color:'var(--wf-ink-soft)' }}>{b}</div>
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* sticky CTA */}
    <div style={{ position:'absolute', bottom: 22, left: 22, right: 22 }}>
      <AccentBtn w="100%">Y aller · Google Maps</AccentBtn>
    </div>
  </Phone>
);

// ─── C · Éditorial deux colonnes ────────────────────────────────────────
const DetailC = () => (
  <Phone height={720}>
    <PhoneHeader />
    <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
      <Icon name="arrow-l" size={16} />
      <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)', letterSpacing:'0.08em' }}>03 / 15</span>
    </div>

    <div className="serif" style={{ fontSize: 30, marginTop: 18, fontWeight: 400, lineHeight: 1 }}>
      Tuba <i>Club</i>.
    </div>
    <div className="eyebrow" style={{ marginTop: 6 }}>Plage · Cuisine de la mer</div>

    {/* two-col grid */}
    <div style={{ marginTop: 16, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
      <Photo w="100%" h={120} variant="rect" label="Photo" />
      <Photo w="100%" h={120} variant="rect" label="Photo" />
      <Photo w="100%" h={70} variant="rect" label="" />
      <Photo w="100%" h={70} variant="rect" label="" />
    </div>

    <div style={{ marginTop: 14, display:'flex', gap: 8, alignItems:'center', flexWrap:'wrap' }}>
      <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
        <Icon name="star" size={12}/>
        <span className="sans" style={{ fontSize: 11 }}>4.6</span>
      </span>
      <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)' }}>·</span>
      <span className="sans" style={{ fontSize: 11 }}>12 min</span>
      <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)' }}>·</span>
      <span className="sans" style={{ fontSize: 11 }}>€€€</span>
      <span className="sans" style={{ fontSize: 11, color:'var(--wf-ink-soft)' }}>·</span>
      <span className="sans" style={{ fontSize: 11 }}>Les Goudes</span>
    </div>

    <div className="hairline" style={{ marginTop: 12 }} />
    <Para lines={3} opacity={0.45} />

    <div style={{ marginTop: 12, display:'flex', gap: 8 }}>
      <PillBtn dark>Itinéraire</PillBtn>
      <PillBtn>Appeler</PillBtn>
      <PillBtn>Site web</PillBtn>
    </div>
  </Phone>
);

Object.assign(window, { DetailA, DetailB, DetailC });