'use client';
import { PRODUCT_INFO } from '@/shared/constants/data';
import { Button } from '@/shared/ui/button';
import { CircleCheck } from 'lucide-react';
import Image from 'next/image';
import React from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';

const HomeAbout = () => {
  return (
    <div className="my-[40px] relative z-1">
      <div className="custom-container flex-col lg:flex-row flex justify-between gap-4">
        <div className="flex-1 relative flex flex-col justify-between gap-3">
          <div>
            <p className="font-caveat text-primary font-extrabold text-[20px]">
              Узнайте о нас
            </p>
            <h4 className="text-[34px] font-extrabold text-accent leading-[40px]">
              Заводы, принадлежащие нашей компании
            </h4>
          </div>
          <div className="my-[10px]">
            <p className="text-muted text-[14px] font-medium">
              Shandong Tianqi Food Co., LTD. — это заводы, принадлежащие
              компании Zhangzhou Zhentian Food Co., LTD. Наша компания была
              основана в 1992 году и специализируется на производстве грибов и
              чеснока в бочках. Мы строго следуем принципам честного управления,
              приоритета безопасности и высокого качества. Мы предоставляем
              высококачественные, безопасные и питательные сырьевые продукты для
              международного рынка консервов, заслужив доверие импортеров по
              всему миру.
            </p>
          </div>
          <div className="flex justify-between items-start gap-3">
            <div className="flex-1">
              <div className="text-[14px] font-bold text-accent flex justify-start items-center gap-1">
                <CircleCheck size={'14px'} />
                <span>Местное выращивание</span>
              </div>
              <p className="text-[14px] text-muted font-medium">
                Все наши грибы и чеснок выращиваются на местных фермах без
                использования вредных химикатов.
              </p>
            </div>
            <div className="flex-1">
              <h6 className="text-[14px] font-bold text-accent flex justify-start items-center gap-1">
                <CircleCheck size={'14px'} />
                <span>Современное производство</span>
              </h6>
              <p className="text-[14px] text-muted font-medium">
                Наши производственные мощности оборудованы по последнему слову
                техники и соответствуют международным стандартам.
              </p>
            </div>
          </div>
          <div>
            <Link href={'/about-us'}>
              <Button variant={'secondary'} size={'lg'}>
                Узнать больше
              </Button>
            </Link>
          </div>
        </div>
        <div className="flex-[1.2] relative max-lg:min-h-[500px] max-lg:my-[20px]">
          <motion.div
            initial={{ left: '0' }}
            animate={{ left: '20px' }}
            transition={{
              duration: 2,
              repeat: Infinity,
              repeatType: 'reverse',
              ease: [0, 0, 1, 1] as const,
            }}
            className="absolute left-0 top-0 h-[50%] w-[50%]"
          >
            <Image
              className="w-full h-full object-contain"
              src={'/images/home-about/about-bg-shape1.webp'}
              alt={PRODUCT_INFO.name}
              width={500}
              height={500}
            />
          </motion.div>
          <div className="absolute right-0 top-[20px] w-[40px] h-[70%] bg-gradient-to-b from-primary to-secondary rounded-sm"></div>
          <div className="absolute right-[15px] top-0 w-[80%] h-[90%]">
            <Image
              className="w-full h-full object-cover rounded-md shadow"
              src={'/images/home-about/home-about1.webp'}
              alt={PRODUCT_INFO.name}
              width={500}
              height={500}
            />
          </div>
          <div className="absolute left-0 bottom-0 w-[40%] h-[60%]">
            <Image
              className="w-full h-full object-cover rounded-md shadow"
              src={'/images/home-about/home-about2.webp'}
              alt={PRODUCT_INFO.name}
              width={200}
              height={200}
            />
          </div>
          <motion.div
            initial={{ top: '-40px' }}
            animate={{ top: '-20px' }}
            transition={{
              duration: 1,
              repeat: Infinity,
              repeatType: 'reverse',
              ease: [0, 0, 1, 1] as const,
            }}
            className="absolute right-[-10%] top-[-40px] w-[40%] h-[40%]"
          >
            <Image
              className="w-full h-full object-contain"
              src={'/images/home-about/about-bg-shape2.webp'}
              alt={PRODUCT_INFO.name}
              width={200}
              height={200}
            />
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default HomeAbout;
