// Home page sections (shared across the 3 home variations)

function Hero({ variant = 'fullscreen' }) {
  if (variant === 'split') {
    return (
      <section className="mi-hero-split">
        <div className="mi-hero-split-text">
          <span className="mi-label">// Atelier no.07</span>
          <div>
            <h1 className="hero-title">Mathieu Ibanez</h1>
          </div>
          <div className="mi-hero-split-meta">Créateur · Formateur · YouTuber — Bangkok</div>
        </div>
        <div className="mi-hero-split-media">
          <Media gradient={GRADIENTS.hero} aspectRatio="auto" hint="VIDÉO — placeholder" style={{ height: '100%' }} />
        </div>
      </section>);

  }
  if (variant === 'typo') {
    return (
      <section className="mi-hero-typo">
        <div className="mi-container">
          <span className="mi-label" style={{ marginBottom: 24 }}>// Atelier no.07 — Bangkok</span>
          <h1 className="hero-title" style={{ marginTop: 24, marginBottom: 64 }}>
            Mathieu Ibanez
          </h1>
          <Media gradient={GRADIENTS.hero} aspectRatio="21/9" hint="VIDÉO — placeholder" cornerTag="// Reel 2026" />
        </div>
      </section>);

  }
  return (
    <section className="mi-hero">
      <div className="mi-hero-bg" style={{ background: GRADIENTS.hero }}></div>
      <span className="mi-hero-corner mi-hero-tl">// Atelier no.07</span>
      <span className="mi-hero-meta-line">Vidéo 100% IA</span>
      <span className="mi-hero-meta-bottom"></span>
      <div className="mi-hero-content">
        <h1 className="mi-hero-title">
          Mathieu Ibanez
        </h1>
      </div>
    </section>);

}
window.Hero = Hero;

function ManifestoIntro() {
  return (
    <section className="mi-intro">
      <div className="mi-container">
        <div className="mi-intro-grid">
          <span className="mi-label">— Créateur · Formateur · YouTuber</span>
          <h2 className="mi-intro-h2">Pas de théorie.<br />Des workflows testés sur ma chaîne avant d'être enseignés.</h2>
        </div>
      </div>
    </section>);

}
window.ManifestoIntro = ManifestoIntro;

