// Trainin Center — Page « Parrainage » (/parrainage)
// Réutilise tc-system (primitives) + NavBar/Footer (tc-sections).
// Cible B2C en priorité (élèves, anciens élèves, prescripteurs) puis une
// section dédiée « Affiliation partenaires » pour les pros / créateurs.
//
// ── CTA / liens ─────────────────────────────────────────────
//   learnybox:affiliation → espace parrainage & affiliation Learnybox
//   goto:contact          → page Contact
// PARR_AFFILIATION_URL est un placeholder à brancher sur LEARNYBOX_AFFILIATION_URL.

const isMP = (d) => d === 'mobile';

// → à remplacer par LEARNYBOX_AFFILIATION_URL en production
const PARR_INSCRIPTION_URL = 'https://espace.trainin-center.com/inscription-affiliation-trainin-center/';
const PARR_ESPACE_URL = 'https://espace.trainin-center.com/affiliation/index/';
const PARR_CONTACT_URL = 'contact.html#formulaire';

// Flèche réutilisée dans les liens-texte
function ArrowLink({ children, color, href = '#', onDark = false }) {
  const c = color || (onDark ? TC.white : TC.sageDeep);
  return (
    <a href={href} style={{
      marginTop: 2,
      display: 'inline-flex', alignItems: 'center', gap: 7,
      fontFamily: fontSans, fontSize: 14.5, fontWeight: 600, color: c,
      textDecoration: 'none', letterSpacing: -0.1,
    }}>
      {children}
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
        <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </a>
  );
}

