/* global React, Logo, Icon, Btn */

// Resolve URL prefix so footer links work from /servicios/* and /blog/* subpages too.
const FROOT = typeof window !== 'undefined' && (window.location.pathname.includes('/servicios/') || window.location.pathname.includes('/blog/')) ? '../' : '';

const NewsletterFooter = () => {
  const { Btn } = window;
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | error
  const [errMsg, setErrMsg] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setStatus('sending');setErrMsg('');
    try {
      const { ok, data } = await window.brotekFetch('/api/newsletter.php', {
        body: { email, source: 'footer', website: '' }
      });
      if (!ok) {
        setErrMsg(data && data.message || 'No pudimos suscribirte. Probá de nuevo.');
        setStatus('error');return;
      }
      setStatus('ok');setEmail('');
    } catch (_) {
      setErrMsg('Error de red. Intentá de nuevo en unos minutos.');
      setStatus('error');
    }
  };

  return (
    <div>
      <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 11,
        letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 18 }}>Newsletter</h4>
      <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.55, marginBottom: 16 }}>
        Novedades en ciberseguridad y ethical hacking — una vez al mes, sin spam.
      </p>
      {status === 'ok' ?
      <div style={{ display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 16px', borderRadius: 999,
        background: 'rgba(53,231,71,.10)', border: '1px solid rgba(53,231,71,.35)',
        color: '#9BF0A8', fontSize: 13 }}>
          <span style={{ width: 18, height: 18, borderRadius: '50%', background: '#35E747',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#0E0E0E', fontSize: 12, fontWeight: 700 }}>✓</span>
          ¡Gracias por suscribirte!
        </div> :

      <form style={{ display: 'flex', gap: 8 }} onSubmit={submit}>
          <label style={{ position: 'absolute', left: '-9999px' }} htmlFor="footer-email">Email</label>
          <input id="footer-email" type="email" required value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="tu@empresa.com" style={{
          flex: 1, minWidth: 0, background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.10)',
          borderRadius: 999, padding: '10px 16px', color: 'var(--fg)',
          fontFamily: 'var(--font-body)', fontSize: 13, outline: 'none'
        }} />
          <Btn variant="primary" onClick={submit}>{status === 'sending' ? 'Enviando…' : 'Suscribirme'}</Btn>
        </form>
      }
      {status === 'error' &&
      <p style={{ marginTop: 8, fontSize: 12, color: '#FF6B6B', lineHeight: 1.4 }}>{errMsg}</p>
      }
    </div>);

};

