const { useState, useEffect, useRef } = React;

const MobileCtx = React.createContext(false);
const useMobile = () => React.useContext(MobileCtx);
function useIsMobile() {
  const [m, setM] = useState(() => window.innerWidth <= 768);
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 768px)');
    const h = (e) => setM(e.matches);
    mq.addEventListener('change', h);
    return () => mq.removeEventListener('change', h);
  }, []);
  return m;
}

// World Cup palette — gold (trophy), green (pitch), red (intensity)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "classic",
  "showStripes": true,
  "videoUrl": "worldcup26.mp4",
  "brandName": "4k",
  "brandSuffix": "max"
} /*EDITMODE-END*/;

const PALETTES = {
  classic: { // Trophy gold + pitch green
    bg: '#0a0e0a', bgSoft: '#111914', ink: '#f5f1e6', inkDim: '#a9a496',
    accent1: '#f5c518', accent2: '#00a86b', accent3: '#d8232a',
    label1: 'GOLD', label2: 'GREEN', label3: 'RED'
  },
  desert: { // Qatar-inspired sand & maroon
    bg: '#0c0806', bgSoft: '#1a120e', ink: '#f3e7d3', inkDim: '#b09f88',
    accent1: '#e8b86b', accent2: '#8a1538', accent3: '#3a7d44',
    label1: 'SAND', label2: 'MAROON', label3: 'PITCH'
  },
  americas: { // 2026 host nations — red/white/blue + maple
    bg: '#080a14', bgSoft: '#10142a', ink: '#f1f1f5', inkDim: '#9aa0b4',
    accent1: '#ffffff', accent2: '#1d4ed8', accent3: '#dc2626',
    label1: 'WHITE', label2: 'BLUE', label3: 'RED'
  }
};

// ─── header ───────────────────────────────────────────────────────────────
function Header({ p, brand, activeKey = 'nav.home' }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  const [menuOpen, setMenuOpen] = useState(false);
  const navItems = [
    { key: 'nav.home',      href: '/' },
    { key: 'nav.plans',     href: 'Plans.html' },
    { key: 'nav.referral',  href: '/#referral' },
    { key: 'nav.resellers', href: 'Resellers.html' },
    { key: 'nav.setup',     href: 'Setup.html' },
    { key: 'nav.contact',   href: '/#contact' },
  ];
  const activeIdx = Math.max(0, navItems.findIndex((n) => n.key === activeKey));

  if (isMobile) {
    return (
      <header style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 50,
        padding: '14px 20px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderBottom: `1px solid ${p.accent1}22`,
        background: 'linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0))'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <BrandMark p={p} />
          <div className="display" style={{ fontSize: 20, letterSpacing: '0.04em' }}>
            {brand.name}<span style={{ color: p.accent1 }}>{brand.suffix}</span>
          </div>
        </div>
        <button
          onClick={() => setMenuOpen(!menuOpen)}
          style={{
            background: 'transparent', border: `1px solid ${p.ink}44`,
            color: p.ink, width: 40, height: 40, borderRadius: 6,
            cursor: 'pointer', display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 5, padding: 10,
          }}
        >
          <span style={{ width: 18, height: 2, background: p.ink, borderRadius: 2, display: 'block' }} />
          <span style={{ width: 18, height: 2, background: p.ink, borderRadius: 2, display: 'block' }} />
          <span style={{ width: 18, height: 2, background: p.ink, borderRadius: 2, display: 'block' }} />
        </button>
        {menuOpen && (
          <div style={{
            position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
            background: p.bg + 'f5', zIndex: 100,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start',
            paddingTop: 100, paddingBottom: 40,
            gap: 36, overflowY: 'auto',
          }}>
            <button
              onClick={() => setMenuOpen(false)}
              style={{
                position: 'absolute', top: 18, right: 20,
                background: 'transparent', border: `1px solid ${p.ink}33`,
                color: p.ink, width: 40, height: 40, borderRadius: 6,
                cursor: 'pointer', fontSize: 20,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}
            >✕</button>
            {navItems.map((n, i) => (
              <a
                key={n.key}
                href={n.href}
                onClick={() => setMenuOpen(false)}
                className="display"
                style={{
                  fontSize: 36, letterSpacing: '0.06em',
                  color: i === activeIdx ? p.accent1 : p.ink,
                  textDecoration: 'none',
                }}
              >{t(n.key)}</a>
            ))}
            <div style={{ marginTop: 16 }}>
              <LanguageSwitcher p={p} inline />
            </div>
          </div>
        )}
      </header>
    );
  }

  return (
    <header style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 50,
      padding: '24px 56px',
      display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
      borderBottom: `1px solid ${p.accent1}22`,
      background: 'linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0))'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <BrandMark p={p} />
        <div className="display" style={{ fontSize: 26, letterSpacing: '0.04em' }}>
          {brand.name}<span style={{ color: p.accent1 }}>{brand.suffix}</span>
        </div>
      </div>

      <NavMenu p={p} navItems={navItems} t={t} initialActive={activeIdx} />

      <div style={{ display: 'flex', justifyContent: 'flex-end' }} />
    </header>);
}

function NavMenu({ p, navItems, t, initialActive = 0 }) {
  const navRef = React.useRef(null);
  const itemRefs = React.useRef([]);
  const [activeIdx, setActiveIdx] = React.useState(initialActive);   // current "selected" tab
  const [hoverIdx, setHoverIdx] = React.useState(null);  // mouse target
  const [indicator, setIndicator] = React.useState({ left: 0, width: 0, ready: false });

  // Position the indicator under whichever item is currently highlighted.
  const targetIdx = hoverIdx ?? activeIdx;
  React.useLayoutEffect(() => {
    const el = itemRefs.current[targetIdx];
    const nav = navRef.current;
    if (!el || !nav) return;
    const r = el.getBoundingClientRect();
    const nr = nav.getBoundingClientRect();
    setIndicator({ left: r.left - nr.left, width: r.width, ready: true });
  }, [targetIdx, navItems.length]);

  return (
    <nav
      ref={navRef}
      onMouseLeave={() => setHoverIdx(null)}
      style={{
        position: 'relative',
        display: 'flex', gap: 38,
        fontSize: 12, fontWeight: 600, letterSpacing: '0.18em',
      }}
    >
      {/* Glow trail behind the hovered item */}
      <div style={{
        position: 'absolute',
        left: indicator.left, width: indicator.width,
        top: -6, bottom: -6,
        background: hoverIdx !== null
          ? `radial-gradient(ellipse at center, ${p.accent1}26 0%, transparent 75%)`
          : 'transparent',
        opacity: indicator.ready ? 1 : 0,
        transition: 'left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s',
        pointerEvents: 'none',
        borderRadius: 4,
      }} />

      {/* Sliding underline */}
      <div style={{
        position: 'absolute',
        left: indicator.left, width: indicator.width,
        bottom: -2, height: 2,
        background: p.accent1,
        opacity: (indicator.ready && hoverIdx !== null) ? 1 : 0,
        transition: 'left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s',
        boxShadow: hoverIdx !== null ? `0 0 12px ${p.accent1}` : 'none',
        pointerEvents: 'none',
      }} />

      {navItems.map((n, i) => {
        const isHover = hoverIdx === i;
        const isActive = activeIdx === i;
        const dim = hoverIdx !== null && !isHover;
        return (
          <a
            key={n.key}
            href={n.href}
            ref={(el) => itemRefs.current[i] = el}
            onMouseEnter={() => setHoverIdx(i)}
            onClick={() => setActiveIdx(i)}
            style={{
              position: 'relative',
              paddingBottom: 6,
              color: isHover ? p.ink : p.inkDim,
              opacity: dim ? 0.5 : 1,
              transform: isHover ? 'translateY(-1px)' : 'translateY(0)',
              transition: 'color 0.2s, opacity 0.2s, transform 0.2s',
              textShadow: isHover ? `0 0 18px ${p.accent1}88` : 'none',
            }}
          >
            {t(n.key)}
          </a>
        );
      })}
    </nav>
  );
}

function BrandMark({ p }) {
  // Original mark — hexagonal football-panel inspired
  return (
    <svg width="34" height="34" viewBox="0 0 34 34">
      <circle cx="17" cy="17" r="15.5" fill="none" stroke={p.accent1} strokeWidth="1.5" />
      <polygon points="17,8 23,12 21,19 13,19 11,12" fill={p.accent1} />
      <line x1="17" y1="8" x2="17" y2="2" stroke={p.accent1} strokeWidth="1.5" />
      <line x1="23" y1="12" x2="29" y2="9" stroke={p.accent1} strokeWidth="1.5" />
      <line x1="11" y1="12" x2="5" y2="9" stroke={p.accent1} strokeWidth="1.5" />
      <line x1="21" y1="19" x2="26" y2="26" stroke={p.accent1} strokeWidth="1.5" />
      <line x1="13" y1="19" x2="8" y2="26" stroke={p.accent1} strokeWidth="1.5" />
    </svg>);

}

const COUNTRY_WA_MSGS = {
  DE: 'Hallo, ich möchte kostenlos testen',
  AT: 'Hallo, ich möchte kostenlos testen',
  CH: 'Hallo, ich möchte kostenlos testen',
  ES: 'Hola, quiero una prueba gratuita',
  MX: 'Hola, quiero una prueba gratuita',
  AR: 'Hola, quiero una prueba gratuita',
  CO: 'Hola, quiero una prueba gratuita',
  CL: 'Hola, quiero una prueba gratuita',
  PE: 'Hola, quiero una prueba gratuita',
  FR: 'Bonjour, je veux un test gratuit',
  BE: 'Bonjour, je veux un test gratuit',
  MA: 'Bonjour, je veux un test gratuit',
  PT: 'Olá, quero um teste gratuito',
  BR: 'Olá, quero um teste gratuito',
  IT: 'Ciao, voglio una prova gratuita',
  NL: 'Hallo, ik wil een gratis test',
  RU: 'Привет, я хочу бесплатный тест',
  UA: 'Привет, я хочу бесплатный тест',
  TR: 'Merhaba, ücretsiz test istiyorum',
  SA: 'مرحباً، أريد اختباراً مجانياً',
  AE: 'مرحباً، أريد اختباراً مجانياً',
  EG: 'مرحباً، أريد اختباراً مجانياً',
  JP: 'こんにちは、無料テストを希望します',
  CN: '您好，我想要免费测试',
  TW: '您好，我想要免費測試',
  HK: '您好，我想要免費測試',
};

function useWaMsg() {
  const [msg, setMsg] = useState('Hi, I want a free test');
  useEffect(() => {
    fetch('https://ipapi.co/country/')
      .then((r) => r.text())
      .then((country) => {
        const c = country.trim();
        if (COUNTRY_WA_MSGS[c]) setMsg(COUNTRY_WA_MSGS[c]);
      })
      .catch(() => {});
  }, []);
  return msg;
}

// ─── hero ─────────────────────────────────────────────────────────────────
function Hero({ p, tweaks, brand }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  const waMsg = useWaMsg();
  return (
    <section style={{ position: 'relative', height: '100vh', minHeight: isMobile ? 600 : 760, overflow: 'hidden' }}>
      {/* Video background */}
      <video
        key={tweaks.videoUrl}
        autoPlay muted loop playsInline
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', filter: 'saturate(0.85) contrast(1.05)'
        }}>
        
        <source src={tweaks.videoUrl} type="video/mp4" />
      </video>

      {/* Gradient overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${p.bg}cc 0%, ${p.bg}88 30%, ${p.bg}cc 70%, ${p.bg} 100%)`
      }} />

      {/* Stripes overlay (CRT-ish) */}
      {tweaks.showStripes &&
      <div style={{
        position: 'absolute', inset: 0,
        background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px)',
        mixBlendMode: 'multiply', opacity: 0.5
      }} />
      }

      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at center, transparent 30%, ${p.bg} 100%)`,
        opacity: 0.7
      }} />


      {/* Content */}
      <div style={{
        position: 'relative', zIndex: 10,
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'center', textAlign: 'center',
        padding: isMobile ? '0 20px' : '0 32px',
        minHeight: isMobile ? '100vh' : '866px',
      }}>
        {/* Tagline above */}
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.32em', color: p.accent1,
          marginBottom: 28, display: 'flex', alignItems: 'center', gap: 16
        }}>
          <span style={{ width: 40, height: 1, background: p.accent1 }} />
          {t('hero.tagline')}
          <span style={{ width: 40, height: 1, background: p.accent1 }} />
        </div>

        {/* Wordmark */}
        <h1 className="display" style={{
          margin: 0, fontSize: isMobile ? 'clamp(72px, 22vw, 120px)' : 'clamp(80px, 14vw, 220px)',
          lineHeight: 0.86, letterSpacing: '-0.01em',
          textShadow: `0 6px 40px ${p.bg}`, maxWidth: '100%',
        }}>
          <span style={{ color: p.accent2, opacity: 0.9 }}>{brand.name}</span>
          <span style={{ color: p.ink }}>{brand.suffix}</span>
        </h1>

        {/* CTAs */}
        <div style={{ marginTop: isMobile ? 28 : 40, display: 'flex', gap: isMobile ? 10 : 16, flexDirection: isMobile ? 'column' : 'row', width: isMobile ? '100%' : 'auto' }}>
          <CTAButton p={p} variant="primary" label={t('cta.trial')} href={`https://wa.me/447898158799?text=${encodeURIComponent(waMsg)}`} fullWidth={isMobile} />
          <CTAButton p={p} variant="ghost" label={t('cta.packages')} href="Plans.html" fullWidth={isMobile} />
        </div>

        {/* Stats row */}
        <div style={{
          marginTop: isMobile ? 28 : 64, display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(3, 1fr)' : 'repeat(3, auto)',
          gap: isMobile ? 24 : 56, alignItems: 'end',
          width: isMobile ? '100%' : 'auto',
          maxWidth: isMobile ? '100%' : 'none',
        }}>
          <Stat p={p} value="52,000+" label={t('stat.channels')} color={p.accent1} />
          <Stat p={p} value="200,000+" label={t('stat.films')} color={p.accent2} />
          <Stat p={p} value="4K / 8K" label={t('stat.uhd')} color={p.ink} />
        </div>

        {/* Footer line */}
        {!isMobile && (
          <div style={{
            position: 'absolute', bottom: 36, left: 0, right: 0,
            display: 'flex', justifyContent: 'center', gap: 40,
            fontSize: 10, fontWeight: 600, letterSpacing: '0.32em', color: p.inkDim
          }}>
            <span>{t('foot.devices')}</span><span style={{ color: p.accent1 }}>●</span>
            <span>{t('foot.buffer')}</span><span style={{ color: p.accent2 }}>●</span>
            <span>{t('foot.activation')}</span><span style={{ color: p.accent3 }}>●</span>
            <span>{t('foot.support')}</span>
          </div>
        )}
      </div>
    </section>);

}

