const WA_URL = "https://wa.me/5511941040491?text=Ol%C3%A1%21%20Vim%20do%20site%20da%20Zion%20Labz%20e%20quero%20saber%20mais%20sobre%20a%20mentoria.";

function Footer() {
  const benefits = [
    'Metodologia aplicada em produtos reais em operação',
    'Como desenhar SaaS com IA no core — não como feature',
    'Arquitetura de ecossistema: produtos que crescem juntos',
    'Escalar receita sem crescer headcount na mesma proporção',
  ];

  return (
    <footer id="mentoria" style={{ borderTop: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
      {/* Giant brand word */}
      <div aria-hidden="true" style={{
        position: 'absolute',
        bottom: -40,
        left: 0, right: 0,
        textAlign: 'center',
        pointerEvents: 'none',
        fontFamily: 'var(--font-sans)',
        fontWeight: 700,
        fontSize: 'clamp(140px, 26vw, 400px)',
        letterSpacing: '-0.06em',
        lineHeight: 0.85,
        background: 'linear-gradient(to bottom, rgba(30,123,255,0.10), rgba(30,123,255,0) 70%)',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        color: 'transparent',
      }}>
        ZION
      </div>

      <div className="container" style={{ position: 'relative', paddingTop: 100, paddingBottom: 60 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 64,
          alignItems: 'start',
        }} className="footer-grid">

          <div>
            <span className="eyebrow"><span className="dot"></span>MENTORIA · EDUCACIONAL</span>
            <h2 className="h2" style={{ marginTop: 18, maxWidth: 680 }}>
              Quer aprender a construir produtos como os <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>nossos</span>?
            </h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 17, maxWidth: 560, marginTop: 20, lineHeight: 1.5 }}>
              Não vendemos software sob demanda — só construímos o que é nosso. Mas se você quer aplicar a metodologia da Zion Labz nos seus próprios projetos, abrimos a mentoria.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {benefits.map((b, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 15, color: 'var(--ink-2)' }}>
                  <span className="mono" style={{ color: 'var(--accent-ink)', fontSize: 12, marginTop: 3, letterSpacing: '0.04em' }}>
                    0{i + 1}
                  </span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>

            <div style={{
              marginTop: 40,
              display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center',
            }}>
              <a href={WA_URL} target="_blank" rel="noreferrer" className="btn primary" style={{ padding: '14px 22px', fontSize: 15 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12.04 2c-5.52 0-10 4.48-10 10 0 1.76.46 3.45 1.32 4.95L2 22l5.2-1.36A9.96 9.96 0 0 0 12.04 22c5.52 0 10-4.48 10-10s-4.48-10-10-10Zm5.8 14.26c-.24.68-1.42 1.3-1.96 1.37-.5.07-1.14.1-1.84-.12-.42-.13-.96-.31-1.66-.61-2.9-1.25-4.8-4.2-4.94-4.4-.14-.2-1.18-1.57-1.18-3 0-1.42.75-2.12 1.02-2.42.27-.29.58-.37.78-.37.2 0 .39 0 .56.01.18.01.42-.07.65.5.24.58.82 2 .89 2.15.07.14.12.3.02.5-.1.2-.15.33-.29.5-.14.17-.3.38-.43.52-.14.14-.3.3-.13.59.17.29.76 1.26 1.63 2.04 1.12 1 2.06 1.32 2.35 1.47.29.15.46.13.63-.07.17-.2.72-.85.92-1.14.2-.29.39-.24.66-.15.27.1 1.7.8 1.99.95.29.15.48.22.55.34.07.12.07.7-.17 1.38Z"/>
                  </svg>
                  Quero saber da mentoria
                </span>
                <span className="arrow">→</span>
              </a>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>
                VIA WHATSAPP · +55 11 94104-0491
              </span>
            </div>
            <p className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 16, letterSpacing: '0.04em', maxWidth: 520 }}>
              * NÃO FAZEMOS DESENVOLVIMENTO SOB DEMANDA. A ZION SÓ CONSTRÓI PRODUTOS PRÓPRIOS. A MENTORIA É A FORMA DE APRENDER O MÉTODO.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.14em', marginBottom: 16 }}>
                PRODUTOS PRÓPRIOS
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <li><a href="https://metrifiquei.com.br" target="_blank" rel="noreferrer" style={footerLink}>Metrifiquei ↗</a></li>
                <li><a href="https://tevler.com" target="_blank" rel="noreferrer" style={footerLink}>Tevler ↗</a></li>
                <li><a href="https://pregaai.com" target="_blank" rel="noreferrer" style={footerLink}>PregaAI ↗</a></li>
              </ul>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.14em', marginBottom: 16 }}>
                COMPANHIA
              </div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <li><a href="#capabilities" style={footerLink}>Capacidades</a></li>
                <li><a href="#approach" style={footerLink}>Abordagem</a></li>
                <li><a href="#manifesto" style={footerLink}>Manifesto</a></li>
                <li><a href={WA_URL} target="_blank" rel="noreferrer" style={footerLink}>Mentoria</a></li>
              </ul>
            </div>
          </div>
        </div>

        {/* Legal row */}
        <div style={{
          marginTop: 80,
          paddingTop: 24,
          borderTop: '1px solid var(--line)',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 16,
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          color: 'var(--ink-3)',
          letterSpacing: '0.04em',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="assets/zion-logo.png" alt="" style={{ width: 18, height: 18 }} />
            <span>ZION LABZ · © 2026 · BUILDING IN BR</span>
          </div>
          <div style={{ display: 'flex', gap: 24 }}>
            <span>SÃO PAULO / BR</span>
            <span><span className="live-dot" style={{ transform: 'translateY(1px)', marginRight: 6 }}></span>ALL SYSTEMS OPERATIONAL</span>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </footer>
  );
}
const footerLink = {
  color: 'var(--ink)',
  fontSize: 15,
  transition: 'color .15s',
};
window.Footer = Footer;