/* ABOUT TEAM — founders + extended */

function AboutTeam() {
  const isMobile = useWindowWidth() < 768;

  const founders = [
    { name: 'Yashdeep Tehlan',  role: 'Co-Founder & Business Development Director', photo: 'Yashdeep.jpeg', hue: 200, quote: '"Growth without trust is just churn in disguise. We pick partners we\'d want to grab coffee with in 5 years."' },
    { name: 'Vishal Choudhary', role: 'Co-Founder & Head of Growth Marketing',       photo: 'Vishal.jpeg',   hue: 140, quote: '"Most agencies confuse motion with progress. We optimize for compounding outcomes — the kind that look boring on a graph until they don\'t."' },
    { name: 'Tanuj Rajput',     role: 'Co-Founder & E-com Solutions Architect',      photo: 'Tanuj.jpeg',    hue: 30,  quote: '"Code is a leverage tool. If a six-line script saves a media buyer ten hours a week, that\'s what we build before adding another headcount."' },
  ];


  return (
    <section data-screen-label="04 Team" id="team" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <SectionHeader
          eyebrow="The people"
          title={<>The team that <span className="accent">does the work.</span></>}
          lead="No outsourced juniors. No anonymous account managers. Every name below works on your business directly."
          align="left"
        />

        {/* Founders */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 18 }}>
          {founders.map((f, i) => (
            <Reveal key={f.name} delay={i * 80}>
              <FounderCard f={f} />
            </Reveal>
          ))}
        </div>

        {/* Stats row */}
        <div style={{ marginTop: 40, padding: isMobile ? 20 : 24, background: 'var(--ink)', color: 'white', borderRadius: 18, display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: isMobile ? 20 : 24 }}>
          {[
            ['7.4 yr', 'Average experience'],
            ['18',     'Languages spoken'],
            ['6',      'Continents covered'],
            ['100%',   'Senior-only execution'],
          ].map(([v, l], i) => (
            <div key={l} style={{ display: 'flex', flexDirection: 'column', gap: 6, borderBottom: isMobile && i < 2 ? '1px solid rgba(255,255,255,.08)' : 'none', paddingBottom: isMobile && i < 2 ? 20 : 0 }}>
              <span className="num" style={{ fontSize: 36, fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1 }}>{v}</span>
              <span className="mono-label" style={{ color: 'rgba(255,255,255,.55)' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FounderCard({ f }) {
  return (
    <div style={{
      background: 'white', border: '1px solid var(--hairline-2)',
      borderRadius: 20, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{
        aspectRatio: '4 / 5',
        borderRadius: 14, overflow: 'hidden',
        background: `linear-gradient(160deg, oklch(0.7 0.04 ${f.hue}), oklch(0.45 0.04 ${f.hue}))`,
        position: 'relative',
      }}>
        <img
          src={`images/${f.photo}`}
          alt={f.name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }}
        />
        <div style={{ position: 'absolute', top: 12, right: 12, padding: '4px 10px', background: 'rgba(0,0,0,.4)', backdropFilter: 'blur(8px)', borderRadius: 999, color: 'white', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>
          CO-FOUNDER
        </div>
      </div>
      <div style={{ padding: '0 8px 6px' }}>
        <div style={{ fontSize: 17, fontWeight: 600 }}>{f.name}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 4 }}>{f.role}</div>
        <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 14, marginBottom: 0, paddingTop: 14, borderTop: '1px dashed var(--hairline)' }}>{f.quote}</p>
      </div>
    </div>
  );
}

function ExtendedCard({ m }) {
  return (
    <div style={{
      background: 'white', border: '1px solid var(--hairline-2)',
      borderRadius: 14, padding: 14,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        flexShrink: 0, width: 48, height: 48, borderRadius: 10, overflow: 'hidden',
        background: `linear-gradient(160deg, oklch(0.75 0.04 ${m.hue}), oklch(0.45 0.04 ${m.hue}))`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: `oklch(0.92 0.02 ${m.hue})`,
        fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 16,
      }}>
        {m.name.split(' ').map(w => w[0]).slice(0,2).join('')}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.name}</div>
        <div style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.role}</div>
      </div>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--green-deep)', padding: '3px 7px', background: 'var(--green-soft)', borderRadius: 999, whiteSpace: 'nowrap', flexShrink: 0 }}>
        {m.dept}
      </span>
    </div>
  );
}

window.AboutTeam = AboutTeam;