// Design-system components resolve at render time from window.EG (set by index.html
// once the bundle is ready), so these files can load before it exists.
const NAV = ['Soluciones', 'Agentes IA', 'Automatización', 'Software', 'Casos'];

function Header({ onWorkspace }) {
  const { Button, IconButton } = window.EG;
  return (
    <header className="lp-header">
      <svg className="lp-glass-defs" aria-hidden="true" focusable="false">
        <filter id="eg-lg-refract" x="-24%" y="-24%" width="148%" height="148%" colorInterpolationFilters="sRGB">
          <feTurbulence type="fractalNoise" baseFrequency="0.004 0.019" numOctaves="2" seed="9" result="n" />
          <feGaussianBlur in="n" stdDeviation="2.4" result="s" />
          <feDisplacementMap in="SourceGraphic" in2="s" scale="34" xChannelSelector="R" yChannelSelector="G" />
        </filter>
      </svg>
      <span className="lp-glass" aria-hidden="true">
        <span className="lp-glass-refract" />
        <span className="lp-glass-body" />
        <span className="lp-glass-lip" />
      </span>
      <div className="lp-wrap lp-header-in">
        <a href="#top" className="lp-brand">
          <img src="../../assets/logo-icon.png" alt="Esteban Guzmán" />
          <span className="eg-wordmark" style={{ fontSize: 12 }}>Esteban Guzmán</span>
        </a>
        <nav className="lp-nav">
          {NAV.map(n => <a key={n} href={'#' + n.toLowerCase()}>{n}</a>)}
        </nav>
        <div className="lp-header-cta">
          <span className="lp-hide-sm">
            <Button variant="ghost" size="sm" icon="lock" onClick={onWorkspace}>Workspace</Button>
          </span>
          <Button size="sm" iconRight="north_east">Hablemos</Button>
        </div>
        <span className="lp-burger"><IconButton icon="menu" label="Menú" variant="solid" /></span>
      </div>
    </header>
  );
}

function Footer({ onWorkspace }) {
  const { Button, Badge } = window.EG;
  const cols = [
    ['Servicios', ['IA aplicada', 'Automatización', 'Desarrollo de software', 'Data & analítica', 'Integraciones']],
    ['Empresa', ['Nosotros', 'Casos', 'Metodología', 'Contacto']],
    ['Sistema', ['Workspace interno', 'Estado de servicios', 'Aviso legal', 'Privacidad']]
  ];
  return (
    <footer className="lp-footer">
      <div className="lp-wrap">
        <div className="lp-footer-grid">
          <div className="lp-footer-col">
            <img src="../../assets/logo-icon.png" alt="" style={{ width: 34 }} />
            <div className="eg-wordmark" style={{ fontSize: 13, marginTop: 4 }}>Esteban Guzmán</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, font: 'var(--type-mono-sm)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
              <span>AI</span><span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--ion-500)' }} />
              <span>Automation</span><span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--flux-500)' }} />
              <span>Software</span>
            </div>
            <p style={{ font: 'var(--type-body-sm)', color: 'var(--text-muted)', maxWidth: '34ch', marginTop: 10 }}>
              Consultoría de inteligencia artificial, automatización y desarrollo para empresas que ya tienen operación.
            </p>
          </div>
          {cols.map(([title, links]) => (
            <div className="lp-footer-col" key={title}>
              <span className="eg-eyebrow">{title}</span>
              {links.map(l => <a key={l} href="#">{l}</a>)}
            </div>
          ))}
        </div>
        <div className="lp-rule" style={{ margin: '48px 0 20px' }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ font: 'var(--type-mono-sm)', color: 'var(--text-muted)', letterSpacing: 'var(--tracking-label)' }}>IA.ESTEBANGUZMAN.COM — © 2026</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Badge tone="success" variant="quiet">Sistemas operativos</Badge>
            <Button variant="ghost" size="sm" icon="lock" onClick={onWorkspace}>Acceso interno</Button>
          </div>
        </div>
      </div>
    </footer>
  );
}

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