// pricing.jsx — pakiety
function Pricing() {
  const plans = [
    {
      name: 'Start',
      tagline: 'Sklep online pod klucz',
      price: '9 800',
      period: 'jednorazowo',
      monthly: '690 zł / mc',
      monthlyNote: 'utrzymanie + asystent',
      desc: 'Dla sklepów do 1 000 SKU, które chcą najpierw uporządkować sprzedaż online.',
      features: [
        'Sklep online + domena + płatności',
        'Import asortymentu (do 1 000 SKU)',
        'Podstawowy asystent AI (FAQ + leady)',
        'Integracja z 1 systemem magazynowym',
        '30 dni opieki powdrożeniowej',
      ],
      cta: 'Wybieram Start',
      featured: false,
    },
    {
      name: 'Sprzedaż',
      tagline: 'Najczęściej wybierany',
      price: '18 900',
      period: 'jednorazowo',
      monthly: '1 290 zł / mc',
      monthlyNote: 'utrzymanie + automatyzacje',
      desc: 'Dla sklepów, które chcą realnie podbić obrót. Pełna automatyzacja sprzedaży i dosprzedaż.',
      features: [
        'Wszystko z pakietu Start',
        'Nielimitowane SKU',
        'Auto-wyceny zestawów (klej/fuga/zestaw)',
        'AI-dosprzedaż w koszyku (+12% AOV)',
        'Identyfikacja klientów + ceny kontraktowe',
        'Integracje z 3 systemami (kasa, WAPRO, kurier)',
        '90 dni opieki + raport KPI',
        'Gwarancja +15% obrotu lub zwrot',
      ],
      cta: 'Wybieram Sprzedaż',
      featured: true,
    },
    {
      name: 'Sieć',
      tagline: 'Dla 2+ punktów stacjonarnych',
      price: 'Wycena',
      period: 'indywidualna',
      monthly: 'od 2 400 zł / mc',
      monthlyNote: 'utrzymanie + SLA',
      desc: 'Dla sieci sklepów. Wspólny katalog, lokalne ceny i magazyny, dedykowany opiekun.',
      features: [
        'Wszystko z pakietu Sprzedaż',
        'Wiele punktów / magazynów / cenników',
        'Dedykowany opiekun (B2B)',
        'Integracje on-demand (ERP, hurt)',
        'SLA 99.9% · priorytetowe wsparcie',
        'Szkolenia onsite dla zespołu',
      ],
      cta: 'Porozmawiajmy',
      featured: false,
    },
  ];

  return (
    <section id="pricing" className="pricing">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Cennik</Eyebrow>
          <h2>Trzy pakiety. Zero ukrytych kosztów.<br/>Zwrot zwykle w&nbsp;<span className="hl">pierwszym kwartale</span>.</h2>
          <p>Płacisz raz za wdrożenie, potem miesięcznie za utrzymanie i&nbsp;automatyzacje. Bez prowizji od obrotu.</p>
        </div>

        <div className="pricing-grid">
          {plans.map((p, i) => (
            <article key={p.name} className={`pricing-card ${p.featured ? 'is-featured' : ''}`} style={{animationDelay: `${i*80}ms`}}>
              {p.featured && <div className="pricing-ribbon">★ Najczęstszy wybór</div>}
              <div className="pricing-card-head">
                <div className="pricing-name">{p.name}</div>
                <div className="pricing-tagline">{p.tagline}</div>
              </div>
              <div className="pricing-price">
                {p.price !== 'Wycena' && <span className="pricing-currency">zł</span>}
                <span className="pricing-amount">{p.price}</span>
              </div>
              <div className="pricing-period">{p.period}</div>
              <div className="pricing-monthly">
                <strong>{p.monthly}</strong>
                <span>{p.monthlyNote}</span>
              </div>
              <p className="pricing-desc" dangerouslySetInnerHTML={{__html: p.desc}}/>
              <ul className="pricing-features">
                {p.features.map(f => (
                  <li key={f}>
                    <span className="check">✓</span>
                    <span dangerouslySetInnerHTML={{__html: f}}/>
                  </li>
                ))}
              </ul>
              <a className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'} btn-lg pricing-cta`} href="#contact">
                {p.cta} {p.featured && <ArrowRight />}
              </a>
            </article>
          ))}
        </div>

        <div className="pricing-note">
          <div>
            <strong>Nie wiesz, który pakiet?</strong>
            <span className="muted"> Umów 20-minutową rozmowę — pomożemy wybrać i&nbsp;policzymy ROI na Twoich danych.</span>
          </div>
          <a className="btn btn-ghost btn-sm" href="#contact">Umów rozmowę <ArrowRight size={12}/></a>
        </div>
      </div>

      <style>{`
        .pricing .section-head h2 .hl{ color: var(--brand); }
        .pricing-grid{
          display:grid; grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .pricing-card{
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 32px;
          display:flex; flex-direction:column;
          position: relative;
          transition: border-color .25s, transform .25s var(--ease-out);
          animation: reveal .7s var(--ease-out) both;
        }
        .pricing-card:hover{ border-color: var(--line-2); }
        .pricing-card.is-featured{
          background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
          border-color: var(--brand);
          box-shadow: 0 0 0 1px var(--brand) inset, 0 30px 60px rgba(200,255,0,0.05);
        }
        .pricing-ribbon{
          position: absolute;
          top: -12px; left: 50%; transform: translateX(-50%);
          background: var(--brand); color: var(--brand-ink);
          padding: 5px 14px; border-radius: 999px;
          font-size: 11.5px; font-weight: 500;
          letter-spacing: 0.02em;
          white-space: nowrap;
        }
        .pricing-card-head{ margin-bottom: 24px; }
        .pricing-name{
          font-family: var(--font-display);
          font-size: 28px;
          font-weight: 600;
          letter-spacing: -0.02em;
          margin-bottom: 4px;
        }
        .pricing-tagline{ font-size: 13px; color: var(--ink-3); }

        .pricing-price{
          display:flex; align-items: baseline; gap: 6px;
          margin-bottom: 4px;
        }
        .pricing-currency{ font-size: 18px; color: var(--ink-3); }
        .pricing-amount{
          font-family: var(--font-display);
          font-size: 56px;
          font-weight: 600;
          letter-spacing: -0.04em;
          line-height: 1;
          font-variant-numeric: tabular-nums;
        }
        .pricing-period{ font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
        .pricing-monthly{
          padding: 12px 14px;
          background: var(--bg-2);
          border: 1px solid var(--line);
          border-radius: 10px;
          margin-bottom: 22px;
          display:flex; flex-direction:column;
        }
        .pricing-monthly strong{ font-family: var(--font-display); font-size: 16px; font-weight: 600; }
        .pricing-monthly span{ font-size: 11.5px; color: var(--ink-3); }

        .pricing-desc{
          font-size: 13.5px; color: var(--ink-2);
          line-height: 1.5; margin-bottom: 24px;
        }
        .pricing-features{
          list-style:none; padding:0; margin: 0 0 28px;
          display:flex; flex-direction:column; gap:10px;
          flex: 1;
        }
        .pricing-features li{
          display:flex; align-items: flex-start; gap: 10px;
          font-size: 13.5px; color: var(--ink-2);
          line-height: 1.4;
        }
        .pricing-features .check{
          color: var(--brand); flex-shrink: 0;
          font-size: 14px; margin-top: 1px;
        }
        .pricing-cta{ width: 100%; }

        .pricing-note{
          margin-top: 28px;
          padding: 18px 24px;
          background: var(--bg-2);
          border: 1px dashed var(--line);
          border-radius: var(--radius-lg);
          display:flex; justify-content:space-between; align-items:center; gap:16px;
          font-size: 14px;
        }
        .pricing-note strong{ font-weight: 500; }

        @media (max-width: 980px){
          .pricing-grid{ grid-template-columns: 1fr; }
          .pricing-card{ padding: 28px 24px; }
          .pricing-note{ flex-direction: column; align-items: flex-start; }
        }
      `}</style>
    </section>
  );
}

window.Pricing = Pricing;