// homeView.jsx — landing / intro screen (elevated)
const { useState: useHomeSt, useEffect: useHomeEf, useRef: useHomeRef } = React;

// ── Crafted line icons (no emoji) ───────────────────────────────────────────
const StepIcon = ({ type }) => {
  const common = { width:26, height:26, viewBox:'0 0 24 24', fill:'none',
    stroke:'currentColor', strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' };
  if (type === 'draft') return (
    <svg {...common}>
      <rect x="3.5" y="3.5" width="17" height="17" rx="3" />
      <circle cx="8" cy="8" r="1.1" fill="currentColor" stroke="none" />
      <circle cx="16" cy="8" r="1.1" fill="currentColor" stroke="none" />
      <circle cx="12" cy="12" r="1.1" fill="currentColor" stroke="none" />
      <circle cx="8" cy="16" r="1.1" fill="currentColor" stroke="none" />
      <circle cx="16" cy="16" r="1.1" fill="currentColor" stroke="none" />
    </svg>
  );
  if (type === 'major') return (
    <svg {...common}>
      <path d="M4 5h5v14H4z" opacity="0.4" />
      <path d="M9 8h4M9 16h4" />
      <path d="M13 12h4" />
      <path d="M17 5h3v14h-3" opacity="0.4" />
      <path d="M17 12h3" />
    </svg>
  );
  return (
    <svg {...common}>
      <path d="M7 4h10v4a5 5 0 0 1-10 0V4z" />
      <path d="M7 6H4v1a3 3 0 0 0 3 3M17 6h3v1a3 3 0 0 1-3 3" />
      <path d="M9.5 14.5 9 19h6l-.5-4.5M8 19h8" />
    </svg>
  );
};

const TROPHY_GALLERY_IMAGES = [
  {
    src:'https://commons.wikimedia.org/wiki/Special:Redirect/file/MLG_Columbus_CSGO_Major_cup.jpg?width=960',
    title:'MLG Columbus',
    alt:'MLG Columbus CSGO Major trophy on stage',
    source:'Wikimedia Commons',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/JOAS8BFUtjg8dW6P6kSQXp.jpg?auto=compress&ixlib=java-2.1.0&q=75&s=ebeb5dc872af590cd3250f5f0b168eb2&w=800',
    title:'Katowice 2015',
    alt:'Fnatic celebrating with the Katowice Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/PBOqV04yNAYR_NL3PeD-Kp.jpg?auto=compress&ixlib=java-2.1.0&q=75&s=99184782c2bfe092ab0d30a09cf7cc38&w=800',
    title:'Cologne 2014',
    alt:'Ninjas in Pyjamas player lifting the Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/qr2xrl-97vlBGQiUxLgoCl.jpg?auto=compress&ixlib=java-2.1.0&q=75&s=4d8972a93f45aaba07c37943bc5afdd4&w=800',
    title:'NIP Champions',
    alt:'Ninjas in Pyjamas huddled around the Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/0W-VbKsMW3qq8H8AkVCQNm.jpg?auto=compress&ixlib=java-2.1.0&q=75&s=ad5f0d31505008ba25e58b0238e2b5e0&w=800',
    title:'DreamHack Winter',
    alt:'LDLC celebrating while lifting the Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/FJuwUZ9nfxJ7raBMpFzGYt.jpg?auto=compress&ixlib=java-2.1.0&q=75&s=e26958c4f8e45a1cf8e758fbc18e4584&w=800',
    title:'Berlin 2019',
    alt:'Astralis raising the StarLadder Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/3dCcdKUYzTvxYIKd6BY6QF.jpg?auto=compress&ixlib=java-2.1.0&m=%2Fm.png&mw=107&mx=20&my=473&q=75&s=548774f2e5597b8f0b71259ccbeca0db&w=800',
    title:'Stockholm 2021',
    alt:'Natus Vincere celebrating the Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/InCOIS-OCwKolsDApURbyh.jpg?auto=compress&ixlib=java-2.1.0&m=%2Fm.png&mw=107&mx=20&my=473&q=75&s=d9cbed37f134c503cf4ba49150a3b602&w=800',
    title:'Antwerp 2022',
    alt:'FaZe captain lifting the Antwerp Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/YrQnESLnRv5M5576Jq0nt7.jpg?auto=compress&ixlib=java-2.1.0&m=%2Fm.png&mw=107&mx=20&my=473&q=75&s=8a51310ab8d1a35315c7ce0164ec7014&w=800',
    title:'Rio 2022',
    alt:'Outsiders standing with the IEM Rio Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/kHucQkVgRbLePmQEylDw7c.jpg?auto=compress&ixlib=java-2.1.0&m=%2Fm.png&mw=107&mx=20&my=474&q=75&s=a4b22fcc1c92e1eaa5b374653dca845a&w=800',
    title:'Rio Trophy',
    alt:'Outsiders coach holding the IEM Rio Major trophy',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/3CBb0bcdV3uSFoAHPtMqSG.jpg?auto=compress&ixlib=java-2.1.0&m=%2Fm.png&mw=107&mx=20&my=474&q=75&s=34863f8b0daa8f0b33d51fb74fec093e&w=800',
    title:'IEM Rio Cup',
    alt:'IEM Rio Major trophy close-up',
    source:'HLTV',
  },
  {
    src:'https://img-cdn.hltv.org/gallerypicture/ZKdIbLtqKEOjFXt-E3LbaZ.jpg?auto=compress&ixlib=java-2.1.0&m=%2Fm.png&mw=107&mx=20&my=473&q=75&s=cbb2819002f3803414f47780f098f43c&w=800',
    title:'Paris 2023',
    alt:'Vitality players lifting the BLAST Paris Major trophy',
    source:'HLTV',
  },
];

const SUPPORT_CHANNELS = [
  {
    id:'email',
    label:'Contato e parcerias',
    hint:'copiar e-mail',
    value:'cryptoschulx1@gmail.com',
  },
  {
    id:'evm',
    label:'Doação cripto',
    hint:'copiar endereço EVM',
    value:'0x5323DBc3f33643BB5C1D3bF12f87F836b754f371',
  },
  {
    id:'steam',
    label:'Trade Link Steam',
    hint:'copiar link de troca',
    value:'https://steamcommunity.com/tradeoffer/new/?partner=108742866&token=kOAzZtBP',
  },
];

function CopyGlyph({ size = 15 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true">
      <rect x="9" y="9" width="11" height="11" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  );
}

function SupportProjectMenu({ isMobile }) {
  const [open, setOpen] = useHomeSt(false);
  const [copied, setCopied] = useHomeSt(null);
  const wrapRef = useHomeRef(null);

  useHomeEf(() => {
    if (!open) return undefined;
    const onPointerDown = event => {
      if (!wrapRef.current?.contains(event.target)) setOpen(false);
    };
    const onKeyDown = event => {
      if (event.key === 'Escape') setOpen(false);
    };
    document.addEventListener('pointerdown', onPointerDown);
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('pointerdown', onPointerDown);
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [open]);

  useHomeEf(() => {
    if (!copied) return undefined;
    const timer = setTimeout(() => setCopied(null), 1400);
    return () => clearTimeout(timer);
  }, [copied]);

  async function copyValue(channel) {
    try {
      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(channel.value);
      } else {
        const area = document.createElement('textarea');
        area.value = channel.value;
        area.setAttribute('readonly', '');
        area.style.position = 'fixed';
        area.style.left = '-9999px';
        document.body.appendChild(area);
        area.select();
        document.execCommand('copy');
        document.body.removeChild(area);
      }
      setCopied(channel.id);
    } catch (_) {
      setCopied('erro');
    }
  }

  return (
    <div ref={wrapRef} style={{
      position:'relative', display:'flex', justifyContent:isMobile ? 'stretch' : 'flex-end',
      paddingTop:isMobile ? 14 : 18, zIndex:8,
    }}>
      <button
        type="button"
        data-sound="none"
        onClick={() => setOpen(v => !v)}
        aria-expanded={open}
        style={{
          width:isMobile ? '100%' : 'auto', minHeight:38,
          display:'inline-flex', alignItems:'center', justifyContent:'center', gap:9,
          padding:'0 13px', background:open ? 'rgba(244,165,35,0.12)' : 'rgba(23,26,27,0.72)',
          border:`1px solid ${open ? 'rgba(244,165,35,0.38)' : 'var(--border-2)'}`,
          borderRadius:'var(--r-md)', color:open ? 'var(--accent)' : 'var(--text-2)',
          cursor:'pointer', fontFamily:'var(--font-cond)', fontSize:12, fontWeight:900,
          letterSpacing:'0.1em', textTransform:'uppercase',
          transition:'border-color 140ms ease, background 140ms ease, color 140ms ease',
        }}>
        <span>Apoiar projeto</span>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
          aria-hidden="true" style={{ transform:open ? 'rotate(180deg)' : 'none',
            transition:'transform 140ms ease' }}>
          <path d="m6 9 6 6 6-6" />
        </svg>
      </button>

      {open && (
        <div role="menu" style={{
          position:'absolute', top:isMobile ? 58 : 62, right:0, left:isMobile ? 0 : 'auto',
          width:isMobile ? '100%' : 314, padding:8,
          background:'rgba(15,17,18,0.98)', border:'1px solid rgba(244,165,35,0.24)',
          borderRadius:'var(--r-lg)', boxShadow:'0 20px 60px rgba(0,0,0,0.48)',
          backdropFilter:'blur(8px)',
        }}>
          <div style={{ padding:'7px 8px 8px', borderBottom:'1px solid var(--border-1)',
            marginBottom:4 }}>
            <div style={{ fontFamily:'var(--font-cond)', fontSize:12, fontWeight:900,
              color:'var(--text-1)', letterSpacing:'0.1em', textTransform:'uppercase' }}>
              Apoio ao projeto
            </div>
            <div style={{ fontSize:11, color:'var(--text-3)', marginTop:2 }}>
              contato, patrocínio e contribuições
            </div>
          </div>

          {SUPPORT_CHANNELS.map(channel => {
            const ok = copied === channel.id;
            const error = copied === 'erro';
            return (
              <div key={channel.id} role="menuitem" style={{
                display:'grid', gridTemplateColumns:'1fr auto', alignItems:'center', gap:10,
                padding:'9px 8px', borderRadius:'var(--r-md)',
                background:ok ? 'rgba(90,173,92,0.10)' : 'transparent',
              }}>
                <div style={{ minWidth:0 }}>
                  <div style={{ fontFamily:'var(--font-cond)', fontSize:12, fontWeight:900,
                    color:'var(--text-1)', letterSpacing:'0.08em', textTransform:'uppercase' }}>
                    {channel.label}
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:7, marginTop:2,
                    color:ok ? '#69c16d' : 'var(--text-3)', fontSize:11 }}>
                    <span>{ok ? 'Copiado' : error ? 'Não foi possível copiar' : channel.hint}</span>
                    {!ok && !error && (
                      <span aria-hidden="true" style={{ letterSpacing:'0.08em' }}>••••••••</span>
                    )}
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => copyValue(channel)}
                  aria-label={`Copiar ${channel.label}`}
                  style={{
                    width:34, height:34, display:'inline-flex', alignItems:'center',
                    justifyContent:'center', background:ok ? 'rgba(90,173,92,0.16)' : 'var(--bg-3)',
                    border:`1px solid ${ok ? 'rgba(90,173,92,0.38)' : 'var(--border-2)'}`,
                    borderRadius:'var(--r-md)', color:ok ? '#69c16d' : 'var(--text-2)',
                    cursor:'pointer', transition:'background 120ms ease, color 120ms ease',
                  }}>
                  <CopyGlyph />
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function LaserFlowCanvas({
  color = '#EAB308',
  wispDensity = 1.4,
  flowSpeed = 0.35,
  verticalSizing = 0.7,
  horizontalSizing = 1,
  fogIntensity = 0.5,
  fogScale = 0.4,
  wispSpeed = 15,
  wispIntensity = 11.5,
  flowStrength = 0.65,
  decay = 2.8,
  horizontalBeamOffset = 0,
  verticalBeamOffset = -0.5,
}) {
  const canvasRef = useHomeRef(null);

  useHomeEf(() => {
    const canvas = canvasRef.current;
    if (!canvas) return undefined;
    const ctx = canvas.getContext('2d', { alpha:true });
    if (!ctx) return undefined;
    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
    let raf = 0;
    let width = 0;
    let height = 0;
    let dpr = 1;
    let t = 0;
    const rand = seed => {
      const x = Math.sin(seed * 127.1) * 43758.5453;
      return x - Math.floor(x);
    };
    const hex = color.replace('#', '');
    const rgb = [
      parseInt(hex.slice(0, 2), 16) || 234,
      parseInt(hex.slice(2, 4), 16) || 179,
      parseInt(hex.slice(4, 6), 16) || 8,
    ];
    const glow = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
    const rgba = a => `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;

    function resize() {
      const rect = canvas.getBoundingClientRect();
      dpr = Math.min(window.devicePixelRatio || 1, 1.75);
      width = Math.max(1, Math.floor(rect.width));
      height = Math.max(1, Math.floor(rect.height));
      canvas.width = Math.floor(width * dpr);
      canvas.height = Math.floor(height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function drawFrame() {
      t += reduceMotion ? 0.004 : 0.016 * flowSpeed;
      ctx.clearRect(0, 0, width, height);

      const cx = width * (0.5 + horizontalBeamOffset * 0.12);
      const floorY = height * (0.95 + verticalBeamOffset * 0.03);
      const auraW = width * Math.min(0.98, 0.22 + horizontalSizing * 0.32);
      const pulse = reduceMotion ? 0 : Math.sin(t * 3.2) * 0.08;

      ctx.save();
      ctx.translate(cx, floorY - height * 0.018);
      ctx.scale(1, 0.26);
      const aura = ctx.createRadialGradient(0, 0, 0, 0, 0, auraW);
      aura.addColorStop(0, rgba((0.38 + pulse) * fogIntensity));
      aura.addColorStop(0.14, rgba(0.22 * fogIntensity));
      aura.addColorStop(0.38, rgba(0.075 * fogIntensity));
      aura.addColorStop(0.70, rgba(0.018 * fogIntensity));
      aura.addColorStop(1, 'rgba(0,0,0,0)');
      ctx.fillStyle = aura;
      ctx.fillRect(-auraW, -auraW, auraW * 2, auraW * 2);
      ctx.restore();

      const fogBands = Math.max(4, Math.round(5 + fogScale * 10));
      for (let layer = 0; layer < fogBands; layer++) {
        const y = floorY - height * (0.025 + layer * 0.014);
        const half = auraW * (0.18 + layer * 0.095);
        const offset = Math.sin(t * (1.2 + layer * 0.18) + layer) * 8;
        const band = ctx.createLinearGradient(cx - half, y, cx + half, y);
        band.addColorStop(0, 'rgba(0,0,0,0)');
        band.addColorStop(0.42, rgba((0.018 + layer * 0.004) * fogIntensity));
        band.addColorStop(0.5, rgba((0.060 - layer * 0.004) * fogIntensity));
        band.addColorStop(0.58, rgba((0.018 + layer * 0.004) * fogIntensity));
        band.addColorStop(1, 'rgba(0,0,0,0)');
        ctx.strokeStyle = band;
        ctx.lineWidth = Math.max(1, 7 - layer);
        ctx.beginPath();
        ctx.moveTo(cx - half, y + offset * 0.12);
        ctx.bezierCurveTo(cx - half * 0.35, y - 8 + offset, cx + half * 0.35, y + 6 - offset, cx + half, y - offset * 0.10);
        ctx.stroke();
      }

      for (let layer = 0; layer < 5; layer++) {
        const y = floorY + layer * 3.2;
        const half = auraW * (0.42 + layer * 0.13);
        const line = ctx.createLinearGradient(cx - half, y, cx + half, y);
        line.addColorStop(0, 'rgba(0,0,0,0)');
        line.addColorStop(0.26, rgba(0.035 * flowStrength));
        line.addColorStop(0.45, rgba((0.18 + pulse) * flowStrength));
        line.addColorStop(0.5, rgba((0.95 - layer * 0.10) * flowStrength));
        line.addColorStop(0.55, rgba((0.18 + pulse) * flowStrength));
        line.addColorStop(0.74, rgba(0.035 * flowStrength));
        line.addColorStop(1, 'rgba(0,0,0,0)');
        ctx.strokeStyle = line;
        ctx.lineWidth = Math.max(1, 6 - layer);
        ctx.shadowColor = glow;
        ctx.shadowBlur = 26 - layer * 3;
        ctx.beginPath();
        ctx.moveTo(cx - half, y);
        ctx.quadraticCurveTo(cx, y - 4 - layer, cx + half, y);
        ctx.stroke();
      }
      ctx.shadowBlur = 0;

      if (!reduceMotion) raf = requestAnimationFrame(drawFrame);
    }

    resize();
    drawFrame();
    window.addEventListener('resize', resize);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
    };
  }, [color, wispDensity, flowSpeed, verticalSizing, horizontalSizing, fogIntensity,
    fogScale, wispSpeed, wispIntensity, flowStrength, decay, horizontalBeamOffset, verticalBeamOffset]);

  return <canvas ref={canvasRef} aria-hidden="true" style={{ width:'100%', height:'100%', display:'block' }} />;
}

function TrophyGalleryRail({ isMobile }) {
  if (isMobile) return null;
  const railImages = TROPHY_GALLERY_IMAGES.concat(TROPHY_GALLERY_IMAGES);
  const cardW = isMobile ? 156 : 238;
  const cardH = isMobile ? 92 : 142;
  return (
    <div aria-label="Galeria de trofeus de torneios de Counter-Strike" style={{
      position:'absolute', left:0, right:0, bottom:isMobile ? 66 : 82,
      zIndex:1, pointerEvents:'none',
    }}>
      <div style={{
        position:'relative', maxWidth:1180, margin:'0 auto',
        padding:isMobile ? '0 14px' : '0 22px', overflow:'hidden',
        WebkitMaskImage:'linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%)',
        maskImage:'linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%)',
      }}>
        <div className="trophy-rail-track" style={{
          display:'flex', alignItems:'center', gap:isMobile ? 10 : 14, width:'max-content',
          animation:isMobile ? 'none' : 'trophyRailScroll 54s linear infinite',
        }}>
          {railImages.map((item, index) => (
            <figure key={`${item.title}-${index}`} style={{
              position:'relative', width:cardW, height:cardH, flex:'0 0 auto',
              border:'1px solid rgba(234,179,8,0.30)',
              borderRadius:isMobile ? 8 : 10, overflow:'hidden',
              backgroundColor:'rgba(10,11,12,0.92)',
              backgroundImage:'linear-gradient(180deg, rgba(5,6,6,0.44), rgba(5,6,6,0.72))',
              boxShadow:isMobile ? '0 10px 24px rgba(0,0,0,0.36)' : '0 18px 52px rgba(0,0,0,0.46), 0 0 24px rgba(234,179,8,0.08)',
            }}>
              <img
                src={item.src}
                alt={item.alt}
                loading={index < (isMobile ? 2 : TROPHY_GALLERY_IMAGES.length) ? 'eager' : 'lazy'}
                decoding="async"
                onError={event => {
                  const figure = event.currentTarget.closest('figure');
                  if (figure) figure.style.display = 'none';
                }}
                style={{
                  width:'100%', height:'100%', objectFit:'contain', display:'block',
                  padding:isMobile ? 4 : 6,
                  filter:'saturate(1.08) contrast(1.04) brightness(0.95)',
                }}
              />
              <figcaption style={{
                position:'absolute', left:0, right:0, bottom:0,
                padding:isMobile ? '18px 9px 7px' : '24px 11px 9px',
                background:'linear-gradient(180deg, transparent, rgba(0,0,0,0.78))',
                color:'#f5f5f5', fontFamily:'var(--font-cond)', fontWeight:900,
                fontSize:isMobile ? 11 : 13, letterSpacing:'0.05em',
                textTransform:'uppercase', textShadow:'0 1px 2px rgba(0,0,0,0.85)',
              }}>
                {item.title}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </div>
  );
}

function getHeroTrailerSrc() {
  const locale = window.I18N?.getLocale?.() || document.documentElement.lang || 'pt-BR';
  return locale === 'pt-BR'
    ? '/assets/trailers/16a0-trailer-pt.mp4'
    : '/assets/trailers/16a0-trailer-en.mp4';
}

function getHeroTrailerPoster() {
  const locale = window.I18N?.getLocale?.() || document.documentElement.lang || 'pt-BR';
  return locale === 'pt-BR'
    ? '/assets/trailers/16a0-trailer-poster-pt.png'
    : '/assets/trailers/16a0-trailer-poster-en.png';
}

function HeroTrailer({ isMobile }) {
  const trailerSrc = getHeroTrailerSrc();
  const posterSrc = getHeroTrailerPoster();
  const locale = window.I18N?.getLocale?.() || 'pt-BR';
  const label = locale === 'pt-BR' ? 'Trailer oficial' : 'Official trailer';
  return (
    <aside aria-label={label} style={{
      position:'relative', width:'100%', maxWidth:isMobile ? 'calc(100vw - 40px)' : 720,
      minWidth:0, boxSizing:'border-box',
      justifySelf:isMobile ? 'stretch' : 'end',
      alignSelf:'center',
    }}>
      <div style={{
        position:'absolute', inset:isMobile ? -10 : -16,
        background:'radial-gradient(ellipse at 50% 44%, rgba(244,165,35,0.22), rgba(244,165,35,0.06) 38%, transparent 70%)',
        filter:'blur(18px)', opacity:0.9, pointerEvents:'none',
      }} />
      <div style={{
        position:'relative', overflow:'hidden', aspectRatio:'16 / 9',
        borderRadius:isMobile ? 10 : 12,
        border:'1px solid rgba(244,165,35,0.34)',
        background:'rgba(6,7,7,0.95)',
        boxShadow:'0 30px 90px rgba(0,0,0,0.56), 0 0 42px rgba(244,165,35,0.12)',
      }}>
        <video
          key={trailerSrc}
          src={trailerSrc}
          autoPlay={!isMobile}
          muted
          loop
          playsInline
          controls
          preload={isMobile ? 'none' : 'auto'}
          poster={posterSrc}
          style={{
            width:'100%', height:'100%', display:'block', objectFit:'cover',
            background:'#050606',
          }}
        />
        <div aria-hidden="true" style={{
          position:'absolute', inset:0, pointerEvents:'none',
          boxShadow:'inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 -80px 120px rgba(0,0,0,0.24)',
        }} />
      </div>
      <div style={{
        position:'relative', marginTop:12, display:'flex', alignItems:'center',
        justifyContent:isMobile ? 'center' : 'flex-end', gap:8,
        color:'var(--text-3)', fontFamily:'var(--font-cond)', fontSize:10,
        fontWeight:900, letterSpacing:'0.14em', textTransform:'uppercase',
      }}>
        <span style={{ width:26, height:1, background:'rgba(244,165,35,0.45)' }} />
        <span>{label}</span>
      </div>
    </aside>
  );
}

function HomeIntro({ onContinue }) {
  const [hov, setHov] = useHomeSt(false);
  const isMobile = window.useIsMobileView?.(760) || false;
  const features = ['Draft de lendas', 'Modo scout', 'Fase suíça', 'Playoffs BO3', 'MR13 ou MR16'];

  return (
    <main style={{ position:'relative', minHeight:'calc(100vh - 46px)', overflow:'hidden', width:'100%', maxWidth:'100vw' }}>
      <div style={{ position:'absolute', inset:'auto 0 0 0', height:isMobile ? '36vh' : '46vh',
        zIndex:0, opacity:1, pointerEvents:'none' }}>
        {isMobile ? (
          <div aria-hidden="true" style={{ width:'100%', height:'100%',
            background:'radial-gradient(ellipse at 50% 86%, rgba(234,179,8,0.24), rgba(234,179,8,0.07) 35%, transparent 72%)' }} />
        ) : (
          <LaserFlowCanvas
            color="#EAB308"
            wispDensity={0}
            flowSpeed={0.15}
            verticalSizing={0.5}
            horizontalSizing={2.4}
            fogIntensity={0.45}
            fogScale={0.25}
            wispSpeed={6}
            wispIntensity={15}
            flowStrength={1}
            decay={3}
            horizontalBeamOffset={0}
            verticalBeamOffset={-0.5}
          />
        )}
      </div>
      <TrophyGalleryRail isMobile={isMobile} />
      <div aria-hidden="true" style={{ position:'absolute', inset:0, zIndex:0,
        background:
          'linear-gradient(180deg, rgba(16,18,19,0.03) 0%, rgba(16,18,19,0.34) 58%, rgba(11,12,13,0.72) 100%)',
        pointerEvents:'none' }} />
      <section style={{ position:'relative', zIndex:2, maxWidth:1360, margin:'0 auto',
        width:'100%', boxSizing:'border-box', overflow:'hidden',
        minHeight:'calc(100vh - 46px)', display:'grid',
        gridTemplateColumns:isMobile ? 'minmax(0, 1fr)' : 'minmax(420px, 0.88fr) minmax(500px, 1.12fr)',
        gap:isMobile ? 34 : 'clamp(42px,5vw,82px)',
        alignItems:isMobile ? 'start' : 'center',
        padding:isMobile ? '30px 20px 54px' : '58px 36px 312px' }}>
        <div style={{ width:'100%', maxWidth:isMobile ? 'calc(100vw - 40px)' : 610, minWidth:0, justifySelf:isMobile ? 'stretch' : 'start' }}>
          <p style={{ color:'var(--text-2)', fontFamily:'var(--font-cond)',
            fontSize:isMobile ? 12 : 14, fontWeight:800,
            letterSpacing:isMobile ? '0.12em' : '0.16em',
            textTransform:'uppercase', marginBottom:18 }}>
            Simulador de torneio Counter-Strike
          </p>
          <h1 style={{ color:'var(--text-1)', fontFamily:'var(--font-cond)',
            fontSize:isMobile ? 'clamp(44px,16vw,72px)' : 'clamp(58px,8vw,108px)',
            fontWeight:800, lineHeight:0.9, letterSpacing:'0',
            textTransform:'uppercase', marginBottom:22, maxWidth:760 }}>
            16x0: monte sua lineup histórica
          </h1>
          <p style={{ maxWidth:650, color:'var(--text-2)', fontSize:isMobile ? 15 : 18,
            lineHeight:1.6, marginBottom:26, overflowWrap:'anywhere' }}>
            Escolha lendas de CS 1.6, CS:GO e CS2, combine funções, nacionalidades e estilos de jogo, dispute fase suíça e playoffs e tente fechar a campanha perfeita.
          </p>
          <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginBottom:36 }}>
            {features.map(feature => (
              <span key={feature} style={{ border:'1px solid var(--border-2)',
                borderRadius:'var(--r-md)', background:'rgba(23,26,27,0.72)',
                color:'var(--text-1)', fontFamily:'var(--font-cond)',
                fontSize:12, fontWeight:800, padding:'8px 11px',
                textTransform:'uppercase', whiteSpace:'nowrap' }}>
                {feature}
              </span>
            ))}
          </div>
          <button
            data-sound="draft"
            onClick={() => {
              onContinue();
              window.scrollToTopOnMobile?.();
              window.I18N?.scheduleApply?.();
            }}
            onMouseEnter={() => setHov(true)}
            onMouseLeave={() => setHov(false)}
            style={{ display:'inline-flex', alignItems:'center', justifyContent:'center',
              height:58, padding:'0 26px', background:hov ? '#fbb534' : 'var(--accent)',
              border:'none', borderRadius:'var(--r-md)', cursor:'pointer',
              color:'#090a0a', fontFamily:'var(--font-cond)', fontSize:15,
              fontWeight:900, letterSpacing:'0.06em', textTransform:'uppercase',
              boxShadow:hov ? '0 12px 32px rgba(244,165,35,0.28)' : '0 2px 12px rgba(0,0,0,0.4)',
              transform:hov ? 'translateY(-1px)' : 'none',
              transition:'background 140ms ease, box-shadow 180ms ease, transform 140ms ease' }}>
            Jogar 16x0
          </button>
        </div>
        <HeroTrailer isMobile={isMobile} />
      </section>
    </main>
  );
}

function HomeView({ onStart }) {
  const [hov, setHov] = useHomeSt(false);
  const [showSetup, setShowSetup] = useHomeSt(false);
  const [mode, setMode] = useHomeSt('scout');
  const [matchFormat, setMatchFormat] = useHomeSt('MR16');
  const [nameTouched, setNameTouched] = useHomeSt(false);
  const defaultTeamName = window.I18N?.text?.('team.default') || 'Meu Time';
  const [teamName, setTeamName] = useHomeSt(defaultTeamName);
  const isMobile = window.useIsMobileView?.(760) || false;
  const formats = Object.values(window.MATCH_FORMATS || {
    MR16:{ id:'MR16', label:'MR16', winScore:16, perfectScore:'16-0' },
    MR13:{ id:'MR13', label:'MR13', winScore:13, perfectScore:'13-0' },
  });

  useHomeEf(() => {
    if (!nameTouched) setTeamName(defaultTeamName);
  }, [defaultTeamName, nameTouched]);

  const steps = [
    { n:'01', icon:'draft', title:'Sorteio', body:'O dado rola e revela um lineup histórico inteiro. Recrute 1 jogador por sorteio — 1 por função.' },
    { n:'02', icon:'major', title:'Suíço', body:'Entre numa fase suíça com 16 times. Três vitórias classificam; três derrotas eliminam.' },
    { n:'03', icon:'trophy', title:'Playoffs', body:'Classifique para o Top 8 e dispute quartas, semis e final em BO3.' },
  ];

  const legends = [
    { name:'s1mple',      overall:99, country:'🇺🇦', role:'AWP', era:'CS:GO' },
    { name:'coldzera',    overall:97, country:'🇧🇷', role:'RIF', era:'CS:GO' },
    { name:'olofmeister', overall:96, country:'🇸🇪', role:'RIF', era:'CS:GO' },
    { name:'NiKo',        overall:95, country:'🇧🇦', role:'LRK', era:'CS2'   },
    { name:'dev1ce',      overall:95, country:'🇩🇰', role:'AWP', era:'CS:GO' },
    { name:'donk',        overall:91, country:'🇷🇺', role:'RIF', era:'CS2'   },
  ];

  if (!showSetup) {
    return <HomeIntro onContinue={() => setShowSetup(true)} />;
  }

  return (
    <main style={{ maxWidth:980, margin:'0 auto', padding:isMobile ? '0 14px 54px' : '0 20px 80px' }}>
      <SupportProjectMenu isMobile={isMobile} />

      {/* ── Hero ──────────────────────────────────────────────────────── */}
      <section style={{ minHeight:isMobile ? 'auto' : 'min(82vh, 720px)', display:'flex', flexDirection:'column',
        alignItems:'center', justifyContent:'center', textAlign:'center',
        paddingTop:isMobile ? 34 : 40, paddingBottom:isMobile ? 34 : 40 }}>

        {/* Kicker */}
        <div style={{ display:'inline-flex', alignItems:'center', gap:10,
          marginBottom:isMobile ? 24 : 34, maxWidth:'100%' }}>
          <span style={{ width:28, height:1, background:'var(--border-3)' }} />
          <span style={{ fontFamily:'var(--font-cond)', fontSize:11, color:'var(--text-2)',
            letterSpacing:isMobile ? '0.16em' : '0.28em', textTransform:'uppercase', fontWeight:600,
            whiteSpace:isMobile ? 'normal' : 'nowrap' }}>
            Simulador de Major · Counter-Strike
          </span>
          <span style={{ width:28, height:1, background:'var(--border-3)' }} />
        </div>

        {/* Scoreboard hero */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'center',
          gap:'clamp(16px,4vw,44px)', marginBottom:6 }}>
          {/* 16 — CT win side */}
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
            <span style={{ fontFamily:'var(--font-cond)', fontSize:12, fontWeight:700,
              color:'var(--text-3)', letterSpacing:'0.22em', textTransform:'uppercase', marginBottom:4 }}>
              Você
            </span>
            <span style={{ fontFamily:'var(--font-mono)', fontWeight:700,
              fontSize:isMobile ? 'clamp(70px,24vw,96px)' : 'clamp(96px,19vw,210px)', lineHeight:0.82, color:'var(--text-1)',
              letterSpacing:'-0.04em' }}>
              16
            </span>
          </div>

          {/* Separator */}
          <span style={{ fontFamily:'var(--font-mono)', fontWeight:700,
            fontSize:isMobile ? 'clamp(44px,13vw,60px)' : 'clamp(60px,11vw,120px)', lineHeight:0.82, color:'var(--accent)',
            letterSpacing:'-0.04em', animation:'scoreGlow 3.2s ease-in-out infinite',
            transform:'translateY(-6%)' }}>
            :
          </span>

          {/* 0 — opponent */}
          <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
            <span style={{ fontFamily:'var(--font-cond)', fontSize:12, fontWeight:700,
              color:'var(--text-3)', letterSpacing:'0.22em', textTransform:'uppercase', marginBottom:4 }}>
              Lendas
            </span>
            <span style={{ fontFamily:'var(--font-mono)', fontWeight:700,
              fontSize:isMobile ? 'clamp(70px,24vw,96px)' : 'clamp(96px,19vw,210px)', lineHeight:0.82, color:'var(--accent)',
              letterSpacing:'-0.04em' }}>
              0
            </span>
          </div>
        </div>

        {/* Wordmark caption */}
        <div style={{ fontFamily:'var(--font-cond)', fontSize:13, fontWeight:700,
          letterSpacing:isMobile ? '0.22em' : '0.4em', textTransform:'uppercase', color:'var(--text-3)',
          marginBottom:26, whiteSpace:'nowrap' }}>
          dezesseis x zero
        </div>

        {/* Tagline */}
        <p style={{ color:'var(--text-2)', fontSize:'clamp(15px,2.2vw,18px)', lineHeight:1.6,
          maxWidth:520, marginBottom:isMobile ? 28 : 38, textWrap:'balance' }}>
          Monte o time dos sonhos juntando lendas do CS de todas as eras
          e dispute um Major em busca da vitória perfeita.
        </p>

        <div style={{ display:'inline-grid', gridTemplateColumns:isMobile ? '1fr' : 'repeat(3,1fr)', gap:6,
          padding:4, background:'var(--bg-2)', border:'1px solid var(--border-2)',
          borderRadius:'var(--r-lg)', marginBottom:8, width:isMobile ? '100%' : 'auto',
          maxWidth:isMobile ? 360 : 'none' }}>
          {[
            ['scout', 'Scout', 'sem overall no draft'],
            ['classic', 'Clássico', 'com números abertos'],
            ['builder', 'Laboratório', 'lineup livre por busca'],
          ].map(([id, label, hint]) => {
            const active = mode === id;
            return (
              <button key={id} data-sound="option" onClick={() => setMode(id)}
                style={{ padding:'8px 12px', minWidth:isMobile ? 0 : 142,
                  background: active ? 'rgba(244,165,35,0.12)' : 'transparent',
                  border:`1px solid ${active ? 'rgba(244,165,35,0.35)' : 'transparent'}`,
                  borderRadius:'var(--r-md)', cursor:'pointer',
                  color: active ? 'var(--accent)' : 'var(--text-2)' }}>
                <div style={{ fontFamily:'var(--font-cond)', fontSize:12, fontWeight:800,
                  letterSpacing:'0.1em', textTransform:'uppercase' }}>{label}</div>
                <div style={{ fontSize:9, color:'var(--text-3)', whiteSpace:'nowrap' }}>{hint}</div>
              </button>
            );
          })}
        </div>

        <div style={{ width:isMobile ? '100%' : 440, maxWidth:isMobile ? 360 : 440,
          marginBottom:12, textAlign:'left' }}>
          <label htmlFor="team-name-input" style={{ display:'block', marginBottom:6,
            fontFamily:'var(--font-cond)', fontSize:10, fontWeight:800,
            color:'var(--text-3)', letterSpacing:'0.14em', textTransform:'uppercase' }}>
            Nome do seu time
          </label>
          <input
            id="team-name-input"
            value={teamName}
            maxLength={28}
            onChange={e => { setNameTouched(true); setTeamName(e.target.value); }}
            placeholder={defaultTeamName}
            style={{ width:'100%', height:44, boxSizing:'border-box',
              background:'var(--bg-2)', border:'1px solid var(--border-2)',
              borderRadius:'var(--r-md)', color:'var(--text-1)',
              padding:'0 13px', outline:'none',
              fontFamily:'var(--font-cond)', fontSize:17, fontWeight:800,
              letterSpacing:'0.02em' }}
          />
        </div>

        <div style={{ display:'inline-flex', flexDirection:'column', alignItems:'stretch',
          gap:7, marginBottom:18, width:isMobile ? '100%' : 'auto',
          maxWidth:isMobile ? 360 : 'none' }}>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
            gap:12, padding:'0 2px' }}>
            <span style={{ fontFamily:'var(--font-cond)', fontSize:10, fontWeight:800,
              color:'var(--text-3)', letterSpacing:'0.14em', textTransform:'uppercase' }}>
              Formato dos mapas
            </span>
            <span style={{ fontFamily:'var(--font-cond)', fontSize:9, fontWeight:800,
              color:'var(--accent)', letterSpacing:'0.1em', textTransform:'uppercase' }}>
              padrao MR16
            </span>
          </div>
          <div style={{ display:'inline-grid', gridTemplateColumns:'1fr 1fr', gap:6,
            padding:4, background:'var(--bg-2)', border:'1px solid var(--border-2)',
            borderRadius:'var(--r-lg)' }}>
            {formats.map(fmt => {
              const active = matchFormat === fmt.id;
              return (
                <button key={fmt.id} data-sound="option" onClick={() => setMatchFormat(fmt.id)}
                  style={{ padding:'8px 12px', minWidth:isMobile ? 0 : 142,
                    background: active ? 'rgba(244,165,35,0.12)' : 'transparent',
                    border:`1px solid ${active ? 'rgba(244,165,35,0.35)' : 'transparent'}`,
                    borderRadius:'var(--r-md)', cursor:'pointer',
                    color: active ? 'var(--accent)' : 'var(--text-2)' }}>
                  <div style={{ display:'flex', alignItems:'baseline', justifyContent:'center', gap:7 }}>
                    <span style={{ fontFamily:'var(--font-cond)', fontSize:12, fontWeight:800,
                      letterSpacing:'0.1em', textTransform:'uppercase' }}>{fmt.label}</span>
                    <span style={{ fontFamily:'var(--font-mono)', fontSize:10,
                      color: active ? 'var(--accent)' : 'var(--text-3)' }}>
                      {fmt.perfectScore}
                    </span>
                  </div>
                  <div style={{ fontSize:9, color:'var(--text-3)', whiteSpace:'nowrap' }}>
                    primeiro a {fmt.winScore}
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        {/* CTA */}
        <button
          data-sound="draft"
          onClick={() => onStart({
            draftMode: mode,
            matchFormat,
            teamName: (teamName || '').trim().slice(0, 28) || defaultTeamName,
          })}
          onMouseEnter={() => setHov(true)}
          onMouseLeave={() => setHov(false)}
          style={{ display:'inline-flex', alignItems:'center', justifyContent:'center',
            gap:12, height:54, width:isMobile ? '100%' : 'auto',
            maxWidth:isMobile ? 360 : 'none',
            padding:isMobile ? '0 24px' : '0 38px', background: hov ? '#fbb534' : 'var(--accent)',
            border:'none', borderRadius:'var(--r-md)', cursor:'pointer',
            fontFamily:'var(--font-cond)', fontSize:15, fontWeight:800,
            letterSpacing:'0.14em', textTransform:'uppercase', color:'#15110a',
            whiteSpace:'nowrap',
            transition:'background 140ms ease, box-shadow 200ms ease, transform 140ms ease',
            transform: hov ? 'translateY(-1px)' : 'none',
            boxShadow: hov ? '0 8px 30px rgba(244,165,35,0.34)' : '0 2px 12px rgba(0,0,0,0.4)' }}>
          <span>{mode === 'builder' ? 'Montar Lineup' : 'Iniciar Draft'}</span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
            style={{ transform: hov ? 'translateX(3px)' : 'none', transition:'transform 140ms ease' }}>
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </button>

        <div style={{ marginTop:18, fontFamily:'var(--font-mono)', fontSize:11,
          color:'var(--text-3)', letterSpacing:'0.04em' }}>
          {window.PLAYERS.length} jogadores · {window.DRAFT_TEAMS.length} lineups históricas · sem cadastro
        </div>
      </section>

      {/* ── Steps ─────────────────────────────────────────────────────── */}
      <window.SectionLabel label="Como funciona" />
      <div style={{ display:'grid', gridTemplateColumns:isMobile ? '1fr' : 'repeat(3,1fr)',
        gap:8, marginBottom:isMobile ? 34 : 60 }}>
        {steps.map((s, i) => (
          <StepCard key={i} step={s} delay={i * 80} />
        ))}
      </div>

      {/* ── Legend preview ────────────────────────────────────────────── */}
      <window.SectionLabel label="Algumas das lendas" right={isMobile ? null : "ordenado por overall"} />
      <div style={{ display:'grid', gridTemplateColumns:isMobile ? 'repeat(2,1fr)' : 'repeat(6,1fr)', gap:6 }}>
        {legends.map((p, i) => (
          <LegendChip key={i} player={p} />
        ))}
      </div>

      {/* ── Tier legend ──────────────────────────────────────────────── */}
      <div style={{ marginTop:22, display:'flex', gap:6, flexWrap:'wrap', alignItems:'center' }}>
        <span style={{ fontFamily:'var(--font-cond)', fontSize:10, fontWeight:700,
          color:'var(--text-3)', letterSpacing:'0.1em', textTransform:'uppercase', marginRight:2 }}>
          Tiers
        </span>
        {Object.keys(window.TIER_META).map(k => <window.TierBadge key={k} tier={k} />)}
        <span style={{ fontSize:10, color:'var(--text-3)', alignSelf:'center' }}>
          — baseados nos ranks do CS:GO
        </span>
      </div>
    </main>
  );
}

function StepCard({ step, delay }) {
  const [hov, setHov] = useHomeSt(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{ padding:'22px 20px',
        background: hov ? 'var(--bg-3)' : 'var(--bg-2)',
        border:`1px solid ${hov ? 'var(--border-3)' : 'var(--border-2)'}`,
        borderRadius:'var(--r-lg)', position:'relative', overflow:'hidden',
        transform: hov ? 'translateY(-2px)' : 'none',
        transition:'all 180ms ease' }}>

      {/* Big ghost number */}
      <span style={{ position:'absolute', top:-14, right:6, fontFamily:'var(--font-mono)',
        fontSize:84, fontWeight:700, color:'var(--text-1)', opacity:0.035,
        letterSpacing:'-0.04em', lineHeight:1, pointerEvents:'none' }}>
        {step.n}
      </span>

      <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:14 }}>
        <span style={{ display:'flex', alignItems:'center', justifyContent:'center',
          width:42, height:42, borderRadius:'var(--r-md)',
          background: hov ? 'rgba(244,165,35,0.12)' : 'var(--bg-4)',
          border:`1px solid ${hov ? 'rgba(244,165,35,0.3)' : 'var(--border-2)'}`,
          color: hov ? 'var(--accent)' : 'var(--text-2)',
          transition:'all 180ms ease' }}>
          <StepIcon type={step.icon} />
        </span>
        <span style={{ fontFamily:'var(--font-mono)', fontSize:12, fontWeight:600,
          color:'var(--accent)', letterSpacing:'0.04em' }}>{step.n}</span>
      </div>

      <h3 style={{ fontFamily:'var(--font-cond)', fontWeight:800, fontSize:18,
        color:'var(--text-1)', letterSpacing:'0.02em', marginBottom:7, textTransform:'uppercase' }}>
        {step.title}
      </h3>
      <p style={{ fontSize:13, color:'var(--text-2)', lineHeight:1.6, position:'relative' }}>
        {step.body}
      </p>
    </div>
  );
}

function LegendChip({ player }) {
  const [hov, setHov] = useHomeSt(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{ padding:'12px 12px 11px',
        background: hov ? 'var(--bg-3)' : 'var(--bg-2)',
        border:`1px solid ${hov ? 'var(--border-3)' : 'var(--border-2)'}`,
        borderRadius:'var(--r-lg)', minWidth:0,
        transform: hov ? 'translateY(-2px)' : 'none',
        transition:'all 160ms ease' }}>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:6 }}>
        <span style={{ fontFamily:'var(--font-mono)', fontSize:19, fontWeight:700,
          color:'var(--accent)', lineHeight:1 }}>{player.overall}</span>
        <window.RoleBadge role={player.role} />
      </div>
      <div style={{ fontFamily:'var(--font-cond)', fontSize:13, fontWeight:800,
        color:'var(--text-1)', whiteSpace:'nowrap', overflow:'hidden',
        textOverflow:'ellipsis', letterSpacing:'0.01em' }}>
        <span style={{ display:'inline-flex', alignItems:'center', gap:5, minWidth:0 }}>
          <window.Flag value={player.country} />
          <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{player.name}</span>
        </span>
      </div>
      <div style={{ fontFamily:'var(--font-cond)', fontSize:9, color:'var(--text-3)',
        letterSpacing:'0.1em', textTransform:'uppercase', marginTop:1 }}>
        {player.era}
      </div>
    </div>
  );
}

window.HomeView = HomeView;