import { Play } from "lucide-react";
import { Reveal } from "@/components/Reveal";

export function Video() {
  return (
    <section id="video" className="bg-[#0a0a0a] text-paper py-20 md:py-28 border-t border-line-dark">
      <div className="mx-auto max-w-[1440px] px-6 md:px-12 text-center">
        <Reveal>
          <div className="flex items-center justify-center gap-6 mb-12">
            <span className="label text-gold">04</span>
            <span className="label text-paper/60">Property Presentation</span>
          </div>
        </Reveal>

        <Reveal>
          <h2 className="display text-paper text-[42px] sm:text-[60px] md:text-[80px]">
            See The Vision
          </h2>
        </Reveal>

        <Reveal delay={0.1}>
          <div className="mt-14 mx-auto max-w-[960px] aspect-video border border-white/10 rounded-lg bg-white/[0.02] flex flex-col items-center justify-center gap-6 p-8">
            <div className="h-16 w-16 rounded-full border border-gold flex items-center justify-center text-gold">
              <Play className="h-6 w-6 ml-1" fill="currentColor" />
            </div>
            <span className="label text-paper/45 leading-relaxed text-center">
              VIDEO — Property presentation / fly-through (embed URL to be added)
            </span>
          </div>
        </Reveal>

        <Reveal delay={0.2}>
          <p className="mt-10 text-stone-300 leading-relaxed text-[15px] md:text-base">
            A guided overview of the site, development concepts, and seasonal experiences.
          </p>
        </Reveal>
      </div>
    </section>
  );
}
