"use client";

import { HorizontalAccordion } from "./HorizontalAccordion";
import { InstagramFeed } from "./InstagramFeed";
import { ScrollProgressBar } from "./ScrollProgressBar";
import { SectionDivider } from "./SectionDivider";
import { VideoPreview } from "./VideoPreview";
import { ReelPlayer } from "./ReelPlayer";
import { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { DepthMap } from "./DepthMap";
import Image from "next/image";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";

// Animation variants for page load
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { 
    opacity: 0, 
    y: 20 
  },
  visible: {
    opacity: 1,
    y: 0,
  },
};


export function TempPlaceholder() {
  const titleRef = useRef<HTMLHeadingElement | null>(null);
  const titleInnerRef = useRef<HTMLSpanElement | null>(null);
  const bioTextRef = useRef<HTMLSpanElement | null>(null);
  const [titleWidth, setTitleWidth] = useState<number | null>(null);
  const [bioFontSizePx, setBioFontSizePx] = useState<number | null>(null);
  const baseBioFontSizeRef = useRef<number | null>(null);
  const [isEasterEggOpen, setIsEasterEggOpen] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isPigeonEggOpen, setIsPigeonEggOpen] = useState(false);
  const [pigeonMousePosition, setPigeonMousePosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const measure = () => {
      const measuredTitleWidth = titleInnerRef.current?.offsetWidth ?? null;
      setTitleWidth(measuredTitleWidth);

      if (measuredTitleWidth && bioTextRef.current) {
        const element = bioTextRef.current;
        if (baseBioFontSizeRef.current === null) {
          const initialFontSize = parseFloat(getComputedStyle(element).fontSize);
          baseBioFontSizeRef.current = isNaN(initialFontSize) ? 16 : initialFontSize;
        }

        // Temporarily ensure we measure at base font size
        const baseFontSize = baseBioFontSizeRef.current ?? 16;
        const previousInlineFontSize = element.style.fontSize;
        element.style.fontSize = `${baseFontSize}px`;
        const bioNaturalWidth = element.offsetWidth;
        // Restore previous inline style before we set state (will update after render)
        element.style.fontSize = previousInlineFontSize;

        if (bioNaturalWidth > 0) {
          // On mobile, use a more conservative scaling to prevent cramped text
          const isMobile = window.innerWidth < 640; // sm breakpoint
          const isTablet = window.innerWidth < 1024; // lg breakpoint
          
          let maxScale;
          if (isMobile) {
            maxScale = 0.8; // Limit scaling on mobile
          } else if (isTablet) {
            maxScale = 1.2; // Allow more scaling on tablet
          } else {
            maxScale = 1.8; // Allow much more scaling on desktop
          }
          
          const scale = Math.min(measuredTitleWidth / bioNaturalWidth, maxScale);
          setBioFontSizePx(baseFontSize * scale);
        }
      }
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, []);
  return (
    <>
      <ScrollProgressBar />
      <section className="py-8 md:py-16 bg-black text-white min-h-screen">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[900px]">
          {/* Navigation */}
          <nav className="mb-12 md:mb-16">
            <div className="flex justify-between items-center py-6 border-b border-white/10">
              <div className="text-lg font-mono tracking-tight">BIOHAZARD</div>
              <div className="flex gap-6 text-sm">
                <a href="#about" className="hover:text-[#ff4d00] transition-colors">About</a>
                <a href="#work" className="hover:text-[#ff4d00] transition-colors">Work</a>
                <a href="#studio" className="hover:text-[#ff4d00] transition-colors">Studio</a>
                <a href="#contact" className="hover:text-[#ff4d00] transition-colors">Contact</a>
              </div>
            </div>
          </nav>

          {/* Main Card Container */}
          <div className="relative bg-[#0a0a0a] border border-white/5 p-6 sm:p-8 md:p-12">
            <motion.div
              className="relative"
              variants={containerVariants}
              initial="hidden"
              animate="visible"
              transition={{
                staggerChildren: 0.1,
                delayChildren: 0.1,
              }}
            >
        {/* About Section */}
        <section id="about" className="mb-16 md:mb-20">
          <motion.p
            className="text-sm text-gray-500 mb-6"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            Last updated: 10-12-2025
          </motion.p>

          <motion.h1
            ref={titleRef}
            className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 leading-tight"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span ref={titleInnerRef} className="inline-block">
              You've gotta be <em className="text-gray-400">shittin'</em> me.
            </span>
          </motion.h1>
          <motion.p
            className="text-base sm:text-lg mb-2 text-gray-300"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            This is the 20th time this has happened.
          </motion.p>
          <motion.p
            className="text-base sm:text-lg mb-6 md:mb-8 text-gray-400"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <em>Nicholai broke the website, again.</em>
          </motion.p>

          <motion.div
            className="mb-8"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <HorizontalAccordion trigger="How did we get here?">
            <div className="w-full">
              <p className="mb-4 text-gray-400 text-sm">
                <em>(TLDR: perfectionism is the mind killer)</em>
              </p>
              <ol className="list-decimal list-inside space-y-3 text-gray-300 leading-relaxed break-words">
                <li>We needed a website (circa January 2023)</li>
                <li>We tried to build one on squarespace (that shit sucks)</li>
                <li>
                  Nicholai figured "I know some html and javascript, why not just{" "}
                  <em>make</em> one."
                </li>
                <li>
                  But of course, <strong>the html site sucked</strong> and was
                  difficult to host.
                </li>
                <li>
                  And naturally, the website for some reason <em>needed</em> to look
                  good.
                </li>
                <li>
                  So then began a longwinded journey of Nicholai learning <em>react</em>
                </li>
                <li>Nicholai should've stuck to python.</li>
              </ol>
            </div>
          </HorizontalAccordion>
        </motion.div>
        <HoverCard openDelay={300}>
          <HoverCardTrigger asChild>
            <motion.h1 
              onClick={(e) => {
                setMousePosition({ x: e.clientX, y: e.clientY });
                setIsEasterEggOpen(true);
              }}
              className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl xl:text-9xl font-black mb-4 md:mb-6 font-exo-2 text-center mx-auto leading-none cursor-pointer transition-opacity hover:opacity-80" 
              style={{ 
                color: '#000000',
                textShadow: '2px 2px 0px #ff4d00, 4px 4px 0px #ff4d00',
                width: titleWidth ? `${titleWidth}px` : undefined
              }}
              variants={itemVariants}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <span ref={bioTextRef} className="inline-block" style={{ fontSize: bioFontSizePx ? `${bioFontSizePx}px` : undefined }}>
                BIOHAZARD
              </span>
            </motion.h1>
          </HoverCardTrigger>
          <HoverCardContent className="w-auto px-3 py-2 bg-black border-gray-800 text-gray-300 text-sm">
            Click to reveal
          </HoverCardContent>
        </HoverCard>
        
        <AnimatePresence>
          {isEasterEggOpen && (
            <>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.3 }}
                className="fixed inset-0 z-50 bg-black/80"
                onClick={() => setIsEasterEggOpen(false)}
              />
              <motion.div
                initial={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
                animate={{ opacity: 1, scale: 1, x: '-50%', y: '-50%' }}
                exit={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
                transition={{ 
                  duration: 0.4,
                  ease: [0.16, 1, 0.3, 1]
                }}
                style={{
                  position: 'fixed',
                  left: mousePosition.x,
                  top: mousePosition.y,
                }}
                className="z-50 w-[90vw] max-w-[350px]"
                onMouseLeave={() => setIsEasterEggOpen(false)}
              >
                <div className="relative bg-black overflow-hidden shadow-2xl">
                  <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ 
                      duration: 0.3,
                      delay: 0.1,
                      ease: [0.16, 1, 0.3, 1]
                    }}
                    className="relative w-full aspect-square"
                  >
                    <DepthMap 
                      originalImg="/OLIVER.jpeg" 
                      depthImg="/OLIVER_depth.jpeg"
                      verticalThreshold={40}
                      horizontalThreshold={70}
                    />
                  </motion.div>
                </div>
              </motion.div>
            </>
          )}
        </AnimatePresence>
        
        <AnimatePresence>
          {isPigeonEggOpen && (
            <>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.3 }}
                className="fixed inset-0 z-50 bg-black/80"
                onClick={() => setIsPigeonEggOpen(false)}
              />
              <motion.div
                initial={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
                animate={{ opacity: 1, scale: 1, x: '-50%', y: '-50%' }}
                exit={{ opacity: 0, scale: 0.7, x: '-50%', y: '-50%' }}
                transition={{ 
                  duration: 0.4,
                  ease: [0.16, 1, 0.3, 1]
                }}
                style={{
                  position: 'fixed',
                  left: pigeonMousePosition.x,
                  top: pigeonMousePosition.y,
                }}
                className="z-50 w-[90vw] max-w-[400px]"
                onMouseLeave={() => setIsPigeonEggOpen(false)}
              >
                <div className="relative bg-black overflow-hidden shadow-2xl">
                  <motion.div
                    initial={{ opacity: 0, scale: 0.9 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ 
                      duration: 0.3,
                      delay: 0.1,
                      ease: [0.16, 1, 0.3, 1]
                    }}
                    className="relative w-full"
                  >
                    <Image 
                      src="/no_pigeons_zone.gif"
                      alt="No pigeons zone"
                      width={400}
                      height={400}
                      className="w-full h-auto"
                      unoptimized
                    />
                  </motion.div>
                </div>
              </motion.div>
            </>
          )}
        </AnimatePresence>
        <motion.p
          className="mb-6 md:mb-8 text-base sm:text-lg text-gray-300"
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <strong>Who we are:</strong> artists and technical people, we're
          better at VFX than we are at web design, I promise.
        </motion.p>
        </section>

        <SectionDivider />

        {/* Work Section */}
        <section id="work" className="mb-16 md:mb-20">
        <motion.p
          className="mb-6 text-base sm:text-lg"
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <strong>&gt; Here's our reel:</strong>
        </motion.p>

        <motion.div
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
          className="mb-8"
        >
          <ReelPlayer src="/reel.mp4" />
        </motion.div>

        <SectionDivider />

        <motion.p
          className="mb-4 md:mb-6 text-base sm:text-lg"
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <strong>&gt; Some projects we've worked on:</strong>
        </motion.p>

        <motion.ul 
          className="mb-6 md:mb-8 space-y-3 md:space-y-4 text-sm sm:text-base"
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <motion.li 
            className="flex items-start"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span className="text-gray-400 mr-3 mt-1">•</span>
            <motion.a
              href="https://www.instagram.com/biohazardvfx/"
              className="block leading-relaxed relative"
              style={{ color: '#ff4d00' }}
              target="_blank"
              rel="noopener noreferrer"
              whileHover={{ opacity: 0.8 }}
              whileTap={{ scale: 0.98 }}
              transition={{ duration: 0.2 }}
            >
              <span className="relative inline-block">
                Gstar Raw - Pommelhorse
                <motion.span
                  className="absolute bottom-0 left-0 h-[1px] bg-current"
                  initial={{ scaleX: 0 }}
                  whileHover={{ scaleX: 1 }}
                  transition={{ duration: 0.3, ease: "easeOut" }}
                  style={{ transformOrigin: 'left', width: '100%' }}
                />
              </span>
            </motion.a>
          </motion.li>
          <motion.li 
            className="flex items-start"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span className="text-gray-400 mr-3 mt-1">•</span>
            <HoverCard>
              <HoverCardTrigger asChild>
                <motion.a
                  href="https://www.youtube.com/watch?v=4QIZE708gJ4"
                  className="block leading-relaxed relative"
                  style={{ color: '#ff4d00' }}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ 
                    textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
                  }}
                  whileTap={{ scale: 0.98 }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="relative inline-block">
                    Post Malone - I Had Some Help<br className="sm:hidden" />
                    <span className="sm:hidden">(feat. Morgan Wallen)</span>
                    <span className="hidden sm:inline"> (feat. Morgan Wallen)</span>
                    <motion.span
                      className="absolute bottom-0 left-0 h-[1px] bg-current"
                      initial={{ scaleX: 0 }}
                      whileHover={{ scaleX: 1 }}
                      transition={{ duration: 0.3, ease: "easeOut" }}
                      style={{ transformOrigin: 'left', width: '100%' }}
                    />
                  </span>
                </motion.a>
              </HoverCardTrigger>
              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                <VideoPreview 
                  videoId="4QIZE708gJ4"
                  title="Post Malone - I Had Some Help (feat. Morgan Wallen)"
                />
              </HoverCardContent>
            </HoverCard>
          </motion.li>
          <motion.li 
            className="flex items-start"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span className="text-gray-400 mr-3 mt-1">•</span>
            <HoverCard>
              <HoverCardTrigger asChild>
                <motion.a
                  href="https://www.youtube.com/watch?v=z2tUpLHdd4M"
                  className="block leading-relaxed relative"
                  style={{ color: '#ff4d00' }}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ 
                    textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
                  }}
                  whileTap={{ scale: 0.98 }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="relative inline-block">
                    The Wait Is Over | OFFICIAL TRAILER
                    <motion.span
                      className="absolute bottom-0 left-0 h-[1px] bg-current"
                      initial={{ scaleX: 0 }}
                      whileHover={{ scaleX: 1 }}
                      transition={{ duration: 0.3, ease: "easeOut" }}
                      style={{ transformOrigin: 'left', width: '100%' }}
                    />
                  </span>
                </motion.a>
              </HoverCardTrigger>
              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                <VideoPreview 
                  videoId="z2tUpLHdd4M"
                  title="The Wait Is Over | OFFICIAL TRAILER"
                />
              </HoverCardContent>
            </HoverCard>
          </motion.li>
          <motion.li 
            className="flex items-start"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span className="text-gray-400 mr-3 mt-1">•</span>
            <HoverCard>
              <HoverCardTrigger asChild>
                <motion.a
                  href="https://www.youtube.com/watch?v=RCZ9wl1Up40"
                  className="block leading-relaxed relative"
                  style={{ color: '#ff4d00' }}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ 
                    textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
                  }}
                  whileTap={{ scale: 0.98 }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="relative inline-block">
                    2hollis Star Album Trailer
                    <motion.span
                      className="absolute bottom-0 left-0 h-[1px] bg-current"
                      initial={{ scaleX: 0 }}
                      whileHover={{ scaleX: 1 }}
                      transition={{ duration: 0.3, ease: "easeOut" }}
                      style={{ transformOrigin: 'left', width: '100%' }}
                    />
                  </span>
                </motion.a>
              </HoverCardTrigger>
              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                <VideoPreview 
                  videoId="RCZ9wl1Up40"
                  title="2hollis Star Album Trailer"
                />
              </HoverCardContent>
            </HoverCard>
          </motion.li>
          <motion.li 
            className="flex items-start"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span className="text-gray-400 mr-3 mt-1">•</span>
            <HoverCard>
              <HoverCardTrigger asChild>
                <motion.a
                  href="https://www.youtube.com/watch?v=yLxoVrFpLmQ"
                  className="block leading-relaxed relative"
                  style={{ color: '#ff4d00' }}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ 
                    textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
                  }}
                  whileTap={{ scale: 0.98 }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="relative inline-block">
                    Thanksgiving With Kai, Kevin &amp; Druski
                    <motion.span
                      className="absolute bottom-0 left-0 h-[1px] bg-current"
                      initial={{ scaleX: 0 }}
                      whileHover={{ scaleX: 1 }}
                      transition={{ duration: 0.3, ease: "easeOut" }}
                      style={{ transformOrigin: 'left', width: '100%' }}
                    />
                  </span>
                </motion.a>
              </HoverCardTrigger>
              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                <VideoPreview 
                  videoId="yLxoVrFpLmQ"
                  title="Thanksgiving With Kai, Kevin & Druski"
                />
              </HoverCardContent>
            </HoverCard>
          </motion.li>
          <motion.li 
            className="flex items-start"
            variants={itemVariants}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <span className="text-gray-400 mr-3 mt-1">•</span>
            <HoverCard>
              <HoverCardTrigger asChild>
                <motion.a
                  href="https://www.youtube.com/watch?v=a2Zqdo9RbNs"
                  className="block leading-relaxed relative"
                  style={{ color: '#ff4d00' }}
                  target="_blank"
                  rel="noopener noreferrer"
                  whileHover={{ 
                    textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
                  }}
                  whileTap={{ scale: 0.98 }}
                  transition={{ duration: 0.2 }}
                >
                  <span className="relative inline-block">
                    ENHYPEN (엔하이픈) Bad Desire<br className="sm:hidden" />
                    <span className="sm:hidden">(With or Without You) Official MV</span>
                    <span className="hidden sm:inline"> (With or Without You) Official MV</span>
                    <motion.span
                      className="absolute bottom-0 left-0 h-[1px] bg-current"
                      initial={{ scaleX: 0 }}
                      whileHover={{ scaleX: 1 }}
                      transition={{ duration: 0.3, ease: "easeOut" }}
                      style={{ transformOrigin: 'left', width: '100%' }}
                    />
                  </span>
                </motion.a>
              </HoverCardTrigger>
              <HoverCardContent className="w-80 p-0 bg-black border-gray-800 z-50">
                <VideoPreview 
                  videoId="a2Zqdo9RbNs"
                  title="ENHYPEN (엔하이픈) Bad Desire (With or Without You) Official MV"
                />
              </HoverCardContent>
            </HoverCard>
          </motion.li>
        </motion.ul>
        </section>

        <SectionDivider />

        {/* Studio Section */}
        <section id="studio" className="mb-16 md:mb-20">
        <motion.div
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <InstagramFeed />
        </motion.div>
        </section>

        <SectionDivider />

        {/* Contact Section */}
        <section id="contact">
        <motion.div
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
        <motion.p
          className="mb-4 text-sm sm:text-base text-gray-300"
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
        <strong>&gt; Contact us:</strong>{" "}
          <motion.a
            href="mailto:contact@biohazardvfx.com"
            className="break-words inline-block relative"
            style={{ color: '#ff4d00' }}
            target="_blank"
            rel="noopener noreferrer"
            whileHover={{ 
              textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
            }}
            whileTap={{ scale: 0.98 }}
            transition={{ duration: 0.2 }}
          >
            <span className="relative inline-block">
              contact@biohazardvfx.com
              <motion.span
                className="absolute bottom-0 left-0 h-[1px] bg-current"
                initial={{ scaleX: 0 }}
                whileHover={{ scaleX: 1 }}
                transition={{ duration: 0.3, ease: "easeOut" }}
                style={{ transformOrigin: 'left', width: '100%' }}
              />
            </span>
          </motion.a>
        </motion.p>
        <motion.p
          className="text-sm sm:text-base text-gray-300 pb-6 border-b border-white/10"
          variants={itemVariants}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <strong>&gt; File a complaint:</strong>{" "}
          <motion.a
            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
            className="break-words inline-block relative"
            style={{ color: '#ff4d00' }}
            target="_blank"
            rel="noopener noreferrer"
            whileHover={{ 
              textShadow: '0 0 8px rgba(255, 77, 0, 0.6)',
            }}
            whileTap={{ scale: 0.98 }}
            transition={{ duration: 0.2 }}
          >
            <span className="relative inline-block">
              help@biohazardvfx.com
              <motion.span
                className="absolute bottom-0 left-0 h-[1px] bg-current"
                initial={{ scaleX: 0 }}
                whileHover={{ scaleX: 1 }}
                transition={{ duration: 0.3, ease: "easeOut" }}
                style={{ transformOrigin: 'left', width: '100%' }}
              />
            </span>
          </motion.a>
        </motion.p>
        
        <motion.p 
          onClick={(e) => {
            setPigeonMousePosition({ x: e.clientX, y: e.clientY });
            setIsPigeonEggOpen(true);
          }}
          className="text-xs text-gray-600 mt-4 cursor-pointer hover:text-gray-500 transition-colors"
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-50px" }}
          transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
        >
          No pigeons allowed in this zone
        </motion.p>
        </motion.div>
        </section>
            </motion.div>
          </div>
        </div>
      </section>
    </>
  );
}