function CornerTicker({ p }) {
  const isMobile = useMobile();
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const hh = String(time.getHours()).padStart(2, '0');
  const mm = String(time.getMinutes()).padStart(2, '0');
  const ss = String(time.getSeconds()).padStart(2, '0');

  return (
    <>
      <div className="mono" style={{
        position: 'absolute', top: isMobile ? 72 : 110, left: isMobile ? 20 : 56, zIndex: 20,
        fontSize: 11, color: p.inkDim, letterSpacing: '0.18em'
      }}>
        <div style={{ color: p.accent3, fontWeight: 600 }}>● LIVE</div>
        <div style={{ marginTop: 6 }}>{hh}:{mm}:{ss} GMT</div>
        {!isMobile && <div style={{ marginTop: 4, opacity: 0.6 }}>CH 001 — STADIUM</div>}
      </div>

      <div className="mono" style={{
        position: 'absolute', top: isMobile ? 72 : 110, right: isMobile ? 20 : 56, zIndex: 20,
        fontSize: 11, color: p.inkDim, letterSpacing: '0.18em', textAlign: 'right'
      }}>
        <div>SIGNAL <span style={{ color: p.accent2 }}>●●●●●</span></div>
        <div style={{ marginTop: 6 }}>BITRATE 48.0 Mbps</div>
        {!isMobile && <div style={{ marginTop: 4, opacity: 0.6 }}>HDR · DOLBY 5.1</div>}
      </div>
    </>);
}

