/* ABOUT PAGE */
function AboutAxes() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  const axes = [
    { n: '01', title: 'Identify Big Ideas', body: 'Identify large, sustainable tailwinds shaping new markets globally, and back the leaders of those trends. Our AI-driven, systematic process quantifies brand momentum using market growth, consumer trends, web traffic, and retail velocities.' },
    { n: '02', title: 'Structure Best-in-Class Investments', body: 'Painstakingly thorough diligence with hands-on operational value-add to minimize downside scenarios and maximize business trajectory and exit optionality. We structure every investment to protect capital while maximizing upside.' },
    { n: '03', title: 'Add Value Through Scale & Exit', body: 'Plugged into innovators, influencers, service providers, and industry leaders to identify evolving consumer patterns early and assemble the best team of needle-movers to drive brand value at every stage of growth.' },
  ];
  return (
    <section style={{ background: C.cream, padding: mobile ? '64px 0' : '120px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <FadeIn>
          <div style={{ display: compact ? 'block' : 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, marginBottom: mobile ? 36 : 64, alignItems: 'end' }}>
            <div style={{ marginBottom: compact ? 20 : 0 }}>
              <Eyebrow style={{ marginBottom: 18 }}>Why Hingham Growth Partners</Eyebrow>
              <div style={{ width: 48, height: 1, background: C.red }} />
            </div>
            <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
              Three axes of <em style={{ color: C.red, fontStyle: 'italic' }}>alpha</em>
            </h2>
          </div>
        </FadeIn>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${C.maroon}` }}>
          {axes.map((a, i) => (
            <FadeIn key={i} delay={i * 0.1}>
              <div style={{
                padding: mobile ? '28px 0' : '40px 32px 0',
                borderRight: !mobile && i < 2 ? `1px solid rgba(56,8,8,.15)` : 'none',
                borderBottom: mobile ? `1px solid rgba(56,8,8,.12)` : 'none',
              }}>
                <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 40 : 56, color: C.red, lineHeight: 1, letterSpacing: '-0.02em' }}>{a.n}</div>
                <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 22 : 28, lineHeight: 1.2, marginTop: 22, marginBottom: 18, letterSpacing: '-0.01em' }}>{a.title}</div>
                <div style={{ fontFamily: FONTS.sans, fontSize: 14.5, lineHeight: 1.7, color: 'rgba(14,19,32,.7)' }}>{a.body}</div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPlaybook() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  const items = [
    { title: 'Operator Network', body: 'Deep bench of former founders, CEOs, and functional executive leaders across better-for-you consumer, food and beverage, personal care, health & wellness, longevity, and technology. Operators act as an extension of the Hingham team with direct access to proven playbooks at every stage of growth.' },
    { title: 'GTM Scale Up', body: 'Channel expansion across DTC, retail, omnichannel, and strategic partnerships. Introductions to best-in-class retailers, distributors, brokers, creators/influencers, and commerce platforms. Performance marketing, retention, and customer lifetime value KPI development.' },
    { title: 'Product Expansion', body: 'Sharpen category leadership and brand positioning. Support high ROI, margin accretive product innovation, line extensions, and adjacency expansion. Data-driven pricing, merchandising, and channel optimization to complement existing products and distribution footprint.' },
    { title: 'Talent & Hiring', body: "Support to execute rapid hiring at scale with minimal mistakes given our vetted talent network. Executive and functional leadership recruitment and onboarding. Organizational design for scale and exit \u2014 supporting founders during the transition from 'builder' to 'scaler.'" },
    { title: 'Exit Strategy', body: 'Early preparation for strategic and financial exits. Benchmarking vs. best-in-class comparables across public and private companies. Positioning companies for premium outcomes and exit optionality driven by proven brand durability and category leadership.' },
  ];
  return (
    <section style={{ background: C.red, color: C.bone, padding: mobile ? '64px 0' : '120px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <FadeIn>
          <div style={{ display: compact ? 'block' : 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, marginBottom: mobile ? 36 : 64, alignItems: 'end' }}>
            <div style={{ marginBottom: compact ? 20 : 0 }}>
              <Eyebrow on="dark" style={{ marginBottom: 18 }}>Value Creation</Eyebrow>
              <div style={{ width: 48, height: 1, background: C.cream }} />
            </div>
            <div>
              <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0, color: C.bone }}>
                Our <em style={{ color: C.cream, fontStyle: 'italic' }}>playbook</em>
              </h2>
              <div style={{ marginTop: 22, fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16, lineHeight: 1.7, color: 'rgba(255,255,255,.78)', maxWidth: 620 }}>
                Our goal is to be the highest-impact partner to category-defining consumer brands at critical growth inflection points.
              </div>
            </div>
          </div>
        </FadeIn>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid rgba(255,255,255,.22)` }}>
          {items.map((it, i) => {
            const lastRow = i >= 3;
            return (
              <FadeIn key={i} delay={i * 0.08}>
                <div style={{
                  padding: mobile ? '28px 0' : '36px 28px',
                  borderRight: !mobile && (i % 3) < 2 ? `1px solid rgba(255,255,255,.22)` : 'none',
                  borderBottom: mobile ? `1px solid rgba(255,255,255,.22)` : (!lastRow ? `1px solid rgba(255,255,255,.22)` : 'none'),
                }}>
                  <Eyebrow on="dark" style={{ marginBottom: 14 }}>{`0${i + 1}`}</Eyebrow>
                  <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 22 : 26, lineHeight: 1.15, color: C.bone, marginBottom: 16, letterSpacing: '-0.01em' }}>{it.title}</div>
                  <div style={{ fontFamily: FONTS.sans, fontSize: 14, lineHeight: 1.7, color: 'rgba(255,255,255,.82)' }}>{it.body}</div>
                </div>
              </FadeIn>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function AboutValues() {
  const { mobile } = useViewport();
  const values = [
    { title: 'Founder-First', body: 'We win deals by being the value-added CPG partner entrepreneurs actually want on their board. Our founder network provides direct value-add at every stage of growth, including exit and acquisition.' },
    { title: 'Conviction', body: 'Concentrated, high-conviction growth strategy. We invest deeply in a smaller number of companies where we can have the highest impact, rather than spreading thin across dozens of bets.' },
    { title: 'Institutional DNA', body: 'Our team brings institutional growth equity experience from Summit Partners, Coatue, BAM, Beechwood, and Providence Equity. We combine the rigor of institutional investing with the agility of a founder-led firm.' },
    { title: 'Operator Mindset', body: "We don't just write checks \u2014 we roll up our sleeves. From channel expansion and talent hiring to pricing strategy and exit preparation, we work alongside founders as true operating partners." },
  ];
  return (
    <section style={{ background: C.cream2, padding: mobile ? '64px 0' : '120px 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <FadeIn>
          <div style={{ display: mobile ? 'block' : 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, marginBottom: mobile ? 36 : 64, alignItems: 'end' }}>
            <div style={{ marginBottom: mobile ? 20 : 0 }}>
              <Eyebrow style={{ marginBottom: 18 }}>What Drives Us</Eyebrow>
              <div style={{ width: 48, height: 1, background: C.red }} />
            </div>
            <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
              Our <em style={{ color: C.red, fontStyle: 'italic' }}>values</em>
            </h2>
          </div>
        </FadeIn>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: 0, borderTop: `1px solid ${C.maroon}` }}>
          {values.map((v, i) => (
            <FadeIn key={i} delay={i * 0.08}>
              <div style={{
                padding: mobile ? '28px 0' : '36px 32px',
                borderRight: !mobile && (i % 2) === 0 ? `1px solid rgba(56,8,8,.15)` : 'none',
                borderBottom: mobile ? `1px solid rgba(56,8,8,.12)` : (i < 2 ? `1px solid rgba(56,8,8,.15)` : 'none'),
              }}>
                <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 22 : 28, color: C.red, fontStyle: 'italic', marginBottom: 18 }}>{v.title}</div>
                <div style={{ fontFamily: FONTS.sans, fontSize: mobile ? 14 : 15, lineHeight: 1.7, color: 'rgba(14,19,32,.7)' }}>{v.body}</div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutBucket() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  return (
    <section style={{ background: C.cream, padding: mobile ? '64px 0' : '120px 0', borderTop: `1px solid rgba(56,8,8,.12)` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <FadeIn>
          <div style={{ display: compact ? 'block' : 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'center' }}>
            <div style={{ background: C.cream2, padding: mobile ? 36 : 60, border: `1px solid rgba(56,8,8,.12)`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: compact ? 32 : 0 }}>
              <img src="assets/HGP_Bucket.png" style={{ width: '100%', maxWidth: mobile ? 200 : 320 }} />
            </div>
            <div>
              <Eyebrow style={{ marginBottom: 18 }}>Our Heritage</Eyebrow>
              <div style={{ width: 48, height: 1, background: C.red, marginBottom: 26 }} />
              <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 40 : 64, lineHeight: 1, letterSpacing: '-0.025em', margin: '0 0 32px' }}>
                The <em style={{ color: C.red, fontStyle: 'italic' }}>Bucket</em>
              </h2>
              <div style={{ fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16, lineHeight: 1.75, color: 'rgba(14,19,32,.75)', maxWidth: 580 }}>
                <p style={{ margin: '0 0 20px' }}>Our logo is a nod to Hingham, Massachusetts' heritage as "Bucket Town." From the 1630s through the 19th century, Hingham was the woodenware capital of America — at its peak in 1818, 38% of the town's male population were coopers crafting wooden pails, tubs, and containers shipped across the Eastern seaboard and beyond.</p>
                <p style={{ margin: '0 0 20px' }}>The town's coopers even produced 5,000 canteens in 20 days for the Continental Army during the Revolutionary War.</p>
                <p style={{ margin: 0, fontFamily: FONTS.display, fontStyle: 'italic', fontSize: mobile ? 17 : 20, color: C.maroon, lineHeight: 1.5 }}>The bucket symbolizes Hingham's legacy of craftsmanship, resourcefulness, and building things that endure — values that guide our approach to investing.</p>
              </div>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <Page active="About">
      <PageHero
        eyebrow="About Us"
        title="Founder-Backed Growth Equity for Category-Defining Consumer Brands"
        accent="Category-Defining"
        subtitle="Hingham Growth Partners is a new, Hingham, MA-based growth investment platform founded by a seasoned team of investment professionals with a combined 30+ years of growth equity experience. We combine institutional investing rigor with an irreplicable founder-to-founder network to serve as the preferred growth equity partner for the next generation of category-defining consumer brands."
      />
      <AboutAxes />
      <AboutPlaybook />
      <AboutValues />
      <AboutBucket />
    </Page>
  );
}
window.AboutPage = AboutPage;