/* global React, Icon */

// ---------------------------------------------------------------- Who you'll work with
const Team = () => {
  const people = [
    {
      img: (window.__resources && window.__resources.calin) || 'assets/calin.jpg',
      name: 'Calin Yablonski',
      pron: 'pronounced "Colin"',
      role: 'Founder & Lead Strategist',
      bio: "Calin is the Founder and Lead Strategist of Inbound Legal, a boutique agency that scales law firms with SEO, Google Ads, and high-converting WordPress websites. Over nearly 20 years he has worked behind the scenes with some of North America's most successful firms, including serving as CMO of Strategic Criminal Defence, Canada's largest criminal defence firm. He founded his first legal marketing agency in 2009, sold it in 2020, and bought it back in 2025.",
      featured: 'His work has been featured by Clio, LawPay, CARET Legal, and The National Law Review.',
      stats: [
        { v: '20 yrs', s: 'In legal marketing' },
        { v: 'CMO', s: "Of Canada's largest criminal defence firm" },
      ],
    },
    {
      img: (window.__resources && window.__resources.abe) || 'assets/abe.jpg',
      name: 'Abe Dyck',
      pron: null,
      role: 'Partner & PPC Strategist',
      bio: 'Abe is a Partner and PPC Strategist at Inbound Legal. Over more than seven years in digital marketing, he has focused on one thing: growing law firms through paid search that actually turns a profit. He brings hard-won pattern recognition to every campaign he runs.',
      featured: null,
      stats: [
        { v: '$6M+', s: 'In ad spend managed' },
        { v: '7+ yrs', s: 'In paid search for firms' },
      ],
    },
  ];

  return (
    <section id="team" className="section">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="eyebrow">Who you'll work with</div>
          <h2 style={{
            fontSize: 'clamp(30px, 3.4vw, 44px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.01em', marginTop: 12, color: 'var(--ink-black)',
          }}>
            A senior strategist on every account. No juniors.
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--gray-600)', marginTop: 16 }}>
            When you sign with Inbound Legal, you work directly with the people whose names are on the door, not a rotating cast of account managers.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {people.map(p => (
            <article key={p.name} style={{
              background: '#fff', borderRadius: 16, overflow: 'hidden',
              boxShadow: 'var(--shadow-card)',
              display: 'grid', gridTemplateColumns: '220px 1fr',
            }}>
              <div style={{ position: 'relative', background: 'var(--gray-100)' }}>
                <img src={p.img} alt={p.name} style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%',
                  objectFit: 'cover', objectPosition: 'center top', display: 'block',
                }} />
              </div>

              <div style={{ padding: '28px 28px 30px', display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div>
                  <h3 style={{ fontSize: 24, fontWeight: 700, color: 'var(--ink-black)', lineHeight: 1.15 }}>
                    {p.name}
                  </h3>
                  {p.pron && <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--gray-600)', marginTop: 3, whiteSpace: 'nowrap' }}>({p.pron})</div>}
                  <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7, color: 'var(--brand-blue)', fontWeight: 600, fontSize: 14 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--brand-blue)' }} />
                    {p.role}
                  </div>
                </div>

                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--gray-900)' }}>{p.bio}</p>

                {p.featured && (
                  <p style={{ fontSize: 13, lineHeight: 1.55, color: 'var(--gray-600)', fontStyle: 'italic' }}>{p.featured}</p>
                )}

                <div style={{ display: 'flex', gap: 28, marginTop: 'auto', paddingTop: 8 }}>
                  {p.stats.map((st, i) => (
                    <div key={i} style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--brand-blue)', lineHeight: 1, letterSpacing: '-0.02em' }}>{st.v}</div>
                      <div style={{ fontSize: 12, color: 'var(--gray-600)', marginTop: 5, lineHeight: 1.35 }}>{st.s}</div>
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Team });