// Apricus — fiche détaillée d'un séjour (pop-up animé)
function RetreatModal({ retreat, onClose }) {
  const D = 'var(--font-display)';
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (retreat) {
      const id = setTimeout(() => setShown(true), 20);
      const onKey = e => { if (e.key === 'Escape') onClose(); };
      window.addEventListener('keydown', onKey);
      const prev = document.body.style.overflow; document.body.style.overflow = 'hidden';
      return () => { clearTimeout(id); window.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
    } else { setShown(false); }
  }, [retreat]);
  if (!retreat) return null;
  const r = retreat;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 120,
      background: 'rgba(46,36,14,0.46)', backdropFilter: 'blur(5px)', WebkitBackdropFilter: 'blur(5px)',
      opacity: shown ? 1 : 0, transition: 'opacity .32s var(--ease-out)',
      display: 'grid', placeItems: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: 'min(940px, 100%)', maxHeight: '92vh', overflowY: 'auto',
        background: 'var(--apr-linen)', borderRadius: 26, boxShadow: 'var(--shadow-lg)', position: 'relative',
        transform: shown ? 'scale(1) translateY(0)' : 'scale(0.93) translateY(16px)',
        opacity: shown ? 1 : 0, transition: 'transform .44s var(--ease-soft), opacity .3s var(--ease-out)' }}>

        {/* ---- héros ---- */}
        <div style={{ height: 320, background: r.wash, position: 'relative', borderRadius: '26px 26px 0 0', overflow: 'hidden' }}>
          <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
            color: 'rgba(255,253,248,0.6)', fontSize: 12, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            Photographie · placeholder
          </span>
          <div style={{ position: 'absolute', left: 32, bottom: 28 }}>
            <span style={{ background: 'rgba(251,244,230,0.94)', color: 'var(--apr-honey)', fontSize: 11.5,
              fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '6px 13px', borderRadius: 999 }}>
              {r.dates}
            </span>
          </div>
          <button onClick={onClose} aria-label="Fermer" style={{ position: 'absolute', top: 18, right: 18,
            width: 42, height: 42, borderRadius: 999, border: 'none', cursor: 'pointer',
            background: 'rgba(251,244,230,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="x" size={20} color="var(--apr-ink)" />
          </button>
        </div>

        <div style={{ padding: '38px 48px 44px' }}>
          <Eyebrow>{r.place} · séjour entre femmes</Eyebrow>
          <h2 style={{ fontFamily: D, margin: '12px 0 0', color: 'var(--apr-ink)', lineHeight: 1.02,
            letterSpacing: '-0.02em', fontSize: 'clamp(32px,4vw,50px)' }}>
            <span style={{ fontWeight: 900 }}>{r.name.split(' ')[0]}</span>
            <span style={{ fontWeight: 300 }}> {r.name.split(' ').slice(1).join(' ')}</span>
          </h2>
          <div style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: 27, lineHeight: 1, margin: '4px 0 0' }}>{r.place}</div>
          {(Array.isArray(r.long) ? r.long : [r.long]).map((para, i) => (
            <p key={i} style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.75, color: 'var(--apr-ink-soft)', margin: i === 0 ? '18px 0 0' : '14px 0 0', maxWidth: 720 }}>{para}</p>
          ))}

          {/* ---- galerie ---- */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, margin: '28px 0 4px' }}>
            {r.gallery.map((g, i) => (
              <div key={i} style={{ height: 132, borderRadius: 'var(--radius-md)',
                background: `url(assets/textures/${g}.jpg)`, backgroundSize: 'cover', backgroundPosition: 'center',
                position: 'relative', boxShadow: 'var(--shadow-xs)' }}>
                <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
                  color: 'rgba(50,45,30,0.34)', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase' }}>photo</span>
              </div>
            ))}
          </div>

          {/* ---- programme + inclus ---- */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 44, marginTop: 32 }}>
            <div>
              <h3 style={{ fontFamily: D, fontWeight: 600, fontSize: 24, color: 'var(--apr-ink)', margin: '0 0 16px' }}>Au programme</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {r.programme.map(([ic, txt], i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <span style={{ width: 46, height: 46, borderRadius: '50%', background: 'var(--apr-citron-pale)',
                      display: 'grid', placeItems: 'center', flex: 'none' }}>
                      <Icon name={ic} size={24} color="var(--apr-honey)" />
                    </span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.55, color: 'var(--apr-ink)', paddingTop: 9 }}>{txt}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <h3 style={{ fontFamily: D, fontWeight: 600, fontSize: 24, color: 'var(--apr-ink)', margin: '0 0 16px' }}>Tout compris</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {r.inclus.map((txt, i) => (
                  <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                    <Icon name="check" size={18} color="var(--apr-olive)" style={{ flex: 'none', marginTop: 2 }} />
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55, color: 'var(--apr-ink-soft)' }}>{txt}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 20, flexWrap: 'wrap' }}>
                {r.tags.map(t => (
                  <span key={t} style={{ fontSize: 12, fontWeight: 600, color: 'var(--apr-olive-deep)',
                    border: '1px solid var(--apr-sage)', padding: '4px 11px', borderRadius: 999 }}>{t}</span>
                ))}
              </div>
            </div>
          </div>

          {/* ---- ce qu'elles en ont pensé ---- */}
          <div style={{ marginTop: 36 }}>
            <h3 style={{ fontFamily: D, fontWeight: 600, fontSize: 24, color: 'var(--apr-ink)', margin: '0 0 16px' }}>Ce qu'elles en ont pensé</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              {r.avis.map((a, i) => (
                <figure key={i} style={{ margin: 0, background: 'var(--apr-shell)', borderRadius: 'var(--radius-md)',
                  border: '1px solid var(--apr-line)', padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 11 }}>
                  <div style={{ display: 'flex', gap: 3 }}>
                    {[0, 1, 2, 3, 4].map(s => <Icon key={s} name="star" size={14} color="var(--apr-zest)" />)}
                  </div>
                  <blockquote style={{ fontFamily: D, fontWeight: 400, fontStyle: 'italic', fontSize: 17,
                    lineHeight: 1.5, color: 'var(--apr-ink)', margin: 0 }}>« {a.quote} »</blockquote>
                  <figcaption style={{ fontFamily: 'var(--font-script)', fontSize: 23, color: 'var(--apr-clay)' }}>{a.name}</figcaption>
                </figure>
              ))}
            </div>
          </div>

          {/* ---- CTA (séjour passé : pas de réservation, juste la liste d'attente) ---- */}
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', marginTop: 36,
            paddingTop: 28, borderTop: '1px solid var(--apr-line)' }}>
            <Button size="lg" glow onClick={onClose}>Être prévenue des prochaines éditions <Icon name="arrow-right" size={15} /></Button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.RetreatModal = RetreatModal;