import type { Metadata } from "next";
import Link from "next/link";
import { PageHero } from "@/components/PageHero";
import { PhotoStrip } from "@/components/PhotoStrip";
import { Section } from "@/components/Section";
import { contact } from "@/lib/contact";
import { getTotalStats } from "@/lib/content";
import { photos } from "@/lib/reviews";

export const metadata: Metadata = {
  title: "Sponsor Ol",
  description:
    "Impact sponsorluk paketleri. STEM topluluğuyla kampüs erişimi, marka görünürlüğü ve sosyal etki.",
};

type Tier = {
  name: string;
  slogan: string;
  perks: string[];
  highlight?: boolean;
};

const tiers: Tier[] = [
  {
    name: "Platin",
    slogan: "Ana sponsor · tüm regional + championship",
    highlight: true,
    perks: [
      "Etkinlik isim hakkı (naming rights) seçeneği",
      "Tüm regional + championship ana sponsoru",
      "Sahne önü logo, arena branding, roll-up ve bayraklar",
      "Katılımcı kit'inde logo",
      "Opt-in katılımcı veritabanına erişim (KVKK uyumlu)",
      "Kampüs CV toplama + kariyer günü slotu",
      "Basın bülteninde ana ortak",
    ],
  },
  {
    name: "Altın",
    slogan: "2 regional ana sponsoru",
    perks: [
      "Seçilen 2 regional'da premium logo konumu",
      "Arena branding + sosyal medya kampanya serisi",
      "Mentor / konuşmacı slotu",
      "Katılımcı kit'inde logo",
      "Kısa opt-in katılımcı listesi",
    ],
  },
  {
    name: "Gümüş",
    slogan: "1 regional destekçisi",
    perks: [
      "Seçilen regional'da logo görünürlüğü",
      "Sosyal medya + etkinlik duyurularında yer",
      "Sahne sunumunda teşekkür",
      "Mentor slotu (opsiyonel)",
    ],
  },
  {
    name: "Bronz",
    slogan: "Destekçi",
    perks: [
      "Logo tüm dijital materyallerde",
      "Teşekkür postu",
      "İsim sponsor listesinde",
    ],
  },
];

const inKind = [
  "Kit / malzeme (ESP32, sensör, motor)",
  "Yemek & içecek",
  "Mekan / salon",
  "Baskı, roll-up, tişört",
  "Ödül (laptop, kit, stajyerlik fırsatı)",
];

