// sections.jsx – wszystkie sekcje strony

function Logo() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
      <rect x="1" y="1" width="20" height="20" rx="6" fill="var(--accent)" />
      <path d="M7 11h8M11 7v8" stroke="var(--accent-ink)" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

function Nav() {
  const link = { color: 'var(--ink-2)', textDecoration: 'none', fontSize: 14 };
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      background: 'rgba(10,11,10,0.7)', borderBottom: '1px solid var(--line)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink)', textDecoration: 'none' }}>
          <Logo />
          <span style={{ fontWeight: 600, letterSpacing: '-0.01em' }}>Zakładam NZOZ</span>
        </a>
        <div style={{ display: 'flex', gap: 28 }}>
          <a href="#proces" style={link}>Proces</a>
          <a href="#kalkulator" style={link}>Kalkulator</a>
          <a href="#realizacje" style={link}>Realizacje</a>
          <a href="#opinie" style={link}>Opinie</a>
          <a href="#faq" style={link}>FAQ</a>
        </div>
        <a href="#konsultacja" style={{
          background: 'var(--accent)', color: 'var(--accent-ink)',
          padding: '9px 16px', borderRadius: 999, fontSize: 14, fontWeight: 600,
          textDecoration: 'none', whiteSpace: 'nowrap',
        }}>Umów konsultację →</a>
      </div>
    </nav>
  );
}

function SectionHead({ eyebrow, title, sub }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'end' }}>
      <div>
        <div className="mono" style={{
          fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em',
          textTransform: 'uppercase', marginBottom: 16,
        }}>§ {eyebrow}</div>
        <h2 style={{
          fontSize: 'clamp(36px, 5vw, 64px)', lineHeight: 1, letterSpacing: '-0.03em',
          margin: 0, fontWeight: 500, maxWidth: 720,
        }}>{title}</h2>
      </div>
      {sub && <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55, margin: '0 0 8px', maxWidth: 380 }}>{sub}</p>}
    </div>
  );
}

