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

/* Reveal-on-scroll wrapper */
function Reveal({ children, delay = 0, as = "div", className = "", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const check = () => {
      if (done) return true;
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.92 && r.bottom > 0) {
        el.classList.add("in"); done = true;
        window.removeEventListener("scroll", check);
        window.removeEventListener("resize", check);
        return true;
      }
      return false;
    };
    if (check()) return;
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    const t = setTimeout(check, 250);
    return () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      clearTimeout(t);
    };
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + className} style={{ transitionDelay: delay + "ms", ...style }}>
      {children}
    </Tag>
  );
}

/* Striped placeholder for real photos */
function Ph({ label, dark = false, style = {} }) {
  return (
    <div className={"ph" + (dark ? " dark" : "")} style={style}>
      <span className="lbl mono">{label}</span>
    </div>
  );
}

/* Simple geometric line icons (no complex SVG) */
function Icon({ name, size = 26, color = "currentColor", stroke = 2 }) {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    home: <g><path d="M3 11l9-7 9 7" /><path d="M5 10v9h14v-9" /></g>,
    shield: <g><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z" /><path d="M9 12l2 2 4-4" /></g>,
    disk: <g><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="2.4" /><path d="M12 4v3M12 17v3M4 12h3M17 12h3" /></g>,
    printer: <g><path d="M6 9V4h12v5" /><rect x="4" y="9" width="16" height="7" rx="2" /><path d="M7 16h10v4H7z" /></g>,
    remote: <g><path d="M4 6h16v10H4z" /><path d="M9 20h6M12 16v4" /><path d="M8 10h2M14 9l2 2-2 2" /></g>,
    grad: <g><path d="M12 4l9 4-9 4-9-4 9-4z" /><path d="M6 10v4c0 1.5 2.7 3 6 3s6-1.5 6-3v-4" /></g>,
    phone: <g><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L20 13l2 5v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6 2 2 0 0 1 5 4z" transform="translate(-1 -1)"/></g>,
    mail: <g><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></g>,
    clock: <g><circle cx="12" cy="12" r="8.5" /><path d="M12 7v5l3.5 2" /></g>,
    pin: <g><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z" /><circle cx="12" cy="11" r="2.3" /></g>,
    check: <path d="M4 12.5l5 5L20 6" />,
    bolt: <path d="M13 3L5 13h6l-1 8 8-11h-6z" />,
    cpu: <g><rect x="6" y="6" width="12" height="12" rx="2" /><rect x="9.5" y="9.5" width="5" height="5" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /></g>,
    gpu: <g><rect x="3" y="7" width="18" height="10" rx="2" /><circle cx="9" cy="12" r="2.4" /><circle cx="15" cy="12" r="2.4" /></g>,
    tablet: <g><rect x="6" y="3" width="12" height="18" rx="2.5" /><path d="M11 18h2" /></g>,
    laptop: <g><rect x="5" y="5" width="14" height="9" rx="1.5" /><path d="M3 18h18l-1.5-2H4.5z" /></g>,
    star: <path d="M12 4l2.3 5 5.2.5-4 3.5 1.3 5.2L12 16.8 7.2 18.2 8.5 13 4.5 9.5l5.2-.5z" />,
    heart: <path d="M12 20s-7-4.6-9.1-9C1.4 8 3.2 4.6 6.4 4.6c2 0 3 1.3 3.6 2.3.6-1 1.6-2.3 3.6-2.3 3.2 0 5 3.4 3.5 6.4-2.1 4.4-9.1 9-9.1 9z" />,
    chat: <g><path d="M4 5h16v11H8l-4 4z" /><path d="M8 10h8M8 13h5" /></g>,
    hand: <g><path d="M7 11V5.5a1.5 1.5 0 0 1 3 0V10" /><path d="M10 10V4.5a1.5 1.5 0 0 1 3 0V10" /><path d="M13 10V5.5a1.5 1.5 0 0 1 3 0V11" /><path d="M16 9.5a1.5 1.5 0 0 1 3 0V14c0 3.5-2.2 6-6 6-2.5 0-4-1-5.2-2.8L5 13.5a1.4 1.4 0 0 1 2-2L9 13" /></g>,
  };
  return <svg {...p}>{paths[name] || null}</svg>;
}

/* Brand lockup */
function Brand({ light = false }) {
  return (
    <a href="#top" className="brand" style={light ? { color: "var(--g-text)" } : null}>
      <img src="assets/logo.webp" alt="Au PC Bien Portant" />
      <span className="bn">Au PC Bien Portant<small>Caen &amp; alentours</small></span>
    </a>
  );
}

/* Sticky nav with mobile drawer */
function Nav({ onCall }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["#services", "Dépannage"],
    ["#avis", "Avis"],
    ["#formation", "Formation"],
    ["#abonnement", "Abonnement"],
    ["#gamer", "Zone Gamer"],
    ["#contact", "Contact"],
  ];
  return (
    <header className="nav" id="top">
      <div className="wrap nav-in">
        <Brand />
        <nav className="nav-links">
          {links.map(([h, t]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <div className="nav-cta">
          <a className="nav-phone" href="tel:+33658665493">
            <Icon name="phone" size={19} color="var(--brand)" />
            <span className="np-txt">06 58 66 54 93</span>
          </a>
          <button className="btn btn-primary" onClick={onCall}>Être rappelé</button>
          <button className="burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {open && (
        <div className="wrap" style={{ paddingBottom: 18 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {links.map(([h, t]) => (
              <a key={h} href={h} onClick={() => setOpen(false)}
                 style={{ padding: "12px 4px", fontWeight: 700, borderBottom: "1px solid var(--line)" }}>{t}</a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Reveal, Ph, Icon, Brand, Nav });