// ─────────────────────────────────────────────────────────────────────────────
// EXPLORA.TV — Homepage Component
// Hero Waouh Effect + Video Platform Grid
// ─────────────────────────────────────────────────────────────────────────────

const { useState, useEffect, useRef, useCallback, useMemo, memo } = React;

// ─── DESIGN TOKENS ───────────────────────────────────────────────────────────
const SERIF = "'Instrument Serif', Georgia, serif";
const SANS  = "'Outfit', -apple-system, sans-serif";

// ─── NAV ─────────────────────────────────────────────────────────────────────
const Nav = memo(function Nav() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      display: 'flex', alignItems: 'center', gap: 32,
      padding: '0 clamp(16px, 4vw, 48px)',
      height: 64,
      background: scrolled ? 'rgba(10,10,15,0.96)' : 'rgba(10,10,15,0)',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : 'none',
      transition: 'all 0.3s ease',
    }}>
      {/* Logo */}
      <a href="/" style={{
        fontFamily: SANS, fontSize: 20, fontWeight: 800,
        letterSpacing: '-0.03em', color: '#F0F0F5', textDecoration: 'none',
        display: 'flex', alignItems: 'center', gap: 2,
      }}>
        explora<span style={{ color: '#2DD4A8' }}>.tv</span>
      </a>

      <div style={{ flex: 1 }} />
    </nav>
  );
});

