'use client'
import { ChevronRight } from 'lucide-react';
import React, { useState } from 'react'

const CertificationBannerTwo = () => {
    const [selectedInfo, setSelectedInfo] = useState(0);

    const infoItems = [
      {
        title: "Introduction",
        description: "Since 1973, Gupta Rudraksha has been committed to maintaining the highest quality standards for all its Rudraksha and Shaligram. To take our commitment to quality assurance even further, we have successfully complied with all the quality standards set forward by the International Organization for Standardization (ISO), and Gupta Rudraksha has been recognized as Nepal's first and only ISO 9001:2015 certified Rudraksha organization."
      },
      {
        title: "100% lifetime Moneyback Authenticity Guarantee",
        description: "Gupta Rudraksha is dedicated to preserving the sacred and ancient tradition of Rudraksha while making it accessible to seekers worldwide. Our certification process reflects our unwavering commitment to authenticity, quality, and the spiritual well-being of our customers.Choose Rudraksha beads with the Gupta Rudraksha certification, and embark on your spiritual journey with confidence and trust."
      },
      {
        title:"Book Premium Rudraksha Prana Pratistha Pooja",
        description:"All Our Pooja done based on your Birth Chart and your specific details following Vedic principles. Video Recording of the entire ceremony will be shared with you (Live Pooja is available upon request)."
      }

    ];
  
    const handleInfoClick = (index) => {
      setSelectedInfo(index);
    };
  return (
    <div className="bg-slate-50 p-4">
      <h1 className="sm:text-5xl sm:mt-24 text-2xl font-serif text-center tracking-wide mb-12">
        Gupta Rudraksha Information
      </h1>
      <div className="grid sm:grid-cols-3 gap-8">
        <div className="flex flex-col gap-4 sm:pl-10">
          {infoItems.map((item, index) => (
            <div
              key={index}
              className="cursor-pointer"
              onClick={() => handleInfoClick(index)}
            >
              <h2 className={`text-xl sm:my-4 ${selectedInfo === index ? 'text-yellow-700' : ''} hover:translate-x-4 hover:font-semibold hover:text-yellow-700 transition-all flex items-center`}>
                {selectedInfo === index ? (
                  <ChevronRight className="mr-2" size={20} />
                ) : (
                  ""
                )}
                {item.title}
              </h2>
            </div>
          ))}
        </div>
        <div className="sm:col-span-2">
          {selectedInfo !== null && (
            <div className="bg-white p-6">
              <div className="flex flex-col gap-3 justify-start items-start">
                <h1 className='sm:text-4xl text-xl font-semibold'>{infoItems[selectedInfo].title}</h1>
                <p className="mb-4 mt-2 text-[1.05rem]">
                  {infoItems[selectedInfo].description}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default CertificationBannerTwo