// Trainin Center — Page « 3 vidéos offertes »
// Cible future : /3-videos-offertes/
// Nouvelle page complète : 3 vidéos Vimeo (iframes responsives) + CTA.
// Réutilise tc-system + NavBar/Footer/Section de tc-sections.
// Aucune vidéo hébergée localement — embeds Vimeo uniquement.

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

const V3 = {
  inscription: 'https://espace.trainin-center.com/page-inscription-1/',
  contact:     'contact.html#formulaire',
};

const V3_VIDEOS = [
  {
    anchor: 'video-1',
    num: '01',
    title: 'Découvrir la naturopathie et son état d\u2019esprit',
    src: 'https://player.vimeo.com/video/1207645968?title=0&byline=0&portrait=0&badge=0&autopause=0',
    pad: 75,      // 4:3
  },
  {
    anchor: 'video-2',
    num: '02',
    title: 'Le programme de formation',
    src: 'https://player.vimeo.com/video/1207430194?title=0&byline=0&portrait=0&badge=0&autopause=0',
    pad: 56.25,   // 16:9
  },
  {
    anchor: 'video-3',
    num: '03',
    title: 'Se projeter dans son futur métier',
    src: 'https://player.vimeo.com/video/1207430192?title=0&byline=0&portrait=0&badge=0&autopause=0',
    pad: 75,      // 4:3
  },
];

// ── Iframe Vimeo responsive (padding-hack) ──────────────────
function V3VimeoEmbed({ src, pad, title }) {
  return (
    <div style={{
      position: 'relative', width: '100%', height: 0, paddingTop: `${pad}%`,
      background: '#000', borderRadius: 20, overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 24px 60px -24px rgba(26,31,28,0.35)',
    }}>
      <iframe
        src={src}
        title={title}
        loading="lazy"
        allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media"
        allowFullScreen
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
      />
    </div>
  );
}

