// Variant 1: RUST / METAL — industrial, heavy type, red accent, grain.
// Now supports 18 languages (full EN/RU translations + UI strings for the rest,
// content falls back to EN where not yet translated), an integrated lobby-music
// player, and labelled image slots with Gemini prompts.

const { useState, useEffect, useRef } = React;
const C = window.OXIDE_CONTENT;
const SLOTS = window.OXIDE_IMAGE_SLOTS;

// ─── Shared hooks ────────────────────────────────
function useInView(opts = { threshold: 0.15 }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, inView];
}

function CountUp({ value, duration = 1600 }) {
  const [ref, inView] = useInView();
  const [n, setN] = useState(0);
  const target = parseInt(String(value).replace(/\D/g, ''), 10) || 0;
  const suffix = String(value).replace(/[0-9]/g, '');
  useEffect(() => {
    if (!inView) return;
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / duration);
      setN(Math.round(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [inView]);
  return <span ref={ref}>{n}{suffix}</span>;
}

function Magnetic({ children, strength = 0.35, className, style, onClick, as = 'button', href }) {
  const ref = useRef(null);
  const [t, setT] = useState({ x: 0, y: 0 });
  const Tag = as;
  const handleMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    setT({ x: (e.clientX - (r.left + r.width / 2)) * strength, y: (e.clientY - (r.top + r.height / 2)) * strength });
  };
  return (
    <Tag ref={ref} href={href} onClick={onClick} className={className}
      onMouseMove={handleMove} onMouseLeave={() => setT({ x: 0, y: 0 })}
      style={{ ...style, transform: `translate(${t.x}px, ${t.y}px)`, transition: t.x === 0 ? 'transform .4s cubic-bezier(.2,.8,.2,1)' : 'transform .08s linear' }}>
      {children}
    </Tag>
  );
}

function RevealRow({ children, delay = 0, className, style }) {
  const [ref, inView] = useInView();
  return (
    <div ref={ref} className={className}
      style={{ ...style, transition: `transform .9s cubic-bezier(.2,.8,.2,1) ${delay}ms, opacity .9s ease ${delay}ms`,
        transform: inView ? 'translateY(0)' : 'translateY(32px)', opacity: inView ? 1 : 0 }}>
      {children}
    </div>
  );
}

// ─── Creators slider: horizontal scroll w/ auto-advance + arrows ──
function CreatorsSlider({ accent, T, children }) {
  const trackRef = useRef(null);
  const wrapRef = useRef(null);
  const [paused, setPaused] = useState(false);
  const [hovered, setHovered] = useState(false);
  const [atStart, setAtStart] = useState(true);
  const [atEnd, setAtEnd] = useState(false);

  const stepWidth = () => {
    const t = trackRef.current;
    if (!t) return 0;
    const card = t.querySelector('.rust-creator-slot');
    if (!card) return t.clientWidth;
    const inner = card.parentElement;
    const gap = inner ? (parseFloat(getComputedStyle(inner).gap) || 0) : 0;
    return card.getBoundingClientRect().width + gap;
  };

  const updateEdges = () => {
    const t = trackRef.current;
    if (!t) return;
    setAtStart(t.scrollLeft <= 1);
    setAtEnd(t.scrollLeft + t.clientWidth >= t.scrollWidth - 1);
  };

  const advance = (dir = 1) => {
    const t = trackRef.current;
    if (!t) return;
    const w = stepWidth();
    let next = t.scrollLeft + dir * w;
    // loop around
    if (dir > 0 && next + t.clientWidth > t.scrollWidth - 1) next = 0;
    if (dir < 0 && next < 0) next = t.scrollWidth - t.clientWidth;
    t.scrollTo({ left: next, behavior: 'smooth' });
  };

  // auto-advance
  useEffect(() => {
    if (paused || hovered) return;
    const t = trackRef.current;
    if (!t) return;
    if (t.scrollWidth <= t.clientWidth + 1) return; // nothing to scroll
    const id = setInterval(() => advance(1), 4000);
    return () => clearInterval(id);
  }, [paused, hovered]);

  // edge tracking
  useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    const visible = () => {
      const w = window.innerWidth;
      if (w <= 480) return 1;
      if (w <= 720) return 2;
      if (w <= 1024) return 3;
      return 5;
    };
    const applyCardWidth = () => {
      const inner = t.querySelector('.rust-creators-grid');
      if (!inner) return;
      const v = visible();
      const gap = parseFloat(getComputedStyle(inner).gap) || 0;
      const cw = (t.clientWidth - gap * (v - 1)) / v;
      inner.style.setProperty('--card-w', cw + 'px');
    };
    applyCardWidth();
    updateEdges();
    t.addEventListener('scroll', updateEdges, { passive: true });
    const ro = new ResizeObserver(() => { applyCardWidth(); updateEdges(); });
    ro.observe(t);
    window.addEventListener('resize', applyCardWidth);
    return () => { t.removeEventListener('scroll', updateEdges); ro.disconnect(); window.removeEventListener('resize', applyCardWidth); };
  }, []);

  // pause when out of view
  useEffect(() => {
    const w = wrapRef.current;
    if (!w) return;
    const io = new IntersectionObserver(([e]) => setPaused(!e.isIntersecting), { threshold: 0.1 });
    io.observe(w);
    return () => io.disconnect();
  }, []);

  const Btn = ({ dir, disabled, children }) => (
    <button
      type="button"
      aria-label={dir > 0 ? 'Next' : 'Previous'}
      onClick={() => advance(dir)}
      disabled={disabled}
      style={{
        position: 'absolute', top: '50%', [dir > 0 ? 'right' : 'left']: 12, transform: 'translateY(-50%)',
        width: 48, height: 48, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(10,8,7,0.85)', border: `1px solid ${accent}66`, color: '#EDE6DD',
        fontFamily: 'ui-monospace, monospace', fontSize: 18, cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? 0.3 : 1, backdropFilter: 'blur(6px)', zIndex: 4,
        transition: 'background .25s, border-color .25s, transform .25s',
      }}
      onMouseEnter={(e) => { if (!disabled) { e.currentTarget.style.background = `${accent}26`; e.currentTarget.style.borderColor = accent; } }}
      onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(10,8,7,0.85)'; e.currentTarget.style.borderColor = `${accent}66`; }}
    >
      {children}
    </button>
  );

  return (
    <div
      ref={wrapRef}
      className="rust-creators-slider"
      style={{ position: 'relative' }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <div
        ref={trackRef}
        className="rust-creators-track"
        style={{
          overflowX: 'auto', overflowY: 'hidden',
          scrollbarWidth: 'none', msOverflowStyle: 'none',
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
        }}
      >
        {children}
      </div>
      <Btn dir={-1} disabled={false}>‹</Btn>
      <Btn dir={1} disabled={false}>›</Btn>
      <style>{`
        .rust-creators-track::-webkit-scrollbar { display: none; }
        .rust-creators-slider .rust-creator-slot { scroll-snap-align: start; }
      `}</style>
    </div>
  );
}

