const teamStyles = {
  wrap: { padding: '120px 0', background: 'var(--bg)', color: 'var(--ink)', position: 'relative' },
  head: { textAlign: 'center', maxWidth: 820, margin: '0 auto 64px' },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginBottom: 16 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(44px, 6vw, 92px)', lineHeight: 0.92, color: 'var(--ink)', letterSpacing: '-0.045em' },
  dek: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.5, color: 'var(--muted)', marginTop: 24 },

  // Featured founder
  founder: { display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 48, alignItems: 'center', background: 'var(--paper)', borderRadius: 24, border: '1px solid var(--line)', padding: 28, marginBottom: 24 },
  founderImg: { width: '100%', aspectRatio: '1/1', objectFit: 'cover', borderRadius: 18, display: 'block' },
  fRole: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginBottom: 14 },
  fName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4vw, 52px)', letterSpacing: '-0.035em', color: 'var(--ink)', marginBottom: 16, lineHeight: 1 },
  fBody: { fontSize: 16.5, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 540 },

  rolesTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)', margin: '8px 0 24px' },
  grid: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 22 },
  card: { flex: '0 1 calc((100% - 66px) / 4)', boxSizing: 'border-box', background: 'var(--paper)', borderRadius: 20, border: '1px solid var(--line)', overflow: 'hidden', display: 'flex', flexDirection: 'column' },
  photo: { width: '100%', aspectRatio: '1 / 1', objectFit: 'cover', objectPosition: 'center 22%', display: 'block', background: 'var(--line)' },
  photoFallback: { width: '100%', aspectRatio: '1 / 1', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--ink)', color: 'var(--yellow)', fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 44, letterSpacing: '-0.03em' },
  cardBody: { padding: '20px 22px 24px', display: 'flex', flexDirection: 'column', gap: 4 },
  cName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 20, color: 'var(--ink)', letterSpacing: '-0.025em', lineHeight: 1.1 },
  cRole: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginTop: 4, marginBottom: 6 },
  cBody: { fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.6 },

  footnote: { marginTop: 40, fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 15, color: 'var(--muted)', textAlign: 'center', maxWidth: 720, margin: '40px auto 0', lineHeight: 1.6 },
};

const TEAM = [
  { mono: 'JW', name: 'Jack Whettingsteel', role: 'Chief Executive Officer', img: 'assets/team-jack-whettingsteel.jpg', body: 'Ex-agency founder. Co-founded HelpBnk with Simon and now runs the whole group as CEO.' },
  { mono: 'CC', name: 'Callum Church', role: 'Chief Creative Officer', img: 'assets/team-callum-church.jpg', body: 'Grew Simon’s brand from 6k to 22M+ followers and leads creative across the group.' },
  { mono: 'TA', name: 'Tobias Allen', role: 'Chief Marketing Officer', img: 'assets/team-tobias-allen.jpg', body: 'Ex-marketing director at Alex Hormozi’s Acquisition.com. Leads brand and performance marketing.' },
  { mono: 'GD', name: 'Guy Davis', role: 'Chief Financial Officer', img: 'assets/team-guy-davis.jpg', body: 'Ex-fund manager who built and sold his own wealth-management firm. CFA charterholder and a 40-under-40 in asset management. Leads finance, legal and structure.' },
  { mono: 'JD', name: 'Jonny Davies', role: 'Chief Revenue Officer', img: 'assets/team-jonny-davies.jpg', body: 'Ex-creator manager to the likes of Max Klymenko, Ali Abdaal and Nischa. Leads revenue and partnerships across the group.' },
  { mono: 'GP', name: 'Guy Parsonage', role: 'Chief Growth Officer', img: 'assets/team-guy-parsonage.jpg', body: 'Ex-CEO of Fluid (sold to PwC), then a PwC Partner and Chief Experience Officer. Leads international growth, new markets and government partnerships.' },
  { mono: 'DL', name: 'David Lynch', role: 'Chief Technology Officer', img: 'assets/team-david-lynch.jpg', body: 'Ex-MD at DBS China, Standard Chartered and GM. Leads technology and the platforms the group runs on.' },
  { mono: 'AM', name: 'Adam Moss', role: 'CEO, HelpBnk', img: 'assets/team-adam-moss.jpg', body: 'Co-founded and now leads HelpBnk as CEO: free help to start a business, and a community of hundreds of thousands of founders.' },
  { mono: 'CS', name: 'Chloe Simon', role: 'Head of Operations', img: 'assets/team-chloe-simon.jpg', body: 'Keeps the group running day to day: people, process and operations across every company.' },
  { mono: 'AS', name: 'Adam Smith', role: 'Head of Community', img: 'assets/team-adam-smith.jpg', body: 'Exited founder and HelpBnk co-founder. Now builds and looks after the community across the group.' },
  { mono: 'HG', name: 'Helen Griffiths', role: 'Head of Design', img: 'assets/team-helen-griffiths.jpg', body: 'Co-founded Fluid (sold to PwC) and was a partner at Nest.VC. Leads design across the group.' },
  { mono: 'DK', name: 'Dirk Kollmann', role: 'Senior Partner & Investor', img: 'assets/team-dirk-kollmann.jpg', body: 'Senior partner and investor in the group, backing the companies and supporting growth across the portfolio.' },
];

