import { useState, useEffect } from "react";
import { data } from "./data";

export default function BusinessSolution() {
  const [activeTab, setActiveTab] = useState("hr");
  const activeContent = data.content[activeTab];
  const [isMobile, setIsMobile] = useState(false);

  // Detect mobile screen size
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768); // Set true jika lebar layar < 768px
    };

    window.addEventListener("resize", handleResize);
    handleResize(); // Inisialisasi state saat pertama kali mount

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <div className="container w-[90vw] mx-auto p-4 overflow-hidden">
      {/* Header */}
      <div className="text-center mb-8">
        <h1 className="text-[32px] text-[#212121] font-semibold mb-2">{data.title}</h1>
        <p className="text-[36px] text-[#5B59E0]">{data.subtitle}</p>
      </div>

      {/* Navigation Buttons */}
      <div className="relative w-full max-w-[90vw] h-auto mx-auto bg-[#CA2B68] rounded-[14px] border border-[#D5DAE3] mb-8 p-4">
        <div className={`flex ${isMobile ? "flex-wrap" : "justify-center"} gap-4 text-[18px] md:text-[24px]`}>
          {data.tabs.map((button) => (
            <button
              key={button.key}
              className={`w-full sm:w-[200px] md:w-[250px] lg:w-[300px] xl:w-[352px] h-[60px] md:h-[77px] rounded-[14px] border ${
                activeTab === button.key ? "bg-white text-[#CA2B68] shadow-lg" : "bg-[#CA2B68] text-[#FFFFFF]"
              } font-semibold transition-colors`}
              onClick={() => setActiveTab(button.key)}
            >
              {button.name}
            </button>
          ))}
        </div>
      </div>

      {/* Content Section */}
      {activeContent && (
        <div className="max-w-[90vw] mx-auto flex flex-col sm:flex-row flex-wrap gap-8 justify-center lg:justify-start">
          {/* Image Section */}
          <div className={`w-full sm:w-[300px] md:w-[500px] md:ml-7 lg:w-[618px] max-w-[90vw] rounded-[14px] border border-gray-200 overflow-hidden shadow-lg`}>
            <img
              src={activeContent.image || "/placeholder.svg"}
              alt={activeContent.title}
              className="object-cover w-full h-full"
            />
          </div>

          {/* Text Content */}
          <div className="flex-1 md:pl-7 max-w-full ">
            <h2 className="text-[24px] md:text-[32px] text-[#212121] font-semibold mb-6">{activeContent.title}</h2>
            <p className="text-[#212121] text-[16px] md:text-[20px] mb-8">{activeContent.description}</p>

            {/* Features */}
            <div className="space-y-6">
              {activeContent.features.map((feature, index) => (
                <div key={index} className="flex items-start gap-6">
                  <div className="w-[80px] h-[80px] md:w-[108px] md:h-[106px] rounded-[14px] border border-[#D5DAE3] shadow-lg flex items-center justify-center flex-shrink-0">
                    <img
                      src={feature.icon || "/checkmark.svg"}
                      alt="Feature Icon"
                      className="object-contain w-[50px] h-[40px] md:w-[64px] md:h-[50.3px]"
                    />
                  </div>
                  <div>
                    <h3 className="text-[18px] md:text-[20px] font-medium text-[#CA2B68] mb-2">{feature.title}</h3>
                    <p className="text-[16px] md:text-[18px] text-[#212121]">{feature.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}