// ─── HERO ─────────────────────────────────────────────────────────────────────
const Hero = memo(function Hero() {
  const [mounted, setMounted] = useState(false);
  const [mousePos, setMousePos] = useState({ x: 0.5, y: 0.5 });
  const heroRef = useRef(null);

  useEffect(() => {
    const t = setTimeout(() => setMounted(true), 80);
    return () => clearTimeout(t);
  }, []);

  const onMouseMove = useCallback((e) => {
    if (!heroRef.current) return;
    const rect = heroRef.current.getBoundingClientRect();
    setMousePos({
      x: (e.clientX - rect.left) / rect.width,
      y: (e.clientY - rect.top) / rect.height,
    });
  }, []);

  // Stats strip
  const STATS = [
    { value: '127 000', label: 'vues ce mois' },
    { value: '42',      label: 'présentations exclusives' },
    { value: '4.9/5',   label: 'note moyenne' },
    { value: '100%',    label: 'accès gratuit' },
  ];

  // Scrolling ticker of topics
  const TOPICS = [
    '❤️ Artères Libres', '🔮 Éveil de la Conscience', '🔥 Discipline du Guerrier',
    '🌙 Sommeil Profond', '⭐ Expériences de Mort Imminente', '🌱 Jardin Nourricier',
    '🧠 Mémoire Cristalline', '🪬 Synchronicités & Signes', '💪 Résilience Émotionnelle',
    '👁️ Mystères Inexpliqués', '🦋 Libération Métabolique', '🌿 Autonomie Alimentaire',
  ];

  const orb1X = 30 + mousePos.x * 20;
  const orb1Y = 20 + mousePos.y * 15;
  const orb2X = 60 - mousePos.x * 20;
  const orb2Y = 50 - mousePos.y * 15;

  return (
    <section
      ref={heroRef}
      onMouseMove={onMouseMove}
      style={{
        position: 'relative',
        minHeight: '100vh',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: 'clamp(100px, 12vh, 140px) clamp(20px, 5vw, 80px) clamp(60px, 8vh, 100px)',
        overflow: 'hidden',
        textAlign: 'center',
      }}
    >
      {/* ── Ambient orbs ── */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        {/* Orb 1 — teal */}
        <div style={{
          position: 'absolute',
          width: '70vw', height: '70vw', maxWidth: 800, maxHeight: 800,
          left: `${orb1X}%`, top: `${orb1Y}%`,
          transform: 'translate(-50%, -50%)',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(45,212,168,0.14) 0%, transparent 65%)',
          transition: 'left 1.2s ease, top 1.2s ease',
          filter: 'blur(2px)',
        }} />
        {/* Orb 2 — violet */}
        <div style={{
          position: 'absolute',
          width: '50vw', height: '50vw', maxWidth: 600, maxHeight: 600,
          left: `${orb2X}%`, top: `${orb2Y}%`,
          transform: 'translate(-50%, -50%)',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(108,92,231,0.12) 0%, transparent 65%)',
          transition: 'left 1.8s ease, top 1.8s ease',
        }} />
        {/* Orb 3 — gold accent (static) */}
        <div style={{
          position: 'absolute',
          width: '40vw', height: '40vw', maxWidth: 480,
          left: '75%', top: '75%',
          transform: 'translate(-50%, -50%)',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(240,194,122,0.08) 0%, transparent 65%)',
        }} />
        {/* Subtle grid */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `
            linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)
          `,
          backgroundSize: '60px 60px',
          maskImage: 'radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%)',
        }} />
      </div>

      {/* ── Badge ── */}
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        background: 'rgba(45,212,168,0.12)',
        border: '1px solid rgba(45,212,168,0.3)',
        borderRadius: 99, padding: '7px 18px',
        marginBottom: 28, position: 'relative', zIndex: 1,
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(16px)',
        transition: 'all 0.7s ease 0.1s',
      }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#2DD4A8', flexShrink: 0 }} />
        <span style={{ fontFamily: SANS, fontSize: 13, fontWeight: 600, color: '#2DD4A8', letterSpacing: '0.04em' }}>
          Plateforme d'exploration · Accès 100 % gratuit
        </span>
      </div>

      {/* ── Headline ── */}
      <h1 style={{
        fontFamily: SERIF,
        fontSize: 'clamp(38px, 7vw, 88px)',
        fontWeight: 400,
        lineHeight: 1.08,
        letterSpacing: '-0.02em',
        color: '#F0F0F5',
        maxWidth: 900,
        marginBottom: 24,
        position: 'relative', zIndex: 1,
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(24px)',
        transition: 'all 0.8s ease 0.2s',
      }}>
        Explorez ce qu'on ne{' '}
        <em style={{
          fontStyle: 'italic',
          background: 'linear-gradient(135deg, #2DD4A8, #6C5CE7)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          backgroundClip: 'text',
        }}>
          vous dit pas
        </em>
      </h1>

      {/* ── Subheadline ── */}
      <p style={{
        fontFamily: SANS,
        fontSize: 'clamp(16px, 2.2vw, 22px)',
        fontWeight: 400,
        lineHeight: 1.6,
        color: 'rgba(240,240,245,0.6)',
        maxWidth: 640,
        marginBottom: 40,
        position: 'relative', zIndex: 1,
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(20px)',
        transition: 'all 0.8s ease 0.35s',
      }}>
        Santé naturelle, spiritualité, développement personnel, mystères inexpliqués.
        Des présentations exclusives par des experts indépendants — accès libre.
      </p>

      {/* ── CTAs ── */}
      <div style={{
        display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
        marginBottom: 64,
        position: 'relative', zIndex: 1,
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(16px)',
        transition: 'all 0.8s ease 0.5s',
      }}>
        <a href="/viewer" style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'linear-gradient(135deg, #2DD4A8, #1fbd95)',
          color: '#000', borderRadius: 99,
          padding: '14px 32px',
          fontFamily: SANS, fontWeight: 700, fontSize: 16,
          textDecoration: 'none',
          boxShadow: '0 8px 32px rgba(45,212,168,0.3)',
          transition: 'all 0.2s ease',
        }}
          onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
          onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
        >
          ▶ Voir la présentation vedette
        </a>
      </div>

      {/* ── Stats strip ── */}
      <div style={{
        display: 'flex', gap: 'clamp(24px, 4vw, 60px)',
        flexWrap: 'wrap', justifyContent: 'center',
        position: 'relative', zIndex: 1,
        marginBottom: 60,
        opacity: mounted ? 1 : 0,
        transition: 'opacity 0.8s ease 0.7s',
      }}>
        {STATS.map((s, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{
              fontFamily: SERIF,
              fontSize: 'clamp(24px, 3.5vw, 38px)',
              fontWeight: 400, color: '#2DD4A8', lineHeight: 1,
            }}>
              {s.value}
            </div>
            <div style={{
              fontFamily: SANS, fontSize: 12,
              color: 'rgba(255,255,255,0.4)',
              marginTop: 4, letterSpacing: '0.05em',
            }}>
              {s.label}
            </div>
          </div>
        ))}
      </div>

      {/* ── Scrolling topics ticker ── */}
      <div style={{
        position: 'relative', zIndex: 1,
        width: '100%', overflow: 'hidden',
        maskImage: 'linear-gradient(90deg, transparent, black 15%, black 85%, transparent)',
        opacity: mounted ? 0.5 : 0,
        transition: 'opacity 0.8s ease 1s',
      }}>
        <div style={{
          display: 'flex', gap: 16,
          animation: 'tickerScroll 30s linear infinite',
          width: 'max-content',
        }}>
          {[...TOPICS, ...TOPICS].map((topic, i) => (
            <span key={i} style={{
              fontFamily: SANS, fontSize: 13, fontWeight: 500,
              color: 'rgba(255,255,255,0.6)',
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.08)',
              borderRadius: 99, padding: '6px 14px',
              whiteSpace: 'nowrap',
            }}>
              {topic}
            </span>
          ))}
        </div>
      </div>

      {/* ── Scroll indicator ── */}
      <div style={{
        position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
        opacity: mounted ? 0.4 : 0, transition: 'opacity 0.8s ease 1.2s',
        animation: 'bounceDown 2s ease-in-out infinite',
      }}>
        <span style={{ fontFamily: SANS, fontSize: 11, letterSpacing: '0.12em', color: '#fff' }}>
          DÉFILER
        </span>
        <span style={{ color: '#fff', fontSize: 14 }}>↓</span>
      </div>
    </section>
  );
});

