// features.jsx — co dostajesz / funkcjonalności (bento)
function Features() {
  return (
    <section id="features" className="features">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Co dostajesz</Eyebrow>
          <h2>Sklep online, który <em>działa za Ciebie</em>.<br/>Nawet w&nbsp;sobotę o&nbsp;22:00.</h2>
          <p>Gorilla to nie szablon ze sklepu z&nbsp;szablonami. To system zaprojektowany pod sposób, w&nbsp;jaki naprawdę sprzedają sklepy stacjonarne — przez rozmowę, doradztwo i&nbsp;zestawy.</p>
        </div>

        <div className="bento">

          {/* row 1 — big card */}
          <article className="bento-card big">
            <div className="bento-tag">Asystent AI</div>
            <h3 className="bento-title">Odpowiada na zapytania jak Twój najlepszy handlowiec.</h3>
            <p className="bento-desc">Wytrenowany na Twojej ofercie, cennikach i&nbsp;historii zamówień. Dosprzedaje, zbiera leady, generuje wyceny — 24/7.</p>
            <FeatureChatMock/>
          </article>

          <article className="bento-card">
            <div className="bento-tag">Auto-wyceny</div>
            <h3 className="bento-title">Pełne zestawy, zero braków.</h3>
            <p className="bento-desc">Klient wybiera płytki — system dolicza klej, fugę, profile, listwy. Wycena pełna, marża na swoim miejscu.</p>
            <FeatureSetMock/>
          </article>

          {/* row 2 */}
          <article className="bento-card">
            <div className="bento-tag">Integracje</div>
            <h3 className="bento-title">Łączy się z&nbsp;tym, co masz.</h3>
            <p className="bento-desc">Subiekt, WAPRO, Comarch, kasa fiskalna, magazyn. Bez przepisywania asortymentu z&nbsp;palca.</p>
            <div className="bento-logos">
              {['Subiekt','WAPRO','Comarch','Optima','iFirma','InPost','DPD','Przelewy24'].map(l=>(
                <div key={l} className="bento-logo">{l}</div>
              ))}
            </div>
          </article>

          <article className="bento-card">
            <div className="bento-tag">Panel właściciela</div>
            <h3 className="bento-title">Wiesz, ile zarobiłeś — bez Excela.</h3>
            <p className="bento-desc">Dzienny obrót, marża, top produkty, źródła ruchu. Liczby, na które warto patrzeć — bez tych, które tylko wyglądają.</p>
            <FeatureKpiMock/>
          </article>

          <article className="bento-card">
            <div className="bento-tag">Identyfikacja klientów</div>
            <h3 className="bento-title">Stały klient = inna cena.</h3>
            <p className="bento-desc">Rozpoznaje powracających, przypina ich do umów ramowych, pokazuje rabaty kontraktowe. Tak jak u&nbsp;Ciebie w&nbsp;sklepie.</p>
            <FeatureCustomerMock/>
          </article>

          {/* row 3 — wide */}
          <article className="bento-card wide">
            <div className="bento-tag">Dosprzedaż</div>
            <h3 className="bento-title">+12% wartości koszyka średnio — bez nachalności.</h3>
            <p className="bento-desc">AI proponuje brakujące w&nbsp;zestawie pozycje na podstawie tysięcy podobnych zamówień. Klient widzi sugestię, Ty widzisz marżę.</p>
            <FeatureUpsellMock/>
          </article>

        </div>
      </div>

      <style>{`
        .features .section-head h2 em{
          font-style: normal;
          color: var(--brand);
        }
        .bento{
          display:grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 16px;
        }
        .bento-card{
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 28px;
          display:flex; flex-direction:column;
          grid-column: span 2;
          transition: border-color .25s, background .25s, transform .3s var(--ease-out);
          position: relative;
          overflow: hidden;
        }
        .bento-card.big{ grid-column: span 4; grid-row: span 1; }
        .bento-card.wide{ grid-column: span 6; }
        .bento-card:hover{
          border-color: var(--brand);
          transform: translateY(-2px);
        }
        .bento-card:hover .bento-tag{ color: var(--brand); border-color: var(--brand); }

        .bento-tag{
          align-self: flex-start;
          font-family: var(--font-mono);
          font-size: 10.5px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          padding: 5px 10px;
          border: 1px solid var(--line);
          border-radius: 999px;
          color: var(--ink-3);
          margin-bottom: 18px;
          transition: color .25s, border-color .25s;
        }
        .bento-title{
          font-size: clamp(20px, 1.6vw, 24px);
          line-height: 1.2;
          letter-spacing: -0.02em;
          margin-bottom: 8px;
        }
        .bento-desc{
          font-size: 14px;
          color: var(--ink-2);
          line-height: 1.55;
          margin-bottom: 22px;
        }
        .bento-card.big{ min-height: 380px; }

        .bento-logos{
          display:grid; grid-template-columns: repeat(4, 1fr);
          gap: 8px; margin-top: auto;
        }
        .bento-logo{
          font-family: var(--font-mono);
          font-size: 12px;
          padding: 14px 8px;
          text-align:center;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: 10px;
          color: var(--ink-2);
        }
        .bento-logo:hover{ color: var(--ink); border-color: var(--line-2); }

        @media (max-width: 1024px){
          .bento{ grid-template-columns: repeat(2, 1fr); }
          .bento-card, .bento-card.big, .bento-card.wide{ grid-column: span 2; }
        }
        @media (max-width: 640px){
          .bento{ grid-template-columns: 1fr; }
          .bento-card, .bento-card.big, .bento-card.wide{ grid-column: span 1; }
          .bento-card{ padding: 22px; }
        }
      `}</style>
    </section>
  );
}

