import { Reveal } from "@/components/Reveal";
import springImg from "@/assets/season-spring.png.asset.json";
import summerImg from "@/assets/season-summer.png.asset.json";
import fallImg from "@/assets/season-fall.png.asset.json";
import winterImg from "@/assets/season-winter.png.asset.json";

const seasons = [
  {
    name: "Spring",
    image: springImg.url,
    activities: [
      "Beluga whale migration",
      "Eagle viewing",
      "Paragliding",
      "Gondola touring",
      "Tennis & golf",
      "Kayaking & rafting",
    ],
  },
  {
    name: "Summer",
    image: summerImg.url,
    activities: [
      "Sport fishing",
      "Whale watching",
      "Forest hiking",
      "Midnight sun excursions",
      "Elevated dining",
      "Bear viewing",
    ],
  },
  {
    name: "Fall",
    image: fallImg.url,
    activities: [
      "Wildlife photography",
      "Salmon runs",
      "Mountain biking",
      "Spa & wellness retreats",
      "Foliage expeditions",
      "Glamping",
    ],
  },
  {
    name: "Winter",
    image: winterImg.url,
    activities: [
      "Aurora borealis nights",
      "Dog sledding",
      "Alpine & Nordic skiing",
      "Ice climbing",
      "Snowmobile expeditions",
      "Hot springs & fjord cruises",
    ],
  },
];


export function Seasonal() {
  return (
    <section id="seasonal" className="bg-[#fafaf8] text-ink py-32 md:py-44">
      <div className="mx-auto max-w-[1440px] px-6 md:px-12">
        <Reveal>
          <div className="flex items-center gap-6 mb-20 md:mb-28">
            <span className="label text-gold">06</span>
            <span className="rule flex-1 text-ink" />
            <span className="label text-stone-500">Year-Round Experiences</span>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="display text-ink text-[42px] sm:text-[60px] md:text-[80px]">
            Year-Round Experiences
          </h2>
        </Reveal>
        <Reveal delay={0.15}>
          <p className="mt-8 max-w-2xl text-stone-600 leading-relaxed">
            Every season offers a distinct character — from midnight sun adventures to
            aurora-lit winter nights. Hover a panel to reveal its world.
          </p>
        </Reveal>

        {/* Stitched seasonal panorama — four portrait panels, no gap, hover to expand */}
        <Reveal delay={0.2}>
          <div className="mt-20 md:mt-24 flex w-full h-[460px] md:h-[620px] overflow-hidden group/panorama">
            {seasons.map((s) => (
              <div
                key={s.name}
                className="relative flex-1 hover:flex-[2.4] transition-[flex] duration-[900ms] ease-[cubic-bezier(0.22,1,0.36,1)] overflow-hidden cursor-pointer"
              >
                <img
                  src={s.image}
                  alt={`${s.name} landscape`}
                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-[1200ms] ease-[cubic-bezier(0.22,1,0.36,1)] group-hover/panorama:scale-100 scale-105"
                />
                {/* Vertical label */}
                <div className="absolute inset-0 flex items-end justify-center p-6 md:p-8 bg-gradient-to-t from-black/55 via-black/10 to-transparent">
                  <span
                    className="label text-white tracking-[0.3em]"
                    style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
                  >
                    {s.name}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* Activities grid below */}
        <div className="mt-16 md:mt-20 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
          {seasons.map((s, i) => (
            <Reveal key={s.name} delay={i * 0.08}>
              <div className="flex flex-col gap-5">
                <span className="label" style={{ color: "#b8a88a" }}>
                  {s.name}
                </span>
                <ul className="flex flex-col gap-3 border-t border-line-light pt-5">
                  {s.activities.map((a) => (
                    <li
                      key={a}
                      className="text-stone-600 text-[14px] leading-relaxed"
                    >
                      {a}
                    </li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
