// Shared primitives for all HONA pages

const NAV_ITEMS = [
  { label: "Advisory", href: "moat-method.html" },
  { label: "Products", href: "products.html" },
  { label: "Writing", href: "writing.html" },
  { label: "About", href: "about.html" },
  { label: "Contact", href: "contact.html" },
];

const PRODUCTS = [
  {
    slug: "data-intelligence-control-plane",
    flagship: true,
    label: "Flagship",
    name: "Data Intelligence Control Plane",
    tagline: "The control plane for enterprise data and AI agents.",
    blurb: "Governance, lineage, and agent access in one layer. Built for teams wiring AI into production.",
  },
  {
    slug: "studio",
    label: "Shipping 2026",
    name: "HONA Studio",
    tagline: "A multi-agent pipeline that ships production enterprise software.",
    blurb: "Eight specialist AI agents. Mix-and-match LLM providers per role. Every interaction becomes a reusable workflow your team owns.",
  },
  {
    slug: "vectory",
    label: "Open Source",
    name: "Vectory",
    tagline: "Semantic search without the lock-in.",
    blurb: "FastAPI and pgvector under the hood. Your data, your infrastructure, your stack. Open source, with commercial support when you need it.",
  },
  {
    slug: "mcpxy",
    label: "Commercial",
    name: "MCPxy",
    tagline: "The routing layer for your MCP servers.",
    blurb: "One gateway, every connector. Authentication, observability, and policy for Model Context Protocol across your stack.",
  },
];

const WRITING_POSTS = [
  { title: "The Collapse of Enterprise Software Categories", date: "2026-06", excerpt: "Why every SaaS buyer is asking the same question this quarter — and what the thin orchestration layer means for the next decade.", placeholder: true },
  { title: "Why Your Deals Are Stalling at the Architecture Review", date: "2026-06", excerpt: "Deep tech founders keep losing enterprise deals at the same exit. It isn't pricing. It's the defensible position you haven't articulated.", placeholder: true },
  { title: "A Control Plane for AI Agents, Explained", date: "2026-06", excerpt: "Governance, lineage, and agent access are collapsing into one layer. Here's the shape of the category — and what the old stack can't cover.", placeholder: true },
];

const BASE = (typeof window !== 'undefined' && window.__HONA_BASE__) || "";
const path = (p) => BASE + p;
const LOGO = (p) => p === "__logo__" ? BASE + "assets/hona-mark.svg" : path(p);

const Header = ({ current }) => (
  <header className="h-header">
    <a href={path("index.html")} className="h-header-brand">
      <img src={LOGO("__logo__")} alt="" className="h-header-logo" />
      <span className="h-header-wordmark">HONA</span>
    </a>
    <nav className="h-header-nav">
      {NAV_ITEMS.map(n => (
        <a key={n.href} href={path(n.href)} aria-current={current === n.href ? "page" : undefined}>{n.label}</a>
      ))}
    </nav>
    <a href={path("contact.html")} className="h-btn h-btn-primary" style={{ height: 40, fontSize: 13 }}>
      Work with us<span className="h-btn-arrow">→</span>
    </a>
  </header>
);

const Footer = () => (
  <footer className="h-footer">
    <div className="h-footer-grid">
      <div className="h-footer-col">
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
          <img src={LOGO("__logo__")} alt="" style={{ width: 24, height: 32, borderRadius: 0 }} />
          <span className="h-header-wordmark" style={{ fontSize: 14 }}>HONA</span>
        </div>
        <p>Advisory and software for the teams building the next enterprise stack.</p>
        <p style={{ marginTop: 8 }}>© {new Date().getFullYear()} HONA LLC</p>
      </div>
      <div className="h-footer-col">
        <span className="h-label">Navigate</span>
        <a href={path("moat-method.html")}>The Moat Method</a>
        <a href={path("products.html")}>Products</a>
        <a href={path("writing.html")}>Writing</a>
        <a href={path("about.html")}>About</a>
      </div>
      <div className="h-footer-col">
        <span className="h-label">Legal</span>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </div>
      <div className="h-footer-col">
        <span className="h-label">Contact</span>
        <a href="mailto:sales@1hona.com">sales@1hona.com</a>
        <a href="https://www.linkedin.com/company/hona-llc" target="_blank" rel="noopener noreferrer">LinkedIn</a>
      </div>
    </div>
    <div className="h-footer-meta">
      <span>HONA LLC · Chicago · Remote-first</span>
      <span>v · 2026.04</span>
    </div>
  </footer>
);

const Label = ({ children, dim, style }) => (
  <span className={"h-label" + (dim ? " h-label-dim" : "")} style={style}>{children}</span>
);

const PrimaryCta = ({ href, children }) => (
  <a href={href} className="h-btn h-btn-primary">
    {children}<span className="h-btn-arrow">→</span>
  </a>
);
const GhostCta = ({ href, children, arrow = "→" }) => (
  <a href={href} className="h-btn h-btn-ghost">
    {children}<span className="h-btn-arrow">{arrow}</span>
  </a>
);

// Scroll-reveal helper — adds .in when element enters viewport
function useReveal() {
  React.useEffect(() => {
    const nodes = document.querySelectorAll('.h-reveal');
    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
    if (reduced || !('IntersectionObserver' in window)) {
      nodes.forEach(n => n.classList.add('in'));
      return;
    }
    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 -80px 0px" });
    nodes.forEach(n => io.observe(n));

    // Safety net: if the observer hasn't fired after 2s (throttled iframe,
    // hidden tab, obscure browser), mark every remaining .h-reveal in-view
    // so content never stays invisible.
    const fallback = setTimeout(() => {
      document.querySelectorAll('.h-reveal:not(.in)').forEach(n => {
        const r = n.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0) {
          n.classList.add('in');
          io.unobserve(n);
        }
      });
    }, 2000);

    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
}

const PageShell = ({ current, children }) => {
  useReveal();
  return (
    <>
      <Header current={current} />
      <main>{children}</main>
      <Footer />
    </>
  );
};

Object.assign(window, {
  NAV_ITEMS, PRODUCTS, WRITING_POSTS,
  Header, Footer, Label, PrimaryCta, GhostCta, PageShell, useReveal,
});