// ── HEADER ──────────────────────────────────────────────────────────────────
const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = [
    { label: 'Início', href: '#inicio' },
    { label: 'Propostas', href: '#propostas-brasil' },
    { label: 'Por Região', href: '#propostas' },
    { label: 'Bolsonarismo', href: '#comparativo' },
    { label: 'Erros do Lula', href: '#erros' },
    { label: 'Apoie', href: '#apoie' },
  ];

  return (
    <>
      <header className={`header${scrolled ? ' scrolled' : ''}`} role="banner">
        <a href="#inicio" className="header-logo" aria-label="Missionario Amarelo - Renan Santos">
          <span>MISSIONARIO AMARELO</span>
        </a>
        <nav aria-label="Navegação principal">
          <ul className="header-nav">
            {links.map(l => (
              <li key={l.href}>
                <a href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
              </li>
            ))}
          </ul>
        </nav>
        <a href="#apoie" className="btn-yellow" style={{fontSize:'0.85rem', padding:'10px 20px'}}>
          Conheça a Missão
        </a>
        <button
          className={`hamburger${menuOpen ? ' open' : ''}`}
          onClick={() => setMenuOpen(v => !v)}
          aria-label="Menu"
          aria-expanded={menuOpen}
        >
          <span /><span /><span />
        </button>
      </header>

      <nav className={`mobile-menu${menuOpen ? ' open' : ''}`} aria-label="Menu mobile">
        {links.map(l => (
          <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
        ))}
        <a href="#apoie" className="btn-yellow" onClick={() => setMenuOpen(false)}
           style={{marginTop: 16}}>
          Conheça a Missão
        </a>
      </nav>
    </>
  );
};

// ── HERO ─────────────────────────────────────────────────────────────────────
const Hero = () => {
  const imgRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (imgRef.current) {
        const y = window.scrollY * 0.25;
        imgRef.current.style.transform = `translateY(${y}px)`;
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="inicio" className="hero" aria-label="Hero">
      <div className="hero-bg-grid" aria-hidden="true" />

      <div className="hero-grid">
        {/* LEFT */}
        <div className="hero-content">
          <h1 className="hero-title">
            RENAN<br />
            <span className="yellow">SANTOS</span>
          </h1>
          <p className="hero-slogan">O futuro é glorioso</p>
          <p className="hero-desc">
            A Missão é o berço do Brasil do futuro. Carregamos a visão do Brasil do século 21, marcado pelas nossas cores, nossos valores e nossos sonhos.
          </p>
          <div className="hero-buttons">
            <a href="#propostas" className="btn-yellow">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <path d="M8 3l5 5-5 5M3 8h10" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
              </svg>
              Conheça as Propostas
            </a>
            <a href="https://www.instagram.com/renansantosmbl/" target="_blank" rel="noopener noreferrer" className="btn-outline">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.5"/>
                <path d="M6.5 5.5l4 2.5-4 2.5V5.5z" fill="currentColor"/>
              </svg>
              Ver Vídeos
            </a>
          </div>
        </div>

        {/* RIGHT */}
        <div className="hero-image-wrap" ref={imgRef}>
          <div className="hero-image-offset" aria-hidden="true" />
          <img
            src="campaign/renan-hero2.jpg"
            alt="Renan Santos — candidato Partido Missão"
            style={{
              position: 'relative', zIndex: 1,
              width: '150%', maxWidth: 630,
              aspectRatio: '1/1', objectFit: 'cover',
              objectPosition: 'center top',
              borderRadius: 12,
              display: 'block',
            }}
          />
        </div>
      </div>

      <div className="scroll-indicator" aria-hidden="true">
        <span>Role para baixo</span>
        <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M10 4v12M4 10l6 6 6-6"/>
        </svg>
      </div>
    </section>
  );
};

