/* global React */
const { useState, useEffect, useRef } = React;

/* ============================================
   Custom Cursor
   ============================================ */
function Cursor() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let x = window.innerWidth / 2, y = window.innerHeight / 2;
    let tx = x, ty = y;
    let raf;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    const tick = () => {
      x += (tx - x) * 0.22;
      y += (ty - y) * 0.22;
      el.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    const onOver = (e) => {
      const t = e.target;
      el.classList.remove("is-link", "is-text");
      if (t.closest("a, button, [data-cursor='link']")) el.classList.add("is-link");
      else if (t.matches("input, textarea, [contenteditable]")) el.classList.add("is-text");
    };
    window.addEventListener("mousemove", move);
    window.addEventListener("mouseover", onOver);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", move);
      window.removeEventListener("mouseover", onOver);
      cancelAnimationFrame(raf);
    };
  }, []);
  return <div ref={ref} className="vw-cursor" />;
}

/* ============================================
   Reveal-on-scroll wrapper
   ============================================ */
function Reveal({ children, stagger, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add("is-in");
            io.unobserve(el);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag ref={ref} className={`${stagger ? "reveal-stagger" : "reveal"} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

/* ============================================
   Nav
   ============================================ */
function Nav({ page, onNav }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["accueil", "Accueil"],
    ["services", "Services"],
    ["tarifs", "Tarifs"],
    ["realisations", "Réalisations"],
    ["contact", "Contact"],
  ];

  const go = (p) => { setOpen(false); onNav(p); };

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <nav className="vw-nav">
      <a href="#" onClick={(e) => { e.preventDefault(); go("accueil"); }} className="vw-nav__brand">
        <span className="vw-nav__brand-mark"></span>
        <span>Velox / Web</span>
      </a>

      <div className={`vw-nav__links ${open ? "is-open" : ""}`} id="primary-nav">
        {links.map(([k, label]) => (
          <a
            key={k}
            href={`#${k}`}
            aria-current={page === k ? "page" : undefined}
            className={`vw-nav__link ${page === k ? "is-active" : ""}`}
            onClick={(e) => { e.preventDefault(); go(k); }}
          >
            {label}
          </a>
        ))}
        <a
          href="#contact"
          onClick={(e) => { e.preventDefault(); go("contact"); }}
          className="vw-nav__cta vw-nav__cta--mobile"
        >
          Démarrer un projet ↗
        </a>
      </div>

      <a
        href="#contact"
        onClick={(e) => { e.preventDefault(); go("contact"); }}
        className="vw-nav__cta vw-nav__cta--desktop"
      >
        Démarrer un projet ↗
      </a>

      <button
        className={`vw-nav__burger ${open ? "is-open" : ""}`}
        onClick={() => setOpen(!open)}
        aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
        aria-expanded={open}
        aria-controls="primary-nav"
      >
        <span /><span /><span />
      </button>
    </nav>
  );
}

/* ============================================
   Footer
   ============================================ */
function Footer({ onNav }) {
  return (
    <footer className="vw-footer">
      <div className="vw-footer__top">
        <div className="vw-footer__brand">
          Velox<br/><em>Web</em>
        </div>
        <div className="vw-footer__col">
          <h4>Pages</h4>
          <ul>
            <li><a href="#accueil" onClick={(e) => { e.preventDefault(); onNav("accueil"); }}>Accueil</a></li>
            <li><a href="#services" onClick={(e) => { e.preventDefault(); onNav("services"); }}>Services</a></li>
            <li><a href="#tarifs" onClick={(e) => { e.preventDefault(); onNav("tarifs"); }}>Tarifs</a></li>
            <li><a href="#realisations" onClick={(e) => { e.preventDefault(); onNav("realisations"); }}>Réalisations</a></li>
            <li><a href="#contact" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact</a></li>
          </ul>
        </div>
        <div className="vw-footer__col">
          <h4>Contact</h4>
          <ul>
            <li><a href="mailto:contact@veloxweb.net">contact@veloxweb.net</a></li>
            <li>Lun – Ven · 9h – 19h</li>
            <li>France entière</li>
          </ul>
        </div>
        <div className="vw-footer__col">
          <h4>Légal</h4>
          <ul>
            <li><a href="#mentions-legales" onClick={(e) => { e.preventDefault(); onNav("mentions-legales"); }}>Mentions légales</a></li>
            <li><a href="#confidentialite" onClick={(e) => { e.preventDefault(); onNav("confidentialite"); }}>Confidentialité</a></li>
            <li><a href="#cgv" onClick={(e) => { e.preventDefault(); onNav("cgv"); }}>CGV</a></li>
          </ul>
        </div>
      </div>
      <div className="vw-footer__bottom">
        <span>© {new Date().getFullYear()} Velox Web — Studio indépendant</span>
        <span>Sites qui convertissent ~ vraiment.</span>
      </div>
    </footer>
  );
}

/* Expose to other Babel scripts */
Object.assign(window, { Cursor, Reveal, Nav, Footer });