function CTAButton({ p, variant, label, sub, href, onClick, fullWidth }) {
  const isPrimary = variant === 'primary';
  const isMobile = useMobile();
  const handleClick = (e) => {
    if (onClick) return onClick(e);
    if (!href) return;
    if (href.startsWith('#')) {
      e.preventDefault();
      const el = document.querySelector(href);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else if (href.startsWith('http')) {
      window.open(href, '_blank', 'noopener,noreferrer');
    } else {
      window.location.href = href;
    }
  };
  return (
    <button onClick={handleClick} style={{
      background: isPrimary ? p.accent1 : 'transparent',
      color: isPrimary ? p.bg : p.ink,
      border: isPrimary ? 'none' : `1.5px solid ${p.ink}`,
      padding: isMobile ? '13px 22px' : '18px 36px',
      borderRadius: 4, cursor: 'pointer',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', gap: 4,
      fontFamily: 'inherit', minWidth: fullWidth ? 0 : 220,
      width: fullWidth ? '100%' : 'auto',
      transition: 'transform 0.15s'
    }}
    onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-2px)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}>
      <span style={{ fontSize: isMobile ? 12 : 14, fontWeight: 800, letterSpacing: '0.18em' }}>{label}</span>
      {sub && !isMobile && <span className="mono" style={{ fontSize: 9, letterSpacing: '0.22em', opacity: 0.7 }}>{sub}</span>}
    </button>);
}

function Stat({ p, value, label, color }) {
  const isMobile = useMobile();
  return (
    <div style={{ textAlign: 'center', position: 'relative', padding: isMobile ? '6px 0' : '0' }}>
      <span style={{ position: 'absolute', top: -6, left: isMobile ? -5 : -12, width: isMobile ? 8 : 10, height: isMobile ? 8 : 10, borderTop: `1px solid ${color}`, borderLeft: `1px solid ${color}` }} />
      <span style={{ position: 'absolute', top: -6, right: isMobile ? -5 : -12, width: isMobile ? 8 : 10, height: isMobile ? 8 : 10, borderTop: `1px solid ${color}`, borderRight: `1px solid ${color}` }} />
      <span style={{ position: 'absolute', bottom: -6, left: isMobile ? -5 : -12, width: isMobile ? 8 : 10, height: isMobile ? 8 : 10, borderBottom: `1px solid ${color}`, borderLeft: `1px solid ${color}` }} />
      <span style={{ position: 'absolute', bottom: -6, right: isMobile ? -5 : -12, width: isMobile ? 8 : 10, height: isMobile ? 8 : 10, borderBottom: `1px solid ${color}`, borderRight: `1px solid ${color}` }} />
      <div className="display" style={{ fontSize: isMobile ? 24 : 56, lineHeight: 1, color }}>{value}</div>
      <div className="mono" style={{
        fontSize: isMobile ? 8 : 9, letterSpacing: isMobile ? '0.1em' : '0.32em',
        color: p.inkDim, marginTop: isMobile ? 4 : 8,
        textTransform: 'uppercase', lineHeight: 1.3,
      }}>{label}</div>
    </div>);

}

// ─── plans ────────────────────────────────────────────────────────────────
// Base 1-device totals (USD). Each extra device DOUBLES the total.
const PRICE_MATRIX = {
  3:  [35.99,  59.99,  89.99,  114.99, 139.99],
  6:  [49.99,  84.99,  129.99, 169.99, 204.99],
  12: [69.99,  129.99, 204.99, 269.99, 329.99],
  24: [119.99, 259.99, 369.99, 459.99, 549.99],
};

const SAVE_MATRIX = {
  3:  [22, 25, 18, 18, 18],
  6:  [31, 29, 28, 26, 27],
  12: [44, 42, 40, 39, 39],
  24: [55, 54, 53, 51, 52],
};

const PLAN_TIERS = [
  { months: 3  },
  { months: 6  },
  { months: 12, best: true, capPlayer: '1 YEAR FREE' },
  { months: 24, capPlayer: 'LIFETIME' },
];

function Plans({ p }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  const [devices, setDevices] = React.useState(1);

  return (
    <section id="plans" style={{
      padding: isMobile ? '60px 20px' : '100px 56px', background: p.bg, position: 'relative',
    }}>
      {/* Device tabs */}
      <DeviceTabs p={p} devices={devices} setDevices={setDevices} />

      {/* Tier cards */}
      <div style={{
        marginTop: 44, display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
        gap: 20, maxWidth: 1240, margin: '44px auto 0',
      }}>
        {PLAN_TIERS.map((tier) => (
          <TierCard key={tier.months} p={p} tier={tier} devices={devices} />
        ))}
      </div>

      {/* Trust strip */}
      <div className="mono" style={{
        marginTop: 56, textAlign: 'center', fontSize: 11,
        letterSpacing: '0.28em', color: p.inkDim,
      }}>
        ✦ {t('plans.trust1')} · {t('plans.trust2')} · {t('plans.trust3')} ✦
      </div>
    </section>
  );
}