function DetailsBand() {
  const cards = [
  { num: '28', suffix: 'k', desc: "Abonnés qui suivent mes tests chaque semaine sur YouTube.", grad: GRADIENTS.mj, tag: '// Image' },
  { num: '06', suffix: '', desc: "Formations construites sur mes propres workflows, en français.", grad: GRADIENTS.aifs, tag: '// Vidéo' },
  { num: '∞', suffix: '', desc: "Accès à vie dès le premier achat. Mises à jour incluses.", grad: GRADIENTS.pub, tag: '// Audio' }];

  return (
    <section className="mi-details">
      <div className="mi-container">
        <div className="mi-details-grid">
          {cards.map((c, i) =>
          <div className="mi-detail-card" key={i}>
              <Media gradient={c.grad} aspectRatio="4/3" cornerTag={c.tag} hint="IMAGE/VIDÉO" />
              <div className="mi-detail-info">
                <div className="mi-num">{c.num}{c.suffix && <small>{c.suffix}</small>}</div>
                <p className="mi-detail-desc">{c.desc}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.DetailsBand = DetailsBand;

function AboutSection() {
  return (
    <section className="mi-about">
      <div className="mi-container">
        <div className="mi-about-grid">
          <div className="mi-about-media-wrap">
            <Media src="assets/Qui je suis.jpg" aspectRatio="1/1" />
          </div>
          <div className="mi-about-text">
            <span className="mi-label" style={{ marginBottom: 24 }}>— Qui je suis</span>
            <p>Je m'appelle Mathieu Ibanez. Je suis créateur de contenu YouTube spécialisé dans la création visuelle par IA.</p>
            <p>Je teste les nouveaux outils dès qu'ils sortent, je construis des workflows de A à Z, et je publie tout sur YouTube. Midjourney, Kling, Seedance, Runway — je travaille avec ces outils tous les jours.</p>
            <p>Chaque formation que je vends, je l'ai construite sur un process que j'utilise vraiment sur ma chaîne. Ce n'est pas de la théorie assemblée pour un cours. C'est un workflow qui existait avant d'être enseigné.</p>
          </div>
        </div>
      </div>
    </section>);

}
window.AboutSection = AboutSection;

function ProductsGrid({ variant = 'grid' }) {
  if (variant === 'list') {
    return (
      <section id="products" className="mi-products">
        <div className="mi-container">
          <div className="mi-products-head">
            <div className="mi-products-head-left">
              <span className="mi-label">— Catalogue</span>
              <h2 className="mi-products-h2">Mes formations</h2>
              <p>Des formations construites pour que tu puisses reproduire le workflow chez toi dès le lendemain.</p>
            </div>
          </div>
          <div className="mi-products-list">
            {FORMATIONS.map((f) =>
            <a href={f.href} key={f.id} className="mi-product-row">
                <Media gradient={f.grad} aspectRatio="1/1" cornerTag={f.tag} />
                <div>
                  <h3>{f.title}</h3>
                  <div className="mi-product-desc" style={{ marginTop: 4 }}>Workflow A→Z · accès à vie</div>
                </div>
                <span className="mi-label" style={{ color: 'var(--text-muted)' }}>{f.tag || ''}</span>
              </a>
            )}
          </div>
        </div>
      </section>);

  }
  if (variant === 'mosaic') {
    const positions = ['pos-feat', 'pos-tall', 'pos-wide', 'pos-sm', 'pos-sm', 'pos-sm'];
    return (
      <section id="products" className="mi-products">
        <div className="mi-container">
          <div className="mi-products-head">
            <div className="mi-products-head-left">
              <span className="mi-label">— Catalogue</span>
              <h2 className="mi-products-h2">Mes formations</h2>
              <p>Des formations construites pour que tu puisses reproduire le workflow chez toi dès le lendemain.</p>
            </div>
          </div>
          <div className="mi-products-mosaic">
            {FORMATIONS.map((f, i) =>
            <a href={f.href} key={f.id} className={`mi-product ${positions[i]}`}>
                <Media gradient={f.grad} aspectRatio="auto" cornerTag={f.tag} />
                <div className="mi-product-info">
                  <h3>{f.title}</h3>
                </div>
              </a>
            )}
          </div>
        </div>
      </section>);

  }
  return (
    <section id="products" className="mi-products">
      <div className="mi-container">
        <div className="mi-products-head">
          <div className="mi-products-head-left">
            <span className="mi-label">— Catalogue</span>
            <h2 className="mi-products-h2">Mes formations</h2>
            <p>Des formations construites pour que tu puisses reproduire le workflow chez toi dès le lendemain.</p>
          </div>
        </div>
      </div>
      <div className="mi-products-grid">
        {FORMATIONS.map((f) =>
        <a href={f.href} key={f.id} className="mi-product">
            <div className="mi-product-top">
              <span className="mi-product-top-label">{f.title} —</span>
            </div>
            <div className="mi-product-media-wrap">
              <Media gradient={f.grad} aspectRatio="auto" />
              <span className="mi-product-cta">
                <span>En savoir plus</span>
                <span className="mi-product-cta-arrow">→</span>
              </span>
            </div>
          </a>
        )}
      </div>
    </section>);

}
window.ProductsGrid = ProductsGrid;

function UltimaBlock() {
  return (
    <section className="mi-block">
      <div className="mi-block-grid">
        <div className="mi-block-media-wrap">
          <Media gradient={GRADIENTS.ultima} aspectRatio="auto" cornerTag="// 1 700 mots-clés" hint="VIDÉO — placeholder" />
        </div>
        <div className="mi-block-divider" aria-hidden="true"></div>
        <div className="mi-block-text">
          <span className="mi-label">— Bibliothèque Ultima</span>
          <h2 className="mi-block-h2">1 700 mots-clés pour arrêter de chercher tes prompts au hasard.</h2>
          <p>Quand tu crées avec l'IA, les mots que tu utilises changent tout le résultat. Le problème : si tu ne sais pas qu'un terme existe, tu ne peux pas l'utiliser.</p>
          <p>Ultima, c'est la bibliothèque que j'utilise dans mes propres workflows. 1 700 mots-clés, 40 catégories, bilingue EN/FR, des visuels de référence pour chaque terme. Compatible avec 17 outils.</p>
          <p style={{ color: 'var(--text-soft)' }}>Un achat, un accès à vie.</p>
          <div className="mi-block-cta-row">
            <a href="https://www.ultima.yt/" target="_blank" className="mi-btn mi-btn-fill">Accéder à Ultima ↗</a>
          </div>
        </div>
      </div>
    </section>);

}
window.UltimaBlock = UltimaBlock;

function LabsBlock() {
  return (
    <section className="mi-block">
      <div className="mi-block-grid reverse">
        <div className="mi-block-media-wrap">
          <Media gradient={GRADIENTS.labs} aspectRatio="auto" cornerTag="// IA Labs" hint="IMAGE — placeholder" />
        </div>
        <div className="mi-block-divider" aria-hidden="true"></div>
        <div className="mi-block-text">
          <span className="mi-label">— IA Labs</span>
          <h2 className="mi-block-h2">La communauté. Une entraide active, et du coaching.</h2>
          <p>IA Labs, c'est ma communauté de +400 membres qui apprennent la création IA ensemble.</p>
          <p>Accès à la communauté, aux fondamentaux, à la formation en continue, au Coach IA privé ...</p>
          <div className="mi-block-cta-row">
            <a href="https://www.skool.com/ia-labs" target="_blank" className="mi-btn mi-btn-outline">Rejoindre IA Labs ↗</a>
          </div>
        </div>
      </div>
    </section>);

}
window.LabsBlock = LabsBlock;

function OptionsGrid() {
  const opts = [
  { label: 'Formation', title: 'Voir le catalogue', href: '#products' },
  { label: 'Communauté', title: 'Rejoindre IA Labs', href: 'https://www.skool.com/ia-labs', target: '_blank' },
  { label: 'Bibliothèque', title: 'Découvrir Ultima', href: 'https://www.ultima.yt/', target: '_blank' }];

  return (
    <section id="options" className="mi-options">
      <div className="mi-options-grid">
        <div className="mi-options-left">
          <h2 className="mi-options-h2" style={{ fontSize: "70px" }}>Ce que je propose →</h2>
        </div>
        <div className="mi-options-divider" aria-hidden="true"></div>
        <div className="mi-options-right">
          {opts.map((o, i) =>
          <a key={i} href={o.href} target={o.target} className="mi-option-row">
              <span className="mi-option-row-label">{o.label}</span>
              <span className="mi-option-row-link">{o.title}</span>
            </a>
          )}
        </div>
      </div>
    </section>);

}
window.OptionsGrid = OptionsGrid;