// Apricus — Ateliers (fond vidéo, fiches qui se retournent + contexte)
function AtelierCard({ a, i }) {
  const [flipped, setFlipped] = React.useState(false);
  const D = 'var(--font-display)';
  const pastille = 'var(--apr-citron-pale)';
  const glyph = 'var(--apr-honey)';
  return (
    <div onClick={() => setFlipped(f => !f)} style={{ perspective: 1700, cursor: 'pointer' }}>
      <div style={{ display: 'grid', transformStyle: 'preserve-3d',
        transition: 'transform .85s var(--ease-soft)',
        transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)', minHeight: 230 }}>

        {/* ---- FACE AVANT ---- */}
        <div style={{ gridArea: '1 / 1', backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
          background: 'var(--apr-linen)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)',
          padding: '30px 28px', display: 'flex', flexDirection: 'column', alignItems: 'center',
          justifyContent: 'center', textAlign: 'center', gap: 12 }}>
          <div style={{ width: 72, height: 72, borderRadius: '50%', background: pastille,
            display: 'grid', placeItems: 'center', flex: 'none', boxShadow: 'var(--shadow-xs)' }}>
            <Icon name={a.icon} size={36} color={glyph} />
          </div>
          <h3 style={{ fontFamily: D, fontWeight: 600, fontSize: 27, color: 'var(--apr-ink)', margin: 0 }}>{a.title}</h3>
          <div style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: 22, lineHeight: 1.1 }}>{a.essence}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--apr-honey)' }}>
            Découvrir <Icon name="arrow-right" size={14} />
          </div>
        </div>

        {/* ---- FACE ARRIÈRE ---- */}
        <div style={{ gridArea: '1 / 1', backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
          transform: 'rotateY(180deg)', background: 'url(assets/textures/paper-sand.jpg)', backgroundSize: 'cover',
          borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden',
          padding: '26px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Eyebrow style={{ color: 'var(--apr-clay)', justifyContent: 'center' }}>{a.title}</Eyebrow>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.68, color: 'var(--apr-ink-soft)', margin: '10px 0 0', textAlign: 'center' }}>{a.full}</p>
          <div style={{ marginTop: 'auto', paddingTop: 14, display: 'flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--apr-ink-soft)' }}>
            <Icon name="arrow-left" size={14} /> Revenir
          </div>
        </div>

      </div>
    </div>
  );
}

function Ateliers({ onBook }) {
  const ref = useReveal();
  const D = 'var(--font-display)';
  return (
    <section id="ateliers" ref={ref} style={{ background: 'url(assets/textures/paper-terracotta.jpg)', backgroundSize: 'cover', padding: '100px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px' }}>
        <div className="apr-fade" style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 50px' }}>
          <Eyebrow style={{ justifyContent: 'center', color: 'var(--apr-citron-soft)' }}>Ateliers</Eyebrow>
          <h2 style={{ fontFamily: D, fontSize: 'clamp(34px,4.6vw,56px)', lineHeight: 1.02,
            letterSpacing: '-0.02em', color: 'var(--apr-cream)', margin: '14px 0 0' }}>
            <span style={{ fontWeight: 300 }}>Explorer, </span>
            <span style={{ fontWeight: 300, fontStyle: 'italic' }}>guérir</span>
            <span style={{ fontWeight: 300 }}>, </span>
            <span style={{ fontWeight: 900 }}>transformer</span>
          </h2>
          <p style={{ color: 'rgba(251,244,230,0.92)', fontSize: 16.5, lineHeight: 1.7, margin: '14px 0 0' }}>
            Des expériences à vivre entre femmes. Cliquez sur les fiches pour les découvrir.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
          {ATELIERS.map((a, i) => {
            const lone = (i === ATELIERS.length - 1) && (ATELIERS.length % 2 === 1);
            return (
              <div key={a.title} className="apr-fade"
                style={lone ? { gridColumn: '1 / -1', maxWidth: 'calc(50% - 11px)', width: '100%', margin: '0 auto' } : undefined}>
                <AtelierCard a={a} i={i} />
              </div>
            );
          })}
        </div>

        {/* ---- contexte : où ont lieu les ateliers ---- */}
        <div className="apr-fade" style={{ textAlign: 'center', maxWidth: 720, margin: '46px auto 0' }}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.75, color: 'rgba(251,244,230,0.92)', margin: '0 0 22px' }}>
            Ces ateliers sont au cœur de chaque <strong style={{ fontWeight: 700, color: 'var(--apr-cream)' }}>séjour Apricus</strong>, mais ils
            se vivent aussi <strong style={{ fontWeight: 700, color: 'var(--apr-cream)' }}>en dehors des retraites</strong> — cercles privés
            entre femmes, événements, journées d'entreprise ou team-building. Chaque atelier s'adapte à votre contexte.
          </p>
          <Button size="lg" variant="cream" onClick={onBook}>
            Demander un atelier sur mesure <Icon name="arrow-right" size={15} />
          </Button>
        </div>
      </div>
    </section>
  );
}
window.Ateliers = Ateliers;