Untitled

import React, { useState, useEffect } from "react";

const SolutionBackground = ({ content }) => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkScreenSize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);

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

  return (
    <div className="min-h-screen px-4 sm:px-6 md:px-12 lg:px-[100px] py-6 md:py-[103px] flex items-center justify-center relative">
      <div className="absolute inset-0">
        <img
          src="/solution/driveSolution.png"
          alt="background"
          className="w-full h-full object-cover"
        />
      </div>

      <div className="w-full bg-black/20 rounded-[20px] border border-[#219ebc] backdrop-blur-[36.20px] relative overflow-hidden">
        <div className="p-4 md:p-8">
          {/* Star pattern image - hidden on mobile and medium screens */}
          <div className="absolute top-0 right-0 w-[43%] hidden lg:block">
            <img
              src="/solution/solutiondesign.png"
              alt="pattern"
              className="w-full h-full object-cover"
            />
          </div>

          <div className="relative z-10 min-h-[300px] lg:h-[586px]">
            {content?.driveData[0] && (
              <div className="pt-4 md:pt-[79px] mb-6 p-4">
                <h2 className="text-white text-2xl md:text-3xl lg:text-4xl font-semibold leading-tight md:leading-[54px] max-w-full lg:max-w-[606px] mb-4">
                  {content.driveData[0].title.split("\n").map((line, index) => (
                    <React.Fragment key={index}>
                      {line}
                      {index < content.driveData[0].title.split("\n").length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </h2>
                <div className="max-w-full lg:max-w-[700px] text-gray-200">
                  {content.driveData[0].description.split("\n").map((line, index) => (
                    <React.Fragment key={index}>
                      {line}
                      {index < content.driveData[0].description.split("\n").length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </div>
              </div>
            )}

            <div className="flex items-center gap-[13px] mt-4 p-4">
              <div className="w-[52px] h-[49px] bg-[#0b76a0] border flex justify-center items-center">
                <img
                  className="cursor-pointer w-[30px] h-[30px]"
                  alt="arrow"
                  src="/home/learn_arrow.svg"
                />
              </div>
              <div>
                <p className="text-white text-base font-medium">
                  Book a Demo Now
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SolutionBackground;