import { useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { CurtainLift, Reveal } from "@/components/Reveal";
import { TopoTexture } from "@/components/TopoTexture";
import summerCover from "@/assets/summer-cover.png.asset.json";
import winterCover from "@/assets/kenai-winter-cover.png.asset.json";
import winterOne from "@/assets/kenai-winter-1.png.asset.json";
import winterTwo from "@/assets/kenai-winter-2.png.asset.json";
import winterThree from "@/assets/kenai-winter-3.png.asset.json";
import winterFour from "@/assets/kenai-winter-4.png.asset.json";

import winterSix from "@/assets/kenai-winter-6.png.asset.json";

const stats = [
  { label: "Total Area", value: "144 Acres Development (220 incl. Bluff)" },
  { label: "Waterfront", value: "Direct Beluga Bay Frontage" },
  { label: "Views", value: "Cook Inlet & Chugach Mountains" },
  { label: "Access", value: "Helicopter · Seaplane · High Speed Tender · Road" },
  { label: "Proximity", value: "Kenai National Wildlife Sanctuary (adjacent)" },
];

const galleryImages = [
  {
    src: summerCover.url,
    alt: "Summer aerial view of Beluga Bay waterfront with green meadow, forest, and mountain range",
    plate: "Plate 01",
    season: "Shoreline · Summer",
  },
  {
    src: winterCover.url,
    alt: "Winter aerial cover view of the Kenai property with snowy terrain and mountain backdrop",
    plate: "Plate 02",
    season: "Shoreline · Winter",
  },
  {
    src: winterOne.url,
    alt: "Winter aerial landscape of the Kenai property with snow-covered forest and Cook Inlet view",
    plate: "Plate 03",
    season: "Terrain · Winter",
  },
  {
    src: winterTwo.url,
    alt: "Winter aerial bluff view along the shoreline with frozen edges and distant mountain range",
    plate: "Plate 04",
    season: "Bluff Edge · Winter",
  },
  {
    src: winterThree.url,
    alt: "Winter shoreline aerial of the property with icy coastline and mountains across the water",
    plate: "Plate 05",
    season: "Coastline · Winter",
  },
  {
    src: winterFour.url,
    alt: "Winter aerial of snow-covered shoreline forest opening to Beluga Bay with distant mountain panorama",
    plate: "Plate 06",
    season: "Bay Vista · Winter",
  },
  {
    src: winterSix.url,
    alt: "Winter bluff-edge aerial above icy shoreline with expansive water and mountain views",
    plate: "Plate 07",
    season: "Coastal Bluff · Winter",
  },

];

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

  const showPrevious = () => {
    setActiveIndex((current) => (current === 0 ? galleryImages.length - 1 : current - 1));
  };

  const showNext = () => {
    setActiveIndex((current) => (current === galleryImages.length - 1 ? 0 : current + 1));
  };

  return (
    <section id="land" className="relative isolate overflow-hidden bg-ink text-paper py-32 md:py-48">
      <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-20 md:mb-32">
            <span className="label text-gold">01</span>
            <span className="rule flex-1 text-paper" />
            <span className="label text-paper/60">The Land</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.season}</span>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-2 bg-ink p-2 sm:grid-cols-4 lg:grid-cols-7">
              {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-24 md:mt-32 grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
          {/* Left: hero number + narrative bullets */}
          <div className="lg:col-span-5 lg:sticky lg:top-24">
            <Reveal y={40}>
              <div>
                <h2 className="display text-paper text-[96px] sm:text-[140px] md:text-[180px] lg:text-[200px] leading-none">
                  144
                </h2>
                <p className="label text-gold mt-4">Acres · Beluga Bay Waterfront</p>
                <p className="text-paper/70 mt-6 max-w-md leading-relaxed text-[15px] md:text-base">
                  One of the last undeveloped waterfront holdings on Alaska's Kenai Peninsula — 220 total acres including a dramatic coastal bluff.
                </p>
              </div>
            </Reveal>
          </div>

          {/* Right: stats grid + bullet details */}
          <div className="lg:col-span-7">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-10">
              {stats.map((s, i) => (
                <Reveal key={s.label} delay={i * 0.06}>
                  <div className="flex flex-col gap-3 border-t border-line-dark pt-5">
                    <span className="label text-paper/55">{s.label}</span>
                    <span className="display text-paper text-lg md:text-xl leading-snug">{s.value}</span>
                  </div>
                </Reveal>
              ))}
            </div>

            <Reveal delay={0.2}>
              <div className="mt-16 border-t border-line-dark pt-8">
                <span className="label text-paper/55">Highlights</span>
                <ul className="mt-6 text-stone-300 leading-relaxed text-[15px] md:text-base space-y-4">
                  {[
                    "144 acre parcel on the shores of Beluga Bay, surrounded by permanently protected landscapes",
                    "Unobstructed panoramic views across Cook Inlet to the Chugach Range",
                    "Accessible by helicopter (15 min from Anchorage), seaplane, high speed tender, or scenic road",
                    "Remote wilderness with global connectivity",
                  ].map((item) => (
                    <li key={item} className="flex gap-4">
                      <span className="mt-2 h-px w-6 flex-shrink-0 bg-gold" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          </div>
        </div>

      </div>
    </section>
  );
}
