import type { Metadata } from "next";
import { PageHero } from "@/components/PageHero";
import { Section } from "@/components/Section";
import { contact, team } from "@/lib/contact";

export const metadata: Metadata = {
  title: "İletişim",
  description: "Impact iletişim kanalları: e-posta, Instagram, LinkedIn, WhatsApp.",
};

const channels = [
  {
    key: "email",
    title: "E-posta",
    value: contact.email,
    href: `mailto:${contact.email}`,
    help: "Genel sorular, sponsor talepleri ve işbirlikleri.",
  },
  {
    key: "instagram",
    title: "Instagram",
    value: `@${contact.instagram.handle}`,
    href: contact.instagram.url,
    help: "Etkinlik duyuruları, geçmiş fotoğraflar, anlık içerik.",
  },
  {
    key: "linkedin",
    title: "LinkedIn",
    value: "impactcommunit",
    href: contact.linkedin.url,
    help: "Kurumsal iletişim, sponsor ve partner ağı.",
  },
  {
    key: "whatsapp",
    title: "WhatsApp",
    value: "Topluluğa katıl",
    href: contact.whatsapp.url,
    help: "Katılımcı, gönüllü ve mentor topluluğu.",
  },
];

const altMails = [
  "contact@impact.tr",
  "info@impact.tr",
  "hello@impact.tr",
];

export default function ContactPage() {
  return (
    <>
      <PageHero
        eyebrow="İletişim"
        title={<>Bize ulaşın</>}
        lead="Sponsor, partner, gönüllü, mentor ya da sadece meraklı — hangi kanalı seçersen seç yanıt veriyoruz."
      />

      {/* Channels */}
      <Section eyebrow="Kanallar" title="Nereden ulaşabilirsiniz">
        <div className="grid gap-4 md:grid-cols-2">
          {channels.map((ch) => (
            <a
              key={ch.key}
              href={ch.href}
              target={ch.href.startsWith("http") ? "_blank" : undefined}
              rel="noreferrer noopener"
              className="group flex items-start justify-between gap-6 border-2 border-neutral-900 bg-white p-6 transition hover:-translate-y-1 hover:bg-yellow-50"
            >
              <div>
                <div className="text-xs font-black uppercase tracking-[0.25em] text-violet-700">
                  {ch.title}
                </div>
                <div className="mt-2 text-2xl font-black tracking-tight">{ch.value}</div>
                <div className="mt-1 text-sm text-neutral-600">{ch.help}</div>
              </div>
              <span
                aria-hidden
                className="mt-2 text-2xl transition group-hover:translate-x-1"
              >
                →
              </span>
            </a>
          ))}
        </div>
      </Section>

      {/* Team emails */}
      <Section tone="muted" eyebrow="Ekip" title="Doğrudan kurucu ekibe">
        <div className="grid gap-4 md:grid-cols-3">
          {team.map((m) => {
            const handle = m.name.split(" ")[0].toLowerCase().replace(/ı/g, "i");
            const email = `${handle}@impact.tr`;
            return (
              <a
                key={m.name}
                href={`mailto:${email}`}
                className="group flex flex-col gap-5 border-2 border-neutral-900 bg-white p-6 transition hover:-translate-y-1 hover:bg-yellow-50"
              >
                <span className="inline-flex size-12 items-center justify-center bg-violet-700 text-sm font-black text-white">
                  {m.name
                    .split(" ")
                    .map((w) => w[0])
                    .slice(0, 2)
                    .join("")}
                </span>
                <div>
                  <div className="text-xl font-black tracking-tight">{m.name}</div>
                  <div className="mt-1 text-xs font-black uppercase tracking-[0.2em] text-neutral-500">
                    {m.role}
                  </div>
                </div>
                <div className="border-t-2 border-neutral-900 pt-3 text-sm font-black text-violet-700 transition group-hover:translate-x-0.5">
                  {email} →
                </div>
              </a>
            );
          })}
        </div>
      </Section>

      {/* Alt mails */}
      <Section eyebrow="Ek posta kutuları" title="Bunlara da yazabilirsiniz">
        <div className="flex flex-wrap gap-2">
          {altMails.map((m) => (
            <a
              key={m}
              href={`mailto:${m}`}
              className="border-2 border-neutral-900 bg-white px-4 py-2 text-sm font-black uppercase tracking-wider text-neutral-900 hover:bg-yellow-300"
            >
              {m} ↗
            </a>
          ))}
        </div>
      </Section>
    </>
  );
}