import { Button } from '@/components/ui/button';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import { heroVariants } from '@/lib/animations';
import { setionTitleVariants } from '@/lib/animations';
import { Link } from 'react-router-dom';
// import service1 from '@/assets/generation.png';
// import service2 from '@/assets/schools.png';
// import service3 from '@/assets/teachers.png';
const service1 =
  'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914603/thumbnails/agarzxlna5p3az8da3g1.png';
const service2 = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914646/thumbnails/alzx6nrw8j0idbfzwbdw.png';
const service3 = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914669/thumbnails/vt0elrvvesc8enxyd3wd.png';


const services: {
  text: string;
  description: string;
  image: string;
  buttonText: string;
  onClickNavTo: string;
  textLeft: boolean;
}[] = [
  {
    text: 'We prepare generations for the future in kids’ engineering university',
    description: 'Next cohort: 05-06 September',
    image: service1,
    buttonText: 'Register your Child',
    onClickNavTo: '/spark',
    textLeft: true,
  },
  {
    text: 'We provide schools with high quality curriculums that they can implement from the 1st day',
    description: '08 Clients trusted us!',
    image: service2,
    onClickNavTo: 'https://marketplace.snai3i.org/',
    buttonText: 'Go to the Market',
    textLeft: false,
  },
  {
    text: 'We train teachers on the modern methods of education and programs design',
    description: '10 schools bought this training',
    image: service3,
    buttonText: 'Book a meeting',
    onClickNavTo: '',
    textLeft: true,
  },
];

export default function ServicesSection() {
  return (
    <section
      id="services"
      className="flex-col gap-12 flex content-between items-center justify-between overflow-hidden py-12 px-[1.5rem] lg:px-[3.25rem]"
    >
      <motion.h1
        variants={setionTitleVariants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true }}
        className="text-secondary font-extrabold mb-8"
      >
        Services
      </motion.h1>
      {services.map((service, index) => (
        <div
          key={index}
          className={`flex-col flex gap-2 ${
            service.textLeft ? 'md:flex-row-reverse' : 'md:flex-row'
          }  items-center justify-center w-full`}
        >
          <motion.div
            variants={heroVariants({ ltr: true })}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="basis-1/2 flex justify-center"
          >
            <img draggable="false" src={service.image} alt="graduation" />
          </motion.div>
          <div className="basis-1/2 flex-shrink flex flex-col items-center">
            <div>
              <motion.h5
                variants={heroVariants({ delay: 0.02 })}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                className="text-secondary-light font-inter font-medium"
              >
                {service.description}
              </motion.h5>
              <motion.h3
                variants={heroVariants({ opacityDuration: 1.2 })}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                className="max-w-md font-extrabold mb-6"
              >
                {service.text}
              </motion.h3>
              <motion.div
                variants={heroVariants({ opacityDuration: 1.6, delay: 0.08 })}
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
              >
                <Link to={service.onClickNavTo}>
                  <Button
                    variant="link"
                    className="flex font-inter flex-row gap-2 px-0 mb-8 text-base font-bold"
                  >
                    {service.buttonText}
                    <ArrowRight size={22} />
                  </Button>
                </Link>
              </motion.div>
            </div>
          </div>
        </div>
      ))}
    </section>
  );
}