// Apricus — « Les séjours » : carrousel des séjours à venir (flèches + points)
const NEXT = [
{ badge: 'Coming soon · restez connectées', edition: 'Édition Biarritz · 2ᵉ édition',
  titleA: 'Biarritz, ', titleB: 'deuxième', titleC: ' édition.',
  blurb: "On y retourne ! Quatre jours iodés face à l'océan, entre marche côtière, yoga et ateliers bien-être, avec une bonne dose de §dolce far niente§. Le programme complet arrive bientôt — rejoignez la liste pour être prévenue en avant-première.",
  details: [['calendar', '15 – 18 octobre 2026', 'quatre nuits'], ['map-pin', 'Biarritz', 'Côte basque']],
  main: 'paper-terracotta', inset: 'paper-citron', detail: 'détail · Côte basque',
  mainImg: 'assets/biarritz-coast.jpg', insetImg: 'assets/sejour-pool.jpg' },
{ badge: 'Coming soon · restez connectées', edition: 'Édition Femmes · (péri)ménopause',
  titleA: 'Un séjour ', titleB: '(péri)ménopause', titleC: ', entre femmes.',
  blurb: "Un nouveau séjour entièrement pensé autour de la (péri)ménopause : comprendre son corps, apaiser les symptômes, se réinventer — le tout dans la §dolce vita§ et la sororité. Dates et détails à venir très bientôt.",
  details: [['calendar', 'Dates à venir', ''], ['users-three', 'Entre femmes', '']],
  main: 'paper-blush', inset: 'paper-sand', detail: 'détail · à venir' }];


function scriptize(text) {
  // remplace §…§ par un accent manuscrit terracotta
  const parts = text.split('§');
  return parts.map((p, i) => i % 2 === 1 ?
  <span key={i} style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: '1.45em', lineHeight: 0.8 }}>{p}</span> :
  <React.Fragment key={i}>{p}</React.Fragment>);
}

function NextRetreatCard({ r, onBook }) {
  const D = 'var(--font-display)';
  return (
    <div style={{ flex: '0 0 100%', background: 'url(assets/textures/paper-sand.jpg)', backgroundSize: 'cover',
      borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '1.06fr 0.94fr', gap: 60, alignItems: 'center',
      padding: '56px 60px', position: 'relative' }}>
      <img src="assets/sun-motif.svg" alt="" style={{ position: 'absolute', top: -34, right: -30, width: 168, opacity: 0.32 }} />
      <div style={{ position: 'relative' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'var(--apr-citron-pale)',
          border: '1px solid var(--apr-citron)', color: 'var(--apr-ink)', fontFamily: 'var(--font-body)',
          fontSize: 11.5, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
          padding: '6px 13px', borderRadius: 999 }}>
          <img src="assets/apricus-lemon.png" alt="" style={{ width: 15, height: 15 }} /> {r.badge}
        </span>
        <Eyebrow style={{ marginTop: 18 }}>{r.edition}</Eyebrow>
        <h2 style={{ fontFamily: D, margin: '12px 0 0', color: 'var(--apr-ink)', lineHeight: 1.02,
          letterSpacing: '-0.02em', fontSize: 'clamp(34px,4.4vw,56px)' }}>
          <span style={{ fontWeight: 300, fontStyle: 'italic' }}>{r.titleA}</span>
          <span style={{ fontWeight: 900 }}>{r.titleB}</span>
          <span style={{ fontWeight: 300 }}>{r.titleC}</span>
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.7,
          color: 'var(--apr-ink-soft)', maxWidth: 500, margin: '18px 0 24px' }}>
          {scriptize(r.blurb)}
        </p>
        <div style={{ display: 'flex', gap: 26, marginBottom: 30, flexWrap: 'wrap' }}>
          {r.details.map(([ic, big, small]) =>
          <div key={big} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <Icon name={ic} size={28} color="var(--apr-olive)" style={{ flex: 'none' }} />
              <div style={{ lineHeight: 1.2 }}>
                <div style={{ fontFamily: D, fontWeight: 600, fontSize: 18, color: 'var(--apr-ink)' }}>{big}</div>
                {small ? <div style={{ fontSize: 12.5, color: 'var(--apr-ink-faint)', fontWeight: 600 }}>{small}</div> : null}
              </div>
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button size="lg" glow onClick={onBook}>Rejoindre la liste d'attente <Icon name="arrow-right" size={15} /></Button>
        </div>
      </div>
      <PhotoCluster main={r.main} inset={r.inset} aspect="4 / 5" arch={false} frame mainImg={r.mainImg} insetImg={r.insetImg}
      insetSide="left" insetLabel={r.detail} label="Photographie · placeholder" />
    </div>);

}

function NextRetreat({ onBook }) {
  const ref = useReveal();
  const D = 'var(--font-display)';
  const [idx, setIdx] = React.useState(0);
  const n = NEXT.length;
  const go = (d) => setIdx((i) => (i + d + n) % n);
  const arrow = (dir) =>
  <button onClick={() => go(dir === 'left' ? -1 : 1)} aria-label={dir === 'left' ? 'Précédent' : 'Suivant'}
  style={{ width: 50, height: 50, borderRadius: '50%', border: '1.5px solid var(--apr-line-strong)',
    background: 'var(--apr-linen)', cursor: 'pointer', display: 'grid', placeItems: 'center',
    color: 'var(--apr-ink)', boxShadow: 'var(--shadow-xs)', transition: 'all .15s var(--ease-out)' }}
  onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'var(--apr-honey)';e.currentTarget.style.color = 'var(--apr-honey)';}}
  onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'var(--apr-line-strong)';e.currentTarget.style.color = 'var(--apr-ink)';}}>
      <Icon name={dir === 'left' ? 'arrow-left' : 'arrow-right'} size={20} />
    </button>;

  return (
    <section id="prochain" ref={ref} style={{ padding: '88px 0 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px' }}>
        <div className="apr-fade" style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }}>
          <h2 style={{ fontFamily: D, fontSize: 'clamp(40px,5.4vw,72px)', lineHeight: 1.0,
            letterSpacing: '-0.02em', color: 'var(--apr-ink)', margin: '0 0 12px' }}>
            <span style={{ fontWeight: 300, fontStyle: 'italic' }}>Les </span>
            <span style={{ fontWeight: 900 }}>séjours</span>
          </h2>
        </div>

        <div className="apr-fade" style={{ overflow: 'hidden', borderRadius: 'var(--radius-xl)' }}>
          <div style={{ display: 'flex', transition: 'transform .6s var(--ease-soft)', transform: `translateX(-${idx * 100}%)` }}>
            {NEXT.map((r, i) => <NextRetreatCard key={i} r={r} onBook={onBook} />)}
          </div>
        </div>

        {/* ---- contrôles carrousel ---- */}
        <div className="apr-fade" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 22, marginTop: 28 }}>
          {arrow('left')}
          <div style={{ display: 'flex', gap: 9 }}>
            {NEXT.map((_, i) =>
            <button key={i} onClick={() => setIdx(i)} aria-label={`Séjour ${i + 1}`}
            style={{ width: i === idx ? 26 : 10, height: 10, borderRadius: 999, border: 'none', cursor: 'pointer',
              background: i === idx ? 'var(--apr-citron)' : 'var(--apr-line-strong)',
              transition: 'all .3s var(--ease-out)' }} />
            )}
          </div>
          {arrow('right')}
        </div>
      </div>
    </section>);

}
window.NextRetreat = NextRetreat;