sent-shop/components/home/HeroCarousel.tsx

"use client";

import { Button } from "@/components/ui/Button";
import { Carousel } from "@/components/ui/Carousel";
import { Section } from "@/components/ui/Section";
import { Heading, Text } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { CarouselSlide } from "@/lib/types/carousel";
import { container } from "@/lib/utils";
import Image from "next/image";

export default function HeroCarousel() {
  const { t } = useTranslation();
  
  // Carousel data with translations
  const carouselData: CarouselSlide[] = [
    {
      id: 1,
      title: t('hero.title'),
      titleColored: t('hero.title_colored'),
      titleEnd: t('hero.title_end'),
      description: t('hero.description'),
      buttonText: t('hero.build_box_button'),
      buttonLink: "/build-box",
      imageSrc: "/assets/images/carousel1.png"
    },
    {
      id: 2,
      title: t('hero.title'),
      titleColored: t('hero.title_colored'),
      titleEnd: t('hero.title_end'),
      description: t('hero.description'),
      buttonText: t('hero.build_box_button'),
      buttonLink: "/build-box",
      imageSrc: "/assets/images/carousel2.png"
    },
    {
      id: 3,
      title: t('hero.title'),
      titleColored: t('hero.title_colored'),
      titleEnd: t('hero.title_end'),
      description: t('hero.description'),
      buttonText: t('hero.build_box_button'),
      buttonLink: "/build-box",
      imageSrc: "/assets/images/carousel1.png"
    }
  ];

  // Default slide to use as fallback
  const defaultSlide: CarouselSlide = {
    id: 0,
    title: t('hero.title'),
    titleColored: t('hero.title_colored'),
    titleEnd: t('hero.title_end'),
    description: t('hero.description'),
    buttonText: t('hero.build_box_button'),
    buttonLink: "/build-box",
    imageSrc: "/assets/images/image1.png"
  };

  // Create mobile slide components - each image needs to be in a container div
  const mobileImageSlides = carouselData.map((slide, index) => (
    <div key={slide.id} className="relative w-full h-full">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]"></div>
      
      {/* Image container - right side with padding */}
      <div className="absolute right-0 top-0 h-full w-1/2">
        <div className="relative h-full py-8">
          <Image
            src={slide.imageSrc}
            alt={slide.title}
            fill
            sizes="50vw"
            className="object-contain"
            priority={index === 0}
          />
        </div>
      </div>
    </div>
  ));

  // Create desktop slide components
  const desktopSlides = carouselData.map((slide, index) => (
    <div key={slide.id} className="w-full h-full">
      {/* Background gradient */}
      <div className="absolute inset-0 bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]"></div>
      
      {/* Image container - positioned on the right with padding */}
      <div className="absolute right-0 top-0 h-full w-[46.3%]">
        <div className="relative h-full py-12">
          <Image
            src={slide.imageSrc}
            alt={slide.title}
            fill
            sizes="46.3vw"
            className="object-contain"
            priority={index === 0}
          />
        </div>
      </div>
      
      {/* Container for proper alignment */}
      <div className={`relative h-full ${container} flex items-end`}>
        {/* Text overlay */}
        <div className="pb-32 max-w-2xl">
          <Heading level={1} className="mb-4 text-black text-[40px] leading-[48px] md:text-[60px] md:leading-[76px] flex flex-col font-bold">
            <span>{slide.title}</span>
            <span className="text-primary">{slide.titleColored}</span>
            <span>{slide.titleEnd}</span>
          </Heading>
          <Text size="lg" className="mb-6 text-black text-[18px] leading-[28px]">
            {slide.description}
          </Text>
          <div className="flex gap-4">
            <Button
              href={slide.buttonLink}
              variant="filled"
              size="lg"
            >
              {slide.buttonText}
            </Button>
            <Button
              href="/products"
              variant="custom"
              size="lg"
            >
              {t('hero.ready_made_button')}
            </Button>
          </div>
        </div>
      </div>
    </div>
  ));

  return (
    <Section spacing="none" fullWidth={true}>
      <div className="w-full">
        {/* Mobile version */}
        <div className="md:hidden">
          {/* Image carousel */}
          <div className="relative w-full h-[350px] bg-gradient-to-r from-[#958C87] via-[#A9A19C] via-[#BDBAB3] via-[#C5C1C0] via-[#C7C1C1] via-[#C3BFBE] to-[#C4C0BF]">
            <Carousel 
              slides={mobileImageSlides}
              interval={10000}
              indicatorsClassName="absolute bottom-4 left-0 right-0"
              className="w-full h-full"
            />
          </div>
          
          {/* Text content below carousel on mobile */}
          <div className="p-6 bg-white">
            <Heading level={1} className="mb-3 text-[40px] leading-[48px] flex flex-col font-bold">
              <span>{carouselData[0]?.title || defaultSlide.title}</span>
              <span className="text-primary">{carouselData[0]?.titleColored || defaultSlide.titleColored}</span>
              <span>{carouselData[0]?.titleEnd || defaultSlide.titleEnd}</span>
            </Heading>
            <Text className="mb-6 text-[18px] leading-[28px]">
              {carouselData[0]?.description || defaultSlide.description}
            </Text>
            <Button
              href={carouselData[0]?.buttonLink || defaultSlide.buttonLink}
              variant="filled"
              size="lg"
              fullWidth
            >
              {carouselData[0]?.buttonText || defaultSlide.buttonText}
            </Button>
          </div>
        </div>

        {/* Desktop version */}
        <div className="hidden md:block relative h-[600px]">
          <Carousel 
            slides={desktopSlides}
            interval={10000}
            indicatorsClassName="absolute bottom-6 left-0 right-0"
            className="w-full h-full"
          />
        </div>
      </div>
    </Section>
  );
}