// ─── Hero ember canvas ──────────
function EmberCanvas() {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    const parent = canvas.parentElement;
    let w, h, dpr, particles = [], raf;
    const resize = () => {
      dpr = window.devicePixelRatio || 1;
      w = canvas.width = parent.offsetWidth * dpr;
      h = canvas.height = parent.offsetHeight * dpr;
      canvas.style.width = parent.offsetWidth + 'px';
      canvas.style.height = parent.offsetHeight + 'px';
    };
    const spawn = () => ({
      x: Math.random() * w, y: h + Math.random() * 60,
      vx: (Math.random() - 0.5) * 0.3 * dpr,
      vy: -(0.3 + Math.random() * 1.2) * dpr,
      r: (0.4 + Math.random() * 1.8) * dpr,
      life: 0, max: 180 + Math.random() * 180,
      hue: 10 + Math.random() * 30,
    });
    resize();
    for (let i = 0; i < 80; i++) particles.push(spawn());
    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      for (const p of particles) {
        p.x += p.vx; p.y += p.vy; p.life++;
        p.vx += (Math.random() - 0.5) * 0.02;
        const alpha = Math.max(0, 1 - p.life / p.max);
        ctx.beginPath();
        ctx.fillStyle = `hsla(${p.hue}, 90%, 55%, ${alpha * 0.7})`;
        ctx.shadowBlur = 12 * dpr;
        ctx.shadowColor = `hsla(${p.hue}, 100%, 50%, ${alpha})`;
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
        if (p.life > p.max || p.y < -20) Object.assign(p, spawn());
      }
      raf = requestAnimationFrame(tick);
    };
    tick();
    window.addEventListener('resize', resize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);
  return <canvas ref={ref} style={{ position: 'absolute', inset: 0, pointerEvents: 'none', mixBlendMode: 'screen' }} />;
}

// ─── Players online widget ──────────
function PlayersOnline({ accent, t }) {
  // Players hover in a 49 000–52 000 band. The actual on-page count drifts
  // ±150 around a random baseline every ~1.8s, never landing on a round
  // number (we re-roll if last two digits would be 00).
  const MIN = 49000, MAX = 52000;
  const pickInitial = () => MIN + Math.floor(Math.random() * (MAX - MIN));
  const ensureNotRound = (n) => (n % 100 === 0 ? n + 1 + Math.floor(Math.random() * 89) : n);
  const [count, setCount] = React.useState(() => ensureNotRound(pickInitial()));

  React.useEffect(() => {
    const tick = () => {
      setCount((c) => {
        // drift ±150 around current value, but stay inside band
        let next = c + Math.round((Math.random() - 0.5) * 300);
        if (next < MIN) next = MIN + Math.floor(Math.random() * 200);
        if (next > MAX) next = MAX - Math.floor(Math.random() * 200);
        next = ensureNotRound(next);
        return next;
      });
    };
    const id = setInterval(tick, 1600 + Math.random() * 600);
    return () => clearInterval(id);
  }, []);

  // formatted with thin space (narrow no-break space) as group separator: 51 247
  const formatted = count.toLocaleString('en-US').replace(/,/g, '\u202f');

  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '8px 14px', borderRadius: 2,
      background: 'rgba(10,8,7,0.55)',
      border: '1px solid rgba(237,230,221,0.12)',
      fontFamily: 'ui-monospace, "JetBrains Mono", monospace',
    }}>
      <span style={{ position: 'relative', display: 'inline-flex', width: 8, height: 8 }}>
        <span style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: '#4ADE80', boxShadow: '0 0 8px #4ADE80',
        }} />
        <span style={{
          position: 'absolute', inset: -2, borderRadius: '50%',
          background: '#4ADE80', opacity: 0.45,
          animation: 'oxPulse 1.8s ease-out infinite',
        }} />
      </span>
      <span style={{
        fontSize: 13, fontWeight: 700, color: '#EDE6DD',
        letterSpacing: '0.04em', fontVariantNumeric: 'tabular-nums',
        minWidth: 56, textAlign: 'right',
      }}>{formatted}</span>
      <span style={{
        fontSize: 9, color: '#8a7e72', letterSpacing: '0.18em',
        textTransform: 'uppercase', fontWeight: 700,
      }}>{t ? t('online') : 'online'}</span>
      <style>{`@keyframes oxPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }`}</style>
    </div>
  );
}

