"use client";

import { Icon } from "@iconify/react";
import Image from "next/image";
import {
  Badge,
  Button,
  ButtonIcon,
  ButtonLabel,
  Card,
  PatternDots,
  Separator,
  StatisticCard,
  TextEffect,
  Typography,
} from "poyraz-ui/atoms";
import { SPONSORS } from "@/data/sponsors";
import {
  MEDIA_KIT_AGES,
  MEDIA_KIT_CONTENT_BREAKDOWN,
  MEDIA_KIT_GENDER,
  MEDIA_KIT_METRICS,
  MEDIA_KIT_PERIOD,
  MEDIA_KIT_TOPICS,
  type MediaKitAudienceRow,
  type MediaKitLocale,
} from "@/data/media-kit";

const COPY = {
  tr: {
    eyebrow: "Medya Kiti · 2026",
    availability: "İş birliklerine açık",
    name: "Poyraz Avsever",
    title: "Teknolojiyi öğreniyor, üretiyor ve anlaşılır şekilde paylaşıyorum.",
    intro:
      "En büyük amacım öğrendiklerimi aktarırken bilgimi pekiştirmek ve başkalarının da üretmesine yardımcı olmak. Yazılım, teknoloji ve tasarımı gerçek projeler, dürüst deneyimler ve uygulanabilir anlatımlarla buluşturuyorum.",
    role: "İçerik üreticisi · Yazılım geliştirici",
    audienceTitle: "Kime ulaşıyorum?",
    audienceDescription:
      "Yazılım geliştiriciler, sistem yöneticileri, teknoloji meraklıları ve üretirken öğrenmeyi seven genç profesyoneller.",
    statsEyebrow: "YouTube performansı",
    statsTitle: "Takipçiden öte, aktif ve büyüyen bir kitle.",
    statsDescription:
      "Kanal performansının son 28 günlük görünümü. Gelir verileri medya kitine dahil edilmemiştir.",
    periodLabel: "Veri dönemi",
    audienceEyebrow: "Kitle profili",
    audienceHeadline: "İzleyicilerin %68’i 18–34 yaş aralığında.",
    audienceBody:
      "Teknik kararları etkileyen, yeni araçları deneyen ve teknoloji ürünlerine yüksek ilgi gösteren odaklı bir topluluk.",
    ageTitle: "Yaş dağılımı",
    genderTitle: "Cinsiyet dağılımı",
    formatTitle: "İçerik formatına göre izlenme",
    formatDescription:
      "Uzun video odağı, markaların ürün ve hikâyelerini detaylı ve bağlamı korunmuş biçimde anlatmaya alan açıyor.",
    reachTitle: "Son 28 günde içerik ritmi",
    reachItems: [
      { label: "Yeni izleyici", value: "6,8 B" },
      { label: "Düzenli izleyici", value: "801" },
      { label: "Yayınlanan içerik", value: "9" },
    ],
    reachNote: "5 uzun video · 4 Shorts",
    partnersEyebrow: "Seçili iş birlikleri",
    partnersTitle: "Daha önce birlikte ürettik.",
    partnersDescription:
      "İçeriğin doğal akışını ve izleyici güvenini koruyan, ürünü gerçekten deneyimlemeye dayalı iş birlikleri.",
    collaborationTitle: "Uygun iş birliği formatları",
    collaborationItems: [
      "Sponsorlu YouTube videosu veya doğal ürün entegrasyonu",
      "Teknik ürün incelemesi ve kullanım senaryosu",
      "Kısa format video ve çoklu platform içerik paketi",
      "Uzun dönem marka elçiliği ve içerik serisi",
    ],
    ctaEyebrow: "Birlikte üretelim",
    ctaTitle: "Teknoloji kitlesine güvenilir bir hikâyeyle ulaşın.",
    ctaDescription:
      "Markanızı, ürünü gerçekten anlayan ve izleyicisine açık bir dille anlatan içeriklerle buluşturalım.",
    emailCta: "E-posta gönder",
    youtubeCta: "YouTube kanalını aç",
    footer: "Poyraz Avsever · Medya Kiti",
    updated: "Son güncelleme: 1 Temmuz 2026",
    derivedNote:
      "Ortalama izlenme süresi, paylaşılan toplam izlenme saati ve görüntüleme değerlerinden yaklaşık olarak hesaplanmıştır.",
  },
  en: {
    eyebrow: "Media Kit · 2026",
    availability: "Open to partnerships",
    name: "Poyraz Avsever",
    title: "I learn, build, and make technology easier to understand.",
    intro:
      "My biggest goal is to reinforce what I learn by sharing it and help others build along the way. I connect software, technology, and design through real projects, honest experiences, and practical storytelling.",
    role: "Content creator · Software developer",
    audienceTitle: "Who do I reach?",
    audienceDescription:
      "Software developers, system administrators, technology enthusiasts, and young professionals who learn by building.",
    statsEyebrow: "YouTube performance",
    statsTitle: "An active, growing audience beyond follower count.",
    statsDescription:
      "A 28-day view of channel performance. Revenue data is intentionally excluded from this media kit.",
    periodLabel: "Data period",
    audienceEyebrow: "Audience profile",
    audienceHeadline: "68% of viewers are between 18 and 34.",
    audienceBody:
      "A focused community that influences technical decisions, tries new tools, and shows strong interest in technology products.",
    ageTitle: "Age distribution",
    genderTitle: "Gender distribution",
    formatTitle: "Views by content format",
    formatDescription:
      "A strong long-form focus creates room to explain products and brand stories in depth and with the right context.",
    reachTitle: "Content rhythm in the last 28 days",
    reachItems: [
      { label: "New viewers", value: "6.8K" },
      { label: "Regular viewers", value: "801" },
      { label: "Published pieces", value: "9" },
    ],
    reachNote: "5 long-form videos · 4 Shorts",
    partnersEyebrow: "Selected partnerships",
    partnersTitle: "Brands I have built with.",
    partnersDescription:
      "Partnerships grounded in real product experience while protecting the natural flow of the content and audience trust.",
    collaborationTitle: "Partnership formats",
    collaborationItems: [
      "Sponsored YouTube video or native product integration",
      "Technical product review and use-case content",
      "Short-form video and multi-platform content package",
      "Long-term brand ambassadorship and content series",
    ],
    ctaEyebrow: "Let’s build together",
    ctaTitle: "Reach a technology audience through a credible story.",
    ctaDescription:
      "Let’s introduce your brand through content that understands the product and speaks clearly to its audience.",
    emailCta: "Send an email",
    youtubeCta: "Open YouTube channel",
    footer: "Poyraz Avsever · Media Kit",
    updated: "Last updated: July 1, 2026",
    derivedNote:
      "Average watch time is an estimate calculated from the shared total watch hours and view count.",
  },
} as const;

