// about.jsx — o nas / zespół
function About() {
  const team = [
    { name: 'Karol Mierzwa', role: 'CEO · ex-Allegro / 12 lat e-commerce', color: '#C8FF00' },
    { name: 'Aneta Borecka', role: 'Head of Delivery · 80+ wdrożeń', color: '#FF5C2E' },
    { name: 'Tomek Wojtczak', role: 'Lead Engineer · architekt integracji', color: '#5BA3FF' },
    { name: 'Paulina Lis', role: 'AI · automatyzacje, asystenci', color: '#F5F5F2' },
  ];

  return (
    <section id="about" className="about">
      <div className="container about-grid">
        <div className="about-left">
          <Eyebrow>O nas</Eyebrow>
          <h2 className="about-h2">
            Jesteśmy <em>byłymi sprzedawcami</em> — nie agencją interaktywną.
          </h2>
          <p>
            Gorillę zbudowali ludzie, którzy sprzedawali farby, płytki i&nbsp;narzędzia po drugiej stronie lady.
            Wiemy, jak naprawdę działa sklep stacjonarny i&nbsp;dlaczego do tej pory żaden "sklep internetowy w&nbsp;tydzień" nie zadziałał.
          </p>
          <p>
            Pracujemy w&nbsp;modelu <strong className="ink">audyt → wdrożenie → opieka</strong>.
            Nie zostawiamy Cię z&nbsp;pustym panelem. Zostajemy na 90 dni, mierzymy KPI, optymalizujemy. Potem decydujesz, czy chcesz nas dalej.
          </p>
          <div className="about-bullets">
            <div><strong className="ink">7 lat</strong><span>doświadczenia w e-commerce B2B i&nbsp;B2C</span></div>
            <div><strong className="ink">120+</strong><span>wdrożonych sklepów stacjonarnych</span></div>
            <div><strong className="ink">14</strong><span>osób w zespole · Rzeszów + zdalnie</span></div>
          </div>
        </div>

        <div className="about-right">
          <div className="about-team">
            {team.map((p, i) => (
              <div key={i} className="about-person">
                <div className="about-avatar" style={{ background: p.color, color: p.color === '#F5F5F2' ? '#0B0B0E' : '#0B0B0E' }}>
                  {p.name.split(' ').map(n=>n[0]).join('')}
                </div>
                <div>
                  <div className="about-name">{p.name}</div>
                  <div className="about-role">{p.role}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="about-card">
            <div className="about-card-num">14 dni</div>
            <div className="about-card-label">
              średni czas od pierwszej rozmowy do podpisania umowy.
              <br/><span className="muted">Bo nie sprzedajemy demo.</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .about-grid{
          display:grid; grid-template-columns: 1.2fr 1fr;
          gap: 64px; align-items: start;
        }
        .about-h2{
          font-size: clamp(32px, 4.5vw, 56px);
          margin: 18px 0 22px;
        }
        .about-h2 em{
          font-style: italic;
          font-family: 'Instrument Serif', serif;
          font-weight: 400;
          color: var(--brand);
        }
        .about-left p{
          color: var(--ink-2);
          font-size: 16px;
          line-height: 1.6;
          max-width: 540px;
          margin-bottom: 16px;
        }
        .about-left p .ink{ color: var(--ink); font-weight: 500; }
        .about-bullets{
          display:grid; grid-template-columns: repeat(3, 1fr);
          gap: 16px; margin-top: 32px;
          padding-top: 28px;
          border-top: 1px solid var(--line);
        }
        .about-bullets > div{ display:flex; flex-direction: column; }
        .about-bullets strong{
          font-family: var(--font-display);
          font-size: 32px; font-weight: 600;
          letter-spacing: -0.03em; line-height: 1;
          margin-bottom: 6px;
        }
        .about-bullets span{
          font-size: 12.5px; color: var(--ink-3); line-height: 1.4;
        }

        .about-team{
          display:flex; flex-direction:column; gap: 8px;
          margin-bottom: 16px;
        }
        .about-person{
          display:flex; align-items: center; gap: 16px;
          padding: 14px 16px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius);
        }
        .about-avatar{
          width: 44px; height: 44px; border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--font-display);
          font-weight: 600; font-size: 14px;
          flex-shrink: 0;
        }
        .about-name{ font-size: 14.5px; }
        .about-role{ font-size: 12.5px; color: var(--ink-3); }

        .about-card{
          padding: 24px 28px;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
        }
        .about-card-num{
          font-family: var(--font-display);
          font-size: 48px; font-weight: 600;
          letter-spacing: -0.04em; line-height: 1;
          color: var(--brand);
          margin-bottom: 12px;
        }
        .about-card-label{
          font-size: 14px; color: var(--ink-2);
          line-height: 1.5;
        }

        @media (max-width: 980px){
          .about-grid{ grid-template-columns: 1fr; gap: 48px; }
          .about-bullets{ grid-template-columns: 1fr; gap: 12px; padding-top: 22px; }
          .about-bullets > div{ flex-direction: row; align-items: baseline; gap: 16px; }
          .about-bullets strong{ font-size: 28px; min-width: 100px; }
        }
      `}</style>
    </section>
  );
}

window.About = About;