"use client"
import Image from 'next/image';

import { useEffect, useRef, useState } from 'react';
import ContactModal from 'src/components/ContactUs';



const Content = ({ content }) => {

  const [open, setOpen] = useState(false);
  const openModal = () => {
    setOpen(true);
  };
  const closeModal = () => {
    setOpen(false);
  }

  return (
    <section className="py-16 px-4 bg-white">
      <div
        className={`container mx-auto max-w-6xl transition-all duration-1000 transform`}
      >
        <div className="bg-gradient-to-br  rounded-2xl shadow-2xl overflow-hidden">
          <div className="flex flex-col lg:flex-row">
            {/* Left side - Image and title */}
            <div className="lg:w-2/5 p-8 flex flex-col items-center justify-center text-white " >
              <div className="w-full max-w-[200px] h-[130px] relative mb-6 bg-white rounded-lg p-4 shadow-lg transform transition-transform duration-500 hover:scale-105">
                <Image

                  src={content.image?.url || "/placeholder.svg"}
                  alt={content.image?.alternativeText || content.title}
                  fill
                  style={{ objectFit: "contain" }}
                  className="p-2"
                />
              </div>

              {/* <div className="flex flex-wrap justify-center gap-2 mt-2">
                <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                  Detergents
                </span>
                <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                  Shampoos
                </span>
                <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-sm font-medium">
                  Hygiene
                </span>
              </div> */}
            </div>

            {/* Right side - Description */}
            <div className="lg:w-3/5 bg-white p-8 lg:p-10 relative">
              <div className="absolute -top-6 -left-6 w-12 h-12 rounded-full bg-cyan-100 opacity-70 hidden lg:block"></div>
              <div className="absolute -bottom-6 -right-6 w-16 h-16 rounded-full bg-blue-100 opacity-70 hidden lg:block"></div>

              <h1 className="text-4xl font-bold tracking-tight mb-4 ">{content.title}</h1>

              <div
                className="prose prose-lg max-w-none text-gray-600 relative z-10"
                dangerouslySetInnerHTML={{ __html: content.description }}
              />

              <div className="mt-8 flex flex-wrap gap-4">
                {/* <button className="px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                  View All Products
                </button> */}
                <button onClick={() => setOpen(true)} className="px-6 py-3  font-medium rounded-lg bg-primary-100 transition-all duration-300">
                  Contact Us
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </section >
  )
}

export default Content