import { Building2, GraduationCap, Microscope } from "lucide-react";

export function AboutPage() {
  return (
    <div className="page-shell py-12">
      <div className="rounded-xl bg-primary p-8 text-white sm:p-14">
        <p className="text-xs font-bold uppercase tracking-widest text-white/55">О медиапортале</p>
        <h1 className="mt-4 max-w-4xl font-serif text-4xl leading-tight sm:text-6xl">
          Университет говорит голосами тех, кто его создаёт
        </h1>
        <p className="mt-6 max-w-2xl text-lg leading-8 text-white/70">
          «ДГТУ МЕДИА» объединяет новости, исследования, события и истории сообщества в
          одном открытом цифровом пространстве.
        </p>
      </div>
      <div className="mt-10 grid gap-6 md:grid-cols-3">
        {[
          [GraduationCap, "Образование", "Показываем, как меняются программы и учебные практики."],
          [Microscope, "Исследования", "Объясняем сложные разработки ясным человеческим языком."],
          [Building2, "Сообщество", "Сохраняем события и голоса университетской жизни."],
        ].map(([Icon, title, text]) => {
          const ItemIcon = Icon;
          return (
            <div key={String(title)} className="rounded-lg border border-line bg-surface p-6">
              <ItemIcon className="size-6 text-accent" />
              <h2 className="mt-6 font-serif text-2xl">{String(title)}</h2>
              <p className="mt-3 leading-7 text-muted">{String(text)}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}