function Hero() {
  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--line)' }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(ellipse at top, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at top, black 30%, transparent 75%)',
        opacity: 0.5,
      }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '48px 32px 56px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px',
          border: '1px solid var(--line-2)', borderRadius: 999, fontSize: 13,
          color: 'var(--ink-2)', background: 'rgba(255,255,255,0.02)', marginBottom: 32,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)',
            animation: 'pulseDot 1.6s ease-in-out infinite',
          }} />
          <span>Aktualne na 2026 – uwzględnia zmiany w RPWDL</span>
        </div>
        <h1 style={{
          fontSize: 'clamp(52px, 7.5vw, 104px)', lineHeight: 1.15, letterSpacing: '-0.035em',
          margin: 0, fontWeight: 700, maxWidth: 1100,
        }}>
          Załóż własny NZOZ <span style={{ color: 'var(--accent)' }}>bez ryzyka.</span><br/>
          Bez 47 wizyt w urzędach, <span style={{ color: 'var(--accent)' }}>w 14 dni.</span>
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)',
          marginTop: 32, maxWidth: 620,
        }}>
          Przewodnik, kalkulator i opieka prawna dla lekarzy, którzy zakładają swój NZOZ – od wyboru formy prawnej do wpisu w RPWDL i pierwszego pacjenta.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
          <a href="#proces" style={{
            background: 'var(--accent)', color: 'var(--accent-ink)',
            padding: '14px 22px', borderRadius: 999, fontSize: 15, fontWeight: 600,
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>Pokaż 6 kroków →</a>
          <a href="#konsultacja" style={{
            background: 'transparent', color: 'var(--ink)',
            padding: '14px 22px', borderRadius: 999, fontSize: 15, fontWeight: 500,
            textDecoration: 'none', border: '1px solid var(--line-2)',
          }}>Bezpłatna konsultacja 30 min</a>
        </div>

        <div style={{
          marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
          paddingTop: 32, borderTop: '1px solid var(--line)',
        }}>
          {[
            ['20', 'NZOZ-ów otwartych z moją pomocą'],
            ['11 tyg.', 'średni czas od decyzji do otwarcia'],
            ['96%', 'wniosków RPWDL bez wezwania'],
            ['0', 'odmów sanepidu w 2025 roku'],
          ].map(([k, v], i) => (
            <div key={i}>
              <div style={{ fontSize: 44, lineHeight: 1, letterSpacing: '-0.03em', fontWeight: 500 }}>{k}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 10, maxWidth: 200 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ticker() {
  const items = ['RPWDL', 'NFZ', 'PSSE', 'CEIDG', 'P1', 'EDM', 'OC obowiązkowe', 'PWZ', 'SZOI', 'IOD', 'KSE-DM', 'KRS'];
  const doubled = [...items, ...items];
  return (
    <div style={{ overflow: 'hidden', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
      <div style={{
        display: 'flex', gap: 48, padding: '18px 0', whiteSpace: 'nowrap',
        animation: 'tickerScroll 40s linear infinite',
      }}>
        {doubled.map((t, i) => (
          <span key={i} className="mono" style={{ fontSize: 13, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>
            {t} <span style={{ marginLeft: 48, color: 'var(--line-2)' }}>•</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function ProcessWizard() {
  const w = useWizard(0);
  const total = STEPS.length;
  const progress = (w.done.size / total) * 100;
  const cur = STEPS[w.step];

  return (
    <section id="proces" style={{ borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <SectionHead
          eyebrow="01 / Proces"
          title={<>Sześć kroków od <span style={{ color: 'var(--accent)' }}>pomysłu</span> do pierwszego pacjenta.</>}
          sub="Kliknij krok, żeby zobaczyć szczegóły. Zaznaczaj zrobione – postęp zostaje zapamiętany."
        />

        <div style={{
          display: 'flex', alignItems: 'center', gap: 16, marginTop: 28,
          padding: 16, border: '1px solid var(--line)', borderRadius: 'var(--radius)',
          background: 'var(--surface)',
        }}>
          <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>POSTĘP</div>
          <div style={{ flex: 1, height: 6, background: 'var(--line)', borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ width: progress + '%', height: '100%', background: 'var(--accent)', transition: 'width .4s ease' }} />
          </div>
          <div className="mono" style={{ fontSize: 13, color: 'var(--ink)', minWidth: 60, textAlign: 'right' }}>
            {w.done.size}/{total}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8, marginTop: 24 }}>
          {STEPS.map((s, i) => {
            const active = i === w.step;
            const isDone = w.done.has(i);
            return (
              <button key={i} onClick={() => w.setStep(i)} style={{
                padding: '14px 16px', borderRadius: 12,
                border: '1px solid ' + (active ? 'var(--accent)' : 'var(--line)'),
                background: active ? 'rgba(214,255,60,0.06)' : 'var(--surface)',
                color: 'var(--ink)', textAlign: 'left', cursor: 'pointer',
                transition: 'all .15s',
              }}>
                <div className="mono" style={{
                  fontSize: 11, color: isDone ? 'var(--accent)' : 'var(--ink-3)', marginBottom: 6, letterSpacing: '0.06em',
                }}>{isDone ? '✓ ZROBIONE' : 'KROK ' + s.n}</div>
                <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.3 }}>{s.title}</div>
              </button>
            );
          })}
        </div>

        <div style={{
          marginTop: 24, padding: 20, border: '1px solid var(--line)',
          borderRadius: 'var(--radius)', background: 'var(--surface)',
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48,
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 20 }}>
              <div className="serif" style={{
                fontSize: 96, lineHeight: 1, color: 'var(--accent)', fontWeight: 700,
                letterSpacing: '-0.02em',
              }}>{cur.n}</div>
              <div>
                <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1 }}>{cur.title}</div>
                <div style={{ color: 'var(--ink-2)', marginTop: 10, fontSize: 16, lineHeight: 1.5 }}>{cur.short}</div>
              </div>
            </div>

            <ul style={{ marginTop: 32, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {cur.bullets.map((b, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    border: '1px solid var(--line-2)', flexShrink: 0,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, color: 'var(--ink-3)', marginTop: 2,
                  }}>{i + 1}</span>
                  <span style={{ color: 'var(--ink-2)', lineHeight: 1.5 }}>{b}</span>
                </li>
              ))}
            </ul>

            <div style={{ display: 'flex', gap: 12, marginTop: 36 }}>
              <button onClick={() => w.toggle(w.step)} style={{
                background: w.done.has(w.step) ? 'transparent' : 'var(--accent)',
                color: w.done.has(w.step) ? 'var(--ink)' : 'var(--accent-ink)',
                border: w.done.has(w.step) ? '1px solid var(--line-2)' : 'none',
                padding: '12px 20px', borderRadius: 999, fontWeight: 600, fontSize: 14,
              }}>
                {w.done.has(w.step) ? '↺ Cofnij oznaczenie' : '✓ Oznacz jako zrobione'}
              </button>
              <button onClick={() => w.setStep(Math.min(total - 1, w.step + 1))} disabled={w.step === total - 1} style={{
                background: 'transparent', color: 'var(--ink-2)', border: '1px solid var(--line-2)',
                padding: '12px 20px', borderRadius: 999, fontWeight: 500, fontSize: 14,
                opacity: w.step === total - 1 ? 0.4 : 1,
              }}>Następny krok →</button>
            </div>
          </div>

          <div style={{
            background: 'var(--bg-2)', borderRadius: 12, padding: 20,
            border: '1px solid var(--line)',
          }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>SZACUNKI</div>
            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 22 }}>
              <Fact label="Czas trwania" value={cur.time} />
              <Fact label="Koszt etapu" value={cur.cost} />
              <Fact label="Status" value={w.done.has(w.step) ? '✓ gotowe' : 'do zrobienia'} dim={!w.done.has(w.step)} />
            </div>
            <div style={{
              marginTop: 28, paddingTop: 20, borderTop: '1px solid var(--line)',
              fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.55,
            }}>
              Dokładny koszt zależy od miasta, metrażu i zakresu świadczeń. Skorzystaj z kalkulatora niżej.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Fact({ label, value, dim }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{label.toUpperCase()}</div>
      <div style={{
        fontSize: 22, marginTop: 6,
        color: dim ? 'var(--ink-3)' : 'var(--ink)', fontWeight: 500,
        letterSpacing: '-0.01em',
      }}>{value}</div>
    </div>
  );
}

function Calculator() {
  const c = useCalculator();
  const max = Math.max(...Object.values(c.items));
  return (
    <section id="kalkulator" style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <SectionHead
          eyebrow="02 / Kalkulator"
          title={<>Ile to <span style={{ color: 'var(--accent)' }}>realnie</span> kosztuje?</>}
          sub="Suwakami dopasuj parametry. To szacunek netto na uruchomienie – bez kosztów stałych."
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 32 }}>
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius)', padding: 24 }}>
            <CalcSlider label="Powierzchnia lokalu" value={c.size} unit="m²" min={30} max={200} step={5} onChange={c.setSize} />
            <CalcSlider label="Liczba gabinetów" value={c.rooms} unit="" min={1} max={6} step={1} onChange={c.setRooms} />
            <CalcSlider label="Personel" value={c.staff} unit="osób" min={1} max={12} step={1} onChange={c.setStaff} />
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '16px 0 0', borderTop: '1px solid var(--line)', marginTop: 8,
            }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>Kontrakt z NFZ</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 2 }}>+ koszty SZOI, sprawozdawczości</div>
              </div>
              <Toggle on={c.nfz} onClick={() => c.setNfz(!c.nfz)} />
            </div>
          </div>

          <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--radius)', padding: 24 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em' }}>SZACUNKOWY KOSZT URUCHOMIENIA</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
              <div style={{ fontSize: 64, fontWeight: 600, letterSpacing: '-0.04em', lineHeight: 1 }}>
                {fmtPLN(c.total)}
              </div>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 8 }}>
              ± 15% – średnia z 20 projektów 2024–2026
            </div>

            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {Object.entries(c.items).map(([k, v]) => (
                <div key={k}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                    <span style={{ color: 'var(--ink-2)' }}>{COSTS[k].label}</span>
                    <span className="mono" style={{ color: 'var(--ink)' }}>{fmtPLN(v)}</span>
                  </div>
                  <div style={{ height: 4, background: 'var(--line)', borderRadius: 2, marginTop: 6, overflow: 'hidden' }}>
                    <div style={{ width: (v / max * 100) + '%', height: '100%', background: 'var(--accent)' }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CalcSlider({ label, value, unit, min, max, step, onChange }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ padding: '14px 0', borderBottom: '1px solid var(--line)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
        <span style={{ fontSize: 14, color: 'var(--ink-2)' }}>{label}</span>
        <span className="mono" style={{ fontSize: 16, color: 'var(--ink)' }}>{value}{unit && ' ' + unit}</span>
      </div>
      <div style={{ position: 'relative', height: 6, background: 'var(--line)', borderRadius: 3 }}>
        <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: pct + '%', background: 'var(--accent)', borderRadius: 3 }} />
        <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(+e.target.value)} style={{
          position: 'absolute', inset: 0, width: '100%', opacity: 0, cursor: 'pointer',
        }}/>
        <div style={{
          position: 'absolute', left: `calc(${pct}% - 9px)`, top: -6,
          width: 18, height: 18, borderRadius: '50%', background: 'var(--accent)',
          border: '3px solid var(--bg-2)', pointerEvents: 'none',
        }} />
      </div>
    </div>
  );
}

function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 44, height: 24, borderRadius: 999, border: 'none', padding: 0,
      background: on ? 'var(--accent)' : 'var(--line-2)',
      position: 'relative', cursor: 'pointer', transition: 'background .15s',
    }}>
      <span style={{
        position: 'absolute', top: 3, left: on ? 23 : 3,
        width: 18, height: 18, borderRadius: '50%',
        background: on ? 'var(--accent-ink)' : 'var(--ink)', transition: 'left .15s',
      }} />
    </button>
  );
}

