'use client';

import Image from 'next/image';

import { Container } from '@/shared/components/container';
import { useTextController } from '@/shared/language/hooks/use-text-controller';

import { BenefitsSection } from '@/widgets/clients/ui/benefits-section';
import { ServicesOverviewSection } from '@/widgets/clients/ui/services-overview-section';
import { CtaSection } from '@/widgets/cta-section';

export const metadata = {
  title: 'Клиентам | Ориё - Сеть заправок в Таджикистане',
  description:
    'Информация для клиентов: программа лояльности, топливные карты, сертификаты и способы оплаты.',
};

export function ClientsPage() {
  const { t } = useTextController();

  return (
    <div className='flex min-h-screen flex-col'>
      <main className='flex-1'>
        {/* Hero Section */}
        <section className='relative'>
          <div className='relative h-[400px] w-full overflow-hidden'>
            <Image
              src='/placeholder.svg?height=400&width=1920&text=Для+наших+клиентов'
              alt='Для наших клиентов'
              width={1920}
              height={400}
              className='object-cover'
              priority
            />
            <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
              <Container className='py-0'>
                <div
                  data-aos='fade-down'
                  data-aos-duration='1000'
                  className='container mx-auto'
                >
                  <div className='max-w-2xl space-y-4 text-white'>
                    <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                      {t('clients.title')}
                    </h1>
                    <p className='text-lg text-gray-200'>
                      {t('clients.description')}
                    </p>
                  </div>
                </div>
              </Container>
            </div>
          </div>
        </section>

        <ServicesOverviewSection />
        <BenefitsSection />
        <CtaSection />
      </main>
    </div>
  );
}