// nda-ui.jsx — shared components: Logo, Nav, Eyebrow, ShinyBtn, TextRoll, Grain, useFadeIn
const { useState, useEffect, useRef } = React;

function useFadeIn(threshold = 0.08) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { el.classList.add("is-visible"); obs.disconnect(); } },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return ref;
}

// LIWAN logo lockups. The seal/icon marks are transparent PNGs (clean on any
// surface). The wordmark/primary lockups ship as light art on solid black, so
// those two composite with mix-blend-mode:screen to drop the black out.
const LOGO_SRC = {
  wordmark: "assets/logos/Logo_02___Primary_Wordmark.png",  // horizontal LIWAN + tagline (2:1, opaque)
  seal:     "assets/logos/Logo_04___Light_Icon_No_Bg.png",  // sparkler in a ring (1:1, transparent) nav mark
  icon:     "assets/logos/Logo_03___Light_Icon_No_Bg.png",  // bare sparkler glyph (1:1, transparent)
  primary:  "assets/logos/Logo_01___Primary_Logo.png",      // stacked icon + wordmark (1:1, opaque) footer
};
const LOGO_OPAQUE = { wordmark: true, primary: true }; // need screen-blend to hide black bg

function Logo({ large = false, variant = "wordmark", height }) {
  const h = height != null ? height : (
    variant === "primary"  ? (large ? 112 : 72) :
    variant === "wordmark" ? (large ? 40  : 24) :
    /* seal / icon */         (large ? 40  : 28)
  );
  const style = { height: `${h}px`, width: "auto", display: "block" };
  if (LOGO_OPAQUE[variant]) style.mixBlendMode = "screen";
  return (
    <img
      src={LOGO_SRC[variant] || LOGO_SRC.wordmark}
      alt="LIWAN"
      className="logo-img"
      style={style}
    />
  );
}

function Eyebrow({ index, children }) {
  return (
    <p className="eyebrow">
      <span className="eyebrow-bar" aria-hidden="true" />
      <span className="eyebrow-tag">[{index}]</span>
      <span className="eyebrow-text">{children}</span>
    </p>
  );
}

function ShinyBtn({ href, onClick, compact, children, type = "button" }) {
  const cls = `shiny-cta${compact ? " shiny-cta--compact" : ""}`;
  if (href) return <a href={href} className={cls}><span>{children}</span></a>;
  return (
    <button type={type} onClick={onClick} className={cls}>
      <span>{children}</span>
    </button>
  );
}

function TextRoll({ children }) {
  return (
    <span className="text-roll" aria-label={children}>
      <span className="text-roll-inner">
        <span className="text-roll-row">{children}</span>
        <span className="text-roll-row" aria-hidden="true">{children}</span>
      </span>
    </span>
  );
}

function SvgUnderline() {
  return (
    <svg className="hero-word-underline" viewBox="0 0 200 14" preserveAspectRatio="none" aria-hidden="true">
      <path d="M3 9 Q 45 2 95 7 T 197 9" stroke="currentColor" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Grain() {
  return <div className="grain" aria-hidden="true" />;
}

// Social channels — shared by the mobile menu footer and the site footer.
const SOCIALS = [
  { label: "Instagram", href: "https://www.instagram.com/liwanstudio.co/",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="2.5" y="2.5" width="19" height="19" rx="5.5" />
        <circle cx="12" cy="12" r="4" />
        <line x1="17.4" y1="6.6" x2="17.41" y2="6.6" />
      </svg>
    ) },
  { label: "LinkedIn", href: "https://www.linkedin.com/in/vanathaniel/",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" />
        <rect x="2" y="9" width="4" height="12" rx="1" />
        <circle cx="4" cy="4" r="2" />
      </svg>
    ) },
];

function SocialLinks({ gap = ".85rem" }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap }}>
      {SOCIALS.map(({ label, href, icon }) => (
        <a key={label} href={href} target="_blank" rel="noopener noreferrer"
          aria-label={label}
          style={{ color: "var(--muted)", display: "flex", transition: "color .2s" }}
          onMouseEnter={(e) => e.currentTarget.style.color = "var(--violet)"}
          onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}>
          {icon}
        </a>
      ))}
    </div>
  );
}

function Nav({ base = "" }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 32);
    window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);

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

  // On the index page (base="") these are in-page anchors. On a sub-page
  // (base="index.html") they navigate home to the matching section.
  const links = [
    { label: "Work",      href: `${base}#work`     },
    { label: "Services",  href: `${base}#services` },
    { label: "Process",   href: `${base}#process`  },
    { label: "About",     href: `${base}#about`    },
    { label: "Resources", href: "resources.html"   },
    { label: "Contact",   href: `${base}#contact`  },
  ];
  const contactHref = `${base}#contact`;

  return (
    <>
      <nav className={`nav${scrolled ? " nav--scrolled" : ""}`} aria-label="Primary">
        <div className="nav-inner">
          <a className="nav-brand" href={base || "#"} aria-label="LIWAN home"><Logo variant="seal" /></a>
          <div style={{ display: "flex", alignItems: "center", gap: ".75rem" }}>
            <ShinyBtn href={contactHref} compact>Book a Call &nbsp;→</ShinyBtn>
            <button
              type="button" className="nav-burger"
              onClick={() => setOpen(true)}
              aria-label="Open navigation" aria-expanded={open}
            >
              <span aria-hidden="true" />
              <span aria-hidden="true" />
            </button>
          </div>
        </div>
      </nav>

      {open && (
        <div className="menu-overlay" role="dialog" aria-modal="true" aria-label="Navigation">
          <div className="menu-overlay-head">
            <Logo variant="wordmark" large />
            <button className="menu-close" onClick={() => setOpen(false)} aria-label="Close menu">
              <span aria-hidden="true">✕</span>
            </button>
          </div>
          <nav className="menu-links">
            {links.map(({ label, href }, i) => (
              <a
                key={label} href={href} className="menu-link"
                style={{ "--i": i }} onClick={() => setOpen(false)}
              >
                <TextRoll>{label}</TextRoll>
                <span className="menu-link-num">0{i + 1}</span>
              </a>
            ))}
          </nav>
          <div className="menu-foot">
            <p className="menu-foot-label">LIWAN &nbsp;·&nbsp; Design, Development &amp; Automation</p>
            <ShinyBtn href={contactHref} onClick={() => setOpen(false)}>
              Book a Discovery Call &nbsp;→
            </ShinyBtn>
            <div style={{ flexBasis: "100%", display: "flex", alignItems: "center", gap: "1rem", paddingTop: ".35rem" }}>
              <span style={{ fontSize: ".55rem", letterSpacing: ".25em", textTransform: "uppercase", color: "var(--muted)", fontFamily: "monospace" }}>Follow</span>
              <SocialLinks />
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { useFadeIn, Logo, SocialLinks, Eyebrow, ShinyBtn, TextRoll, SvgUnderline, Grain, Nav });