const { useState, useEffect, useRef } = React;

function AnimCounter({ target, duration = 2000, suffix = '' }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const start = performance.now();
    const tick = (now) => {
      const p = Math.min((now - start) / duration, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(ease * target));
      if (p < 1) ref.current = requestAnimationFrame(tick);
    };
    ref.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(ref.current);
  }, [target, duration]);
  return <span>{val.toLocaleString('pt-BR')}{suffix}</span>;
}

const STEPS = [
  { n: '01', title: 'Baixe o Jogo', desc: 'Adquira o Project Zomboid na Steam. É necessária a versão mais recente para conectar.' },
  { n: '02', title: 'Adicione o Servidor', desc: 'No menu Multiplayer, adicione o IP sth-0.southhost.com.br:16269 na lista de favoritos.' },
  { n: '03', title: 'Crie seu Personagem', desc: 'Escolha seus atributos, profissão e escolha uma das fações disponíveis no servidor.' },
  { n: '04', title: 'Sobreviva', desc: 'O caos é real. Construa, saquie, forme alianças ou elimine inimigos. A escolha é sua.' },
];

const RULES = [
  'Respeite todos os jogadores — zero tolerância a assédio.',
  'Hacks, cheats e exploits resultam em ban permanente.',
  'Roleplay obrigatório nas Zonas Verdes (cidades seguras).',
  'PvP liberado apenas nas Zonas Vermelhas marcadas no mapa.',
  'Proibido destruir bases de aliados e membros da própria facção.',
  'Grief excessivo de novatos resulta em penalidade.',
  'Use o Discord oficial para reportar bugs e jogadores.',
  'Eventos de admin têm regras específicas — atenção aos avisos.',
];

function SectionLabel({ children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
      <div style={{ width: 24, height: 2, background: '#a8ff00' }} />
      <span style={{ fontFamily: 'Share Tech Mono', fontSize: 11, color: '#a8ff00', letterSpacing: '0.18em' }}>{children}</span>
    </div>
  );
}

