// opinie.jsx — sekcja z opiniami klientów

function Opinie() {
  const reviews = [
    {
      org: 'Bert-Dent',
      city: 'Bydgoszcz',
      tag: 'Stomatologia',
      url: 'https://bert-dent.pl/',
      quote: [
        'Nasza współpraca z mec. Tomaszem Czmochowskim przebiega wzorowo. Cenimy pełen profesjonalizm, ogromną wiedzę prawną i doskonałe zrozumienie specyfiki branży medycznej i stomatologicznej.',
        'Każda sprawa prowadzona jest z najwyższą starannością, terminowością i zaangażowaniem, co daje nam poczucie bezpieczeństwa oraz pewność podejmowanych decyzji. Doceniamy indywidualne podejście, jasną komunikację i praktyczne rozwiązania dostosowane do realnych potrzeb placówki.',
        'Dzięki tej współpracy możemy skupić się na leczeniu pacjentów, mając pewność, że kwestie formalne i prawne są w najlepszych rękach.',
      ],
    },
    {
      org: 'Femimental',
      city: 'Inowrocław · Toruń',
      tag: 'Specjalistyczne gabinety lekarskie',
      url: 'https://femimental.pl/',
      quote: [
        'Z pełnym przekonaniem polecam — współpraca przy tworzeniu i rozwoju Femimental Specjalistyczne Gabinety Lekarskie była na najwyższym poziomie.',
        'Kancelaria zapewnia kompleksowe wsparcie na etapie zakładania podmiotu, a także w jego dalszym rozwoju. Profesjonalizm, zaangażowanie i bardzo dobra znajomość realiów prowadzenia działalności medycznej przełożyły się na sprawną realizację projektu i poczucie bezpieczeństwa na każdym etapie.',
        'Doceniam praktyczne podejście, dostępność i umiejętność proponowania rozwiązań dopasowanych do potrzeb rozwijającej się organizacji.',
      ],
    },
  ];

  return (
    <section id="opinie" style={{ borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <SectionHead
          eyebrow="04 / Opinie"
          title={<>Co mówią <span style={{ color: 'var(--accent)' }}>placówki</span>, którym pomogłem.</>}
          sub="Kilka słów od osób, które otworzyły z moim wsparciem własny NZOZ."
        />
        <div style={{
          marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20,
        }}>
          {reviews.map((r, i) => (
            <figure key={i} style={{
              margin: 0, background: 'var(--surface)', border: '1px solid var(--line)',
              borderRadius: 'var(--radius)', padding: 32,
              display: 'flex', flexDirection: 'column', gap: 20, position: 'relative',
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
                style={{ color: 'var(--accent)', opacity: 0.6 }}>
                <path d="M9 7H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v3a4 4 0 0 1-4 4M19 7h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h2v3a4 4 0 0 1-4 4"
                  stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <blockquote style={{
                margin: 0, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)',
                display: 'flex', flexDirection: 'column', gap: 14, flex: 1,
              }}>
                {r.quote.map((p, k) => <p key={k} style={{ margin: 0 }}>{p}</p>)}
              </blockquote>
              <figcaption style={{
                paddingTop: 20, borderTop: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
              }}>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>
                    {r.org}
                  </div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, letterSpacing: '0.04em' }}>
                    {r.tag.toUpperCase()} · {r.city.toUpperCase()}
                  </div>
                </div>
                <a href={r.url} target="_blank" rel="noopener noreferrer" style={{
                  fontSize: 13, color: 'var(--accent)', textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500,
                  whiteSpace: 'nowrap',
                }}>
                  Zobacz placówkę
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none">
                    <path d="M7 17L17 7 M9 7h8v8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Opinie = Opinie;