// Founder, News, CTA, Footer

function Founder() {
  const record = [
    { label: "Operating Record", val: "210 systems · 12 countries" },
    { label: "Agnion Restructuring", val: "€75M · MBO led" },
    { label: "Patents", val: "5 international" },
    { label: "Recognition", val: "Fast Company #1 · EY Finalist" },
    { label: "Hard-Ground Execution", val: "Africa · Moscow · Kazan" },
    { label: "Author", val: "Bali State of Mind" },
  ];

  return (
    <section className="founder-section" id="founder" data-screen-label="07 Founder">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 64 }}>
          <div className="left">
            <div className="label">About the Founder</div>
          </div>
          <div className="right">
            <h2>Julien Uhlig.<br/><span className="accent">Builder, not a bystander.</span></h2>
          </div>
        </div>

        <div className="founder-grid">
          <div>
            <div className="founder-photo">
              <img src="assets/team/julien-uhlig-new.jpg" alt="Julien Uhlig" />
            </div>
            <div className="founder-meta">
              <span>German-born</span>
              <span className="sep">·</span>
              <span>Bali-based</span>
              <span className="sep">·</span>
              <span>30 years</span>
            </div>
          </div>

          <div className="founder-body">
            <p>
              Thirty years at the intersection of industrial technology, capital markets, and applied research. One through-line across every chapter: putting infrastructure — electrical, financial, educational — into the hands of communities and builders the existing system doesn't serve well.
            </p>
            <p>
              Started in <strong>waste-to-energy</strong>, aimed at bringing reliable power to rural and post-conflict African communities the grid never reached. Led the <strong>management buyout</strong> and <strong>€75M restructuring</strong> of <strong>Agnion Technologies</strong> (backed by Kleiner Perkins, Wellington Partners, Waste Management Inc., and TriplePoint Capital with $54M of investment). Deployed <strong>210 distributed-energy systems across 12 countries</strong>, with <strong>5 international patents</strong> granted. <strong>Fast Company's #1 Energy Company of 2018</strong>.
            </p>
            <p>
              The skill underneath it all is <strong>international execution in hard places</strong>: 16 years with GIZ in rural and post-conflict Africa and the Balkans; briefings to the Russian Duma in Moscow; fieldwork with Gazprom in Kazan, Tatarstan. He does the work where the work is, not where the conference is.
            </p>
            <p>
              Today he leads EX Venture's eight operating brands and is the author of <span className="accent">Bali State of Mind</span>.
            </p>

            <div className="record-grid">
              {record.map((r, i) => (
                <div className="record-cell" key={i}>
                  <div className="label">{r.label}</div>
                  <div className="val">{r.val}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 36 }}>
              <a className="btn-link" href="https://julien-uhlig.com" target="_blank" rel="noopener">
                Full Biography <span className="arr">↗</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function News() {
  const articles = (window.ARTICLES || []).slice(0, 3);

  return (
    <section className="section" id="news" data-screen-label="08 News">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="label">Latest</div>
          </div>
          <div className="right">
            <h2>From the desk.</h2>
            <p className="body-text" style={{ marginTop: 28, maxWidth: 620 }}>
              Operator notes on government capital, the work of co-building, and the geography of execution. Written by the team, published when there is something worth saying.
            </p>
          </div>
        </div>

        <div className="news-grid">
          {articles.map((a, i) => (
            <a key={a.id} href={"article.html?id=" + a.id} className="news-card">
              <div className="media">
                <span className="cat">{a.category}</span>
                <img src={a.image} alt="" />
              </div>
              <div className="body">
                <div>
                  <div className="date">{a.date} · {a.readTime}</div>
                  <h3>{a.title}</h3>
                  <p>{a.excerpt}</p>
                </div>
                <div style={{ marginTop: 8 }}>
                  <span className="btn-link">Read article <span className="arr">→</span></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ onBookCall }) {
  return (
    <section className="cta" id="cta" data-screen-label="09 CTA">
      <div className="cta-bg">
        <img src="assets/photos/bali-03.jpg" alt="" />
      </div>
      <div className="cta-glow"></div>
      <div className="container cta-inner">
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 32 }}>
          <span className="status-pill"><span className="dot"></span>Ready?</span>
        </div>
        <h2>Let's build<br/><span className="accent">what matters.</span></h2>
        <p>
          If you are building something that matters and need a partner who has been inside the machine — not watching from the sidelines — let's talk.
        </p>
        <button className="btn btn-primary" onClick={onBookCall}>
          Book a Call <span className="arr">→</span>
        </button>
      </div>
    </section>
  );
}

function Footer({ onBookCall }) {
  return (
    <footer className="footer" data-screen-label="10 Footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="logo">
              <img src="assets/logo-mark.png" alt="EX Venture" />
              <span>EXVENTURE</span>
            </div>
            <p>We build infrastructure. Intelligence, capital, finance, and education — across 4 continents.</p>
          </div>
          <div className="footer-col">
            <h4>Entities</h4>
            <a href="https://www.ex-ai.co/" target="_blank" rel="noopener noreferrer">EX · AI ↗</a>
            <a href="#">EX · Venture</a>
            <a href="https://exfi.app/" target="_blank" rel="noopener noreferrer">EX · FI ↗</a>
            <a href="https://baliinternship.com/" target="_blank" rel="noopener noreferrer">EX · Academy ↗</a>
          </div>
          <div className="footer-col">
            <h4>Resources</h4>
            <a href="https://julien-uhlig.com">Julien Uhlig</a>
            <a href="#">Zero-X Impact</a>
            <a href="https://balistateofmind.co">Bali State of Mind</a>
          </div>
          <div className="footer-col">
            <h4>Connect</h4>
            <a href="mailto:media@exventure.co">media@exventure.co</a>
            <a onClick={onBookCall} style={{ cursor: "pointer" }}>Book a Call ↗</a>
          </div>
        </div>

        <div className="footer-bottom">
          <p className="footer-legal">
            EX Venture Inc. is registered with the U.S. Securities and Exchange Commission (SEC). EX Financial (exfi.app) is authorised and regulated in the United Kingdom; payment and financial services are available to UK customers only. Nothing on this website constitutes investment advice, a solicitation to invest, or a financial promotion directed at persons outside the United Kingdom where such promotion would be unlawful.
          </p>
          <span className="footer-copy">© 2026 EX VENTURE INC.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Founder, News, CTA, Footer });