function DeviceTabs({ p, devices, setDevices }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  return (
    <div style={{
      marginTop: 44, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
    }}>
      {isMobile && (
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.28em', color: p.inkDim }}>
          {t('plans.devices')}
        </div>
      )}
      <div style={{
        display: 'flex', padding: 4,
        background: p.bgSoft,
        border: `1px solid ${p.ink}14`,
        borderRadius: 999,
      }}>
        {[1, 2, 3, 4, 5].map((n) => {
          const active = devices === n;
          return (
            <button key={n}
              onClick={() => setDevices(n)}
              style={{
                position: 'relative',
                padding: isMobile ? '10px 16px' : '11px 26px',
                minWidth: isMobile ? 56 : 116,
                border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                fontSize: 13, fontWeight: 600, letterSpacing: '0.01em',
                color: active ? p.bg : p.ink,
                background: active
                  ? `linear-gradient(90deg, ${p.accent2}, ${p.accent1})`
                  : 'transparent',
                borderRadius: 999,
                boxShadow: active ? `0 6px 22px ${p.accent1}55` : 'none',
                transition: 'background 0.2s, color 0.2s, box-shadow 0.2s',
              }}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.color = p.accent1; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.color = p.ink; }}
            >
              {isMobile ? n : `${n} ${n === 1 ? t('plans.device') : t('plans.devicesPl')}`}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function TierCard({ p, tier, devices }) {
  const { t } = useI18n();
  const [hover, setHover] = React.useState(false);
  const [btnHover, setBtnHover] = React.useState(false);
  const total = PRICE_MATRIX[tier.months][devices - 1];
  const perMonth = +(total / tier.months).toFixed(2);
  const savePct = SAVE_MATRIX[tier.months][devices - 1];
  const fmt = (n) => '€' + n.toFixed(2);

  const bullets = [
    t('tier.b1'), t('tier.b2'), t('tier.b3'),
  ];

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: tier.best
          ? `linear-gradient(180deg, ${p.accent1}10, ${p.bgSoft})`
          : p.bgSoft,
        border: `1.5px solid ${tier.best ? p.accent1 : (hover ? p.ink + '33' : p.ink + '15')}`,
        borderRadius: 18,
        padding: '36px 28px 28px',
        transition: 'border-color 0.2s, transform 0.25s, box-shadow 0.25s',
        transform: hover ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: tier.best
          ? `0 24px 50px -20px ${p.accent1}66`
          : (hover ? `0 18px 40px -22px #000c` : 'none'),
      }}
    >
      {tier.best && (
        <div className="mono" style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          background: `linear-gradient(90deg, ${p.accent2}, ${p.accent1})`,
          color: p.bg, padding: '5px 16px', borderRadius: 999,
          fontSize: 9, fontWeight: 800, letterSpacing: '0.22em',
          whiteSpace: 'nowrap',
        }}>★ {t('tier.best')}</div>
      )}

      <div className="mono" style={{
        fontSize: 10, letterSpacing: '0.32em', color: p.inkDim, fontWeight: 600,
      }}>{t('tier.months')}</div>

      <div className="display" style={{
        marginTop: 6, fontSize: 72, lineHeight: 1, color: p.ink,
        letterSpacing: '-0.005em',
      }}>{tier.months}</div>

      <div style={{
        height: 1,
        background: tier.best ? p.accent1 + '55' : p.ink + '18',
        margin: '24px 0 22px',
      }} />

      <div className="display" style={{
        fontSize: 38, lineHeight: 1, color: p.ink, letterSpacing: '-0.005em',
      }}>{fmt(total)}</div>

      <div className="mono" style={{
        marginTop: 8, fontSize: 11, color: p.inkDim, letterSpacing: '0.04em',
      }}>= {fmt(perMonth)} / {t('tier.month')}</div>

      {savePct > 0 && (
        <div className="mono" style={{
          marginTop: 4, fontSize: 11, fontWeight: 700,
          color: tier.best ? p.accent1 : p.accent2,
          letterSpacing: '0.18em',
        }}>{t('tier.save')} {savePct}%</div>
      )}

      <ul style={{
        margin: '24px 0 28px', padding: 0, listStyle: 'none',
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {bullets.map((b, i) => (
          <li key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 13, color: p.ink, lineHeight: 1.4,
          }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: tier.best ? p.accent1 : p.accent2, flexShrink: 0,
            }} />
            {b}
          </li>
        ))}
        {/* CAP PLAYER row */}
        <li style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, lineHeight: 1.4 }}>
          {tier.capPlayer ? (
            <>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: p.accent1, flexShrink: 0,
              }} />
              <span style={{
                color: p.accent1, fontWeight: 700,
                background: `${p.accent1}18`,
                padding: '2px 8px', borderRadius: 4,
                border: `1px solid ${p.accent1}44`,
                fontSize: 12, letterSpacing: '0.04em',
              }}>★ {tier.capPlayer} CAP PLAYER</span>
            </>
          ) : (
            <>
              <span style={{
                width: 6, height: 6, borderRadius: '50%',
                background: p.inkDim + '55', flexShrink: 0,
              }} />
              <span style={{ color: p.inkDim, fontSize: 13 }}>CAP PLAYER not included</span>
            </>
          )}
        </li>
      </ul>

      <button
        onClick={() => {
          const cap = tier.capPlayer || '';
          window.location.href = `Checkout.html?months=${tier.months}&price=${total.toFixed(2)}&devices=${devices}&save=${savePct}&cap=${encodeURIComponent(cap)}`;
        }}
        onMouseEnter={() => setBtnHover(true)}
        onMouseLeave={() => setBtnHover(false)}
        style={{
          width: '100%', padding: '14px',
          background: tier.best
            ? `linear-gradient(90deg, ${p.accent2}, ${p.accent1})`
            : (btnHover ? `linear-gradient(90deg, ${p.accent2}, ${p.accent1})` : 'transparent'),
          color: tier.best ? p.bg : (btnHover ? p.bg : p.ink),
          border: tier.best ? 'none' : `1px solid ${btnHover ? 'transparent' : p.ink + '33'}`,
          borderRadius: 999,
          fontSize: 12, fontWeight: 800, letterSpacing: '0.18em',
          cursor: 'pointer', fontFamily: 'inherit',
          transition: 'background 0.2s, transform 0.15s, box-shadow 0.2s, color 0.2s, border-color 0.2s',
          transform: hover ? 'scale(1.02)' : 'scale(1)',
          boxShadow: btnHover ? `0 0 22px 4px ${p.accent1}88, 0 0 8px 2px ${p.accent1}55` : 'none',
        }}>{t('tier.choose')}</button>

      {/* Category sections */}
      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {[
          { label: t('tier.live'),   desc: t('tier.liveDesc') },
          { label: t('tier.cinema'), desc: t('tier.cinemaDesc') },
          { label: t('tier.series'), desc: t('tier.seriesDesc') },
          { label: t('tier.sport'),  desc: t('tier.sportDesc') },
        ].map((s) => (
          <div key={s.label} style={{ borderTop: `1px solid ${p.ink}12`, paddingTop: 12 }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.26em', color: tier.best ? p.accent1 : p.accent2, fontWeight: 700, marginBottom: 5 }}>{s.label}</div>
            <div style={{ fontSize: 12, color: p.inkDim, lineHeight: 1.6 }}>{s.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Legacy components below are unused but kept for reference.
function _UnusedDevicePicker({ p, devices, setDevices }) {
  const { t } = useI18n();
  const options = [1, 2, 3, 4, 5];
  return (
    <div style={{
      maxWidth: 1320, margin: '64px auto 0',
      display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 48,
      padding: '28px 36px',
      background: `linear-gradient(135deg, ${p.bgSoft}, ${p.bg})`,
      border: `1px solid ${p.ink}14`,
      borderRadius: 14,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* subtle accent edge */}
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
        background: `linear-gradient(180deg, ${p.accent1}, ${p.accent2})`,
      }} />

      <div>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: '0.32em', color: p.accent1, fontWeight: 600,
          marginBottom: 10,
        }}>{t('plans.devicesQ')}</div>
        <div className="display" style={{
          fontSize: 28, lineHeight: 1.1, color: p.ink, letterSpacing: '0.005em',
          marginBottom: 6,
        }}>
          {t('plans.devicesTitle')}
        </div>
        <div style={{ fontSize: 14, color: p.inkDim, lineHeight: 1.5, maxWidth: 560 }}>
          {t('plans.devicesHelp')}
        </div>
      </div>

      <div style={{
        display: 'flex', alignItems: 'stretch',
        background: p.bg,
        border: `1px solid ${p.ink}18`,
        borderRadius: 12,
        overflow: 'hidden',
      }}>
        {options.map((n, i) => {
          const active = devices === n;
          return (
            <button key={n}
              onClick={() => setDevices(n)}
              style={{
                width: 64, height: 72,
                border: 'none',
                borderRight: i < options.length - 1 ? `1px solid ${p.ink}10` : 'none',
                background: active ? p.accent1 : 'transparent',
                color: active ? p.bg : p.ink,
                cursor: 'pointer',
                display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center', gap: 2,
                fontFamily: 'inherit',
                transition: 'background 0.18s, color 0.18s',
                position: 'relative',
              }}
              onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = p.ink + '0c'; }}
              onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
            >
              <span className="display" style={{
                fontSize: 30, lineHeight: 1,
                color: active ? p.bg : p.ink,
              }}>{n}</span>
              <span className="mono" style={{
                fontSize: 8, letterSpacing: '0.22em',
                color: active ? p.bg : p.inkDim,
                opacity: active ? 0.75 : 1,
              }}>{n === 1 ? t('plans.screen') : t('plans.screens')}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function _UnusedPlanCard({ p, pl, devices }) {
  const { t } = useI18n();
  const ref = React.useRef(null);
  const [hover, setHover] = React.useState(false);
  const [pressed, setPressed] = React.useState(false);
  const [m, setM] = React.useState({ x: 0.5, y: 0.5 }); // 0..1 within card

  const handleMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    setM({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
  };

  const tiltX = (0.5 - m.y) * 8;   // deg
  const tiltY = (m.x - 0.5) * 8;
  const lift = pl.featured ? -12 : 0;
  const hoverLift = hover ? -10 : 0;
  const press = pressed ? 0.985 : 1;

  return (
    <div
      ref={ref}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); setM({ x: 0.5, y: 0.5 }); }}
      onMouseMove={handleMove}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      style={{
        position: 'relative',
        background: pl.featured ? `linear-gradient(180deg, ${pl.color}14, ${p.bgSoft})` : p.bgSoft,
        border: `1px solid ${hover ? pl.color : (pl.featured ? pl.color : p.ink + '15')}`,
        borderRadius: 6, padding: '36px 32px',
        transformStyle: 'preserve-3d',
        transform: `translateY(${lift + hoverLift}px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(${press})`,
        transition: pressed ? 'transform 0.08s' : 'transform 0.25s cubic-bezier(.2,.7,.2,1), border-color 0.2s, box-shadow 0.3s',
        boxShadow: hover
          ? `0 30px 60px -20px ${pl.color}55, 0 0 0 1px ${pl.color}33 inset`
          : `0 8px 24px -12px #000a`,
        cursor: 'pointer',
        overflow: 'hidden'
      }}>

      {/* cursor-follow glow */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(420px circle at ${m.x * 100}% ${m.y * 100}%, ${pl.color}26, transparent 50%)`,
        opacity: hover ? 1 : 0,
        transition: 'opacity 0.25s'
      }} />

      {/* shine sweep */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `linear-gradient(105deg, transparent 40%, ${pl.color}1f 50%, transparent 60%)`,
        transform: `translateX(${(m.x - 0.5) * 80}%)`,
        opacity: hover ? 1 : 0,
        transition: 'opacity 0.25s, transform 0.4s'
      }} />

      {pl.featured &&
        <div className="mono" style={{
          position: 'absolute', top: -12, left: 24,
          background: pl.color, color: p.bg,
          padding: '4px 12px', fontSize: 10, fontWeight: 700,
          letterSpacing: '0.2em', borderRadius: 2,
          transform: 'translateZ(40px)'
        }}>{pl.tag}</div>
      }

      <div style={{ position: 'relative', transform: hover ? 'translateZ(30px)' : 'translateZ(0)', transition: 'transform 0.25s' }}>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: '0.28em', color: pl.color, fontWeight: 600
        }}>{pl.featured ? t('plans.featured') : pl.tag}</div>

        <h3 className="display" style={{
          margin: '12px 0 0', fontSize: 44, lineHeight: 0.95, color: p.ink
        }}>{pl.name}</h3>

        <div style={{ marginTop: 20, display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <span style={{ fontSize: 16, color: p.inkDim }}>$</span>
          <span className="display" style={{
            fontSize: 64, lineHeight: 1, color: pl.color,
            textShadow: hover ? `0 0 30px ${pl.color}88` : 'none',
            transition: 'text-shadow 0.25s'
          }}>{pl.price}</span>
          <span className="mono" style={{ fontSize: 11, color: p.inkDim }}>/{pl.period}</span>
        </div>

        <div style={{
          height: 1, background: `linear-gradient(90deg, ${pl.color}, transparent)`,
          margin: '22px 0 18px',
          transform: `scaleX(${hover ? 1 : 0.6})`, transformOrigin: 'left',
          transition: 'transform 0.3s'
        }} />

        {/* Description sections */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {pl.sections.map((s, i) => (
            <div key={s.label} style={{
              transform: hover ? 'translateX(4px)' : 'translateX(0)',
              transition: `transform 0.25s ${i * 30}ms`
            }}>
              <div className="mono" style={{
                fontSize: 10, letterSpacing: '0.24em', color: pl.color, fontWeight: 700,
                marginBottom: 6
              }}>{s.label}</div>
              <p style={{
                margin: 0, fontSize: 12, lineHeight: 1.55, color: p.ink + 'b0',
                textWrap: 'pretty'
              }}>{s.body}</p>
            </div>
          ))}
        </div>

        <button style={{
          marginTop: 24, width: '100%', padding: '14px',
          background: pl.featured || hover ? pl.color : 'transparent',
          color: pl.featured || hover ? p.bg : p.ink,
          border: pl.featured ? 'none' : `1px solid ${pl.color}`,
          borderRadius: 4, fontSize: 12, fontWeight: 800,
          cursor: 'pointer', fontFamily: 'inherit',
          transition: 'background 0.2s, color 0.2s, letter-spacing 0.25s',
          letterSpacing: hover ? '0.28em' : '0.2em'
        }}>{pl.cta} →</button>
      </div>
    </div>
  );
}

// ─── setup ────────────────────────────────────────────────────────────────
function Setup({ p }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  const steps = [
  { n: '01', title: t('setup.s1.t'), body: t('setup.s1.b'), time: '2 MIN' },
  { n: '02', title: t('setup.s2.t'), body: t('setup.s2.b'), time: '< 1 MIN' },
  { n: '03', title: t('setup.s3.t'), body: t('setup.s3.b'), time: '5 MIN' },
  { n: '04', title: t('setup.s4.t'), body: t('setup.s4.b'), time: 'KICKOFF' }];

  return (
    <section id="setup" style={{ padding: isMobile ? '60px 20px' : '120px 56px', background: p.bgSoft }}>
      <SectionHeading p={p} eyebrow={t('setup.eyebrow')} title={t('setup.title')} sub={t('setup.sub')} />
      <div style={{
        marginTop: isMobile ? 40 : 72, display: 'grid',
        gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        gap: isMobile ? 2 : 0, maxWidth: 1240, margin: `${isMobile ? 40 : 72}px auto 0`,
      }}>
        {steps.map((s, i) =>
        <div key={s.n} style={{
          padding: '28px 24px',
          borderLeft: i === 0 ? `1px solid ${p.accent1}33` : 'none',
          borderRight: `1px solid ${p.accent1}33`,
          position: 'relative'
        }}>
            <div className="mono" style={{
            fontSize: 10, letterSpacing: '0.28em', color: p.accent1, marginBottom: 20
          }}>STEP {s.n} · {s.time}</div>
            <h4 className="display" style={{ margin: 0, fontSize: 36, color: p.ink }}>{s.title}</h4>
            <p style={{ marginTop: 12, color: p.inkDim, fontSize: 14, lineHeight: 1.6 }}>{s.body}</p>
            {i < steps.length - 1 &&
          <div style={{
            position: 'absolute', top: 38, right: -8, width: 16, height: 1,
            background: p.accent1
          }} />
          }
          </div>
        )}
      </div>
    </section>);

}

// ─── tournament showcase ───────────────────────────────────────────────────
function Matches({ p }) {
  const { t } = useI18n();
  const isMobile = useMobile();

  const stages = [
    { code: 'GS', label: t('wc.gs'),    dates: '11 — 27 JUN', matches: 72 },
    { code: 'R32', label: t('wc.r32'),  dates: '28 JUN — 3 JUL', matches: 16 },
    { code: 'R16', label: t('wc.r16'),  dates: '4 — 7 JUL',   matches: 8 },
    { code: 'QF', label: t('wc.qf'),    dates: '9 — 11 JUL',  matches: 4 },
    { code: 'SF', label: t('wc.sf'),    dates: '14 — 15 JUL', matches: 2 },
    { code: 'F',  label: t('wc.final'), dates: '19 JUL',       matches: 1, gold: true },
  ];

  return (
    <section id="matches" style={{ padding: isMobile ? '60px 20px' : '140px 56px', background: p.bg, position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.32em', color: p.accent1, fontWeight: 600,
        }}>// {t('wc.eyebrow')}</div>

        <h2 className="display" style={{
          margin: '20px 0 0', fontSize: 'clamp(56px, 8vw, 120px)',
          lineHeight: 0.92, letterSpacing: '-0.005em', color: p.ink,
        }}>{t('wc.title')}</h2>

        <div className="mono" style={{
          marginTop: 20, fontSize: 13, letterSpacing: '0.3em', color: p.accent2, fontWeight: 700,
        }}>11 JUN — 19 JUL 2026</div>

        <p style={{
          margin: '20px auto 0', maxWidth: 560, fontSize: 14, lineHeight: 1.6, color: p.inkDim,
        }}>{t('wc.sub')}</p>
      </div>

      {/* Stage timeline */}
      <div style={{
        marginTop: isMobile ? 40 : 72, maxWidth: 1240, margin: `${isMobile ? 40 : 72}px auto 0`,
        display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(6, 1fr)', gap: 0,
        border: `1px solid ${p.ink}15`, borderRadius: 10, overflow: 'hidden',
        background: p.bgSoft,
      }}>
        {stages.map((s, i) => <StageCell key={s.code} p={p} s={s} last={i === stages.length - 1} />)}
      </div>
    </section>
  );
}

function StageCell({ p, s, last }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: '28px 18px',
        borderRight: last ? 'none' : `1px solid ${p.ink}15`,
        background: s.gold ? `${p.accent1}14` : (hover ? p.bg : 'transparent'),
        transition: 'background 0.2s', position: 'relative', cursor: 'pointer',
      }}>
      <div className="mono" style={{
        fontSize: 9, letterSpacing: '0.28em', color: p.inkDim, fontWeight: 700,
      }}>{s.code}</div>
      <div className="display" style={{
        marginTop: 10, fontSize: 22, lineHeight: 1.05,
        color: s.gold ? p.accent1 : p.ink,
        textShadow: s.gold ? `0 0 22px ${p.accent1}66` : 'none',
      }}>{s.label}</div>
      <div className="mono" style={{
        marginTop: 14, fontSize: 10, letterSpacing: '0.18em', color: p.accent2, fontWeight: 600,
      }}>{s.dates}</div>
      <div style={{
        marginTop: 8, fontSize: 13, color: p.ink, opacity: 0.8,
      }}>{s.matches} {s.matches === 1 ? 'match' : 'matches'}</div>
    </div>
  );
}



function MoviePosters({ p }) {
  const { t } = useI18n();
  const isMobile = useMobile();

  const movies = [
    { t: 'Kingdom of the Planet of the Apes', y: 2024, g: 'action',  img: 'uploads/posters/test 1.jpeg'  },
    { t: 'The Long Walk',                     y: 2025, g: 'thriller', img: 'uploads/posters/test-2.jpeg'  },
    { t: 'One Battle After Another',          y: 2025, g: 'action',  img: 'uploads/posters/test 3.jpeg'  },
    { t: 'Superman',                          y: 2025, g: 'action',  img: 'uploads/posters/test-4.jpeg'  },
    { t: 'HIM',                               y: 2025, g: 'drama',   img: 'uploads/posters/test-5.jpeg'  },
    { t: 'The Lost Bus',                      y: 2025, g: 'thriller', img: 'uploads/posters/test-6.jpeg'  },
    { t: 'OG',                                y: 2025, g: 'action',  img: 'uploads/posters/test-7.jpeg'  },
    { t: 'Joker: Folie à Deux',               y: 2024, g: 'drama',   img: 'uploads/posters/test 8.jpeg'  },
    { t: 'Civil War',                         y: 2024, g: 'action',  img: 'uploads/posters/test 9.jpeg'  },
    { t: 'Steve',                             y: 2025, g: 'drama',   img: 'uploads/posters/test-10.jpeg' },
    { t: 'The Paper',                         y: 2025, g: 'series',  img: 'uploads/posters/test-11.jpeg' },
    { t: 'Black Rabbit',                      y: 2025, g: 'series',  img: 'uploads/posters/test-13.jpeg' },
    { t: 'Peacemaker',                        y: 2025, g: 'series',  img: 'uploads/posters/test-14.jpeg' },
    { t: 'Wake Up Dead Man',                  y: 2025, g: 'mystery', img: 'uploads/posters/test-15.jpeg' },
  ];
  // Duplicate for seamless loop
  const loop = [...movies, ...movies];

  return (
    <section style={{ padding: isMobile ? '60px 0' : '120px 0', background: p.bg, position: 'relative', overflow: 'hidden' }}>
      <style>{`
        @keyframes posterScroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .poster-track {
          display: flex; gap: 18px; width: max-content;
          animation: posterScroll 32s linear infinite;
        }
        .poster-track:hover { animation-play-state: paused; }
      `}</style>

      <div style={{ maxWidth: 1320, margin: '0 auto 40px', padding: isMobile ? '0 20px' : '0 56px' }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.32em', color: p.accent1, fontWeight: 600,
        }}>// {t('movies.eyebrow')}</div>
        <h2 className="display" style={{
          margin: '14px 0 0', fontSize: 'clamp(40px, 5vw, 68px)',
          lineHeight: 0.98, letterSpacing: '0.005em', color: p.ink,
        }}>{t('movies.title')}</h2>
        <p style={{
          margin: '14px 0 0', maxWidth: 540, fontSize: 14, lineHeight: 1.6,
          color: p.inkDim,
        }}>{t('movies.sub')}</p>
      </div>

      {/* Edge fades */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 0, width: 160, zIndex: 2,
        background: `linear-gradient(90deg, ${p.bg}, transparent)`, pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', top: 0, bottom: 0, right: 0, width: 160, zIndex: 2,
        background: `linear-gradient(270deg, ${p.bg}, transparent)`, pointerEvents: 'none',
      }} />

      <div className="poster-track">
        {loop.map((m, i) => <Poster key={i} p={p} m={m} />)}
      </div>

      <div className="mono" style={{
        marginTop: 36, textAlign: 'center', fontSize: 11,
        letterSpacing: '0.28em', color: p.inkDim,
      }}>+ {t('movies.count')}</div>
    </section>
  );
}

function Poster({ p, m }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative', flexShrink: 0,
        width: 220, aspectRatio: '2 / 3',
        borderRadius: 8, overflow: 'hidden', cursor: 'pointer',
        border: `1px solid ${hover ? p.accent1 : p.ink + '14'}`,
        transform: hover ? 'translateY(-6px) scale(1.03)' : 'translateY(0) scale(1)',
        boxShadow: hover ? `0 24px 50px -20px ${p.accent1}55` : '0 6px 18px -10px #000a',
        transition: 'transform 0.25s, border-color 0.2s, box-shadow 0.25s',
      }}>
      <img
        src={m.img}
        alt={m.t}
        loading="lazy"
        style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
          filter: hover ? 'brightness(0.55) saturate(1.15)' : 'brightness(0.85) saturate(0.95)',
          transition: 'filter 0.25s',
        }} />
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        padding: '32px 14px 14px',
        background: `linear-gradient(180deg, transparent, ${p.bg}f0)`,
      }}>
        <div className="mono" style={{
          fontSize: 9, letterSpacing: '0.24em', color: p.accent1, fontWeight: 700,
        }}>{m.y} · {m.g.toUpperCase()}</div>
        <div className="display" style={{
          marginTop: 4, fontSize: 18, lineHeight: 1.05, color: p.ink,
        }}>{m.t}</div>
      </div>
    </div>
  );
}

function PlansFAQ({ p }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  const faqs = [
    { q: t('faq.q1'), a: t('faq.a1') },
    { q: t('faq.q2'), a: t('faq.a2') },
    { q: t('faq.q3'), a: t('faq.a3') },
    { q: t('faq.q4'), a: t('faq.a4') },
    { q: t('faq.q5'), a: t('faq.a5') },
    { q: t('faq.q6'), a: t('faq.a6') },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ padding: isMobile ? '60px 20px 80px' : '100px 56px 140px', background: p.bgSoft }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.32em', color: p.accent1, marginBottom: 12,
        }}>{t('faq.eyebrow')}</div>
        <h2 className="display" style={{
          margin: 0, fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '0.01em',
        }}>{t('faq.title')}</h2>

        <div style={{ marginTop: 48, borderTop: `1px solid ${p.ink}1a` }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: `1px solid ${p.ink}1a` }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', padding: '24px 4px', background: 'transparent',
                    border: 'none', color: p.ink, cursor: 'pointer',
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                    gap: 24, fontFamily: 'inherit', textAlign: 'left',
                  }}>
                  <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: '0.01em' }}>{f.q}</span>
                  <span style={{
                    flexShrink: 0, width: 28, height: 28, borderRadius: '50%',
                    border: `1px solid ${isOpen ? p.accent1 : p.ink + '33'}`,
                    color: isOpen ? p.accent1 : p.inkDim,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 18, lineHeight: 1, transition: 'all 0.2s',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 240 : 0, overflow: 'hidden',
                  transition: 'max-height 0.35s ease, opacity 0.25s',
                  opacity: isOpen ? 1 : 0,
                }}>
                  <p style={{
                    margin: 0, padding: '0 4px 24px', fontSize: 15, lineHeight: 1.6,
                    color: p.inkDim, maxWidth: 760,
                  }}>{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── shared ───────────────────────────────────────────────────────────────
function SectionHeading({ p, eyebrow, title, sub }) {
  const isMobile = useMobile();
  return (
    <div style={{
      maxWidth: 1240, margin: '0 auto',
      display: 'flex', flexDirection: isMobile ? 'column' : 'row',
      justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end',
      gap: isMobile ? 16 : 40,
    }}>
      <div>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.32em', color: p.accent1, marginBottom: 16
        }}>{eyebrow}</div>
        <h2 className="display" style={{
          margin: 0, fontSize: 'clamp(40px, 6vw, 96px)', lineHeight: 0.92,
          color: p.ink, letterSpacing: '-0.005em'
        }}>{title}</h2>
      </div>
      <p style={{
        margin: 0, color: p.inkDim, fontSize: 15, lineHeight: 1.6,
        maxWidth: isMobile ? '100%' : 360, textWrap: 'pretty'
      }}>{sub}</p>
    </div>);
}

// ─── referral ─────────────────────────────────────────────────────────────
function Referral({ p }) {
  const isMobile = useMobile();
  return (
    <section id="referral" style={{
      padding: isMobile ? '72px 20px' : '120px 56px',
      background: p.bg,
      borderTop: `1px solid ${p.ink}10`,
      position: 'relative', overflow: 'hidden',
      textAlign: 'center',
    }}>
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        width: 600, height: 600, borderRadius: '50%',
        background: `radial-gradient(circle, ${p.accent1}18, transparent 60%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto' }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: '0.32em', color: p.accent1,
          marginBottom: 20,
        }}>// REFERRAL PROGRAMME</div>
        <h2 className="display" style={{
          fontSize: isMobile ? 'clamp(48px, 12vw, 72px)' : 'clamp(56px, 7vw, 100px)',
          lineHeight: 0.95, letterSpacing: '-0.005em',
          color: p.ink, margin: '0 0 8px',
        }}>BRING A FRIEND</h2>
        <h2 className="display" style={{
          fontSize: isMobile ? 'clamp(48px, 12vw, 72px)' : 'clamp(56px, 7vw, 100px)',
          lineHeight: 0.95, letterSpacing: '-0.005em',
          color: p.accent1, margin: '0 0 32px',
        }}>GET 1 MONTH FREE</h2>
        <p style={{
          fontSize: 16, lineHeight: 1.65, color: p.inkDim,
          maxWidth: 480, margin: '0 auto 40px',
        }}>
          Refer a friend who subscribes, and we'll add a free month to your account — no limits, no catches.
        </p>
      </div>
    </section>
  );
}

// ─── contact ──────────────────────────────────────────────────────────────
function Contact({ p, brand }) {
  const { t } = useI18n();
  const isMobile = useMobile();
  const email = 'contact@4kmaxstreaming.com';
  const whatsapp = '+44 7898 158799';
  const whatsappHref = 'https://wa.me/447898158799';

  const channels = [
    {
      key: 'email',
      eyebrow: 'EMAIL',
      title: email,
      sub: t('contact.emailSub'),
      href: `mailto:${email}`,
      cta: t('contact.emailCta'),
      accent: p.accent2,
      icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <rect x="3" y="5" width="18" height="14" rx="2" />
          <path d="M3 7l9 6 9-6" />
        </svg>
      ),
    },
    {
      key: 'whatsapp',
      eyebrow: 'WHATSAPP',
      title: whatsapp,
      sub: t('contact.waSub'),
      href: whatsappHref,
      cta: t('contact.waCta'),
      accent: '#25D366',
      icon: (
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <path d="M20.5 11.5a8.5 8.5 0 1 1-3.5-6.9L20.5 4l-1 3a8.4 8.4 0 0 1 1 4.5z" />
          <path d="M8.5 8.5c0 4 3 7 7 7l1.5-2-2.5-1-1 1c-1.5-.5-2.5-1.5-3-3l1-1-1-2.5-2 .5z" />
        </svg>
      ),
    },
  ];

  return (
    <section id="contact" style={{
      padding: isMobile ? '60px 20px' : '120px 56px', background: p.bgSoft,
      borderTop: `1px solid ${p.ink}10`,
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto' }}>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.32em', color: p.accent1, fontWeight: 600,
          }}>// {t('contact.eyebrow')}</div>
          <h2 className="display" style={{
            margin: '20px 0 0', fontSize: 'clamp(44px, 6vw, 80px)',
            lineHeight: 0.96, letterSpacing: '-0.005em', color: p.ink,
          }}>{t('contact.title')}</h2>
          <p style={{
            margin: '20px auto 0', maxWidth: 520, fontSize: 15, lineHeight: 1.6, color: p.inkDim,
          }}>{t('contact.sub')}</p>
        </div>

        <div style={{
          marginTop: 56, display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 18,
        }}>
          {channels.map((c) => <ContactCard key={c.key} p={p} c={c} />)}
        </div>

        <div className="mono" style={{
          marginTop: 40, textAlign: 'center', fontSize: 11,
          letterSpacing: '0.28em', color: p.inkDim,
        }}>
          ✦ {t('contact.hours')} ✦
        </div>
      </div>
    </section>
  );
}

function ContactCard({ p, c }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={c.href}
      target={c.key === 'whatsapp' ? '_blank' : undefined}
      rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', textDecoration: 'none',
        background: p.bg,
        border: `1.5px solid ${hover ? c.accent : p.ink + '15'}`,
        borderRadius: 10,
        padding: '34px 32px',
        transition: 'border-color 0.2s, transform 0.25s, box-shadow 0.25s',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? `0 22px 44px -24px ${c.accent}88` : 'none',
        position: 'relative', overflow: 'hidden',
      }}>
      <div style={{
        position: 'absolute', top: -40, right: -40, width: 160, height: 160,
        borderRadius: '50%', background: c.accent,
        filter: 'blur(48px)', opacity: hover ? 0.18 : 0.08,
        transition: 'opacity 0.25s',
      }} />
      <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-start', gap: 18 }}>
        <div style={{
          width: 52, height: 52, borderRadius: 8,
          background: `${c.accent}1f`, color: c.accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>{c.icon}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: '0.28em', color: c.accent, fontWeight: 700,
          }}>{c.eyebrow}</div>
          <div className="display" style={{
            marginTop: 10, fontSize: 22, color: p.ink, letterSpacing: '-0.005em',
            wordBreak: 'break-word',
          }}>{c.title}</div>
          <div style={{ marginTop: 8, fontSize: 13, color: p.inkDim, lineHeight: 1.5 }}>
            {c.sub}
          </div>
          <div className="mono" style={{
            marginTop: 18, fontSize: 11, letterSpacing: '0.22em', color: c.accent, fontWeight: 700,
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            {c.cta}
            <span style={{
              display: 'inline-block',
              transform: hover ? 'translateX(4px)' : 'translateX(0)',
              transition: 'transform 0.25s',
            }}>→</span>
          </div>
        </div>
      </div>
    </a>
  );
}

// ─── footer ───────────────────────────────────────────────────────────────
function Footer({ p, brand }) {
  const isMobile = useMobile();
  const { t } = useI18n();

  const quickLinks = [
    { label: 'Setup',            href: '#setup' },
    { label: 'Plans',            href: 'Plans.html' },
    { label: 'Refund Policy',    href: 'Refund-Policy.html' },
    { label: 'Terms of Service', href: 'Terms-of-Service.html' },
    { label: 'Resellers',       href: 'Resellers.html' },
  ];

  const devices = [
    { icon: '🍎', label: 'Apple (iOS / Apple TV)' },
    { icon: '🖥', label: 'Windows PC' },
    { icon: '📺', label: 'Smart TVs' },
    { icon: '📱', label: 'Android Devices' },
    { icon: '🔥', label: 'Firestick & Android TV' },
    { icon: '💻', label: 'MacOS' },
    { icon: '📦', label: 'MAG BOX | STB' },
    { icon: '📡', label: 'Formuler Z' },
  ];

  return (
    <footer style={{ background: '#06080a', borderTop: `1px solid ${p.ink}15` }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: isMobile ? '48px 20px 32px' : '64px 56px 48px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1.2fr 1fr',
        gap: isMobile ? 40 : 48,
      }}>

        {/* About */}
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.28em', color: p.inkDim, marginBottom: 18 }}>ABOUT US</div>
          <div className="display" style={{ fontSize: 28, color: p.ink, letterSpacing: '0.02em', marginBottom: 14 }}>
            {brand.name}<span style={{ color: p.accent1 }}>{brand.suffix}</span>
          </div>
          <p style={{ fontSize: 14, color: p.inkDim, lineHeight: 1.7, maxWidth: 320, margin: 0 }}>
            Enjoy high-quality streaming, crystal-clear 4K resolution, and a smooth viewing experience across every device. {brand.name}{brand.suffix} keeps your entertainment premium and effortless.
          </p>
        </div>

        {/* Quick Links */}
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.28em', color: p.inkDim, marginBottom: 18 }}>QUICK LINKS</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {quickLinks.map((l) => (
              <li key={l.label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ color: p.accent1, fontSize: 12 }}>✓</span>
                <a href={l.href} style={{ fontSize: 14, color: p.inkDim, textDecoration: 'none', transition: 'color 0.15s' }}
                  onMouseEnter={(e) => e.target.style.color = p.ink}
                  onMouseLeave={(e) => e.target.style.color = p.inkDim}
                >{l.label}</a>
              </li>
            ))}
          </ul>
        </div>

        {/* Supported Devices */}
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.28em', color: p.inkDim, marginBottom: 18 }}>SUPPORTED DEVICES</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
            {devices.map((d) => (
              <li key={d.label} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 4, height: 4, borderRadius: '50%', background: p.accent1, flexShrink: 0, opacity: 0.7 }} />
                <span style={{ fontSize: 14, color: p.inkDim }}>{d.label}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Contact + Language */}
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.28em', color: p.inkDim, marginBottom: 18 }}>CONTACT US</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <a href="mailto:contact@4kmaxstreaming.com" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
              <span style={{
                width: 32, height: 32, borderRadius: 6, background: p.bgSoft,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, color: p.accent2, flexShrink: 0,
              }}>@</span>
              <span style={{ fontSize: 13, color: p.inkDim }}>contact@4kmaxstreaming.com</span>
            </a>
            <a href="https://wa.me/447898158799" target="_blank" rel="noopener noreferrer"
              style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
              <span style={{
                width: 32, height: 32, borderRadius: 6, background: '#25D36622',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 10, fontWeight: 800, color: '#25D366', flexShrink: 0, letterSpacing: '0.05em',
              }}>WA</span>
              <span style={{ fontSize: 13, color: p.inkDim }}>+44 7898 158799</span>
            </a>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: p.inkDim, opacity: 0.6, paddingLeft: 44 }}>
              Available 24/7
            </div>
          </div>

        </div>
      </div>

      {/* Bottom bar */}
      <div style={{
        borderTop: `1px solid ${p.ink}12`,
        padding: isMobile ? '18px 20px' : '20px 56px',
        textAlign: 'center',
      }}>
        <span className="mono" style={{ fontSize: 11, color: p.inkDim, letterSpacing: '0.22em', opacity: 0.5 }}>
          © 2026 {brand.name}{brand.suffix} &nbsp;·&nbsp; ALL RIGHTS RESERVED
        </span>
      </div>
    </footer>
  );
}

