/* TEAM */

function Team() {
  const isMobile = useWindowWidth() < 768;
  const team = [
    { name: 'Yashdeep Tehlan',  role: 'Co-Founder & Business Development Director', photo: 'Yashdeep.jpeg' },
    { name: 'Vishal Choudhary', role: 'Co-Founder & Head of Growth Marketing',       photo: 'Vishal.jpeg'   },
    { name: 'Tanuj Rajput',     role: 'Co-Founder & E-com Solutions Architect',      photo: 'Tanuj.jpeg'    },
  ];

  return (
    <section data-screen-label="13 Team" id="team" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 40 }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>Our team</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Meet the team</h2>
          </div>
          <p className="lead">
            We build. We market. We lift. Performance, design and strategy — all in sync.<br />
            <strong style={{ color: 'var(--ink)' }}>Ecomlifters — your unfair advantage in e-commerce.</strong>
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)', gap: 20 }}>
          {team.map((m, i) => (
            <Reveal key={m.name} delay={i * 100}>
              <PersonCard m={m} />
            </Reveal>
          ))}
        </div>

        {/* Extended team strip */}
        <div style={{ marginTop: 32, padding: '20px 24px', background: 'white', border: '1px solid var(--hairline-2)', borderRadius: 16, display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ display: 'flex' }}>
              {['Maya', 'Ali', 'Ben Bo', 'Chika', 'Dax', 'Eva F'].map((n, i) => (
                <div key={n} style={{ marginLeft: i ? -8 : 0, zIndex: 10 - i }}>
                  <Avatar name={n} size={32} hue={i * 60} />
                </div>
              ))}
            </div>
            <span style={{ fontSize: 14 }}>
              <strong>+ 19 senior specialists</strong>{' '}
              <span style={{ color: 'var(--muted)' }}>· designers, growth engineers, copywriters, media buyers, lifecycle pros</span>
            </span>
          </div>
          <a href="/about.html" className="ulink" style={{ color: 'var(--green-deep)', fontWeight: 500, fontSize: 14 }}>
            Meet the whole team <Icon.Arrow size={13} />
          </a>
        </div>
      </div>
    </section>
  );
}

function PersonCard({ m }) {
  return (
    <div style={{
      background: 'white', border: '1px solid var(--hairline-2)',
      borderRadius: 18, padding: 14,
      transition: 'transform .35s var(--ease), box-shadow .35s var(--ease)',
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 30px 60px -30px rgba(10,15,12,.18)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
      <div style={{
        aspectRatio: '4 / 5',
        borderRadius: 12, overflow: 'hidden',
        background: '#1a1a1a',
        position: 'relative',
      }}>
        <img
          src={`images/${m.photo}`}
          alt={m.name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }}
        />
        {/* Top-right badge */}
        <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: '14px 6px 4px 6px', textAlign: 'center' }}>
        <div style={{ fontSize: 15, fontWeight: 600 }}>{m.name}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 4 }}>{m.role}</div>
      </div>
    </div>
  );
}

window.Team = Team;