import { Link } from "react-router-dom";

const highlights = [
  {
    icon: "\u{1F4D6}",
    title: "Подробные описания",
    text: "Каждая методика с научным обоснованием, плюсами и минусами",
  },
  {
    icon: "\u{1F50D}",
    title: "Удобный поиск",
    text: "Быстрый поиск и фильтрация по категориям и параметрам",
  },
  {
    icon: "\u{1F4CA}",
    title: "Калькулятор BMI",
    text: "Рассчитайте индекс массы тела и получите рекомендации",
  },
  {
    icon: "\u{2696}\u{FE0F}",
    title: "Сравнение методик",
    text: "Сравните до 3 методик бок о бок для выбора подходящей",
  },
] as const;

export function HomePage() {
  return (
    <>
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-primary-50 via-white to-accent-50 py-20 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl dark:text-white">
            Методики похудения
            <span className="block text-primary-600 dark:text-primary-400">и здорового веса</span>
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
            Полный справочник научно обоснованных методик — от диет до физической активности.
            Найдите подход, который подойдёт именно вам.
          </p>
          <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
            <Link
              to="/methods"
              className="rounded-xl bg-primary-600 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-primary-500/25 transition hover:bg-primary-700 hover:shadow-xl"
            >
              Смотреть методики
            </Link>
            <Link
              to="/calculator"
              className="rounded-xl border-2 border-gray-300 bg-white px-8 py-3.5 text-base font-semibold text-gray-700 transition hover:border-primary-300 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:border-primary-600"
            >
              Рассчитать BMI
            </Link>
          </div>
        </div>
      </section>

      {/* Highlights */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-center text-3xl font-bold text-gray-900 dark:text-white">
            Что вас ждёт
          </h2>
          <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
            {highlights.map(({ icon, title, text }) => (
              <div
                key={title}
                className="rounded-2xl border border-gray-200 bg-white p-6 text-center transition-shadow hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"
              >
                <div className="text-4xl" aria-hidden="true">{icon}</div>
                <h3 className="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
                  {title}
                </h3>
                <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
                  {text}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}