const Office = () => {
  const offices = {
    "Registered Office": [
      {
        address: "1148/E, Sykes Extension, Kolhapur - 416001, Maharashtra, India.",
      },
    ],
    "Corporate Office": [
      {
        address:
          "C.S.NO. 1031/K2, E Ward, 3rd Floor, Sterling Tower, Gavat Mandai Road, Kolhapur - 416001, Maharashtra, India.",
        phone: "+91 231 2686910/11, 2529199",
        fax: "+91 231 2668199",
        email: "career@lcepl.com",
      },
    ],
    "Regional Offices": {
      Maharashtra: {
        Mumbai: "141 & 142, 14th Floor, Mittal Court, 224 Nariman Point, Mumbai - 400021, India",
        "Navi Mumbai":
          "Flat No. F-1, Pariwar Housing Society, Above Ramdev Hotel, Sector No. 4/5, Vashi, Navi Mumbai - 400703, India",
        Pune:
          '"A.J. Residency" 5th Floor, Flat No. 502, S. No. 4711, Plot No. 6, Tawre Colony, Near Chougule Showroom, Pune - 411 009, India',
        Nagpur:
          "10-A, Samata Layout, beside NIT office, Diagonal opposite to NIT swimming Pool, Ambazari, Nagpur - 440010",
      },
      Karnataka: {
        Bengaluru:
          "198, 33rd Cross, 3rd Main Road, 7th Block, Jayanagar, Bangalore - 560070",
        Belgavi:
          "Plot No. 51, Teachers Colony, Vinayaknagar, Hindalga Road, Belgavi - 591 108, India",
      },
      "Madhya Pradesh": {
        Bhopal: "E-3/165, Arera Colony, Bhopal - 462 016, Madhya Pradesh, India.",
        Indore:
          "Block No. 608, 6th Floor, Apollo Premier Towers, Vijay Nagar, Ring Road, Indore - 452010, India",
      },
      Goa: {
        Panaji:
          "Office No. 406, Kamat Grand, Behind Caculo Mall, Saint Intez, Panaji City 403001 (Goa), India",
      },
      Chhattisgarh: {
        Raipur:
          "Flat No. 202, Kashi Apartment, Geetanjali Nagar, Raipur - 492006, Chhattisgarh, India.",
      },
      "Andhra Pradesh": {
        Vijayawada:
          "42 2 1 202 Drwa No. 423, 1st Floor, Janaki Nilayam, Main Road, Devi Nagar, Vijayawada, Krishna, Andhra Pradesh - 520 003, India",
      },
      "Uttar Pradesh": {
        Lucknow:
          "Parth Aadyant Tower, Ashlesha A House no. 203, Near Phoenix Palassio Mall, Gomtinagar Extension, Along Shahid Path, Lucknow - 226010, India",
      },
      Bihar: {
        Patna:
          "501, Manan Mansion Apartment, Gorkhnathpath Lane, East Boring, Canal Road, Patna - 800001, Bihar, India.",
      },
      Gujarat: {
        Ahmedabad:
          "3rd Floor, A 9, 10, Sardar Mall, Near Dimond Mill, Nocol, Ahmedabad - 382350, Gujarat, India.",
      },
      Uttarakhand: {
        Dehradun:
          "House No. 12-B, Ekta Enclave, Lane No. 6, Near Success Point Global Academy, Neharu Gram Road, Nathanpur, Deharadun - 248005, Uttarakhand, India.",
      },
    },
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        {/* Header with animation */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 relative inline-block">
            <span className="relative z-10">Our Offices</span>
            <span className="absolute bottom-0 left-0 w-full h-2 bg-blue-200 z-0 opacity-70 transform translate-y-1"></span>
          </h1>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Connecting with you across multiple locations in India
          </p>
        </div>

        {/* Main content with glassmorphism effect */}
        <div className="space-y-16">
          {/* Registered Office */}
          <section className="relative">
            <div className="absolute -inset-4 bg-blue-100 rounded-xl opacity-25 blur"></div>
            <div className="relative bg-white rounded-xl shadow-lg p-6 md:p-8 backdrop-blur-sm border border-blue-100">
              <div className="flex items-center mb-4">
                <div className="p-2 bg-blue-100 rounded-lg mr-4">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                </div>
                <h2 className="text-2xl md:text-3xl font-bold text-blue-800">REGISTERED OFFICE</h2>
              </div>
              <div className="pl-14">
                <p className="text-gray-700 text-lg">{offices["Registered Office"][0].address}</p>
              </div>
            </div>
          </section>

          {/* Corporate Office */}
          <section className="relative">
            <div className="absolute -inset-4 bg-blue-100 rounded-xl opacity-25 blur"></div>
            <div className="relative bg-white rounded-xl shadow-lg p-6 md:p-8 backdrop-blur-sm border border-blue-100">
              <div className="flex items-center mb-4">
                <div className="p-2 bg-blue-100 rounded-lg mr-4">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                </div>
                <h2 className="text-2xl md:text-3xl font-bold text-blue-800">CORPORATE OFFICE</h2>
              </div>
              <div className="pl-14 space-y-3">
                <p className="text-gray-700 text-lg">{offices["Corporate Office"][0].address}</p>
                <div className="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                  </svg>
                  <p className="text-gray-700 text-lg">{offices["Corporate Office"][0].phone}</p>
                </div>
                <div className="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                  </svg>
                  <p className="text-gray-700 text-lg">{offices["Corporate Office"][0].fax}</p>
                </div>
                <div className="flex items-start">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  <p className="text-gray-700 text-lg">{offices["Corporate Office"][0].email}</p>
                </div>
              </div>
            </div>
          </section>

          {/* Regional Offices */}
          <section>
            <div className="text-center mb-10">
              <h2 className="text-3xl font-bold text-gray-900 inline-block relative">
                <span className="relative z-10">REGIONAL OFFICES</span>
                <span className="absolute bottom-0 left-0 w-full h-2 bg-blue-200 z-0 opacity-50 transform translate-y-1"></span>
              </h2>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {Object.entries(offices["Regional Offices"]).map(([state, cities]) => (
                <div key={state} className="relative group">
                  <div className="absolute -inset-1 bg-gradient-to-r from-blue-100 to-blue-50 rounded-lg opacity-75 group-hover:opacity-100 blur transition duration-200"></div>
                  <div className="relative bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:border-blue-200 transition duration-200 h-full">
                    <div className="bg-blue-600 px-6 py-3">
                      <h3 className="text-xl font-bold text-white">{state}</h3>
                    </div>
                    <div className="p-6 space-y-4">
                      {Object.entries(cities).map(([city, address]) => (
                        <div key={city} className="pb-4 border-b border-gray-100 last:border-0 last:pb-0">
                          <h4 className="font-bold text-blue-800 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            {city}
                          </h4>
                          <p className="text-gray-600 text-sm mt-1 pl-7">{address}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </div>
  );
};

export default Office;