import type { Metadata } from "next";
import Image from "next/image";
import { PageHero } from "@/components/PageHero";
import { PhotoStrip } from "@/components/PhotoStrip";
import { Section } from "@/components/Section";
import { sdgs, site, team, values } from "@/lib/contact";
import { photos } from "@/lib/reviews";

export const metadata: Metadata = {
  title: "Hakkımızda",
  description: site.description,
};

export default function AboutPage() {
  const heroPhoto = photos.cemberlitas[18];
  const sidePhotos = [11, 27, 33].map((i) => photos.cemberlitas[i]);
  const strip = [4, 16, 22, 39].map((i) => photos.cemberlitas[i]);

  return (
    <>
      <PageHero
        eyebrow="Hakkımızda"
        title={<>STEM için, gençler tarafından</>}
        lead="Impact; robotik yarışmaları, ideathonlar ve eğitim programlarıyla Türkiye'de STEM ekosisteminin her geçen gün gelişmesini sağlayan bir gençlik topluluğu."
        variant="photo"
        photo={{ src: heroPhoto.src, alt: "Impact etkinlikten bir kare" }}
      />

      {/* MISSION */}
      <Section eyebrow="Misyon" title="Hedefimiz">
        <div className="grid gap-10 md:grid-cols-12">
          <div className="md:col-span-7">
            <p className="text-xl leading-relaxed text-neutral-800">
              Bilim, teknoloji, mühendislik ve matematiği{" "}
              <strong className="font-black">herkes için erişilebilir</strong> kılmak;
              ilham veren bir gelecek tasarlamak ve gençleri 21. yüzyılın becerileriyle
              buluşturmak.
            </p>
            <p className="mt-6 text-lg leading-relaxed text-neutral-700">
              Her etkinliğimiz, geleceği sadece anlayan değil aktif olarak inşa eden bir
              nesil yetiştirmeyi hedefler. Gençleri eğitim, sosyal etki ve sürdürülebilir
              kalkınmanın kesişiminde gerçek dünya teknolojileriyle tanıştırıyoruz.
            </p>
          </div>
          <div className="grid grid-cols-3 gap-3 md:col-span-5">
            {sidePhotos.map((p) => (
              <div
                key={p.src}
                className="relative aspect-[3/4] overflow-hidden border-2 border-neutral-900 bg-neutral-200"
              >
                <Image
                  src={p.src}
                  alt=""
                  fill
                  sizes="(min-width: 768px) 15vw, 33vw"
                  className="object-cover"
                />
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* TEAM */}
      <Section tone="muted" eyebrow="Ekip" title="Kurucu ekip">
        <div className="grid gap-5 md:grid-cols-3">
          {team.map((m) => (
            <div
              key={m.name}
              className="flex flex-col justify-between gap-8 border-2 border-neutral-900 bg-white p-8"
            >
              <div>
                <span className="inline-flex size-14 items-center justify-center bg-violet-700 text-base font-black text-white">
                  {m.name
                    .split(" ")
                    .map((w) => w[0])
                    .slice(0, 2)
                    .join("")}
                </span>
                <div className="mt-6 text-2xl font-black leading-tight tracking-tight">
                  {m.name}
                </div>
                <div className="mt-2 text-xs font-black uppercase tracking-[0.2em] text-neutral-500">
                  {m.role}
                </div>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* PHOTO STRIP */}
      <section className="border-b-2 border-neutral-900 bg-white">
        <div className="mx-auto max-w-[1400px] px-6 py-14 md:px-10">
          <PhotoStrip photos={strip} />
        </div>
      </section>

      {/* VALUES */}
      <Section eyebrow="Değerler" title="Bizi yönlendiren altı ilke">
        <div className="flex flex-wrap gap-2">
          {values.map((v) => (
            <span
              key={v}
              className="border-2 border-neutral-900 bg-white px-5 py-2.5 text-sm font-black uppercase tracking-[0.2em]"
            >
              {v}
            </span>
          ))}
        </div>
      </Section>

      {/* SDG */}
      <Section tone="dark" eyebrow="Sürdürülebilir kalkınma" title="Desteklediğimiz BM SDG'leri">
        <div className="grid gap-4 md:grid-cols-4">
          {sdgs.map((s) => (
            <div
              key={s.number}
              className="border-2 border-white/30 bg-white/5 p-6"
            >
              <div className="text-5xl font-black text-yellow-300">{s.number}</div>
              <div className="mt-4 text-sm font-black uppercase tracking-[0.15em]">
                {s.name}
              </div>
            </div>
          ))}
        </div>
      </Section>
    </>
  );
}