// VenBuilder website — shared primitives, nav, footer
const { useState, useEffect } = React;

function Mark({ size = 40, variant = "color" }) {
  const layer = variant === "dark" ? "#7ebd92" : "#1f7042";
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-label="VenBuilder">
      <circle cx="18.37" cy="19.75" r="9" fill={layer} fillOpacity="0.5"/>
      <circle cx="29.63" cy="19.75" r="9" fill={layer} fillOpacity="0.5"/>
      <circle cx="24" cy="29.5" r="9" fill={layer} fillOpacity="0.5"/>
      <path d="M20.74 21.12 A9 9 0 0 1 27.26 21.12 A9 9 0 0 1 24 26.77 A9 9 0 0 1 20.74 21.12 Z" fill="#57c98a"/>
    </svg>
  );
}

function Wordmark({ size = 21, variant = "color", sub }) {
  return (
    <span className="wm" style={{ fontSize: size }}>
      Ven<span className="b">Builder</span>
      {sub && (
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: size * 0.5,
          letterSpacing: "0.1em", textTransform: "uppercase",
          color: "var(--fg-3)", marginLeft: 8
        }}>{sub}</span>
      )}
    </span>
  );
}

function Icon({ name, ...rest }) {
  return <i data-lucide={name} {...rest}></i>;
}

function useLucide() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

function Button({ variant = "pri", children, icon, ...rest }) {
  return (
    <button className={`btn btn-${variant}`} {...rest}>
      {children}{icon && <Icon name={icon} />}
    </button>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a className="nav-logo" href="#">
          <Mark size={30} /><Wordmark size={21} />
        </a>
        <div className="nav-links">
          <a href="#work">Studio</a>
          <a href="#process">How we work</a>
          <a href="#ventures">Ventures</a>
          <a href="#thesis">Thesis</a>
        </div>
        <div className="nav-cta">
          <Button variant="ghost">Sign in</Button>
          <Button variant="pri" icon="arrow-right">Start a build</Button>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="col">
            <div className="footer-logo"><Mark size={26} /><Wordmark size={18} /></div>
            <p className="footer-tag">A calm, capable AI-native venture studio. From idea to working system — fast.</p>
          </div>
          <div className="col">
            <h5>Studio</h5>
            <a href="#">How we work</a>
            <a href="#">Ventures</a>
            <a href="#">Thesis</a>
            <a href="#">Careers</a>
          </div>
          <div className="col">
            <h5>Build</h5>
            <a href="#">Start a build</a>
            <a href="#">For founders</a>
            <a href="#">For operators</a>
            <a href="#">Labs</a>
          </div>
          <div className="col">
            <h5>Connect</h5>
            <a href="#">Contact</a>
            <a href="#">Writing</a>
            <a href="#">LinkedIn ↗</a>
            <a href="#">X ↗</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 VenBuilder. Built in public.</span>
          <span style={{ fontFamily: "var(--font-mono)" }}>VENTURE STUDIO · AI-NATIVE</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Mark, Wordmark, Icon, useLucide, Button, Nav, Footer });