/* Kharaayo shared UI primitives. Loaded after icons.jsx + logo.jsx.
   Exposes: Eyebrow, Tag, ArrowLink, GlassPill, CtaPill, Reveal, Placeholder,
   SectionHead, FinalCTA, FAQ, NumberBadge, MidCTA, EngineDot.  */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;

  // brand contact constants (placeholders preserved for follow-up)
  window.KHARAAYO = {
    email: "hello@kharaayo.com",
    emailNote: "[PLACEHOLDER — to be confirmed]",
    whatsapp: "#",            // [PLACEHOLDER number]
    location: "Birtamode, Jhapa, Nepal",
  };
  // engine accent colors — consistent site-wide
  window.ENGINE = {
    tech:    { color: "var(--primary-color)", label: "Tech" },
    studio:  { color: "var(--accent-color)",  label: "Studio" },
    venture: { color: "var(--brand-deep)",    label: "Ventures" },
  };

  function Eyebrow({ children, accent, style }) {
    return React.createElement("span", { className: "k-eyebrow" + (accent ? " accent" : ""), style },
      children);
  }

  function Tag({ kind, children, style }) {
    return React.createElement("span", { className: "k-tag" + (kind ? " " + kind : ""), style }, children);
  }

  function EngineDot({ kind, style }) {
    const c = (window.ENGINE[kind] || {}).color || "var(--foreground)";
    return React.createElement("span", { className: "dot", style: Object.assign({ background: c }, style) });
  }

  function ArrowLink({ href = "#", children, onClick, style, icon = "arrowRight" }) {
    return React.createElement("a", { className: "k-arrow-link", href, onClick, style },
      children, React.createElement(Icon, { name: icon }));
  }

  // glass pill (over dark media)
  function GlassPill({ label, icon = "plus", circleBg = "var(--primary-color)", href = "#", onClick, style }) {
    return React.createElement("a", { className: "k-glass-pill", href, onClick, style },
      React.createElement("span", { className: "label" }, label),
      React.createElement("span", { className: "circ", style: { background: circleBg } },
        React.createElement(Icon, { name: icon })));
  }

  // solid CTA pill (on light / solid backgrounds)
  function CtaPill({ label, icon = "plus", circleBg = "var(--primary-color)", href = "#", onClick, style, className = "" }) {
    return React.createElement("a", { className: "k-cta-pill " + className, href, onClick, style },
      React.createElement("span", { className: "label" }, label),
      React.createElement("span", { className: "circ", style: { background: circleBg } },
        React.createElement(Icon, { name: icon })));
  }

  // a "Get in Touch + WhatsApp" pair used in many CTA blocks
  function CtaPair({ glass, center, style }) {
    const Comp = glass ? GlassPill : CtaPill;
    return React.createElement("div", {
      style: Object.assign({ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: center ? "center" : "flex-start" }, style)
    },
      React.createElement(Comp, { label: "Get in Touch", icon: "plus", circleBg: "var(--primary-color)", href: "contact.html" }),
      React.createElement(Comp, { label: "WhatsApp", icon: "whatsapp", circleBg: "var(--whatsapp)", href: "#", onClick: window.kWhatsApp })
    );
  }

  // scroll-reveal wrapper. `now` => visible immediately (above-the-fold).
  function Reveal({ children, delay = 0, now = false, as = "div", style, className = "", ...rest }) {
    const ref = useRef(null);
    useEffect(() => {
      if (now && ref.current) ref.current.classList.add("in");
      window.kInitReveal && window.kInitReveal();
    }, []);
    return React.createElement(as, Object.assign({
      ref, className: "k-reveal " + (now ? "in " : "") + className,
      style: Object.assign({ transitionDelay: delay ? delay + "ms" : undefined }, style)
    }, rest), children);
  }

  // image placeholder block
  function Placeholder({ label = "IMAGE", note, ratio, minHeight = 220, style, rounded }) {
    const s = Object.assign({ minHeight }, style || {});
    if (ratio) { s.aspectRatio = ratio; s.minHeight = undefined; }
    if (rounded) s.borderRadius = rounded;
    return React.createElement("div", { className: "k-placeholder", style: s, role: "img", "aria-label": note || label },
      React.createElement("div", { className: "ph-label" },
        React.createElement("span", { className: "ph-tag" }, "Placeholder"),
        note || label));
  }

  // section header (eyebrow + headline + optional intro)
  function SectionHead({ eyebrow, accent, title, intro, center, maxWidth = 760, style }) {
    return React.createElement("div", {
      style: Object.assign({ textAlign: center ? "center" : "left", marginInline: center ? "auto" : undefined, maxWidth: center ? maxWidth : undefined }, style)
    },
      eyebrow && React.createElement(Eyebrow, { accent }, eyebrow),
      title && React.createElement("h2", { style: { margin: eyebrow ? "16px 0 0" : 0, maxWidth: center ? "100%" : maxWidth } }, title),
      intro && React.createElement("p", { className: "k-lead", style: { margin: "20px 0 0", maxWidth: center ? Math.min(maxWidth, 680) : 680, marginInline: center ? "auto" : undefined, color: "var(--foreground-muted)" } }, intro)
    );
  }

  function NumberBadge({ n, color = "var(--accent-color)", style }) {
    return React.createElement("span", {
      style: Object.assign({ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 40, lineHeight: 1, color, letterSpacing: "-.02em", display: "block" }, style)
    }, n);
  }

  // reusable mid-page inline CTA strip
  function MidCTA({ text = "Have a project in mind?", cta = "Get in Touch", href = "contact.html", onClick }) {
    return React.createElement(Reveal, null,
      React.createElement("div", {
        className: "k-wrap",
        style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap",
                 padding: "28px 32px", borderRadius: "var(--radius-lg)", background: "var(--background-elevated)",
                 border: "1px solid color-mix(in srgb, var(--foreground) 8%, transparent)" }
      },
        React.createElement("p", { className: "k-lead", style: { margin: 0 } }, text),
        React.createElement(CtaPill, { label: cta, icon: "plus", href, onClick })));
  }

  // final CTA block (closing every page)
  function FinalCTA({ headline, sub, dark = true }) {
    return React.createElement("section", {
      style: {
        background: dark ? "var(--foreground)" : "var(--accent-color)",
        color: dark ? "var(--background)" : "#fff",
        padding: "112px 0", textAlign: "center", position: "relative", overflow: "hidden"
      }
    },
      React.createElement("div", { className: "k-wrap", style: { position: "relative", zIndex: 1 } },
        React.createElement(Reveal, null,
          React.createElement("h2", { style: { margin: "0 auto", maxWidth: 860, color: "inherit" } }, headline),
          sub && React.createElement("p", { className: "k-lead", style: { margin: "24px auto 0", maxWidth: 560, color: dark ? "color-mix(in srgb, var(--background) 75%, transparent)" : "rgba(255,255,255,.9)" } }, sub),
          React.createElement("div", { style: { marginTop: 40, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" } },
            React.createElement("a", { className: "k-glass-pill", href: "contact.html",
              style: { borderColor: dark ? "color-mix(in srgb, var(--background) 24%, transparent)" : "rgba(255,255,255,.28)", background: dark ? "color-mix(in srgb, var(--background) 12%, transparent)" : "rgba(255,255,255,.14)", color: dark ? "var(--background)" : "#fff", fontSize: 16 } },
              React.createElement("span", { className: "label" }, "Get in Touch"),
              React.createElement("span", { className: "circ", style: { background: "var(--primary-color)" } }, React.createElement(Icon, { name: "plus" }))),
            React.createElement("a", { className: "k-glass-pill", href: "#", onClick: window.kWhatsApp,
              style: { borderColor: dark ? "color-mix(in srgb, var(--background) 24%, transparent)" : "rgba(255,255,255,.28)", background: dark ? "color-mix(in srgb, var(--background) 12%, transparent)" : "rgba(255,255,255,.14)", color: dark ? "var(--background)" : "#fff", fontSize: 16 } },
              React.createElement("span", { className: "label" }, "WhatsApp"),
              React.createElement("span", { className: "circ", style: { background: "var(--whatsapp)" } }, React.createElement(Icon, { name: "whatsapp" })))),
          React.createElement("p", { style: { marginTop: 28, fontSize: 14, color: dark ? "color-mix(in srgb, var(--background) 55%, transparent)" : "rgba(255,255,255,.8)" } },
            window.KHARAAYO.email, " — ", React.createElement("span", { style: { opacity: .7 } }, window.KHARAAYO.emailNote))
        ))
    );
  }

  // FAQ accordion — pass items [{q,a}], optional title
  function FAQ({ items = [], title, defaultOpen = 0 }) {
    const [open, setOpen] = useState(defaultOpen);
    return React.createElement("div", null,
      title && React.createElement("h2", { style: { margin: "0 0 28px" } }, title),
      items.map((it, i) => {
        const isOpen = open === i;
        return React.createElement("div", { key: i, style: { borderBottom: "1px solid color-mix(in srgb, var(--foreground) 10%, transparent)" } },
          React.createElement("button", {
            onClick: () => setOpen(isOpen ? -1 : i),
            "aria-expanded": isOpen,
            style: { width: "100%", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, background: "none", border: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-body)", padding: "22px 4px", color: "var(--foreground)" }
          },
            React.createElement("span", { style: { fontSize: 20, fontWeight: 500, lineHeight: 1.3 } }, it.q),
            React.createElement("span", { style: { flexShrink: 0, width: 28, height: 28, display: "grid", placeItems: "center", color: "var(--accent-color)" } },
              React.createElement(Icon, { name: isOpen ? "minus" : "plus", style: { width: 22, height: 22 } }))),
          isOpen && React.createElement("p", { style: { margin: "0 56px 24px 4px", fontSize: 17, color: "var(--foreground-muted)", lineHeight: 1.6 } }, it.a));
      }));
  }

  Object.assign(window, { Eyebrow, Tag, EngineDot, ArrowLink, GlassPill, CtaPill, CtaPair, Reveal, Placeholder, SectionHead, NumberBadge, MidCTA, FinalCTA, FAQ });
})();