/* Hard4Tech — shared components. Exports to window. */

/* Scroll reveal hook */
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el, i) => { el.style.transitionDelay = (Math.min(i, 6) * 60) + "ms"; io.observe(el); });
    return () => io.disconnect();
  });
}

/* Animated counter */
function Counter({ value, suffix = "", decimal = false }) {
  const ref = React.useRef(null);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf, started = false;
    const el = ref.current;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const dur = 1500, t0 = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setN(value * eased);
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (el) io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [value]);
  const display = decimal ? n.toFixed(1) : Math.round(n).toLocaleString();
  return <span ref={ref}>{display}{suffix}</span>;
}

/* Logo lockup */
function Logo({ sub, onClick }) {
  return (
    <a href="index.html" className="logo" onClick={onClick} aria-label="Hard4Tech home">
      <img src="assets/logo-white.png" alt="Hard4Tech" className="logo__img logo__img--white" />
      <img src="assets/logo.png" alt="Hard4Tech" className="logo__img logo__img--color" />
    </a>
  );
}

/* Section heading */
function SectionHead({ eyebrow, title, desc, center, className = "" }) {
  return (
    <div className={"sec-head reveal " + (center ? "center " : "") + className}>
      <span className="eyebrow">{eyebrow}</span>
      <h2 className="display h2">{title}</h2>
      {desc && <p className="lead">{desc}</p>}
    </div>
  );
}

/* Top navigation */
function Nav({ t, route, go, lang, toggleLang }) {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => { setOpen(false); }, [route]);

  const link = (item) => (
    <a
      key={item.id}
      href={item.file}
      className={"nav__link" + (route === item.id ? " is-active" : "")}
    >{item.label}</a>
  );

  return (
    <header className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="container nav__inner">
        <Logo onClick={(e) => { e.preventDefault(); go("home"); }} />
        <nav className="nav__links">{t.nav.map(link)}</nav>
        <div className="nav__actions">
          <button className="nav__lang" onClick={toggleLang} aria-label="Switch language">
            <span>{t.langLabel}</span>
          </button>
          <a className="btn btn--primary btn--arrow nav__cta" href="contact.html">
            {t.cta.quote}<Icon name="arrow" size={16} className="arr" />
          </a>
          <button className="nav__burger" onClick={() => setOpen((v) => !v)} aria-label="Menu">
            <Icon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>
      <div className={"nav__mobile" + (open ? " is-open" : "")}>
        {t.nav.map((item) => (
          <a key={item.id} href={item.file} className={"nav__mlink" + (route === item.id ? " is-active" : "")}>
            {item.label}<Icon name="arrow" size={18} />
          </a>
        ))}
        <a className="btn btn--primary" href="contact.html" style={{ marginTop: 12, justifyContent: "center" }}>{t.cta.quote}</a>
      </div>
    </header>
  );
}

/* Footer */
function Footer({ t, go }) {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src="assets/logo-white.png" alt="Hard4Tech" className="footer__logo footer__logo--white" />
          <img src="assets/logo.png" alt="Hard4Tech" className="footer__logo footer__logo--color" />
          <p className="muted footer__blurb">{t.footer.blurb}</p>
          <div className="footer__social">
            {["in", "X", "f"].map((s) => <a key={s} className="footer__soc" href="#" aria-label={s} onClick={(e)=>e.preventDefault()}>{s}</a>)}
          </div>
        </div>
        <div className="footer__col">
          <h4>{t.footer.colServices}</h4>
          <ul>{t.services.map((s, i) => <li key={i}><button onClick={() => go("services")}>{s.title}</button></li>)}</ul>
        </div>
        <div className="footer__col">
          <h4>{t.footer.colCompany}</h4>
          <ul>{t.footer.company.map((c) => <li key={c.id}><button onClick={() => go(c.id)}>{c.label}</button></li>)}</ul>
        </div>
        <div className="footer__col">
          <h4>{t.footer.colContact}</h4>
          <ul className="footer__contact">
            <li><Icon name="pin" size={17} /><span>{t.contact.address}</span></li>
            <li><Icon name="mail" size={17} /><span>{t.contact.email}</span></li>
            <li><Icon name="phone" size={17} /><span dir="ltr">{t.contact.phone}</span></li>
          </ul>
        </div>
      </div>
      <div className="container footer__bottom">
        <span className="muted">© {new Date().getFullYear()} Hard4Tech. {t.footer.rights}</span>
        <span className="footer__made">Hard4Tech — {t.brandSub}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { useReveal, Counter, Logo, SectionHead, Nav, Footer });