import { MessageSquareTextIcon, PlaySquareIcon, Rows3Icon } from "lucide-react";

import { communityNotes } from "@/entities/site-content";
import { LoudTitle } from "@/shared/ui/loud-title";
import { SiteShell } from "@/widgets/site-shell";

export function CommunityPage() {
  return (
    <SiteShell>
      <LoudTitle
        label="Community"
        title="Комьюнити работает после последней защиты"
        text="Сильная онлайн-школа продает не только программу, но и среду, где продолжают показывать работу и получать обратную связь."
      />
      <section className="px-4 py-12 md:px-6">
        <div className="mx-auto grid max-w-7xl gap-6 md:grid-cols-3">
          {communityNotes.map((note) => (
            <article key={note.title} className="flex min-h-80 flex-col justify-between border-2 border-foreground bg-card p-6">
              <div>
                <MessageSquareTextIcon className="mb-16 size-8 text-primary" />
                <h2 className="text-3xl font-black uppercase leading-none">{note.title}</h2>
                <p className="mt-4 leading-7 text-muted-foreground">{note.text}</p>
              </div>
              <div className="mt-8 border-t-2 border-foreground pt-4 text-sm font-black uppercase">{note.cadence}</div>
            </article>
          ))}
        </div>
      </section>
      <section className="px-4 pb-12 md:px-6">
        <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[0.8fr_1.2fr]">
          <div className="border-2 border-foreground bg-secondary p-6">
            <PlaySquareIcon className="mb-10 size-8" />
            <h2 className="text-4xl font-black uppercase leading-none">Demo archive</h2>
            <p className="mt-4 leading-7">Записи защит, шаблоны артефактов и разборы доступны выпускникам после курса.</p>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            {[
              ["artifact library", "problem briefs, research boards, metric trees"],
              ["hiring rooms", "портфолио-ревью и разбор офферов"],
              ["peer circles", "мини-группы по роли и домену"],
              ["mentor threads", "асинхронные вопросы после live-сессий"],
            ].map(([title, text]) => (
              <div key={title} className="border-2 border-foreground bg-card p-5">
                <Rows3Icon className="mb-8 size-7 text-primary" />
                <h3 className="text-2xl font-black uppercase">{title}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </SiteShell>
  );
}