// testimonials.jsx — social proof: logotypy + cytaty
function Testimonials() {
  const logos = [
    'Płytkomania', 'Domex Bud', 'Farby Karpiński', 'AGD Pasja',
    'Stolarstwo Wójcik', 'TKB Elektro', 'HydroSerwis 24', 'Meble Anna',
    'Auto-Części M&M', 'Studio Kafli', 'Łazienki BIS', 'Garden Pro'
  ];

  const quotes = [
    {
      q: 'Pierwszy weekend po starcie — 11 zamówień, które normalnie by do nas nie trafiły. Dla mnie to było jak otworzyć drugi sklep, ale bez kosztu.',
      name: 'Jacek Wójcik',
      role: 'Właściciel · Stolarstwo Wójcik, Poznań',
      stat: '+34% obrotu w 60 dni',
    },
    {
      q: 'Bałem się, że klienci stracą kontakt z nami. Jest odwrotnie — kobieta z Krakowa pisze do nas o 23:00, dostaje wycenę, rano płaci. Tego mi brakowało.',
      name: 'Marta Kafel',
      role: 'Właścicielka · Studio Kafli, Kraków',
      stat: '+22% AOV',
    },
    {
      q: 'Najwięcej zarabiamy na dosprzedaży. AI dopina klej, fugę, profile do każdego zamówienia płytek. Tego u nas w sklepie też nie wszyscy pamiętali pytać.',
      name: 'Tomasz Borecki',
      role: 'Dyrektor sprzedaży · Łazienki BIS',
      stat: '+18% marży',
    },
  ];

  return (
    <section id="testimonials" className="ts">
      <div className="container">
        <div className="ts-logos-head">
          <span>Pomagają nam sprzedawać</span>
          <div className="ts-logos-line"/>
        </div>

        <div className="ts-marquee">
          <div className="ts-marquee-track">
            {[...logos, ...logos].map((l, i) => (
              <div key={i} className="ts-logo">{l}</div>
            ))}
          </div>
        </div>

        <div className="ts-quotes">
          {quotes.map((q, i) => (
            <figure key={i} className="ts-quote" style={{ animationDelay: `${i*100}ms` }}>
              <div className="ts-quote-mark">”</div>
              <blockquote className="ts-quote-body">{q.q}</blockquote>
              <div className="ts-quote-stat">{q.stat}</div>
              <figcaption className="ts-quote-by">
                <strong>{q.name}</strong>
                <span>{q.role}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <style>{`
        .ts{ padding: 80px 0 120px; }
        .ts-logos-head{
          display:flex; align-items:center; gap: 20px;
          margin-bottom: 22px;
          font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--ink-3);
        }
        .ts-logos-line{ flex: 1; height: 1px; background: var(--line); }

        .ts-marquee{
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
          margin-bottom: 80px;
        }
        .ts-marquee-track{
          display: flex; align-items:center; gap: 48px;
          width: max-content;
          animation: marquee 40s linear infinite;
        }
        .ts-logo{
          font-family: var(--font-display);
          font-size: 22px; font-weight: 600;
          color: var(--ink-3);
          letter-spacing: -0.01em;
          white-space: nowrap;
          opacity: .75;
          transition: opacity .2s, color .2s;
        }
        .ts-logo:hover{ opacity: 1; color: var(--ink); }

        .ts-quotes{
          display:grid; grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        .ts-quote{
          background: var(--surface);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          padding: 28px;
          margin: 0;
          display:flex; flex-direction:column;
          position: relative;
          animation: reveal .8s var(--ease-out) both;
        }
        .ts-quote-mark{
          font-family: 'Instrument Serif', serif;
          font-size: 90px;
          line-height: 0.6;
          color: var(--brand);
          opacity: 0.6;
          margin-bottom: -10px;
        }
        .ts-quote-body{
          margin: 0 0 20px;
          font-family: 'Instrument Serif', Georgia, serif;
          font-style: italic;
          font-size: 22px;
          line-height: 1.35;
          color: var(--ink);
          letter-spacing: -0.005em;
        }
        .ts-quote-stat{
          align-self: flex-start;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.04em;
          padding: 5px 12px;
          border-radius: 999px;
          background: rgba(200,255,0,0.1);
          color: var(--brand);
          margin-bottom: 18px;
        }
        .ts-quote-by{
          display:flex; flex-direction:column;
          padding-top: 18px;
          border-top: 1px solid var(--line);
          font-size: 13px;
          margin-top: auto;
        }
        .ts-quote-by strong{ font-weight: 500; color: var(--ink); }
        .ts-quote-by span{ color: var(--ink-3); }

        @media (max-width: 980px){
          .ts-quotes{ grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

window.Testimonials = Testimonials;