"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 WoltDelivery() {
  const { t } = useTranslation();

  return (
    <div className="relative">
      {/* Top wave */}
      <div className="w-full">
        <Image
          src="/assets/images/Frame3.png"
          alt=""
          width={1440}
          height={140}
          className="w-full object-cover"
        />
      </div>
      
      {/* Main content with background color */}
      <div className="bg-wolt">
        <div className={`${container} py-[80px] relative`}>
          {/* Desktop Wolt logo - only visible on desktop */}
          <div className="absolute top-0 right-0 z-10 hidden md:block">
            <div className="w-[160px] h-[160px] bg-wolt-blue rounded-md flex items-center justify-center">
              <Image
                src="/assets/images/wolt.png"
                alt="Wolt"
                width={120}
                height={120}
                className="object-contain"
              />
            </div>
          </div>
          
          {/* Text and image layout */}
          <div className="flex flex-col md:flex-row md:items-center">
            {/* Text container - comes first on both mobile and desktop */}
            <div className="w-full md:w-1/2 md:pr-12 order-1 mb-8 md:mb-0">
              <Heading level={2} className="mb-4">
                {t('woltDelivery.title')}
              </Heading>
              <Text size="lg" className="mb-8">
                {t('woltDelivery.description')}
              </Text>
              <Button 
                href="https://wolt.com" 
                external 
                variant="filled" 
                size="lg" 
                fullWidthMobile
              >
                {t('woltDelivery.button')}
              </Button>
            </div>
            
            {/* Image container with mobile logo */}
            <div className="w-full md:w-1/2 h-[310px] md:h-[400px] relative order-2 mb-12 md:mb-0">
              <Image
                src="/assets/images/wolt-image.png"
                alt={t('woltDelivery.altText')}
                fill
                className="object-cover"
                priority
              />
              
              {/* Mobile Wolt logo - positioned at bottom-right of image */}
              <div className="absolute bottom-[-40px] right-[-10px] z-10 md:hidden">
                <div className="w-[120px] h-[120px] bg-wolt-blue rounded-md flex items-center justify-center">
                  <Image
                    src="/assets/images/wolt.png"
                    alt="Wolt"
                    width={90}
                    height={90}
                    className="object-contain"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}