const Footer = () =>
<footer role="contentinfo" style={{
  padding: '80px 5vw 32px', borderTop: '1px solid rgba(255,255,255,.06)',
  background: 'var(--brotek-black)'
}}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr 1.4fr', gap: 48, marginBottom: 64 }}>
        {/* Brand + NAP block */}
        <div>
          <a href={FROOT + 'index.html'} aria-label="Brotek — Inicio" style={{ display: 'inline-block' }}>
            <Logo height={32} />
          </a>
          <p style={{ marginTop: 18, fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.55, maxWidth: 300 }}>
            Empresa argentina de ciberseguridad. Ethical Hacking, DevSecOps y prevención de riesgos para fintechs, bancos y SaaS.
          </p>

          {/* NAP — Local SEO signals */}
          <address style={{ fontStyle: 'normal', marginTop: 22, fontSize: 13,
          color: 'var(--fg-muted)', lineHeight: 1.7, fontFamily: 'var(--font-body)' }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <span style={{ color: 'var(--brotek-magenta)', marginTop: 2 }}>◆</span>
              <div>
                <strong style={{ color: 'var(--fg)' }}>Brotek S.A.</strong><br />
                Av. Dorrego 864<br />
                C1414 — Ciudad Autónoma de Buenos Aires<br />
                Argentina
              </div>
            </div>
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 4 }}>
              <a href="mailto:comercial@brotek.com.ar" style={{ color: 'var(--fg-muted)', textDecoration: 'none' }}>comercial@brotek.com.ar</a>
              <a href="tel:+541143334555" style={{ color: 'var(--fg-muted)', textDecoration: 'none' }}>+54 11 2450  2586</a>
            </div>
          </address>

          <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
            {[
          { name: 'linkedin', href: 'https://www.linkedin.com/company/brotekcybersecurity/posts/?feedView=all', label: 'LinkedIn' },
          { name: 'youtube', href: 'https://www.youtube.com/@brotek6020', label: 'YouTube' },
          { name: 'instagram', href: 'https://www.instagram.com/brotekok/', label: 'Instagram' }].
          map((s) =>
          <a key={s.name} href={s.href} aria-label={`Brotek en ${s.label}`}
          rel="noopener" target="_blank" style={{
            width: 38, height: 38, borderRadius: '50%',
            background: 'rgba(255,255,255,.04)', border: '1px solid rgba(255,255,255,.10)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--fg)',
            transition: 'all .15s'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(236,0,140,.5)';e.currentTarget.style.color = '#EC008C';}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(255,255,255,.10)';e.currentTarget.style.color = 'var(--fg)';}}>
                <Icon name={s.name} size={16} />
              </a>
          )}
          </div>
        </div>

        {/* Services column — full sitemap signal */}
        <div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 11,
          letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 18 }}>Servicios</h4>
          {[
        { l: 'Todos los servicios', h: FROOT + 'index.html#solucion' },
        { l: 'Ethical Hacking', h: FROOT + 'servicios/ethical-hacking.html' },
        { l: 'Offensive Security', h: FROOT + 'servicios/offensive-security.html' },
        { l: 'Defensive Team', h: FROOT + 'servicios/defensive-team.html' },
        { l: 'DevSecOps', h: FROOT + 'servicios/devsecops.html' },
        { l: 'GRC', h: FROOT + 'servicios/grc.html' },
        { l: 'Prevención de Riesgos', h: FROOT + 'servicios/prevencion-de-riesgos.html' }].
        map((s) =>
        <a key={s.h} href={s.h} style={{ display: 'block', fontSize: 14, color: 'var(--fg-muted)',
          textDecoration: 'none', padding: '6px 0', transition: 'color .15s' }}
        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg)'}
        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-muted)'}>{s.l}</a>
        )}
        </div>

        {/* Producto */}
        <div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 11,
          letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 18 }}>Producto</h4>
          {[
        { l: 'Plataforma Ariana', h: FROOT + 'index.html#ariana' },
        { l: 'ISO 27001', h: FROOT + 'servicios/grc.html' },
        { l: 'SOC 2', h: FROOT + 'servicios/grc.html' },
        { l: 'Casos de uso', h: FROOT + 'index.html#casos' }].
        map((s) =>
        <a key={s.l} href={s.h} style={{ display: 'block', fontSize: 14, color: 'var(--fg-muted)',
          textDecoration: 'none', padding: '6px 0', transition: 'color .15s' }}
        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg)'}
        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-muted)'}>{s.l}</a>
        )}
        </div>

        {/* Empresa */}
        <div>
          <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 11,
          letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--fg-subtle)', marginBottom: 18 }}>Empresa</h4>
          {[
        { l: 'Casos de uso', h: FROOT + 'index.html#casos' },
        { l: 'Blog', h: FROOT + 'Blog.html' },
        { l: 'Contacto', h: FROOT + 'contacto.html' },
        { l: 'Política de privacidad', h: FROOT + 'privacidad.html' }].
        map((s) =>
        <a key={s.l} href={s.h} style={{ display: 'block', fontSize: 14, color: 'var(--fg-muted)',
          textDecoration: 'none', padding: '6px 0', transition: 'color .15s' }}
        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg)'}
        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--fg-muted)'}>{s.l}</a>
        )}
        </div>

        {/* Newsletter */}
        <NewsletterFooter />
      </div>

      <div style={{ borderTop: '1px solid rgba(255,255,255,.06)', paddingTop: 24,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
      fontSize: 12, color: 'var(--fg-subtle)', fontFamily: 'var(--font-mono)', letterSpacing: '.04em' }}>
        <span>© 2026 BROTEK S.A. · Av. Dorrego 864, CABA · Argentina </span>
        <span>brotek.com.ar · <a href={FROOT + 'sitemap.xml'} style={{ color: 'inherit' }}>sitemap</a></span>
      </div>
    </div>
  </footer>;


window.Footer = Footer;