// Apricus — L'équipe (fiches cliquables qui se retournent, comme « Mon histoire »)
const TEAM = [
  {
    name: 'Marie', role: 'Fondatrice & psychologue', wash: 'paper-sand', img: 'assets/marie-surf-framed-2-c.png', cleanFrame: true,
    bio: "J'ai créé Apricus d'une envie simple : offrir aux femmes un espace où se ressourcer et prendre conscience de leur pouvoir. Épicurienne dans l'âme, pas de protocole strict ici — l'objectif, que chacune se sente choyée comme chez sa nonna.",
    note: 'écoute · psychologie positive',
  },
  {
    name: 'Fanny', role: 'Yoga & co-organisatrice', wash: 'paper-terracotta', img: 'assets/fanny-framed-c.png',
    bio: "Professeure de yoga, future kinésiologue et co-organisatrice des séjours : la douceur incarnée. Ses cours s'adaptent à toutes — des débutantes aux yoginis confirmées — et chaque séance, construite autour d'une thématique, est pensée dans le moindre détail.",
    note: 'the harmony box · @the.harmonybox',
  },
  {
    name: 'Florence', role: 'Notre cuisinière préférée', wash: 'paper-blush', img: 'assets/florence2-framed-c.png',
    bio: "Cuisine saine et gourmande, toujours préparée et partagée avec amour — Florence nous régale. Mais c'est surtout par son humour, son authenticité et son ouverture d'esprit qu'elle nourrit le plus chaque séjour Apricus.",
    note: 'nutrition · dolce vita',
  },
];

function TeamCard({ m }) {
  const [flipped, setFlipped] = React.useState(false);
  const D = 'var(--font-display)';
  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: 430 }}>

        {/* ---- FACE AVANT ---- */}
        <div style={{ gridArea: '1 / 1', backfaceVisibility: 'hidden', WebkitBackfaceVisibility: 'hidden',
          background: 'var(--apr-linen)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-sm)',
          overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ height: 252, background: `url(assets/textures/${m.wash}.jpg)`, backgroundSize: 'cover',
            backgroundPosition: 'center', position: 'relative', overflow: 'hidden' }}>
            {m.img ? (
              <img src={m.img} alt={m.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%',
                objectFit: 'contain', objectPosition: 'center bottom', filter: m.cleanFrame ? 'none' : 'url(#paperEdge)' }} />
            ) : (
              <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
                color: 'rgba(50,45,30,0.4)', fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                Portrait
              </span>
            )}
          </div>
          <div style={{ padding: '22px 24px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
            <h3 style={{ fontFamily: D, fontWeight: 400, fontSize: 28, color: 'var(--apr-ink)', margin: 0 }}>{m.name}</h3>
            <div style={{ fontFamily: 'var(--font-script)', color: 'var(--apr-terracotta)', fontSize: 22, lineHeight: 1.1, marginTop: 2 }}>{m.role}</div>
            <div style={{ marginTop: 'auto', paddingTop: 18, display: 'flex', alignItems: 'center', gap: 8,
              fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 700, letterSpacing: '0.08em',
              textTransform: 'uppercase', color: 'var(--apr-honey)' }}>
              Découvrir <Icon name="arrow-right" size={14} />
            </div>
          </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',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '30px 28px' }}>
          <Eyebrow style={{ color: 'var(--apr-clay)' }}>{m.role}</Eyebrow>
          <h3 style={{ fontFamily: D, fontWeight: 900, fontSize: 26, color: 'var(--apr-ink)', margin: '10px 0 12px' }}>{m.name}</h3>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, color: 'var(--apr-ink-soft)', margin: 0 }}>{m.bio}</p>
          <p style={{ fontFamily: 'var(--font-script)', fontSize: 23, color: 'var(--apr-clay)', margin: '16px 0 0' }}>{m.note}</p>
          <div style={{ marginTop: 'auto', paddingTop: 18, display: 'flex', alignItems: 'center', gap: 8,
            fontFamily: 'var(--font-body)', fontSize: 12.5, fontWeight: 700, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--apr-ink-soft)' }}>
            <Icon name="arrow-left" size={14} /> Revenir
          </div>
        </div>

      </div>
    </div>
  );
}

function Team() {
  const ref = useReveal();
  const D = 'var(--font-display)';
  return (
    <section id="equipe" ref={ref} style={{ padding: '34px 0 96px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 40px' }}>
        <div className="apr-fade" style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 52px' }}>
          <h2 style={{ fontFamily: D, fontSize: 'clamp(32px,4.2vw,52px)', lineHeight: 1.04,
            letterSpacing: '-0.02em', color: 'var(--apr-ink)', margin: '0 0 12px' }}>
            <span style={{ fontWeight: 300 }}>Les femmes qui vous </span>
            <span style={{ fontWeight: 900 }}>accompagnent</span>
          </h2>
          <p style={{ color: 'var(--apr-ink-soft)', fontSize: 16.5, lineHeight: 1.7, margin: 0 }}>
            Tout au long du séjour, une petite équipe attentionnée veille sur vous.
            Cliquez sur les fiches pour les découvrir.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26 }}>
          {TEAM.map(m => <TeamCard key={m.name} m={m} />)}
        </div>
      </div>
    </section>
  );
}
window.Team = Team;
