/* global React */
// ===== Icon set (stroke, currentColor) =====
const I = {};
const mk = (paths, extra={}) => (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={extra.w||2}
       strokeLinecap="round" strokeLinejoin="round" {...props}>
    {paths}
  </svg>
);
I.phone   = mk(<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/>);
I.wa      = mk(<path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm5.8 14.06c-.24.68-1.42 1.32-1.96 1.36-.5.05-.99.23-3.38-.7-2.84-1.12-4.65-4.02-4.79-4.21-.14-.19-1.15-1.52-1.15-2.9s.72-2.06.98-2.34c.26-.28.56-.35.75-.35l.54.01c.17 0 .4-.07.63.48.24.56.81 1.94.88 2.08.07.14.12.3.02.49-.1.19-.14.3-.28.47-.14.16-.3.36-.42.49-.14.14-.29.29-.12.57.16.28.73 1.2 1.56 1.95 1.07.95 1.97 1.25 2.25 1.39.28.14.44.12.6-.07.16-.19.69-.81.88-1.08.18-.28.37-.23.62-.14.25.09 1.61.76 1.89.9.28.14.46.21.53.32.07.12.07.68-.17 1.36Z" />, {w:0});
I.cash    = mk(<><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/><path d="M6 12h.01M18 12h.01"/></>);
I.bolt    = mk(<path d="M13 2 4.5 13.5H11l-1 8L19.5 10H13l0-8Z"/>);
I.shield  = mk(<><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></>);
I.truck   = mk(<><path d="M14 17V5a1 1 0 0 0-1-1H2v13"/><path d="M14 8h5l3 4v5h-8"/><circle cx="6.5" cy="17.5" r="2"/><circle cx="17.5" cy="17.5" r="2"/></>);
I.tag     = mk(<><path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0l-7.6-7.6V3h9.99l7.6 7.6a2 2 0 0 1 0 2.81Z"/><circle cx="7.5" cy="7.5" r="1.3"/></>);
I.box     = mk(<><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5M12 22V12"/></>);
I.store   = mk(<><path d="M3 9 4 4h16l1 5M4 9v11h16V9M4 9h16"/><path d="M9 20v-6h6v6"/></>);
I.layers  = mk(<><path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 17l9 5 9-5"/></>);
I.globe   = mk(<><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20Z"/></>);
I.chart   = mk(<><path d="M3 3v18h18"/><path d="m7 14 3-4 3 3 5-7"/></>);
I.check   = mk(<path d="M20 6 9 17l-5-5"/>);
I.checkc  = mk(<><circle cx="12" cy="12" r="10"/><path d="m8 12 3 3 5-6"/></>);
I.arrow   = mk(<path d="M5 12h14M13 6l6 6-6 6"/>);
I.mail    = mk(<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 6 10 7 10-7"/></>);
I.clock   = mk(<><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>);
I.euro    = mk(<path d="M17 6A7 7 0 1 0 17 18M3 11h10M3 14h9"/>);
I.handshake= mk(<path d="m11 17 2 2a1 1 0 0 0 1.4 0l3.6-3.6M14 13l1.5 1.5a1 1 0 0 0 1.4 0l2-2a1 1 0 0 0 0-1.4L16 7.6a2 2 0 0 0-1.4-.6H12L9 4 3 10l3 3M3 10l3 3m5 4-1.5-1.5a1 1 0 0 0-1.4 0L6 17"/>);
I.spark   = mk(<path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/>);
I.shirt   = mk(<path d="M20 4 16 2a4 4 0 0 1-8 0L4 4 2 8l3 2v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V10l3-2-2-4Z"/>);
I.cpu     = mk(<><rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2"/></>);
I.washer  = mk(<><rect x="4" y="2" width="16" height="20" rx="2"/><circle cx="12" cy="13" r="5"/><path d="M8 6h.01M12 6h.01"/></>);
I.toy     = mk(<><circle cx="12" cy="8" r="5"/><path d="M12 13v3M9 19h6a2 2 0 0 1 2 2H7a2 2 0 0 1 2-2Z"/></>);
I.home    = mk(<><path d="m3 10 9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/><path d="M9 21V12h6v9"/></>);
I.perfume = mk(<><path d="M9 2h6v3H9zM10 5h4v2h-4z"/><rect x="7" y="7" width="10" height="14" rx="2"/><path d="M10 12h4"/></>);
I.refresh = mk(<><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></>);
I.search  = mk(<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>);
I.moon    = mk(<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>);
I.sun     = mk(<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></>);
I.chev    = mk(<path d="M6 9l6 6 6-6"/>);

window.I = I;

// ===== Theme toggle + Language dropdown =====
function Controls({ theme, setTheme, lang, setLang, langs }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("click", h);
    return () => document.removeEventListener("click", h);
  }, []);
  const cur = langs.find(l => l.code === lang) || langs[0];
  return (
    <div className="ctrls">
      <button className="theme-toggle" aria-label="Tema" onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
        <span className="t-knob">
          <I.moon className="moon" /><I.sun className="sun" />
        </span>
      </button>
      <div className={"lang" + (open ? " open" : "")} ref={ref}>
        <button className="lang-btn" aria-label="Idioma" onClick={() => setOpen(o => !o)}>
          <span className="fl">{cur.flag}</span>{cur.code.toUpperCase()}<I.chev className="chev" />
        </button>
        <div className="lang-menu">
          {langs.map(l => (
            <button key={l.code} className={l.code === lang ? "active" : ""}
                    onClick={() => { setLang(l.code); setOpen(false); }}>
              <span className="fl">{l.flag}</span>{l.label}
              {l.code === lang && <I.check className="ck" />}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.Controls = Controls;

// ===== Header =====
function Header({ t, scrolled, menuOpen, setMenuOpen, contact, theme, setTheme, lang, setLang, langs }) {
  const nav = [
    { href: "#inicio",    label: t.nav.inicio },
    { href: "#servicios", label: t.nav.servicios },
    { href: "#tipos",     label: t.nav.tipos },
    { href: "#nosotros",  label: t.nav.nosotros },
    { href: "#faq",       label: t.nav.faq },
    { href: "#contacto",  label: t.nav.contacto },
  ];
  const go = (e, href) => {
    e.preventDefault();
    setMenuOpen(false);
    const el = document.querySelector(href);
    if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
  };
  return (
    <>
      <header className={"hdr" + (scrolled ? " scrolled" : "")}>
        <div className="wrap hdr-in">
          <a href="#inicio" className="brand" onClick={(e)=>go(e,"#inicio")}>
            <img src="assets/logo-transparent.png" alt="Comprostock20" className="brand-img" />
          </a>
          <nav className="nav">
            {nav.map((n) => (
              <a key={n.href} href={n.href} onClick={(e)=>go(e,n.href)}>{n.label}</a>
            ))}
          </nav>
          <div className="hdr-cta">
            <Controls theme={theme} setTheme={setTheme} lang={lang} setLang={setLang} langs={langs} />
            <a className="btn btn-primary" href="#contacto" onClick={(e)=>go(e,"#contacto")}>
              {t.cta.sell} <I.arrow />
            </a>
            <button className={"burger"+(menuOpen?" open":"")} aria-label="Menú"
                    onClick={()=>setMenuOpen(o=>!o)}>
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </header>

      <div className={"menu"+(menuOpen?" open":"")}>
        <div style={{maxWidth:"640px",margin:"0 auto",width:"100%"}}>
          {nav.map((n,i)=>(
            <a key={n.href} className="m-link" href={n.href} onClick={(e)=>go(e,n.href)}>
              {n.label}<span>0{i+1}</span>
            </a>
          ))}
          <div className="m-foot">
            <a href={"tel:"+contact.telRaw}><I.phone /> {contact.tel}</a>
            <a href={contact.waLink}><I.wa /> WhatsApp</a>
            <a href={"mailto:"+contact.email}><I.mail /> {contact.email}</a>
          </div>
        </div>
      </div>
    </>
  );
}
window.Header = Header;