function LandingPage({ onNavigate }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => { setTimeout(() => setVisible(true), 100); }, []);

  const heroStyle = {
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    position: 'relative',
    overflow: 'hidden',
    padding: '100px 5vw 60px',
  };

  return (
    <div>
      {/* HERO */}
      <section style={heroStyle}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(to right, rgba(34,34,34,0.98) 0%, rgba(34,34,34,0.85) 28%, rgba(34,34,34,0.4) 48%, transparent 62%)',
          pointerEvents: 'none', zIndex: 1,
        }} />
        {/* Transition gradient: hero → glass sections */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: '30%',
          background: 'linear-gradient(to bottom, transparent 0%, rgba(20,20,20,0.7) 50%, rgba(20,20,20,0.92) 100%)',
          pointerEvents: 'none', zIndex: 2,
        }} />
        <div style={{
          position: 'relative', zIndex: 3, maxWidth: 660,
          opacity: visible ? 1 : 0, transform: visible ? 'none' : 'translateY(30px)',
          transition: 'opacity 0.9s ease, transform 0.9s ease',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
            <span style={{
              display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
              background: '#ef4444', boxShadow: '0 0 10px #ef4444',
            }} />
            <span style={{ fontFamily: 'Share Tech Mono', fontSize: 11, color: '#ef4444', letterSpacing: '0.15em' }}>
              SERVIDOR INATIVO - EM DESENVOLVIMENTO
            </span>
          </div>

          <p style={{
            fontFamily: 'Rajdhani', fontWeight: 500, fontSize: 'clamp(15px, 2vw, 21px)',
            color: 'rgba(255,255,255,0.65)', lineHeight: 1.5, marginBottom: 36,
            maxWidth: 480, letterSpacing: '0.02em',
          }}>
            PvPvE e MMORPG com Lore e sistema de quests.<br />
            <strong style={{ color: '#fff' }}>O caos é global.</strong>
          </p>

          <p style={{
            fontFamily: 'Rajdhani', fontWeight: 500, fontSize: 13,
            color: 'rgba(255,255,255,0.45)', letterSpacing: '0.05em',
            marginTop: 8, marginBottom: 24,
          }}>
            Servidor em construção. Acesso público abre na fase beta.
          </p>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <a href="https://discord.gg/mxDCpdGaGJ" target="_blank" rel="noopener noreferrer" style={{
              background: '#a8ff00', color: '#111',
              fontFamily: 'Rajdhani', fontWeight: 700,
              fontSize: 15, letterSpacing: '0.12em', padding: '14px 32px',
              border: '1.5px solid #a8ff00', display: 'inline-block', textDecoration: 'none',
              cursor: 'pointer', textTransform: 'uppercase',
              clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
              transition: 'box-shadow 0.2s',
            }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 0 20px rgba(168,255,0,0.6)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; }}
            >
              ENTRAR NO DISCORD
            </a>
          </div>

          <div style={{ marginTop: 32, fontFamily: 'Share Tech Mono', fontSize: 11, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.08em' }}>
            IP: <span style={{ color: 'rgba(168,255,0,0.6)' }}>82.24.40.165:XXXXX</span>
            <span style={{ color: 'rgba(255,255,255,0.2)', marginLeft: 8 }}>(porta a confirmar)</span>
          </div>
        </div>
      </section>

      {/* CONTADORES VIVOS (sub-fase 2) — substitui a STATS BAR antiga */}
      <ContadoresVivos />

      {/* ROADMAP HORIZONTAL */}
      <RoadmapHorizontal />

      {/* GRID DE DIFERENCIAIS (sub-fase 5) */}
      <GridDiferenciais />

      {/* META CROWDFUNDING — HARDWARE (sub-fase 3) */}
      <MetaCrowdfunding />

      {/* HOW TO JOIN — substituída por aviso simples */}
      <section style={{ background: 'rgba(25,25,25,0.8)', backdropFilter: 'blur(28px) saturate(1.2)', WebkitBackdropFilter: 'blur(28px) saturate(1.2)', padding: '80px 5vw', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <SectionLabel>ACOMPANHE O DESENVOLVIMENTO</SectionLabel>
          <h2 style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 'clamp(26px,4vw,44px)', textTransform: 'uppercase', marginBottom: 24 }}>
            QUER ENTRAR QUANDO ABRIR?
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.6)', lineHeight: 1.8, fontSize: 15, marginBottom: 32 }}>
            Entre no nosso Discord pra acompanhar atualizações, dar feedback e ser dos primeiros a saber quando a beta abrir. Informações de conexão (IP, porta, instruções) serão liberadas no lançamento.
          </p>
          <a href="https://discord.gg/mxDCpdGaGJ" target="_blank" rel="noopener noreferrer" style={{
            background: '#a8ff00', color: '#111',
            fontFamily: 'Rajdhani', fontWeight: 700,
            fontSize: 15, letterSpacing: '0.12em', padding: '16px 36px',
            border: '1.5px solid #a8ff00', display: 'inline-block', textDecoration: 'none',
            cursor: 'pointer', textTransform: 'uppercase',
            clipPath: 'polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px))',
            transition: 'box-shadow 0.2s',
          }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 0 20px rgba(168,255,0,0.6)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; }}
          >
            ENTRAR NO DISCORD
          </a>
        </div>
      </section>

      {/* SOBRE — HIQUE (sub-fase 4) — última seção antes do footer */}
      <SobreHique />

      {/* RULES — temporariamente removida.
          Regras antigas mencionavam Zonas Verdes/Vermelhas e fações que não
          existem ainda. Serão reescritas próximas à abertura beta. */}

      {/* CTA BANNER — temporariamente removido (servidor não está aberto, "Crie conta" não tem lógica). */}

      {/* FOOTER */}
      <footer style={{ background: 'rgba(18,18,18,0.88)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', borderTop: '1px solid rgba(255,255,255,0.06)', padding: '40px 5vw' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20, maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img src="uploads/genz-logo.png" alt="Z" style={{ width: 32, height: 32, objectFit: 'contain', filter: 'drop-shadow(0 0 6px #a8ff00)' }} />
            <span style={{ fontFamily: 'Rajdhani', fontWeight: 700, fontSize: 16, letterSpacing: '0.1em' }}>PROJECT GEN Z</span>
          </div>
          <div style={{ display: 'flex', gap: 32 }}>
            {[{ name: 'Discord', url: 'https://discord.gg/mxDCpdGaGJ' }, { name: 'Instagram', url: '#' }, { name: 'YouTube', url: '#' }, { name: 'TikTok', url: '#' }].map(s => (
              <a key={s.name} href={s.url} target={s.url === '#' ? undefined : '_blank'} rel={s.url === '#' ? undefined : 'noopener noreferrer'} style={{ fontFamily: 'Rajdhani', fontWeight: 600, fontSize: 13, letterSpacing: '0.1em', color: 'rgba(255,255,255,0.4)', textDecoration: 'none', transition: 'color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.color = '#a8ff00'}
                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.4)'}
              >{s.name}</a>
            ))}
          </div>
          <div style={{ fontFamily: 'Share Tech Mono', fontSize: 10, color: 'rgba(255,255,255,0.2)' }}>
            © 2026 PROJECT GEN Z — TODOS OS DIREITOS RESERVADOS
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { LandingPage, SectionLabel });