// ─── Main site (v1) ──────────
function RustSite({ lang, setLang }) {
  // i18n helper
  const T = (key) => window.OXIDE_T(lang, key);
  const langDef = window.OXIDE_LANGS.find(l => l.code === lang) || window.OXIDE_LANGS[0];
  const isRTL = langDef.dir === 'rtl';

  // Apply <html dir> when lang changes
  useEffect(() => {
    document.documentElement.setAttribute('dir', isRTL ? 'rtl' : 'ltr');
    document.documentElement.setAttribute('lang', lang);
    return () => { document.documentElement.setAttribute('dir', 'ltr'); };
  }, [lang, isRTL]);

  // Localized content reader. All multi-lang fields in OXIDE_CONTENT are
  // objects keyed by lang code. Fall back to EN if the chosen lang is missing.
  const cTxt = (field) => {
    if (field == null) return '';
    if (typeof field === 'string') return field;
    return field[lang] != null ? field[lang] : field.en;
  };

  const [activeTier, setActiveTier] = useState(0);
  const [hoverTier, setHoverTier] = useState(null);
  const [tierTouched, setTierTouched] = useState(false);
  const [openFaq, setOpenFaq] = useState(0);
  const [trailerOpen, setTrailerOpen] = useState(false);
  const [siteSoonOpen, setSiteSoonOpen] = useState(false);

  // Lock body scroll + Esc for site-soon modal
  useEffect(() => {
    if (!siteSoonOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setSiteSoonOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [siteSoonOpen]);

  // Lock body scroll while trailer modal is open + close on Esc
  useEffect(() => {
    if (!trailerOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setTrailerOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [trailerOpen]);

  // Hero parallax
  const heroRef = useRef(null);
  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  const accent = '#E63028';

  // Hero headline — translated array (3 lines). Fall back to EN if missing.
  const heroH1 = (window.OXIDE_I18N[lang] && window.OXIDE_I18N[lang].h1) || window.OXIDE_I18N.en.h1;

  return (
    <div dir={isRTL ? 'rtl' : 'ltr'} style={{
      fontFamily: '"Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif',
      background: '#0a0807', color: '#EDE6DD', minHeight: '100%',
      '--accent': accent,
    }}>
      <style>{`
        @keyframes rust-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes rust-ring-pulse {
          0% { transform: scale(0.72); opacity: 0.9; }
          80% { transform: scale(1.9); opacity: 0; }
          100% { transform: scale(1.9); opacity: 0; }
        }
        @keyframes rust-pulse-dot {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.6); opacity: 0.4; }
        }
        .rust-tier-btn:hover .rust-tier-dot { animation: none; }
        .rust-tier-btn:focus-visible { outline: 2px solid ${accent}; outline-offset: 4px; border-radius: 6px; }
        .rust-tier-btn { outline: none; }

        /* ─── MOBILE / TABLET ADAPTATION ─── */
        @media (max-width: 900px) {
          .rust-nav { padding: 10px 14px !important; gap: 8px !important; flex-wrap: nowrap !important; }
          .rust-nav-left { gap: 10px !important; flex: 0 0 auto; min-width: 0; }
          .rust-nav-left .rust-nav-divider { display: none !important; }
          .rust-nav-right { gap: 8px !important; flex-wrap: nowrap !important; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
          .rust-nav-right .rust-online-pill { display: none !important; }
          .rust-nav-cta { padding: 9px 12px !important; font-size: 10px !important; letter-spacing: 0.1em !important; white-space: nowrap; }

          .rust-hero { padding: 40px 18px 36px !important; min-height: calc(100vh - 80px) !important; }
          .rust-hero-bottom { grid-template-columns: 1fr !important; gap: 24px !important; margin-top: 32px !important; }
          .rust-hero-actions { flex-wrap: wrap !important; gap: 12px !important; }
          .rust-hero-actions > a, .rust-hero-actions > button { flex: 1 1 auto; justify-content: center; padding: 16px 20px !important; font-size: 12px !important; letter-spacing: 0.12em !important; }
          .rust-hero-cta-sub { width: 100%; }

          .rust-stats { grid-template-columns: repeat(2, 1fr) !important; }
          .rust-stats > div { padding: 28px 18px !important; }
          .rust-stats > div > div:first-child { font-size: clamp(34px, 9vw, 52px) !important; }
          .rust-stats-cell { border-inline-end: none !important; border-bottom: 1px solid rgba(237,230,221,0.08); }

          .rust-section { padding: 64px 18px !important; }
          .rust-section h2 { font-size: clamp(34px, 9vw, 56px) !important; }

          .rust-values-img { grid-template-columns: 1fr !important; height: auto !important; gap: 10px !important; }
          .rust-values-img > div { height: 180px; }
          .rust-values-grid { grid-template-columns: 1fr !important; }
          .rust-values-grid > div > div { border-inline-end: none !important; border-bottom: 1px solid rgba(237,230,221,0.08) !important; min-height: auto !important; padding: 28px 22px !important; }

          .rust-path-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .rust-path-tiers { grid-template-columns: repeat(2, 1fr) !important; gap: 12px 8px !important; }
          .rust-tier-rail { display: none !important; }
          .rust-tier-detail { padding: 24px 20px !important; }
          .rust-tier-detail-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .rust-tier-detail-grid > ul { grid-template-columns: 1fr !important; gap: 12px !important; }
          .rust-tier-legend { height: 360px !important; margin-top: 0 !important; }

          .rust-collab { height: 320px !important; margin-bottom: 20px !important; }
          .rust-creator-slot { flex: 0 0 calc((100% - 2px) / 2) !important; }

          .rust-faq button > span:first-child { font-size: 16px !important; gap: 10px !important; }
          .rust-faq button { padding: 22px 0 !important; }
          .rust-faq-answer { font-size: 15px !important; padding-bottom: 24px !important; }

          .rust-final { padding: 80px 18px !important; }
          .rust-final h2 { font-size: clamp(44px, 12vw, 80px) !important; }
          .rust-final-cta { padding: 20px 32px !important; font-size: 15px !important; letter-spacing: 0.12em !important; }

          .rust-footer { padding: 28px 18px !important; }
          .rust-footer > div { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
          .rust-footer-links { padding-right: 0 !important; gap: 14px !important; row-gap: 10px !important; }

          .rust-marquee-wrap { padding: 18px 0 !important; }
          .rust-marquee-wrap span { font-size: 17px !important; }
        }

        @media (max-width: 480px) {
          .rust-path-tiers { grid-template-columns: 1fr 1fr !important; }
          .rust-creator-slot { flex: 0 0 100% !important; }
        }
      `}</style>

      <div style={{
        position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 1,
        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
        opacity: 0.35, mixBlendMode: 'overlay',
      }} />

      {/* Floating lobby music player */}
      <window.LobbyMusic src={(window.__resources && window.__resources.music) || 'assets/lobby.ogg'} accent={accent} t={T} />

      {/* Nav */}
      <nav className="rust-nav" style={{
        position: 'sticky', top: 0, zIndex: 50,
        padding: '16px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'rgba(10,8,7,0.78)', backdropFilter: 'blur(14px)',
        borderBottom: '1px solid rgba(237,230,221,0.08)',
      }}>
        <div className="rust-nav-left" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <window.OxideLogo size={44} />
          <window.OxideWordmark color="#EDE6DD" size={22} />
          <span className="rust-nav-divider" style={{
            marginInlineStart: 16, paddingInlineStart: 16,
            borderInlineStart: '1px solid rgba(237,230,221,0.15)',
            fontFamily: 'ui-monospace, "JetBrains Mono", monospace', fontSize: 11, color: '#8a7e72',
            textTransform: 'uppercase', letterSpacing: '0.14em',
          }}>{T('nav_program')}</span>
        </div>
        <div className="rust-nav-right" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span className="rust-online-pill"><PlayersOnline accent={accent} t={T} /></span>
          <window.LangSwitcher lang={lang} setLang={setLang} accent={accent} t={T} />
          <Magnetic as="a" href={C.form_url} className="rust-nav-cta"
            style={{
              background: accent, color: '#fff', padding: '11px 20px', borderRadius: 2,
              fontFamily: 'inherit', fontSize: 12, fontWeight: 700, textTransform: 'uppercase',
              letterSpacing: '0.14em', textDecoration: 'none', border: 'none', cursor: 'pointer',
              display: 'inline-block',
            }}>{T('nav_join')}</Magnetic>
        </div>
      </nav>

      {/* HERO */}
      <section ref={heroRef} className="rust-hero" style={{
        position: 'relative', minHeight: 'calc(100vh - 65px)', padding: '72px 32px 48px',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        overflow: 'hidden', background: '#1a120c',
      }}>
        {/* HERO BACKGROUND IMAGE SLOT */}
        <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
          <window.ImageSlot id="hero-bg" {...SLOTS['hero-bg']} accent={accent} dim={0.55} />
        </div>
        {/* warm dim layer */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, zIndex: 0,
          background: `linear-gradient(180deg, rgba(26,18,12,0.4) 0%, rgba(26,18,12,0.2) 40%, rgba(26,18,12,0.6) 75%, rgba(26,18,12,0.95) 100%)`,
        }} />
        {/* brand red ember glow */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, zIndex: 0,
          background: 'radial-gradient(ellipse at 50% 110%, rgba(230,48,40,0.22), transparent 60%)',
        }} />
        <EmberCanvas />

        {/* giant headline */}
        <div style={{ position: 'relative', zIndex: 2, marginTop: 'auto' }}>
          <div style={{
            fontFamily: '"Archivo Black", "Anton", Impact, sans-serif',
            fontSize: 'clamp(60px, 11vw, 200px)', lineHeight: 1.0, fontWeight: 900,
            letterSpacing: '-0.03em', textTransform: 'uppercase',
          }}>
            {heroH1.map((line, i) => (
              <RevealRow key={i} delay={i * 120}>
                <div style={{
                  transform: `translateX(${(mouse.x - 0.5) * (i % 2 ? -12 : 12)}px)`,
                  transition: 'transform .6s cubic-bezier(.2,.8,.2,1)',
                  display: 'block',
                  paddingTop: '0.05em',
                  background: i === 1 ? `linear-gradient(180deg, ${accent} 0%, #FF8A3D 100%)` : 'linear-gradient(180deg, #EDE6DD 0%, #9a8b7c 100%)',
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
                }}>{line}</div>
              </RevealRow>
            ))}
          </div>
        </div>

        {/* bottom row */}
        <div className="rust-hero-bottom" style={{
          display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 32,
          marginTop: 56, position: 'relative', zIndex: 2,
        }}>
          <RevealRow delay={480}>
            <p style={{ maxWidth: 480, fontSize: 16, lineHeight: 1.5, color: '#b8ac9f' }}>
              {T('sub')}
            </p>
          </RevealRow>
          <RevealRow delay={560}>
            <div className="rust-hero-actions" style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
              <Magnetic as="a" href={C.form_url} strength={0.4}
                style={{
                  background: accent, color: '#fff', padding: '20px 32px', borderRadius: 2,
                  fontFamily: 'inherit', fontSize: 14, fontWeight: 800, textTransform: 'uppercase',
                  letterSpacing: '0.18em', textDecoration: 'none', border: 'none', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 16, boxShadow: `0 0 40px ${accent}50`,
                }}>
                <span>{T('cta')}</span>
                <span style={{ fontSize: 18 }}>→</span>
              </Magnetic>
              <button
                type="button"
                onClick={() => setTrailerOpen(true)}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = accent; e.currentTarget.style.color = '#EDE6DD'; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(237,230,221,0.25)'; e.currentTarget.style.color = '#b8ac9f'; }}
                style={{
                  background: 'transparent', color: '#b8ac9f',
                  padding: '18px 24px', borderRadius: 2,
                  fontFamily: 'inherit', fontSize: 13, fontWeight: 700, textTransform: 'uppercase',
                  letterSpacing: '0.18em',
                  border: '1px solid rgba(237,230,221,0.25)', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 14,
                  transition: 'border-color .2s, color .2s',
                }}>
                <span style={{
                  width: 22, height: 22, borderRadius: '50%', background: accent,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  flex: '0 0 auto',
                }}>
                  <svg width="9" height="11" viewBox="0 0 9 11" fill="none" aria-hidden="true">
                    <path d="M0 0 L9 5.5 L0 11 Z" fill="#fff"/>
                  </svg>
                </span>
                <span>{T('watch_trailer')}</span>
              </button>
              <div className="rust-hero-cta-sub" style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, color: '#8a7e72', textTransform: 'uppercase', letterSpacing: '0.14em', lineHeight: 1.6 }}>
                {T('cta_sub').split(' · ').map((s, i) => <div key={i}>{s}</div>)}
              </div>
            </div>
          </RevealRow>
        </div>
      </section>

      {/* STATS */}
      <section style={{ borderTop: '1px solid rgba(237,230,221,0.08)', borderBottom: '1px solid rgba(237,230,221,0.08)', background: '#0f0c0a', position: 'relative', zIndex: 2 }}>
        <div className="rust-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {C.stats.map((s, i) => (
            <RevealRow key={i} delay={i * 90}>
              <div className="rust-stats-cell" style={{ padding: '44px 28px', borderInlineEnd: i < 3 ? '1px solid rgba(237,230,221,0.08)' : 'none' }}>
                <div style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, color: '#EDE6DD', letterSpacing: '-0.02em' }}>
                  <CountUp value={s.n} />
                </div>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: '#8a7e72', textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: 12 }}>
                  {cTxt(s.label)}
                </div>
              </div>
            </RevealRow>
          ))}
        </div>
      </section>

      {/* MARQUEE with handles */}
      <div className="rust-marquee-wrap" style={{ overflow: 'hidden', padding: '24px 0', background: accent, position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', animation: 'rust-marquee 40s linear infinite', gap: 48, whiteSpace: 'nowrap' }}>
          {[...C.creators, ...C.creators, ...C.creators].map((c, i) => (
            <span key={i} style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 22, color: '#fff', letterSpacing: '-0.01em' }}>
              {c.handle} <span style={{ opacity: 0.5, fontSize: 13, fontFamily: 'ui-monospace, monospace', marginInlineStart: 6 }}>{c.subs}</span>
              <span style={{ margin: '0 26px', color: 'rgba(255,255,255,0.4)' }}>●</span>
            </span>
          ))}
        </div>
        <style>{`@keyframes rust-marquee{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}`}</style>
      </div>

      {/* VALUES */}
      <section className="rust-section" style={{ padding: '120px 32px', position: 'relative', zIndex: 2 }}>
        <RevealRow>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>
            [ 002 / {T('sec_why')} ]
          </div>
          <h2 style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 'clamp(44px, 6.5vw, 104px)', lineHeight: 0.92, letterSpacing: '-0.025em', textTransform: 'uppercase', maxWidth: 1200, margin: '0 0 60px' }}>
            {T('why_h')}<br/>
            <span style={{ color: accent }}>{T('why_h2')}</span>
          </h2>
        </RevealRow>

        {/* Two image slots flanking the values grid for atmosphere */}
        <div className="rust-values-img" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24, height: 280 }}>
          <div style={{ position: 'relative' }}>
            <window.ImageSlot id="value-1" {...SLOTS['value-1']} accent={accent} />
          </div>
          <div style={{ position: 'relative' }}>
            <window.ImageSlot id="value-2" {...SLOTS['value-2']} accent={accent} />
          </div>
          <div style={{ position: 'relative' }}>
            <window.ImageSlot id="value-3" {...SLOTS['value-3']} accent={accent} />
          </div>
        </div>

        <div className="rust-values-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid rgba(237,230,221,0.08)' }}>
          {C.values.map((v, i) => (
            <RevealRow key={v.k} delay={i * 80}>
              <div style={{
                padding: '40px 32px',
                borderInlineEnd: (i % 3 !== 2) ? '1px solid rgba(237,230,221,0.08)' : 'none',
                borderBottom: i < 3 ? '1px solid rgba(237,230,221,0.08)' : 'none',
                minHeight: 300, position: 'relative', transition: 'background .3s',
              }} className="rust-value-card">
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: accent, letterSpacing: '0.2em' }}>{v.k}</div>
                <h3 style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 28, lineHeight: 1.1, textTransform: 'uppercase', letterSpacing: '-0.015em', margin: '48px 0 16px' }}>
                  {cTxt(v.t)}
                </h3>
                <p style={{ color: '#9a8e81', fontSize: 15, lineHeight: 1.55 }}>{cTxt(v.d)}</p>
              </div>
            </RevealRow>
          ))}
        </div>
        <style>{`.rust-value-card:hover{background:rgba(230,48,40,0.05)}`}</style>
      </section>

      {/* TIER PROGRESS */}
      <section className="rust-section" style={{ padding: '120px 32px', background: '#060403', position: 'relative', zIndex: 2 }}>
        <RevealRow>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>
            [ 003 / {T('sec_path')} ]
          </div>
          <h2 style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 'clamp(44px, 6.5vw, 104px)', lineHeight: 0.92, letterSpacing: '-0.025em', textTransform: 'uppercase', margin: '0 0 80px' }}>
            {T('path_h1')}<br/>{T('path_h2')}<span style={{ color: accent }}>{T('path_h3')}</span>
          </h2>
        </RevealRow>

        <div className="rust-path-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 56, alignItems: 'start' }}>
          <div>
            {/* progress rail */}
            <div className="rust-tier-rail-wrap" style={{ position: 'relative', marginBottom: 48 }}>
              <div className="rust-tier-rail" style={{ position: 'absolute', top: 27, left: '6%', right: '6%', height: 2, background: 'rgba(237,230,221,0.1)' }}>
                <div style={{
                  height: '100%',
                  width: `${(activeTier / 3) * 100}%`,
                  background: `linear-gradient(90deg, ${C.tiers[0].color}, ${C.tiers[activeTier].color})`,
                  transition: 'width .6s cubic-bezier(.2,.8,.2,1)',
                }} />
              </div>

              <RevealRow>
                <div style={{
                  position: 'absolute', top: -34, left: '50%', transform: 'translateX(-50%)',
                  fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.22em',
                  textTransform: 'uppercase', color: accent, display: 'flex', alignItems: 'center', gap: 8,
                  opacity: tierTouched ? 0 : 1, transition: 'opacity .4s ease', pointerEvents: 'none',
                  whiteSpace: 'nowrap',
                }}>
                  <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: accent, animation: 'rust-pulse-dot 1.4s ease-in-out infinite' }} />
                  {T('path_hint')}
                  <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: '50%', background: accent, animation: 'rust-pulse-dot 1.4s ease-in-out infinite' }} />
                </div>
              </RevealRow>

              <div className="rust-path-tiers" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', position: 'relative' }}>
                {C.tiers.map((tier, i) => {
                  const isActive = i === activeTier;
                  const isReached = i <= activeTier;
                  const isNextTarget = i === activeTier + 1 && activeTier < 3;
                  return (
                    <button key={tier.id} onClick={() => { setActiveTier(i); setTierTouched(true); }}
                      onMouseEnter={() => setHoverTier(i)} onMouseLeave={() => setHoverTier(null)}
                      className="rust-tier-btn"
                      style={{
                        background: 'transparent', border: 'none', cursor: 'pointer', padding: '8px 0 12px',
                        textAlign: 'center', color: 'inherit', fontFamily: 'inherit', position: 'relative',
                      }}>
                      <span aria-hidden="true" style={{
                        position: 'absolute', top: 8, left: '50%', width: 56, height: 56, marginLeft: -28,
                        borderRadius: '50%', border: `2px solid ${tier.color}`, pointerEvents: 'none',
                        opacity: isNextTarget ? 0.85 : 0,
                        animation: isNextTarget ? 'rust-ring-pulse 1.8s ease-out infinite' : 'none',
                      }} />
                      <div className="rust-tier-dot" style={{
                        width: 44, height: 44, borderRadius: '50%',
                        background: isReached ? tier.color : '#0a0807',
                        border: `2px solid ${isReached ? tier.color : (hoverTier === i ? tier.color : 'rgba(237,230,221,0.25)')}`,
                        margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 15, color: isReached ? '#0a0807' : (hoverTier === i ? tier.color : '#8a7e72'),
                        transition: 'transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s, box-shadow .3s',
                        transform: hoverTier === i ? 'translateY(-6px) scale(1.08)' : (isActive ? 'translateY(-3px) scale(1.04)' : 'translateY(0) scale(1)'),
                        boxShadow: isActive ? `0 0 30px ${tier.color}80, 0 0 0 6px ${tier.color}22`
                                 : hoverTier === i ? `0 10px 30px ${tier.color}55, 0 0 0 4px ${tier.color}1f` : 'none',
                      }}>{tier.id}</div>
                      <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10, color: hoverTier === i ? accent : '#8a7e72', textTransform: 'uppercase', letterSpacing: '0.14em', transition: 'color .25s' }}>
                        {T('path_level')} {tier.id}
                      </div>
                      <div style={{
                        fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 18, marginTop: 6,
                        color: isActive ? tier.color : (hoverTier === i ? '#FFFFFF' : '#EDE6DD'),
                        transition: 'color .25s, letter-spacing .25s',
                        textTransform: 'uppercase',
                        letterSpacing: hoverTier === i ? '0.02em' : '0',
                      }}>
                        {cTxt(tier.name)}
                      </div>
                      <div style={{ fontSize: 12, color: '#8a7e72', marginTop: 4 }}>{cTxt(tier.req)}</div>
                      <span aria-hidden="true" style={{
                        display: 'block', margin: '12px auto 0', height: 2, width: hoverTier === i || isActive ? 36 : 0,
                        background: tier.color, transition: 'width .35s cubic-bezier(.2,.8,.2,1)',
                      }} />
                    </button>
                  );
                })}
              </div>
            </div>

            {/* active tier detail */}
            <div key={activeTier} className="rust-tier-detail" style={{
              border: `1px solid ${C.tiers[activeTier].color}40`,
              background: `linear-gradient(135deg, ${C.tiers[activeTier].color}0d, transparent)`,
              padding: '40px 44px', animation: 'rust-fade-in .5s ease',
            }}>
              <div className="rust-tier-detail-grid" style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 48 }}>
                <div>
                  <div style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 72, color: C.tiers[activeTier].color, lineHeight: 0.9 }}>
                    0{C.tiers[activeTier].id}
                  </div>
                  <div style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 22, textTransform: 'uppercase', marginTop: 12 }}>
                    {cTxt(C.tiers[activeTier].name)}
                  </div>
                  <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: '#8a7e72', textTransform: 'uppercase', letterSpacing: '0.14em', marginTop: 8 }}>
                    {T('path_req')}: {cTxt(C.tiers[activeTier].req)}
                  </div>
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '14px 32px' }}>
                  {C.tiers[activeTier].hl.map((h, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15, color: '#EDE6DD', lineHeight: 1.4 }}>
                      <span style={{ color: C.tiers[activeTier].color, marginTop: 6, flexShrink: 0 }}>▸</span>
                      <span>{cTxt(h)}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* Tier-Legend portrait image slot — locked to side */}
          <div className="rust-tier-legend" style={{ position: 'relative', height: 600, marginTop: -8 }}>
            <window.ImageSlot id="tier-legend" {...SLOTS['tier-legend']} accent={accent} />
          </div>
        </div>
      </section>

      {/* CREATORS WALL */}
      <section className="rust-section" style={{ padding: '120px 32px', position: 'relative', zIndex: 2 }}>
        <RevealRow>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>
            [ 004 / {T('sec_squad')} ]
          </div>
        </RevealRow>

        {/* Wide collab image with headline overlaid in the center */}
        <div className="rust-collab" style={{
          position: 'relative', height: 520, marginBottom: 32,
          overflow: 'hidden',
        }}>
          <window.ImageSlot id="creators-collab" {...SLOTS['creators-collab']} accent={accent} />
          {/* dark vignette so the headline reads */}
          <div style={{
            position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
            background: 'radial-gradient(ellipse at center, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.35) 45%, rgba(10,8,7,0.7) 100%)',
          }} />
          {/* Headline overlay */}
          <div style={{
            position: 'absolute', inset: 0, zIndex: 2,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '0 32px', textAlign: 'center', pointerEvents: 'none',
          }}>
            <RevealRow>
              <h2 style={{
                fontFamily: '"Archivo Black", Impact, sans-serif',
                fontSize: 'clamp(48px, 7.5vw, 128px)',
                lineHeight: 0.92, letterSpacing: '-0.025em', textTransform: 'uppercase',
                margin: 0, color: '#EDE6DD',
                textShadow: '0 4px 24px rgba(0,0,0,0.7), 0 1px 0 rgba(0,0,0,0.5)',
              }}>
                {T('squad_h1')} <span style={{ color: accent }}>{T('squad_h2')}</span>
              </h2>
            </RevealRow>
          </div>
        </div>

        <CreatorsSlider accent={accent} T={T}>
        <div className="rust-creators-grid" style={{ display: 'flex', gap: 2, background: 'rgba(237,230,221,0.08)' }}>
          {[...C.creators, ...C.creators, ...C.creators].map((c, i) => (
            <RevealRow key={c.handle + '-' + i} delay={(i % C.creators.length) * 60} className="rust-creator-slot" style={{ flex: '0 0 var(--card-w, 20%)', minWidth: 0 }}>
              <a href={c.url} target="_blank" rel="noopener noreferrer"
                 className="rust-creator-card"
                 style={{
                aspectRatio: '1', background: `linear-gradient(${135 + i * 15}deg, #1a0f0c 0%, #0a0807 100%)`,
                padding: '22px 20px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                position: 'relative', overflow: 'hidden', transition: 'transform .35s cubic-bezier(.2,.8,.2,1), background .35s',
                textDecoration: 'none', color: 'inherit',
              }}>
                <div style={{ position: 'absolute', inset: 0, backgroundImage: `repeating-linear-gradient(45deg, transparent 0, transparent 8px, rgba(230,48,40,0.03) 8px, rgba(230,48,40,0.03) 9px)`, pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '60%', overflow: 'hidden' }}>
                  <img src={c.avatar} alt={c.handle} className="rust-creator-img"
                    style={{
                      width: '100%', height: '100%', objectFit: 'cover',
                      filter: 'grayscale(0.2) contrast(1.05) brightness(0.85)',
                      transition: 'transform .6s cubic-bezier(.2,.8,.2,1), filter .4s',
                    }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,8,7,0) 35%, rgba(10,8,7,0.7) 80%, rgba(10,8,7,1) 100%)' }} />
                  <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(135deg, ${accent}18, transparent 55%)`, mixBlendMode: 'screen' }} />
                </div>

                {(() => {
                  const list = c.platforms || [c.platform];
                  const labelOf = (p) => (p === 'YT' ? 'YouTube' : p === 'TW' ? 'Twitch' : 'TikTok');
                  return (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, alignSelf: 'flex-start' }}>
                      {list.map((p, idx) => (
                        <div key={p + idx} style={{
                          fontFamily: 'ui-monospace, monospace', fontSize: 10, color: '#EDE6DD',
                          textTransform: 'uppercase', letterSpacing: '0.18em', position: 'relative',
                          display: 'inline-flex', alignItems: 'center', gap: 6,
                          background: 'rgba(10,8,7,0.7)', padding: '5px 9px', backdropFilter: 'blur(4px)',
                          border: `1px solid ${accent}66`,
                        }}>
                          <span style={{ display: 'inline-block', width: 5, height: 5, borderRadius: '50%', background: accent }} />
                          {labelOf(p)}
                        </div>
                      ))}
                    </div>
                  );
                })()}

                <div style={{ position: 'relative' }}>
                  <div style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 20, color: '#EDE6DD', letterSpacing: '-0.01em', lineHeight: 1, textTransform: 'none' }}>{c.handle}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 10 }}>
                    <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: accent, letterSpacing: '0.05em' }}>{c.subs} <span style={{ color: '#8a7e72' }}>{T('squad_subs')}</span></div>
                    <span className="rust-creator-arrow" style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: '#8a7e72', transition: 'transform .35s, color .35s' }}>↗</span>
                  </div>
                </div>
              </a>
            </RevealRow>
          ))}
        </div>
        </CreatorsSlider>
        <style>{`
          .rust-creator-card:hover { background: linear-gradient(135deg, #2a1410 0%, #1a0807 100%) !important; transform: translateY(-4px); }
          .rust-creator-card:hover .rust-creator-img { transform: scale(1.08); filter: grayscale(0) contrast(1.1) brightness(1) !important; }
          .rust-creator-card:hover .rust-creator-arrow { color: ${accent} !important; transform: translate(3px, -3px); }
        `}</style>
      </section>

      {/* FAQ */}
      <section className="rust-section rust-faq" style={{ padding: '120px 32px', background: '#060403', position: 'relative', zIndex: 2, overflow: 'hidden' }}>
        {/* atmospheric image as faint backdrop */}
        <div style={{ position: 'absolute', inset: 0, opacity: 0.35, zIndex: 0 }}>
          <window.ImageSlot id="faq-bg" {...SLOTS['faq-bg']} accent={accent} dim={0.7} />
        </div>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <RevealRow>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: accent, textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>
              [ 005 / {T('sec_faq')} ]
            </div>
            <h2 style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 'clamp(44px, 6.5vw, 104px)', lineHeight: 0.92, letterSpacing: '-0.025em', textTransform: 'uppercase', margin: '0 0 60px' }}>
              {T('faq_h')}
            </h2>
          </RevealRow>
          <div>
            {C.faq.map((f, i) => (
              <RevealRow key={i} delay={i * 60}>
                <div style={{
                  borderTop: '1px solid rgba(237,230,221,0.08)',
                  borderBottom: i === C.faq.length - 1 ? '1px solid rgba(237,230,221,0.08)' : 'none',
                  ...(f.important ? {
                    background: `linear-gradient(90deg, ${accent}14 0%, ${accent}06 40%, transparent 100%)`,
                    borderTop: `1px solid ${accent}55`,
                    borderBottom: `1px solid ${accent}55`,
                    borderInlineStart: `3px solid ${accent}`,
                    paddingInlineStart: 20,
                    marginTop: -1,
                  } : {}),
                }}>
                  <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                    style={{
                      width: '100%', padding: '28px 0', background: 'transparent', border: 'none',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      cursor: 'pointer', color: '#EDE6DD', fontFamily: 'inherit', textAlign: isRTL ? 'right' : 'left',
                    }}>
                    <span style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 22, textTransform: 'uppercase', letterSpacing: '-0.01em', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                      {f.important && (
                        <span style={{
                          fontFamily: 'ui-monospace, monospace', fontSize: 10, fontWeight: 700,
                          letterSpacing: '0.22em', color: '#fff',
                          background: accent, padding: '5px 9px', borderRadius: 2,
                          textTransform: 'uppercase', lineHeight: 1,
                          display: 'inline-flex', alignItems: 'center', gap: 6,
                        }}>
                          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
                            <path d="M5 0 L5 6 M5 8 L5 10" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
                          </svg>
                          {T('important')}
                        </span>
                      )}
                      {cTxt(f.q)}
                    </span>
                    <span style={{ fontSize: 24, color: accent, transition: 'transform .3s', transform: openFaq === i ? 'rotate(45deg)' : 'none' }}>+</span>
                  </button>
                  <div style={{ maxHeight: openFaq === i ? 360 : 0, overflow: 'hidden', transition: 'max-height .4s ease' }}>
                    <div className="rust-faq-answer" style={{ padding: '0 0 32px', maxWidth: 760, color: f.important ? '#c8b9a8' : '#9a8e81', fontSize: 17, lineHeight: 1.55 }}>
                      {cTxt(f.a)}
                    </div>
                  </div>
                </div>
              </RevealRow>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="rust-final" style={{
        padding: '140px 32px', position: 'relative', zIndex: 2,
        textAlign: 'center', overflow: 'hidden',
      }}>
        {/* full-bleed final cta image */}
        <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
          <window.ImageSlot id="final-cta" {...SLOTS['final-cta']} accent={accent} dim={0.65} />
        </div>
        <div style={{ position: 'absolute', inset: 0, zIndex: 0,
          background: `radial-gradient(ellipse at center, ${accent}30 0%, transparent 70%)`,
        }} />

        <div style={{ position: 'relative', zIndex: 1 }}>
          <RevealRow>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: '#FFF8F0', textTransform: 'uppercase', letterSpacing: '0.2em', marginBottom: 16 }}>
              [ 006 / {T('sec_ready')} ]
            </div>
            <h2 style={{ fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 'clamp(60px, 10vw, 180px)', lineHeight: 0.88, letterSpacing: '-0.03em', textTransform: 'uppercase', margin: '0 auto 40px', maxWidth: 1400 }}>
              {T('final_h1')}<br/><span style={{
                background: 'linear-gradient(180deg, #FFF8F0 0%, #EDE6DD 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
                textShadow: '0 4px 40px rgba(0,0,0,0.6)',
              }}>{T('final_h2')}</span>
            </h2>
            <p style={{ maxWidth: 560, margin: '0 auto 56px', color: '#d8ccbf', fontSize: 17, lineHeight: 1.5 }}>
              {T('final_p')}
            </p>
            <Magnetic as="a" href={C.form_url} strength={0.5} className="rust-final-cta"
              style={{
                background: accent, color: '#fff', padding: '28px 56px', borderRadius: 2,
                fontFamily: '"Archivo Black", Impact, sans-serif', fontSize: 20, fontWeight: 900, textTransform: 'uppercase',
                letterSpacing: '0.18em', textDecoration: 'none', border: 'none', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 20, boxShadow: `0 0 60px ${accent}70`,
              }}>
              <span>{T('final_cta')}</span>
              <span>→</span>
            </Magnetic>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: '#b8ac9f', textTransform: 'uppercase', letterSpacing: '0.18em', marginTop: 32 }}>
              {T('final_sub')}
            </div>
          </RevealRow>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="rust-footer" style={{ padding: '40px 32px 40px 32px', borderTop: '1px solid rgba(237,230,221,0.08)', position: 'relative', zIndex: 2, background: '#060403' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20, fontFamily: 'ui-monospace, monospace', fontSize: 11, color: '#5a5045', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <window.OxideLogo size={24} />
            <span>© 2026 OXIDE · {T('nav_program')}</span>
          </div>
          <div className="rust-footer-links" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 24, paddingRight: 96, rowGap: 12 }}>
            <a href="https://discord.gg/k4SfjAZBat" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>Discord</a>
            <a href="https://www.youtube.com/@playoxxxide/videos" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>YouTube</a>
            <a href="https://www.twitch.tv/directory/category/oxide-survival-island" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>Twitch</a>
            <a href="https://t.me/playoxide" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>Telegram</a>
            <a href="https://www.tiktok.com/@playoxide" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>TikTok</a>
            <a href="https://www.instagram.com/playoxide/" target="_blank" rel="noopener" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>Instagram</a>
            {lang === 'ru' && (
              <a href="#" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28 }}>VK</a>
            )}
            <a href="#" onClick={(e) => { e.preventDefault(); setSiteSoonOpen(true); }} style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', height: 28, cursor: 'pointer' }}>playoxide.com</a>
            <a href="https://support.playoxide.com/hc/en/oxide" target="_blank" rel="noopener" style={{
              color: accent, textDecoration: 'none',
              border: `1px solid ${accent}80`,
              padding: '0 12px',
              letterSpacing: '0.18em',
              display: 'inline-flex', alignItems: 'center', height: 28,
              boxSizing: 'border-box',
              transition: 'background .25s, color .25s, border-color .25s',
            }} onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.color = '#fff'; e.currentTarget.style.borderColor = accent; }}
               onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = accent; e.currentTarget.style.borderColor = accent + '80'; }}
            >{T('support')} ↗</a>
          </div>
        </div>
      </footer>

      {/* TRAILER MODAL */}
      {trailerOpen && (
        <div
          onClick={() => setTrailerOpen(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 9999,
            background: 'rgba(6, 4, 3, 0.92)',
            backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '32px',
            animation: 'oxFade .25s ease-out',
          }}
          role="dialog"
          aria-modal="true"
          aria-label={T('trailer_aria')}
        >
          <style>{`@keyframes oxFade { from { opacity: 0; } to { opacity: 1; } } @keyframes oxRise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }`}</style>
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              position: 'relative', width: 'min(1200px, 100%)',
              animation: 'oxRise .35s cubic-bezier(.2,.8,.2,1)',
            }}
          >
            {/* Close button */}
            <button
              type="button"
              onClick={() => setTrailerOpen(false)}
              aria-label={T('close_trailer')}
              onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.borderColor = accent; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(26,18,12,0.8)'; e.currentTarget.style.borderColor = 'rgba(237,230,221,0.25)'; }}
              style={{
                position: 'absolute', top: -52, right: 0,
                width: 44, height: 44, borderRadius: '50%',
                background: 'rgba(26,18,12,0.8)',
                border: '1px solid rgba(237,230,221,0.25)',
                color: '#EDE6DD', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background .2s, border-color .2s',
              }}
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                <path d="M1 1 L13 13 M13 1 L1 13" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
            </button>
            {/* 16:9 video frame */}
            <div style={{
              position: 'relative', width: '100%', paddingBottom: '56.25%',
              background: '#000',
              border: `1px solid ${accent}`,
              boxShadow: `0 0 80px ${accent}40, 0 30px 80px rgba(0,0,0,0.6)`,
              overflow: 'hidden',
            }}>
              <iframe
                src="https://www.youtube.com/embed/mZpvqFTlznE?autoplay=1&rel=0&modestbranding=1&playsinline=1"
                title="OXIDE trailer"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"
                allowFullScreen
                referrerPolicy="strict-origin-when-cross-origin"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
              />
            </div>
            <div style={{
              marginTop: 14, textAlign: 'center',
              fontFamily: 'ui-monospace, monospace', fontSize: 10, color: '#8a7e72',
              textTransform: 'uppercase', letterSpacing: '0.2em',
            }}>
              {T('trailer_close_hint')}
            </div>
          </div>
        </div>
      )}

      {/* SITE COMING SOON MODAL */}
      {siteSoonOpen && (
        <div
          onClick={() => setSiteSoonOpen(false)}
          style={{
            position: 'fixed', inset: 0, zIndex: 9999,
            background: 'rgba(10,8,7,0.92)', backdropFilter: 'blur(10px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            animation: 'oxFade .35s ease both', padding: 24,
          }}
          role="dialog" aria-modal="true"
        >
          <style>{`
            @keyframes oxSoonRise { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
            @keyframes oxSoonScan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
            @keyframes oxSoonPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
            @keyframes oxSoonGlitch {
              0%, 92%, 100% { transform: translate(0); }
              93% { transform: translate(-2px, 1px); }
              94% { transform: translate(2px, -1px); }
              95% { transform: translate(-1px, -1px); }
              96% { transform: translate(1px, 1px); }
            }
            @keyframes oxSoonFlicker {
              0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
              20%, 24%, 55% { opacity: 0.4; }
            }
            @keyframes oxSoonGearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
          `}</style>
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              position: 'relative', width: '100%', maxWidth: 540,
              background: 'linear-gradient(180deg, #1a120c 0%, #0f0a07 100%)',
              border: `1px solid ${accent}40`,
              padding: '56px 48px 44px',
              animation: 'oxSoonRise .5s cubic-bezier(.2,.8,.2,1) both',
              overflow: 'hidden',
            }}
          >
            {/* corner brackets */}
            <div style={{ position: 'absolute', top: 12, left: 12, width: 18, height: 18, borderTop: `2px solid ${accent}`, borderLeft: `2px solid ${accent}` }} />
            <div style={{ position: 'absolute', top: 12, right: 12, width: 18, height: 18, borderTop: `2px solid ${accent}`, borderRight: `2px solid ${accent}` }} />
            <div style={{ position: 'absolute', bottom: 12, left: 12, width: 18, height: 18, borderBottom: `2px solid ${accent}`, borderLeft: `2px solid ${accent}` }} />
            <div style={{ position: 'absolute', bottom: 12, right: 12, width: 18, height: 18, borderBottom: `2px solid ${accent}`, borderRight: `2px solid ${accent}` }} />
            {/* scanline sweep */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 2,
              background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
              animation: 'oxSoonScan 3s linear infinite',
            }} />
            {/* grain overlay */}
            <div style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              backgroundImage: `repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(230,48,40,0.025) 6px, rgba(230,48,40,0.025) 7px)`,
            }} />

            {/* close X */}
            <button
              type="button"
              onClick={() => setSiteSoonOpen(false)}
              aria-label="Close"
              style={{
                position: 'absolute', top: 16, right: 16, zIndex: 2,
                width: 32, height: 32, padding: 0,
                background: 'transparent', border: '1px solid rgba(237,230,221,0.2)',
                color: '#b8ac9f', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'background .2s, border-color .2s, color .2s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.borderColor = accent; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(237,230,221,0.2)'; e.currentTarget.style.color = '#b8ac9f'; }}
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M6 6L18 18M18 6L6 18"/>
              </svg>
            </button>

            <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
              {/* animated gear / construction icon */}
              <div style={{
                width: 96, height: 96, margin: '0 auto 28px', position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  border: `2px dashed ${accent}55`, borderRadius: '50%',
                  animation: 'oxSoonGearSpin 8s linear infinite',
                }} />
                <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="1.6"
                  style={{ animation: 'oxSoonGearSpin 6s linear infinite reverse' }}>
                  <path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12"/>
                  <circle cx="12" cy="12" r="5"/>
                  <circle cx="12" cy="12" r="2" fill={accent}/>
                </svg>
              </div>

              {/* status pill */}
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontFamily: 'ui-monospace, monospace', fontSize: 10,
                color: accent, textTransform: 'uppercase', letterSpacing: '0.24em',
                padding: '6px 12px', border: `1px solid ${accent}55`,
                marginBottom: 22,
              }}>
                <span style={{
                  width: 6, height: 6, background: accent, borderRadius: '50%',
                  animation: 'oxSoonPulse 1.2s ease-in-out infinite',
                }} />
                <span>{T('soon_status')}</span>
              </div>

              <h2 style={{
                fontFamily: '"Archivo Black", Impact, sans-serif',
                fontSize: 'clamp(36px, 5vw, 52px)', lineHeight: 0.95,
                letterSpacing: '-0.02em', textTransform: 'uppercase',
                margin: '0 0 18px', color: '#FFF8F0',
                animation: 'oxSoonFlicker 4s linear infinite',
              }}>
                {T('soon_title')}
              </h2>

              <p style={{
                margin: '0 auto 28px', maxWidth: 380,
                fontSize: 15, lineHeight: 1.55, color: '#b8ac9f',
              }}>
                {T('soon_body')}
              </p>

              {/* progress bar */}
              <div style={{
                position: 'relative', height: 4, background: 'rgba(237,230,221,0.08)',
                margin: '0 auto 12px', maxWidth: 280, overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
                  animation: 'oxSoonScan 1.8s linear infinite',
                }} />
              </div>
              <div style={{
                fontFamily: 'ui-monospace, monospace', fontSize: 10,
                color: '#8a7e72', textTransform: 'uppercase', letterSpacing: '0.2em',
              }}>
                {T('soon_hint')}
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.RustSite = RustSite;