/* ────────── feature mocks ────────── */

function FeatureChatMock() {
  return (
    <div className="fcm">
      <div className="fcm-msg client">
        <div className="fcm-bubble">Cześć, potrzebuję płytek 60×60 na łazienkę ok. 8m². Co macie i&nbsp;ile to wyjdzie?</div>
        <div className="fcm-time">22:14</div>
      </div>
      <div className="fcm-msg bot">
        <div className="fcm-bubble">
          Cześć! Na 8 m² polecam <strong>Stargres Gres Soft 60×60</strong> — 79 zł/m², w&nbsp;magazynie 18 m².
          <br/>Do tego klej (2 worki), fuga (1 op.), profile narożne. Łącznie <strong>948 zł brutto</strong>.
          <div className="fcm-bot-actions">
            <span className="fcm-chip">Zobacz wycenę</span>
            <span className="fcm-chip">Zamów teraz</span>
          </div>
        </div>
        <div className="fcm-time">22:14 · auto</div>
      </div>

      <style>{`
        .fcm{ margin-top: auto; display:flex; flex-direction:column; gap:14px; }
        .fcm-msg{ display:flex; flex-direction:column; max-width: 88%; }
        .fcm-msg.client{ align-self: flex-end; align-items: flex-end; }
        .fcm-msg.bot{ align-self: flex-start; }
        .fcm-bubble{
          padding: 12px 16px;
          border-radius: 14px;
          font-size: 13.5px;
          line-height: 1.5;
          background: var(--bg-2);
          border: 1px solid var(--line);
          color: var(--ink);
        }
        .fcm-msg.client .fcm-bubble{
          background: var(--brand);
          color: var(--brand-ink);
          border-color: transparent;
          border-bottom-right-radius: 4px;
        }
        .fcm-msg.bot .fcm-bubble{
          border-bottom-left-radius: 4px;
        }
        .fcm-msg.bot .fcm-bubble strong{ color: var(--ink); }
        .fcm-time{ font-size: 11px; color: var(--ink-3); padding: 0 6px; }
        .fcm-bot-actions{ margin-top: 10px; display:flex; gap:6px; flex-wrap:wrap; }
        .fcm-chip{
          font-size: 11.5px;
          padding: 5px 10px;
          background: var(--surface-2);
          border:1px solid var(--line-2);
          border-radius: 999px;
        }
      `}</style>
    </div>
  );
}

