// realizacje.jsx — sekcja z portfolio NZOZ-ów

function Realizacje() {
  const items = [
    {
      n: '01',
      name: 'Femimental',
      tag: 'Centrum specjalistyczne',
      city: 'Inowrocław · Toruń',
      desc: '60 lekarzy, 24 poradnie specjalistyczne. Od ginekologii i endokrynologii do neurochirurgii i kardiologii.',
      url: 'https://femimental.pl/',
    },
    {
      n: '02',
      name: 'Bert-Dent',
      tag: 'Stomatologia',
      city: 'Bydgoszcz',
      desc: 'Gabinet stomatologiczny w centrum miasta. Pełen zakres leczenia, w tym dla dzieci.',
      url: 'https://bert-dent.pl/',
    },
    {
      n: '03',
      name: 'Alergo-Vita',
      tag: 'Poradnie specjalistyczne',
      city: 'Bydgoszcz',
      desc: 'Alergologia, dermatologia, pulmonologia, laryngologia, logopedia. Kontrakt z NFZ.',
      url: 'https://www.alergo-vita.pl/',
    },
    {
      n: '04',
      name: 'Pesmed',
      tag: 'Przychodnia',
      city: 'Bydgoszcz',
      desc: 'Podstawowa opieka zdrowotna i poradnie specjalistyczne dla pacjentów dorosłych i dzieci.',
      url: 'https://pesmed.pl/',
    },
    {
      n: '05',
      name: 'Śniadeckich 2',
      tag: 'Centrum medyczne',
      city: 'Bydgoszcz',
      desc: 'Wielospecjalistyczna placówka medyczna w centrum miasta.',
      url: 'https://www.sniadeckich2.pl/',
    },
  ];

  return (
    <section id="realizacje" style={{ borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <SectionHead
          eyebrow="03 / Realizacje"
          title={<>NZOZ-y, które <span style={{ color: 'var(--accent)' }}>otworzyły</span> drzwi pacjentom.</>}
          sub="Każda z tych placówek przeszła przez ten sam proces, który właśnie czytasz. Zobacz, jak wyglądają dziś."
        />
        <div style={{
          marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {items.map((it) => (
            <a key={it.n} href={it.url} target="_blank" rel="noopener noreferrer"
              className="realizacja-card"
              style={{
                background: 'var(--surface)', border: '1px solid var(--line)',
                borderRadius: 'var(--radius)', padding: 22,
                display: 'flex', flexDirection: 'column', gap: 14,
                textDecoration: 'none', color: 'inherit',
                transition: 'border-color .15s, transform .15s',
                position: 'relative', overflow: 'hidden',
              }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>
                  № {it.n}
                </span>
                <span className="mono" style={{
                  fontSize: 10, padding: '4px 8px', borderRadius: 6,
                  border: '1px solid var(--line-2)', color: 'var(--ink-2)', letterSpacing: '0.06em',
                }}>{it.tag.toUpperCase()}</span>
              </div>
              <div>
                <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 4 }}>
                  {it.name}
                </div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>
                  {it.city}
                </div>
              </div>
              <p style={{ margin: 0, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, flex: 1 }}>
                {it.desc}
              </p>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 6, fontSize: 13,
                color: 'var(--accent)', fontWeight: 500, marginTop: 4,
              }}>
                Zobacz stronę
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ transition: 'transform .15s' }}>
                  <path d="M7 17L17 7 M9 7h8v8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Realizacje = Realizacje;