// about.jsx — About / Our Story page with the two co-founders
const FOUNDERS = [
  {
    name: "Tony Gutierrez",
    role: "Co-Founder",
    bio: [
      "Tony Gutierrez serves as Co-Founder of Chairman’s Reserve, where he leads the company’s vision, growth, and customer experience. His philosophy is simple: travel should be effortless. Whether traveling for business or leisure, clients should focus on what matters most — not on rental counters, long lines, or uncertainty about whether their vehicle will be available.",
      "After experiencing the frustrations of traditional rental companies firsthand, Tony set out to create a better standard. That vision became Chairman’s Reserve — a luxury vehicle and marine rental company built around convenience, reliability, and exceptional service. His commitment to simplifying the rental experience, anticipating client needs, and delivering a level of hospitality rarely found in the rental industry continues to shape the culture behind Chairman’s Reserve.",
      "For Tony, luxury isn’t defined by the vehicle alone — it’s defined by the experience. From reservation to return, every detail is designed to make travel seamless, memorable, and worthy of the occasion.",
    ],
  },
  {
    name: "Adrian Santiago",
    role: "Co-Founder",
    bio: [
      "Adrian has been chasing these cars since he was a kid — the posters on the wall, the books he’d memorize cover to cover, the dream of one day getting behind the wheel of something extraordinary.",
      "That dream never left. It just grew up.",
      "After years in the rental industry, Adrian saw the gap between owning an exceptional automobile and actually experiencing one — and he built Chairman’s Reserve to close it. This is the collection he would have dreamed about as a kid, offered the way he always believed it should be: curated, personal, and reserved for those who appreciate the details.",
      "The posters came down a long time ago. The obsession never did.",
    ],
  },
];

function About({ onHome, onReserve }) {
  return (
    <main className="about">
      <section className="about-hero">
        <div className="about-hero-bg" />
        <div className="container about-hero-inner">
          <Reveal className="about-hero-content">
            <div className="eyebrow"><span className="eyebrow-tick" />Our Story</div>
            <h1 className="about-title">Built on a Standard,<br /><em>Not a Transaction.</em></h1>
            <p className="about-sub">
              Chairman’s Reserve was built on the belief that luxury extends beyond the vehicle. Founded
              by two partners, what began as a shared passion has grown into a curated fleet serving
              Greater Houston, defined by elevated service and meticulous attention to detail.
            </p>
            <button className="text-link" onClick={onHome}>← Back to Chairman’s Reserve</button>
          </Reveal>
        </div>
      </section>

      <section className="section about-founders">
        <div className="container">
          <Reveal>
            <div className="about-founders-head">
              <Eyebrow align="center" style={{ justifyContent: "center" }}>The Founders</Eyebrow>
              <h2 className="section-title">The People Behind the Reserve</h2>
            </div>
          </Reveal>
          <div className="founder-grid">
            {FOUNDERS.map((f, i) => (
              <Reveal key={f.name} delay={i * 120} className="founder-card">
                <div className="founder-media">
                  <PhotoPlaceholder label={f.name} ratio="4 / 5" tone="emerald" />
                </div>
                <span className="founder-role">{f.role}</span>
                <h3 className="founder-name">{f.name}</h3>
                {(Array.isArray(f.bio) ? f.bio : [f.bio]).map((para, j) => (
                  <p key={j} className="founder-bio">{para}</p>
                ))}
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section about-cta">
        <div className="container about-cta-inner">
          <Reveal>
            <p className="about-cta-line">The same standard we set for ourselves, we extend to you.</p>
            <GoldButton size="lg" onClick={onReserve}>Reserve Your Vehicle</GoldButton>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { About });