// Shared components for all pages of mathieuibanez.com
// Header, Footer, Media wrapper, gradients, formation list

const GRADIENTS = {
  aifs: 'linear-gradient(135deg,#0D1221 0%,#1A2347 30%,#2A3D6E 60%,#4A5E8C 100%)',
  mj: 'linear-gradient(135deg,#1F0F1F 0%,#3A1F47 30%,#6E2A66 60%,#B85088 100%)',
  pub: 'linear-gradient(135deg,#221A0A 0%,#4A3A1F 30%,#8C5E2A 60%,#C4862A 100%)',
  photo: 'linear-gradient(135deg,#1F1F1F 0%,#4A2D1F 30%,#7C4A2D 60%,#B86A47 100%)',
  nodal: 'linear-gradient(135deg,#0A1F1A 0%,#1F4A3A 30%,#2D7C5E 60%,#5EB89A 100%)',
  vendre: 'linear-gradient(135deg,#1A1A1A 0%,#2D2D2D 100%)',
  ultima: 'linear-gradient(135deg,#1F1B2E 0%,#3D3450 35%,#6A5A85 70%,#A089B5 100%)',
  labs: 'linear-gradient(135deg,#0D1F2A 0%,#1F3D4A 35%,#3A6680 70%,#7AAEC4 100%)',
  about: 'linear-gradient(135deg,#1F1F1F 0%,#3A3024 35%,#6E5A3F 70%,#A89070 100%)',
  manifest: 'linear-gradient(135deg,#0F1A1F 0%,#243A47 35%,#476680 70%,#8FA8C0 100%)',
  hero: 'linear-gradient(135deg,#1A1828 0%,#2C2540 35%,#4A3D5A 65%,#6B5874 100%)'
};
window.GRADIENTS = GRADIENTS;

const FORMATIONS = [
{ id: 'aifs', title: 'AI Film Studio', price: '297 €', tag: 'Best-seller', grad: GRADIENTS.aifs, href: 'AI Film Studio.html' },
{ id: 'mj', title: 'Midjourney', price: '197 €', tag: null, grad: GRADIENTS.mj, href: '#' },
{ id: 'pub', title: 'Publicité Facile', price: '147 €', tag: null, grad: GRADIENTS.pub, href: '#' },
{ id: 'photo', title: 'Photos Culinaires', price: '47 €', tag: null, grad: GRADIENTS.photo, href: '#' },
{ id: 'nodal', title: 'Formation Nodale', price: 'Bientôt', tag: 'En cours', grad: GRADIENTS.nodal, soft: true, href: '#' },
{ id: 'vendre', title: 'Vendre ses compétences', price: 'Bientôt', tag: 'En cours', grad: GRADIENTS.vendre, soft: true, href: '#' }];

window.FORMATIONS = FORMATIONS;

function Media({ children, src, gradient, aspectRatio = '4/5', cornerTag, animate = true, hint, className = '', style = {}, onClick }) {
  return (
    <div
      className={`mi-media ${animate ? 'mi-media-anim' : ''} ${className}`}
      onClick={onClick}
      style={{ aspectRatio, background: src ? 'none' : gradient, ...style }}>
      {src ? <img src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
      {cornerTag ? <span className="mi-corner-tag">{cornerTag}</span> : null}
      {hint ? <span className="mi-media-hint">{hint}</span> : null}
      {children}
    </div>);

}
window.Media = Media;

function Header({ active }) {
  const link = (k, label, href) =>
  <a href={href} className={active === k ? 'is-active' : ''}>{label}</a>;

  return (
    <header className="mi-header">
      <div className="mi-nav">
        <div className="mi-nav-zone mi-nav-brand">
          <a href="#" className="mi-logo">Mathieu Ibanez</a>
        </div>
        <nav className="mi-nav-zone mi-nav-center">
          {link('formations', 'Formations', '#products')}
          {link('newsletter', 'Newsletter', '#')}
        </nav>
        <nav className="mi-nav-zone mi-nav-right" style={{ padding: "0px 29px 0px 28px" }}>
          <a href="https://www.ultima.yt/" target="_blank">Ultima ↗</a>
          <a href="https://www.skool.com/ia-labs" target="_blank">IA Labs ↗</a>
        </nav>
      </div>
    </header>);

}
window.Header = Header;

function Footer() {
  return (
    <footer className="mi-footer">
      <div className="mi-footer-top">
        <div className="mi-footer-brand">
          <div className="mi-logo" style={{ fontSize: "20px", height: "28px" }}>Mathieu Ibanez</div>
          <p>Je teste les outils IA créatifs et j'enseigne ce que je pratique. Achat unique, accès à vie, mises à jour incluses.</p>
        </div>
        <div className="mi-footer-mid"></div>
        <div className="mi-footer-cols">
          <div className="mi-footer-col">
            <h4>Formations</h4>
            <ul>
              <li><a href="AI Film Studio.html">AI Film Studio</a></li>
              <li><a href="#">Midjourney</a></li>
              <li><a href="#">Publicité Facile</a></li>
              <li><a href="#">Photos Culinaires</a></li>
            </ul>
          </div>
          <div className="mi-footer-col">
            <h4>Ressources</h4>
            <ul>
              <li><a href="https://www.ultima.yt/" target="_blank">Ultima</a></li>
              <li><a href="https://www.skool.com/ia-labs" target="_blank">IA Labs</a></li>
              <li><a href="#">Newsletter</a></li>
            </ul>
          </div>
          <div className="mi-footer-col">
            <h4>Studio</h4>
            <ul>
              <li><a href="#">Press kit</a></li>
              <li><a href="#">CGV</a></li>
              <li><a href="#">Mentions légales</a></li>
            </ul>
          </div>
          <div className="mi-footer-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="#">hello@mathieuibanez.com</a></li>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">YouTube</a></li>
              <li><a href="#">Facebook</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div className="mi-footer-marquee">
        <div className="mi-footer-marquee-track">
          <span>Je teste, j'enseigne, tu crées.</span>
          <span>—</span>
          <span>Achat unique. Accès à vie.</span>
          <span>—</span>
          <span>Mathieu Ibanez</span>
          <span>—</span>
          <span>Je teste, j'enseigne, tu crées.</span>
          <span>—</span>
          <span>Achat unique. Accès à vie.</span>
          <span>—</span>
          <span>Mathieu Ibanez</span>
          <span>—</span>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;