// Shared brand pieces — logo mark, nav, footer, reveal hook.
// Loaded as Babel script. Exposes globals via window.

const { useEffect, useRef, useState } = React;

/* ---------- Logo mark: two interlocking arcs (congruence) ---------- */
function BrandMark({ size = 28, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <circle cx="12" cy="16" r="8.5" stroke={color} strokeWidth="1.4" />
      <circle cx="20" cy="16" r="8.5" stroke={color} strokeWidth="1.4" />
    </svg>
  );
}

function Brand({ inverse = false }) {
  return (
    <a className="brand" href="index.html" style={inverse ? { color: "var(--cream)" } : {}}>
      <BrandMark color={inverse ? "var(--cream)" : "var(--ink)"} />
      <span>Congruence</span>
    </a>
  );
}

/* ---------- Nav ---------- */
function Nav({ active = "home" }) {
  const [open, setOpen] = useState(false);
  const closeTimer = useRef(null);
  const openMenu = () => { clearTimeout(closeTimer.current); setOpen(true); };
  const scheduleClose = () => { closeTimer.current = setTimeout(() => setOpen(false), 140); };

  const isServicesActive = active === "services" || active === "customer-support" || active === "sales" || active === "virtual-assistants";

  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <Brand />
        <nav className="nav-links">
          <a href="index.html" className={active === "home" ? "active" : ""}>Home</a>

          <div
            style={{ position: "relative" }}
            onMouseEnter={openMenu}
            onMouseLeave={scheduleClose}
          >
            <a href="services.html" className={isServicesActive ? "active" : ""} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              Services
              <svg width="9" height="9" viewBox="0 0 10 10" fill="none" style={{
                transform: open ? "rotate(180deg)" : "none", transition: "transform .2s",
              }}>
                <path d="M2 4L5 7L8 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
            {open && (
              <div
                onMouseEnter={openMenu}
                onMouseLeave={scheduleClose}
                style={{
                  position: "absolute", top: "calc(100% + 12px)", left: "50%",
                  transform: "translateX(-50%)",
                  width: 460,
                  background: "var(--cream)",
                  border: "1px solid var(--line)",
                  borderRadius: 8,
                  boxShadow: "0 24px 60px rgba(47,62,70,0.12)",
                  padding: 12,
                  display: "flex", flexDirection: "column", gap: 4,
                  zIndex: 60,
                  animation: "navDropIn .18s cubic-bezier(.2,.7,.2,1)",
                }}
              >
                <style>{`@keyframes navDropIn { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }`}</style>
                <DropItem
                  href="customer-support.html"
                  label="Customer Support"
                  desc="Email, chat, voice, and social — answered like you would."
                  accent="sage"
                />
                <DropItem
                  href="sales.html"
                  label="Sales"
                  desc="Inbound, outbound, and full-cycle sales experts on your roster."
                  accent="terra"
                />
                <DropItem
                  href="virtual-assistants.html"
                  label="Virtual Assistants"
                  desc="A remote executive assistant or online secretary, dedicated to your week."
                  accent="ink"
                />
              </div>
            )}
          </div>

          <a href="about.html" className={active === "about" ? "active" : ""}>About</a>
          <a href="contact.html" className={active === "contact" ? "active" : ""}>Contact</a>
        </nav>
        <a href="contact.html" className="btn btn-primary">
          Let's chat
          <svg className="arr" width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
          </svg>
        </a>
      </div>
    </header>
  );
}

function DropItem({ href, label, desc, accent }) {
  const [hover, setHover] = useState(false);
  const dot = accent === "terra" ? "var(--terra)" : accent === "sage" ? "var(--sage)" : "var(--ink)";
  return (
    <a href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid", gridTemplateColumns: "auto 1fr auto",
        gap: 14, alignItems: "center",
        padding: "14px 14px",
        borderRadius: 6,
        background: hover ? "var(--cream-warm)" : "transparent",
        transition: "background .18s",
      }}>
      <span style={{
        width: 8, height: 8, borderRadius: 999, background: dot,
      }}></span>
      <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <span style={{ fontFamily: "var(--serif)", fontSize: 20, color: "var(--ink)", lineHeight: 1.1 }}>{label}</span>
        <span style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.4 }}>{desc}</span>
      </span>
      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={{
        color: "var(--ink-soft)",
        transform: hover ? "translate(2px, -2px)" : "none",
        transition: "transform .2s",
      }}>
        <path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      </svg>
    </a>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end" }}>
          <div>
            <div className="eyebrow" style={{ color: "rgba(248,249,250,0.5)", marginBottom: 24 }}>
              <span className="dot" style={{ background: "var(--terra)" }}></span> Ready when you are
            </div>
            <h2 className="h2" style={{ color: "var(--cream)", maxWidth: "14ch" }}>
              Let's bring your support <em style={{ color: "var(--terra)" }}>into harmony</em>.
            </h2>
          </div>
          <div style={{ justifySelf: "end", display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="contact.html" className="btn" style={{ background: "var(--cream)", color: "var(--ink)" }}>
              Book a discovery call
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M2 10L10 2M10 2H4M10 2V8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
              </svg>
            </a>
            <a href="services.html" className="btn" style={{ background: "transparent", color: "var(--cream)", border: "1px solid rgba(248,249,250,0.3)" }}>
              Explore services
            </a>
          </div>
        </div>

        <div className="footer-grid">
          <div className="footer-col">
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <BrandMark color="var(--cream)" />
              <span style={{ fontFamily: "var(--serif)", fontSize: 22 }}>Congruence</span>
            </div>
            <p style={{ maxWidth: "32ch", color: "rgba(248,249,250,0.6)" }}>
              A boutique customer experience partner for scaling commerce brands.
            </p>
          </div>
          <div className="footer-col">
            <h4>Site</h4>
            <a href="index.html">Home</a>
            <a href="services.html">Services</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
          </div>
          <div className="footer-col">
            <h4>Services</h4>
            <a href="services.html">Overview</a>
            <a href="customer-support.html">Customer Support</a>
            <a href="sales.html">Sales</a>
          </div>
          <div className="footer-col">
            <h4>Contact</h4>
            <a href="mailto:hello@congruence.cx">hello@congruence.cx</a>
            <p>Mon–Fri, 24/5 sales + support</p>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Congruence CX, Inc.</span>
          <span style={{ display: "flex", gap: 24, alignItems: "center" }}>
            <a href="privacy.html" style={{ color: "rgba(248,249,250,0.6)" }}>Privacy</a>
            <a href="terms.html" style={{ color: "rgba(248,249,250,0.6)" }}>Terms</a>
            <span>Harmonizing businesses with their clients.</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Reveal on scroll ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Tag ---------- */
function Tag({ children, accent }) {
  return (
    <span className="tag">
      {accent && <span style={{
        width: 6, height: 6, borderRadius: 999,
        background: accent === "sage" ? "var(--sage)" : accent === "terra" ? "var(--terra)" : "var(--ink)"
      }}></span>}
      {children}
    </span>
  );
}

/* ---------- Eyebrow ---------- */
function Eyebrow({ children, accent = "sage" }) {
  return (
    <div className="eyebrow">
      <span className="dot" style={{
        background: accent === "terra" ? "var(--terra)" : accent === "ink" ? "var(--ink)" : "var(--sage)"
      }}></span>
      {children}
    </div>
  );
}

Object.assign(window, { Brand, BrandMark, Nav, Footer, useReveal, Tag, Eyebrow });