// ─── language pill ────────────────────────────────────────────────────────
function LanguagePill({ p }) {
  return (
    <div style={{
      position: 'fixed', bottom: 24, left: 24, zIndex: 30,
      background: p.bgSoft, border: `1px solid ${p.accent1}33`,
      padding: '10px 16px', borderRadius: 999,
      display: 'flex', alignItems: 'center', gap: 10
    }}>
      <div style={{
        width: 24, height: 16, borderRadius: 2, overflow: 'hidden',
        background: 'linear-gradient(180deg, #00247d 33%, #fff 33% 66%, #cf142b 66%)'
      }} />
      <div>
        <div className="mono" style={{ fontSize: 9, color: p.inkDim, letterSpacing: '0.2em' }}>LANGUAGE</div>
        <div style={{ fontSize: 12, fontWeight: 600, color: p.ink }}>English</div>
      </div>
    </div>);

}

function ChatBubble({ p }) {
  const [open, setOpen] = useState(false);
  const { t } = useI18n();
  const waHref = `https://wa.me/447898158799?text=${encodeURIComponent(t('wa.interestedMsg'))}`;

  return (
    <div style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 999,
      transform: 'translateZ(0)', WebkitTransform: 'translateZ(0)', willChange: 'transform',
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12,
    }}>
      {/* Popup */}
      {open && (
        <div style={{
          width: 300, borderRadius: 16, overflow: 'hidden',
          boxShadow: '0 16px 48px rgba(0,0,0,0.5)',
          fontFamily: "'Inter', system-ui, sans-serif",
        }}>
          {/* Header */}
          <div style={{
            background: '#25D366', padding: '14px 16px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: 'rgba(255,255,255,0.2)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
                </svg>
              </div>
              <span style={{ color: 'white', fontWeight: 700, fontSize: 15 }}>WhatsApp</span>
            </div>
            <button
              onClick={() => setOpen(false)}
              style={{
                background: 'none', border: 'none', color: 'white',
                cursor: 'pointer', fontSize: 18, lineHeight: 1, padding: 4,
              }}
            >✕</button>
          </div>

          {/* Chat body */}
          <div style={{
            background: '#e5ddd5',
            backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'200\' height=\'200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3C/svg%3E")',
            padding: '20px 14px 14px',
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{
              background: 'white', borderRadius: '0 10px 10px 10px',
              padding: '10px 14px', fontSize: 14, color: '#111',
              boxShadow: '0 1px 2px rgba(0,0,0,0.15)', maxWidth: '85%',
            }}>{t('wa.welcome')}</div>
            <div style={{
              background: 'white', borderRadius: '0 10px 10px 10px',
              padding: '10px 14px', fontSize: 14, color: '#111',
              boxShadow: '0 1px 2px rgba(0,0,0,0.15)', maxWidth: '85%',
            }}>{t('wa.assist')}</div>
          </div>

          {/* Open chat button */}
          <div style={{ background: '#f0f0f0', padding: '12px 14px' }}>
            <a
              href={waHref}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                background: '#25D366', color: 'white',
                borderRadius: 24, padding: '10px 20px',
                fontWeight: 700, fontSize: 14, textDecoration: 'none',
                transition: 'opacity 0.2s',
              }}
              onMouseEnter={(e) => e.currentTarget.style.opacity = '0.85'}
              onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
            >
              {t('wa.openchat')}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5">
                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
              </svg>
            </a>
          </div>
        </div>
      )}

      {/* Trigger button */}
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: 56, height: 56, borderRadius: '50%',
          background: '#25D366', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 8px 24px rgba(37,211,102,0.5)',
          transition: 'transform 0.2s',
        }}
        onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
        onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
      >
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
        </svg>
      </button>
    </div>
  );
}

