// Team — editorial grid with founder featured + coach grid
function Team() {
  const founder = { name: 'Eric Deeran', role: 'CEO / Founder', photo: './assets/team/eric.webp' };
  const coaches = [
    { name: 'Ethan Sebok',   role: 'COO / Sales Coach',          photo: './assets/team/ethan.webp' },
    { name: 'Hakeem Bokhari', role: 'Business Coach',             photo: './assets/team/hakeem.webp' },
    { name: 'Evan Nitroy',    role: 'Business Coach',             photo: './assets/team/evan-nitroy.webp' },
    { name: 'Evan Andrews',   role: 'CRM & Inbound Leads Coach',  photo: './assets/team/evan-andrews.webp' },
    { name: 'Dan Deleon',     role: 'Community Sales Leader',     photo: './assets/team/dan.webp' },
    { name: 'Linda Carter',   role: 'Administrative Internal',    photo: './assets/team/linda.webp' },
  ];
  return (
    <section data-mf="section" style={{
      background: 'linear-gradient(180deg, #0A0608 0%, #15070B 100%)',
      padding: '120px 44px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div data-mf="team-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 40, marginBottom: 64, flexWrap: 'wrap' }}>
          <div>
            <SectionMark num="03" tone="red">The Team</SectionMark>
            <h2 style={{
              fontFamily: 'Poppins', fontWeight: 800,
              fontSize: 'clamp(40px, 4.8vw, 68px)',
              lineHeight: 1, letterSpacing: '-0.025em',
              margin: '20px 0 0', color: '#fff',
            }}>
              Real operators.<br/>
              <span style={{ color: '#E8123C' }}>Not career consultants.</span>
            </h2>
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.62)', maxWidth: 360, margin: 0 }}>
            Every coach on our team has scaled their own agency past six figures before teaching yours how to do the same.
          </p>
        </div>

        <div data-mf="team-grid" style={{
          display: 'grid', gridTemplateColumns: '1.2fr 2fr', gap: 22,
        }}>
          {/* Founder feature card */}
          <div data-mf="team-founder" style={{
            position: 'relative', borderRadius: 28, overflow: 'hidden',
            background: '#1C0810', border: '1px solid rgba(255,255,255,0.08)',
            minHeight: 480, padding: 32,
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          }}>
            <img src={founder.photo} alt={`${founder.name}, ${founder.role} at Master Filmmaker`}
              width={1170} height={1170} loading="lazy" decoding="async"
              style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center 20%',
              }}/>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(10,6,8,0.0) 35%, rgba(10,6,8,0.55) 65%, rgba(10,6,8,0.96) 100%)',
            }}/>
            <div style={{ position: 'relative' }}>
              <div style={{
                display: 'inline-block', padding: '5px 12px',
                background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.3)',
                borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: '0.14em',
                color: '#fff', marginBottom: 14,
              }}>FOUNDER</div>
              <h3 style={{
                fontFamily: 'Poppins', fontWeight: 800, fontSize: 36,
                letterSpacing: '-0.02em', margin: '0 0 4px', color: '#fff',
              }}>{founder.name}</h3>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.85)', marginBottom: 18 }}>
                {founder.role}
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)', margin: 0, maxWidth: 340 }}>
                Built a multi-seven-figure agency before coaching agency owners to do the same. Still runs client work every week.
              </p>
            </div>
          </div>

          {/* Coach grid */}
          <div data-mf="team-coaches" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
          }}>
            {coaches.map(c => (
              <div key={c.name} style={{
                background: '#1C0810', border: '1px solid rgba(255,255,255,0.08)',
                borderRadius: 20, overflow: 'hidden',
                transition: 'all 220ms cubic-bezier(0.22, 1, 0.36, 1)',
              }}
              onMouseEnter={e => {
                e.currentTarget.style.borderColor = 'rgba(232,18,60,0.4)';
                e.currentTarget.style.transform = 'translateY(-3px)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)';
                e.currentTarget.style.transform = 'translateY(0)';
              }}
              >
                <div style={{
                  aspectRatio: '1/1', position: 'relative', overflow: 'hidden',
                  background: '#0A0608',
                }}>
                  <img src={c.photo} alt={`${c.name}, ${c.role} at Master Filmmaker`}
                    width={1200} height={1200} loading="lazy" decoding="async"
                    style={{
                      width: '100%', height: '100%', objectFit: 'cover',
                      objectPosition: 'center 25%',
                      transition: 'transform 320ms cubic-bezier(0.22, 1, 0.36, 1)',
                    }}
                    onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.04)'}
                    onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
                  />
                  <div style={{
                    position: 'absolute', top: 10, right: 10,
                    width: 22, height: 22, borderRadius: '50%',
                    background: '#E8123C', border: '2px solid #0A0608',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
                  }}/>
                </div>
                <div style={{ padding: '14px 16px 18px' }}>
                  <div style={{
                    fontFamily: 'Poppins', fontWeight: 700, fontSize: 15, color: '#fff',
                    marginBottom: 2,
                  }}>{c.name}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', fontWeight: 500 }}>
                    {c.role}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Team = Team;