export const STATS = [
  { num: "27", label: "ЛОР врачей работает в клинике", prefix: "Ежедневно" },
  { num: "6", label: "кандидатов медицинских наук", prefix: "В том числе" },
  { num: "12 000+", label: "успешно проведённых операций", prefix: "Свыше" },
];

export const DOCTORS = [
  {
    name: "Макарова Людмила Германовна",
    spec: "ЛОР врач, сурдолог",
    photo: "/doctors/makarova.jpg",
  },
  {
    name: "Семерикова Наталия Александровна",
    spec: "ЛОР врач, сурдолог, хирург. К.М.Н. Завед. Центром сурдологии",
    photo: "/doctors/semerikova.png",
  },
  {
    name: "Ворончихина Наталия Валерьевна",
    spec: "Отоневролог, хирург. К.М.Н., доцент кафедры ПГМУ",
    photo: "/doctors/voronchikhina.png",
  },
  {
    name: "Лобанова Ирина Юрьевна",
    spec: "ЛОР врач, сурдолог",
    photo: "/doctors/lobanova.jpg",
  },
  {
    name: "Торсунова Наталья Сергеевна",
    spec: "Специалист по слухопротезированию (сурдоакустик)",
    photo: "/doctors/torsunova.jpg",
  },
  {
    name: "Суворова Светлана Викторовна",
    spec: "ЛОР врач, сурдолог",
    photo: "/doctors/suvorova.jpg",
  },
];

export function DoctorsBlock() {
  return (
    <div className="space-y-8">
      {/* Заголовок + описание */}
      <div>
        <h2 className="font-bold mb-3" style={{ color: "#000000", fontSize: 36, lineHeight: "38px" }}>
          Приём ведут опытные ЛОР врачи
        </h2>
        <p className="text-sm" style={{ color: "#374151", lineHeight: 1.7 }}>
          Фундаментальная теоретическая подготовка и большой практический опыт в сочетании
          с внимательным индивидуальным подходом являются причиной успеха лечения тысяч наших пациентов
        </p>
      </div>

      {/* Статистика — без фона, border-bottom #60959c */}
      <div className="grid grid-cols-3 gap-6">
        {STATS.map((s) => (
          <div key={s.num} className="pb-3" style={{ borderBottom: "3px solid #60959c" }}>
            <p className="text-lg font-bold leading-snug" style={{ color: "#60959c" }}>
              {s.prefix} {s.num} {s.label}
            </p>
          </div>
        ))}
      </div>

      {/* Сетка врачей — 6 колонок */}
      <div className="grid grid-cols-6 gap-3">
        {DOCTORS.map((doc) => (
          <div key={doc.name} className="flex flex-col items-center text-center gap-1.5">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={doc.photo}
              alt={doc.name}
              style={{
                width: 110,
                height: 150,
                objectFit: "cover",
                objectPosition: "center top",
                borderRadius: 4,
                display: "block",
              }}
            />
            <div>
              <p className="text-xs font-medium leading-snug" style={{ color: "#60959c" }}>
                {doc.name}
              </p>
              <p className="text-[11px] mt-0.5 leading-snug" style={{ color: "#374151" }}>
                {doc.spec}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
