// Shared components and SVG illustrations for Latma

// === Bandeirinha bunting (festas juninas vibe) ===
function Bunting({ colors = ['#3878D6', '#EFC987', '#E84A8C', '#5BA85A', '#1F4FA8'], count = 22 }) {
  const flags = Array.from({ length: count }, (_, i) => {
    const x = (i / (count - 1)) * 100;
    const droopY = Math.sin((i / (count - 1)) * Math.PI) * 18;
    return { x, y: 20 + droopY, color: colors[i % colors.length] };
  });
  return (
    <div className="bunting">
      <svg viewBox="0 0 1000 80" preserveAspectRatio="none">
        <path
          d={`M 0 30 Q 250 ${30 + 20} 500 ${30 + 28} T 1000 30`}
          fill="none"
          stroke="rgba(22,48,107,0.35)"
          strokeWidth="1.2"
        />
        {flags.map((f, i) => {
          const cx = (f.x / 100) * 1000;
          const cy = f.y + 4;
          return (
            <g key={i} transform={`translate(${cx} ${cy}) rotate(${(i % 2 === 0 ? -4 : 4)})`}>
              <path
                d="M -6 0 L 6 0 L 0 14 Z"
                fill={f.color}
                opacity="0.92"
              />
            </g>
          );
        })}
      </svg>
    </div>
  );
}

// === Star (Latma logo mark) ===
function Star({ color = '#EFC987', size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <path d="M12 2 L14.5 8.5 L21.5 9.2 L16.2 13.8 L17.8 20.5 L12 17 L6.2 20.5 L7.8 13.8 L2.5 9.2 L9.5 8.5 Z" />
    </svg>
  );
}

// === Palm tree silhouette ===
function PalmTree({ color = '#1F4FA8', className = '', style = {} }) {
  return (
    <svg className={className} style={style} viewBox="0 0 120 200" fill={color}>
      <path d="M58 200 L62 200 L64 90 L56 90 Z" opacity="0.9" />
      <path d="M60 90 Q 30 70 8 80 Q 24 64 50 78 Q 36 50 14 48 Q 38 38 56 70 Q 56 36 38 16 Q 60 28 62 60 Q 70 30 92 22 Q 82 44 64 62 Q 92 48 112 56 Q 90 64 66 76 Q 96 80 116 96 Q 88 88 60 88 Z" />
    </svg>
  );
}

// === Arrow icons ===
function ArrowRight({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  );
}
function ArrowUpRight({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 17 L17 7 M9 7 H17 V15" />
    </svg>
  );
}
function CloseIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 6 L18 18 M18 6 L6 18" />
    </svg>
  );
}
function CheckIcon({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12 L10 17 L19 7" />
    </svg>
  );
}

// === Nav (with active state and scroll detection) ===
function Nav({ route, onNavigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const links = [
    { key: 'historia', label: 'Nossa História' },
    { key: 'produtos', label: 'Produtos' },
  ];

  const go = (k) => {
    setMenuOpen(false);
    onNavigate(k);
  };

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''} ${menuOpen ? 'menu-open' : ''}`}>
        <div className="nav-logo" onClick={() => go('home')} aria-label="Latma — voltar para o início">
          <img src="assets/logo-latma.png" alt="Latma — Laticínios Maranhão" className="nav-logo-img" />
        </div>
        <div className="nav-links">
          {links.map(l => (
            <a
              key={l.key}
              className={`nav-link ${route === l.key ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); go(l.key); }}
              href={`#${l.key}`}
            >
              {l.label}
            </a>
          ))}
          <a className="nav-cta" onClick={(e) => { e.preventDefault(); go('contato'); }} href="#contato">
            Fale com a gente <ArrowRight size={14} />
          </a>
        </div>
        <button
          className={`nav-burger ${menuOpen ? 'open' : ''}`}
          onClick={() => setMenuOpen(o => !o)}
          aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={menuOpen}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </nav>

      <div className={`mobile-menu ${menuOpen ? 'open' : ''}`} aria-hidden={!menuOpen}>
        <div className="mobile-menu-inner">
          <a
            className={`mobile-link ${route === 'home' ? 'active' : ''}`}
            onClick={(e) => { e.preventDefault(); go('home'); }}
            href="#home"
          >Início</a>
          {links.map(l => (
            <a
              key={l.key}
              className={`mobile-link ${route === l.key ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); go(l.key); }}
              href={`#${l.key}`}
            >{l.label}</a>
          ))}
          <a
            className={`mobile-link mobile-link-cta ${route === 'contato' ? 'active' : ''}`}
            onClick={(e) => { e.preventDefault(); go('contato'); }}
            href="#contato"
          >Fale com a gente <ArrowRight size={16} /></a>
          <div className="mobile-menu-meta">
            latma@outlook.com.br<br/>
            @laticiniosmaranhao
          </div>
        </div>
      </div>
    </>
  );
}

// === Footer ===
function Footer({ onNavigate }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div className="script">Latma</div>
          <div className="meta">Laticínios <Star color="#EFC987" size={12} /> Maranhão</div>
          <p>Frescor do interior do Maranhão direto na sua mesa. Produtos com a tradição das famílias que vivem do leite.</p>
        </div>
        <div className="footer-col">
          <h4>Navegação</h4>
          <ul>
            <li><a onClick={(e) => { e.preventDefault(); onNavigate('home'); }} href="#home">Início</a></li>
            <li><a onClick={(e) => { e.preventDefault(); onNavigate('historia'); }} href="#historia">Nossa História</a></li>
            <li><a onClick={(e) => { e.preventDefault(); onNavigate('produtos'); }} href="#produtos">Produtos</a></li>
            <li><a onClick={(e) => { e.preventDefault(); onNavigate('contato'); }} href="#contato">Contato</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Produtos</h4>
          <ul>
            <li><a href="#">Iogurte Natural</a></li>
            <li><a href="#">Iogurte de Morango</a></li>
            <li><a href="#">Iogurte de Ameixa</a></li>
            <li><a href="#">Queijo de Coalho</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contato</h4>
          <ul>
            <li><a href="#">Vitorino Freire, MA</a></li>
            <li><a href="#">latma@outlook.com.br</a></li>
            <li><a href="#">@laticiniosmaranhao</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Latma Laticínios. Feito com leite, sol e amor.</span>
        <span>CNPJ 61.134.183/0001-22 · Vitorino Freire · Maranhão</span>
      </div>
    </footer>
  );
}

// Export to window for cross-file access
Object.assign(window, {
  Bunting, Star, PalmTree,
  ArrowRight, ArrowUpRight, CloseIcon, CheckIcon,
  Nav, Footer,
});