const ABOUT_QUERY = `*[_type == "aboutPage"][0]{
  hero{ crumb, heading, lead, facts[]{ num, "lbl": label } },
  storySection{ eyebrow, heading, copy, checks },
  foundersSection{ eyebrow, heading, intro },
  "founders": founders[]->{ name, role, email, bio },
  principles{ eyebrow, heading, intro, steps[]{ title, copy } },
  cta{ heading, copy, primaryLabel, primaryHref, secondaryLabel, secondaryHref }
}`;

// Aesthetic photo positioning per founder order — not stored in Sanity
const FOUNDER_PHOTO_STYLE = [
  { img: 'assets/headshot-travis.jpg', zoom: 1.2, focusY: '30%' },
  { img: 'assets/headshot-javier.jpg', zoom: 1.5, focusY: '28%' },
  { img: 'assets/headshot-keith.jpg',  zoom: 1,   focusY: '8%'  },
];

function AboutPage({ mobile }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => { sanityFetch(ABOUT_QUERY).then(setData); }, []);

  if (!data) return (
    <div className={`page ${mobile ? 'page-mobile' : 'page-desktop'}`}><SiteNav mobile={mobile} /></div>
  );

  const { hero, storySection, foundersSection, founders, principles, cta } = data;
  const foundersEyebrow = (foundersSection && foundersSection.eyebrow) || 'The team behind it';
  const foundersHeading = (foundersSection && foundersSection.heading) || 'Founders';
  const foundersIntro   = (foundersSection && foundersSection.intro)   || "Three operators who've built, produced, and sold programs at every scale — and decided this industry deserved a different kind of agency.";

  return (
    <div className={`page ${mobile ? 'page-mobile' : 'page-desktop'}`}>
      <SiteNav mobile={mobile} />

      <PageHero
        crumb={<span><a href="index.html">Home</a> / About</span>}
        title={hero.heading}
        lead={hero.lead}
        facts={hero.facts}
        image="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?w=1200&q=80&auto=format&fit=crop"
      />

      <FeatureRow
        eyebrow={storySection.eyebrow}
        title={storySection.heading}
        copy={storySection.copy}
        checks={storySection.checks}
        image="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1200&q=80&auto=format&fit=crop"
      />

      <section className="offerings" style={{ background: 'var(--engage-offwhite)' }}>
        <div className="container">
          <div className="offerings-head">
            <span className="eyebrow-row"><span className="bar" />{foundersEyebrow}</span>
            <h2>{foundersHeading}<span className="period">.</span></h2>
            <p>{foundersIntro}</p>
          </div>
          <div className="offerings-grid">
            {founders.map((f, i) => {
              const style = FOUNDER_PHOTO_STYLE[i] || FOUNDER_PHOTO_STYLE[0];
              return (
                <div className="offering" key={f.name} style={{ padding: 0, overflow: 'hidden' }}>
                  <div style={{ aspectRatio: '3 / 4', background: '#1a1a1a', overflow: 'hidden' }}>
                    <img src={style.img} alt={f.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: `center ${style.focusY}`, transform: style.zoom !== 1 ? `scale(${style.zoom})` : 'none', transformOrigin: `center ${style.focusY}`, filter: 'grayscale(1)' }} />
                  </div>
                  <div style={{ padding: '32px 28px 36px' }}>
                    <span className="idx">{f.role}</span>
                    <h3 style={{ marginTop: 12 }}>{f.name}<span className="period">.</span></h3>
                    <p>{f.bio}</p>
                    <a href={`mailto:${f.email}`} style={{ display: 'inline-block', marginTop: 16, fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600, color: 'var(--engage-orange)', textDecoration: 'none', borderBottom: '1px solid var(--engage-orange)', paddingBottom: 2 }}>{f.email}</a>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <ProcessStrip
        eyebrow={principles.eyebrow}
        title={principles.heading}
        intro={principles.intro}
        steps={principles.steps}
      />

      <Newsletter />

      <PageCTA
        noPeriod
        title={cta.heading}
        copy={cta.copy}
        primary={cta.primaryLabel}
        primaryHref={cta.primaryHref}
        secondary={cta.secondaryLabel}
        secondaryHref={cta.secondaryHref}
      />

      <SiteFooter />
    </div>
  );
}
window.AboutPage = AboutPage;