// Who We Are page - Clean Institutional system.
// Reuses Nav + FinalCTA + Footer from homepage for consistency.

function WhoHero() {
  return (
    <section className="who-hero" id="top">
      <div className="hero-inner">
        <h1>A team that&rsquo;s shipped AI for a living.</h1>
        <p className="hero-subhead">
          AI builders, operators and fractional leaders. Inside multinational corporates.
          Across funded startups. With a decade of founding, fundraising and venture capital
          behind every build.
        </p>
      </div>
    </section>
  );
}

const FOUNDERS = [
  {
    initials: "UE",
    name: "Udeme",
    roles: ["Fractional CAIO", "Head of AI", "Interim CTO"],
    background: "PhD, Machine Learning",
    linkedin: "https://www.linkedin.com/",
    bio: "Research-trained AI engineer who has been shipping production AI systems since before the phrase 'AI agent' meant anything. Previously co-founded a product studio and served as fractional CTO across a string of funded startups. Builds the agents that make it into production.",
  },
  {
    initials: "JD",
    photo: "uploads/james.jpg",
    name: "James Roycroft-Davis",
    roles: ["Founder", "Ex-VC", "Angel advisor"],
    background: "A decade in ops, growth and capital",
    linkedin: "https://www.linkedin.com/",
    bio: "Ex-VC. Three-time founder. Spent the last year advising over a hundred first-time founders on strategy, product, fundraising and AI - so he has seen what works and what quietly dies. Now builds agents full-time and helps his angel portfolio fold AI into how they actually run.",
  },
];

function LinkedInIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
  );
}

function Founders() {
  return (
    <section id="founders" className="section section-founders reveal" aria-label="Founders">
      <div className="wrap">
        <div className="section-head">
          <h2>Built and led by the people who ship.</h2>
          <p className="lede">
            Agent Ventures is a small, senior team. You talk to the people who build. Every time.
          </p>
        </div>
        <div className="founders">
          {FOUNDERS.map((f) => (
            <article key={f.name} className="founder">
              <div className="founder-avatar" aria-hidden="true">
                {f.photo
                  ? <img src={f.photo} alt={f.name} className="founder-photo"/>
                  : <span>{f.initials}</span>
                }
              </div>
              <div className="founder-body">
                <div className="founder-head">
                  <h3>{f.name}</h3>
                  <a
                    href={f.linkedin}
                    target="_blank"
                    rel="noopener"
                    className="founder-linkedin"
                    aria-label={f.name + " on LinkedIn"}
                  >
                    <LinkedInIcon/>
                  </a>
                </div>
                <span className="founder-background">{f.background}</span>
                <div className="founder-roles">
                  {f.roles.map((r) => (
                    <span key={r} className="chip founder-chip">{r}</span>
                  ))}
                </div>
                <p>{f.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Beliefs() {
  const beliefs = [
    {
      n: "01",
      body: "AI is a technological supercycle that will completely change the way companies do business and people do work over the next ten years.",
    },
    {
      n: "02",
      body: "There are three types of relationships businesses will have with AI: AI-absent, AI-integrated, and AI-first.",
    },
    {
      n: "03",
      body: "The only way to build a long-term successful business is by embracing the AI wave and getting as close to AI-first as possible.",
    },
  ];
  return (
    <section id="beliefs" className="section section-tinted reveal" aria-label="Beliefs">
      <div className="wrap">
        <div className="section-head">
          <h2>What we believe.</h2>
          <p className="lede">Three beliefs that shape every decision, every build, every client we take on.</p>
        </div>
        <ol className="beliefs">
          {beliefs.map((b, i) => (
            <li key={b.n} className="belief" style={{ transitionDelay: `${i * 120}ms` }}>
              <span className="belief-num tnum">{b.n}</span>
              <p className="belief-body">{b.body}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function WhoApp() {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0, rootMargin: '0px 0px -12% 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav/>
      <WhoHero/>
      <Founders/>
      <Beliefs/>
      <FinalCTA/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WhoApp/>);