import { Container } from "@/components/ui/Container";
import { Button } from "@/components/ui/Button";
import { Reveal } from "@/components/ui/Reveal";
import { Video } from "@/components/ui/Video";
import { media } from "@/lib/assets";

/**
 * Experiences — a full-bleed immersion band: the in-headset footage runs edge to
 * edge with the copy and one CTA laid over a low-left scrim, exactly the
 * original's cinematic break between the product sections.
 */
export function Experiences({ href = "#experiences" }: { href?: string }) {
  return (
    <section
      id="experiences"
      className="relative flex min-h-[78vh] items-end overflow-hidden bg-paper text-ink"
    >
      <div aria-hidden className="absolute inset-0">
        <Video webm={media.experiencesWebm} className="h-full w-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-paper/85 via-paper/20 to-paper/30" />
      </div>

      <Container className="relative z-10 pb-16 pt-32 md:pb-24">
        <Reveal className="max-w-2xl">
          <h2 className="font-display text-[clamp(2.5rem,6vw,5rem)] font-medium leading-[1.0] tracking-[-0.03em]">
            Experience unbelievable immersion
          </h2>
          <p className="mt-5 max-w-md text-xl text-ink/75">
            Step into a realm where the lines between virtual and reality blur.
          </p>
          <Button href={href} variant="brand" size="lg" className="mt-9">
            Explore Experiences
          </Button>
        </Reveal>
      </Container>
    </section>
  );
}