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";
import vector1 from "@img/Vector1.png";

const ServiceCard = ({ index, title, icon }) => (
  <Tilt className=" w-full mt-5">
    <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 StressTest = () => {
  return (
    <div className="xs:mt-20 ">
      <motion.div variants={textVariant()}>
        <h2 className="text-white font-black text-[30px] xs:text-[40px] sm:text-[50px] md:text-[60px] xs:leading-[50px]	">
          <span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold">
            B
          </span>
          e Part of Our Stress Test{" "}
        </h2>
      </motion.div>

      <motion.p
        variants={fadeIn("", "", 0.1, 1)}
        className="text-secondary text-[14px] xs:text-[16px] sm:text-[17px] max-w-3xl leading-[20px] sm:leading-[24px] text-white mt-3"
      >
        Be Part of Our Stress Test and try us as an early adapter
      </motion.p>

      <motion.div variants={fadeIn("", "", 0.1, 1)}>
        <div className="flex flex-col sm:flex-row mt-5 items-center sm:items-start">
          <input
            type="text"
            className="form-control !w-full sm:!w-6/12 mb-4 sm:mb-0"
            placeholder="Enter your email"
          />
          <button className="btn btn-primary rounded-2xl sm:ml-3 w-full p-4 sm:w-auto">
            Subscribe
          </button>
        </div>
      </motion.div>

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

export default SectionWrapper(StressTest, "StressTest");