// Top nav + ticker

const Nav = () => {
  const { t } = window.useT();
  return (
    <div className="nav">
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 32px' }}>
        <Logo />
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center' }} className="mono">
          <a href="#problema" className="ulink" style={{ border: 'none' }}>{t.nav.problema}</a>
          <a href="#solucion" className="ulink" style={{ border: 'none' }}>{t.nav.solucion}</a>
          <a href="#paquetes" className="ulink" style={{ border: 'none' }}>{t.nav.paquetes}</a>
          <a href="#roi" className="ulink" style={{ border: 'none' }}>{t.nav.roi}</a>
          <a href="#casos" className="ulink" style={{ border: 'none' }}>{t.nav.casos}</a>
        </nav>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <window.LangToggle />
          <button className="btn btn-primary">{t.nav.cta}<Arrow /></button>
        </div>
      </div>
    </div>
  );
};

const Ticker = () => {
  const { t } = window.useT();
  const row = (
    <span>
      {t.ticker.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          <span className="dot" />
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
};

Object.assign(window, { Nav, Ticker });