import type { Metadata } from "next";
import { Send, MessageCircle, Phone, Mail, MapPin, Clock } from "lucide-react";
import SectionEyebrow from "@/components/SectionEyebrow";
import NetworkGraphic from "@/components/NetworkGraphic";
import ContactForm from "@/components/ContactForm";
import { contacts } from "@/config/contacts";

export const metadata: Metadata = {
  title: "Контакты",
  description: "Свяжитесь с командой LabNetHub через форму, Telegram, WhatsApp или email.",
};

const directContacts = [
  {
    icon: Send,
    label: "Telegram",
    value: "Написать в чат",
    href: contacts.telegramBot,
  },
  {
    icon: Phone,
    label: "WhatsApp",
    value: "Написать в WhatsApp",
    href: contacts.whatsapp,
  },
  {
    icon: Mail,
    label: "Email",
    value: contacts.email,
    href: `mailto:${contacts.email}`,
  },
  {
    icon: MessageCircle,
    label: "ВКонтакте",
    value: "Наше сообщество",
    href: contacts.vk,
  },
];

export default function ContactsPage() {
  return (
    <>
      <section className="relative overflow-hidden border-b border-white/[0.06] px-6 pb-16 pt-32 sm:pb-20 sm:pt-40">
        <div className="pointer-events-none absolute right-0 top-0 w-[420px] max-w-[60%] opacity-70 sm:opacity-100">
          <NetworkGraphic className="w-full" />
        </div>
        <div className="mx-auto max-w-3xl">
          <SectionEyebrow>Контакты</SectionEyebrow>
          <h1 className="text-balance font-display text-4xl font-medium leading-[1.1] sm:text-5xl">
            Свяжитесь <span className="text-gradient-blue">с нами</span>
          </h1>
          <p className="mt-5 max-w-xl text-lg leading-relaxed text-ink-500">
            Расскажите о задаче — предложим решение и сроки. Форма ниже
            приходит нам напрямую в Telegram.
          </p>
        </div>
      </section>

      <section className="px-6 py-20">
        <div className="mx-auto grid max-w-6xl gap-12 lg:grid-cols-[1.1fr_0.9fr]">
          <div>
            <h2 className="mb-6 font-display text-xl font-medium">
              Напишите нам
            </h2>
            <ContactForm />
          </div>

          <div>
            <h2 className="mb-6 font-display text-xl font-medium">
              Прямые контакты
            </h2>
            <div className="space-y-3">
              {directContacts.map((c) => (
                <a
                  key={c.label}
                  href={c.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-4 rounded-xl border border-white/[0.06] bg-base-900/50 p-4 transition-colors hover:border-blue-500/30"
                >
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-blue-500/25 bg-blue-500/10 text-blue-400">
                    <c.icon size={18} strokeWidth={1.75} />
                  </div>
                  <div>
                    <p className="text-sm text-ink-500">{c.label}</p>
                    <p className="font-medium text-ink-100">{c.value}</p>
                  </div>
                </a>
              ))}
            </div>

            <div className="mt-6 space-y-3 border-t border-white/[0.06] pt-6">
              <div className="flex items-center gap-3 text-sm text-ink-500">
                <MapPin size={16} className="text-ink-700" />
                {contacts.city}
              </div>
              <div className="flex items-center gap-3 text-sm text-ink-500">
                <Clock size={16} className="text-ink-700" />
                {contacts.workingHours}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}