// ─── VIDEO CARD ──────────────────────────────────────────────────────────────

const VideoCard = memo(function VideoCard({ video, size = 'normal' }) {
  const [hovered, setHovered] = useState(false);
  const isLarge = size === 'large';

  return (
    <a
      href={video.viewerUrl}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'block', textDecoration: 'none',
        borderRadius: 14,
        overflow: 'hidden',
        background: 'rgba(255,255,255,0.035)',
        border: `1px solid ${hovered ? video.accentColor + '44' : 'rgba(255,255,255,0.07)'}`,
        transition: 'all 0.25s ease',
        transform: hovered ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hovered ? `0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px ${video.accentColor}22` : '0 4px 20px rgba(0,0,0,0.3)',
      }}
    >
      {/* Thumbnail */}
      <div style={{
        position: 'relative',
        paddingBottom: isLarge ? '52%' : '56.25%',
        background: `linear-gradient(135deg, ${video.gradientFrom}, ${video.gradientTo}), #12121A`,
        overflow: 'hidden',
      }}>
        {/* Emoji centered */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', gap: 8,
        }}>
          <div style={{
            fontSize: isLarge ? 64 : 48,
            filter: `drop-shadow(0 0 20px ${video.color}88)`,
            transform: hovered ? 'scale(1.08)' : 'scale(1)',
            transition: 'transform 0.3s ease',
          }}>
            {video.emoji}
          </div>
          {isLarge && (
            <div style={{
              fontFamily: SERIF, fontSize: 15, color: 'rgba(255,255,255,0.5)',
              fontStyle: 'italic',
            }}>
              {video.subtitle}
            </div>
          )}
        </div>

        {/* Play overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'rgba(0,0,0,0.35)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          opacity: hovered ? 1 : 0,
          transition: 'opacity 0.25s ease',
        }}>
          <div style={{
            width: 54, height: 54, borderRadius: '50%',
            background: 'rgba(255,255,255,0.15)',
            backdropFilter: 'blur(8px)',
            border: '2px solid rgba(255,255,255,0.3)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 20, color: '#fff',
            transform: hovered ? 'scale(1)' : 'scale(0.7)',
            transition: 'transform 0.25s ease',
          }}>
            ▶
          </div>
        </div>

        {/* Badges */}
        <div style={{
          position: 'absolute', top: 10, left: 10,
          display: 'flex', gap: 6,
        }}>
          {video.badge && (
            <span style={{
              fontFamily: SANS, fontSize: 10, fontWeight: 800,
              letterSpacing: '0.1em',
              background: video.badgeColor || '#2DD4A8',
              color: '#000', borderRadius: 99,
              padding: '3px 9px',
            }}>
              {video.badge}
            </span>
          )}
          {video.isNew && !video.badge && (
            <span style={{
              fontFamily: SANS, fontSize: 10, fontWeight: 800,
              letterSpacing: '0.1em',
              background: '#FF4757', color: '#fff',
              borderRadius: 99, padding: '3px 9px',
            }}>
              NOUVEAU
            </span>
          )}
        </div>

        {/* Duration */}
        <div style={{
          position: 'absolute', bottom: 8, right: 8,
          fontFamily: SANS, fontSize: 11, fontWeight: 700,
          background: 'rgba(0,0,0,0.75)', color: '#fff',
          borderRadius: 4, padding: '2px 7px',
        }}>
          {video.duration}
        </div>
      </div>

      {/* Info */}
      <div style={{ padding: isLarge ? '18px 20px 20px' : '14px 16px 16px' }}>
        <div style={{
          fontFamily: SANS, fontWeight: 700,
          fontSize: isLarge ? 18 : 15,
          lineHeight: 1.3, color: '#F0F0F5',
          marginBottom: 8,
          display: '-webkit-box',
          WebkitLineClamp: 2,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
        }}>
          {video.title}
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          marginBottom: 10,
        }}>
          <div style={{
            width: 24, height: 24, borderRadius: '50%',
            background: `${video.accentColor}22`,
            border: `1px solid ${video.accentColor}44`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: SANS, fontWeight: 700, fontSize: 9, color: video.accentColor,
            flexShrink: 0,
          }}>
            {video.expertInitials}
          </div>
          <div style={{
            fontFamily: SANS, fontSize: 12,
            color: 'rgba(255,255,255,0.45)',
          }}>
            {video.expert}
          </div>
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: SANS, fontSize: 12,
          color: 'rgba(255,255,255,0.3)',
        }}>
          <span style={{ color: '#FFD93D', fontSize: 11 }}>★ {video.rating}</span>
          <span>·</span>
          <span>{video.views} vues</span>
          <span style={{ marginLeft: 'auto' }}>
            <span style={{
              fontFamily: SANS, fontSize: 11, fontWeight: 600,
              color: video.accentColor,
              background: `${video.accentColor}18`,
              borderRadius: 99, padding: '2px 8px',
            }}>
              {video.category}
            </span>
          </span>
        </div>
      </div>
    </a>
  );
});

