// Family of 4 entities, How-we-work quote, Thesis, Track Record, Research

function Family() {
  const entities = [
    {
      wm: "EX·AI",
      status: "OPERATING",
      title: "Intelligence Infrastructure",
      desc: "The systems that make decisions possible. We build the intelligence layer — data infrastructure, AI operations, and the tooling that turns information into action. Not chatbots. The pipes behind them.",
      link: "Visit ex-ai.co",
      meta: "ex-ai.co",
      href: "https://www.ex-ai.co/",
    },
    {
      wm: "EX·VENTURE",
      status: "SEC REGISTERED",
      title: "Venture Infrastructure",
      desc: "€160M+ deployed across cleantech, deep tech, and government-funded ventures. We don't just write cheques — we co-build, operate, and stay in it. 30+ active projects across 4 continents.",
      link: "Learn more",
      meta: "exventure.co",
      href: "#",
    },
    {
      wm: "EX·FI",
      status: "FCA AUTHORISED · UK",
      title: "Financial Infrastructure",
      desc: "Payment rails and financial tooling built for the way money actually moves. Checkout, settlement, and treasury — without the friction legacy systems demand.",
      link: "Visit exfi.app",
      meta: "exfi.app",
      href: "https://exfi.app/",
    },
    {
      wm: "EX·ACADEMY",
      status: "BALI · COHORT 04",
      title: "Knowledge Infrastructure",
      desc: "Immersive programs in Bali that train founders in AI execution, startup operations, and investor readiness. 26 nations represented. Not a workshop — participants leave with a fundable project.",
      link: "Visit baliinternship.com",
      meta: "baliinternship.com",
      href: "https://baliinternship.com/",
    },
  ];

  return (
    <section className="section" id="family" data-screen-label="02 Family">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="label">The EX Family</div>
          </div>
          <div className="right">
            <h2>Four entities. <span className="accent">One word.</span></h2>
            <p className="body-text" style={{ marginTop: 28, maxWidth: 620 }}>
              Every company in the EX family shares one signal: Infrastructure. We don't operate on the surface. We build what goes underneath.
            </p>
          </div>
        </div>

        <div className="entities">
          {entities.map((e, i) => (
            <div className="entity" key={i}>
              <div>
                <div className="entity-head">
                  <span className="entity-wordmark">{e.wm}</span>
                  <span className="entity-status">{e.status}</span>
                </div>
                <h3 className="entity-title">{e.title}</h3>
                <p className="entity-desc">{e.desc}</p>
              </div>
              <div className="entity-footer">
                <a href={e.href} className="entity-link" target={e.href.startsWith("http") ? "_blank" : undefined} rel={e.href.startsWith("http") ? "noopener noreferrer" : undefined}>{e.link} <span className="arr">{e.href.startsWith("http") ? "↗" : "→"}</span></a>
                <span className="entity-meta">{e.meta}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="quote-section" data-screen-label="03 How We Work">
      <div className="quote-img">
        <img src="assets/photos/meeting-03.jpg" alt="" />
      </div>
      <div className="container quote-inner">
        <div className="quote-eyebrow">How We Work</div>
        <h2 className="quote-text">
          Partners, <span className="accent">not pitches.</span>
          <span style={{ display: "block", fontSize: "0.45em", color: "rgba(255,255,255,0.55)", marginTop: 36, fontFamily: "Inter", letterSpacing: "-0.005em", fontWeight: 400, lineHeight: 1.55, maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
            We invest where we can be useful in the room. Every deal starts with a conversation about what you actually need — not what we can afford to offer.
          </span>
        </h2>
      </div>
    </section>
  );
}

function Thesis() {
  const pillars = [
    {
      n: "/ 01",
      t: "Government Capital Access",
      d: "Most deep tech founders leave millions in non-dilutive capital on the table. We unlock government programs across the EU, US, and emerging markets — €160M+ across 100+ funded projects.",
    },
    {
      n: "/ 02",
      t: "Operator-Level Partnership",
      d: "We don't sit on boards and wait for quarterly updates. We co-build alongside founders — raising capital, building teams, closing deals. Active CEO engagement, not passive presence.",
    },
    {
      n: "/ 03",
      t: "Deep Tech & Cleantech Focus",
      d: "Distributed energy systems, waste-to-power, AI-driven infrastructure. We back companies solving problems that matter — with technology that works and markets that exist.",
    },
    {
      n: "/ 04",
      t: "Global Institutional Network",
      d: "Kleiner Perkins. Wellington Partners. Royal Bank of Scotland. Our portfolio companies access institutional and government capital that took 20 years to build.",
    },
    {
      n: "/ 05",
      t: "AI-Accelerated Execution",
      d: "Every portfolio company gets access to EX AI's intelligence infrastructure. Go-to-market, operations, and decision-making — accelerated by the systems we build in-house.",
    },
    {
      n: "/ 06",
      t: "Full-Stack Support",
      d: "Capital is the beginning. We bring fundraising strategy, investor narrative, research cluster partnerships, and integration into the entire EX platform.",
    },
  ];

  return (
    <section className="section" id="thesis" data-screen-label="04 Thesis" style={{ background: "#050505" }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="label">Investment Thesis</div>
          </div>
          <div className="right">
            <h2>Not retired. Not advising.<br/><span className="accent">Fully in.</span></h2>
            <p className="body-text" style={{ marginTop: 28, maxWidth: 620 }}>
              EX Venture was built to do one thing: turn the best ideas in deep tech and cleantech into funded, operating companies. We are not consultants who have seen things. We are operators who are in it.
            </p>
          </div>
        </div>

        <div className="thesis-grid">
          {pillars.map((p, i) => (
            <div className="thesis-cell" key={i}>
              <div>
                <div className="thesis-counter">{p.n}</div>
                <h3 className="thesis-title">{p.t}</h3>
                <p className="thesis-desc">{p.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrackRecord() {
  const investors = [
    { name: "Kleiner Perkins", role: "Tier-1 Silicon Valley VC" },
    { name: "Wellington Partners", role: "European Venture Capital" },
    { name: "Triple Point Capital", role: "Growth & Venture Lending" },
    { name: "Waste Management Inc.", role: "Strategic Corporate" },
    { name: "Munich Venture Partners", role: "Deep Tech VC · Germany" },
    { name: "Royal Bank of Scotland", role: "Institutional Capital" },
    { name: "TriplePoint Capital", role: "$54M Investment" },
    { name: "GIZ", role: "16 yrs · Development" },
  ];
  return (
    <section className="section" id="track" data-screen-label="05 Track Record">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="label">Track Record</div>
          </div>
          <div className="right">
            <h2>Institutional investors.<br/><span className="accent">Agnion & Entrade restructuring.</span></h2>
            <p className="body-text" style={{ marginTop: 28, maxWidth: 620 }}>
              The capital partners who have backed the work — from tier-1 Silicon Valley funds to European institutional capital and strategic corporates.
            </p>
          </div>
        </div>

        <div className="logo-wall">
          {investors.map((inv, i) => (
            <div className="logo-cell" key={i}>
              <div className="name">{inv.name}</div>
              <div className="role">{inv.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Research() {
  const labs = [
    { name: "DLR", role: "German Aerospace Center" },
    { name: "Fraunhofer Institute", role: "Applied Research · Germany" },
    { name: "Helmholtz Institut", role: "Energy Research · Germany" },
    { name: "Robert Boyle Institut", role: "Research · Germany" },
    { name: "KIT Karlsruhe", role: "Technology · Germany" },
    { name: "RWTH Aachen", role: "Engineering · Germany" },
    { name: "TU Munich", role: "Technical University" },
    { name: "FAU Nuremberg", role: "University · Germany" },
    { name: "Berkeley Labs", role: "National Lab · USA" },
    { name: "IUTA", role: "Energy & Environment" },
    { name: "Petronas University", role: "Energy · Malaysia" },
    { name: "Udayana University", role: "Research · Indonesia" },
    { name: "NTU Singapore", role: "Technology · Singapore" },
    { name: "Univ. Fukushima", role: "Energy · Japan" },
    { name: "Uni. Kraljevo", role: "Engineering · Serbia" },
    { name: "HS Zittau-Goerlitz", role: "Applied Science · Germany" },
  ];
  const countries = ["Germany", "USA", "Indonesia", "Malaysia", "Nigeria", "Serbia", "Singapore", "Japan"];

  return (
    <section className="section" id="research" data-screen-label="06 Research" style={{ background: "#050505" }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="label">Government-Backed Research</div>
          </div>
          <div className="right">
            <h2>20 years. 6 nations.<br/><span className="accent">16 world-class labs.</span></h2>
            <p className="body-text" style={{ marginTop: 28, maxWidth: 620 }}>
              Government-funded green technology programs across five continents — coordinating joint research with some of the world's most rigorous scientific institutions on clean energy, distributed power systems, and sustainable infrastructure.
            </p>
          </div>
        </div>

        <div className="country-chips">
          {countries.map((c, i) => <span key={i} className="country-chip">{c}</span>)}
        </div>

        <div className="logo-wall">
          {labs.map((lab, i) => (
            <div className="logo-cell" key={i}>
              <div className="name">{lab.name}</div>
              <div className="role">{lab.role}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Family, Quote, Thesis, TrackRecord, Research });