// ════════════════════════════════════════════════════════════
// 1 · HERO
// ════════════════════════════════════════════════════════════
function ParrHero({ device }) {
  const m = isMP(device);
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }} data-screen-label="Parrainage · hero">
      <div style={{
        position: 'absolute', top: m ? -130 : -260, right: m ? -170 : -180,
        width: m ? 400 : 740, height: m ? 400 : 740, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`,
        pointerEvents: 'none',
      }} />
      <div style={m
        ? { position: 'relative', padding: '44px 22px 40px' }
        : { position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: '48px 80px 44px' }}>
        <div style={{ maxWidth: 920 }}>
        <div style={{ marginBottom: m ? 18 : 24 }}>
          <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>Parrainage &amp; affiliation</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: fontSans, fontSize: m ? 38 : 62, fontWeight: 500,
          letterSpacing: m ? -1.3 : -2.2, lineHeight: m ? 1.08 : 1.04,
          margin: '0 0 22px', color: TC.ink, textWrap: 'balance',
        }}>
          Recommandez Trainin Center{m ? ' ' : <br />}
          <span style={{
            fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
            color: TC.sageDeep, fontSize: m ? 42 : 70, letterSpacing: m ? -1.3 : -2,
          }}>et soyez récompensé<span style={{ fontFamily: fontSans, fontStyle: 'normal', fontSize: '0.46em', verticalAlign: '0.28em', margin: '0 0.02em' }}>·</span>e.</span>
        </h1>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.6,
          color: TC.ink2, margin: '0 0 30px', maxWidth: 660, letterSpacing: -0.1,
        }}>
          Vous connaissez une personne intéressée par la naturopathie, le bien-être et
          la nutrition ? Recommandez nos parcours et bénéficiez d'une commission
          lorsqu'une inscription est validée.
        </p>
        <div style={{
          display: 'flex', flexDirection: m ? 'column' : 'row',
          gap: m ? 10 : 12, alignItems: m ? 'stretch' : 'center',
        }}>
          <a href={PARR_INSCRIPTION_URL} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}>
            <BtnPrimary size="lg" fullWidth={m} data-cta="learnybox:affiliation">Accéder à mon espace parrainage</BtnPrimary>
          </a>
        </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// 2 · COMMENT FONCTIONNE LE PARRAINAGE
// ════════════════════════════════════════════════════════════
function ParrHowItWorks({ device }) {
  const m = isMP(device);
  const steps = [
    { n: '01', t: 'Créez ou accédez à votre espace parrainage', b: 'Connectez-vous à l\'espace dédié pour activer votre profil de parrain·e en quelques instants.' },
    { n: '02', t: 'Récupérez votre lien personnalisé', b: 'Un lien unique vous est attribué : c\'est lui qui rattachera les inscriptions à votre compte.' },
    { n: '03', t: 'Partagez votre lien et suivez vos résultats', b: 'Diffusez-le autour de vous et consultez vos inscriptions et commissions depuis votre espace.' },
  ];
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Le principe"
        title="Comment fonctionne le parrainage ?"
        sub="Le programme de parrainage Trainin Center permet aux élèves, anciens élèves et personnes qui souhaitent recommander nos formations de partager un lien personnalisé. Lorsqu'une personne s'inscrit à une formation via votre lien, vous pouvez bénéficier d'une commission selon les conditions du programme."
        align="left"
        maxWidth={m ? '100%' : 760}
      />
      <div style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 18 : 24,
        marginTop: m ? 8 : 20,
      }}>
        {!m && (
          <div style={{
            position: 'absolute', top: 36, left: '16%', right: '16%', height: 1,
            background: `linear-gradient(90deg, transparent, ${TC.sageHair}, transparent)`,
            pointerEvents: 'none',
          }} />
        )}
        {steps.map((s) => (
          <div key={s.n} style={{
            background: TC.off, borderRadius: 22, border: `1px solid ${TC.hair}`,
            padding: m ? '24px 22px' : '30px 28px', position: 'relative',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 28,
              background: TC.sageDeep, color: TC.white,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: fontMono, fontSize: 14, fontWeight: 500, letterSpacing: 0.4,
              marginBottom: 18,
            }}>{s.n}</div>
            <div style={{
              fontFamily: fontSans, fontSize: m ? 18 : 19, fontWeight: 600,
              color: TC.ink, letterSpacing: -0.4, lineHeight: 1.25, marginBottom: 8,
            }}>{s.t}</div>
            <div style={{
              fontFamily: fontSans, fontSize: 14.5, color: TC.ink2,
              lineHeight: 1.6, letterSpacing: -0.05,
            }}>{s.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// 3 · POUR QUI ?
// ════════════════════════════════════════════════════════════
function ParrForWho({ device }) {
  const m = isMP(device);
  const cards = [
    { theme: 'reconversion', t: 'Anciens élèves', b: 'Vous avez suivi une formation et souhaitez la recommander.' },
    { theme: 'book', t: 'Élèves en cours de formation', b: 'Vous vivez le parcours et pouvez en parler autour de vous.' },
    { theme: 'leaf', t: 'Personnes intéressées par le bien-être', b: 'Vous partagez les valeurs de l\'école sans être élève.' },
    { theme: 'holistic', t: 'Professionnels du bien-être', b: 'Vous orientez un public déjà sensibilisé à ces sujets.' },
    { theme: 'accompagnement', t: 'Partenaires ou prescripteurs', b: 'Vous recommandez Trainin Center dans votre réseau.' },
  ];
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Pour qui ?"
        title="Qui peut recommander Trainin Center ?"
        sub="Le programme est ouvert aux personnes qui souhaitent recommander Trainin Center de manière sérieuse, transparente et cohérente avec les valeurs de l'école."
        align="left"
        maxWidth={m ? '100%' : 700}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 14 : 20,
      }}>
        {cards.map((c) => (
          <div key={c.t} style={{
            background: TC.white, borderRadius: 20, border: `1px solid ${TC.hair}`,
            padding: m ? '20px 20px' : '26px 26px',
            display: 'flex', flexDirection: 'column', gap: 12,
          }}>
            <ThemeMark theme={c.theme} size={48} />
            <div style={{
              fontFamily: fontSans, fontSize: m ? 16.5 : 17.5, fontWeight: 600,
              color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25,
            }}>{c.t}</div>
            <div style={{
              fontFamily: fontSans, fontSize: 14, color: TC.ink2,
              lineHeight: 1.55, letterSpacing: -0.05,
            }}>{c.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// 4 · COMMISSIONS ET CONDITIONS
// ════════════════════════════════════════════════════════════
function ParrCommissions({ device }) {
  const m = isMP(device);
  const placeholders = [
    { k: 'Commission', v: 'À compléter' },
    { k: 'Conditions de validation', v: 'À compléter' },
    { k: 'Modalités de versement', v: 'À compléter' },
  ];
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{ maxWidth: m ? '100%' : 760 }}>
        {/* texte + encart */}
        <div>
          <SectionHead
            eyebrow="Transparence"
            title="Commissions et conditions"
            sub="Les commissions sont calculées selon les conditions du programme de parrainage Trainin Center. Elles peuvent varier selon la formation concernée, le montant de l'inscription et les modalités appliquées au moment de la vente."
            align="left"
            maxWidth="100%"
          />
          {/* encart important */}
          <div style={{
            background: TC.sageMist, borderRadius: 18,
            border: `1px solid ${TC.sageHair}`,
            padding: m ? '20px 20px' : '24px 26px',
            display: 'flex', gap: 14, alignItems: 'flex-start',
          }}>
            <span style={{ marginTop: 2, flexShrink: 0 }}><IconCheck size={20} color={TC.sageDeep} /></span>
            <p style={{
              fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6,
              color: TC.sageInk, margin: 0, letterSpacing: -0.05,
            }}>
              Les commissions sont dues uniquement lorsqu'une inscription est effectivement
              validée et réglée. Les modalités exactes sont précisées dans l'espace parrainage.
            </p>
          </div>
          <div style={{
            fontFamily: fontSans, fontSize: 12.5, lineHeight: 1.5,
            color: TC.ink3, letterSpacing: -0.02, marginTop: m ? 14 : 16,
          }}>
            Ces informations seront renseignées dans l'espace parrainage.
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// 5 · AFFILIATION PARTENAIRES — section pro (fond vert profond)
// ════════════════════════════════════════════════════════════
function ParrPartners({ device }) {
  const m = isMP(device);
  const audiences = [
    'Influenceurs bien-être', 'Créateurs de contenu', 'Sites spécialisés',
    'Blogs thématiques', 'Newsletters', 'Médias ou annuaires',
    'Professionnels du bien-être', 'Partenaires à audience qualifiée',
  ];
  return (
    <Section tone="sage" padY={m ? [64, 64] : [100, 100]} padX={m ? 22 : 80} id="affiliation">
      <div data-screen-label="Parrainage · affiliation partenaires" style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow variant="light">Pour les professionnels</Eyebrow>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 32 : 48, fontWeight: 500,
            letterSpacing: m ? -1.2 : -1.8, lineHeight: 1.06,
            color: TC.white, margin: '18px 0 16px', textWrap: 'balance',
          }}>
            Affiliation <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>partenaires.</span>
          </h2>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16 : 18.5, lineHeight: 1.6,
            color: 'rgba(255,255,255,0.82)', margin: '0 0 16px', letterSpacing: -0.1,
          }}>
            Vous êtes créateur de contenu, influenceur, site spécialisé, blog, média ou
            professionnel du bien-être ? Trainin Center peut étudier avec vous une
            collaboration d'affiliation adaptée.
          </p>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 14.5 : 16, lineHeight: 1.65,
            color: 'rgba(255,255,255,0.66)', margin: 0, letterSpacing: -0.05,
          }}>
            En complément du parrainage classique, Trainin Center propose une option
            d'affiliation partenaires pour les personnes ou structures disposant d'une
            audience qualifiée dans les domaines du bien-être, de la naturopathie, de la
            reconversion professionnelle, de la formation en ligne ou du développement personnel.
          </p>
        </div>

        {/* audiences — chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? 9 : 11, marginTop: m ? 26 : 34 }}>
          {audiences.map((a) => (
            <span key={a} style={{
              display: 'inline-flex', alignItems: 'center', gap: 9,
              padding: m ? '9px 14px' : '11px 18px',
              background: 'rgba(255,255,255,0.08)',
              border: '1px solid rgba(255,255,255,0.16)',
              borderRadius: 999,
              fontFamily: fontSans, fontSize: m ? 13.5 : 14.5, fontWeight: 500,
              color: TC.white, letterSpacing: -0.1,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: TC.sageMid, display: 'inline-block' }} />
              {a}
            </span>
          ))}
        </div>

        {/* bloc — lien personnalisé & suivi */}
        <div style={{
          marginTop: m ? 30 : 44,
          background: TC.white, borderRadius: 24,
          padding: m ? '28px 24px' : '44px 48px',
          display: m ? 'flex' : 'grid',
          flexDirection: m ? 'column' : undefined,
          gridTemplateColumns: m ? undefined : '1.1fr 0.9fr',
          gap: m ? 24 : 48, alignItems: 'center',
          boxShadow: '0 30px 80px -30px rgba(0,0,0,0.4)',
        }}>
          <div>
            <h3 style={{
              fontFamily: fontSans, fontSize: m ? 22 : 28, fontWeight: 600,
              color: TC.ink, letterSpacing: -0.6, lineHeight: 1.2, margin: '0 0 12px', textWrap: 'balance',
            }}>Un lien personnalisé et un suivi des résultats</h3>
            <p style={{
              fontFamily: fontSans, fontSize: m ? 15 : 16.5, lineHeight: 1.6,
              color: TC.ink2, margin: 0, letterSpacing: -0.05, maxWidth: 540,
            }}>
              Les partenaires peuvent disposer d'un lien personnalisé permettant de suivre
              les inscriptions générées. L'espace partenaire permet de consulter les résultats,
              les ventes validées et les commissions associées selon les conditions du programme.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href={PARR_CONTACT_URL} style={{ textDecoration: 'none' }}>
              <BtnPrimary size="lg" fullWidth data-cta="goto:contact">Demander un accès partenaire</BtnPrimary>
            </a>
            <a href={PARR_INSCRIPTION_URL} style={{ textDecoration: 'none' }}>
              <BtnGhost size="lg" fullWidth data-cta="learnybox:affiliation">Accéder à l'espace parrainage</BtnGhost>
            </a>
            <div style={{
              display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 4,
            }}>
              <svg width="15" height="15" viewBox="0 0 14 14" fill="none" style={{ marginTop: 2, flexShrink: 0 }}>
                <rect x="2.5" y="6" width="9" height="6" rx="1.4" stroke={TC.ink3} strokeWidth="1.3"/>
                <path d="M4.5 6V4.4a2.5 2.5 0 015 0V6" stroke={TC.ink3} strokeWidth="1.3"/>
              </svg>
              <span style={{ fontFamily: fontSans, fontSize: 12.5, lineHeight: 1.5, color: TC.ink3, letterSpacing: -0.02 }}>
                L'espace de parrainage et d'affiliation peut s'ouvrir dans l'environnement
                sécurisé Trainin Center / Learnybox.
              </span>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// 6 · RÉCUPÉRER VOTRE LIEN DE PARRAINAGE
// ════════════════════════════════════════════════════════════
function ParrGetLink({ device }) {
  const m = isMP(device);
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        background: TC.white, borderRadius: 24,
        border: `1px solid ${TC.sageHair}`,
        boxShadow: '0 1px 2px rgba(26,31,28,0.03), 0 16px 44px -26px rgba(90,145,105,0.30)',
        padding: m ? '30px 24px' : '52px 56px',
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1fr auto',
        gap: m ? 22 : 48, alignItems: 'center',
      }}>
        <div style={{ maxWidth: 620 }}>
          <div style={{ marginBottom: 16 }}>
            <Eyebrow variant="sage" size="sm">Votre espace</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 24 : 31, fontWeight: 600,
            color: TC.ink, letterSpacing: -0.7, lineHeight: 1.18, margin: '0 0 12px', textWrap: 'balance',
          }}>Récupérer votre lien de parrainage</h2>
          <p style={{ fontFamily: fontSans, fontSize: m ? 15.5 : 16.5, lineHeight: 1.6, color: TC.ink2, margin: 0, letterSpacing: -0.05 }}>
            Votre lien personnalisé est disponible depuis l'espace parrainage Trainin Center.
            Cet espace vous permet de récupérer votre lien, suivre vos inscriptions et consulter
            vos statistiques.
          </p>
        </div>
        <a href={PARR_ESPACE_URL} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}>
          <BtnPrimary size="lg" fullWidth={m} data-cta="learnybox:affiliation">Accéder à mon espace parrainage</BtnPrimary>
        </a>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// 7 · CONTACT — encart vert profond
// ════════════════════════════════════════════════════════════
function ParrContact({ device }) {
  const m = isMP(device);
  return (
    <Section tone="white" padY={m ? [12, 60] : [24, 100]} padX={m ? 22 : 80}>
      <div style={{
        position: 'relative', overflow: 'hidden',
        maxWidth: 1100, margin: '0 auto',
        borderRadius: 28,
        background: `linear-gradient(155deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
        padding: m ? '36px 26px' : '64px 64px',
        textAlign: 'center',
      }}>
        <div style={{ position: 'absolute', top: -100, right: -80, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)' }} />
        <div style={{ position: 'relative', maxWidth: 680, margin: '0 auto' }}>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 26 : 38, fontWeight: 500,
            letterSpacing: m ? -0.8 : -1.4, lineHeight: 1.12,
            color: TC.white, margin: '0 0 14px', textWrap: 'balance',
          }}>Une question sur le parrainage ou l'affiliation ?</h2>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 15.5 : 17.5, lineHeight: 1.6,
            color: 'rgba(255,255,255,0.82)', margin: '0 0 28px', letterSpacing: -0.05,
          }}>
            Vous souhaitez connaître les conditions, les commissions ou les modalités du
            programme ? Contactez l'équipe Trainin Center pour obtenir les informations
            adaptées à votre situation.
          </p>
          <a href={PARR_CONTACT_URL} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}>
            <BtnPrimary size="lg" dark fullWidth={m} data-cta="goto:contact">Contactez-nous</BtnPrimary>
          </a>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function ParrainagePage({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <ParrHero device={device} />
      <ParrHowItWorks device={device} />
      <ParrForWho device={device} />
      <ParrCommissions device={device} />
      <ParrPartners device={device} />
      <ParrGetLink device={device} />
      <ParrContact device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { ParrainagePage });