import { motion } from "framer-motion";
import { Layout } from "../Layout";

interface ComingSoonPageProps {
  onSignInClick: () => void
  onSignOutClick?: () => void;
  user?: any; // Replace with your actual user type
}

const ComingSoonPage: React.FC<ComingSoonPageProps> = ({
  onSignInClick,
  onSignOutClick,
  user,
}) => {
  const scrollToNewsletter = () => {
    document.getElementById("newsletter-section")?.scrollIntoView({
      behavior: "smooth",
    });
  };

  const comingSoonBgImage = "https://images.unsplash.com/photo-1500760188161-40fc4f77594c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjMyfHxwYXJpc3xlbnwwfHwwfHx8MA%3D%3D";

  return (
    <Layout
      activeCity="Landingpage"
      onSignInClick={onSignInClick}
      onSignOutClick={onSignOutClick}
      user={user}
    >
      <div
        className="relative z-10 min-h-screen flex items-end justify-start pt-24 pb-16 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: `url(${comingSoonBgImage})` }}
      >
        {/* Overlay */}
        <div className="absolute inset-0 bg-black/50 z-0"></div>

        <div className="container mx-auto px-4 relative z-10">
          <motion.div
            className="max-w-4xl lg:max-w-3xl xl:max-w-4xl"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{
              duration: 0.8,
              delay: 0.5,
              ease: [0.25, 0.1, 0.25, 1],
            }}
          >
            {/* Coming Soon Badge */}
            <motion.div
              className="mb-6 inline-block"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.3, duration: 0.5 }}
            >
              <span className="bg-primary/20 text-primary font-poppins font-semibold px-4 py-2 rounded-full text-sm uppercase tracking-wide">
                Coming Soon
              </span>
            </motion.div>

            {/* Main Headline */}
            <div className="mb-6 text-left">
              <h1 className="font-poppins leading-tight text-white text-5xl md:text-6xl lg:text-7xl drop-shadow-lg">
                <span className="block font-normal">
                  Something Amazing is Brewing
                </span>
              </h1>
            </div>

            {/* Subheading */}
            <div className="mb-8 text-left">
              <p className="font-poppins text-xl leading-relaxed font-normal text-white/90 drop-shadow-md">
                We're working hard to bring you the ultimate city experience.
                <br className="hidden sm:block" />
                Be the first to know when we launch and get exclusive early
                access.
              </p>
            </div>

            {/* Countdown Timer */}
            <motion.div
              className="mb-8"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.9, duration: 0.6 }}
            >
              <div className="flex gap-4 justify-start">
                {[
                  { value: "14", label: "Days" },
                  { value: "08", label: "Hours" },
                ].map((item, index) => (
                  <div key={index} className="text-center">
                    <div className="bg-white/20 backdrop-blur-sm rounded-lg p-3 min-w-[70px]">
                      <span className="font-poppins font-bold text-2xl text-white">
                        {item.value}
                      </span>
                    </div>
                    <span className="font-poppins text-sm text-white/80 mt-2 block">
                      {item.label}
                    </span>
                  </div>
                ))}
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </Layout>
  );
};

export default ComingSoonPage;
