/* eslint-disable */
/* global React, useLang */
/* chrome.jsx — shared NavBar, Footer, TeramotMark for all pages. */

const { useState: useStateChrome, useEffect: useEffectChrome, useCallback: useCallbackChrome } = React;

const TeramotMark = ({ size = 24 }) => (
  <svg viewBox="0 0 212 195" width={size} height={(size * 195) / 212} aria-hidden="true">
    <path
      d="M44.8 97.5h122.6c25 0 45.1-20.1 45.1-45.1S192.4 7.3 167.4 7.3H45.2C20.2 7.3 0 27.5 0 52.5s19.9 45 44.8 45z"
      fill="#5A6DF3"
    />
    <circle cx="106.2" cy="142.2" r="44.7" fill="#91DFC8" />
    <circle cx="106.2" cy="52.5" r="45.3" fill="#253DE5" />
  </svg>
);

/* NavBar — pass `current` to highlight the active page link.
   `current` values: 'home' | 'pricing' | 'specialists' | 'tutorials' | 'docs' */
const NavBar = ({ current = 'home' }) => {
  const { lang, setLang, c } = useLang();
  const [scrolled, setScrolled] = useStateChrome(false);
  const [drawerOpen, setDrawerOpen] = useStateChrome(false);

  useEffectChrome(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffectChrome(() => {
    document.body.style.overflow = drawerOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [drawerOpen]);

  const link = (key, href, label) => (
    <a
      className={`tm-nav-link ${current === key ? 'is-current is-accent' : ''}`}
      href={href}
      onClick={() => setDrawerOpen(false)}
    >{label}</a>
  );

  return (
    <>
      <nav className={`tm-nav ${scrolled ? 'is-scrolled' : ''}`}>
        <div className="tm-container tm-nav-inner">
          <a href="index.html" className="tm-nav-logo" aria-label="Teramot home">
            <img src="brand/teramot-logo.png" alt="Teramot" className="tm-nav-logo-img" />
          </a>

          <div className="tm-nav-links">
            {link('home',        'index.html',          c.nav.product)}
            {link('pricing',     'pricing.html',        c.nav.pricing)}
            {link('specialists', 'specialists.html', c.nav.specialists)}
            {link('tutorials',   'tutorials.html',      c.nav.tutorials)}
            {link('docs',        'docs.html',          c.nav.docs)}
          </div>

          <div className="tm-nav-right">
            <div className="tm-lang" role="group" aria-label="Language">
              <button type="button" aria-current={lang === 'es' ? 'true' : 'false'} onClick={() => setLang('es')}>ES</button>
              <button type="button" aria-current={lang === 'en' ? 'true' : 'false'} onClick={() => setLang('en')}>EN</button>
            </div>
            <a className="tm-btn tm-btn-ghost tm-btn-sm tm-nav-call" href={c.links.call} target="_blank" rel="noopener noreferrer">{c.nav.book}</a>
            <a className="tm-btn tm-btn-dark tm-btn-sm tm-nav-cta-desktop" href={c.links.app}>{c.nav.start}</a>
            <button
              className="tm-nav-hamburger"
              aria-label="Abrir menú"
              aria-expanded={drawerOpen}
              onClick={() => setDrawerOpen(true)}
            >
              <span /><span /><span />
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile drawer */}
      <div className={`tm-drawer-overlay ${drawerOpen ? 'is-open' : ''}`} onClick={() => setDrawerOpen(false)} />
      <div className={`tm-drawer ${drawerOpen ? 'is-open' : ''}`} aria-hidden={!drawerOpen}>
        <div className="tm-drawer-header">
          <a href="index.html" className="tm-nav-logo" aria-label="Teramot home" onClick={() => setDrawerOpen(false)}>
            <img src="brand/teramot-logo.png" alt="Teramot" className="tm-nav-logo-img" />
          </a>
          <button className="tm-drawer-close" aria-label="Cerrar menú" onClick={() => setDrawerOpen(false)}>
            <i className="ph-bold ph-x" />
          </button>
        </div>
        <nav className="tm-drawer-links">
          {link('home',        'index.html',          c.nav.product)}
          {link('pricing',     'pricing.html',        c.nav.pricing)}
          {link('specialists', 'specialists.html',    c.nav.specialists)}
          {link('tutorials',   'tutorials.html',      c.nav.tutorials)}
          {link('docs',        'docs.html',           c.nav.docs)}
        </nav>
        <div className="tm-drawer-actions">
          <a className="tm-btn tm-btn-dark tm-btn-lg" href={c.links.app} onClick={() => setDrawerOpen(false)}>{c.nav.start}</a>
          <a className="tm-btn tm-btn-ghost tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer" onClick={() => setDrawerOpen(false)}>{c.nav.book}</a>
        </div>
        <div className="tm-drawer-lang">
          <div className="tm-lang" role="group" aria-label="Language">
            <button type="button" aria-current={lang === 'es' ? 'true' : 'false'} onClick={() => setLang('es')}>ES</button>
            <button type="button" aria-current={lang === 'en' ? 'true' : 'false'} onClick={() => setLang('en')}>EN</button>
          </div>
        </div>
      </div>
    </>
  );
};

const Footer = () => {
  const { c } = useLang();
  return (
    <footer className="tm-footer">
      <div className="tm-container tm-footer-inner">
        <a className="tm-nav-logo tm-footer-logo" href="index.html" aria-label="Teramot home">
          <TeramotMark size={22} />
          <span>teramot</span>
        </a>

        <div className="tm-footer-links">
          {c.footer.links.map((l, i) => (
            <a
              key={i}
              href={l.href}
              className={l.accent ? 'is-accent' : ''}
              {...(l.external ? { target: '_blank', rel: 'noopener' } : {})}
            >{l.label}</a>
          ))}
        </div>

        <span className="tm-footer-copy">{c.footer.copy}</span>
      </div>
      <WhatsAppFloat />
    </footer>
  );
};

/* Floating WhatsApp chat button — pinned bottom-right, every page.
   Direct wa.me link. May fail in restricted preview environments due to
   Cross-Origin-Opener-Policy on api.whatsapp.com — works fine on a normal
   production host (Vercel, Cloudflare Pages, custom). */
const WhatsAppFloat = () => (
  <a
    className="tm-wa-float"
    href="https://wa.me/5493364405007?text=Hola!%20Quiero%20saber%20m%C3%A1s%20sobre%20el%20producto."
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Chatear por WhatsApp"
    title="Chatear por WhatsApp"
  >
    <svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
      <path fill="currentColor" d="M16.001 3C9.373 3 4 8.373 4 15c0 2.36.68 4.564 1.85 6.42L4 29l7.78-2.04A11.93 11.93 0 0 0 16 27c6.627 0 12-5.373 12-12S22.628 3 16.001 3zm0 21.84a9.83 9.83 0 0 1-5.005-1.37l-.36-.214-4.62 1.21 1.235-4.503-.235-.37A9.82 9.82 0 1 1 25.84 15a9.83 9.83 0 0 1-9.84 9.84zm5.39-7.36c-.295-.148-1.745-.86-2.016-.96-.27-.098-.467-.148-.665.148-.197.296-.762.96-.935 1.158-.172.197-.345.222-.64.074-.295-.148-1.247-.46-2.376-1.466-.878-.783-1.47-1.75-1.643-2.046-.172-.296-.018-.456.13-.604.133-.132.295-.345.443-.518.148-.172.197-.296.295-.493.098-.197.05-.37-.025-.518-.074-.148-.665-1.604-.91-2.196-.24-.577-.485-.5-.665-.508l-.566-.01a1.09 1.09 0 0 0-.788.37c-.27.296-1.034 1.01-1.034 2.466 0 1.456 1.058 2.862 1.205 3.06.148.197 2.083 3.18 5.045 4.46.706.305 1.255.488 1.685.624.708.225 1.353.193 1.864.117.568-.085 1.745-.713 1.99-1.404.246-.69.246-1.282.172-1.404-.074-.122-.27-.197-.566-.345z"/>
    </svg>
  </a>
);

Object.assign(window, { TeramotMark, NavBar, Footer, WhatsAppFloat });