const { Button, Logo, SectionLabel, Icon } = window.DatnovaDesignSystem_e8e0a8;
const DS_BASE = '_ds/datnova-design-system-e8e0a872-430b-4232-8b16-b6fb18b0102a';

const NAV = [
  { id: 'servicios', label: 'Servicios' },
  { id: 'metodologia', label: 'Metodología' },
  { id: 'nosotros', label: 'Nosotros' },
];

/** Campo de chevrones — textura geométrica derivada del símbolo. Nunca sobre texto. */
function ChevronField({ opacity = 0.1 }) {
  const rows = [0, 1, 2, 3, 4, 5, 6];
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      <div style={{ position: 'absolute', right: -70, top: -50, display: 'grid', gap: 18, opacity }}>
        {rows.map(r => (
          <div key={r} style={{ display: 'flex', gap: 18, marginLeft: r * 26 }}>
            {[0, 1, 2, 3, 4, 5, 6].map(c => (
              <span key={c} style={{ width: 0, height: 0, borderLeft: '22px solid ' + (((r + c) % 3 === 0) ? 'var(--dn-turquesa)' : 'var(--dn-esmeralda)'), borderTop: '16px solid transparent', borderBottom: '16px solid transparent' }} />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function SiteHeader({ route, onNavigate }) {
  const [solid, setSolid] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 48);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => { setOpen(false); }, [route]);
  /* Todas las pantallas abren sobre banda Azul Noche, así que el header
     arranca transparente en cualquier ruta y se vuelve sólido al hacer scroll. */
  const onDark = !solid;
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, background: onDark ? 'transparent' : 'rgba(255,255,255,.92)', backdropFilter: onDark ? 'none' : 'blur(10px)', borderBottom: '1px solid ' + (onDark ? 'transparent' : 'var(--border-subtle)'), transition: 'background var(--dur-ui) var(--ease-standard), border-color var(--dur-ui) var(--ease-standard)' }}>
      <div className="dn-container" style={{ height: 88, display: 'flex', alignItems: 'center', gap: 32 }}>
        <button onClick={() => onNavigate('home')} aria-label="Datnova — inicio" style={{ border: 0, background: 'transparent', padding: 0, cursor: 'pointer', display: 'flex' }}>
          <Logo variant="horizontal" tone={onDark ? 'dark' : 'light'} width={260} assetBase={DS_BASE} className="site-logo" />
        </button>
        <nav className="nav-links" aria-label="Principal">
          {NAV.map(n => (
            <button key={n.id} onClick={() => onNavigate(n.id)}
              style={{ border: 0, background: 'transparent', cursor: 'pointer', padding: '4px 0', fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: route === n.id ? 600 : 400,
                color: onDark ? (route === n.id ? '#fff' : 'rgba(255,255,255,.74)') : (route === n.id ? 'var(--text-heading)' : 'var(--text-muted)'),
                borderBottom: '2px solid ' + (route === n.id ? 'var(--dn-esmeralda)' : 'transparent'),
                transition: 'color var(--dur-ui) var(--ease-standard)' }}>{n.label}</button>
          ))}
        </nav>
        <span className="nav-cta"><Button size="sm" iconTrailing="arrow-right" onClick={() => onNavigate('diagnostico')}>Diagnóstico de 2 semanas</Button></span>
        <button className="nav-toggle" aria-label="Abrir menú" aria-expanded={open} onClick={() => setOpen(!open)}
          style={{ marginLeft: 'auto', border: '1px solid ' + (onDark ? 'var(--border-inverse)' : 'var(--border-subtle)'), background: 'transparent', borderRadius: 8, width: 44, height: 44, alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: onDark ? '#fff' : 'var(--text-heading)' }}>
          <Icon name={open ? 'x' : 'menu'} size={20} />
        </button>
      </div>
      {open ? (
        <div style={{ background: '#fff', borderTop: '1px solid var(--border-subtle)', boxShadow: 'var(--shadow-raised)' }}>
          <div className="dn-container" style={{ display: 'grid', gap: 4, padding: '12px 24px 20px' }}>
            {NAV.map(n => (
              <button key={n.id} onClick={() => onNavigate(n.id)} style={{ border: 0, background: 'transparent', textAlign: 'left', padding: '14px 0', minHeight: 44, fontFamily: 'var(--font-body)', fontSize: 17, fontWeight: 500, color: 'var(--text-heading)', cursor: 'pointer', borderBottom: '1px solid var(--border-subtle)' }}>{n.label}</button>
            ))}
            <Button style={{ marginTop: 12 }} fullWidth iconTrailing="arrow-right" onClick={() => onNavigate('diagnostico')}>Diagnóstico de 2 semanas</Button>
          </div>
        </div>
      ) : null}
    </header>
  );
}

function SiteFooter({ onNavigate }) {
  const cols = [
    { t: 'Servicios', l: [['Plataformas de datos', 'servicios', 'plataformas'], ['Analítica & BI', 'servicios', 'analitica'], ['IA aplicada', 'servicios', 'ia'], ['Gobernanza de datos', 'servicios', 'gobernanza'], ['Migración cloud', 'servicios', 'cloud']] },
    { t: 'Empresa', l: [['Nosotros', 'nosotros', null], ['Metodología', 'metodologia', null]] },
  ];
  return (
    <footer style={{ background: 'var(--surface-inverse)', color: '#fff', paddingTop: 72 }}>
      <div className="dn-container footer-grid" style={{ display: 'grid', gap: 40, paddingBottom: 56 }}>
        <div style={{ display: 'grid', gap: 18, alignContent: 'start' }}>
          <Logo variant="horizontal" tone="dark" width={152} assetBase={DS_BASE} />
          <div className="dn-label" style={{ fontSize: 11, color: 'var(--dn-menta)' }}>Data · Analytics · AI · Cloud · Software</div>
          <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,.62)', maxWidth: 300 }}>
            Cerramos el Execution Gap: de la estrategia de datos e IA a producción real. Partners de Microsoft y Databricks.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.t} style={{ display: 'grid', gap: 12, alignContent: 'start' }}>
            <div className="dn-label" style={{ fontSize: 11, color: 'var(--dn-menta)' }}>{c.t}</div>
            {c.l.map(([label, r, a]) => (
              <a key={label} href="#" onClick={e => { e.preventDefault(); onNavigate(r, a); }} style={{ fontSize: 14, color: 'rgba(255,255,255,.72)' }}>{label}</a>
            ))}
          </div>
        ))}
        <div style={{ display: 'grid', gap: 12, alignContent: 'start' }}>
          <div className="dn-label" style={{ fontSize: 11, color: 'var(--dn-menta)' }}>Contacto</div>
          <a href="mailto:contacto@datnova.ai" style={{ fontSize: 14, color: 'rgba(255,255,255,.72)', display: 'inline-flex', gap: 8, alignItems: 'center' }}><Icon name="mail" size={16} />contacto@datnova.ai</a>
          <a href="https://www.linkedin.com/company/datnova/" target="_blank" rel="noopener" style={{ fontSize: 14, color: 'rgba(255,255,255,.72)', display: 'inline-flex', gap: 8, alignItems: 'center' }}><Icon name="linkedin" size={16} />LinkedIn</a>
          <a href="https://datnova.ai" style={{ fontSize: 14, color: 'rgba(255,255,255,.72)', display: 'inline-flex', gap: 8, alignItems: 'center' }}><Icon name="globe" size={16} />datnova.ai</a>
          <a href="#" onClick={e => { e.preventDefault(); onNavigate('diagnostico'); }} style={{ fontSize: 14, color: 'var(--dn-menta)' }}>Agendar diagnóstico</a>
        </div>
      </div>
      <div style={{ borderTop: '1px solid var(--border-inverse)' }}>
        <div className="dn-container" style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', padding: '20px 24px', fontSize: 12, color: 'rgba(255,255,255,.5)' }}>
          <span>© 2026 Datnova · Colombia y Perú</span>
          <span style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="#" onClick={e => e.preventDefault()} style={{ color: 'inherit' }}>Política de privacidad</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function Section({ children, tone = 'light', tight = false, id, style }) {
  const bg = tone === 'muted' ? 'var(--surface-muted)' : tone === 'inverse' ? 'var(--surface-inverse)' : 'var(--surface-page)';
  return (
    <section id={id} className={tight ? 'sec-tight' : 'sec'} style={{ background: bg, ...style }}>
      <div className="dn-container" style={{ position: 'relative' }}>{children}</div>
    </section>
  );
}