// ── Petit bouton plein vert sous chaque vidéo ───────────────
function V3DiscreetLink({ device, children, href }) {
  const m = isMobV(device);
  return (
    <a href={href} target="_blank" rel="noopener noreferrer" data-cta="learnybox:purchase" style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      height: 44, padding: '0 20px', boxSizing: 'border-box',
      background: TC.sage, color: TC.white,
      border: 'none', borderRadius: 999,
      fontFamily: fontSans, fontSize: 14, fontWeight: 600, letterSpacing: -0.1,
      textDecoration: 'none', width: m ? '100%' : 'auto', justifyContent: 'center',
      boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
    }}>
      {children}
      <svg width="13" height="13" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
        <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </a>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function V3Hero({ device }) {
  const m = isMobV(device);
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: m ? -140 : -260, left: '50%', transform: 'translateX(-50%)',
        width: m ? 520 : 940, height: m ? 520 : 940, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 62%)`,
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'relative', padding: m ? '44px 22px 40px' : '64px 80px 68px',
        maxWidth: 880, margin: '0 auto', textAlign: 'center',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: m ? 18 : 24 }}>
          <Eyebrow variant="sage">3 vidéos offertes · accès libre</Eyebrow>
        </div>
        <h1 style={{
          fontFamily: fontSans, fontSize: m ? 34 : 56, fontWeight: 500,
          letterSpacing: m ? -1.1 : -2, lineHeight: 1.08,
          margin: 0, color: TC.ink, textWrap: 'balance',
        }}>
          Vos 3 vidéos offertes pour découvrir la{' '}
          <span style={{
            fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400,
            color: TC.sageDeep, fontSize: m ? 38 : 62, letterSpacing: m ? -1 : -1.6,
          }}>formation praticien·ne naturopathe.</span>
        </h1>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16.5 : 20, lineHeight: 1.5,
          color: TC.ink2, margin: m ? '18px auto 0' : '22px auto 0',
          maxWidth: 640, letterSpacing: -0.1, textWrap: 'balance',
        }}>
          Découvrez l'approche Trainin Center, le contenu du parcours et les
          premières clés pour mieux comprendre le métier de naturopathe.
        </p>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 15 : 16, lineHeight: 1.6,
          color: TC.ink3, margin: m ? '16px auto 0' : '18px auto 0',
          maxWidth: 620, letterSpacing: -0.05,
        }}>
          Cette page vous permet de visionner les 3 vidéos offertes pour mieux
          comprendre la formation praticien·ne naturopathe, son organisation et
          la manière dont vous pouvez avancer à votre rythme.
        </p>

        {/* Ancres de navigation vers chaque vidéo */}
        <div style={{
          display: 'flex', flexWrap: 'wrap', justifyContent: 'center',
          gap: m ? 8 : 10, marginTop: m ? 26 : 34,
        }}>
          {V3_VIDEOS.map((v) => (
            <a key={v.anchor} href={`#${v.anchor}`} style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              height: 40, padding: '0 16px', boxSizing: 'border-box',
              background: TC.white, color: TC.ink,
              border: `1px solid ${TC.hair}`, borderRadius: 999,
              fontFamily: fontSans, fontSize: 13.5, fontWeight: 500, letterSpacing: -0.1,
              textDecoration: 'none',
            }}>
              <span style={{ fontFamily: fontMono, fontSize: 11, color: TC.sage }}>{v.num}</span>
              Vidéo {v.num.replace(/^0/, '')}
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                <path d="M2 3l3 3 3-3" stroke={TC.ink3} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// SECTION VIDÉO (réutilisable, alterne les fonds)
// ════════════════════════════════════════════════════════════
function V3Section({ device, v, tone }) {
  const m = isMobV(device);
  return (
    <section id={v.anchor} data-screen-label={`Vidéo ${v.num}`} style={{
      background: tone === 'off' ? TC.off : TC.white,
      padding: m ? '52px 22px' : '84px 80px',
      scrollMarginTop: m ? 80 : 100,
    }}>
      <div style={{ maxWidth: 840, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: m ? 12 : 16,
          marginBottom: m ? 20 : 26,
        }}>
          <span style={{
            fontFamily: fontMono, fontSize: m ? 13 : 15, fontWeight: 500,
            color: TC.sage, letterSpacing: 1, flexShrink: 0,
          }}>{v.num}</span>
          <div>
            <div style={{
              fontFamily: fontMono, fontSize: 11, letterSpacing: 1.4,
              textTransform: 'uppercase', color: TC.ink3, marginBottom: 6,
            }}>Vidéo {v.num.replace(/^0/, '')}</div>
            <h2 style={{
              fontFamily: fontSans, fontSize: m ? 24 : 34, fontWeight: 500,
              letterSpacing: m ? -0.7 : -1.2, lineHeight: 1.14,
              margin: 0, color: TC.ink, textWrap: 'balance',
            }}>{v.title}</h2>
          </div>
        </div>

        <V3VimeoEmbed src={v.src} pad={v.pad} title={v.title} />

        <div style={{ marginTop: m ? 20 : 24, display: 'flex', justifyContent: m ? 'stretch' : 'flex-start' }}>
          <V3DiscreetLink device={device} href={V3.inscription}>Je rejoins la formation</V3DiscreetLink>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// CTA FINAL
// ════════════════════════════════════════════════════════════
function V3FinalCTA({ device }) {
  const m = isMobV(device);
  return (
    <section style={{ padding: m ? '24px 16px 40px' : '40px 48px 64px', background: TC.white }}>
      <div style={{
        position: 'relative', maxWidth: 1100, margin: '0 auto',
        borderRadius: m ? 28 : 36,
        background: `linear-gradient(160deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
        padding: m ? '48px 26px' : '76px 80px',
        overflow: 'hidden', textAlign: 'center',
      }}>
        <div style={{
          position: 'absolute', top: -120, right: -120,
          width: 360, height: 360, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%)',
        }} />
        <div style={{
          position: 'absolute', bottom: -160, left: -160,
          width: 420, height: 420, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)',
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Eyebrow variant="light">Vous en voulez plus ?</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 34 : 54, fontWeight: 500,
            letterSpacing: m ? -1.2 : -2, lineHeight: 1.06,
            color: TC.white, margin: '20px auto 16px', textWrap: 'balance', maxWidth: 760,
          }}>
            Découvrez la{' '}
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>formation complète.</span>
          </h2>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16 : 18, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.78)', margin: '0 auto 30px',
            maxWidth: 560, letterSpacing: -0.1,
          }}>
            Vous pouvez consulter la formation complète ou nous contacter si vous
            avez une question avant de vous inscrire.
          </p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: 12, justifyContent: 'center', alignItems: 'center',
          }}>
            <a href={V3.inscription} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block', width: m ? '100%' : 'auto' }}>
              <BtnPrimary size="lg" dark fullWidth={m} data-cta="learnybox:purchase">Je rejoins la formation</BtnPrimary>
            </a>
            <a href={V3.contact} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block', width: m ? '100%' : 'auto' }}>
              <BtnGhost size="lg" dark fullWidth={m} data-cta="goto:contact">Poser une question</BtnGhost>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function TroisVideosPage({ device }) {
  return (
    <div style={{ background: TC.white, width: '100%', minHeight: '100%', display: 'flex', flexDirection: 'column', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <V3Hero device={device} />
      <V3Section device={device} v={V3_VIDEOS[0]} tone="white" />
      <V3Section device={device} v={V3_VIDEOS[1]} tone="off" />
      <V3Section device={device} v={V3_VIDEOS[2]} tone="white" />
      <V3FinalCTA device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { TroisVideosPage });