"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Instagram, Clock } from "lucide-react";
import { useEffect, useState } from "react";

export default function LandingPage() {
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    const calculateTimeLeft = () => {
      const targetDate = new Date("2026-03-15T15:00:00+01:00").getTime();
      const now = new Date().getTime();
      const difference = targetDate - now;

      if (difference > 0) {
        setTimeLeft({
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60),
        });
      }
    };

    calculateTimeLeft();
    const timer = setInterval(calculateTimeLeft, 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UNBRKABLE"
          navItems={[
            { name: "About", id: "about" },
            { name: "Product", id: "product" },
            { name: "Contact", id: "contact" },
          ]}
          button={{ text: "JOIN WAITLIST", href: "#email-capture" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          tag="PRE-ORDER COMING SOON"
          tagAnimation="slide-up"
          title="UNBRKABLE"
          description="Resilience Engineered. Premium Streetwear Redefined."
          background={{ variant: "sparkles-gradient" }}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7wU63U5Z6xUyQgGM5ThlIUPo/uploaded-1772520151997-tdn3qcwt.png",              imageAlt: "UNBRKABLE Logo"},
          ]}
          buttonAnimation="slide-up"
          buttons={[{ text: "BE THE FIRST TO KNOW", href: "#email-capture" }]}
          className="min-h-screen flex items-center justify-center"
          containerClassName="max-w-6xl mx-auto px-6"
          titleClassName="text-6xl md:text-8xl font-bold tracking-wider mb-8 drop-shadow-2xl"
          descriptionClassName="text-lg md:text-2xl text-accent/80 mb-12 font-light tracking-wide"
          tagClassName="text-xs md:text-sm font-semibold tracking-widest uppercase mb-6 text-accent"
        />
      </div>

      <div
        id="countdown"
        data-section="countdown"
        className="relative w-full py-20 px-6 overflow-hidden"
        style={{
          background: "radial-gradient(circle at 50% 50%, rgba(255, 107, 107, 0.1) 0%, transparent 70%)"}}
      >
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center justify-center gap-4 mb-12">
            <Clock className="w-6 h-6 text-accent" />
            <h2 className="text-3xl md:text-4xl font-bold text-foreground">LAUNCHING MARCH 15, 2026 AT 3:00 PM CET</h2>
          </div>
          <div className="grid grid-cols-4 gap-4 md:gap-6">
            {[
              { label: "DAYS", value: timeLeft.days },
              { label: "HOURS", value: timeLeft.hours },
              { label: "MINUTES", value: timeLeft.minutes },
              { label: "SECONDS", value: timeLeft.seconds },
            ].map((unit, idx) => (
              <div
                key={idx}
                className="relative group backdrop-blur-xl bg-gradient-to-b from-white/20 to-white/5 border border-white/30 rounded-2xl p-4 md:p-6 text-center"
                style={{
                  boxShadow:
                    "0 8px 32px rgba(255, 107, 107, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2)"}}
              >
                <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
                  background: "radial-gradient(circle at 50% 0%, rgba(255, 107, 107, 0.3) 0%, transparent 70%)"}} />
                <div className="relative">
                  <div className="text-4xl md:text-5xl font-bold text-accent mb-2">
                    {String(unit.value).padStart(2, "0")}
                  </div>
                  <div className="text-xs md:text-sm font-semibold tracking-widest text-foreground/60 uppercase">
                    {unit.label}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div id="email-capture" data-section="email-capture" className="relative w-full py-20 px-6">
        <div className="max-w-2xl mx-auto">
          <div className="backdrop-blur-xl bg-gradient-to-b from-white/20 to-white/5 border border-white/30 rounded-3xl p-8 md:p-12"
            style={{
              boxShadow:
                "0 8px 32px rgba(255, 107, 107, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2)"}}>
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 text-center">
              GET EXCLUSIVE ACCESS
            </h2>
            <p className="text-base md:text-lg text-foreground/70 text-center mb-8">
              Join our waitlist and be among the first to experience UNBRKABLE
            </p>
            <form
              className="flex flex-col gap-4 mb-6"
              onSubmit={(e) => {
                e.preventDefault();
                console.log("Email captured");
              }}
            >
              <input
                type="email"
                placeholder="Enter your email"
                className="w-full px-6 py-3 rounded-lg bg-white/10 border border-white/20 text-foreground placeholder:text-foreground/50 focus:outline-none focus:border-accent/50 transition-colors"
                required
              />
              <button
                type="submit"
                className="w-full px-6 py-3 rounded-lg bg-gradient-to-r from-accent to-accent/80 text-background font-bold hover:shadow-lg transition-shadow"
              >
                JOIN WAITLIST
              </button>
            </form>
            <p className="text-xs text-foreground/50 text-center">
              ✓ We respect your privacy. Unsubscribe at any time.
            </p>
          </div>
        </div>
      </div>

      <div id="video-teaser" data-section="video-teaser" className="relative w-full py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              UNBREAKABLE RESILIENCE
            </h2>
            <p className="text-base md:text-lg text-foreground/70">
              Designed for those who never back down. Premium streetwear built to last through anything.
            </p>
          </div>
          <div className="backdrop-blur-xl bg-gradient-to-b from-white/10 to-white/5 border border-white/30 rounded-3xl overflow-hidden"
            style={{
              boxShadow:
                "0 8px 32px rgba(255, 107, 107, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2)"}}>
            <div className="aspect-video bg-gradient-to-b from-black/40 to-black/60 flex items-center justify-center">
              <div className="text-center text-white">
                <svg className="w-20 h-20 mx-auto mb-4 opacity-80" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
                </svg>
                <p className="text-sm font-semibold">TEASER VIDEO</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="teaser" data-section="teaser">
        <ProductCardThree
          title="COMING SOON"
          description="Discover our premium collection launching exclusively on March 15, 2026"
          tag="PRODUCT PREVIEW"
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          gridVariant="four-items-2x2-equal-grid"
          products={[
            {
              id: "1",              name: "UNBRKABLE PRO",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=3",              imageAlt: "UNBRKABLE PRO"},
            {
              id: "2",              name: "UNBRKABLE LITE",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=4",              imageAlt: "UNBRKABLE LITE"},
            {
              id: "3",              name: "UNBRKABLE ELITE",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=5",              imageAlt: "UNBRKABLE ELITE"},
            {
              id: "4",              name: "UNBRKABLE MAX",              price: "COMING SOON",              imageSrc: "http://img.b2bpic.net/free-vector/creative-realistic-teaser-background_23-2148903983.jpg?_wi=6",              imageAlt: "UNBRKABLE MAX"},
          ]}
          containerClassName="py-20 px-6"
          textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4 tracking-wide"
          textBoxDescriptionClassName="text-lg text-accent/75 mb-12 max-w-2xl"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="FOLLOW THE MOVEMENT"
          description="Stay connected with UNBRKABLE updates and exclusive previews on Instagram"
          tag="INSTAGRAM"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["@UNBRKABLE", "PREMIUM", "EXCLUSIVE", "LAUNCH", "MARCH 2026"]}
          speed={40}
          showCard={true}
          containerClassName="py-16 px-6"
          textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-4 tracking-wide"
          textBoxDescriptionClassName="text-base text-accent/75 mb-8"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="UNBRKABLE"
          copyrightText="© 2025 UNBRKABLE. All rights reserved."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com/unbrkable",              ariaLabel: "Instagram"},
          ]}
          containerClassName="py-12 px-6"
          cardClassName="max-w-4xl mx-auto backdrop-blur-xl bg-gradient-to-b from-white/20 to-white/5 rounded-3xl border border-white/30 p-8"
          logoClassName="text-2xl font-bold tracking-widest text-accent mb-6"
          copyrightTextClassName="text-sm text-accent/60"
        />
      </div>
    </ThemeProvider>
  );
}