function Documents() {
  const docs = [
    ['Wzór regulaminu organizacyjnego', 'docx · 18 stron', 'Najczęściej odrzucany dokument w RPWDL – moja wersja przeszła 96% wniosków bez wezwania.'],
    ['Polityka RODO + IOD', 'docx · 22 strony', 'Gotowy zestaw: rejestr czynności, klauzule, umowy powierzenia.'],
    ['Umowa z personelem medycznym', 'docx · wzory', 'Trzy warianty: B2B, kontrakt, umowa o pracę.'],
  ];
  return (
    <section id="dokumenty" style={{ borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <SectionHead
          eyebrow="03 / Dokumenty"
          title={<>Wzory, które <span style={{ color: 'var(--accent)' }}>działają</span> w urzędach.</>}
          sub="Komplet wypracowany na 184 otwartych NZOZ-ach. Pobierasz, dostosowujesz, składasz."
        />
        <div style={{
          marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
        }}>
          {docs.map(([name, meta, desc], i) => (
            <div key={i} style={{
              background: 'var(--surface)', border: '1px solid var(--line)',
              borderRadius: 'var(--radius)', padding: 20, display: 'flex', flexDirection: 'column', gap: 12,
              cursor: 'pointer', transition: 'border-color .15s',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 8, background: 'rgba(214,255,60,0.1)',
                  display: 'grid', placeItems: 'center', color: 'var(--accent)',
                }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>{meta}</span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em', marginTop: 4 }}>{name}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5 }}>{desc}</div>
              <div style={{
                marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--line)',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 13, color: 'var(--accent)',
              }}>
                <span>Pobierz wzór</span>
                <span>↓</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const acc = useAccordion(0);
  return (
    <section id="faq" style={{ borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <SectionHead
          eyebrow="05 / FAQ"
          title="Pytania, które dostaję najczęściej."
          sub="Jeśli Twojego nie ma na liście – napisz, dodam odpowiedź w ciągu 24 godzin."
        />
        <div style={{ marginTop: 32, maxWidth: 920 }}>
          {FAQ.map((f, i) => {
            const open = acc.open === i;
            return (
              <div key={i} style={{ borderTop: '1px solid var(--line)' }}>
                <button onClick={() => acc.toggle(i)} style={{
                  width: '100%', textAlign: 'left', padding: '24px 0',
                  background: 'transparent', border: 'none', color: 'var(--ink)',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em',
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    border: '1px solid var(--line-2)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: open ? 'var(--accent)' : 'transparent',
                    color: open ? 'var(--accent-ink)' : 'var(--ink-2)',
                    transition: 'all .2s', flexShrink: 0,
                  }}>{open ? '−' : '+'}</span>
                </button>
                {open && (
                  <div style={{ paddingBottom: 28, color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.6, maxWidth: 760 }}>
                    {f.a}
                  </div>
                )}
              </div>
            );
          })}
          <div style={{ borderTop: '1px solid var(--line)' }} />
        </div>
      </div>
    </section>
  );
}

function Lead() {
  const calRef = React.useRef(null);

  React.useEffect(() => {
    // Cal.com inline embed loader
    (function (C, A, L) {
      let p = function (a, ar) { a.q.push(ar); };
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal; let ar = arguments;
        if (!cal.loaded) {
          cal.ns = {}; cal.q = cal.q || [];
          d.head.appendChild(d.createElement('script')).src = A;
          cal.loaded = true;
        }
        if (ar[0] === L) {
          const api = function () { p(api, arguments); };
          const namespace = ar[1]; api.q = api.q || [];
          if (typeof namespace === 'string') {
            cal.ns[namespace] = cal.ns[namespace] || api;
            p(cal.ns[namespace], ar); p(cal, ['initNamespace', namespace]);
          } else { p(cal, ar); }
          return;
        }
        p(cal, ar);
      };
    })(window, 'https://app.cal.com/embed/embed.js', 'init');

    window.Cal('init', 'konsultacja-nzoz', { origin: 'https://app.cal.com' });
    window.Cal.ns['konsultacja-nzoz']('inline', {
      elementOrSelector: calRef.current,
      config: { layout: 'month_view', theme: 'dark' },
      calLink: 'klinikabezryzyka/konsultacja-nzoz',
    });
    window.Cal.ns['konsultacja-nzoz']('ui', {
      theme: 'dark',
      cssVarsPerTheme: {
        dark: {
          'cal-brand': '#D6FF3C',
          'cal-bg': '#0A0A0A',
          'cal-bg-emphasis': '#1A1A1A',
          'cal-bg-muted': '#141414',
          'cal-border': '#262626',
          'cal-text': '#F5F5F5',
          'cal-text-muted': '#A3A3A3',
        },
      },
      hideEventTypeDetails: false,
    });
  }, []);

  return (
    <section id="konsultacja" style={{ borderBottom: '1px solid var(--line)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '56px 32px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 48,
          background: 'var(--surface)', border: '1px solid var(--line)',
          borderRadius: 24, padding: 36, position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden style={{
            position: 'absolute', top: -120, right: -120, width: 360, height: 360,
            background: 'radial-gradient(circle, rgba(214,255,60,0.18) 0%, transparent 70%)',
          }} />
          <div style={{ position: 'relative' }}>
            <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', letterSpacing: '0.08em' }}>§ 06 / KONSULTACJA</div>
            <h2 style={{
              fontSize: 'clamp(36px, 4.5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.03em',
              margin: '14px 0 0', fontWeight: 500,
            }}>
              30 minut <span style={{ color: 'var(--accent)' }}>za darmo</span> – żeby&nbsp;sprawdzić, czy w&nbsp;ogóle warto.
            </h2>
            <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.5, maxWidth: 480 }}>
              Po rozmowie wiesz: jakim trybem otworzysz, ile to kosztuje w Twoim mieście, jakie ryzyka są realne, a jakie wymyślone.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                'Bez agresywnej sprzedaży – zero zobowiązań',
                'Spotkanie wideo (Google Meet) – link dostaniesz mailem',
                'Notatka po rozmowie: konkretne kroki dla Ciebie',
              ].map((b, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, fontSize: 15, color: 'var(--ink-2)' }}>
                  <span style={{ color: 'var(--accent)' }}>✓</span>
                  {b}
                </li>
              ))}
            </ul>
            <div style={{ marginTop: 32, fontSize: 13, color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
              Wybierz wolny termin obok →
            </div>
          </div>

          <div style={{
            position: 'relative',
            background: 'var(--bg-2)', borderRadius: 16,
            border: '1px solid var(--line)',
            minHeight: 620, overflow: 'hidden',
          }}>
            <div ref={calRef} style={{ width: '100%', height: '100%', minHeight: 620 }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, type = 'text' }) {
  return (
    <label style={{ display: 'block', marginBottom: 16 }}>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em', marginBottom: 8 }}>{label.toUpperCase()}</div>
      <input
        type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        style={{
          width: '100%', padding: '12px 14px', borderRadius: 10,
          background: 'var(--bg)', border: '1px solid var(--line-2)',
          color: 'var(--ink)', fontSize: 15, outline: 'none',
        }}
      />
    </label>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--bg-2)' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '36px 32px 28px',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48,
      }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Logo />
            <span style={{ fontWeight: 600, letterSpacing: '-0.01em' }}>Zakładam NZOZ</span>
          </div>
          <p style={{ marginTop: 16, color: 'var(--ink-3)', fontSize: 14, maxWidth: 360, lineHeight: 1.5 }}>
            Pomagam lekarzom uruchamiać własne praktyki w zgodzie z prawem, sanepidem i zdrowym rozsądkiem.
          </p>
        </div>
        <FooterCol title="Produkt" items={[
          ['Przewodnik', '#proces'],
          ['Kalkulator', '#kalkulator'],
          ['Cennik', '#konsultacja'],
        ]} />
        <FooterCol title="Firma" items={[
          ['O mnie', 'https://klinikabezryzyka.pl/o-mnie/'],
          ['Realizacje', '#realizacje'],
          ['Kontakt', 'mailto:kontakt@klinikabezryzyka.pl'],
        ]} />
        <FooterCol title="Prawne" items={[
          ['Regulamin', '#'],
          ['Polityka prywatności', '#'],
          ['RODO', '#'],
        ]} />
      </div>
      <div style={{
        borderTop: '1px solid var(--line)', padding: '20px 32px',
        display: 'flex', justifyContent: 'space-between', maxWidth: 1280, margin: '0 auto',
        fontSize: 13, color: 'var(--ink-3)',
      }}>
        <span className="mono">© 2026 ZAKŁADAM NZOZ</span>
        <span className="mono">NIP 000-00-00-000 · KRS 0000000000</span>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em', marginBottom: 14 }}>{title.toUpperCase()}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(([label, href]) => {
          const external = href.startsWith('http') || href.startsWith('mailto');
          return (
            <li key={label}>
              <a href={href}
                {...(external && href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 14 }}>
                {label}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Ticker = Ticker;
window.ProcessWizard = ProcessWizard;
window.Calculator = Calculator;
window.Documents = Documents;
window.FAQSection = FAQSection;
window.Lead = Lead;
window.Footer = Footer;