/* TEAM PAGE */
const TEAM_MEMBERS = [
  {
    name: 'Julianne Hummelberg', photo: 'assets/julianne.png?v=2',
    title: 'Co-Founder & General Partner',
    email: 'julianne@hingham.vc',
    linkedin: 'https://www.linkedin.com/in/julianne-hummelberg-07995136/',
    bio: '9 years of growth equity investing predominantly in better-for-you consumer brands at Summit Partners and GroundForce Capital. Led consumer investment and deal teams with deep expertise in diligence, deal structuring, and board-level support helping CPG brands scale and exit.',
    prior: ['Summit Partners', 'GroundForce Capital'],
  },
  {
    name: "Benjamin O'Connor", photo: 'assets/ben.png?v=2',
    title: 'Co-Founder & General Partner',
    email: 'ben@hingham.vc',
    linkedin: 'https://www.linkedin.com/in/ben-o-67274a22/',
    bio: '15+ years of growth equity investing experience in consumer brands and technology platforms at Summit Partners, Coatue Management, Providence Equity, and Balyasny Asset Management. Built new growth investing teams at Coatue and BAM, and the public hedge fund for Providence Equity before launching Hingham Ventures in 2024.',
    prior: ['Summit Partners', 'Coatue Management', 'Providence Equity', 'BAM'],
  },
  {
    name: 'Michael Gianelli', photo: 'assets/mike.png?v=2',
    title: 'Co-Founder & General Partner',
    email: 'mike@hingham.vc',
    linkedin: 'https://www.linkedin.com/in/michael-gianelli-63b7b750/',
    bio: '7 years of growth equity investing experience in better-for-you consumer brands and technology platforms as the investment team lead at Beechwood Capital, Intuition Capital, and Second Sight Ventures. Deep network across consumer founders, operators, and service providers.',
    prior: ['Beechwood Capital', 'Intuition Capital', 'Second Sight Ventures'],
  },
];

function TeamMember({ p, i }) {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  const flip = i % 2 === 1;
  const photo = (
    <div style={{
      background: C.cream2, border: `1px solid rgba(56,8,8,.12)`, aspectRatio: '4 / 5',
      backgroundImage: `url('${p.photo}')`, backgroundSize: 'cover', backgroundPosition: 'center top',
    }} />
  );
  const text = (
    <div>
      <Eyebrow style={{ marginBottom: 14 }}>{`0${i + 1} · Founding Partner`}</Eyebrow>
      <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>{p.name}</h2>
      <div style={{ fontFamily: FONTS.display, fontStyle: 'italic', fontSize: mobile ? 16 : 20, color: C.red, marginTop: 8 }}>{p.title}</div>
      <div style={{ fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16, lineHeight: 1.7, color: 'rgba(14,19,32,.75)', marginTop: mobile ? 20 : 28 }}>
        {p.bio}
      </div>
      <div style={{ marginTop: mobile ? 20 : 28 }}>
        <Eyebrow style={{ marginBottom: 14 }}>Prior Experience</Eyebrow>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {p.prior.map((x, j) => (
            <span key={j} style={{ fontFamily: FONTS.sans, fontSize: 13, padding: '6px 14px', border: `1px solid rgba(56,8,8,.18)`, borderRadius: 999, color: C.maroon }}>{x}</span>
          ))}
        </div>
      </div>
      <div style={{ marginTop: mobile ? 24 : 32, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
        <a href={`mailto:${p.email}`} style={{ fontFamily: FONTS.sans, fontSize: 14, color: C.red, textDecoration: 'none', borderBottom: `1px solid ${C.red}`, paddingBottom: 4 }}>{p.email}</a>
        <a href={p.linkedin} target="_blank" rel="noreferrer" style={{ fontFamily: FONTS.sans, fontSize: 13, color: 'rgba(14,19,32,.6)', textDecoration: 'none' }}>LinkedIn →</a>
      </div>
    </div>
  );
  return (
    <FadeIn>
      <div style={{
        display: compact ? 'block' : 'grid',
        gridTemplateColumns: flip ? '1.3fr 1fr' : '1fr 1.3fr',
        gap: mobile ? 28 : 80,
        padding: mobile ? '48px 0' : '96px 0', borderBottom: `1px solid rgba(56,8,8,.12)`,
        alignItems: 'center',
      }}>
        {compact ? (
          <>
            <div style={{ marginBottom: 28 }}>{photo}</div>
            {text}
          </>
        ) : (
          flip ? <>{text}{photo}</> : <>{photo}{text}</>
        )}
      </div>
    </FadeIn>
  );
}

function BucketMember() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  return (
    <FadeIn>
      <div style={{
        display: compact ? 'block' : 'grid',
        gridTemplateColumns: '1.3fr 1fr',
        gap: mobile ? 28 : 80,
        padding: mobile ? '48px 0' : '96px 0', borderBottom: `1px solid rgba(56,8,8,.12)`,
        alignItems: 'center',
      }}>
        <div>
          <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>The Hingham Bucket</h2>
          <div style={{ fontFamily: FONTS.display, fontStyle: 'italic', fontSize: mobile ? 16 : 20, color: C.red, marginTop: 8 }}>Bucket Town, Est. 1635</div>
          <div style={{ fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16, lineHeight: 1.7, color: 'rgba(14,19,32,.75)', marginTop: mobile ? 20 : 28 }}>
            At HGP, we back durable, best-in-class products and brands which is why our mascot is the Hingham bucket. In the 1600–1700s Hingham Buckets were famous globally for being the most well constructed bucket out there and could hold water better than any other, so most ships had them on board. You can still buy them today, they're made by hand in town from the same family that built them in the 1600s, which is why Hingham is often colloquially referred to as "Bucket Town."
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: compact ? 28 : 0 }}>
          <img src="assets/HGP_Bucket.png" alt="The Hingham Bucket" style={{ width: '60%', maxWidth: 260 }} />
        </div>
      </div>
    </FadeIn>
  );
}

function TeamPage() {
  const { mobile } = useViewport();
  return (
    <Page active="Team">
      <PageHero
        eyebrow="Our Team"
        title="Experienced Growth Investors"
        accent="Growth"
        subtitle="Connected by their passion for breakout consumer brands, with 30+ years of combined growth equity experience from leading institutional firms including Summit Partners, Coatue, BAM and Beechwood."
      />
      <section style={{ background: C.cream, padding: mobile ? '0 0 32px' : '0 0 60px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
          {TEAM_MEMBERS.map((p, i) => <TeamMember key={i} p={p} i={i} />)}
          <BucketMember />
        </div>
      </section>
      <CTABanner eyebrow="Want to talk?" headline="Reach out to any partner directly." subtext="We respond personally to every fund inquiry — no gatekeepers, no forms." />
    </Page>
  );
}
window.TeamPage = TeamPage;