import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Reveal, CurtainLift } from "@/components/Reveal";
import { TopoTexture } from "@/components/TopoTexture";
import locOne from "@/assets/property-location-1.jpg.asset.json";
import locTwo from "@/assets/property-location-2.jpg.asset.json";
import locThree from "@/assets/property-location-3.jpg.asset.json";
import locFour from "@/assets/property-location-4.jpg.asset.json";
import locFive from "@/assets/property-location-5.jpg.asset.json";

const access = [
  { label: "By Air", value: "15 min helicopter from Anchorage Intl (ANC)" },
  { label: "Nearest Airport", value: "Ted Stevens Anchorage Intl (ANC)" },
  { label: "By Sea", value: "8 miles across Turnagain Arm via high-speed tender" },
  { label: "By Road", value: "Scenic highway access via local routes" },
];

const strategic = [
  { label: "Faces", value: "Anchorage — across Turnagain Arm" },
  { label: "Bordered by", value: "Kenai National Wildlife Sanctuary" },
  { label: "Bay", value: "Beluga whale migration corridor" },
  { label: "Mountain views", value: "Chugach Range panorama" },
];

const galleryImages = [
  {
    src: locOne.url,
    alt: "Map of Alaska's key cruise ports surrounding the property",
    plate: "Map 01",
    caption: "Alaska's Key Cruise Ports",
  },
  {
    src: locTwo.url,
    alt: "Map showing the property between Anchorage and Kenai National Wildlife Sanctuary with protected beluga area",
    plate: "Map 02",
    caption: "Beluga Bay & Wildlife Sanctuary",
  },
  {
    src: locThree.url,
    alt: "Close-up map showing the property surrounded by natural protected area",
    plate: "Map 03",
    caption: "Surrounded by Protected Land",
  },
  {
    src: locFour.url,
    alt: "Map showing 8 miles distance from Anchorage by helicopter or tender",
    plate: "Map 04",
    caption: "10 Minutes from Anchorage",
  },
  {
    src: locFive.url,
    alt: "Map showing primary highway access and scenic local access routes to the property",
    plate: "Map 05",
    caption: "Highway & Coastal Access",
  },
];

export function Location() {
  const [activeIndex, setActiveIndex] = useState(0);
  const activeImage = galleryImages[activeIndex];

  const showPrevious = () =>
    setActiveIndex((c) => (c === 0 ? galleryImages.length - 1 : c - 1));
  const showNext = () =>
    setActiveIndex((c) => (c === galleryImages.length - 1 ? 0 : c + 1));

  return (
    <section id="location" className="relative isolate overflow-hidden bg-ink text-paper py-32 md:py-40">
      <TopoTexture opacity={0.1} />
      <div className="relative z-10 mx-auto max-w-[1440px] px-6 md:px-12">
        <Reveal>
          <div className="flex items-center gap-6 mb-16 md:mb-24">
            <span className="label text-gold">05</span>
            <span className="rule flex-1 text-paper" />
            <span className="label text-paper/60">Location</span>
          </div>
        </Reveal>

        <Reveal>
          <div className="flex flex-col gap-2 mb-10 md:mb-14">
            <span className="label text-gold">Coordinates</span>
            <span className="display text-paper text-2xl md:text-4xl">
              60° 53′ N · 150° 16′ W
            </span>
          </div>
        </Reveal>

        <CurtainLift>
          <div className="relative overflow-hidden rounded-sm ring-1 ring-white/5 bg-ink shadow-[0_30px_80px_-20px_rgba(0,0,0,0.6)]">
            <div className="relative aspect-[16/9]">
              <img
                src={activeImage.src}
                alt={activeImage.alt}
                className="h-full w-full object-cover"
                loading="lazy"
              />
              <div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-black/70 to-transparent" />

              <button
                type="button"
                onClick={showPrevious}
                aria-label="Show previous image"
                className="absolute left-4 top-1/2 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-paper backdrop-blur-sm transition hover:bg-black/70"
              >
                <ChevronLeft className="h-5 w-5" />
              </button>
              <button
                type="button"
                onClick={showNext}
                aria-label="Show next image"
                className="absolute right-4 top-1/2 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/40 text-paper backdrop-blur-sm transition hover:bg-black/70"
              >
                <ChevronRight className="h-5 w-5" />
              </button>

              <div className="absolute bottom-4 left-6 right-6 flex items-center justify-between text-paper/80">
                <span className="label">{activeImage.plate}</span>
                <span className="label">{activeImage.caption}</span>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-2 bg-ink p-2 sm:grid-cols-5">
              {galleryImages.map((image, index) => {
                const isActive = index === activeIndex;
                return (
                  <button
                    key={image.src}
                    type="button"
                    onClick={() => setActiveIndex(index)}
                    aria-label={`Show image ${index + 1}`}
                    aria-pressed={isActive}
                    className={`relative aspect-[16/9] overflow-hidden rounded-sm transition ${
                      isActive
                        ? "ring-2 ring-gold opacity-100"
                        : "ring-1 ring-white/10 opacity-60 hover:opacity-100"
                    }`}
                  >
                    <img
                      src={image.src}
                      alt={image.alt}
                      className="h-full w-full object-cover"
                      loading="lazy"
                    />
                  </button>
                );
              })}
            </div>
          </div>
        </CurtainLift>

        <div className="mt-16 md:mt-20 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {access.map((d) => (
            <div key={d.label} className="flex flex-col gap-2 border-t border-line-dark pt-4">
              <span className="label text-paper/65">{d.label}</span>
              <span className="display text-paper text-lg md:text-xl leading-snug">
                {d.value}
              </span>
            </div>
          ))}
        </div>

        <div className="mt-20 md:mt-24">
          <Reveal>
            <ul className="max-w-2xl text-stone-300 leading-relaxed text-[15px] md:text-base list-disc pl-5 space-y-3 marker:text-gold">
              <li>Directly across Turnagain Arm from Anchorage</li>
              <li>Complete wilderness seclusion with seamless global access</li>
              <li>Bordered by the Kenai National Wildlife Sanctuary — permanently protected surroundings</li>
              <li>Beluga Bay is home to one of the world's only beluga whale migration corridors</li>
              <li>Year-round mountain panoramas of the Chugach Range from the site</li>
            </ul>
          </Reveal>

          <Reveal delay={0.15}>
            <div className="mt-16 md:mt-20">
              <span className="label text-gold">Strategic Position</span>
              <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-x-12 gap-y-6 max-w-3xl">
                {strategic.map((s) => (
                  <div
                    key={s.label}
                    className="flex flex-col gap-2 border-t border-line-dark pt-4"
                  >
                    <span className="label text-paper/55">{s.label}</span>
                    <span className="display text-paper text-xl md:text-2xl">{s.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}
