// faq.jsx
function FAQ() {
  const items = [
    {
      q: 'Czy musimy zatrudniać kogoś do obsługi sklepu online?',
      a: 'Nie. Gorilla jest zaprojektowana tak, żeby przejąć obsługę zapytań, wyceny i dosprzedaż. Twój zespół wchodzi do panelu tylko wtedy, gdy zamówienie wymaga decyzji człowieka — np. dużej, niestandardowej wyceny.',
    },
    {
      q: 'Mamy już Subiekt / WAPRO / kasę. Czy będzie się to integrowało?',
      a: 'Tak. W pakiecie Sprzedaż integrujemy się z 3 systemami pod klucz — magazyn, kasa fiskalna, kurier. Asortyment i ceny są synchronizowane, nie musisz prowadzić dwóch sklepów.',
    },
    {
      q: 'Ile to trwa od podpisania umowy do uruchomienia?',
      a: 'Średnio 30 dni. Audyt 1–3 dzień, budowa sklepu 4–14, automatyzacja 15–25, szkolenie i start do 30. Działamy etapowo, więc cały czas wiesz, co się dzieje.',
    },
    {
      q: 'Co jeśli wdrożenie nie podbije sprzedaży?',
      a: 'W pakiecie Sprzedaż dajemy gwarancję: jeśli w 90 dni od startu nie zwiększymy Twojego obrotu o min. 15% — zwracamy 100% kosztów wdrożenia. Mamy je, bo na 120+ wdrożeniach to się sprawdza.',
    },
    {
      q: 'Czy klienci stacjonarni nie odpłyną do internetu?',
      a: 'W praktyce jest odwrotnie. Sklep online zwykle obsługuje innych klientów (wieczory, weekendy, inne miasta, mniejsze zamówienia). Twoi stali klienci stacjonarni mają dodatkowy kanał, ale dalej przychodzą po doradztwo do Ciebie.',
    },
    {
      q: 'Ile zarabia na nas Gorilla? Czy bierzecie prowizję od obrotu?',
      a: 'Nie. Płacisz raz za wdrożenie i miesięcznie za utrzymanie + automatyzacje. Cały obrót zostaje u Ciebie. Inaczej niż na platformach typu marketplace.',
    },
    {
      q: 'Kto jest właścicielem sklepu — Wy czy my?',
      a: 'Zawsze Ty. Sklep, domena, dane klientów, asortyment — wszystko jest Twoje. Możesz w każdej chwili przenieść projekt gdzie indziej, dajemy pełen dostęp.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="faq-layout">
          <div className="faq-side">
            <Eyebrow>FAQ</Eyebrow>
            <h2>Pytania, które słyszymy najczęściej.</h2>
            <p>Nie znalazłeś odpowiedzi? Napisz na <a href="mailto:contact@softgorillas.com" className="link">contact@softgorillas.com</a> albo zarezerwuj 20-minutową rozmowę — odpiszemy w&nbsp;ten sam dzień roboczy.</p>
            <a className="btn btn-ghost" href="#contact">
              Umów rozmowę <ArrowRight size={12}/>
            </a>
          </div>

          <div className="faq-list">
            {items.map((it, i) => (
              <details key={i} open={open === i} onToggle={(e) => { if (e.target.open) setOpen(i); }}>
                <summary>
                  <span className="faq-q">{it.q}</span>
                  <span className="faq-toggle" aria-hidden>
                    <span className="line h"/><span className="line v"/>
                  </span>
                </summary>
                <div className="faq-a" dangerouslySetInnerHTML={{__html: it.a}}/>
              </details>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .faq-layout{
          display:grid; grid-template-columns: 1fr 1.4fr; gap: 64px;
          align-items: start;
        }
        .faq-side{
          position: sticky; top: 100px;
          display:flex; flex-direction: column; gap: 18px;
          align-items: flex-start;
        }
        .faq-side h2{
          font-size: clamp(32px, 4vw, 48px);
        }
        .faq-side p{ color: var(--ink-2); font-size: 15px; max-width: 380px; }
        .faq-side .link{
          color: var(--brand); text-decoration: underline; text-underline-offset: 3px;
        }

        .faq-list details{
          border-bottom: 1px solid var(--line);
          padding: 4px 0;
        }
        .faq-list details:first-child{ border-top: 1px solid var(--line); }
        .faq-list summary{
          list-style: none;
          padding: 20px 4px;
          display:flex; justify-content: space-between; align-items: flex-start;
          gap: 18px;
          cursor: pointer;
          transition: color .2s;
        }
        .faq-list summary::-webkit-details-marker{ display:none; }
        .faq-list summary:hover{ color: var(--brand); }
        .faq-q{
          font-family: var(--font-display);
          font-size: clamp(18px, 1.6vw, 21px);
          font-weight: 500;
          letter-spacing: -0.015em;
          line-height: 1.3;
          flex: 1;
        }
        .faq-toggle{
          position: relative;
          width: 18px; height: 18px;
          flex-shrink: 0;
          margin-top: 4px;
        }
        .faq-toggle .line{
          position: absolute;
          background: var(--ink-2);
          border-radius: 2px;
          transition: transform .25s var(--ease-out), background .25s;
        }
        .faq-toggle .line.h{ width: 18px; height: 2px; top: 8px; left: 0; }
        .faq-toggle .line.v{ width: 2px; height: 18px; top: 0; left: 8px; }
        details[open] .faq-toggle .line.v{ transform: scaleY(0); }
        details[open] .faq-toggle .line{ background: var(--brand); }
        .faq-a{
          padding: 0 4px 22px;
          font-size: 15px;
          color: var(--ink-2);
          line-height: 1.6;
          max-width: 640px;
          animation: faqOpen .3s var(--ease-out) both;
        }
        @keyframes faqOpen {
          from { opacity: 0; transform: translateY(-4px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 900px){
          .faq-layout{ grid-template-columns: 1fr; gap: 36px; }
          .faq-side{ position: static; }
        }
      `}</style>
    </section>
  );
}

window.FAQ = FAQ;