// ── 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: 'MBL vs 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="Partido Missão - Renan Santos">
          <img src="campaign/missao-logo.png" alt="Partido Missão" style={{width:38, height:38, objectFit:'contain'}} />
          <span>MISSÃO</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">
          <span className="section-label">Partido Missão · MBL</span>
          <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="#videos" 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>
  );
};

// ── CTA FINAL ────────────────────────────────────────────────────────────────
const CTASection = () => (
  <section id="apoie" className="cta-section reveal">
    <span className="section-label" style={{color: 'rgba(0,0,0,0.45)'}}>
      Faça parte do movimento
    </span>
    <h2 className="cta-title">JUNTE-SE<br />À MISSÃO</h2>
    <p className="cta-sub">
      O futuro é glorioso
    </p>
    <a href="https://missao.org.br/" target="_blank" rel="noopener noreferrer" className="btn-black" style={{background:'#0A0A0A', color:'#fff'}}>
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <path d="M9 2l5.5 3v8L9 16l-5.5-3V5L9 2z" stroke="currentColor" strokeWidth="1.5"/>
        <path d="M9 2v14M3.5 5l5.5 3 5.5-3" stroke="currentColor" strokeWidth="1.5"/>
      </svg>
      Conheça a Missão
    </a>
  </section>
);

// ── FOOTER ───────────────────────────────────────────────────────────────────
const Footer = () => {
  const socials = [
    { label: 'Instagram', icon: 'IG', href: 'https://www.instagram.com/partidomissao/' },
    { label: 'X / Twitter', icon: 'X', href: 'https://x.com/PartidoMissao' },
    { label: 'YouTube', icon: 'YT', href: 'https://www.youtube.com/@PartidoMissao' },
  ];

  return (
    <footer className="footer" role="contentinfo">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="header-logo" style={{display:'inline-flex'}}>
            <img src="campaign/missao-logo.png" alt="Partido Missão" style={{width:38, height:38, objectFit:'contain'}} />
            <span style={{fontFamily:'Barlow Condensed, sans-serif', fontWeight:900, fontSize:'1.3rem', letterSpacing:'0.05em'}}>MISSÃO</span>
          </div>
          <p>Site informativo sobre Renan Santos — Partido Missão (MBL). Nova política para um Brasil mais livre.</p>
          <div className="social-links">
            {socials.map(s => (
              <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" className="social-btn" aria-label={s.label} title={s.label}>
                <span style={{fontFamily:'monospace', fontSize:'0.7rem', fontWeight:'bold'}}>{s.icon}</span>
              </a>
            ))}
          </div>
        </div>

        <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">MBL vs 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 });