// ─── SECTION HEADER ──────────────────────────────────────────────────────────

const SectionHeader = memo(function SectionHeader({ emoji, title, subtitle, accentColor = '#2DD4A8', ctaLabel, ctaHref }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      marginBottom: 20, flexWrap: 'wrap', gap: 12,
    }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
          <span style={{ fontSize: 22 }}>{emoji}</span>
          <h2 style={{
            fontFamily: SERIF,
            fontSize: 'clamp(20px, 2.5vw, 28px)',
            fontWeight: 400, color: '#F0F0F5', lineHeight: 1,
          }}>
            {title}
          </h2>
        </div>
        {subtitle && (
          <p style={{
            fontFamily: SANS, fontSize: 13,
            color: 'rgba(255,255,255,0.4)', paddingLeft: 32,
          }}>
            {subtitle}
          </p>
        )}
      </div>
      {ctaLabel && (
        <a href={ctaHref || '#'} style={{
          fontFamily: SANS, fontSize: 13, fontWeight: 600,
          color: accentColor, textDecoration: 'none',
          display: 'flex', alignItems: 'center', gap: 4,
          transition: 'gap 0.18s ease',
        }}
          onMouseEnter={e => e.currentTarget.style.gap = '8px'}
          onMouseLeave={e => e.currentTarget.style.gap = '4px'}
        >
          {ctaLabel} →
        </a>
      )}
    </div>
  );
});

// ─── FEATURED BANNER ─────────────────────────────────────────────────────────