// ─── tweaks panel ─────────────────────────────────────────────────────────
function Tweaks({ tweaks, setTweak }) {
  const videos = [
  { label: 'World Cup 26', value: 'worldcup26.mp4' },
  { label: 'Stadium aerial', value: 'https://videos.pexels.com/video-files/3192305/3192305-uhd_2560_1440_25fps.mp4' },
  { label: 'Floodlights', value: 'https://videos.pexels.com/video-files/3018993/3018993-uhd_2560_1440_30fps.mp4' },
  { label: 'Fans crowd', value: 'https://videos.pexels.com/video-files/4761426/4761426-uhd_2560_1440_24fps.mp4' }];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakRadio
        label="Palette"
        value={tweaks.palette}
        onChange={(v) => setTweak('palette', v)}
        options={['classic', 'desert', 'americas']} />
      
      <TweakSelect
        label="Background video"
        value={tweaks.videoUrl}
        onChange={(v) => setTweak('videoUrl', v)}
        options={videos} />
      
      <TweakSection label="Brand" />
      <TweakText label="Name" value={tweaks.brandName} onChange={(v) => setTweak('brandName', v.toUpperCase())} />
      <TweakText label="Suffix" value={tweaks.brandSuffix} onChange={(v) => setTweak('brandSuffix', v.toUpperCase())} />
      <TweakSection label="Effects" />
      <TweakToggle label="CRT scanlines" value={tweaks.showStripes} onChange={(v) => setTweak('showStripes', v)} />
    </TweaksPanel>);

}

