Promo Sections 01

"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";

interface TimeLeft {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
}

export default function PromoSection() {
  // Set target date to 7 days from now
  const [targetDate] = useState(() => {
    const date = new Date();
    date.setDate(date.getDate() + 7);
    return date;
  });

  const [timeLeft, setTimeLeft] = useState<TimeLeft>({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    const calculateTimeLeft = () => {
      const difference = targetDate.getTime() - new Date().getTime();

      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);
  }, [targetDate]);

  const formatNumber = (num: number) => String(num).padStart(2, "0");

  return (
    <section className="relative py-10 lg:py-20">
      <div className="mx-auto max-w-7xl px-4">
        <div className="grid items-center gap-12 lg:grid-cols-2">
          {/* Left Content */}
          <div className="space-y-10">
            <div className="mb-4">
              <h1 className="font-heading text-5xl md:text-5xl">Summer Sale</h1>
              <p className="text-muted-foreground text-lg">
                Up to 50% off on selected items. Limited time offer.
              </p>
            </div>

            {/* Countdown Timer */}
            <div className="flex gap-4">
              <div className="bg-muted size-24 rounded-lg p-4 text-center">
                <div className="font-heading text-4xl">{formatNumber(timeLeft.days)}</div>
                <div className="text-muted-foreground text-sm">Days</div>
              </div>
              <div className="bg-muted size-24 rounded-lg p-4 text-center">
                <div className="font-heading text-4xl">{formatNumber(timeLeft.hours)}</div>
                <div className="text-muted-foreground text-sm">Hours</div>
              </div>
              <div className="bg-muted size-24 rounded-lg p-4 text-center">
                <div className="font-heading text-4xl">{formatNumber(timeLeft.minutes)}</div>
                <div className="text-muted-foreground text-sm">Minutes</div>
              </div>
              <div className="bg-muted size-24 rounded-lg p-4 text-center">
                <div className="font-heading text-4xl">{formatNumber(timeLeft.seconds)}</div>
                <div className="text-muted-foreground text-sm">Seconds</div>
              </div>
            </div>

            <Button size="lg">Shop the Sale</Button>
          </div>

          {/* Right Side - Randomly Positioned Images */}
          <div className="relative hidden h-[400px] lg:block">
            <figure className="absolute top-0 right-12 aspect-square max-w-60 rotate-16 transform overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:rotate-3">
              <img
                src="/images/products/list1.png"
                alt="Summer fashion item"
                className="h-full w-full object-cover"
              />
            </figure>
            <figure className="absolute top-20 left-8 aspect-square max-w-60 -rotate-16 transform overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:-rotate-3">
              <img
                src="/images/products/list10.png"
                alt="Summer accessories"
                className="h-full w-full object-cover"
              />
            </figure>
            <figure className="absolute right-24 -bottom-5 aspect-square max-w-60 -rotate-2 transform overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:rotate-3">
              <img
                src="/images/products/list5.png"
                alt="Summer sale products"
                className="h-full w-full object-cover"
              />
            </figure>
          </div>
        </div>
      </div>
    </section>
  );
}