function SectionHead({ eyebrow, title, lead, tone = 'light', align = 'left', max = 660 }) {
  const dark = tone === 'inverse';
  return (
    <div style={{ display: 'grid', gap: 14, maxWidth: max, margin: align === 'center' ? '0 auto' : undefined, textAlign: align, justifyItems: align === 'center' ? 'center' : 'start' }}>
      {eyebrow ? <SectionLabel tone={dark ? 'inverse' : 'accent'}>{eyebrow}</SectionLabel> : null}
      <h2 style={{ color: dark ? '#fff' : 'var(--text-heading)', textWrap: 'pretty' }}>{title}</h2>
      {lead ? <p className="dn-lead" style={{ color: dark ? 'rgba(255,255,255,.72)' : 'var(--text-muted)' }}>{lead}</p> : null}
    </div>
  );
}

/** Cierre estándar: un solo CTA primario por página, siempre al diagnóstico. */
function CtaBand({ onNavigate, title = 'El Execution Gap es real. Y se puede cerrar.', body = 'Empezamos con un diagnóstico de 2 semanas: mapeamos tu brecha específica y te entregamos un Execution Gap Brief con arquitectura propuesta. Monto fijo, sin compromiso de proyecto completo.', cta = 'Agendar diagnóstico' }) {
  return (
    <section style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden', padding: '88px 0' }}>
      <ChevronField opacity={0.08} />
      <div className="dn-container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 40, alignItems: 'center' }}>
        <img src={DS_BASE + '/assets/logo/simbolo-esmeralda.png'} alt="" aria-hidden="true" width="96" height="96" loading="lazy" style={{ width: 96, height: 'auto', opacity: .95 }} />
        <div style={{ display: 'grid', gap: 16, maxWidth: 720 }}>
          <h2 style={{ color: '#fff', textWrap: 'pretty' }}>{title}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,.74)' }}>{body}</p>
          <div style={{ marginTop: 8 }}><Button size="lg" iconTrailing="arrow-right" onClick={() => onNavigate('diagnostico')}>{cta}</Button></div>
        </div>
      </div>
    </section>
  );
}