function AudienceBar({
  item,
  locale,
  max = 100,
}: {
  item: MediaKitAudienceRow;
  locale: MediaKitLocale;
  max?: number;
}) {
  const width = Math.max((item.value / max) * 100, item.value > 0 ? 2 : 0);
  const value = item.value.toLocaleString(locale === "tr" ? "tr-TR" : "en-US", {
    maximumFractionDigits: 1,
  });

  return (
    <div className="grid grid-cols-[3.5rem_1fr_3.25rem] items-center gap-3">
      <Typography variant="small" className="font-medium text-foreground">
        {item.label}
      </Typography>
      <div
        className="h-1.5 overflow-hidden rounded-full bg-muted"
        role="img"
        aria-label={`${item.label}: %${value}`}
      >
        <div
          className="h-full rounded-full bg-primary"
          style={{ width: `${width}%` }}
        />
      </div>
      <Typography
        variant="small"
        className="text-right font-medium tabular-nums text-muted-foreground"
      >
        %{value}
      </Typography>
    </div>
  );
}

export function MediaKitContent({ locale }: { locale: MediaKitLocale }) {
  const copy = COPY[locale];

  return (
    <main className="min-h-dvh bg-background text-foreground">
      <div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
        <header className="flex items-center justify-between gap-4 border-b border-border pb-4">
          <a href={`/${locale}`} className="inline-flex items-center gap-3">
            <Image
              src="/logo/logo.png"
              alt="Poyraz Avsever"
              width={36}
              height={36}
              priority
              className="size-9 rounded-sm border border-border object-cover"
            />
            <div>
              <Typography variant="small" className="font-semibold leading-none">
                {copy.name}
              </Typography>
              <Typography
                variant="caption"
                className="mt-1 text-muted-foreground"
              >
                {copy.eyebrow}
              </Typography>
            </div>
          </a>

          <Badge variant="success" radius="full" size="sm" className="gap-1.5">
            <span className="size-1.5 rounded-full bg-current" />
            {copy.availability}
          </Badge>
        </header>

        <section className="relative overflow-hidden border-b border-border py-10 sm:py-14 lg:py-16">
          <PatternDots
            aria-hidden="true"
            className="pointer-events-none absolute inset-y-0 right-0 hidden w-2/5 opacity-20 md:block"
          />
          <div className="relative">
            <div className="max-w-4xl">
              <Typography
                component="h1"
                variant="h1"
                className="max-w-3xl text-4xl leading-[1.02] tracking-[-0.055em] sm:text-5xl lg:text-6xl"
              >
                Teknoloji{" "}
                <TextEffect effect="hand-drawn" tone="primary">
                  {locale === "tr" ? "üretirken" : "by building"}
                </TextEffect>{" "}
                {locale === "tr"
                  ? "daha iyi öğrenilir."
                  : "is how we learn best."}
              </Typography>

              <Typography
                variant="p"
                className="mt-6 max-w-2xl text-sm leading-7 text-muted-foreground sm:text-base"
              >
                {copy.intro}
              </Typography>

              <div className="mt-7 flex flex-wrap gap-2">
                {MEDIA_KIT_TOPICS.map((topic) => (
                  <Badge
                    key={topic.id}
                    variant="secondary"
                    radius="sm"
                    className="gap-1.5"
                  >
                    <Icon icon={topic.icon} width={14} height={14} />
                    {topic.label[locale]}
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="border-b border-border py-10 sm:py-14">
          <div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
            <div>
              <Typography
                component="h2"
                variant="h2"
                className="max-w-2xl tracking-[-0.045em]"
              >
                {copy.statsTitle}
              </Typography>
              <Typography
                variant="small"
                className="mt-2 max-w-2xl leading-6 text-muted-foreground"
              >
                {copy.statsDescription}
              </Typography>
            </div>
            <div className="shrink-0 text-left sm:text-right">
              <Typography variant="caption" className="text-muted-foreground">
                {copy.periodLabel}
              </Typography>
              <Typography variant="small" className="mt-0.5 font-medium">
                {MEDIA_KIT_PERIOD[locale]}
              </Typography>
            </div>
          </div>

          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {MEDIA_KIT_METRICS.map((metric) => (
              <StatisticCard
                key={metric.id}
                className="rounded-sm border-border bg-card"
                label={metric.label[locale]}
                value={metric.value[locale]}
                change={metric.detail[locale]}
                trend={metric.id === "subscribers" ? "up" : "neutral"}
                icon={
                  <span className="inline-flex size-8 items-center justify-center rounded-sm bg-primary/10 text-primary">
                    <Icon icon={metric.icon} width={17} height={17} />
                  </span>
                }
              />
            ))}
          </div>

          <Typography
            variant="caption"
            className="mt-3 block text-muted-foreground"
          >
            * {copy.derivedNote}
          </Typography>
        </section>

        <section className="grid gap-8 border-b border-border py-10 sm:py-14 lg:grid-cols-[0.9fr_1.1fr] lg:gap-12">
          <div>
            <Typography
              component="h2"
              variant="h2"
              className="tracking-[-0.045em]"
            >
              {copy.audienceHeadline}
            </Typography>
            <Typography
              variant="small"
              className="mt-3 max-w-lg leading-6 text-muted-foreground"
            >
              {copy.audienceBody}
            </Typography>

            <Card className="mt-6 rounded-sm border-border p-5">
              <Typography variant="large" className="text-base">
                {copy.audienceTitle}
              </Typography>
              <Typography
                variant="small"
                className="mt-2 leading-6 text-muted-foreground"
              >
                {copy.audienceDescription}
              </Typography>
              <div className="mt-5 flex flex-wrap gap-2">
                {MEDIA_KIT_TOPICS.map((topic) => (
                  <Badge key={topic.id} variant="outline" radius="full" size="sm">
                    {topic.label[locale]}
                  </Badge>
                ))}
              </div>
            </Card>
          </div>

          <div className="grid gap-3 sm:grid-cols-2">
            <Card className="rounded-sm border-border p-5">
              <div className="flex items-center justify-between gap-3">
                <Typography variant="large" className="text-base">
                  {copy.genderTitle}
                </Typography>
                <Icon
                  icon="mdi:account-group-outline"
                  width={18}
                  height={18}
                  className="text-muted-foreground"
                />
              </div>
              <div className="mt-6 space-y-5">
                {MEDIA_KIT_GENDER.map((item) => (
                  <AudienceBar
                    key={item.id}
                    item={{
                      ...item,
                      label:
                        locale === "tr"
                          ? item.label
                          : item.id === "male"
                            ? "Male"
                            : "Female",
                    }}
                    locale={locale}
                  />
                ))}
              </div>
            </Card>

            <Card className="rounded-sm border-border p-5">
              <div className="flex items-center justify-between gap-3">
                <Typography variant="large" className="text-base">
                  {copy.ageTitle}
                </Typography>
                <Icon
                  icon="mdi:chart-bar"
                  width={18}
                  height={18}
                  className="text-muted-foreground"
                />
              </div>
              <div className="mt-6 space-y-3.5">
                {MEDIA_KIT_AGES.map((item) => (
                  <AudienceBar
                    key={item.id}
                    item={item}
                    locale={locale}
                    max={50}
                  />
                ))}
              </div>
            </Card>
          </div>
        </section>

        <section className="grid gap-3 border-b border-border py-10 sm:py-14 lg:grid-cols-[1.15fr_0.85fr]">
          <Card className="rounded-sm border-border p-5 sm:p-6">
            <div className="flex items-center justify-between gap-4">
              <div>
                <Typography variant="large" className="text-lg">
                  {copy.formatTitle}
                </Typography>
                <Typography
                  variant="small"
                  className="mt-1 max-w-xl leading-6 text-muted-foreground"
                >
                  {copy.formatDescription}
                </Typography>
              </div>
              <Icon
                icon="mdi:youtube"
                width={28}
                height={28}
                className="shrink-0 text-primary"
              />
            </div>

            <div className="mt-8 space-y-6">
              {MEDIA_KIT_CONTENT_BREAKDOWN.map((item) => (
                <div key={item.id}>
                  <div className="mb-2 flex items-end justify-between gap-3">
                    <Typography variant="small" className="font-medium">
                      {item.label[locale]}
                    </Typography>
                    <div className="flex items-baseline gap-2">
                      <Typography variant="large">
                        {item.value[locale]}
                      </Typography>
                      <Typography
                        variant="caption"
                        className="tabular-nums text-muted-foreground"
                      >
                        %{item.percentage.toLocaleString(
                          locale === "tr" ? "tr-TR" : "en-US",
                        )}
                      </Typography>
                    </div>
                  </div>
                  <div className="h-2 overflow-hidden rounded-full bg-muted">
                    <div
                      className="h-full rounded-full bg-primary"
                      style={{ width: `${item.percentage}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card className="rounded-sm border-border p-5 sm:p-6">
            <div className="flex items-center justify-between gap-3">
              <Typography variant="large" className="text-lg">
                {copy.reachTitle}
              </Typography>
              <Icon
                icon="mdi:calendar-check-outline"
                width={20}
                height={20}
                className="text-muted-foreground"
              />
            </div>

            <div className="mt-6 divide-y divide-border">
              {copy.reachItems.map((item) => (
                <div
                  key={item.label}
                  className="flex items-center justify-between gap-4 py-3 first:pt-0"
                >
                  <Typography variant="small" className="text-muted-foreground">
                    {item.label}
                  </Typography>
                  <Typography variant="h3" className="tabular-nums">
                    {item.value}
                  </Typography>
                </div>
              ))}
            </div>
            <Badge variant="secondary" radius="sm" className="mt-2">
              {copy.reachNote}
            </Badge>
          </Card>
        </section>

        <section className="border-b border-border py-10 sm:py-14">
          <div className="grid gap-8 lg:grid-cols-[0.8fr_1.2fr] lg:gap-12">
            <div>
              <Typography
                component="h2"
                variant="h2"
                className="tracking-[-0.045em]"
              >
                {copy.partnersTitle}
              </Typography>
              <Typography
                variant="small"
                className="mt-3 max-w-lg leading-6 text-muted-foreground"
              >
                {copy.partnersDescription}
              </Typography>
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              {SPONSORS.map((sponsor) => (
                <a
                  key={sponsor.id}
                  href={sponsor.websiteUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="group"
                >
                  <Card className="flex h-full min-h-32 items-center justify-center rounded-sm border-border bg-white p-6 transition-colors group-hover:border-primary/50">
                    <div className="relative h-12 w-full">
                      <Image
                        src={sponsor.logo}
                        alt={sponsor.name}
                        fill
                        sizes="(max-width: 640px) 100vw, 320px"
                        className="object-contain grayscale transition duration-300 group-hover:grayscale-0"
                      />
                    </div>
                  </Card>
                </a>
              ))}
            </div>
          </div>

          <Separator className="my-8" />

          <div className="grid gap-5 sm:grid-cols-[0.7fr_1.3fr] sm:items-start">
            <Typography variant="large" className="text-base">
              {copy.collaborationTitle}
            </Typography>
            <div className="grid gap-3 sm:grid-cols-2">
              {copy.collaborationItems.map((item) => (
                <div key={item} className="flex items-start gap-2.5">
                  <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-success text-success-icon">
                    <Icon icon="mdi:check" width={13} height={13} />
                  </span>
                  <Typography
                    variant="small"
                    className="leading-5 text-muted-foreground"
                  >
                    {item}
                  </Typography>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="py-10 sm:py-14">
          <Card className="relative overflow-hidden rounded-md border-primary/25 bg-primary/5 p-6 sm:p-8">
            <PatternDots
              aria-hidden="true"
              className="pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-20"
            />
            <div className="relative max-w-3xl">
              <Typography
                component="h2"
                variant="h2"
                className="tracking-[-0.045em]"
              >
                {copy.ctaTitle}
              </Typography>
              <Typography
                variant="small"
                className="mt-3 max-w-2xl leading-6 text-muted-foreground"
              >
                {copy.ctaDescription}
              </Typography>

              <div className="mt-6 flex flex-wrap gap-2">
                <Button
                  asChild
                  radius="sm"
                  effect="swap"
                  swapTarget="both"
                >
                  <a href="mailto:poyrazavsever@gmail.com">
                    <ButtonIcon>
                      <Icon icon="mdi:email-outline" width={16} height={16} />
                    </ButtonIcon>
                    <ButtonLabel>{copy.emailCta}</ButtonLabel>
                  </a>
                </Button>
                <Button
                  asChild
                  variant="secondary"
                  radius="sm"
                  effect="swap"
                  swapTarget="both"
                >
                  <a
                    href="https://youtube.com/@poyrazavsever"
                    target="_blank"
                    rel="noreferrer"
                  >
                    <ButtonIcon>
                      <Icon icon="mdi:youtube" width={17} height={17} />
                    </ButtonIcon>
                    <ButtonLabel>{copy.youtubeCta}</ButtonLabel>
                  </a>
                </Button>
              </div>
            </div>
          </Card>
        </section>

        <footer className="flex flex-col justify-between gap-2 border-t border-border py-5 sm:flex-row sm:items-center">
          <Typography variant="caption" className="text-muted-foreground">
            {copy.footer}
          </Typography>
          <Typography variant="caption" className="text-muted-foreground">
            {copy.updated}
          </Typography>
        </footer>
      </div>
    </main>
  );
}