oriyo_next/src/pages-templates/clients/loyalty/index.tsx

'use client';

import { Check, Percent } from 'lucide-react';
import Image from 'next/image';

import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { Card, CardContent } from '@/shared/shadcn-ui/card';
import Container from '@/shared/shadcn-ui/conteiner';

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

import ProgrammImg from '../../../../public/clients/loyatly/03a771e7-5d76-4111-a516-801aa925659f.jpg';

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

export function LoyaltyPage() {
  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>
                <div
                  data-aos='fade-down'
                  data-aos-duration='800'
                  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.loyalty.title')}
                    </h1>
                    <p className='text-lg text-gray-200'>
                      {t('clients.loyalty.description')}
                    </p>
                  </div>
                </div>
              </Container>
            </div>
          </div>
        </section>

        <Container>
          {/* Program Overview */}
          <section className='py-16'>
            <div className='container mx-auto'>
              <div className='grid items-center gap-12 md:grid-cols-2'>
                <div data-aos='fade-right'>
                  <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'>
                    {t('clients.loyalty.programm.about')}
                  </h2>
                  <p className='mb-6 text-gray-600'>
                    {t('clients.loyalty.programm.about-description')}
                  </p>
                  <p className='mb-6 text-gray-600'>
                    {t('clients.loyalty.programm.about-description-2')}
                  </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'>
                          {t('clients.loyalty.programm.conditions-1')}
                        </h3>
                        <p className='text-gray-600'>
                          {t(
                            'clients.loyalty.programm.conditions.description-1',
                          )}
                        </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'>
                          {t('clients.loyalty.programm.conditions-2')}
                        </h3>
                        <p className='text-gray-600'>
                          {t(
                            'clients.loyalty.programm.conditions.description-2',
                          )}
                        </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'>
                          {t('clients.loyalty.programm.conditions-3')}
                        </h3>
                        <p className='text-gray-600'>
                          {t(
                            'clients.loyalty.programm.conditions.description-3',
                          )}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  data-aos='fade-up'
                  className='relative h-[400px] overflow-hidden rounded-xl shadow-xl'
                >
                  <Image
                    src={ProgrammImg}
                    alt='Программа лояльности'
                    fill
                    className='w-full object-contain p-2.5'
                    priority
                  />
                </div>
              </div>
            </div>
          </section>

          {/* How It Works */}
          <section className='bg-gray-50 px-2 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'>
                  {t('clients.loyalty.works.title')}
                </h2>
                <p className='mx-auto max-w-2xl text-gray-600'>
                  {t('clients.loyalty.works.description')}
                </p>
              </div>

              <div className='grid gap-8 sm:grid-cols-2 lg:grid-cols-4'>
                <div data-aos='zoom-in-up' className='text-center'>
                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                    1
                  </div>
                  <h3 className='mb-2 text-xl font-bold'>
                    {t('clients.loyalty.works.stage-1')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('clients.loyalty.works.stage.description-1')}
                  </p>
                </div>
                <div data-aos='zoom-in-up' className='text-center'>
                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                    2
                  </div>
                  <h3 className='mb-2 text-xl font-bold'>
                    {t('clients.loyalty.works.stage-2')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('clients.loyalty.works.stage.description-2')}
                  </p>
                </div>
                <div data-aos='zoom-in-up' className='text-center'>
                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                    3
                  </div>
                  <h3 className='mb-2 text-xl font-bold'>
                    {t('clients.loyalty.works.stage-3')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('clients.loyalty.works.stage.description-3')}
                  </p>
                </div>
                <div data-aos='zoom-in-up' className='text-center'>
                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-600 text-2xl font-bold text-white'>
                    4
                  </div>
                  <h3 className='mb-2 text-xl font-bold'>
                    {t('clients.loyalty.works.stage-4')}
                  </h3>
                  <p className='text-gray-600'>
                    {t('clients.loyalty.works.stage.description-4')}
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* Loyalty Levels */}
          <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'>
                  {t('clients.loyalty.works.levels.title')}
                </h2>
                <p className='mx-auto max-w-2xl text-gray-600'>
                  {t('clients.loyalty.works.levels.description')}
                </p>
              </div>

              <div className='grid gap-8 md:grid-cols-3'>
                <Card
                  data-aos='flip-left'
                  data-aos-duration='500'
                  className='overflow-hidden border-t-4 border-t-gray-400 transition-all hover:shadow-lg'
                >
                  <CardContent className='p-6'>
                    <h3 className='mb-4 text-center text-2xl font-bold'>
                      {t('clients.loyalty.works.levels.card-1.title')}
                    </h3>
                    <div className='mb-6 text-center'>
                      <span className='text-4xl font-bold'>
                        {t('clients.loyalty.works.levels.card-1.percent')}
                      </span>
                      <p className='text-sm text-gray-600'>
                        {t('clients.loyalty.works.levels.card.mark')}
                      </p>
                    </div>
                    <ul className='space-y-2'>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-1.bonus-1')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-1.bonus-2')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-1.bonus-3')}
                        </span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>

                <Card
                  data-aos='flip-left'
                  data-aos-duration='500'
                  className='overflow-hidden border-t-4 border-t-yellow-500 transition-all hover:shadow-lg'
                >
                  <CardContent className='p-6'>
                    <h3 className='mb-4 text-center text-2xl font-bold'>
                      {t('clients.loyalty.works.levels.card-2.title')}
                    </h3>
                    <div className='mb-6 text-center'>
                      <span className='text-4xl font-bold'>
                        {t('clients.loyalty.works.levels.card-2.percent')}
                      </span>
                      <p className='text-sm text-gray-600'>
                        {t('clients.loyalty.works.levels.card.mark')}
                      </p>
                    </div>
                    <ul className='space-y-2'>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-2.bonus-1')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-2.bonus-2')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-2.bonus-3')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-2.bonus-4')}
                        </span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>

                <Card
                  data-aos='flip-left'
                  data-aos-duration='500'
                  className='overflow-hidden border-t-4 border-t-red-600 transition-all hover:shadow-lg'
                >
                  <CardContent className='p-6'>
                    <h3 className='mb-4 text-center text-2xl font-bold'>
                      {t('clients.loyalty.works.levels.card-3.title')}
                    </h3>
                    <div className='mb-6 text-center'>
                      <span className='text-4xl font-bold'>
                        {t('clients.loyalty.works.levels.card-3.percent')}
                      </span>
                      <p className='text-sm text-gray-600'>
                        {t('clients.loyalty.works.levels.card.mark')}
                      </p>
                    </div>
                    <ul className='space-y-2'>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-3.bonus-1')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-3.bonus-2')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-3.bonus-3')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-3.bonus-4')}
                        </span>
                      </li>
                      <li className='flex items-center'>
                        <Check className='mr-2 h-5 w-5 text-green-500' />
                        <span>
                          {t('clients.loyalty.works.levels.card-3.bonus-5')}
                        </span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              </div>
            </div>
          </section>
        </Container>

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