/* HOME PAGE */
function HomeHero() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  return (
    <section style={{ background: C.cream, color: C.ink, padding: mobile ? '64px 0 0' : '120px 0 0' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px' : '0 56px' }}>
        <div style={{ display: compact ? 'block' : 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <FadeIn>
              <Eyebrow style={{ marginBottom: mobile ? 20 : 32 }}>Founder-Backed Growth Equity</Eyebrow>
            </FadeIn>
            <FadeIn delay={0.1}>
              <h1 style={{
                fontFamily: FONTS.display, fontWeight: 400,
                fontSize: mobile ? 48 : tablet ? 64 : 92, lineHeight: 1.0, letterSpacing: '-0.025em', margin: 0,
              }}>
                The Next Generation<br />
                <em style={{ fontStyle: 'italic', color: C.red }}>Consumer Growth</em><br />
                <span style={{ color: 'rgba(14,19,32,.4)' }}>Platform</span>
              </h1>
            </FadeIn>
            <FadeIn delay={0.2}>
              <div style={{ marginTop: mobile ? 28 : 40, fontFamily: FONTS.sans, fontSize: mobile ? 15 : 17, lineHeight: 1.7, color: 'rgba(14,19,32,.7)', maxWidth: 580 }}>
                Hingham Growth Partners combines institutional growth equity experience with founder-to-founder value-add as a preferred partner to category-defining consumer brands.
              </div>
            </FadeIn>
            <FadeIn delay={0.3}>
              <div style={{ marginTop: mobile ? 32 : 48, display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
                <a href="/about" style={{ background: C.red, color: C.bone, padding: '14px 22px', fontFamily: FONTS.sans, fontSize: 13, fontWeight: 500, textDecoration: 'none', borderRadius: 4, letterSpacing: '0.02em' }}>Learn more →</a>
                <a href="/contact" style={{ color: C.red, fontFamily: FONTS.sans, fontSize: 13, fontWeight: 500, textDecoration: 'none', borderBottom: `1px solid ${C.red}`, paddingBottom: 4 }}>Get in touch</a>
              </div>
            </FadeIn>
          </div>
          {!mobile && (
            <FadeIn delay={0.2}>
              <div style={{ paddingTop: 32 }}>
                <img src="assets/HGP_Bucket.png" style={{ width: '100%', maxWidth: 360, display: 'block', marginLeft: 'auto' }} />
              </div>
            </FadeIn>
          )}
        </div>
      </div>
      <div style={{ marginTop: mobile ? 48 : 96, position: 'relative' }}>
        <div style={{
          height: mobile ? 180 : 320,
          backgroundImage: `linear-gradient(180deg, rgba(244,236,223,0) 0%, rgba(244,236,223,0) 80%, ${C.cream} 100%), url('assets/HGP_RedBackdrop.png')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', alignItems: mobile ? 'flex-end' : 'flex-end', justifyContent: 'space-between',
          maxWidth: 1200, margin: '0 auto', padding: mobile ? '0 20px 20px' : '0 56px 32px',
        }}>
          <Eyebrow on="dark">Hingham Harbor · est. 1635</Eyebrow>
          {!mobile && <Eyebrow on="dark">42°14′ N · 70°53′ W</Eyebrow>}
        </div>
      </div>
    </section>
  );
}

function HomeFocus() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  const focuses = [
    { n: '01', title: 'Better-for-You Consumer', body: 'Disruptive consumer brands across food, beverage, beauty, personal care, and wellness that are redefining their categories with healthier, cleaner alternatives.' },
    { n: '02', title: 'Health & Wellness', body: 'Companies at the forefront of longevity, personal care, and wellness — categories experiencing structural tailwinds as consumers prioritize their health.' },
    { n: '03', title: 'Commerce Enablement', body: 'The technology platforms and infrastructure powering the next generation of consumer brands, from direct-to-consumer tools to retail analytics.' },
    { n: '04', title: 'Culture Setters', body: 'Enthusiast brands, services, or experiences changing the cultural zeitgeist for the better — shaping how consumers live, connect, and express themselves.' },
  ];
  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 }}>Investment Focus</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, color: C.ink }}>
              Where we <em style={{ color: C.red, fontStyle: 'italic' }}>invest</em>
            </h2>
          </div>
        </FadeIn>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : tablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${C.maroon}` }}>
          {focuses.map((f, i) => (
            <FadeIn key={i} delay={i * 0.08}>
              <div style={{
                padding: mobile ? '28px 0' : '36px 32px 0',
                borderRight: (!mobile && !tablet && i < 3) ? `1px solid rgba(56,8,8,.15)` : (tablet && i % 2 === 0) ? `1px solid rgba(56,8,8,.15)` : 'none',
                borderBottom: mobile ? `1px solid rgba(56,8,8,.12)` : (tablet && i < 2) ? `1px solid rgba(56,8,8,.12)` : 'none',
              }}>
                <div style={{ fontFamily: FONTS.display, fontSize: 14, color: C.red, fontStyle: 'italic', marginBottom: 18 }}>— {f.n}</div>
                <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 24 : 30, lineHeight: 1.15, letterSpacing: '-0.01em', color: C.ink, marginBottom: 18 }}>{f.title}</div>
                <div style={{ fontFamily: FONTS.sans, fontSize: 14.5, lineHeight: 1.7, color: 'rgba(14,19,32,.7)' }}>{f.body}</div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeTeam() {
  const { mobile, tablet } = useViewport();
  const compact = mobile || tablet;
  const team = [
    { name: 'Julianne Hummelberg', photo: 'assets/julianne.png?v=2' },
    { name: "Benjamin O'Connor", photo: 'assets/ben.png?v=2' },
    { name: 'Michael Gianelli', photo: 'assets/mike.png?v=2' },
  ];
  return (
    <section style={{ background: C.cream2, padding: mobile ? '64px 0' : '120px 0', borderTop: `1px solid rgba(56,8,8,.12)`, borderBottom: `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 1fr', gap: 96, marginBottom: mobile ? 36 : 72, alignItems: 'end' }}>
            <div style={{ marginBottom: compact ? 20 : 0 }}>
              <Eyebrow style={{ marginBottom: 22 }}>Our Team</Eyebrow>
              <h2 style={{ fontFamily: FONTS.display, fontWeight: 400, fontSize: mobile ? 36 : 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
                Experienced <em style={{ color: C.red, fontStyle: 'italic' }}>growth investors</em>
              </h2>
            </div>
            <div style={{ fontFamily: FONTS.sans, fontSize: mobile ? 14 : 16, lineHeight: 1.7, color: 'rgba(14,19,32,.7)', paddingBottom: 8 }}>
              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.
            </div>
          </div>
        </FadeIn>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 24 : 32 }}>
          {team.map((p, i) => (
            <FadeIn key={i} delay={i * 0.1}>
              <div style={{ background: C.bone, border: `1px solid rgba(56,8,8,.12)`, padding: mobile ? 24 : 36 }}>
                <div style={{
                  width: '100%', aspectRatio: '4 / 5', background: C.cream, marginBottom: 24,
                  border: `1px solid rgba(56,8,8,.1)`,
                  backgroundImage: `url('${p.photo}')`, backgroundSize: 'cover', backgroundPosition: 'center top',
                }} />
                <div style={{ fontFamily: FONTS.display, fontSize: mobile ? 22 : 26, lineHeight: 1.15, letterSpacing: '-0.01em' }}>{p.name}</div>
                <Eyebrow style={{ marginTop: 8 }}>Co-Founder &amp; General Partner</Eyebrow>
              </div>
            </FadeIn>
          ))}
        </div>
        <FadeIn delay={0.3}>
          <div style={{ marginTop: mobile ? 32 : 48, textAlign: 'center' }}>
            <a href="/team" style={{ fontFamily: FONTS.sans, fontSize: 14, color: C.red, textDecoration: 'none', borderBottom: `1px solid ${C.red}`, paddingBottom: 4 }}>Meet the full team →</a>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <Page active="Home">
      <HomeHero />
      <HomeFocus />
      <HomeTeam />
      <CTABanner headline="Let's build something together" subtext="Whether you're a founder, operator, or fellow investor — we'd love to hear from you." />
    </Page>
  );
}
window.HomePage = HomePage;