import React, { useState } 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";
import validateIranPhone from "plugins/IranPhoneRegex";
import { toast } from "react-toastify";

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 = () => {
  const [subscribe, setSubscribe] = useState(false);
  const [subscribeNumber, setSubscribeNumber] = useState("");

  const handleSubscribeNumber = () => {
    if (
      subscribeNumber &&
      subscribeNumber.trim() !== "" &&
      validateIranPhone(subscribeNumber.trim())
    ) {
      setSubscribe(true);
    } else {
      toast.error(`contact number is not acceptable`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  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)}>
        {subscribe ? (
          <div>
            <h2
              className={`text-white  md:text-[20px] sm:text-[20px] xs:text-[18px] text-[30px] text-left mt-10`}
            >
              Thank you for your trust, we will contact you
            </h2>
          </div>
        ) : (
          <div className="flex flex-col sm:flex-row mt-5 items-center sm:items-start">
            <input
              type="number"
              className="form-control !w-full sm:!w-6/12 mb-4 sm:mb-0"
              placeholder="Enter your number"
              onChange={(e) => setSubscribeNumber(e.target.value)}
              value={subscribeNumber}
            />
            <button
              className="btn btn-primary rounded-2xl sm:ml-3 w-full p-4 sm:w-auto"
              onClick={() => handleSubscribeNumber(true)}
            >
              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");