function FeatureSetMock() {
  return (
    <div className="fsm">
      <div className="fsm-item primary">
        <span className="fsm-name">Płytki 60×60 Gres</span>
        <span className="fsm-q">8 m²</span>
        <span className="fsm-p">632 zł</span>
      </div>
      <div className="fsm-add">+ system dodaje:</div>
      <div className="fsm-item"><span className="fsm-name">Klej elastyczny C2TE</span><span className="fsm-q">2 worki</span><span className="fsm-p">96 zł</span></div>
      <div className="fsm-item"><span className="fsm-name">Fuga 5kg</span><span className="fsm-q">1 op.</span><span className="fsm-p">62 zł</span></div>
      <div className="fsm-item"><span className="fsm-name">Profil narożny aluminium</span><span className="fsm-q">2 szt.</span><span className="fsm-p">158 zł</span></div>
      <div className="fsm-sum">
        <span>Pełna wycena</span>
        <strong>948 zł</strong>
      </div>
      <style>{`
        .fsm{ margin-top: auto; display:flex; flex-direction:column; gap:6px; font-size: 13px; }
        .fsm-item{
          display:grid; grid-template-columns: 1fr auto auto;
          gap: 14px; padding: 8px 12px;
          background: var(--bg-2);
          border-radius: 8px;
          border: 1px solid var(--line);
          color: var(--ink-2);
        }
        .fsm-item.primary{
          background: rgba(200,255,0,0.06);
          border-color: rgba(200,255,0,0.3);
          color: var(--ink);
        }
        .fsm-q{ color: var(--ink-3); font-family: var(--font-mono); font-size: 11.5px; }
        .fsm-p{ font-variant-numeric: tabular-nums; }
        .fsm-add{
          font-size: 11.5px; color: var(--ink-3);
          padding: 2px 4px;
          font-family: var(--font-mono);
          letter-spacing: 0.05em;
        }
        .fsm-sum{
          display:flex; justify-content:space-between; align-items:center;
          margin-top: 8px; padding: 12px 12px;
          border-top: 1px solid var(--line); border-radius: 0;
          color: var(--ink);
        }
        .fsm-sum strong{
          font-family: var(--font-display); font-size: 18px;
          color: var(--brand); font-weight: 600;
        }
      `}</style>
    </div>
  );
}

function FeatureKpiMock() {
  return (
    <div className="fkm">
      <div className="fkm-row">
        <div className="fkm-label">Obrót dziś</div>
        <div className="fkm-val">12 480 zł</div>
        <div className="fkm-delta up">+18%</div>
      </div>
      <div className="fkm-row">
        <div className="fkm-label">Marża średnia</div>
        <div className="fkm-val">28.4%</div>
        <div className="fkm-delta up">+2.1pp</div>
      </div>
      <div className="fkm-chart">
        <svg viewBox="0 0 200 60" preserveAspectRatio="none">
          <defs>
            <linearGradient id="kpiG" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="var(--brand)" stopOpacity=".4"/>
              <stop offset="100%" stopColor="var(--brand)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M0,40 L20,38 L40,42 L60,32 L80,34 L100,28 L120,22 L140,24 L160,14 L180,12 L200,8 L200,60 L0,60 Z" fill="url(#kpiG)"/>
          <path d="M0,40 L20,38 L40,42 L60,32 L80,34 L100,28 L120,22 L140,24 L160,14 L180,12 L200,8" fill="none" stroke="var(--brand)" strokeWidth="1.5"/>
        </svg>
      </div>
      <style>{`
        .fkm{ margin-top: auto; display:flex; flex-direction:column; gap: 10px; }
        .fkm-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
        .fkm-row:last-of-type{ border-bottom: 0; }
        .fkm-label{ color: var(--ink-3); flex: 1; }
        .fkm-val{ font-family: var(--font-display); font-size: 18px; font-variant-numeric: tabular-nums; }
        .fkm-delta{ font-size: 11.5px; padding: 2px 8px; border-radius: 999px; }
        .fkm-delta.up{ background: rgba(200,255,0,.12); color: var(--brand); }
        .fkm-chart{ height: 60px; margin-top: 4px; }
        .fkm-chart svg{ width: 100%; height: 100%; }
      `}</style>
    </div>
  );
}

function FeatureCustomerMock() {
  return (
    <div className="fcum">
      <div className="fcum-row">
        <div className="fcum-av" style={{background:'#5BA3FF'}}>JB</div>
        <div>
          <div className="fcum-name">Firma Brzoza Sp. z o.o.</div>
          <div className="fcum-meta">Umowa ramowa · 8 zamówień / 30 dni</div>
        </div>
        <div className="fcum-tag">−18% rabat</div>
      </div>
      <div className="fcum-row">
        <div className="fcum-av" style={{background:'#FF5C2E'}}>AT</div>
        <div>
          <div className="fcum-name">Adam Trębacki — wykonawca</div>
          <div className="fcum-meta">VIP · ostatnio: 9 dni temu</div>
        </div>
        <div className="fcum-tag">VIP</div>
      </div>
      <div className="fcum-row new">
        <div className="fcum-av" style={{background:'#C8FF00', color:'#0B0B0E'}}>+</div>
        <div>
          <div className="fcum-name">Nowy klient</div>
          <div className="fcum-meta">Wita asystent AI · zbiera dane</div>
        </div>
      </div>
      <style>{`
        .fcum{ margin-top: auto; display:flex; flex-direction:column; gap: 8px; }
        .fcum-row{
          display:flex; align-items:center; gap: 12px;
          padding: 10px 12px; border-radius: 12px;
          background: var(--bg-2); border: 1px solid var(--line);
        }
        .fcum-row.new{ border-style: dashed; border-color: var(--line-2); }
        .fcum-av{
          width: 36px; height: 36px; border-radius: 50%;
          color: white; display:grid; place-items:center;
          font-size: 12px; font-weight: 600;
        }
        .fcum-row > div:nth-child(2){ flex: 1; min-width: 0; }
        .fcum-name{ font-size: 13.5px; line-height: 1.3; }
        .fcum-meta{ font-size: 11.5px; color: var(--ink-3); }
        .fcum-tag{
          font-size: 11px; padding: 4px 8px;
          border-radius: 999px; background: var(--surface-2);
          color: var(--brand);
        }
      `}</style>
    </div>
  );
}

