'use client';

import { ContactForm } from '@/components/ui/ContactForm';
import { Newsletter } from '@/components/ui/Newsletter';
import { Section } from '@/components/ui/Section';
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 AboutPageContent() {
  const { t } = useTranslation();
  
  return (
    <main>
      {/* About Us Header Section */}
      <Section spacing="large">
        <div className="flex flex-col items-center text-center">
          <Heading level={1} className="mb-6 tracking-[0]">{t('about.title')}</Heading>
          <Text className="max-w-3xl mx-auto mb-12 tracking-[0] mb-[80px]">
            {t('about.description')}
          </Text>
          
          <div className="w-full aspect-[16/9] relative bg-gray-100">
            <Image 
              src="/assets/images/image2.webp"
              alt={t('about.title')} 
              fill 
              className="object-cover"
            />
          </div>
        </div>
      </Section>

      {/* Contact Form Section */}
      <div className="relative">
        {/* Top wave */}
        <div className="w-full">
          <Image
            src="/assets/images/Frame6.png"
            alt=""
            width={1440}
            height={140}
            className="w-full object-cover"
          />
        </div>
        
        {/* Main content with yellow background */}
        <div className="bg-[#FFC877] pb-[224px]">
          <div className={container}>
            <div className="py-[112px]">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div>
                  <ContactForm 
                    title={t('about.contactForm.title')}
                    subtitle={t('about.contactForm.subtitle')}
                  />
                </div>
                
                <div className="w-full h-full relative bg-gray-100 min-h-[600px]">
                  <Image 
                    src="/assets/images/image22.png"
                    alt={t('about.contactForm.title')} 
                    fill 
                    className="object-cover"
                    priority
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Newsletter Section */}
      <div className="relative -mt-[112px]">
        {/* Top wave that overlaps with yellow section */}
        <div className="w-full absolute -top-32 z-10">
          <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}>
            <div className="py-[112px]">
              <Newsletter 
                title={t('about.newsletter.title')} 
                subtitle={t('about.newsletter.subtitle')}
                buttonText={t('about.newsletter.buttonText')}
                disclaimer={t('about.newsletter.disclaimer')}
              />
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}