// Apricus — Séjours bien-être entre femmes (fond vidéo cinématique)
function Retreats({ onBook }) {
  const ref = useReveal();
  const D = 'var(--font-display)';
  const [active, setActive] = React.useState(null);
  return (
    <section id="sejours" ref={ref} style={{ padding: '96px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px' }}>
        <div className="apr-fade" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 56px' }}>
          <h2 style={{ fontFamily: D, fontSize: 'clamp(34px,4.4vw,54px)', lineHeight: 1.04,
            letterSpacing: '-0.02em', color: 'var(--apr-ink)', margin: '0 0 14px' }}>
            <span style={{ fontWeight: 300 }}>Nos derniers </span>
            <span style={{ fontWeight: 900 }}>séjours</span>
          </h2>
          <p style={{ color: 'var(--apr-ink-soft)', fontSize: 17, lineHeight: 1.7, margin: 0 }}>
            Découvrez un aperçu des éditions précédentes, et rejoignez la liste d'attente pour être
            prévenue en avant-première des prochains séjours.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 26 }}>
          {RETREATS.map((r, i) => <RetreatCard key={r.id} r={r} delay={i * 90} onOpen={setActive} />)}
        </div>
        <div className="apr-fade" style={{ textAlign: 'center', marginTop: 48 }}>
          <Button size="lg" glow onClick={onBook}>Rejoindre la liste d'attente 2026 <Icon name="arrow-right" size={15} /></Button>
        </div>
      </div>
      <RetreatModal retreat={active} onClose={() => setActive(null)} />
    </section>
  );
}

function RetreatCard({ r, delay, onOpen }) {
  const [hover, setHover] = React.useState(false);
  const D = 'var(--font-display)';
  return (
    <div className="apr-fade" style={{ transitionDelay: delay + 'ms' }}>
      <article onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ background: 'var(--apr-linen)', borderRadius: 20, overflow: 'hidden',
          boxShadow: hover ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
          transform: hover ? 'translateY(-4px)' : 'none', transition: 'all .3s var(--ease-out)',
          display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ height: 192, background: r.wash, position: 'relative', overflow: 'hidden' }}>
          <span style={{ position: 'absolute', top: 14, left: 14, background: 'rgba(251,244,230,0.92)',
            color: 'var(--apr-honey)', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
            textTransform: 'uppercase', padding: '6px 12px', borderRadius: 999 }}>
            {r.dates}
          </span>
          <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
            color: 'rgba(255,253,248,0.65)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            Photographie
          </span>
        </div>
        <div style={{ padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', flex: 1 }}>
          <h3 style={{ fontFamily: D, fontWeight: 400, fontSize: 28, color: 'var(--apr-ink)', margin: 0 }}>{r.name}</h3>
          <div style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: 23, lineHeight: 1, marginTop: 2 }}>{r.place}</div>
          <p style={{ color: 'var(--apr-ink-soft)', fontSize: 14.5, lineHeight: 1.65, margin: '12px 0 16px' }}>{r.blurb}</p>
          <div style={{ display: 'flex', gap: 8, marginBottom: 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 style={{ marginTop: 'auto' }}>
            <Button variant="primary" size="md" onClick={() => onOpen(r)} style={{ width: '100%', justifyContent: 'center' }}>
              En savoir plus <Icon name="arrow-right" size={15} />
            </Button>
          </div>
        </div>
      </article>
    </div>
  );
}
window.Retreats = Retreats;