const FeaturedBanner = memo(function FeaturedBanner({ video }) {
  const [hovered, setHovered] = useState(false);

  return (
    <a
      href={video.viewerUrl}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: 'clamp(1fr, 50%, 1fr) 1fr',
        gap: 0,
        borderRadius: 20,
        overflow: 'hidden',
        background: '#12121A',
        border: `1px solid ${hovered ? video.accentColor + '44' : 'rgba(255,255,255,0.07)'}`,
        textDecoration: 'none',
        transition: 'all 0.3s ease',
        boxShadow: hovered ? `0 32px 80px rgba(0,0,0,0.6)` : '0 8px 40px rgba(0,0,0,0.4)',
        marginBottom: 48,
      }}
    >
      {/* Left : visual */}
      <div style={{
        position: 'relative',
        background: `radial-gradient(circle at 40% 50%, ${video.color}25, transparent 60%), #0D0D16`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        minHeight: 'clamp(220px, 28vw, 380px)',
        overflow: 'hidden',
      }}>
        <div style={{
          fontSize: 'clamp(72px, 10vw, 120px)',
          filter: `drop-shadow(0 0 40px ${video.color}88)`,
          transform: hovered ? 'scale(1.06)' : 'scale(1)',
          transition: 'transform 0.5s ease',
        }}>
          {video.emoji}
        </div>
        {/* Play button */}
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: 'rgba(0,0,0,0.2)',
          opacity: hovered ? 1 : 0, transition: 'opacity 0.3s ease',
        }}>
          <div style={{
            width: 72, height: 72, borderRadius: '50%',
            background: video.accentColor,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 26, color: '#000', fontWeight: 700,
            boxShadow: `0 8px 32px ${video.accentColor}66`,
            transform: hovered ? 'scale(1)' : 'scale(0.7)',
            transition: 'transform 0.3s ease',
          }}>
            ▶
          </div>
        </div>
        {/* LIVE badge */}
        <div style={{
          position: 'absolute', top: 16, left: 16,
          display: 'flex', alignItems: 'center', gap: 6,
          background: 'rgba(255,56,56,0.9)', borderRadius: 99,
          padding: '5px 12px',
          fontFamily: SANS, fontSize: 11, fontWeight: 800,
          color: '#fff', letterSpacing: '0.12em',
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%', background: '#fff',
            animation: 'livePulse 1.4s ease-in-out infinite',
          }} />
          LIVE
        </div>
      </div>

      {/* Right : info */}
      <div style={{
        padding: 'clamp(28px, 4vw, 48px)',
        display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 16,
      }}>
        <span style={{
          fontFamily: SANS, fontSize: 11, fontWeight: 700,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: video.accentColor,
        }}>
          Présentation vedette
        </span>
        <h2 style={{
          fontFamily: SERIF,
          fontSize: 'clamp(22px, 3vw, 36px)',
          fontWeight: 400, lineHeight: 1.2,
          color: '#F0F0F5',
        }}>
          {video.title}
        </h2>
        <p style={{
          fontFamily: SANS, fontSize: 15,
          color: 'rgba(255,255,255,0.5)', lineHeight: 1.6,
        }}>
          {video.description}
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: `${video.accentColor}22`,
            border: `2px solid ${video.accentColor}55`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: SANS, fontWeight: 700, fontSize: 12,
            color: video.accentColor,
          }}>
            {video.expertInitials}
          </div>
          <div>
            <div style={{ fontFamily: SANS, fontWeight: 600, fontSize: 14, color: '#F0F0F5' }}>
              {video.expert}
            </div>
            <div style={{ fontFamily: SANS, fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>
              {video.expertTitle}
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
          <span style={{
            fontFamily: SANS, fontSize: 13, color: 'rgba(255,255,255,0.4)',
          }}>
            ⏱ {video.duration}
          </span>
          <span style={{ fontFamily: SANS, fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>·</span>
          <span style={{ fontFamily: SANS, fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>
            👁 {video.views} personnes
          </span>
          <span style={{
            marginLeft: 'auto',
            fontFamily: SANS, fontSize: 13, fontWeight: 700,
            color: video.accentColor,
            display: 'flex', alignItems: 'center', gap: 4,
          }}>
            Regarder maintenant →
          </span>
        </div>
      </div>
    </a>
  );
});

// ─── FOOTER ──────────────────────────────────────────────────────────────────

const Footer = memo(function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid rgba(255,255,255,0.06)',
      padding: 'clamp(32px, 5vw, 60px) clamp(20px, 5vw, 80px)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      flexWrap: 'wrap', gap: 20,
    }}>
      <div>
        <div style={{
          fontFamily: SANS, fontSize: 18, fontWeight: 800,
          letterSpacing: '-0.02em', color: '#F0F0F5', marginBottom: 6,
        }}>
          explora<span style={{ color: '#2DD4A8' }}>.tv</span>
        </div>
        <div style={{
          fontFamily: SANS, fontSize: 12, color: 'rgba(255,255,255,0.3)',
          maxWidth: 340, lineHeight: 1.5,
        }}>
          Plateforme de présentations exclusives par des experts indépendants. Contenu éducatif uniquement.
        </div>
      </div>
      <div style={{
        fontFamily: SANS, fontSize: 12,
        color: 'rgba(255,255,255,0.2)',
      }}>
        © 2026 Explora.tv
      </div>
    </footer>
  );
});

// ─── HOMEPAGE ────────────────────────────────────────────────────────────────

function Homepage() {
  return (
    <div style={{ minHeight: '100vh', background: '#0A0A0F' }}>
      <Nav />
      <Hero />
      <Footer />
    </div>
  );
}

window.__Homepage = Homepage;