"use client";

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

export function GiftBoxBuilder() {
  const { t } = useTranslation();
  
  return (
    <div className="relative">
      {/* Top frame image */}
      <div className="w-full">
        <Image
          src="/assets/images/Frame4.png"
          alt=""
          width={1440}
          height={140}
          className="w-full object-cover"
        />
      </div>
      
      {/* Main content with pink background */}
      <div className="bg-[#F58EA7]">
        <div className={`${container} py-[80px]`}>
          <div className="flex flex-col md:flex-row md:items-center">
            {/* Image container - takes up full width on mobile, half on desktop */}
            <div className="w-full md:w-1/2 h-[240px] md:h-[500px] relative mb-8 md:mb-0">
              <Image
                src="/assets/images/build-box.png"
                alt={t('giftBoxBuilder.altText')}
                fill
                className="object-cover"
                priority
              />
            </div>
            
            {/* Text container - takes up full width on mobile, half on desktop */}
            <div className="w-full md:w-1/2 md:pl-20">
              <Heading level={2} className="mb-4">
                {t('giftBoxBuilder.title')}
              </Heading>
              <Text size="lg" className="mb-8">
                {t('giftBoxBuilder.description')}
              </Text>
              <Button 
                href="/build-box" 
                variant="filled" 
                size="lg" 
                fullWidthMobile
              >
                {t('giftBoxBuilder.button')}
              </Button>
            </div>
          </div>
        </div>
      </div>
      
      {/* Bottom frame image */}
      <div className="w-full">
        <Image
          src="/assets/images/Frame5.png"
          alt=""
          width={1440}
          height={140}
          className="w-full object-cover"
        />
      </div>
    </div>
  );
}