// team.jsx — Built by founders who've shipped before.
// Founder photos are user-fillable <image-slot>s; names/bios are
// placeholders to be replaced with real details.

/* eslint-disable react/prop-types */

const FOUNDERS = [
  {
    slot: "founder-1",
    name: "Sachin Sharma",
    role: "Co-founder & CEO",
    photo: "assets/team/sachin.jpeg",
    links: [
      { label: "LinkedIn", href: "https://www.linkedin.com/in/sachinsharma07/" },
      { label: "X", href: "https://x.com/99sachins" },
    ],
  },
  {
    slot: "founder-2",
    name: "Himanshu Pandey",
    role: "Co-founder & CTO",
    photo: "assets/team/himanshu.jpg",
    links: [
      { label: "LinkedIn", href: "https://www.linkedin.com/in/hpandey01/" },
    ],
  },
];

const VALUES = [
  {
    h: "Small, senior, shipping.",
    p: "A tight team of performance marketers, data scientists, and engineers. Everyone here has shipped real products to real users.",
  },
  {
    h: "Close to customers.",
    p: "We build alongside the first teams using Prexi. Their workflow is our spec; their feedback is our roadmap.",
  },
  {
    h: "Taste is the bar.",
    p: "We hold the agent's output to the standard a good marketer would, because that's exactly who builds it.",
  },
];

function TeamApp() {
  const [theme, setTheme] = useTheme();
  return (
    <>
      <Header theme={theme} setTheme={setTheme} active="team" />
      <main>
        {/* intro */}
        <section className="page-intro">
          <div className="page-intro-glow" aria-hidden="true" />
          <div className="container">
            <div className="page-intro-inner">
              <span className="eyebrow">Team</span>
              <h1 className="page-title">
                Built by founders <span className="serif-italic">who've shipped before.</span>
              </h1>
              <p className="page-lead">
                Performance marketers, data scientists, and engineers who've managed real ad spend and shipped real products, now building the agent we always wished we had.
              </p>
            </div>
          </div>
        </section>

        {/* founders */}
        <section className="section-tight">
          <div className="container">
            <div className="founders">
              {FOUNDERS.map((f) => (
                <article className="founder-card" key={f.slot}>
                  <img
                    className="founder-photo"
                    src={f.photo}
                    alt={f.name}
                    width="112"
                    height="112"
                    loading="lazy"
                  />
                  <div className="founder-body">
                    <h2 className="founder-name">{f.name}</h2>
                    <div className="founder-role">{f.role}</div>
                    <div className="founder-links">
                      {f.links.map((l) => (
                        <a key={l.label} href={l.href} target="_blank" rel="noopener noreferrer">{l.label}</a>
                      ))}
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        {/* how the team works */}
        <section className="section-tight" style={{ paddingTop: 0 }}>
          <div className="container">
            <div className="section-head">
              <span className="eyebrow">How the team works</span>
              <h2 className="section-title">
                Few people. <span className="serif-italic">High standards.</span>
              </h2>
            </div>
            <div className="values">
              {VALUES.map((v) => (
                <div className="value" key={v.h}>
                  <h3 className="value-h">{v.h}</h3>
                  <p className="value-p">{v.p}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="section">
          <div className="container">
            <div className="final-card">
              <div className="final-bg" aria-hidden="true" />
              <div className="final-content">
                <span className="eyebrow">Work with us</span>
                <h2 className="final-title">
                  Want to talk to the people <span className="serif-italic">building it?</span>
                </h2>
                <p className="final-sub">
                  Bring a campaign you're stuck scaling. Twenty minutes with a founder, no deck, no pitch.
                </p>
                <div className="final-ctas">
                  <a className="btn btn-primary" href="book-a-call.html">Talk to founder</a>
                  <a className="btn btn-ghost" href="index.html">
                    See the product <ArrowIcon />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

Object.assign(window, { TeamApp });