export const HERO_CHECKS = [
  { key: "БЕЗОПАСНО", desc: "оперируют хирурги с 15-летним опытом работы" },
  { key: "БЕЗ ВНЕШНИХ РАЗРЕЗОВ", desc: "хирургия сверхмалых размеров" },
  { key: "БЫСТРО", desc: "под наблюдением врача пациент находится 1 сутки" },
];

export function HeroBlock() {
  return (
    <div className="space-y-3">
      {/* H1 страницы */}
      <h2
        className="text-xl font-bold leading-snug"
        style={{ color: "#53514e" }}
      >
        ЛОР Клиника ухо, горло, нос – медицинский центр лечения ЛОР заболеваний у детей и взрослых
      </h2>

      {/* Баннер — единый светло-кремовый фон */}
      <div
        className="rounded-xl overflow-hidden flex"
        style={{ background: "#f9f4e7", minHeight: 280 }}
      >
        {/* Левая часть — контент */}
        <div
          className="flex flex-col justify-center gap-5 p-8"
          style={{ width: "50%", flexShrink: 0 }}
        >
          <p
            className="text-base font-bold uppercase leading-snug"
            style={{ color: "#111827" }}
          >
            Эндоскопическое хирургическое лечение ЛОР органов
          </p>
          <ul className="space-y-3">
            {HERO_CHECKS.map((c) => (
              <li key={c.key} className="flex items-start gap-2 text-sm">
                <span
                  className="shrink-0 font-bold"
                  style={{ color: "#bf9975", marginTop: 1 }}
                >
                  ✓
                </span>
                <span>
                  <span className="font-bold uppercase" style={{ color: "#111827" }}>
                    {c.key}
                  </span>{" "}
                  <span style={{ color: "#374151" }}>– {c.desc}</span>
                </span>
              </li>
            ))}
          </ul>
          <div>
            <button className="bb-btn bb-btn-md bb-btn-outline">
              Узнать стоимость операции
            </button>
          </div>
        </div>

        {/* Правая часть — фото врача */}
        <div className="flex-1 relative overflow-hidden" style={{ minHeight: 280 }}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/hero-doctor.jpg"
            alt="Врач на приёме с пациентом"
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "center top",
              position: "absolute",
              inset: 0,
            }}
          />
        </div>
      </div>

      {/* Под баннером: соцсети + просмотры */}
      <div className="flex items-center gap-3 pt-1">
        <span className="text-xs" style={{ color: "#9ca3af" }}>
          Поделиться:
        </span>
        {["VK", "FB", "TW"].map((s) => (
          <button
            key={s}
            className="text-xs px-2 py-1 rounded"
            style={{
              background: "#f9fafb",
              border: "1px solid #e5e7eb",
              color: "#9ca3af",
            }}
          >
            {s}
          </button>
        ))}
        <span className="text-xs ml-2" style={{ color: "#9ca3af" }}>
          👁 98 573 просмотра
        </span>
      </div>
    </div>
  );
}