import Link from "next/link";
import { ArrowRight, Clock3, MapPin, Microscope, Users } from "lucide-react";

import { resolveIcon } from "@/components/icons";
import { getHomeData } from "@/lib/api";
import { fallbackHome } from "@/lib/fallback-data";

export default async function HomePage() {
  const data = await getHomeData();
  const { site } = data;
  const services = data.services.length ? data.services : fallbackHome.services;
  const doctors =
    data.doctors.length >= fallbackHome.doctors.length ? data.doctors : fallbackHome.doctors;

  return (
    <>
      <section className="hero">
        <div className="container hero__grid">
          <div className="hero__panel">
            <span className="eyebrow">Патоморфология и гистология</span>
            <div className="hero__kicker">Консультационное клиническое патологоанатомическое бюро</div>
            <h1>Точная диагностика</h1>
            <p>
              Гистологические исследования, консультации специалистов, официальные
              документы и контактная информация.
            </p>

            <div className="hero__actions">
              <Link className="button" href="/services">
                Исследования
                <ArrowRight size={18} />
              </Link>
            </div>

            <div className="hero__highlights">
              <Link className="hero__highlight" href="/services">
                <Microscope size={18} />
                <span>Гистологические исследования</span>
              </Link>
              <Link className="hero__highlight" href="/specialists">
                <Users size={18} />
                <span>Команда специалистов</span>
              </Link>
            </div>

            <div className="hero__facts">
              <Link className="hero__fact" href="/documents">
                <Clock3 size={18} />
                <strong>
                  Пн-Пт 08:00-17:00,
                  <br />
                  Сб 09:00-14:00
                </strong>
                <p>Режим работы и организационная информация доступны в разделе документов.</p>
              </Link>
              <Link className="hero__fact" href="/documents">
                <MapPin size={18} />
                <strong>
                  Ставрополь,
                  <br />
                  ул. Балакирева, 5
                </strong>
                <p>Адрес, контакты и обязательные сведения размещены в одном разделе.</p>
              </Link>
            </div>
          </div>

          <div className="hero__visual hero__visual--info">
            <div className="hero__visual-grid">
              <div className="hero__visual-card">
                <span className="hero__visual-label">Документы</span>
                <strong>Лицензии и сведения о медицинской организации</strong>
                <p>Официальная информация собрана в одном разделе с быстрым доступом.</p>
                <Link href="/documents" className="ghost-button">
                  Открыть документы
                </Link>
              </div>

              <div className="hero__visual-card">
                <span className="hero__visual-label">Специалисты</span>
                <strong>Врачи и сотрудники бюро</strong>
                <p>Информация о специалистах, направлениях работы и профессиональном составе.</p>
                <Link href="/specialists" className="ghost-button">
                  Смотреть специалистов
                </Link>
              </div>

              <div className="hero__visual-card hero__visual-card--accent">
                <span className="hero__visual-label">Контакты</span>
                <strong>
                  {site.city}, {site.address}
                </strong>
                <p>{site.working_hours}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-shell">
            <div className="section-heading">
              <span className="eyebrow">Услуги</span>
              <h2>Основные направления работы бюро</h2>
              <p>Информация об исследованиях и консультациях специалистов.</p>
            </div>
            <div className="grid grid--3">
              {services.map((service) => (
                <article className="card" key={service.id}>
                  <div className="icon-chip">{resolveIcon(service.icon)}</div>
                  <h3>{service.title}</h3>
                  <p>{service.short_description}</p>
                  <Link href="/services" className="ghost-button">
                    Подробнее
                  </Link>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-shell">
            <div className="section-heading">
              <span className="eyebrow">Специалисты</span>
              <h2>Команда бюро</h2>
              <p>Сведения о врачах и сотрудниках бюро.</p>
            </div>
            <div className="grid grid--3">
              {doctors.map((doctor) => (
                <article className="card" key={doctor.id}>
                  <div className="doctor-card__name">{doctor.full_name}</div>
                  <div className="doctor-card__role">{doctor.position}</div>
                  <p>{doctor.bio}</p>
                  <p>{doctor.credentials}</p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}