/** Encabezado de páginas internas: misma banda Azul Noche + campo de chevrones
    que el hero de la home, para que todas las pantallas abran igual.
    El header mide 89 px reales (fila de 88 + borde inferior de 1 px), asi que la
    banda sube -89 para no dejar una linea del fondo de la pagina asomando arriba.
    paddingTop 153 = 89 + 64 deja el ritmo de seccion intacto. */
function PageHead({ eyebrow, title, lead, children }) {
  return (
    <section className="sec-tight" style={{ background: 'var(--surface-inverse)', position: 'relative', overflow: 'hidden', marginTop: -89, paddingTop: 153 }}>
      <ChevronField opacity={0.1} />
      <div className="dn-container" style={{ position: 'relative', display: 'grid', gap: 18, maxWidth: 820 }}>
        <SectionLabel tone="inverse">{eyebrow}</SectionLabel>
        <h1 style={{ color: '#fff', fontSize: 'clamp(34px,4.4vw,52px)', textWrap: 'pretty' }}>{title}</h1>
        {lead ? <p className="dn-lead" style={{ maxWidth: 680, color: 'rgba(255,255,255,.72)' }}>{lead}</p> : null}
        {children}
      </div>
    </section>
  );
}

Object.assign(window, { DS_BASE, NAV, ChevronField, SiteHeader, SiteFooter, Section, SectionHead, CtaBand, PageHead });