import { Reveal } from "@/components/Reveal";
import { useEffect, useRef, useState } from "react";

function CountUp({
  to,
  decimals = 1,
  suffix = "",
  prefix = "",
  duration = 1800,
}: {
  to: number;
  decimals?: number;
  suffix?: string;
  prefix?: string;
  duration?: number;
}) {
  const ref = useRef<HTMLSpanElement>(null);
  const [value, setValue] = useState(0);
  const started = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started.current) {
            started.current = true;
            const start = performance.now();
            const tick = (now: number) => {
              const p = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - p, 3);
              setValue(to * eased);
              if (p < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);

  return (
    <span ref={ref}>
      {prefix}
      {value.toFixed(decimals)}
      {suffix}
    </span>
  );
}

const stats = [
  { value: "2.2M+", label: "Annual Alaska Visitors", sub: "Record Levels 2025" },
  { value: "$1,700", label: "Per Night · Denali Benchmark", sub: "Alaska luxury lodge rate" },
  { value: "80–84%", label: "Summer Occupancy", sub: "Alaska luxury lodges" },
];

export function Market() {
  return (
    <section id="market" className="bg-[#0a0a0a] text-paper 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">07</span>
            <span className="rule flex-1 text-paper" />
            <span className="label text-paper/60">Market Context</span>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="display text-paper text-[42px] sm:text-[60px] md:text-[80px] max-w-[18ch]">
            Market Context
          </h2>
        </Reveal>

        <Reveal delay={0.15}>
          <div className="mt-14 md:mt-16 border-t border-line-dark pt-8">
            <span className="label text-paper/55">Cruise Tourism Growth</span>
            <div className="mt-8 grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-6 items-end">
              <div className="flex flex-col gap-2">
                <span className="display text-paper text-4xl md:text-5xl tabular-nums">
                  <CountUp to={1.9} suffix="M" />
                </span>
                <span className="label text-paper/60">2024 · Guests</span>
              </div>
              <div className="flex flex-col gap-2 sm:border-l sm:border-r sm:border-line-dark sm:px-6">
                <span className="display text-gold text-5xl md:text-6xl font-semibold tabular-nums">
                  <CountUp to={2.2} suffix="M+" />
                </span>
                <span className="label text-gold">2025 · Record</span>
              </div>
              <div className="flex flex-col gap-2">
                <span className="display text-paper text-4xl md:text-5xl tabular-nums">
                  <CountUp to={2.5} suffix="M" />
                </span>
                <span className="label text-paper/60">2026 · Projected</span>
              </div>
            </div>
          </div>
        </Reveal>

        <div className="mt-20 md:mt-24 grid grid-cols-1 md:grid-cols-3 gap-px bg-line-dark">
          {stats.map((s, i) => (
            <Reveal key={s.label} delay={i * 0.1} className="bg-[#0a0a0a]">
              <div className="p-10 md:p-12 flex flex-col gap-4 h-full">
                <span className="display text-paper text-[60px] sm:text-[80px] md:text-[96px]">
                  {s.value}
                </span>
                <span className="label text-paper/70">{s.label}</span>
                <span className="text-stone-300 text-[14px] leading-relaxed">{s.sub}</span>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={0.2}>
          <div className="mt-16 md:mt-20 border-l-2 border-gold pl-8 max-w-3xl">
            <span className="label text-gold">Key Insight</span>
            <p className="mt-4 text-stone-200 leading-relaxed text-[15px] md:text-base">
              The Kenai Peninsula is transitioning from a traditional residential market into a
              premier lifestyle and experiential luxury destination. Limited prime waterfront
              supply, combined with permanently protected surroundings, creates long-term value
              potential, particularly for hospitality-driven development.
            </p>
          </div>
        </Reveal>

      </div>
    </section>
  );
}