// Apricus — Mon histoire (À propos de Marie) · carte qui se retourne (flip 3D)
function Story() {
  const ref = useReveal();
  const D = 'var(--font-display)';
  const [flipped, setFlipped] = React.useState(false);
  return (
    <section id="histoire" ref={ref} style={{ padding: '104px 0 96px' }}>
      <div className="apr-fade" style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px', perspective: 2200 }}>
        <div style={{ display: 'grid', transformStyle: 'preserve-3d',
          transition: 'transform .95s var(--ease-soft)',
          transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)' }}>

          {/* ---------- FACE AVANT ---------- */}
          <div style={{ gridArea: '1 / 1', backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
            background: 'url(assets/textures/paper-sand.jpg)', backgroundSize: 'cover',
            borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-md)', padding: '52px 56px',
            display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 64, alignItems: 'center' }}>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
              <img src="assets/marie-portrait-framed-c.png" alt="Marie"
              style={{ width: '100%', maxWidth: 400, height: 'auto', display: 'block',
                filter: 'drop-shadow(0 18px 30px rgba(90,66,22,0.22))' }} />
            </div>
            <div>
              <Eyebrow>Mon histoire</Eyebrow>
              <h2 style={{ fontFamily: D, margin: '16px 0 0', color: 'var(--apr-ink)', lineHeight: 1.04,
                letterSpacing: '-0.02em', fontSize: 'clamp(32px,4.2vw,52px)' }}>
                <span style={{ fontWeight: 300 }}>Marie, </span>
                <span style={{ fontWeight: 900 }}>psychologue</span>
              </h2>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.75,
                color: 'var(--apr-ink-soft)', maxWidth: 520, margin: '20px 0 18px' }}>
                Psychologue diplômée passionnée par le bien-être, je combine des outils basés sur
                l'évidence scientifique à des pratiques innovantes.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.75,
                color: 'var(--apr-ink-soft)', maxWidth: 520, margin: '0 0 26px' }}>
                Animée par un amour inébranlable pour la vie, mon approche est imprégnée de
                <span style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: '1.4em', lineHeight: 0.8 }}> soleil</span> —
                ce qui signifie que même lors d'efforts, je veille à ce que chaque étape du chemin
                soit empreinte d'une juste (et forte) dose de dolce vita.
              </p>
              <Button variant="terra" onClick={() => setFlipped(true)}>
                Lire la suite <Icon name="arrow-right" size={15} />
              </Button>
            </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-xl)', boxShadow: 'var(--shadow-md)', overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '64px 1fr', alignItems: 'stretch' }}>
            <div style={{ background: 'var(--apr-olive-deep)' }}></div>
            <div style={{ padding: '52px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
              <Eyebrow style={{ color: 'var(--apr-clay)' }}>La suite de mon histoire</Eyebrow>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.7,
                color: 'var(--apr-ink-soft)', maxWidth: 640, margin: '16px 0 12px' }}>Bien que convaincue que chacune peut agir sur son bonheur et son bien-être, mon parcours en psychologie de la santé me prévient de tout faire reposer sur la responsabilité individuelle. Votre contexte joue un rôle significatif dans la vie que vous menez, mon objectif est de vous aider à tirer le meilleur parti de ce qui vous a été donné.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.7,
                color: 'var(--apr-ink-soft)', maxWidth: 640, margin: '0 0 12px' }}>
                La combinaison d'outils scientifiques et de pratiques de bien-être innovantes fonde la
                base de mon approche, lui conférant sa force et son caractère distinctif. J'attache une
                grande importance à adapter mon accompagnement aux circonstances, désirs et aspirations
                de chacune.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.7,
                color: 'var(--apr-ink-soft)', maxWidth: 640, margin: '0 0 14px' }}>
                Enfin, je suis profondément convaincue du pouvoir extraordinaire lié au fait d'être une
                femme, et de la force qui peut émerger de la
                <span style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: '1.35em', lineHeight: 0.8 }}> sororité</span>.
                La féminité y est célébrée à chaque étape : les variations du cycle menstruel et les
                transitions de vie, comme la ménopause, deviennent des alliées puissantes.
              </p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
                color: 'var(--apr-olive)', margin: '4px 0 14px', maxWidth: 640, lineHeight: 1.9 }}>
                · Transitions de vie · Relations · (Péri)ménopause · Identité · Cycle menstruel · Fixation d'objectifs ·
              </p>
              <p style={{ fontFamily: 'var(--font-script)', fontSize: 30, color: 'var(--apr-clay)', margin: '0 0 24px' }}>
                — Marie
              </p>
              <div>
                <Button variant="primary" onClick={() => setFlipped(false)}>
                  <Icon name="arrow-left" size={15} /> Revenir
                </Button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>);

}
window.Story = Story;