import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { KUMBH_IMAGES } from "@/lib/constants";
import { EVENT } from "@/lib/event";
import { TRAVEL_DISTANCES, UJJAIN_PLACES } from "@/lib/ujjain";

export const metadata: Metadata = {
  title: `Explore Ujjain · Places & How to Reach · ${EVENT.nameEn} ${EVENT.year}`,
  description: `${EVENT.aboutEn} Places to visit and distances from Indore Airport and Ujjain Railway Station.`,
};

export default function UjjainPage() {
  return (
    <main className="min-h-screen">
      <div className="relative min-h-[52vh] overflow-hidden">
        <Image
          src={KUMBH_IMAGES.mahakal}
          alt="Sacred Mahakal temple atmosphere in Ujjain"
          fill
          priority
          className="object-cover object-center"
          sizes="100vw"
        />
        <div className="absolute inset-0 z-[1] bg-[linear-gradient(180deg,rgba(18,24,36,0.3)_0%,rgba(18,24,36,0.35)_55%,rgba(238,242,245,0.5)_90%,var(--bg)_100%)]" />
        <SiteHeader />
        <div className="relative z-10 mx-auto flex max-w-6xl flex-col justify-end px-5 pb-12 pt-28">
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--gold)]">
            ॐ · सिंहस्थ {EVENT.year} · शिप्रा तट
          </p>
          <h1 className="font-display mt-2 max-w-[14ch] text-4xl font-semibold leading-tight text-[var(--hero-ink)] md:text-6xl">
            Walk Ujjain beyond the ghats
          </h1>
          <p className="mt-4 max-w-xl text-[var(--hero-muted)] md:text-lg">
            {EVENT.aboutEn}
          </p>
          <div className="mt-6 flex flex-wrap gap-3">
            <a href="#places" className="btn btn-primary">
              Places to visit
            </a>
            <a href="#how-to-reach" className="btn btn-secondary">
              How to reach
            </a>
          </div>
        </div>
      </div>

      <section className="border-b border-[var(--line)]">
        <div className="mx-auto grid max-w-6xl gap-4 px-5 py-10 sm:grid-cols-3">
          {[
            {
              label: "Nearest airport",
              value: "Indore (IDR)",
              note: "≈ 56–58 km to Mahakal",
            },
            {
              label: "Main railway",
              value: "Ujjain Junction",
              note: "≈ 2–2.5 km to Mahakal",
            },
            {
              label: "Sacred river",
              value: "Shipra",
              note: "Ram Ghat & Kumbh snan",
            },
          ].map((item) => (
            <div
              key={item.label}
              className="rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] px-5 py-4"
            >
              <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[var(--gold)]">
                {item.label}
              </p>
              <p className="font-display mt-1 text-2xl font-semibold">
                {item.value}
              </p>
              <p className="mt-1 text-sm text-[var(--muted)]">{item.note}</p>
            </div>
          ))}
        </div>
      </section>

      <section id="places" className="scroll-mt-24 mx-auto max-w-6xl px-5 py-14">
        <h2 className="font-display text-3xl font-semibold md:text-4xl">
          Places devotees often visit
        </h2>
        <p className="mt-3 max-w-2xl text-[var(--muted)]">
          Plan darshan around Mahakal first, then add nearby temples and river
          ghats. Times and access may change during peak Kumbh days — follow
          local announcements.
        </p>
        <div className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {UJJAIN_PLACES.map((place) => (
            <article
              key={place.name}
              className="panel-surface rounded-2xl p-5"
            >
              <p className="text-xs font-semibold uppercase tracking-[0.12em] text-[var(--gold)]">
                {place.area}
              </p>
              <h3 className="font-display mt-1 text-xl font-semibold">
                {place.name}
              </h3>
              <p className="mt-2 text-sm text-[var(--muted)]">{place.summary}</p>
              {place.tip && (
                <p className="mt-3 text-sm text-[var(--ash)]">
                  Tip: {place.tip}
                </p>
              )}
            </article>
          ))}
        </div>
      </section>

      <section
        id="how-to-reach"
        className="scroll-mt-24 border-y border-[var(--line)] bg-[rgba(255,255,255,0.55)]"
      >
        <div className="mx-auto max-w-6xl px-5 py-14">
          <h2 className="font-display text-3xl font-semibold md:text-4xl">
            How to reach Mahakal
          </h2>
          <p className="mt-3 max-w-2xl text-[var(--muted)]">
            Ujjain has no major commercial airport. Fly into{" "}
            <strong className="text-[var(--ink)]">
              Devi Ahilya Bai Holkar Airport, Indore (IDR)
            </strong>
            , or arrive by train at{" "}
            <strong className="text-[var(--ink)]">Ujjain Junction</strong>.
            Distances below are approximate.
          </p>

          <div className="mt-8 overflow-x-auto rounded-2xl border border-[var(--line)]">
            <table className="w-full min-w-[640px] border-collapse text-left text-sm">
              <thead>
                <tr className="bg-[var(--bg-elevated)] text-xs uppercase tracking-[0.08em] text-[var(--muted)]">
                  <th className="px-4 py-3 font-semibold">From</th>
                  <th className="px-4 py-3 font-semibold">To</th>
                  <th className="px-4 py-3 font-semibold">Distance</th>
                  <th className="px-4 py-3 font-semibold">Time</th>
                  <th className="px-4 py-3 font-semibold">Typical mode</th>
                </tr>
              </thead>
              <tbody>
                {TRAVEL_DISTANCES.map((row) => (
                  <tr
                    key={`${row.from}-${row.to}`}
                    className="border-t border-[var(--line)]"
                  >
                    <td className="px-4 py-3 text-[var(--ink)]">{row.from}</td>
                    <td className="px-4 py-3 text-[var(--muted)]">{row.to}</td>
                    <td className="px-4 py-3 font-medium text-[var(--gold)]">
                      {row.distance}
                    </td>
                    <td className="px-4 py-3 text-[var(--muted)]">{row.time}</td>
                    <td className="px-4 py-3 text-[var(--muted)]">{row.mode}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="mt-8 grid gap-4 md:grid-cols-2">
            <div className="rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-5">
              <h3 className="font-display text-xl font-semibold">
                From Indore Airport
              </h3>
              <p className="mt-2 text-sm text-[var(--muted)]">
                Take a prepaid taxi or app cab toward Ujjain via the Indore–Ujjain
                highway. Allow extra time during peak snan days for checkpoints
                and diversions. Buses and shared cabs also operate on this
                corridor.
              </p>
            </div>
            <div className="rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-5">
              <h3 className="font-display text-xl font-semibold">
                From Ujjain Railway Station
              </h3>
              <p className="mt-2 text-sm text-[var(--muted)]">
                Mahakaleshwar is a short auto or e-rickshaw ride (about 2–2.5
                km). Keep small change ready and confirm the Mahakal / Mahakal
                Lok drop point with the driver.
              </p>
            </div>
          </div>

          <p className="mt-6 text-xs text-[var(--muted)]">
            Travel times vary with traffic, weather, and mela crowd control.
            Always follow instructions from police and event volunteers.
          </p>
        </div>
      </section>

      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <Image
            src={KUMBH_IMAGES.aarti}
            alt=""
            fill
            className="object-cover opacity-50"
            sizes="100vw"
          />
          <div className="absolute inset-0 bg-[var(--bg)]/50" />
        </div>
        <div className="relative mx-auto max-w-6xl px-5 py-16 text-center">
          <h2 className="font-display text-3xl font-semibold">
            Register before you arrive
          </h2>
          <p className="mx-auto mt-3 max-w-lg text-[var(--muted)]">
            Complete Aadhaar + OTP registration online and carry your Kumbh Pass
            QR along with your Aadhaar card.
          </p>
          <Link href="/register" className="btn btn-primary mt-8">
            Get your Kumbh Pass
          </Link>
        </div>
      </section>

      <SiteFooter />
    </main>
  );
}