// 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.

// Contact channels for every CTA on the page. WhatsApp is the primary channel:
// it opens a direct chat on any device without login. Instagram is secondary.
const EG_CONTACT = {
  wa: 'https://wa.me/573222163590?text=' + encodeURIComponent('Hola Esteban, vi estebanguzman.co y quiero analizar un proceso de mi empresa.'),
  ig: 'https://ig.me/m/estebanguzmannc'
};
window.EG_CONTACT = EG_CONTACT;

// Section head shared by the six numbered sections: the number and the section
// name carry the hierarchy (big, near-white); the descriptive phrase hangs below
// in a smaller voice. `light` flips the palette for the light-themed band.
function SectionHead({ num, title, phrase, light }) {
  return (
    <div className={'lp-shead' + (light ? ' lp-shead--light' : '')}>
      <div className="lp-shead-top">
        <span className="lp-shead-num">{num}</span>
        <h2 className="lp-shead-t">{title}</h2>
      </div>
      {phrase && <p className="lp-shead-p">{phrase}</p>}
    </div>
  );
}

const NAV = [
  ['Diagnóstico', '#problema'],
  ['Capacidades', '#soluciones'],
  ['Metodología', '#metodologia'],
  ['Casos', '#casos'],
  ['Contacto', '#contacto']
];

function Header({ onWorkspace }) {
  const { Button, IconButton } = window.EG;
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  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">Esteban Guzmán</span>
        </a>
        <nav className="lp-nav">
          {NAV.map(([label, href]) => <a key={href} href={href}>{label}</a>)}
        </nav>
        <div className="lp-header-cta">
          <span className="lp-hide-sm">
            <Button variant="ghost" size="sm" icon="lock" onClick={onWorkspace}>Workspace</Button>
          </span>
          <a className="lp-ig" href={EG_CONTACT.ig} target="_blank" rel="noopener" aria-label="Instagram de Esteban Guzmán">
            <img src="../../assets/social/instagram.svg" alt="" />
          </a>
          <Button size="sm" iconRight="north_east" onClick={() => window.open(EG_CONTACT.wa, '_blank', 'noopener')}>Hablemos</Button>
        </div>
        <span className="lp-burger"><IconButton icon={open ? 'close' : 'menu'} label="Menú" variant="solid" onClick={() => setOpen(o => !o)} /></span>
      </div>
      {open && (
        <nav className="lp-menu">
          {NAV.map(([label, href]) => <a key={href} href={href} onClick={close}>{label}</a>)}
          <span className="lp-menu-rule" />
          <a href="/workspace" onClick={e => { e.preventDefault(); close(); onWorkspace(); }}>
            <span className="eg-icon">lock</span>Workspace privado
          </a>
          <a className="lp-menu-cta" href={EG_CONTACT.wa} target="_blank" rel="noopener" onClick={close}>
            <span className="eg-icon">chat</span>Hablemos por WhatsApp
          </a>
        </nav>
      )}
    </header>
  );
}

function Footer({ onWorkspace }) {
  const { Button, Badge } = window.EG;
  // Every link points somewhere real: anchors within the page, live contact
  // channels, or products in production. No placeholder rows.
  const cols = [
    ['Secciones', NAV.map(([label, href]) => ({ label, href }))],
    ['Contacto', [
      { label: 'WhatsApp directo', href: EG_CONTACT.wa, ext: true },
      { label: 'Instagram', href: EG_CONTACT.ig, ext: true }
    ]],
    ['Productos', [
      { label: 'Skalah — skalah.ai', href: 'https://skalah.ai', ext: true },
      { label: 'Nova by She Scales', href: 'https://nova.saralinares.com/inicio', ext: true }
    ]]
  ];
  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.label} href={l.href} {...(l.ext ? { target: '_blank', rel: 'noopener' } : {})}>{l.label}</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)' }}>ESTEBANGUZMAN.CO — © 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, SectionHead });