// components-core.jsx — Mark, Divider, primitives, Header, Trust bar, Reveal helper

const { useEffect, useRef, useState } = React;

// ---------- Zenmunis lotus mark ----------
const ZenmunisMark = ({ size = 36, strokeWidth = 0.8 }) => {
  const id = `zg-${size}-${Math.random().toString(36).slice(2, 7)}`;
  return (
    <svg width={size} height={size} viewBox="-70 -70 140 140" aria-hidden="true">
      <defs>
        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#e8c97a"/>
          <stop offset="50%" stopColor="#c9a84c"/>
          <stop offset="100%" stopColor="#8a6420"/>
        </linearGradient>
      </defs>
      <circle cx="0" cy="0" r="62" fill="none" stroke={`url(#${id})`} strokeWidth={strokeWidth}/>
      <circle cx="0" cy="0" r="52" fill="none" stroke="#4a3610" strokeWidth="0.4"/>
      <circle cx="0" cy="0" r="42" fill="none" stroke="#3a2810" strokeWidth="0.4"/>
      {[0, 60, 120, 180, 240, 300].map(r => (
        <ellipse key={r} cx="0" cy="-26" rx="8" ry="18" fill="none"
          stroke={`url(#${id})`} strokeWidth={strokeWidth + 0.1}
          transform={`rotate(${r})`}/>
      ))}
      <circle cx="0" cy="0" r="5" fill="#c9a84c"/>
      <circle cx="0" cy="0" r="9" fill="none" stroke="#c9a84c" strokeWidth="0.6"/>
    </svg>
  );
};

// ---------- Divider with diamond ----------
const Diamond = () => <span className="diamond" aria-hidden="true"></span>;

const Divider = ({ width = 120 }) => (
  <div className="zdivider" style={{ width }}>
    <span></span><Diamond /><span></span>
  </div>
);

// ---------- Buttons ----------
const PrimaryButton = ({ children, onClick, full, size }) => (
  <button
    className={`zbtn ${full ? "zbtn--full" : ""} ${size === "lg" ? "zbtn--lg" : ""}`}
    onClick={onClick}
  >
    <span>{children}</span>
  </button>
);

const GhostButton = ({ children, onClick, size }) => (
  <button
    className={`zbtn zbtn--ghost ${size === "lg" ? "zbtn--lg" : ""}`}
    onClick={onClick}
  >
    <span>{children}</span>
  </button>
);

// ---------- Reveal-on-scroll ----------
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.classList.add("is-on");
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

const Reveal = ({ children, stagger = false, as = "div", ...rest }) => {
  const ref = useReveal();
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${stagger ? "reveal--stagger" : ""}`} {...rest}>
      {children}
    </Tag>
  );
};

// ---------- Trust bar ----------
const TrustBar = () => (
  <div className="trust-bar">
    <div className="trust-bar__avatars">
      <span></span><span></span><span></span>
    </div>
    <span className="trust-bar__stars">★ ★ ★ ★ ★</span>
    <span className="trust-bar__text">Trusted by 5,000+ quiet readers</span>
  </div>
);

// ---------- Header / Nav ----------
const NAV_LINKS = [
  { label: "The Teacher", href: "#about" },
  { label: "Books",       href: "#books" },
  { label: "Courses",     href: "#courses" },
  { label: "The Path",    href: "#journey" },
  { label: "FAQ",         href: "#faq" },
  { label: "Contact",     href: "contact.html" },
];

const Header = ({ onCta }) => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

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

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

  const isHome = window.location.pathname.endsWith("index.html") || window.location.pathname === "/" || window.location.pathname.endsWith("/");

  const handleNavClick = (href) => {
    setMenuOpen(false);
    if (href.startsWith("#")) {
      if (isHome) {
        const el = document.getElementById(href.slice(1));
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      } else {
        window.location.href = "index.html" + href;
      }
    } else {
      window.location.href = href;
    }
  };

  return (
    <header className={`zh ${scrolled ? "is-scrolled" : ""}`}>
      <TrustBar />
      <nav className="zh__nav">
        <a href={isHome ? "#top" : "index.html"} className="zh__brand"
          onClick={e => { e.preventDefault(); if (isHome) window.scrollTo({ top: 0, behavior: "smooth" }); else window.location.href = "index.html"; }}>
          <ZenmunisMark size={30} />
          <span className="zh__name">Zenmunis</span>
        </a>
        <div className="zh__links">
          {NAV_LINKS.map(l => (
            <a key={l.label} href={l.href}
              onClick={e => { e.preventDefault(); handleNavClick(l.href); }}>
              {l.label}
            </a>
          ))}
        </div>
        <button className="zh__cta" onClick={onCta}>Begin Tonight →</button>
        <button className="zh__menu" aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)}>
          <span className={menuOpen ? "open" : ""}></span>
          <span className={menuOpen ? "open" : ""}></span>
          <span className={menuOpen ? "open" : ""}></span>
        </button>
      </nav>

      {menuOpen && (
        <div className="zh__drawer" onClick={() => setMenuOpen(false)}>
          <nav className="zh__drawer-nav" onClick={e => e.stopPropagation()}>
            {NAV_LINKS.map(l => (
              <a key={l.label} href={l.href}
                onClick={e => { e.preventDefault(); handleNavClick(l.href); }}>
                {l.label}
              </a>
            ))}
            <button className="zbtn zbtn--full" style={{ marginTop: 24 }} onClick={() => { setMenuOpen(false); onCta(); }}>
              <span>Begin Tonight →</span>
            </button>
          </nav>
        </div>
      )}
    </header>
  );
};

Object.assign(window, {
  ZenmunisMark, Diamond, Divider,
  PrimaryButton, GhostButton,
  useReveal, Reveal,
  TrustBar, Header,
});