import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { Mail, MapPin, Globe, Users, Newspaper, Phone } from "lucide-react";
import { Container } from "@/components/Container";
import { siteConfig } from "@/lib/site-config";

export const metadata: Metadata = {
  title: "Contact",
  description:
    "Reach OrthoGlobe for membership questions, collaborations, media, or feedback.",
};

type Method = {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: React.ReactNode;
  href?: string;
};

const hostname = siteConfig.url.replace(/^https?:\/\//, "");

const { address, phone } = siteConfig;

const methods: Method[] = [
  {
    icon: Mail,
    label: "Email",
    value: siteConfig.email,
    href: `mailto:${siteConfig.email}`,
  },
  {
    icon: Phone,
    label: "Phone",
    value: phone,
    href: `tel:${phone.replace(/\s+/g, "")}`,
  },
  {
    icon: MapPin,
    label: "Address",
    value: (
      <span className="block">
        {address.line1}
        <br />
        {address.line2}, {address.city} {address.postcode}
        <br />
        {address.country}
      </span>
    ),
  },
  {
    icon: Globe,
    label: "Web",
    value: hostname,
    href: siteConfig.url,
  },
  {
    icon: Users,
    label: "Membership",
    value: (
      <Link
        href="/join"
        className="text-[var(--color-blue)] hover:underline underline-offset-4"
      >
        Apply to join OrthoGlobe
      </Link>
    ),
  },
];

export default function ContactPage() {
  return (
    <>
      <section className="bg-white pt-10 md:pt-14 pb-10">
        <Container>
          <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            Contact
          </div>
          <h1 className="mt-3 font-display text-[40px] md:text-[56px] font-extrabold leading-[1.05] tracking-[-0.025em] text-[var(--color-ink)]">
            Get in touch
          </h1>
          <p className="mt-6 max-w-3xl text-[18px] md:text-[20px] leading-relaxed text-[var(--color-slate)]">
            Membership questions, collaborations, media, or feedback — we read every message.
          </p>
        </Container>
      </section>

      <section className="bg-white py-10 md:py-14">
        <Container>
          <div className="grid gap-8 md:grid-cols-[minmax(0,1fr)_minmax(0,0.95fr)] md:items-start md:gap-12">
            {/* Methods card */}
            <div className="rounded-2xl border border-[var(--color-line)] bg-white p-6 md:p-8 shadow-[0_16px_40px_rgba(10,14,40,0.06)]">
              <h2 className="font-display text-[22px] font-extrabold tracking-tight text-[var(--color-ink)]">
                Ways to reach us
              </h2>
              <ul className="mt-6 divide-y divide-[var(--color-line)]">
                {methods.map(({ icon: Icon, label, value, href }) => {
                  const content = (
                    <div className="flex items-start gap-4 py-4">
                      <span className="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                        <Icon className="h-5 w-5" />
                      </span>
                      <div className="min-w-0">
                        <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                          {label}
                        </div>
                        <div className="mt-1 text-[16px] font-semibold text-[var(--color-ink)] break-words">
                          {value}
                        </div>
                      </div>
                    </div>
                  );
                  return (
                    <li key={label} className="first:pt-0 last:pb-0">
                      {href ? (
                        <a
                          href={href}
                          className="block rounded-lg transition-colors hover:bg-[var(--color-mist)]/50"
                        >
                          {content}
                        </a>
                      ) : (
                        content
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>

            {/* Photo */}
            <figure className="overflow-hidden rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)] shadow-[0_24px_56px_rgba(10,14,40,0.08)]">
              <div className="relative aspect-[4/3] w-full">
                <Image
                  src="/photos/consent/doctor-talking-patient.jpg"
                  alt="Doctor in conversation with a patient during a consultation"
                  fill
                  sizes="(min-width: 768px) 520px, 100vw"
                  className="object-cover"
                />
              </div>
            </figure>
          </div>

          {/* Press / partnerships */}
          <div className="mt-10 rounded-2xl border border-dashed border-[var(--color-line)] bg-[var(--color-mist)]/40 p-6 md:p-8">
            <div className="flex items-start gap-4">
              <span className="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-white text-[var(--color-blue)] border border-[var(--color-line)]">
                <Newspaper className="h-5 w-5" />
              </span>
              <div>
                <h3 className="font-display text-[18px] font-extrabold tracking-tight text-[var(--color-ink)]">
                  For press and research partnerships
                </h3>
                <p className="mt-2 text-[15px] leading-relaxed text-[var(--color-slate)]">
                  Working on a story, a multicentre study, or an institutional collaboration?
                  Write to{" "}
                  <a
                    href={`mailto:${siteConfig.email}?subject=Press%20%2F%20Partnership`}
                    className="font-semibold text-[var(--color-blue)] hover:underline underline-offset-4"
                  >
                    {siteConfig.email}
                  </a>{" "}
                  and one of the founders will get back to you directly.
                </p>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}
