import React from "react";
import { Tilt } from "react-tilt";
import { motion } from "framer-motion";

import { fadeIn, textVariant } from "src/utils/motion";
import { services } from "src/constans";
import { styles } from "src/style";
import { SectionWrapper } from "src/hoc";
import Image from "next/image";

const ServiceCard = ({ index, title, icon }) => (
  <Tilt className="xs:w-[250px] w-full">
    <motion.div
      variants={fadeIn("right", "spring", index * 0.5, 0.75)}
      className="w-full bg-[#35685952] p-[1px] rounded-[20px] shadow-card"
    >
      <div
        options={{
          max: 45,
          scale: 1,
          speed: 450,
        }}
        className="bg-tertiary rounded-[20px] py-5 px-12 min-h-[180px] flex justify-evenly items-center flex-col"
      >
        {/* <Image
          src={
            icon == "int1"
              ? int1
              : icon == "int2"
              ? int2
              : icon == "int3"
              ? int3
              : icon == "int4"
              ? int4
              : int1
          }
          alt="web-development"
          className="w-[150px] h-[150px] object-contain rounded-xl"
        /> */}

        <h3 className="text-white text-[20px] font-bold text-center">
          {title}
        </h3>
      </div>
    </motion.div>
  </Tilt>
);

const About = () => {
  return (
    <>
      <motion.div variants={textVariant()}>
        <h2 className="text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]">
          Introduction.
        </h2>
      </motion.div>

      <motion.p
        variants={fadeIn("", "", 0.1, 1)}
        className="mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] text-white"
      >
        At 'Briz', our ethos is simple: empower coffee shop owners to manage
        better, control operations smoothly, and serve each cup with a smile.
        Our platform is designed to handle the heavy lifting of day-to-day
        tasks, from inventory management to staff scheduling, so you can focus
        on what matters most - your patrons and your passion for coffee.
      </motion.p>

      <div className="mt-20 flex flex-wrap xs:justify-center lg:justify-start gap-10">
        {services.map((service, index) => (
          <ServiceCard key={service.title} index={index} {...service} />
        ))}
      </div>
    </>
  );
};

export default SectionWrapper(About, "about");