import { ArrowRight, CreditCard, Gift, Percent, Wallet } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

import { Button } from '@/shared/shadcn-ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/shared/shadcn-ui/card';

import { CtaSection } from '@/widgets/cta-section';

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

export default function ClientsPage() {
  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'>
              <div 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'>
                    Для наших клиентов
                  </h1>
                  <p className='text-lg text-gray-200'>
                    Специальные предложения, программы лояльности и удобные
                    способы оплаты для наших клиентов
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Services Overview */}
        <section className='py-16'>
          <div className='container mx-auto'>
            <div className='mb-12 text-center'>
              <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl'>
                Наши услуги для клиентов
              </h2>
              <p className='mx-auto max-w-2xl text-gray-600'>
                Мы стремимся сделать обслуживание на наших заправках максимально
                удобным и выгодным для вас
              </p>
            </div>

            <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-4'>
              <Card className='overflow-hidden transition-all hover:shadow-lg'>
                <CardHeader className='pb-3'>
                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
                    <Percent className='h-6 w-6 text-red-600' />
                  </div>
                  <CardTitle>Программа лояльности</CardTitle>
                  <CardDescription>
                    Накапливайте баллы и получайте скидки
                  </CardDescription>
                </CardHeader>
                <CardContent className='text-sm text-gray-600'>
                  <p>
                    Наша программа лояльности позволяет накапливать баллы за
                    каждую покупку и обменивать их на скидки и подарки.
                  </p>
                </CardContent>
                <CardFooter>
                  <Link href='/clients/loyalty'>
                    <Button variant='outline' className='w-full'>
                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
                    </Button>
                  </Link>
                </CardFooter>
              </Card>

              <Card className='overflow-hidden transition-all hover:shadow-lg'>
                <CardHeader className='pb-3'>
                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
                    <CreditCard className='h-6 w-6 text-red-600' />
                  </div>
                  <CardTitle>Топливная карта</CardTitle>
                  <CardDescription>
                    Удобный способ оплаты топлива
                  </CardDescription>
                </CardHeader>
                <CardContent className='text-sm text-gray-600'>
                  <p>
                    Топливные карты для физических и юридических лиц.
                    Контролируйте расходы и получайте дополнительные
                    преимущества.
                  </p>
                </CardContent>
                <CardFooter>
                  <Link href='/clients/fuel-card'>
                    <Button variant='outline' className='w-full'>
                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
                    </Button>
                  </Link>
                </CardFooter>
              </Card>

              <Card className='overflow-hidden transition-all hover:shadow-lg'>
                <CardHeader className='pb-3'>
                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
                    <Gift className='h-6 w-6 text-red-600' />
                  </div>
                  <CardTitle>Сертификаты</CardTitle>
                  <CardDescription>
                    Подарочные сертификаты на топливо и услуги
                  </CardDescription>
                </CardHeader>
                <CardContent className='text-sm text-gray-600'>
                  <p>
                    Подарите близким или партнерам сертификат на топливо или
                    услуги нашей сети. Идеальный подарок для автовладельцев.
                  </p>
                </CardContent>
                <CardFooter>
                  <Link href='/clients/certificates'>
                    <Button variant='outline' className='w-full'>
                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
                    </Button>
                  </Link>
                </CardFooter>
              </Card>

              <Card className='overflow-hidden transition-all hover:shadow-lg'>
                <CardHeader className='pb-3'>
                  <div className='mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
                    <Wallet className='h-6 w-6 text-red-600' />
                  </div>
                  <CardTitle>Способы оплаты</CardTitle>
                  <CardDescription>
                    Различные способы оплаты на наших заправках
                  </CardDescription>
                </CardHeader>
                <CardContent className='text-sm text-gray-600'>
                  <p>
                    Мы предлагаем различные способы оплаты: наличные, банковские
                    карты, мобильные платежи и топливные карты.
                  </p>
                </CardContent>
                <CardFooter>
                  <Link href='/clients/payment'>
                    <Button variant='outline' className='w-full'>
                      Подробнее <ArrowRight className='ml-2 h-4 w-4' />
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            </div>
          </div>
        </section>

        {/* Benefits Section */}
        <section className='bg-gray-50 py-16'>
          <div className='container mx-auto'>
            <div className='grid items-center gap-12 md:grid-cols-2'>
              <div className='order-2 md:order-1'>
                <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
                  <Percent className='h-6 w-6 text-red-600' />
                </div>
                <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
                  Преимущества для клиентов
                </h2>
                <p className='mb-6 text-gray-600'>
                  Став клиентом GasNetwork, вы получаете множество преимуществ,
                  которые делают заправку вашего автомобиля более выгодной и
                  удобной.
                </p>

                <div className='space-y-4'>
                  <div className='flex items-start'>
                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                      <span className='text-xs text-white'>✓</span>
                    </div>
                    <div className='ml-3'>
                      <h3 className='text-lg font-medium'>Экономия</h3>
                      <p className='text-gray-600'>
                        Скидки и бонусы для постоянных клиентов
                      </p>
                    </div>
                  </div>
                  <div className='flex items-start'>
                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                      <span className='text-xs text-white'>✓</span>
                    </div>
                    <div className='ml-3'>
                      <h3 className='text-lg font-medium'>Удобство</h3>
                      <p className='text-gray-600'>
                        Быстрая оплата и обслуживание
                      </p>
                    </div>
                  </div>
                  <div className='flex items-start'>
                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                      <span className='text-xs text-white'>✓</span>
                    </div>
                    <div className='ml-3'>
                      <h3 className='text-lg font-medium'>Качество</h3>
                      <p className='text-gray-600'>
                        Гарантированно высокое качество топлива
                      </p>
                    </div>
                  </div>
                  <div className='flex items-start'>
                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                      <span className='text-xs text-white'>✓</span>
                    </div>
                    <div className='ml-3'>
                      <h3 className='text-lg font-medium'>
                        Дополнительные услуги
                      </h3>
                      <p className='text-gray-600'>
                        Кафе, магазины и другие услуги на наших заправках
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'>
                <Image
                  src='/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
                  alt='Преимущества для клиентов'
                  fill
                  className='object-cover'
                />
              </div>
            </div>
          </div>
        </section>

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