// ─── app ──────────────────────────────────────────────────────────────────
function App({ page = 'home' }) {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const p = PALETTES[tweaks.palette] || PALETTES.classic;
  const brand = { name: tweaks.brandName, suffix: tweaks.brandSuffix };
  const isMobile = useIsMobile();

  // Apply palette to root for any CSS using vars
  useEffect(() => {
    document.documentElement.style.setProperty('--bg', p.bg);
    document.documentElement.style.setProperty('--ink', p.ink);
    document.body.style.background = p.bg;
  }, [p]);

  if (page === 'plans') {
    return (
      <MobileCtx.Provider value={isMobile}>
        <div data-screen-label="Plans" style={{ background: p.bg, color: p.ink, minHeight: '100vh' }}>
          <Header p={p} brand={brand} activeKey="nav.plans" />
          <Plans p={p} />
          <PlansFAQ p={p} />
          <Footer p={p} brand={brand} />
          {!isMobile && <LanguageSwitcher p={p} />}
            <ChatBubble p={p} />
          <Tweaks tweaks={tweaks} setTweak={setTweak} />
        </div>
      </MobileCtx.Provider>
    );
  }

  return (
    <MobileCtx.Provider value={isMobile}>
      <div data-screen-label="Landing" style={{ background: p.bg, color: p.ink }}>
        <Header p={p} brand={brand} activeKey="nav.home" />
        <Hero p={p} tweaks={tweaks} brand={brand} />
        <Matches p={p} />
        <MoviePosters p={p} />
        <Setup p={p} />
        <Plans p={p} />
        <Referral p={p} />
        <Contact p={p} brand={brand} />
        <Footer p={p} brand={brand} />
        {!isMobile && <LanguageSwitcher p={p} />}
        <ChatBubble p={p} />
        <Tweaks tweaks={tweaks} setTweak={setTweak} />
      </div>
    </MobileCtx.Provider>
  );
}

// Expose App so each HTML page can mount with its own `page` prop.
window.GolazoApp = App;
const _mount = document.getElementById('root');
if (_mount && !window.__golazoMounted) {
  window.__golazoMounted = true;
  const _page = window.GOLAZO_PAGE || 'home';
  ReactDOM.createRoot(_mount).render(<App page={_page} />);
}