// karm.dev — Nav, Footer (localized, with lang + theme toggles)

function Logo({ inverse = false }) {
  return (
    <a className="site-nav__logo" href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'}); }}>
      <span className="logo-mark" aria-hidden="true">
        <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
          <rect width="32" height="32" rx="8" fill={inverse ? '#10B981' : '#0F172E'}/>
          <path d="M10 9v14M10 16l7-7M10 16l7 7"
            stroke={inverse ? '#0A0F1F' : '#10B981'}
            strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </span>
      <span className="logo-text" style={inverse ? { color: 'var(--white)' } : {}}>
        karm<span className="logo-dot">.</span>dev
      </span>
    </a>
  );
}

function LangToggle({ lang, onChange }) {
  return (
    <div className="lang-toggle" role="tablist" aria-label="Language">
      <button
        className={lang === 'es' ? 'is-active' : ''}
        onClick={() => onChange('es')}>ES</button>
      <button
        className={lang === 'en' ? 'is-active' : ''}
        onClick={() => onChange('en')}>EN</button>
    </div>
  );
}

function ThemeToggle({ theme, onChange }) {
  const next = theme === 'dark' ? 'light' : 'dark';
  return (
    <button className="theme-toggle" onClick={() => onChange(next)}
      aria-label="Toggle theme" title={`Switch to ${next} mode`}>
      {theme === 'dark' ? (
        // sun
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"/>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
        </svg>
      ) : (
        // moon
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/>
        </svg>
      )}
    </button>
  );
}

function Nav({ current, onNavigate, lang, onLang, theme, onTheme, sections, t }) {
  const [isOpen, setIsOpen] = React.useState(false);
  const links = [
    { id: 'proyectos', label: t('nav.projects'), show: sections.projects },
    { id: 'experiencia', label: t('nav.experience'), show: sections.experience },
    { id: 'skills', label: t('nav.skills'), show: sections.skills },
    { id: 'contacto', label: t('nav.contact'), show: sections.contact },
  ].filter(l => l.show);

  const handleNavigate = (id) => { setIsOpen(false); onNavigate(id); };

  return (
    <nav className={`site-nav${isOpen ? ' site-nav--open' : ''}`}>
      <Logo />
      <ul className="site-nav__links">
        {links.map(l => (
          <li key={l.id}>
            <a href={`#${l.id}`}
              className={current === l.id ? 'is-active' : ''}
              onClick={(e) => { e.preventDefault(); handleNavigate(l.id); }}>
              {l.label}
            </a>
          </li>
        ))}
      </ul>
      <div className="nav-utility">
        <LangToggle lang={lang} onChange={onLang} />
        <ThemeToggle theme={theme} onChange={onTheme} />
        <div className="site-nav__cta">
          <Button variant="accent" size="sm" onClick={() => handleNavigate('contacto')}>
            {t('nav.cta')}
          </Button>
        </div>
        <button
          className="site-nav__hamburger"
          onClick={() => setIsOpen(o => !o)}
          aria-label={isOpen ? 'Cerrar menú' : 'Abrir menú'}
          aria-expanded={isOpen}
        >
          {isOpen ? (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          ) : (
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
          )}
        </button>
      </div>
    </nav>
  );
}

function Footer({ t }) {
  return (
    <footer className="site-footer">
      <div className="site-footer__inner">
        <div className="site-footer__brand">
          <span className="logo-text" style={{color: 'var(--white)'}}>
            karm<span style={{color: 'var(--accent)'}}>.</span>dev
          </span>
          <p>{t('footer.tag')}</p>
        </div>
        <div className="site-footer__links">
          <a href="https://github.com/krosales-karm" target="_blank" rel="noreferrer">GitHub</a>
          <a href="https://www.linkedin.com/in/kevin-rosales-data/" target="_blank" rel="noreferrer">LinkedIn</a>
          <a href="https://www.instagram.com/karmdeveloper/" target="_blank" rel="noreferrer">Instagram</a>
          <a href="mailto:krosales@karm.dev">Email</a>
        </div>
      </div>
      <div className="site-footer__legal">{t('footer.legal')}</div>
    </footer>
  );
}

window.Logo = Logo;
window.Nav = Nav;
window.Footer = Footer;