/* === Global modals, cookie banner, mobile CTA bar === */
/* Event-driven: dispatch a CustomEvent on window to open any modal from anywhere */

const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

/* ---------- Booking modal ---------- */
function BookingModal() {
  const [open, setOpen] = useStateM(false);
  const [trigger, setTrigger] = useStateM("default");
  const [form, setForm] = useStateM({ name: "", phone: "", consent: false });
  const [errors, setErrors] = useStateM({});
  const [submitting, setSubmitting] = useStateM(false);
  const [submitted, setSubmitted] = useStateM(false);

  useEffectM(() => {
    const onOpen = (e) => {
      setTrigger((e.detail && e.detail.trigger) || "default");
      setSubmitted(false);
      setForm({ name: "", phone: "", consent: false });
      setErrors({});
      setOpen(true);
    };
    window.addEventListener("open-booking", onOpen);
    return () => window.removeEventListener("open-booking", onOpen);
  }, []);

  useEffectM(() => {
    document.body.classList.toggle("modal-open", open);
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  if (!open) return null;

  const set = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm({ ...form, [k]: v });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const submit = async (ev) => {
    ev.preventDefault();
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = "Укажите имя";
    if (!/^[+\d][\d\s()\-]{8,}$/.test(form.phone.trim())) e.phone = "Введите телефон в формате +7…";
    if (!form.consent) e.consent = "Без согласия не можем продолжить";
    if (Object.keys(e).length) { setErrors(e); return; }
    setSubmitting(true);
    try {
      const body = new URLSearchParams();
      body.set("name", form.name.trim());
      body.set("phone", form.phone.trim());
      body.set("consent", "true");
      body.set("source", trigger || "booking");
      const r = await fetch("/api/booking", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: body.toString(),
      });
      const data = await r.json().catch(() => ({}));
      if (!r.ok || data.ok === false) {
        const fieldErrs = {};
        (data.errors || []).forEach((k) => {
          if (k === "name") fieldErrs.name = "Проверьте имя";
          else if (k === "phone") fieldErrs.phone = "Проверьте телефон";
          else if (k === "consent") fieldErrs.consent = "Без согласия не можем продолжить";
        });
        if (!Object.keys(fieldErrs).length) fieldErrs.phone = r.status === 429 ? "Слишком много запросов — попробуйте позже" : "Не удалось отправить — позвоните по телефону";
        setErrors(fieldErrs);
        setSubmitting(false);
        return;
      }
      setSubmitting(false);
      setSubmitted(true);
    } catch (err) {
      setErrors({ phone: "Сеть недоступна — позвоните по телефону" });
      setSubmitting(false);
    }
  };

  const titles = {
    default: { eyebrow: "Запись", title: "Бесплатная консультация" },
    method:  { eyebrow: "Метод", title: "Узнать, подходит ли мне реконструкция" },
    cta:     { eyebrow: "Запись", title: "Записаться на ближайшее время" },
    snapshot:{ eyebrow: "Снимки", title: "Получить заключение по МРТ/КТ" },
  };
  const t = titles[trigger] || titles.default;

  return (
    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && setOpen(false)}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="modal-close" onClick={() => setOpen(false)} aria-label="Закрыть">×</button>

        {submitted ? (
          <>
            <div className="modal-check">✓</div>
            <h2 className="modal-title">Заявка принята</h2>
            <p className="body-l" style={{ fontSize: 15 }}>
              Спасибо, {form.name || "пациент"}. Координатор перезвонит на номер{" "}
              <span className="mono" style={{ color: "var(--ink)" }}>{form.phone}</span>{" "}
              в течение рабочего дня (8:00–20:00, без выходных).
            </p>
            <p className="body-l" style={{ fontSize: 14 }}>
              Пока ждёте — можно прислать МРТ/КТ на e-mail:{" "}
              <a href="mailto:med4424@yandex.ru" className="uline" style={{ color: "var(--accent-ink)" }}>
                med4424@yandex.ru
              </a>.
            </p>
            <button className="btn btn-primary" onClick={() => setOpen(false)} style={{ alignSelf: "flex-start", marginTop: 8 }}>
              Хорошо
            </button>
          </>
        ) : (
          <form onSubmit={submit} noValidate>
            <div className="modal-eyebrow">{t.eyebrow}</div>
            <h2 className="modal-title" style={{ marginBottom: 8 }}>{t.title}</h2>
            <p className="body-l" style={{ fontSize: 14, marginBottom: 20 }}>
              Координатор перезвонит в рабочее время. Без обязательств и&nbsp;давления.
            </p>

            <div className="form" style={{ gap: 16 }}>
              <div className={`field ${errors.name ? "invalid" : ""}`}>
                <label>Как к вам обращаться *</label>
                <input type="text" value={form.name} onChange={set("name")} placeholder="Иван Иванов" autoFocus />
                {errors.name && <div className="field-error">{errors.name}</div>}
              </div>
              <div className={`field ${errors.phone ? "invalid" : ""}`}>
                <label>Телефон *</label>
                <input type="tel" value={form.phone} onChange={set("phone")} placeholder="+7 ___ ___ __ __" />
                {errors.phone && <div className="field-error">{errors.phone}</div>}
              </div>
              <label className="checkbox-row">
                <input type="checkbox" checked={form.consent} onChange={set("consent")} />
                <span>
                  Согласен(-на) на обработку{" "}
                  <a href="https://pervaya-medklinika.ru/privacy/" className="uline" target="_blank" rel="noopener">персональных данных</a>{" "}
                  согласно 152-ФЗ.
                  {errors.consent && <span style={{display:"block", color:"var(--danger)", marginTop: 4}}>{errors.consent}</span>}
                </span>
              </label>
              <button type="submit" className="btn btn-primary" disabled={submitting} style={{ alignSelf: "stretch", justifyContent: "center", marginTop: 4 }}>
                {submitting ? "Отправляем…" : "Записаться"}
                {!submitting && <span className="arrow">→</span>}
              </button>
              <div className="mono text-mute" style={{ fontSize: 11, textAlign: "center", marginTop: 4 }}>
                Или сразу позвоните <a href="tel:+78129075050" className="uline" style={{ color: "var(--ink)" }}>+7 (812) 907-50-50</a>
              </div>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

/* ---------- Indication detail modal ---------- */
function IndicationModal() {
  const [openKey, setOpenKey] = useStateM(null);

  useEffectM(() => {
    const onOpen = (e) => setOpenKey(e.detail.key);
    window.addEventListener("open-indication", onOpen);
    return () => window.removeEventListener("open-indication", onOpen);
  }, []);

  useEffectM(() => {
    document.body.classList.toggle("modal-open", !!openKey);
    const onKey = (e) => { if (e.key === "Escape") setOpenKey(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [openKey]);

  if (!openKey) return null;

  const details = window.INDICATION_DETAILS || {};
  const data = details[openKey];
  if (!data) return null;

  return (
    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && setOpenKey(null)}>
      <div className="modal modal-wide" role="dialog" aria-modal="true">
        <button className="modal-close" onClick={() => setOpenKey(null)} aria-label="Закрыть">×</button>

        <div className="modal-eyebrow">Что мы лечим</div>
        <h2 className="modal-title">{data.title}</h2>
        <p className="body-l" style={{ fontSize: 17, color: "var(--ink-soft)" }} dangerouslySetInnerHTML={{ __html: data.intro }} />

        <div className="modal-section">
          <div className="eyebrow" style={{ marginBottom: 14 }}>Признаки и симптомы</div>
          <ul className="modal-list">
            {data.bullets.map((b, i) => (
              <li key={i} dangerouslySetInnerHTML={{ __html: b }} />
            ))}
          </ul>
        </div>

        <div className="modal-section modal-treatment">
          <div className="eyebrow" style={{ marginBottom: 10, color: "var(--accent-ink)" }}>Как лечим</div>
          <p dangerouslySetInnerHTML={{ __html: data.treatment }} />
        </div>

        <div className="modal-actions">
          <button
            className="btn btn-primary"
            onClick={() => {
              setOpenKey(null);
              setTimeout(() => window.dispatchEvent(new CustomEvent("open-booking", { detail: { trigger: "default" } })), 200);
            }}
          >
            Записаться на консультацию <span className="arrow">→</span>
          </button>
          <a href="tel:+78129075050" className="btn btn-ghost">
            +7 (812) 907-50-50
          </a>
        </div>
      </div>
    </div>
  );
}

/* ---------- Doctor profile modal ---------- */
function DoctorModal() {
  const [open, setOpen] = useStateM(false);
  const [activeDoc, setActiveDoc] = useStateM(null);

  useEffectM(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener("open-doctor", onOpen);
    return () => window.removeEventListener("open-doctor", onOpen);
  }, []);

  useEffectM(() => {
    document.body.classList.toggle("modal-open", open);
    const onKey = (e) => {
      if (e.key === "Escape") {
        if (activeDoc) setActiveDoc(null);
        else setOpen(false);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, activeDoc]);

  if (!open) return null;

  // Реальные сканы документов с pervaya-medklinika.ru/yastrebov/
  // Подписи на сайте клиники отсутствуют — даны нейтральные.
  const documents = [
    { id: "vk",       title: "Удостоверение о высшей квалификационной категории", image: "doctor-certs/cert-VK-preview.jpg", pdf: "doctor-certs/cert-VK.pdf" },
    { id: "diplom1",  title: "Диплом · медицинский институт ПетрГУ, 2001", image: "doctor-certs/cert-04.jpg" },
    { id: "diplom2",  title: "Диплом ординатуры · нейрохирургия, РНХИ им. А. Л. Поленова, 2006", image: "doctor-certs/cert-05.jpg" },
    { id: "diplom3",  title: "Диплом / удостоверение об образовании", image: "doctor-certs/cert-06.jpg" },
    { id: "diplom4",  title: "Диплом / удостоверение об образовании", image: "doctor-certs/cert-07.jpg" },
    { id: "diplom5",  title: "Диплом / удостоверение об образовании", image: "doctor-certs/cert-08.jpg" },
    { id: "cert1",    title: "Сертификат специалиста", image: "doctor-certs/cert-01.jpg" },
    { id: "cert2",    title: "Сертификат специалиста", image: "doctor-certs/cert-02.jpg" },
    { id: "cert3",    title: "Сертификат специалиста", image: "doctor-certs/cert-03.jpg" },
  ];

  return (
    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && setOpen(false)}>
      <div className="modal modal-doctor" role="dialog" aria-modal="true">
        <button className="modal-close" onClick={() => setOpen(false)} aria-label="Закрыть">×</button>

        <div className="doctor-modal-head">
          <div className="doctor-modal-portrait">
            <img
              src="https://pervaya-medklinika.ru/wp-content/uploads/2020/11/00101-931x1024.jpg"
              alt="Ястребов Роман Александрович"
              loading="lazy"
            />
          </div>
          <div className="doctor-modal-info">
            <div className="modal-eyebrow">Главный врач клиники</div>
            <h2 className="modal-title" style={{ fontSize: "clamp(28px, 3vw, 40px)" }}>
              Ястребов<br />Роман Александрович
            </h2>
            <div className="doctor-modal-tags">
              <span className="dmt">Нейрохирург</span>
              <span className="dmt">Вертебролог</span>
              <span className="dmt">Артролог</span>
              <span className="dmt">Ортопед-травматолог</span>
              <span className="dmt">Высшая категория</span>
            </div>
          </div>
        </div>

        <div className="doctor-modal-section">
          <h3 className="doctor-modal-sec-title">О враче</h3>
          <p>
            Главный врач «Первой Медицинской Клиники», нейрохирург высшей квалификационной
            категории. Стаж более {new Date().getFullYear() - 2006}&nbsp;лет. Закончил медицинский институт ПетрГУ
            в&nbsp;2001&nbsp;году, прошёл интернатуру в&nbsp;Республиканской больнице
            им.&nbsp;В.&nbsp;А.&nbsp;Баранова (Петрозаводск, 2002), ординатуру по&nbsp;нейрохирургии
            в&nbsp;РНХИ им.&nbsp;профессора&nbsp;А.&nbsp;Л.&nbsp;Поленова (2006).
          </p>
          <p style={{ marginTop: 12 }}>
            Авторская методика — реконструкция межпозвонкового диска под мониторинговой
            3D-навигацией. Проводит процедуру лично — таких специалистов в&nbsp;России
            не&nbsp;много. Профильные направления: нейрохирургия, вертебрология, артрология,
            ортопедия-травматология.
          </p>
        </div>

        <div className="doctor-modal-section">
          <h3 className="doctor-modal-sec-title">Образование и опыт</h3>
          <div className="doctor-timeline">
            <div className="dt-item">
              <div className="dt-marker"></div>
              <div className="dt-content">
                <div className="dt-year">2001</div>
                <div className="dt-text">Медицинский институт ПетрГУ</div>
              </div>
            </div>
            <div className="dt-item">
              <div className="dt-marker"></div>
              <div className="dt-content">
                <div className="dt-year">2002</div>
                <div className="dt-text">Интернатура · Республиканская больница им.&nbsp;В.&nbsp;А.&nbsp;Баранова, Петрозаводск</div>
              </div>
            </div>
            <div className="dt-item">
              <div className="dt-marker"></div>
              <div className="dt-content">
                <div className="dt-year">2002–2004</div>
                <div className="dt-text">Больница скорой медицинской помощи, Петрозаводск</div>
              </div>
            </div>
            <div className="dt-item">
              <div className="dt-marker"></div>
              <div className="dt-content">
                <div className="dt-year">2004–2006</div>
                <div className="dt-text">РНХИ им.&nbsp;профессора&nbsp;А.&nbsp;Л.&nbsp;Поленова · ординатура и&nbsp;работа</div>
              </div>
            </div>
            <div className="dt-item">
              <div className="dt-marker"></div>
              <div className="dt-content">
                <div className="dt-year">2006–2016</div>
                <div className="dt-text">Практика в&nbsp;частных клиниках Санкт-Петербурга</div>
              </div>
            </div>
            <div className="dt-item">
              <div className="dt-marker"></div>
              <div className="dt-content">
                <div className="dt-year">Сейчас</div>
                <div className="dt-text">Главный врач «Первой Медицинской Клиники». Реконструкция межпозвонковых дисков под&nbsp;3D-навигацией</div>
              </div>
            </div>
          </div>
        </div>

        <div className="doctor-modal-section">
          <h3 className="doctor-modal-sec-title">Документы и сертификаты</h3>
          <p className="doctor-modal-sec-sub">
            Сканы с&nbsp;официального сайта клиники. Нажмите на&nbsp;документ —
            откроется полная версия. Оригиналы доступны для&nbsp;просмотра в&nbsp;клинике.
          </p>
          <div className="doctor-docs-grid">
            {documents.map((d) => (
              <button
                key={d.id}
                type="button"
                className="doctor-doc"
                onClick={() => setActiveDoc(d)}
              >
                <div className="doctor-doc-thumb" data-color={d.id} style={d.image ? { padding: 0, overflow: "hidden" } : null}>
                  {d.image ? (
                    <img src={d.image} alt={d.title} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                  ) : (
                    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M8 4h12l4 4v20H8z" />
                      <path d="M20 4v4h4" />
                      <path d="M12 14h8M12 18h8M12 22h5" />
                    </svg>
                  )}
                </div>
                <div className="doctor-doc-meta">
                  <div className="doctor-doc-title">{d.title}</div>
                  {d.pdf && <div className="doctor-doc-year">PDF</div>}
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="modal-actions">
          <button
            className="btn btn-primary"
            onClick={() => {
              setOpen(false);
              setTimeout(() => window.dispatchEvent(new CustomEvent("open-booking", { detail: { trigger: "default" } })), 200);
            }}
          >
            Записаться к врачу <span className="arrow">→</span>
          </button>
          <a href="tel:+78129075050" className="btn btn-ghost">
            +7 (812) 907-50-50
          </a>
        </div>

        {activeDoc && (
          <div className="doc-zoom" onClick={() => setActiveDoc(null)}>
            <button
              className="doc-zoom-close"
              onClick={(e) => { e.stopPropagation(); setActiveDoc(null); }}
              aria-label="Закрыть"
            >×</button>
            <div className="doc-zoom-inner" onClick={(e) => e.stopPropagation()}>
              <div className="doc-zoom-paper" style={{ padding: 0, overflow: "hidden", background: "var(--bg)" }}>
                {activeDoc.image ? (
                  <img src={activeDoc.image} alt={activeDoc.title} style={{ display: "block", maxWidth: "100%", maxHeight: "80vh", margin: "0 auto" }} />
                ) : (
                  <div className="doc-zoom-placeholder" style={{ padding: 32 }}>
                    Скан документа загрузит администратор клиники.
                    Оригинал доступен для&nbsp;просмотра в&nbsp;клинике
                    при&nbsp;первом приёме.
                  </div>
                )}
                <div style={{ padding: "12px 20px", borderTop: "1px solid var(--rule)" }}>
                  <div className="doc-zoom-eyebrow">Документ</div>
                  <div className="doc-zoom-title">{activeDoc.title}</div>
                  {activeDoc.pdf && (
                    <a href={activeDoc.pdf} target="_blank" rel="noopener" className="uline" style={{ fontSize: 13, color: "var(--accent-ink)" }}>
                      Открыть PDF →
                    </a>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function EmailModal() {
  const [open, setOpen] = useStateM(false);

  useEffectM(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener("open-email", onOpen);
    return () => window.removeEventListener("open-email", onOpen);
  }, []);

  // Любой клик по ссылке на e-mail клиники открывает эту модалку (кнопка «открыть почту» с ?subject не затрагивается)
  useEffectM(() => {
    const onClick = (e) => {
      const a = e.target.closest && e.target.closest('a[href="mailto:med4424@yandex.ru"]');
      if (a) { e.preventDefault(); setOpen(true); }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  useEffectM(() => {
    document.body.classList.toggle("modal-open", open);
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  const [copied, setCopied] = useStateM(false);
  const copyEmail = () => {
    const text = "med4424@yandex.ru";
    const fallback = () => {
      try {
        const ta = document.createElement("textarea");
        ta.value = text;
        ta.setAttribute("readonly", "");
        ta.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;";
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        ta.setSelectionRange(0, text.length);
        document.execCommand("copy");
        document.body.removeChild(ta);
      } catch (e) {}
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).catch(fallback);
    } else {
      fallback();
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  if (!open) return null;

  const subject = encodeURIComponent("Снимки на консультацию");
  const body = encodeURIComponent(
    "Здравствуйте!\n\nПрилагаю имеющиеся МРТ/КТ и описание жалоб.\n\nИмя:\nТелефон:\nДиагноз/жалобы:\n\nСпасибо."
  );

  return (
    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && setOpen(false)}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="modal-close" onClick={() => setOpen(false)} aria-label="Закрыть">×</button>

        <div className="modal-eyebrow">Заочная консультация</div>
        <h2 className="modal-title">Пришлите МРТ или КТ на e-mail</h2>
        <p className="body-l" style={{ fontSize: 15 }}>
          Прикрепите снимки (DICOM, JPG или ссылку на облако) и&nbsp;опишите жалобы.
          Врач посмотрит в&nbsp;течение 1–2 рабочих дней и&nbsp;скажет, подходит&nbsp;ли
          вам процедура и&nbsp;какова ориентировочная стоимость. Бесплатно, без обязательств.
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 8 }}>
          <a
            href={`mailto:med4424@yandex.ru?subject=${subject}&body=${body}`}
            className="btn btn-primary"
            style={{ justifyContent: "center" }}
          >
            Открыть почтовый клиент
            <span className="arrow">→</span>
          </a>
          <button
            type="button"
            className={`btn ${copied ? "btn-accent" : "btn-ghost"}`}
            onClick={copyEmail}
            style={{ justifyContent: "center" }}
          >
            {copied ? "✓ Адрес скопирован" : "Скопировать адрес · med4424@yandex.ru"}
          </button>
        </div>

        <div className="mono text-mute" style={{ fontSize: 11, marginTop: 8, lineHeight: 1.5 }}>
          Отправляя снимки, вы соглашаетесь на&nbsp;обработку медицинских данных
          в&nbsp;целях получения консультации согласно ФЗ-152 и&nbsp;ст.&nbsp;13 ФЗ-323.
        </div>
      </div>
    </div>
  );
}

/* ---------- Cookie banner ---------- */
function CookieBanner() {
  const [visible, setVisible] = useStateM(false);

  useEffectM(() => {
    try {
      const v = localStorage.getItem("pmk-cookies");
      if (!v) setVisible(true);
    } catch (e) {
      setVisible(true);
    }
  }, []);

  const ack = (level) => {
    try { localStorage.setItem("pmk-cookies", level); } catch (e) {}
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div className="cookie-banner" role="dialog" aria-label="Cookies">
      <p>
        Сайт использует cookies для корректной работы и&nbsp;анализа посещений.
        Продолжая просмотр, вы&nbsp;соглашаетесь с&nbsp;{" "}
        <a href="https://pervaya-medklinika.ru/privacy/" target="_blank" rel="noopener">политикой обработки персональных данных</a>{" "}
        и&nbsp;использованием cookie-файлов в&nbsp;соответствии с&nbsp;ФЗ-152.
      </p>
      <div className="cookie-banner-actions">
        <button className="cookie-btn" onClick={() => ack("essential")}>Только необходимые</button>
        <button className="cookie-btn primary" onClick={() => ack("all")}>Принять все</button>
      </div>
    </div>
  );
}

/* ---------- Mobile sticky CTA bar ---------- */
function MobileCtaBar() {
  return (
    <div className="mobile-cta">
      <a href="tel:+78129075050" aria-label="Позвонить">
        <span>☎</span> Позвонить
      </a>
      <a
        href="mailto:med4424@yandex.ru"
        className="mail"
        aria-label="E-mail"
        onClick={(e) => {
          e.preventDefault();
          window.dispatchEvent(new CustomEvent("open-email"));
        }}
      >
        <span>✉</span> E-mail
      </a>
      <a
        href="contact.html"
        className="primary"
        onClick={(e) => {
          e.preventDefault();
          window.dispatchEvent(new CustomEvent("open-booking", { detail: { trigger: "cta" } }));
        }}
      >
        Записаться →
      </a>
    </div>
  );
}

/* ---------- Inline CTA card (drop into sections) ---------- */
function CtaCard({ title, text, primaryLabel = "Записаться", trigger = "default", secondary = "email", call = false }) {
  return (
    <div className="cta-card">
      <div>
        <div className="eyebrow">Следующий шаг</div>
        <h3 className="serif" style={{ marginTop: 8 }}>{title}</h3>
        {text && <p className="body-l" style={{ marginTop: 12, fontSize: 15 }}>{text}</p>}
      </div>
      <div className="cta-card-actions">
        <button
          className="btn btn-primary"
          onClick={() => window.dispatchEvent(new CustomEvent("open-booking", { detail: { trigger } }))}
        >
          {primaryLabel} <span className="arrow">→</span>
        </button>
        {secondary === "email" && (
          <button
            className="btn btn-ghost"
            onClick={() => window.dispatchEvent(new CustomEvent("open-email"))}
          >
            Прислать МРТ на e-mail
          </button>
        )}
        <a href="tel:+78129075050" className="btn btn-ghost" style={{ justifyContent: "center" }}>
          Позвонить
        </a>
      </div>
    </div>
  );
}

/* ---------- Legal section (drop into footer) ---------- */
function LegalSection() {
  return (
    <div className="legal-section">
      <div className="legal-disclaimer">
        <div className="legal-disclaimer-icon">!</div>
        <div>
          <strong style={{ color: "var(--bg)" }}>Имеются противопоказания. Необходима консультация специалиста.</strong>
          {" "}
          Информация на&nbsp;сайте носит ознакомительный характер и&nbsp;не&nbsp;является
          публичной офертой (ст.&nbsp;437 ГК&nbsp;РФ). Медицинская реклама размещена
          в&nbsp;соответствии со&nbsp;ст.&nbsp;24 ФЗ&nbsp;«О&nbsp;рекламе».
        </div>
      </div>
      <div className="legal-grid">
        <div>
          <h5>Реквизиты клиники</h5>
          <p>
            <strong style={{ color: "var(--bg)" }}>ООО «Е.М.К.» — Первая Медицинская Клиника</strong><br />
            ИНН 7838486399 · КПП 783801001<br />
            ОГРН 1137847066862<br />
            190013, Санкт-Петербург,<br />ул. Рузовская, д. 29, литера А, пом. 6-Н
          </p>
        </div>
        <div>
          <h5>Лицензия и документы</h5>
          <p>
            Медицинская деятельность осуществляется на&nbsp;основании лицензии
            №&nbsp;<button type="button" onClick={() => window.dispatchEvent(new CustomEvent("open-license"))} className="mono" style={{ color: "var(--bg)", background: "none", border: 0, borderBottom: "1px solid currentColor", padding: 0, font: "inherit", cursor: "pointer" }}>ЛО-78-01-011038</button>,
            выданной Комитетом по&nbsp;здравоохранению Санкт-Петербурга. Учредительные
            документы и&nbsp;перечень работ/услуг предоставляются согласно ст.&nbsp;79 ФЗ-323
            «Об&nbsp;основах охраны здоровья граждан в&nbsp;РФ».
          </p>
        </div>
        <div>
          <h5>Персональные данные · cookies</h5>
          <p>
            Обработка данных проводится в&nbsp;соответствии с&nbsp;ФЗ-152
            «О&nbsp;персональных данных». Подробнее — в&nbsp;
            <a href="https://pervaya-medklinika.ru/privacy/" target="_blank" rel="noopener">политике конфиденциальности</a>.
            Cookie-файлы используются для&nbsp;аналитики и&nbsp;улучшения работы сайта.
          </p>
        </div>
        <div>
          <h5>Права пациента</h5>
          <p>
            Право на&nbsp;информированное добровольное согласие, отказ от&nbsp;медицинского
            вмешательства, выбор врача и&nbsp;клиники, врачебную тайну — гарантируются
            ст.&nbsp;19–22 ФЗ-323. Жалобы и&nbsp;претензии&nbsp;— на&nbsp;<a href="mailto:med4424@yandex.ru" className="uline">med4424@yandex.ru</a>.
          </p>
        </div>
      </div>
    </div>
  );
}

/* ---------- License modal ---------- */
function LicenseModal() {
  const [open, setOpen] = useStateM(false);
  useEffectM(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener("open-license", onOpen);
    return () => window.removeEventListener("open-license", onOpen);
  }, []);
  useEffectM(() => {
    document.body.classList.toggle("modal-open", open);
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={(e) => e.target === e.currentTarget && setOpen(false)}>
      <div className="modal" role="dialog" aria-modal="true" style={{ maxWidth: 640 }}>
        <button className="modal-close" onClick={() => setOpen(false)} aria-label="Закрыть">×</button>
        <div className="modal-eyebrow">Лицензия</div>
        <h2 className="modal-title" style={{ fontSize: "clamp(24px, 3vw, 34px)", marginBottom: 8 }}>№ ЛО-78-01-011038</h2>
        <p className="body-l" style={{ fontSize: 14, marginBottom: 16 }}>
          На&nbsp;осуществление медицинской деятельности. ООО&nbsp;«Е.М.К.» — Первая Медицинская Клиника.
          Выдана Комитетом по&nbsp;здравоохранению Санкт-Петербурга.
        </p>
        <a href="license.jpg" target="_blank" rel="noopener" style={{ display: "block" }}>
          <img
            src="license.jpg"
            alt="Лицензия ЛО-78-01-011038 — ООО «Е.М.К.»"
            loading="lazy"
            style={{ width: "100%", maxHeight: "70vh", objectFit: "contain", display: "block", borderRadius: "var(--radius)", border: "1px solid var(--rule)", background: "var(--bg)" }}
          />
        </a>
        <div className="mono text-mute" style={{ fontSize: 11, marginTop: 10, textAlign: "center" }}>
          Нажмите на&nbsp;изображение, чтобы открыть в&nbsp;полном размере
        </div>
      </div>
    </div>
  );
}

/* ---------- Root: mount all globals ---------- */
function GlobalUI() {
  return (
    <>
      <BookingModal />
      <EmailModal />
      <LicenseModal />
      <IndicationModal />
      <DoctorModal />
      <CookieBanner />
      <MobileCtaBar />
    </>
  );
}

/* ---------- Helper: open booking from any onClick ---------- */
function openBooking(trigger = "default") {
  window.dispatchEvent(new CustomEvent("open-booking", { detail: { trigger } }));
}
function openEmail() {
  window.dispatchEvent(new CustomEvent("open-email"));
}

Object.assign(window, {
  BookingModal, EmailModal, CookieBanner, MobileCtaBar,
  CtaCard, LegalSection, GlobalUI, openBooking, openEmail,
});