// Shared primitives for all pages
const BOOK_URL = "https://cal.com/ericfriedman/graphadvisors-30-minute-meeting";

const Eyebrow = ({ children, color, style }) => (
  <div className="ga-eyebrow" style={{ ...(color ? { color } : {}), ...(style || {}) }}>{children}</div>
);

const Button = ({ children, variant = "primary", size = "md", as = "a", href = "#", target, onClick, style }) => {
  const Tag = as;
  return (
    <Tag
      href={as === "a" ? href : undefined}
      target={as === "a" ? target : undefined}
      rel={as === "a" && target === "_blank" ? "noopener" : undefined}
      onClick={onClick}
      className={`ga-btn ga-btn-${variant} ga-btn-${size}`}
      style={style}
    >
      {children}
    </Tag>
  );
};

const Container = ({ children, width = "default", className = "", style }) => (
  <div className={`ga-container ga-container-${width} ${className}`} style={style}>{children}</div>
);

const Section = ({ children, alt = false, tight = false, style, id }) => (
  <section
    id={id}
    className={`ga-section ${alt ? "ga-section-alt" : ""} ${tight ? "ga-section-tight" : ""}`}
    style={style}
  >
    {children}
  </section>
);

// Sticky nav with backdrop blur. activePath highlights current page.
const Nav = ({ activePath = "" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const link = (href, label) => (
    <a href={href} style={activePath === href ? { color: "var(--accent)" } : undefined}>{label}</a>
  );
  return (
    <header className={`ga-nav ${scrolled ? "ga-nav-scrolled" : ""}`}>
      <div className="ga-nav-inner">
        <a href="/" className="ga-nav-brand">
          <img src="../assets/logo-official-ink.png" alt="Graph Advisors" />
        </a>
        <input type="checkbox" id="ga-nav-toggle" className="ga-nav-toggle" aria-hidden="true" />
        <nav className="ga-nav-links">
          {link("/fractional-cfo", "Fractional CFO")}
          {link("/forward-deployed-engineer", "Forward Deployed Engineer")}
          {link("/resources", "Resources")}
          {link("/about", "About")}
          <a href="https://graphadvisors.substack.com/" target="_blank" rel="noopener">Blog</a>
        </nav>
        <div className="ga-nav-cta">
          <Button variant="primary" size="sm" href="/contact">Book a call</Button>
        </div>
        <label htmlFor="ga-nav-toggle" className="ga-nav-burger" aria-label="Menu"><span></span><span></span><span></span></label>
      </div>
    </header>
  );
};

const Footer = () => (
  <footer className="ga-footer">
    <Container>
      <div className="ga-footer-cta">
        <h2>Forward Deployed Engineering for Investors.</h2>
        <p>Embed a team of operations and engineering AI specialists who have built and scaled projects inside allocator firms before. Trying to find the right hire in months, or start working the right team next week.</p>
        <Button variant="primary" size="lg" href={BOOK_URL} target="_blank">Book a call</Button>
      </div>
      <div className="ga-footer-cols">
        <div className="ga-footer-brand">
          <img src="../assets/logo-official.png" alt="Graph Advisors" style={{ height: 44 }} />
          <p>Fractional CFO and Outcomes Engineering for VC funds, family offices, and the companies they back.</p>
        </div>
        <div>
          <div className="ga-footer-h">Practice</div>
          <ul>
            <li><a href="/fractional-cfo">Fractional CFO</a></li>
            <li><a href="/forward-deployed-engineer">Forward Deployed Engineer</a></li>
          </ul>
        </div>
        <div>
          <div className="ga-footer-h">Resources</div>
          <ul>
            <li><a href="/resources">Tools</a></li>
            <li><a href="/resources">Workshops</a></li>
          </ul>
        </div>
        <div>
          <div className="ga-footer-h">Company</div>
          <ul>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <li><span>New York, NY</span></li>
          </ul>
        </div>
      </div>
      <div className="ga-footer-rule"></div>
      <div className="ga-footer-fine">
        <span>© 2026 Graph Advisors</span>
        <span><a href="/privacy">Privacy</a> · <a href="/terms">Terms</a></span>
      </div>
    </Container>
  </footer>
);

Object.assign(window, { Eyebrow, Button, Container, Section, Nav, Footer, BOOK_URL });