// Apricus - Ménopause : pilier central de l'accompagnement

function MenopauseItem({ ic, t, d, D }) {
  const [open, setOpen] = React.useState(false);
  // Sur desktop, toujours ouvert (CSS gère via media query)
  return (
    <div className={'menopause-item' + (open ? ' open' : '')}
      onClick={() => setOpen(o => !o)}
      style={{ display: 'flex', gap: 16, padding: '15px 0', borderTop: '1px solid rgba(50,45,30,0.16)' }}>
      <Icon name={ic} size={28} color="var(--apr-clay)" style={{ flex: 'none', marginTop: 2 }} />
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: D, fontWeight: 600, fontSize: 21, color: 'var(--apr-ink)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
          <span>{t}</span>
          <span className="menopause-item-toggle" style={{
            fontSize: 22, lineHeight: 1, color: 'var(--apr-honey)', fontWeight: 400,
            display: 'none', transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
            transition: 'transform .2s var(--ease-out)'
          }}>+</span>
        </div>
        <div className="menopause-item-body" style={{ color: 'rgba(50,45,30,0.74)', fontSize: 14.5, lineHeight: 1.6, marginTop: 2 }}>{d}</div>
      </div>
    </div>
  );
}

function Menopause({ onBook }) {
  const ref = useReveal();
  const D = 'var(--font-display)';
  const fallbackPoints = [
  ['lemon', 'Comprendre son corps', "Décoder les bouleversements hormonaux, sans tabou, avec des repères clairs et fiables."],
  ['sun-motif', 'Apaiser les symptômes', "Des outils concrets adaptés à ce que vous traversez dans différents domaines : sommeil, énergie, émotions, ..."],
  ['users-three', 'Se réinventer', "Faire de cette étape de vie une renaissance : retrouver élan, désir et confiance."]];
  const items = c('menopause.items', null);
  const points = Array.isArray(items) && items.length === 3
    ? items.map((it, i) => [it.icon || fallbackPoints[i][0], it.title || fallbackPoints[i][1], it.description || fallbackPoints[i][2]])
    : fallbackPoints;

  return (
    <section id="menopause" ref={ref} style={{ padding: '0 40px', margin: '8px 0 0' }}>
      <div className="apr-fade" style={{ maxWidth: 1200, margin: '0 auto',
        background: 'url(assets/textures/paper-blush.jpg)', backgroundSize: 'cover',
        borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', position: 'relative', overflow: 'hidden',
        padding: '64px 60px', display: 'grid', gridTemplateColumns: '1.08fr 0.92fr', gap: 64, alignItems: 'center' }}>
        <img src="assets/sun-motif.svg" alt="" style={{ position: 'absolute', top: -40, right: -40, width: 200, opacity: 0.35 }} />
        <div style={{ position: 'relative' }}>
          <Eyebrow style={{ color: 'var(--apr-clay)' }}>{c('menopause.eyebrow', 'Accompagnement (péri)ménopause')}</Eyebrow>
          <h2 style={{ fontFamily: D, margin: '16px 0 0', color: 'var(--apr-ink)', lineHeight: 1.04,
            letterSpacing: '-0.02em', fontSize: 'clamp(34px,4.4vw,56px)' }}>
            <span style={{ fontWeight: 300 }}>{c('menopause.title_part1', 'Traverser la')} </span>
            <span style={{ fontWeight: 900 }}>{c('menopause.title_part2_bold', 'ménopause')}</span>
            <span style={{ fontWeight: 300, fontStyle: 'italic' }}>{c('menopause.title_part3_italic', ', en pleine lumière')}</span>
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.7,
            color: 'rgba(50,45,30,0.82)', maxWidth: 480, margin: '18px 0 28px' }}>{c('menopause.intro', "La ménopause n\u0027est pas une fin, c\u0027est une étape de vie. Ensemble, nous en faisons un temps de clarté et de force, en mêlant outils scientifiques et pratiques de bien-être.")}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 30 }}>
            {points.map(([ic, t, d], idx) =>
            <MenopauseItem key={t} ic={ic} t={t} d={d} D={D} />
            )}
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button size="lg" variant="terra" onClick={bookCall}>{c('menopause.cta_book', 'Réserver un appel')} <Icon name="arrow-right" size={15} /></Button>

          </div>
        </div>
        <PhotoCluster main="paper-terracotta" inset={null} aspect="1 / 1" mainImg="assets/menopause.jpg"
        shapeRadius="58% 42% 47% 53% / 63% 56% 44% 37%"
        insetSide="left" insetLabel="" label="Photographie · placeholder" />
      </div>
    </section>);

}
window.Menopause = Menopause;