import type { Metadata } from "next";
import Image from "next/image";
import { Clock, Globe2, ImagePlus, Landmark, MapPin, MessageSquareText, Phone, Send } from "lucide-react";
import { BackToTopButton } from "@/app/components/landing/BackToTopButton";
import { HeritageSeal } from "@/app/components/landing/HeritageOrnament";
import { SiteFooter } from "@/app/components/landing/SiteFooter";
import { SiteHeader } from "@/app/components/landing/SiteHeader";
import { contact, subpageHero } from "@/app/content";

export const metadata: Metadata = {
  title: "Liên hệ | VR360 Như Quỳnh",
  description: "Thông tin liên hệ và đầu mối cung cấp tư liệu cho dự án số hóa di sản Xã Như Quỳnh, tỉnh Hưng Yên.",
};

const contacts = [
  { icon: MapPin, label: "Địa chỉ", value: contact.address, href: undefined, external: false },
  { icon: Phone, label: "Điện thoại", value: contact.phone, href: contact.phoneHref, external: false },
  { icon: Globe2, label: "Cổng thông tin", value: contact.websiteLabel, href: contact.website, external: true },
  { icon: Clock, label: "Thời gian tiếp nhận", value: "Trong giờ hành chính các ngày làm việc", href: undefined, external: false },
];

const steps = [
  { icon: MessageSquareText, title: "Gửi thông tin", detail: "Mô tả ngắn về di tích, cổ vật hoặc câu chuyện bạn muốn đóng góp." },
  { icon: ImagePlus, title: "Kèm hình ảnh, tư liệu", detail: "Hình ảnh, tài liệu hoặc nguồn tham khảo giúp xác minh và biên tập nội dung." },
  { icon: Landmark, title: "Cùng hoàn thiện", detail: "Ban quản lý sẽ rà soát, đối chiếu và đưa nội dung phù hợp lên nền tảng số." },
];

export default function ContactPage() {
  return (
    <main className="public-page min-h-[100dvh] bg-[var(--background)] text-[var(--foreground)]">
      <SiteHeader />

      <section className="public-subpage-hero public-subpage-hero--compact relative isolate overflow-hidden border-b border-[var(--surface-border)]">
        <Image src={subpageHero.lienHe} alt="" fill preload sizes="100vw" className="public-subpage-hero-image public-parallax-bg object-cover" />
        <div className="public-subpage-hero-content mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:py-28">
          <div className="public-rise public-hero-rule max-w-4xl">
            <p className="public-kicker">Liên hệ</p>
            <h1 className="public-hero-display public-heading-safe mt-5 text-[clamp(2.2rem,5vw,4.2rem)] font-extrabold">
              Liên hệ &amp; <span className="public-display-accent">đóng góp tư liệu</span>
            </h1>
            <p className="public-subpage-copy mt-6 max-w-[58ch] text-base leading-8 sm:text-lg">
              Người dân, tổ chức có tư liệu, hình ảnh hoặc câu chuyện về các di tích của Xã Như Quỳnh
              vui lòng liên hệ để cùng hoàn thiện kho dữ liệu số di sản.
            </p>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:grid lg:grid-cols-[0.56fr_0.44fr] lg:gap-8 lg:py-16">
        {/* Contribution guidance */}
        <div>
          <h2 className="public-display public-heading-safe text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
            Cách đóng góp tư liệu
          </h2>
          <ol className="mt-6 grid gap-4">
            {steps.map((step, index) => {
              const Icon = step.icon;
              return (
                <li key={step.title} className="public-panel public-stagger-item flex items-start gap-4 rounded-[14px] p-5">
                  <span className="grid h-11 w-11 shrink-0 place-items-center rounded-[10px] bg-[rgb(200_164_106_/_0.14)]">
                    <Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
                  </span>
                  <span>
                    <span className="flex items-center gap-2">
                      <span className="font-display-vn text-xs font-extrabold tracking-[0.18em] text-[var(--primary)]">
                        {String(index + 1).padStart(2, "0")}
                      </span>
                      <span className="text-base font-bold text-[var(--tour-ink)]">{step.title}</span>
                    </span>
                    <span className="mt-1 block text-sm leading-6 text-[var(--muted-foreground)]">{step.detail}</span>
                  </span>
                </li>
              );
            })}
          </ol>
        </div>

        {/* Contact cards */}
        <div className="mt-8 lg:mt-0">
          <h2 className="public-display public-heading-safe text-2xl font-bold text-[var(--tour-ink)] sm:text-3xl">
            Thông tin liên hệ
          </h2>
          <div className="mt-6 grid gap-3">
            {contacts.map((c) => {
              const Icon = c.icon;
              const inner = (
                <>
                  <span className="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[rgb(200_164_106_/_0.18)]">
                    <Icon className="h-5 w-5 text-[var(--primary)]" strokeWidth={1.8} />
                  </span>
                  <span className="min-w-0">
                    <span className="block text-xs font-bold uppercase tracking-[0.1em] text-[var(--muted-foreground)]">{c.label}</span>
                    <span className="block break-words text-base font-semibold text-[var(--tour-ink)]">{c.value}</span>
                  </span>
                </>
              );
              const base = "public-panel flex items-center gap-4 rounded-[14px] p-5";
              return c.href ? (
                <a
                  key={c.label}
                  href={c.href}
                  target={c.external ? "_blank" : undefined}
                  rel={c.external ? "noopener noreferrer" : undefined}
                  className={`${base} group transition hover:-translate-y-0.5`}
                >
                  {inner}
                </a>
              ) : (
                <div key={c.label} className={base}>
                  {inner}
                </div>
              );
            })}
          </div>
          <p className="mt-4 inline-flex items-start gap-2 text-xs leading-5 text-[var(--muted-foreground)]">
            <Send className="mt-0.5 h-3.5 w-3.5 shrink-0 text-[var(--primary)]" strokeWidth={1.8} />
            Mọi thông tin, hình ảnh và tư liệu đóng góp xin gửi về Ủy ban nhân dân Xã Như Quỳnh theo địa chỉ và số điện thoại trên.
          </p>
        </div>
      </section>

      {/* Map */}
      <section className="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:pb-24">
        <div className="mb-6 flex items-center gap-4">
          <HeritageSeal className="h-8 w-8 shrink-0 text-[var(--primary)] opacity-80" />
          <div>
            <p className="public-kicker">Vị trí trên bản đồ</p>
            <h2 className="public-display public-heading-safe mt-1.5 text-xl font-bold text-[var(--tour-ink)] sm:text-2xl">
              {contact.address}
            </h2>
          </div>
        </div>
        <div className="public-map-frame overflow-hidden rounded-[16px] border border-[var(--surface-border)]">
          <iframe
            title="Bản đồ Thôn Đình Dù, Xã Như Quỳnh, tỉnh Hưng Yên"
            src={`https://www.google.com/maps?q=${encodeURIComponent(contact.address)}&output=embed`}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            className="h-[360px] w-full sm:h-[440px]"
          />
        </div>
      </section>

      <SiteFooter />
      <BackToTopButton />
    </main>
  );
}