// how.jsx — 4 kroki wdrożenia
function HowItWorks() {
  const steps = [
    {
      n: '01',
      day: 'Dzień 1–3',
      title: 'Audyt asortymentu i sprzedaży',
      desc: 'Wpadamy do sklepu, przeglądamy ofertę, ceny, dotychczasowe zamówienia. Mapujemy, co naprawdę się sprzedaje i gdzie ucieka marża.',
      tags: ['Wywiad z obsługą', 'Top 100 SKU', 'Analiza wycen'],
    },
    {
      n: '02',
      day: 'Dzień 4–14',
      title: 'Budujemy Twój sklep online',
      desc: 'Sklep internetowy zintegrowany z Twoim magazynem i cenami. Wygląda jak Twoja marka. Ma katalog, koszyk, wyceny zestawów i dosprzedaż.',
      tags: ['Domena', 'Płatności', 'Integracja kasy / WAPRO / Subiekt'],
    },
    {
      n: '03',
      day: 'Dzień 15–25',
      title: 'Automatyzacja obsługi',
      desc: 'AI-asystent pisze odpowiedzi, generuje wyceny, dopina brakujące pozycje do zamówień. Twój zespół widzi w panelu tylko to, co wymaga decyzji.',
      tags: ['Auto-wyceny', 'Asystent AI', 'Dosprzedaż', 'Powiadomienia'],
    },
    {
      n: '04',
      day: 'Dzień 26–30',
      title: 'Start sprzedaży + szkolenie',
      desc: 'Ruszamy. Szkolimy zespół (2h), zostajemy na 90 dni z wsparciem i optymalizacją. Po pierwszym miesiącu — raport co działa, co tuningujemy.',
      tags: ['Onboarding 2h', '90 dni opieki', 'Raport KPI'],
    },
  ];

  return (
    <section id="how" className="how">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Jak to działa</Eyebrow>
          <h2>30 dni i&nbsp;ruszacie online.<br/>Bez tracenia tego, co działa stacjonarnie.</h2>
          <p>Nie zmieniamy Twojego modelu sprzedaży. Nadbudowujemy go o&nbsp;drugą zmianę — taką, która działa, gdy sklep jest zamknięty.</p>
        </div>

        <div className="how-grid">
          {steps.map((s, i) => (
            <article key={s.n} className="how-card" style={{ animationDelay: `${i*80}ms` }}>
              <div className="how-card-head">
                <div className="how-card-num">{s.n}</div>
                <div className="how-card-day">{s.day}</div>
              </div>
              <h3 className="how-card-title" dangerouslySetInnerHTML={{__html: s.title}}/>
              <p className="how-card-desc" dangerouslySetInnerHTML={{__html: s.desc}}/>
              <div className="how-card-tags">
                {s.tags.map(t => <span key={t} className="how-tag">{t}</span>)}
              </div>
              {i < steps.length - 1 && <div className="how-card-arrow" aria-hidden>→</div>}
            </article>
          ))}
        </div>

        <div className="how-cta">
          <div>
            <div className="how-cta-eyebrow">Gwarancja</div>
            <div className="how-cta-text">
              Jeśli w 90 dni od startu nie zwiększymy Twojej sprzedaży o&nbsp;min. <strong>15%</strong> — zwracamy 100% wdrożenia.
            </div>
          </div>
          <a className="btn btn-primary btn-lg" href="#contact">
            Umów rozmowę <ArrowRight />
          </a>
        </div>
      </div>

      <style>{`
        .how{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
        .how-grid{
          display:grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        .how-card{
          position: relative;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          padding: 24px;
          display:flex; flex-direction: column;
          transition: border-color .25s, transform .25s var(--ease-out);
          animation: reveal .7s var(--ease-out) both;
        }
        .how-card:hover{
          border-color: var(--brand);
          transform: translateY(-3px);
        }
        .how-card-head{
          display:flex; align-items:center; justify-content:space-between;
          margin-bottom: 22px;
        }
        .how-card-num{
          font-family: var(--font-display);
          font-size: 30px;
          font-weight: 600;
          color: var(--brand);
          letter-spacing: -0.03em;
          line-height: 1;
        }
        .how-card-day{
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: var(--ink-3);
          padding: 4px 8px;
          border: 1px solid var(--line);
          border-radius: 999px;
        }
        .how-card-title{
          font-size: 19px;
          line-height: 1.25;
          margin-bottom: 12px;
        }
        .how-card-desc{
          font-size: 13.5px;
          color: var(--ink-2);
          line-height: 1.55;
          flex: 1;
          margin-bottom: 18px;
        }
        .how-card-tags{
          display:flex; flex-wrap: wrap; gap: 6px;
        }
        .how-tag{
          font-size: 11.5px;
          padding: 4px 10px;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: 999px;
          color: var(--ink-2);
        }
        .how-card-arrow{
          position: absolute;
          top: 30px; right: -16px;
          width: 32px; height: 32px;
          background: var(--bg);
          border: 1px solid var(--line);
          border-radius: 50%;
          color: var(--brand);
          display: grid; place-items: center;
          font-size: 16px;
          z-index: 2;
        }

        .how-cta{
          margin-top: 56px;
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 28px 32px;
          display:flex; align-items:center; justify-content: space-between;
          gap: 24px;
          position: relative;
          overflow: hidden;
        }
        .how-cta::after{
          content: '';
          position:absolute; right:-80px; top:-80px;
          width: 240px; height: 240px;
          background: radial-gradient(circle, var(--brand), transparent 70%);
          opacity: 0.12;
          pointer-events: none;
        }
        .how-cta-eyebrow{
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--brand);
          margin-bottom: 8px;
        }
        .how-cta-text{
          font-family: var(--font-display);
          font-size: clamp(18px, 1.7vw, 22px);
          line-height: 1.35;
          max-width: 640px;
          letter-spacing: -0.01em;
        }
        .how-cta-text strong{ color: var(--brand); font-weight: 600; }

        @media (max-width: 1024px){
          .how-grid{ grid-template-columns: repeat(2, 1fr); }
          .how-card-arrow{ display: none; }
        }
        @media (max-width: 640px){
          .how-grid{ grid-template-columns: 1fr; }
          .how-cta{ flex-direction: column; align-items: flex-start; padding: 24px; }
        }
      `}</style>
    </section>
  );
}

window.HowItWorks = HowItWorks;