import Image from "next/image";
import Link from "next/link";
import { CompetitionCard } from "@/components/CompetitionCard";
import { EditionCard } from "@/components/EditionCard";
import { Gallery } from "@/components/Gallery";
import { Marquee } from "@/components/Marquee";
import { PhotoStrip } from "@/components/PhotoStrip";
import { Section } from "@/components/Section";
import { StatsStrip } from "@/components/StatsStrip";
import { TestimonialCard } from "@/components/TestimonialCard";
import { contact, values } from "@/lib/contact";
import {
  formatDateRange,
  getCompetitions,
  getEditions,
  getTotalStats,
  getUpcomingEdition,
} from "@/lib/content";
import { photos, reviews } from "@/lib/reviews";

export default function Home() {
  const competitions = getCompetitions();
  const editions = getEditions();
  const past = editions.filter((e) => e.status === "past");
  const upcoming = getUpcomingEdition();
  const totals = getTotalStats();
  const review = reviews[0];
  const heroPhoto = photos.cemberlitas[14];
  const gallery = [3, 9, 15, 20, 24, 30].map((i) => photos.cemberlitas[i]);
  const strip = [6, 17, 25, 36].map((i) => photos.cemberlitas[i]);
  const latest = past[0];

  return (
    <>
      {/* HERO */}
      <section className="border-b-2 border-neutral-900">
        <div className="grid md:grid-cols-12">
          <div className="relative flex flex-col justify-between bg-violet-700 p-10 text-white md:col-span-7 md:p-16 lg:p-20">
            {upcoming && (
              <Link
                href={`/yarismalar/${upcoming.competition}`}
                className="inline-flex w-fit items-center gap-3 border border-white/30 bg-white/10 px-3 py-1 text-xs font-black uppercase tracking-[0.25em] hover:bg-white/20"
              >
                <span className="size-2 animate-pulse rounded-full bg-yellow-300" />
                Sıradaki: {upcoming.name}
              </Link>
            )}
            <div className="mt-12">
              <h1 className="text-balance text-6xl font-black leading-[0.92] tracking-[-0.03em] md:text-7xl lg:text-[7rem]">
                STEM.
                <br />
                <span className="text-yellow-300">Herkes.</span>
                <br />
                Hemen.
              </h1>
              <p className="mt-8 max-w-lg text-lg leading-relaxed text-white/85">
                Impact, Türkiye'de STEM ekosistemini genişleten bir gençlik topluluğu.
                Lise ve üniversite öğrencileriyle hands-on robotik yarışmaları, ideathonlar
                ve regional etkinlikler düzenliyoruz.
              </p>
              <div className="mt-10 flex flex-wrap gap-3">
                <Link
                  href="/yarismalar/robo-soccer"
                  className="inline-flex items-center gap-2 bg-white px-6 py-3.5 text-sm font-black uppercase tracking-wider text-neutral-900 transition hover:bg-yellow-300"
                >
                  Robo Soccer →
                </Link>
                <a
                  href={contact.whatsapp.url}
                  target="_blank"
                  rel="noreferrer noopener"
                  className="inline-flex items-center gap-2 border-2 border-white/30 px-6 py-3.5 text-sm font-black uppercase tracking-wider text-white transition hover:border-white"
                >
                  WhatsApp topluluk
                </a>
              </div>
            </div>
            <div className="mt-16 flex flex-wrap gap-8 border-t border-white/20 pt-8">
              <HeroStat v={totals.editions.toString()} l="Edisyon" />
              <HeroStat v={`${totals.teams}+`} l="Takım" />
              <HeroStat v={`${totals.participants}+`} l="Katılımcı" />
              <HeroStat v={`${totals.volunteers}+`} l="Gönüllü" />
            </div>
          </div>
          <div className="relative md:col-span-5">
            <div className="relative h-80 w-full md:h-full md:min-h-[560px]">
              <Image
                src={heroPhoto.src}
                alt="Impact Hands-On Challenge Çemberlitaş Regional"
                fill
                priority
                sizes="(min-width: 768px) 42vw, 100vw"
                className="object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee
        items={[
          "IMPACT.TR",
          "HANDS-ON CHALLENGE",
          "IDEATHON",
          "ROBO SOCCER",
          "STEM · TÜRKİYE",
        ]}
      />

      {/* FORMATS */}
      <Section
        eyebrow="Ne yapıyoruz"
        title={
          <>
            Üç format,{" "}
            <br className="hidden md:inline" />
            tek topluluk
          </>
        }
        description="Fikirden prototipe, prototipten şampiyonaya — birbirini besleyen yarışma formatları."
      >
        <div className="space-y-4">
          {competitions.map((c, i) => (
            <CompetitionCard key={c.slug} c={c} index={i} />
          ))}
        </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>

      {/* LATEST EDITION with rich photo treatment */}
      {latest && (
        <Section
          tone="muted"
          eyebrow="Son edisyon"
          title={latest.name}
          description={latest.summary}
        >
          <div className="grid gap-6 md:grid-cols-12">
            <div className="md:col-span-7">
              <div className="relative aspect-[4/3] border-2 border-neutral-900 bg-neutral-200">
                <Image
                  src={photos.cemberlitas[20].src}
                  alt={`${latest.name} sahne fotoğrafı`}
                  fill
                  sizes="(min-width: 768px) 60vw, 100vw"
                  className="object-cover"
                />
              </div>
              <div className="mt-4 grid grid-cols-2 gap-4">
                <div className="relative aspect-[4/3] border-2 border-neutral-900 bg-neutral-200">
                  <Image
                    src={photos.cemberlitas[2].src}
                    alt=""
                    fill
                    sizes="(min-width: 768px) 30vw, 50vw"
                    className="object-cover"
                  />
                </div>
                <div className="relative aspect-[4/3] border-2 border-neutral-900 bg-neutral-200">
                  <Image
                    src={photos.cemberlitas[38].src}
                    alt=""
                    fill
                    sizes="(min-width: 768px) 30vw, 50vw"
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
            <div className="md:col-span-5">
              {latest.stats && (
                <StatsStrip
                  items={[
                    { value: latest.stats.teams ?? 0, label: "Takım" },
                    { value: `${latest.stats.participants ?? 0}+`, label: "Katılımcı" },
                    { value: latest.stats.volunteers ?? 0, label: "Gönüllü" },
                    ...(latest.startDate && latest.endDate
                      ? [
                          {
                            value: String(
                              Math.round(
                                (new Date(latest.endDate).getTime() -
                                  new Date(latest.startDate).getTime()) /
                                  86400000,
                              ) + 1,
                            ),
                            label: "Gün",
                          },
                        ]
                      : []),
                  ]}
                />
              )}
              <div className="mt-6 border-2 border-neutral-900 bg-white p-6">
                <dl className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <dt className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500">
                      Tarih
                    </dt>
                    <dd className="mt-1 font-black">
                      {formatDateRange(latest.startDate, latest.endDate)}
                    </dd>
                  </div>
                  <div>
                    <dt className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500">
                      Mekan
                    </dt>
                    <dd className="mt-1 font-black">{latest.venue}</dd>
                  </div>
                </dl>
                <Link
                  href={`/edisyonlar/${latest.slug}`}
                  className="mt-6 inline-flex items-center gap-2 border-2 border-neutral-900 bg-white px-5 py-3 text-xs font-black uppercase tracking-wider hover:bg-yellow-300"
                >
                  Edisyonu incele →
                </Link>
              </div>
            </div>
          </div>
        </Section>
      )}

      {/* GALLERY */}
      <Section eyebrow="Sahneden" title="Çemberlitaş Regional, 2 gün">
        <Gallery photos={gallery} />
        <div className="mt-8 flex justify-end">
          <a
            href={contact.instagram.url}
            target="_blank"
            rel="noreferrer noopener"
            className="inline-flex items-center gap-2 bg-neutral-900 px-4 py-2 text-xs font-black uppercase tracking-wider text-white hover:bg-violet-700"
          >
            @impact.tr ↗
          </a>
        </div>
      </Section>

      {/* REVIEW */}
      <Section tone="muted" eyebrow="Geri dönüşler" title="Katılımcı ve partner yorumları">
        <div className="grid gap-10 md:grid-cols-12">
          <div className="md:col-span-4">
            <p className="text-neutral-700">
              Deneyimini paylaşmak bir sonraki katılımcı için önemli. Etkinliklerimize
              katıldıysan bize yaz; tüm yorumları burada yayınlıyoruz.
            </p>
            <a
              href={`mailto:${contact.email}?subject=Impact%20deneyimim`}
              className="mt-6 inline-flex items-center gap-2 border-2 border-neutral-900 bg-white px-5 py-3 text-xs font-black uppercase tracking-wider hover:bg-yellow-300"
            >
              Yorum gönder →
            </a>
          </div>
          <div className="md:col-span-8">
            <TestimonialCard t={review} featured />
          </div>
        </div>
      </Section>

      {/* EDITIONS */}
      <Section eyebrow="Edisyonlar" title="Yaklaşan ve geçmiş etkinlikler">
        <div className="grid gap-4 md:grid-cols-3">
          {editions.slice(0, 6).map((e) => (
            <EditionCard key={e.slug} e={e} />
          ))}
        </div>
      </Section>

      {/* UPCOMING ROBO SOCCER */}
      <Section
        tone="yellow"
        eyebrow="Yaklaşan sezon"
        title={
          <>
            Robo Soccer
            <br />
            Sezon 01
          </>
        }
        description="5 regional + championship. İstanbul ve Ankara ile başlıyor, üç şehir daha açıklanacak."
      >
        <div className="grid gap-8 md:grid-cols-12">
          <div className="md:col-span-6">
            <ol className="divide-y-2 divide-neutral-900 border-2 border-neutral-900 bg-white">
              {[
                { n: "01", label: "İstanbul Regional", when: "Yakında" },
                { n: "02", label: "Ankara Regional", when: "Yakında" },
                { n: "03", label: "Regional #3", when: "Açıklanacak" },
                { n: "04", label: "Regional #4", when: "Açıklanacak" },
                { n: "05", label: "Regional #5", when: "Açıklanacak" },
                { n: "★", label: "Championship", when: "Sezon finali" },
              ].map((row) => (
                <li key={row.n} className="flex items-center gap-5 px-5 py-4">
                  <span className="w-6 font-black text-violet-700">{row.n}</span>
                  <span className="flex-1 text-sm font-semibold">{row.label}</span>
                  <span className="text-xs font-black uppercase tracking-[0.2em] text-neutral-500">
                    {row.when}
                  </span>
                </li>
              ))}
            </ol>
          </div>
          <div className="flex flex-col justify-between gap-6 md:col-span-6">
            <div className="space-y-3 text-neutral-900">
              <p className="text-lg">
                Takımlar otonom robotlarıyla sahada karşılaşır. Regional turnuvalardan top
                takımlar Championship'e kalır.
              </p>
              <p className="text-sm text-neutral-700">
                Tarihler, başvuru formu ve kit spesifikasyonları için topluluk kanallarımızı
                takip et.
              </p>
            </div>
            <div className="flex flex-wrap gap-3">
              <Link
                href="/yarismalar/robo-soccer"
                className="bg-neutral-900 px-6 py-3.5 text-xs font-black uppercase tracking-wider text-white hover:bg-violet-700"
              >
                Detaylar →
              </Link>
              <a
                href={contact.whatsapp.url}
                target="_blank"
                rel="noreferrer noopener"
                className="border-2 border-neutral-900 bg-white px-6 py-3.5 text-xs font-black uppercase tracking-wider hover:bg-white/70"
              >
                WhatsApp topluluk
              </a>
            </div>
          </div>
        </div>
      </Section>

      {/* VALUES + CTA */}
      <Section tone="dark">
        <div className="grid gap-12 md:grid-cols-12">
          <div className="md:col-span-7">
            <div className="text-xs font-black uppercase tracking-[0.25em] text-yellow-300">
              Sponsor olun
            </div>
            <h3 className="mt-4 text-balance text-4xl font-black leading-[1] tracking-tight md:text-5xl">
              Geleceğin mühendislerine alan açın.
            </h3>
            <p className="mt-5 max-w-xl text-neutral-300">
              Impact etkinliklerinde sponsorlar, yüzlerce katılımcının üretim maratonlarında
              görünür olur; kampüs erişimi, yetenek havuzu ve STEM topluluğu inşasına
              katkı sağlar.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link
                href="/sponsor"
                className="bg-yellow-300 px-6 py-4 text-xs font-black uppercase tracking-wider text-neutral-900 hover:bg-white"
              >
                Sponsor paketleri
              </Link>
              <a
                href={`mailto:${contact.email}?subject=Impact%20sponsorluk`}
                className="border-2 border-white/30 px-6 py-4 text-xs font-black uppercase tracking-wider text-white hover:border-white"
              >
                {contact.email}
              </a>
            </div>
          </div>
          <div className="md:col-span-5">
            <div className="text-xs font-black uppercase tracking-[0.25em] text-yellow-300">
              Değerlerimiz
            </div>
            <div className="mt-4 flex flex-wrap gap-2">
              {values.map((v) => (
                <span
                  key={v}
                  className="border-2 border-white/30 bg-white/5 px-4 py-2 text-xs font-black uppercase tracking-[0.2em]"
                >
                  {v}
                </span>
              ))}
            </div>
          </div>
        </div>
      </Section>
    </>
  );
}

function HeroStat({ v, l }: { v: string; l: string }) {
  return (
    <div>
      <div className="text-3xl font-black md:text-4xl">{v}</div>
      <div className="mt-1 text-[10px] font-black uppercase tracking-[0.25em] text-white/70">
        {l}
      </div>
    </div>
  );
}
