// Navbar + Hero — institutional, refined, minimal
function Nav({ onBookCall }) {
  const links = [
    { l: "Entities", h: "#family" },
    { l: "Thesis", h: "#thesis" },
    { l: "Track Record", h: "#track" },
    { l: "Research", h: "#research" },
    { l: "Founder", h: "#founder" },
    { l: "News", h: "#news" },
  ];
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <img className="mark-img" src="assets/logo-mark.png" alt="EX Venture" />
          <span className="nav-wordmark">EXVENTURE</span>
        </a>
        <div className="nav-links">
          {links.map((l, i) => <a key={i} href={l.h}>{l.l}</a>)}
        </div>
        <button className="nav-cta" onClick={onBookCall}>
          Book a Call <span style={{ fontSize: 11 }}>↗</span>
        </button>
      </div>
    </nav>
  );
}

function Hero({ onBookCall }) {
  const stats = [
    { v: "€160M+", l: "Capital Deployed" },
    { v: "100+", l: "Govt. Programs" },
    { v: "4", l: "Continents" },
    { v: "26", l: "Academy Nations" },
    { v: "20yrs", l: "Building" },
  ];
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-bg">
        <img src="assets/photos/cover.jpg" alt="" />
      </div>
      <div className="hero-grid"></div>

      <div className="container hero-inner">
        <div className="hero-pre">
          <span>INTELLIGENCE</span>
          <span className="dot"></span>
          <span>CAPITAL</span>
          <span className="dot"></span>
          <span>FINANCE</span>
          <span className="dot"></span>
          <span>EDUCATION</span>
        </div>

        <h1 className="hero-title">
          We Build<br/><span className="accent">Infrastructure.</span>
        </h1>

        <p className="hero-sub">
          EX Venture is a family of companies that builds the foundational systems others rely on. Not apps. Not products. The platforms those things run on.
        </p>

        <div className="hero-actions">
          <button className="btn btn-primary" onClick={onBookCall}>Book a Call <span className="arr">→</span></button>
          <a href="#family" className="btn btn-ghost">Explore the Family <span className="arr">↓</span></a>
        </div>

        <div className="hero-stats">
          {stats.map((s, i) => (
            <div className="hero-stat" key={i}>
              <div className="v">{s.v}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero });