const { useState, useEffect, useRef, useCallback } = React;

/* ---------- Inline line icons (simple UI glyphs) ---------- */
function Icon({ name, size = 20, stroke = 1.4, ...rest }) {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", ...rest,
  };
  const paths = {
    bag: <><path d="M6 8h12l-1 12H7L6 8z" /><path d="M9 8V6a3 3 0 0 1 6 0v2" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="m20 20-3.2-3.2" /></>,
    heart: <path d="M12 20s-7-4.6-7-9.3A3.7 3.7 0 0 1 12 8a3.7 3.7 0 0 1 7-1.3C19 11.4 12 20 12 20z" />,
    user: <><circle cx="12" cy="8" r="3.4" /><path d="M5.5 20a6.5 6.5 0 0 1 13 0" /></>,
    menu: <><path d="M3 6h18" /><path d="M3 12h18" /><path d="M3 18h18" /></>,
    close: <><path d="M6 6l12 12" /><path d="M18 6 6 18" /></>,
    arrowRight: <><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></>,
    arrowUpRight: <><path d="M7 17 17 7" /><path d="M8 7h9v9" /></>,
    plus: <><path d="M12 5v14" /><path d="M5 12h14" /></>,
    minus: <path d="M5 12h14" />,
    star: <path d="M12 3.5l2.4 5 5.5.7-4 3.8 1 5.4-4.9-2.7L7.6 21l1-5.4-4-3.8 5.5-.7z" />,
    pin: <><path d="M12 21s7-5.5 7-11a7 7 0 0 0-14 0c0 5.5 7 11 7 11z" /><circle cx="12" cy="10" r="2.5" /></>,
    phone: <path d="M5 4h3l1.6 4-2 1.4a12 12 0 0 0 5 5l1.4-2L21 18v3a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z" />,
    instagram: <><rect x="4" y="4" width="16" height="16" rx="4.5" /><circle cx="12" cy="12" r="3.6" /><circle cx="17.2" cy="6.8" r="1" fill="currentColor" stroke="none" /></>,
    truck: <><path d="M3 7h11v8H3z" /><path d="M14 10h4l3 3v2h-7" /><circle cx="7" cy="17" r="1.7" /><circle cx="17.5" cy="17" r="1.7" /></>,
    sparkle: <path d="M12 3c.5 4.2 1.8 5.5 6 6-4.2.5-5.5 1.8-6 6-.5-4.2-1.8-5.5-6-6 4.2-.5 5.5-1.8 6-6z" />,
    leaf: <><path d="M5 19C5 11 11 5 19 5c0 8-6 14-14 14z" /><path d="M5 19c4-4 7-6 10-7" /></>,
    ruler: <><rect x="3" y="8" width="18" height="8" rx="1" /><path d="M7 8v3M11 8v4M15 8v3M19 8v4" /></>,
    chevron: <path d="m9 6 6 6-6 6" />,
  };
  return <svg {...common} aria-hidden="true">{paths[name]}</svg>;
}

/* ---------- Brand mark (logo + wordmark) ---------- */
function Logo({ size = 40, light = false, stacked = false }) {
  return (
    <span className={"brand" + (stacked ? " brand--stacked" : "")}>
      <img src="assets/glam-logo.png" alt="" width={size} height={size} className="brand__mark" />
      <span className="brand__type">
        <span className={"brand__name" + (light ? " is-light" : "")}>GLAM ABAYA</span>
        <span className="brand__tag">Enhance your appearance</span>
      </span>
    </span>
  );
}

/* ---------- Editorial image / placeholder ----------
   `src` is a base name without extension (e.g. "img/hero"). Frame renders
   <picture> with AVIF → WebP → JPEG so each browser picks the smallest format. */
function Frame({ label, ratio = "3 / 4", tone = "slate", className = "", children, rounded = false, src, alt, eager = false }) {
  return (
    <div
      className={"frame frame--" + tone + (rounded ? " frame--round" : "") + (src ? " frame--has-img" : "") + " " + className}
      style={{ aspectRatio: ratio }}
      data-label={label}
    >
      {src ? (
        <picture>
          <source srcSet={src + ".avif"} type="image/avif" />
          <source srcSet={src + ".webp"} type="image/webp" />
          <img
            src={src + ".jpg"}
            alt={alt || label || ""}
            className="frame__img"
            loading={eager ? "eager" : "lazy"}
            decoding={eager ? "sync" : "async"}
            {...(eager ? { fetchpriority: "high" } : {})}
          />
        </picture>
      ) : (
        <>
          <div className="frame__grain" />
          {label && <span className="frame__label">{label}</span>}
        </>
      )}
      {children}
    </div>
  );
}

/* ---------- Scroll reveal ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { el.setAttribute("data-in", ""); io.unobserve(el); } }),
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}
function Reveal({ as = "div", className = "", delay = 0, children, ...rest }) {
  const ref = useReveal();
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + className} style={{ "--d": delay + "ms" }} {...rest}>
      {children}
    </Tag>
  );
}

/* ---------- Section eyebrow heading ---------- */
function Eyebrow({ children, light = false }) {
  return <span className={"eyebrow" + (light ? " is-light" : "")}>{children}</span>;
}

Object.assign(window, { Icon, Logo, Frame, Reveal, useReveal, Eyebrow });