// ── OUTROS LINKS ─────────────────────────────────────────────────────────────
const LinkRow = ({ index, label, href }) => (
  <li className="ext-row">
    <a href={href} target="_blank" rel="noopener noreferrer">
      <span className="ext-idx">{String(index).padStart(2, '0')}</span>
      <span className="ext-label">{label}</span>
      <span className="ext-arrow" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" strokeWidth="1.8" strokeLinecap="square"/>
        </svg>
      </span>
    </a>
  </li>
);

const CTASection = () => {
  const oficiais = [
    ['missao.org.br', 'https://missao.org.br/'],
    ['loja.partidomissao.com', 'https://loja.partidomissao.com/'],
    ['lp.livroamarelo.com', 'https://lp.livroamarelo.com/'],
    ['valete.org.br', 'https://valete.org.br/'],
    ['missaoapoio.com.br', 'https://missaoapoio.com.br/'],
  ];
  const pessoais = [
    ['caminhodamissao.com', 'https://caminhodamissao.com/'],
    ['quemerenansantos.com.br', 'https://www.quemerenansantos.com.br/'],
    ['kimkataguiri.com.br', 'https://kimkataguiri.com.br/'],
    ['ipva.kimkataguiri.com.br', 'https://ipva.kimkataguiri.com.br/'],
    ['renatobattista.com.br', 'https://renatobattista.com.br/'],
    ['amandavettorazzo.com.br', 'https://www.amandavettorazzo.com.br/'],
    ['victorantoun.com.br', 'https://victorantoun.com.br/'],
    ['anahering.framer.website', 'https://anahering.framer.website/'],
    ['bombeirorafa.com.br', 'https://www.bombeirorafa.com.br/'],
  ];

  return (
    <section id="apoie" className="cta-section reveal">
      <div className="cta-bg-word" aria-hidden="true">LINKS</div>
      <div className="cta-bg-grid" aria-hidden="true" />

      <div className="links-inner">
        <div className="cta-head">
          <span className="cta-kicker">// 07 — Rede da Missão</span>
          <h2 className="cta-title">
            OUTROS<br /><span className="cta-title-stroke">LINKS</span>
          </h2>
        </div>

        <div className="external-links-grid">
          <div className="external-links-group">
            <div className="ext-card-head">
              <span className="ext-tag">01</span>
              <h3>Sites Oficiais</h3>
              <span className="ext-count">{oficiais.length} links</span>
            </div>
            <ul>
              {oficiais.map(([label, href], i) => (
                <LinkRow key={href} index={i + 1} label={label} href={href} />
              ))}
            </ul>
          </div>

          <div className="external-links-group">
            <div className="ext-card-head">
              <span className="ext-tag">02</span>
              <h3>Conheça Também</h3>
              <span className="ext-count">{pessoais.length} links</span>
            </div>
            <ul>
              {pessoais.map(([label, href], i) => (
                <LinkRow key={href} index={i + 1} label={label} href={href} />
              ))}
            </ul>
          </div>
        </div>

        <p className="cta-foot">↗ Todos os links abrem em nova aba</p>
      </div>
    </section>
  );
};

// ── FOOTER ───────────────────────────────────────────────────────────────────
const Footer = () => {
  return (
    <footer className="footer" role="contentinfo">
      <div className="footer-grid">
        <div className="footer-col">
          <h4>Navegação</h4>
          <ul>
            <li><a href="#inicio">Início</a></li>
            <li><a href="#propostas">Propostas</a></li>
            <li><a href="#comparativo">Bolsonarismo</a></li>
            <li><a href="#erros">Erros do Lula</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Contato</h4>
          <ul>
            <li><a href="mailto:missionarioamarelo@gmail.com">missionarioamarelo@gmail.com</a></li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <p>Criado por apoiador da Missão</p>
        <p>Este site possui caráter informativo e não constitui campanha eleitoral.</p>
      </div>
    </footer>
  );
};

Object.assign(window, { Header, Hero, CTASection, Footer });