/** The Conscious Code — main App (2026 redesign). */

const { useEffect, useState } = React;

const NAV_LINKS = [
  { es: 'Inicio',    en: 'Home',     href: '#home' },
  { es: 'Nosotros',  en: 'About',    href: '#nosotros' },
  { es: 'Servicios', en: 'Services', href: '#servicios' },
  { es: 'Casos',     en: 'Work',     href: '#casos' },
  { es: 'Contacto',  en: 'Contact',  href: '#contacto' },
];

function Nav({ onOpenMobile }) {
  const { lang, toggle, t } = useLang();
  return (
    <div className="nav-wrap">
      <div className="nav">
        <Logo />
        <div className="nav-links">
          {NAV_LINKS.map(l => <a key={l.href} href={l.href}>{t(l.es, l.en)}</a>)}
          <button
            onClick={toggle}
            aria-label={t('Cambiar idioma', 'Change language')}
            style={{
              background: 'transparent', border: '1px solid rgba(255,255,255,0.10)',
              borderRadius: 9999, padding: '4px 12px',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--tcc-on-surface-variant)', letterSpacing: '0.2em', cursor: 'pointer',
              transition: 'border 300ms, color 300ms',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--tcc-primary)'; e.currentTarget.style.color = 'var(--tcc-primary)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.10)'; e.currentTarget.style.color = 'var(--tcc-on-surface-variant)'; }}
          >
            {lang} / {lang === 'ES' ? 'EN' : 'ES'}
          </button>
          <PrimaryButton sm onClick={() => document.getElementById('contacto')?.scrollIntoView()}>
            {t('Agenda tu llamada', 'Book a call')}
          </PrimaryButton>
        </div>
        <button className="hamburger" aria-label={t('Abrir menú', 'Open menu')} onClick={onOpenMobile}>
          <div style={{ width: 22, height: 22 }}><Icon.Menu /></div>
        </button>
      </div>
    </div>
  );
}

function MobileMenu({ open, onClose }) {
  const { t } = useLang();
  useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  const go = (href) => {
    onClose();
    setTimeout(() => document.querySelector(href)?.scrollIntoView({ behavior: 'smooth' }), 250);
  };

  return (
    <div className={`mobile-menu${open ? ' open' : ''}`} role="dialog" aria-hidden={!open}>
      <button
        aria-label={t('Cerrar menú', 'Close menu')}
        onClick={onClose}
        style={{
          position: 'absolute', top: 28, right: 24,
          background: 'transparent', border: 0, color: 'var(--tcc-on-surface)',
          width: 36, height: 36, cursor: 'pointer'
        }}
      >
        <div style={{ width: 24, height: 24 }}><Icon.X /></div>
      </button>
      {NAV_LINKS.map(l => (
        <a key={l.href} href={l.href} onClick={(e) => { e.preventDefault(); go(l.href); }}>{t(l.es, l.en)}</a>
      ))}
      <div className="mm-cta">
        <PrimaryButton fullWidth onClick={() => go('#contacto')}>{t('Agenda tu llamada', 'Book a call')}</PrimaryButton>
      </div>
    </div>
  );
}

function App() {
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <>
      <Starscape />
      <div className="noise-layer" />
      <Nav onOpenMobile={() => setMobileOpen(true)} />
      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} />
      <main className="app">
        <HeroNew />
        <PainPoints />
        <RoadmapServices />
        <RoiCalculator />
        <WhyUs />
        <CasesCarousel />
        <FAQ />
        <ContactForm />
        <FooterNew />
      </main>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);