export default function SponsorPage() {
  const totals = getTotalStats();
  const heroPhoto = photos.cemberlitas[25];
  const strip = [1, 13, 29, 35].map((i) => photos.cemberlitas[i]);

  return (
    <>
      <PageHero
        eyebrow="Sponsor olun"
        title={<>Sahada olun, bir nesle dokunun</>}
        lead={`Impact etkinliklerinde sponsorlar, ${totals.participants}+ katılımcı ve ${totals.teams}+ takımı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.`}
        variant="photo"
        photo={{ src: heroPhoto.src, alt: "Impact etkinlik salonu" }}
      />

      {/* Why */}
      <Section eyebrow="Neden Impact" title="Sponsorlar için ne sunuyoruz">
        <div className="grid gap-4 md:grid-cols-3">
          <Perk
            title="Yetenek havuzu"
            body="Türkiye'nin en motive lise ve üniversite öğrencileri. Opt-in veritabanı (KVKK uyumlu), staj ve işe alım kanalı."
          />
          <Perk
            title="Marka görünürlüğü"
            body="Arena branding, katılımcı kit'i, etkinlik öncesi/sonrası dijital kampanya, basın bülteni ve sosyal medya serisi."
          />
          <Perk
            title="Sosyal etki raporu"
            body="Her edisyon sonrası ölçülmüş metrikler: katılımcı, gönüllü, şehir dağılımı, sosyoekonomik erişim — CSR için hazır veri."
          />
        </div>
      </Section>

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

      {/* Tiers */}
      <Section eyebrow="Paketler" title="Sponsorluk paketleri">
        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-4">
          {tiers.map((t) => (
            <div
              key={t.name}
              className={`relative flex flex-col border-2 border-neutral-900 p-6 ${
                t.highlight ? "bg-violet-700 text-white" : "bg-white text-neutral-900"
              }`}
            >
              {t.highlight && (
                <div className="absolute -left-3 -top-3 bg-yellow-300 px-3 py-1 text-[10px] font-black uppercase tracking-[0.2em] text-neutral-900">
                  Önerilen
                </div>
              )}
              <div className="text-3xl font-black tracking-tight">{t.name}</div>
              <div
                className={`mt-1 text-sm font-semibold ${
                  t.highlight ? "text-white/85" : "text-neutral-600"
                }`}
              >
                {t.slogan}
              </div>
              <ul className="mt-6 flex-1 space-y-2 text-sm">
                {t.perks.map((p) => (
                  <li key={p} className="flex gap-2">
                    <span
                      className={`mt-1.5 inline-block size-1.5 shrink-0 ${
                        t.highlight ? "bg-yellow-300" : "bg-violet-700"
                      }`}
                    />
                    <span className={t.highlight ? "text-white/85" : "text-neutral-700"}>
                      {p}
                    </span>
                  </li>
                ))}
              </ul>
              <a
                href={`mailto:${contact.email}?subject=${encodeURIComponent(
                  `Impact Sponsorluk — ${t.name}`,
                )}`}
                className={`mt-6 inline-flex w-fit items-center gap-2 px-4 py-2.5 text-xs font-black uppercase tracking-wider transition ${
                  t.highlight
                    ? "bg-yellow-300 text-neutral-900 hover:bg-white"
                    : "border-2 border-neutral-900 bg-white hover:bg-yellow-300"
                }`}
              >
                {t.name} için yaz →
              </a>
            </div>
          ))}
        </div>
        <p className="mt-6 text-xs font-black uppercase tracking-[0.2em] text-neutral-500">
          Paket fiyatlamaları etkinlik ölçeği ve kapsama göre özelleştirilir. Detaylı deck için bize yazın.
        </p>
      </Section>

      {/* In-kind */}
      <Section tone="muted" eyebrow="Ayni destek" title="Parasal olmayan katkılar">
        <ul className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
          {inKind.map((k) => (
            <li
              key={k}
              className="border-2 border-neutral-900 bg-white px-5 py-4 text-sm font-semibold"
            >
              {k}
            </li>
          ))}
        </ul>
      </Section>

      {/* CTA */}
      <Section tone="yellow">
        <div className="flex flex-col items-start gap-6 md:flex-row md:items-end md:justify-between">
          <div>
            <div className="text-xs font-black uppercase tracking-[0.25em] text-violet-700">
              Konuşalım
            </div>
            <h3 className="mt-3 text-balance text-4xl font-black leading-[1] tracking-tight md:text-5xl">
              Deck için iki satır atmanız yeterli
            </h3>
          </div>
          <div className="flex flex-wrap gap-3">
            <a
              href={`mailto:${contact.email}?subject=Impact%20Sponsorluk`}
              className="bg-neutral-900 px-6 py-4 text-xs font-black uppercase tracking-wider text-white hover:bg-violet-700"
            >
              {contact.email}
            </a>
            <a
              href={contact.linkedin.url}
              target="_blank"
              rel="noreferrer noopener"
              className="border-2 border-neutral-900 bg-white px-6 py-4 text-xs font-black uppercase tracking-wider hover:bg-neutral-900 hover:text-white"
            >
              LinkedIn
            </a>
            <Link
              href="/iletisim"
              className="px-6 py-4 text-xs font-black uppercase tracking-wider text-neutral-800 hover:text-violet-700"
            >
              Tüm kanallar →
            </Link>
          </div>
        </div>
      </Section>
    </>
  );
}

function Perk({ title, body }: { title: string; body: string }) {
  return (
    <div className="border-2 border-neutral-900 bg-white p-6">
      <div className="text-xl font-black tracking-tight">{title}</div>
      <p className="mt-3 text-sm text-neutral-700">{body}</p>
    </div>
  );
}