function TeamSection() {
  return (
    <section id="team" style={teamStyles.wrap}>
      <div className="container">
        <div style={teamStyles.head}>
          <div style={teamStyles.chapterLabel}>● The people</div>
          <h2 style={teamStyles.chapter}>The team building Dream.</h2>
          <p style={teamStyles.dek}>
            A group of operators, creators and investors behind one mission: help people chase their dream through entrepreneurship.
          </p>
        </div>

        <div style={teamStyles.founder} className="team-founder">
          <img src="assets/simon-portrait.jpg" alt="Simon Squibb" style={teamStyles.founderImg} />
          <div>
            <div style={teamStyles.fRole}>● Co-founder & Chairman</div>
            <div style={teamStyles.fName}>Simon Squibb</div>
            <p style={teamStyles.fBody}>
              Co-founder of the Dream Group. Entrepreneur, investor and the most-followed business personality in the UK. Author of the #1 Sunday Times bestseller What's Your Dream? and the face of the #GiveWithoutTake movement. He started Dream to give people the help he wishes he'd had.
            </p>
          </div>
        </div>

        <div style={teamStyles.rolesTitle}>● The leadership team</div>
        <div style={teamStyles.grid} className="team-grid">
          {TEAM.map((d) => (
            <div key={d.mono} style={teamStyles.card} className="team-card">
              {d.img
                ? <img src={d.img} alt={d.name} style={teamStyles.photo} className="team-photo" />
                : <div style={teamStyles.photoFallback}>{d.mono}</div>}
              <div style={teamStyles.cardBody} className="team-cardbody">
                <div style={teamStyles.cName}>{d.name}</div>
                <div style={teamStyles.cRole}>{d.role}</div>
                <div style={teamStyles.cBody}>{d.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
      .team-card { transition: transform .25s ease, box-shadow .25s ease; }
      .team-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0,0,0,.10); }
      .team-photo { transition: transform .45s ease; }
      .team-card:hover .team-photo { transform: scale(1.045); }
      @media (max-width: 1100px) {
        .team-card { flex-basis: calc((100% - 44px) / 3) !important; }
      }
      @media (max-width: 980px) {
        .team-founder { grid-template-columns: 1fr !important; gap: 24px !important; }
      }
      @media (max-width: 760px) {
        .team-card { flex-basis: calc((100% - 22px) / 2) !important; }
      }
      @media (max-width: 460px) {
        .team-grid { gap: 12px !important; }
        .team-card { flex-basis: calc((100% - 12px) / 2) !important; }
        .team-cardbody { padding: 12px 13px 16px !important; }
      }`}</style>
    </section>
  );
}