function FeatureUpsellMock() {
  return (
    <div className="fum">
      <div className="fum-cart">
        <div className="fum-cart-head">
          <span>Koszyk klienta</span>
          <span className="muted">3 pozycje · 1 920 zł</span>
        </div>
        <ul>
          <li>Farba lateksowa biała 5L × 2</li>
          <li>Wałek malarski premium 25cm × 1</li>
          <li>Folia ochronna 4×5m × 1</li>
        </ul>
      </div>
      <div className="fum-arrow">+ Gorilla sugeruje</div>
      <div className="fum-upsell">
        {[
          ['Taśma malarska 30mm', '+ 18 zł', '94% klientów dokupuje'],
          ['Wałek 10cm — narożniki', '+ 22 zł', 'Brakuje do pełnego zestawu'],
          ['Pojemnik z kratką', '+ 38 zł', 'Pasuje do wałka 25cm'],
        ].map((u, i) => (
          <div key={i} className="fum-up-card">
            <div className="fum-up-name">{u[0]}</div>
            <div className="fum-up-reason">{u[2]}</div>
            <div className="fum-up-price">{u[1]}</div>
            <button className="fum-up-add">+</button>
          </div>
        ))}
      </div>
      <div className="fum-result">
        <span>Wartość koszyka po dosprzedaży:</span>
        <strong>1 998 zł <em>(+4.1%)</em></strong>
      </div>
      <style>{`
        .fum{ margin-top: auto; display:grid; grid-template-columns: 1fr auto 2fr; gap: 20px; align-items: center; }
        .fum-cart{ background: var(--bg-2); border:1px solid var(--line); border-radius: 14px; padding: 16px; }
        .fum-cart-head{
          display:flex; justify-content:space-between; font-size: 12px;
          color: var(--ink); margin-bottom: 10px;
          padding-bottom: 10px; border-bottom: 1px solid var(--line);
        }
        .fum-cart ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
        .fum-cart li{ font-size: 12.5px; color: var(--ink-2); }
        .fum-arrow{
          font-family: var(--font-mono);
          font-size: 11px; letter-spacing: 0.05em;
          text-transform: uppercase;
          color: var(--ink-3);
          writing-mode: horizontal-tb;
          text-align: center;
        }
        .fum-upsell{ display:flex; flex-direction:column; gap:8px; }
        .fum-up-card{
          display:grid; grid-template-columns: 1fr auto auto;
          gap: 10px; align-items: center;
          padding: 10px 12px;
          background: rgba(200,255,0,.05);
          border: 1px dashed rgba(200,255,0,.35);
          border-radius: 12px;
        }
        .fum-up-name{ font-size: 13px; color: var(--ink); }
        .fum-up-reason{ font-size: 11px; color: var(--ink-3); grid-column: 1; grid-row: 2; }
        .fum-up-price{ font-size: 12.5px; color: var(--brand); font-variant-numeric: tabular-nums; grid-row: 1 / span 2; align-self: center; }
        .fum-up-add{
          width:28px; height:28px; border-radius:50%;
          background: var(--brand); color: var(--brand-ink);
          border: 0; font-size: 16px; font-weight: 600;
          grid-row: 1 / span 2; align-self: center;
        }
        .fum-result{
          grid-column: 1 / -1;
          display:flex; justify-content:space-between;
          margin-top: 6px;
          padding-top: 16px; border-top: 1px solid var(--line);
          font-size: 13.5px; color: var(--ink-2);
        }
        .fum-result strong{ color: var(--ink); font-family: var(--font-display); }
        .fum-result em{ font-style: normal; color: var(--brand); font-size: 12.5px; margin-left: 6px; }
        @media (max-width: 720px){
          .fum{ grid-template-columns: 1fr; }
          .fum-arrow{ writing-mode: horizontal-tb; }
        }
      `}</style>
    </div>
  );
}

window.Features = Features;