import { useState } from 'react';
import {
  FaWhatsapp,
  FaPhoneAlt,
  FaInstagram,
  FaYoutube,
  FaFacebookF,
} from 'react-icons/fa';

export default function SabkaKabadiWalaWebsite() {
  const [selectedService, setSelectedService] = useState('');
  const [language, setLanguage] = useState('en');

  const translations = {
    en: {
      home: 'Home',
      services: 'Services',
      about: 'About',
      rates: 'Check Rate',
      contact: 'Contact',
      heroTitle: 'Scrap Pickup Services in Nagpur',
      heroSubtitle: 'Turn your old scrap into instant cash — book your pickup today! 💰♻️',
      bookPickup: '{t.bookPickup}',
      whatsapp: '{t.whatsapp}',
      quickBooking: 'Quick Booking Form',
      yourName: 'Your Name',
      phone: 'Phone Number',
      location: 'Location',
      address: 'Address',
      selectScrap: 'Select Scrap Type',
      submit: 'Submit → WhatsApp',
      ourServices: '{t.ourServices}',
      whyChoose: '{t.whyChoose}',
      scrapWeBuy: '{t.scrapWeBuy}',
      aboutTitle: '{t.aboutTitle}',
      howWorks: '{t.howWorks}',
      reviews: '{t.reviews}',
      faq: '{t.faq}',
      contactUs: '{t.contactUs}'
    },
    hi: {
      home: 'होम',
      services: 'सेवाएं',
      about: 'हमारे बारे में',
      rates: 'रेट देखें',
      contact: 'संपर्क करें',
      heroTitle: 'नागपुर में स्क्रैप पिकअप सेवा',
      heroSubtitle: 'अपने पुराने कबाड़ को तुरंत पैसे में बदलें — आज ही पिकअप बुक करें! 💰♻️',
      bookPickup: 'पिकअप बुक करें',
      whatsapp: 'व्हाट्सएप',
      quickBooking: 'त्वरित बुकिंग फॉर्म',
      yourName: 'आपका नाम',
      phone: 'फोन नंबर',
      location: 'लोकेशन',
      address: 'पता',
      selectScrap: 'स्क्रैप का प्रकार चुनें',
      submit: 'सबमिट → व्हाट्सएप',
      ourServices: 'हमारी सेवाएं',
      whyChoose: 'हमें क्यों चुनें',
      scrapWeBuy: 'हम कौन सा स्क्रैप खरीदते हैं',
      aboutTitle: 'सबका कबाड़ी वाला के बारे में',
      howWorks: 'यह कैसे काम करता है',
      reviews: 'ग्राहक समीक्षा',
      faq: 'अक्सर पूछे जाने वाले सवाल',
      contactUs: 'संपर्क करें'
    }
  };

  const t = translations[language];
  const handleLanguageSwitch = () => {
    setLanguage((prev) => (prev === 'en' ? 'hi' : 'en'));
  };

  const scrollToSection = (id) => {
    const section = document.querySelector(id);

    if (section) {
      section.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleServiceClick = (serviceName) => {
    setSelectedService(serviceName);
    scrollToSection('#contact');
  };
  const services = [
    { icon: '🏠', title: 'Household Scrap' },
    { icon: '🏢', title: 'Office Scrap' },
    { icon: '🏭', title: 'Factory Scrap' },
    { icon: '📦', title: 'Bulk Scrap' },
  ];

  const features = [
    'Free Pickup',
    'Best Rate',
    'Instant Payment',
    'Same Day Service',
  ];

  const testimonials = [
    {
      name: 'Rahul Sharma',
      review:
        'Very fast pickup service and best scrap rates in Nagpur. Highly recommended!',
    },
    {
      name: 'Pooja Verma',
      review:
        'Easy booking process and instant payment. Great experience.',
    },
    {
      name: 'Amit Patel',
      review:
        'Professional team with same day scrap pickup service.',
    },
  ];

  const handleWhatsAppSubmit = (e) => {
    e.preventDefault();

    const form = e.target;

    const name = form.name.value;
    const phone = form.phone.value;
    const address = form.address.value;
    const scrap = form.scrap.value;
    const location = form.location.value;

    const message = `Hello Sabka Kabadi Wala!

Name: ${name}
Phone: ${phone}
Location: ${location}
Address: ${address}
Scrap Type: ${scrap}`;

    const whatsappUrl = `https://wa.me/919270710349?text=${encodeURIComponent(message)}`;

    window.open(whatsappUrl, '_blank', 'noopener,noreferrer');
  };

  return (
    <div className="bg-white text-gray-800 min-h-screen font-sans [perspective:1200px]">
      {/* Navbar */}
      <header className="bg-green-600 text-white sticky top-0 z-50 shadow-lg">
        <div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <img
              src="https://i.ibb.co/7QpKsCX/logo.webp"
              onError={(e) => {
                e.currentTarget.src = 'https://via.placeholder.com/150?text=Logo';
              }}
              alt="Sabka Kabadi Wala Logo"
              className="w-14 h-14 md:w-16 md:h-16 rounded-full object-cover border-2 border-yellow-400 shadow-xl transition duration-500 hover:scale-110 hover:rotate-6 hover:-translate-y-1 hover:shadow-2xl"
            />
            <div>
              <h1 className="text-2xl font-bold">Sabka Kabadi Wala</h1>
              <p className="text-sm text-gray-200">Scrap Pickup Services in Nagpur</p>
            </div>
          </div>

          <nav className="hidden md:flex gap-6 font-medium items-center">
            <button type="button" onClick={() => scrollToSection('#home')} className="hover:text-yellow-300 transition cursor-pointer">{t.home}</button>
            <button type="button" onClick={() => scrollToSection('#services')} className="hover:text-yellow-300 transition cursor-pointer">{t.services}</button>
            <button type="button" onClick={() => scrollToSection('#about')} className="hover:text-yellow-300 transition cursor-pointer">{t.about}</button>
            <button type="button" onClick={() => scrollToSection('#faq')} className="hover:text-yellow-300 transition cursor-pointer">{t.rates}</button>
            <button type="button" onClick={() => scrollToSection('#contact')} className="hover:text-yellow-300 transition cursor-pointer">{t.contact}</button>
          </nav>

          <button
            type="button"
            onClick={handleLanguageSwitch}
            className="bg-yellow-400 text-black px-4 py-2 rounded-xl font-semibold shadow-lg transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-1 hover:rotate-2 hover:shadow-2xl"
          >
            🌐 {language === 'en' ? 'हिंदी' : 'English'}
          </button>
        </div>
      </header>

      {/* Hero Section */}
      <section
        id="home"
        className="bg-gradient-to-r from-green-100 via-white to-yellow-100 text-gray-800 py-20 px-6"
      >
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
          <div>
            <h2 className="text-3xl md:text-5xl font-extrabold leading-tight mb-6">
              {t.heroTitle}
            </h2>

            <p className="text-base md:text-xl text-gray-700 mb-6 leading-relaxed">
              {t.heroSubtitle}
            </p>

            <div className="flex flex-wrap gap-4">
              <button
                type="button"
                onClick={() => scrollToSection('#contact')}
                className="bg-yellow-400 text-black px-6 py-3 rounded-2xl font-bold shadow-xl transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-2 hover:rotate-1 hover:shadow-2xl cursor-pointer"
              >
                Book Pickup
              </button>

              <a
                href="https://wa.me/919270710349"
                target="_blank"
                rel="noopener noreferrer"
                className="border-2 border-green-600 text-green-700 px-6 py-3 rounded-2xl font-bold shadow-lg transform-gpu transition-all duration-500 hover:bg-green-600 hover:text-white hover:scale-110 hover:-translate-y-2 hover:shadow-2xl"
              >
                WhatsApp
              </a>
            </div>
          </div>

          <div className="bg-white rounded-3xl p-8 shadow-2xl border border-green-100 transform-gpu transition-all duration-500 hover:-translate-y-3 hover:rotate-1 hover:shadow-[0_25px_50px_rgba\(0,0,0,0\.25\)]">
            <h3 className="text-3xl font-bold mb-6 text-green-700">
              {t.quickBooking}
            </h3>

            <form onSubmit={handleWhatsAppSubmit} className="space-y-4">
              <input
                type="text"
                name="name"
                placeholder={t.yourName}
                required
                className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
              />

              <input
                type="tel"
                name="phone"
                placeholder={t.phone}
                required
                className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
              />

              <input
                type="text"
                name="location"
                placeholder={t.location}
                required
                className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
              />

              <textarea
                name="address"
                placeholder={t.address}
                required
                className="w-full p-4 rounded-xl text-black h-28 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
              />

              <select
                name="scrap"
                defaultValue={selectedService}
                required
                className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
              >
                <option value="">{t.selectScrap}</option>
                  {selectedService && (
                    <option value={selectedService}>{selectedService}</option>
                  )}
                <option>Paper Scrap</option>
                <option>Plastic Scrap</option>
                <option>Iron Scrap</option>
                <option>Metal Scrap</option>
                <option>E-Waste</option>
                <option>Bulk Scrap</option>
              </select>

              <button
                type="submit"
                className="w-full bg-yellow-400 text-black py-4 rounded-2xl font-bold text-lg shadow-xl transform-gpu transition-all duration-500 hover:scale-105 hover:-translate-y-1 hover:shadow-2xl"
              >
                {t.submit}
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="py-20 px-6 bg-white">
        <div className="max-w-7xl mx-auto text-center">
          <h2 className="text-4xl font-bold text-[#0b4f3a] mb-4">
            Our Services
          </h2>

          <p className="text-gray-600 max-w-2xl mx-auto mb-12 text-lg">
            We provide doorstep scrap pickup services for homes, offices,
            factories, and bulk scrap collection with best market prices.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            {services.map((service, index) => (
              <button
                type="button"
                key={index}
                onClick={() => handleServiceClick(service.title)}
                className="bg-gray-50 rounded-3xl p-8 shadow-xl transform-gpu transition-all duration-500 hover:shadow-[0_30px_60px_rgba\(0,0,0,0\.25\)] hover:-translate-y-4 hover:rotate-2 hover:scale-105 cursor-pointer w-full text-center"
              
              >
                <div className="text-6xl mb-5">{service.icon}</div>
                <h3 className="text-2xl font-bold text-[#0b4f3a]">
                  {service.title}
                </h3>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Why Choose Us */}
      <section className="py-20 px-6 bg-green-100 text-gray-800">
        <div className="max-w-7xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-12">Why Choose Us</h2>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            {features.map((item, index) => (
              <div
                key={index}
                className="bg-white rounded-3xl p-8 border border-green-200 shadow-xl transform-gpu transition-all duration-500 hover:-translate-y-4 hover:rotate-1 hover:scale-105 hover:shadow-[0_30px_60px_rgba\(0,0,0,0\.25\)]"
              >
                <div className="text-5xl mb-4">✅</div>
                <h3 className="text-2xl font-semibold">{item}</h3>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Scrap We Buy */}
      <section className="py-20 px-6 bg-gradient-to-r from-green-50 to-yellow-50">
        <div className="max-w-7xl mx-auto text-center">
          <h2 className="text-4xl font-bold text-[#0b4f3a] mb-4">
            Scrap We Buy
          </h2>

          <p className="text-gray-600 text-lg mb-12 max-w-3xl mx-auto">
            We purchase all types of recyclable scrap materials with best market prices and instant payment.
          </p>

          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-6">
            {[
              { icon: '📄', name: 'Paper' },
              { icon: '🧴', name: 'Plastic' },
              { icon: '🔩', name: 'Iron' },
              { icon: '⚙️', name: 'Metal' },
              { icon: '💻', name: 'E-waste' },
              { icon: '🟠', name: 'Copper' },
              { icon: '🟡', name: 'Brass' },
            ].map((item, index) => (
              <div
                key={index}
                className="bg-white rounded-3xl p-6 shadow-xl border border-green-100 transform-gpu transition-all duration-500 hover:-translate-y-4 hover:rotate-2 hover:scale-105 hover:shadow-[0_30px_60px_rgba\(0,0,0,0\.25\)] cursor-pointer"
              >
                <div className="text-5xl mb-4">{item.icon}</div>
                <h3 className="text-xl font-bold text-[#0b4f3a]">
                  {item.name}
                </h3>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="py-20 px-6 bg-gray-100">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-4xl font-bold text-[#0b4f3a] mb-8">
            About Sabka Kabadi Wala
          </h2>

          <p className="text-lg text-gray-700 leading-9">
            Sabka Kabadi Wala is a trusted doorstep scrap pickup service in
            Nagpur, offering fast, reliable, and hassle-free scrap collection
            for homes, offices, and factories.
          </p>

          <p className="text-lg text-gray-700 leading-9 mt-6">
            We buy all types of scrap including paper, plastic, iron, metal,
            and e-waste with free pickup, best market rates, and instant
            payment.
          </p>

          <p className="text-lg text-gray-700 leading-9 mt-6">
            Our mission is to make scrap selling simple, transparent, and
            convenient while helping keep Nagpur clean and green ♻️
          </p>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 px-6 bg-white">
        <div className="max-w-7xl mx-auto text-center">
          <h2 className="text-4xl font-bold text-[#0b4f3a] mb-12">
            How It Works
          </h2>

          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
            {[
              'Book Pickup',
              'Pickup',
              'Weigh Scrap',
              'Instant Payment',
            ].map((step, index) => (
              <div
                key={index}
                className="bg-yellow-50 p-8 rounded-3xl shadow-xl transform-gpu transition-all duration-500 hover:-translate-y-4 hover:rotate-2 hover:scale-105 hover:shadow-[0_30px_60px_rgba\(0,0,0,0\.25\)]"
              >
                <div className="bg-yellow-400 w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                  {index + 1}
                </div>
                <h3 className="text-2xl font-bold text-[#0b4f3a]">
                  {step}
                </h3>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 px-6 bg-gray-100">
        <div className="max-w-7xl mx-auto text-center">
          <h2 className="text-4xl font-bold text-[#0b4f3a] mb-12">
            Customer Reviews
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((item, index) => (
              <div
                key={index}
                className="bg-white p-8 rounded-3xl shadow-xl transform-gpu transition-all duration-500 hover:-translate-y-4 hover:rotate-1 hover:scale-105 hover:shadow-[0_30px_60px_rgba\(0,0,0,0\.25\)]"
              >
                <div className="text-yellow-500 text-2xl mb-4">⭐⭐⭐⭐⭐</div>
                <p className="text-gray-700 mb-6">“{item.review}”</p>
                <h4 className="font-bold text-[#0b4f3a] text-lg">
                  {item.name}
                </h4>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="py-20 px-6 bg-white">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-4xl font-bold text-center text-[#0b4f3a] mb-12">
            Frequently Asked Questions
          </h2>

          <div className="space-y-6">
            <div className="bg-gray-100 p-6 rounded-2xl shadow-xl transform-gpu transition-all duration-500 hover:-translate-y-2 hover:scale-[1.02] hover:shadow-2xl">
              <h3 className="text-2xl font-bold mb-2 text-[#0b4f3a]">
                Minimum Pickup?
              </h3>
              <p className="text-gray-700">
                Minimum scrap pickup starts from ₹500 value.
              </p>
            </div>

            <div className="bg-gray-100 p-6 rounded-2xl shadow-xl transform-gpu transition-all duration-500 hover:-translate-y-2 hover:scale-[1.02] hover:shadow-2xl">
              <h3 className="text-2xl font-bold mb-2 text-[#0b4f3a]">
                Service Area?
              </h3>
              <p className="text-gray-700">
                We provide scrap pickup services across Nagpur & nearby areas.
              </p>
            </div>

            <div className="bg-gray-100 p-6 rounded-2xl shadow-xl transform-gpu transition-all duration-500 hover:-translate-y-2 hover:scale-[1.02] hover:shadow-2xl">
              <h3 className="text-2xl font-bold mb-2 text-[#0b4f3a]">
                Payment Method?
              </h3>
              <p className="text-gray-700">
                Instant cash, UPI, Google Pay, PhonePe & bank transfer available.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="py-20 px-6 bg-green-50 text-gray-800">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-4xl font-bold mb-8">Contact Us</h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
            <div className="bg-white p-8 rounded-3xl shadow-lg border border-green-100">
              <h3 className="text-2xl font-bold text-green-700 mb-6">
                Contact Details
              </h3>

              <div className="space-y-4 text-lg">
                <p>📍 Service Area: Nagpur & Nearby Areas</p>
                <p>📲 Call/WhatsApp: 9270710349</p>
                <p className="flex items-center gap-2"><FaInstagram /> Instagram: @sabkakabadi_wala</p>
                <p className="flex items-center gap-2"><FaFacebookF /> Facebook: Sabka Kabadi Wala</p>
              </div>
            </div>

            <div className="bg-white p-8 rounded-3xl shadow-lg border border-green-100">
              <h3 className="text-2xl font-bold text-green-700 mb-6">
                Quick Booking
              </h3>

              <form onSubmit={handleWhatsAppSubmit} className="space-y-4">
                <input
                  type="text"
                  name="name"
                  placeholder="Name"
                  required
                  className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
                />

                <input
                  type="tel"
                  name="phone"
                  placeholder="Phone"
                  required
                  className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
                />

                <input
                  type="text"
                  name="location"
                  placeholder={t.location}
                  required
                  className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
                />

                <textarea
                  name="address"
                  placeholder={t.address}
                  required
                  className="w-full p-4 rounded-xl text-black h-24 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
                />

                <select
                  name="scrap"
                  required
                  className="w-full p-4 rounded-xl text-black border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500"
                >
                  <option value="">{t.selectScrap}</option>
                  {selectedService && (
                    <option value={selectedService}>{selectedService}</option>
                  )}
                  <option>Household Scrap</option>
                  <option>Office Scrap</option>
                  <option>Factory Scrap</option>
                  <option>Bulk Scrap</option>
                </select>

                <button
                  type="submit"
                  className="w-full bg-yellow-400 text-black py-4 rounded-2xl font-bold shadow-xl transform-gpu transition-all duration-500 hover:scale-105 hover:-translate-y-1 hover:shadow-2xl"
                >
                  {t.submit}
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Floating Buttons */}
      <div className="fixed bottom-6 right-6 flex flex-col gap-4 z-50 items-center">
        <a
          href="https://wa.me/919270710349"
          target="_blank"
          rel="noopener noreferrer"
          className="bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-2xl transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-2 hover:rotate-6"
        >
          <FaWhatsapp />
        </a>

        <a
          href="tel:9270710349"
          className="bg-yellow-400 text-black w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-2xl transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-2 hover:-rotate-6"
        >
          <FaPhoneAlt className="text-2xl" />
        </a>

        <a
          href="https://www.instagram.com/sabkakabadi_walaa?igsh=dzFhNm5vMWpuNjB4"
          target="_blank"
          rel="noopener noreferrer"
          className="bg-pink-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-2xl transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-2 hover:rotate-6"
        >
          <FaInstagram />
        </a>

        <a
          href="https://www.youtube.com/@SabkaKabadi_wala"
          target="_blank"
          rel="noopener noreferrer"
          className="bg-red-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-2xl transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-2 hover:rotate-6"
        >
          <FaYoutube />
        </a>

        <a
          href="https://www.facebook.com/profile.php?id=61563131446199&sfnsn=wiwspwa&mibextid=RUbZ1f"
          target="_blank"
          rel="noopener noreferrer"
          className="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl shadow-2xl transform-gpu transition-all duration-500 hover:scale-110 hover:-translate-y-2 hover:rotate-6"
        >
          <FaFacebookF />
        </a>
      </div>

      {/* Footer */}
      <footer className="bg-green-600 text-white py-8 text-center">
        <p className="text-lg">
          © 2026 Sabka Kabadi Wala | Amar Web Connect
        </p>
      </footer>
    </div>
  );
}

	<div id="primary" >
		<main id="main" >
			
<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained"><h1 class="alignwide wp-block-post-title">Hello world!</h1>

<div class="entry-content wp-block-post-content is-layout-constrained wp-block-post-content-is-layout-constrained">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
</div>


<div class="wp-block-group is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:3em;padding-bottom:3em">
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<div class="wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-65e6f041 wp-block-columns-is-layout-flex" style="padding-top:var(--wp--preset--spacing--20)">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:30%"><div style="font-style:normal;font-weight:600;" class="wp-block-post-author"><div class="wp-block-post-author__content"><p class="wp-block-post-author__name">seekhoorjeeto@gmail.com</p><p class="wp-block-post-author__bio"></p></div></div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:70%">
<div class="wp-block-group post-meta is-layout-flow wp-block-group-is-layout-flow"><div style="font-size:var(--wp--custom--font-sizes--x-small);" class="wp-block-post-date"><time datetime="2026-05-15T09:05:13+00:00"><a href="https://sabkakabadiwala.com/hello-world/">May 15, 2026</a></time></div>

<div style="font-size:var(--wp--custom--font-sizes--x-small)" class="taxonomy-category wp-block-post-terms"><a href="https://sabkakabadiwala.com/category/uncategorized/" rel="tag">Uncategorized</a></div>

</div>
</div>
</div>
</div>



<div class="wp-block-comments wp-block-comments-query-loop"><h2 id="comments" class="wp-block-comments-title">One response to &#8220;Hello world!&#8221;</h2>

<ol class="wp-block-comment-template"><li id="comment-1" class="comment even thread-even depth-1">

<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:40px"><div class="wp-block-avatar"><img alt='A WordPress Commenter Avatar' src='https://secure.gravatar.com/avatar/8e1606e6fba450a9362af43874c1b2dfad34c782e33d0a51e1b46c18a2a567dd?s=40&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/8e1606e6fba450a9362af43874c1b2dfad34c782e33d0a51e1b46c18a2a567dd?s=80&#038;d=mm&#038;r=g 2x' class='avatar avatar-40 photo wp-block-avatar__image' height='40' width='40'  style="border-radius:20px;" decoding='async'/></div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"><div class="wp-block-comment-author-name has-small-font-size"><a rel="external nofollow ugc" href="https://wordpress.org/" target="_self" >A WordPress Commenter</a></div>


<div class="wp-block-group is-layout-flex wp-block-group-is-layout-flex" style="margin-top:0px;margin-bottom:0px"><div class="wp-block-comment-date has-small-font-size"><time datetime="2026-05-15T09:05:13+00:00"><a href="https://sabkakabadiwala.com/hello-world/#comment-1">May 15, 2026</a></time></div>

</div>


<div class="wp-block-comment-content"><p>Hi, this is a comment.<br />
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.<br />
Commenter avatars come from <a href="https://gravatar.com/">Gravatar</a>.</p>
</div>

<div class="wp-block-comment-reply-link has-small-font-size"><a rel="nofollow" class="comment-reply-link" href="https://sabkakabadiwala.com/hello-world/?replytocom=1#respond" data-commentid="1" data-postid="1" data-belowelement="comment-1" data-respondelement="respond" data-replyto="Reply to A WordPress Commenter" aria-label="Reply to A WordPress Commenter">Reply</a></div></div>
</div>

</li></ol>



	<div id="respond" class="comment-respond wp-block-post-comments-form">
		<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/hello-world/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://sabkakabadiwala.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form>	</div><!-- #respond -->
	</div>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>



<div class="wp-block-columns alignwide next-prev-links is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-top:1.75em;padding-bottom:0em"><div class="post-navigation-link-previous wp-block-post-navigation-link has-moderate-font-size"></div></div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="padding-top:1.75em;padding-bottom:0em"><div class="post-navigation-link-next has-text-align-right wp-block-post-navigation-link has-moderate-font-size"></div></div>
</div>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide"/>
</div>
		</main><!-- #main -->
	</div><!-- #primary -->

	            </div><!-- #content -->
		</div><!-- #page -->
        
        
        <div >
            
<div class="wp-block-group wpkoi-footer has-border-color has-background is-layout-constrained wp-container-core-group-is-layout-fd91d196 wp-block-group-is-layout-constrained" style="border-color:#222111;border-style:solid;border-width:1px;background-color:#222111;margin-top:0px;padding-top:0vw;padding-right:0vw;padding-bottom:0vw;padding-left:0vw">
<div class="wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-core-columns-is-layout-aca22cf8 wp-block-columns-is-layout-flex">
<div class="wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow" style="background-color:#a04933;flex-basis:4vw">
<div style="margin-top:0px;margin-bottom:0px;height:4vw" aria-hidden="true" class="wp-block-spacer"></div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:90vw"></div>
</div>



<div class="wp-block-columns has-text-color has-link-color wp-elements-9e1062637c2e9b1596a30ba21d70f11b is-layout-flex wp-container-core-columns-is-layout-9f3547c2 wp-block-columns-is-layout-flex" style="border-bottom-color:#ded9d5;border-bottom-style:solid;border-bottom-width:1px;color:#ded9d5;padding-top:0vw;padding-right:4vw;padding-bottom:3vw;padding-left:4vw">
<div class="wp-block-column is-vertically-aligned-bottom is-layout-flow wp-container-core-column-is-layout-a25397a9 wp-block-column-is-layout-flow" style="flex-basis:75%">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-785cfb9c wp-block-columns-is-layout-flex" style="margin-bottom:6vw">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading has-text-color has-link-color wp-elements-39a2b21aec4c78744b188215d40554f1" style="border-bottom-color:#ded9d5;border-bottom-style:solid;border-bottom-width:1px;color:#a04933;margin-bottom:1vw;font-size:2vw;font-style:normal;font-weight:400;line-height:1.5;text-transform:uppercase">Email</h4>



<h3 class="wp-block-heading" style="margin-top:0px;margin-bottom:0px;font-size:2vw;font-style:normal;font-weight:500">info@example.com</h3>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<h4 class="wp-block-heading has-text-color has-link-color wp-elements-62d793fdcde37cfdf897ffbc2b6fe1ec" style="border-bottom-color:#ded9d5;border-bottom-style:solid;border-bottom-width:1px;color:#a04933;margin-bottom:1vw;font-size:2vw;font-style:normal;font-weight:400;line-height:1.5;text-transform:uppercase">Telephone</h4>



<h3 class="wp-block-heading" style="margin-top:0px;margin-bottom:0px;font-size:2vw;font-style:normal;font-weight:500">+55 555 5555</h3>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<p style="margin-right:10vw;font-size:2.2vw;font-style:normal;font-weight:300">We build space for identity, expression, and&nbsp;<strong>contrast</strong>&nbsp;to exist without explanation.</p>



<h2 class="wp-block-heading has-two-color has-text-color" style="font-size:10vw;font-style:normal;font-weight:900;text-transform:uppercase">Kalasakti</h2>
</div>



<div class="wp-block-column is-vertically-aligned-bottom footer-socials is-layout-flow wp-block-column-is-layout-flow" style="padding-bottom:1.5vw;flex-basis:25%">
<h4 class="wp-block-heading has-text-color has-link-color wp-elements-b73a7bd7e4f53b96386c23a6d8ca0d7e" style="border-bottom-color:#ded9d5;border-bottom-style:solid;border-bottom-width:1px;color:#a04933;margin-bottom:2vw;font-size:2vw;font-style:normal;font-weight:400;line-height:1.5;text-transform:uppercase">Socials</h4>



<h5 class="wp-block-heading has-text-color has-link-color wp-elements-c6acb45aeac8d496cbba952c14454bd9" style="color:#ded9d5;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:2.8vw;font-style:normal;font-weight:700;line-height:1.5;text-decoration:none;text-transform:uppercase"><a href="#">Facebook</a></h5>



<h5 class="wp-block-heading has-text-color has-link-color wp-elements-74f6d6e566620aee014731a85a540ce2" style="color:#ded9d5;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:2.8vw;font-style:normal;font-weight:700;line-height:1.5;text-decoration:none;text-transform:uppercase"><a href="#">Instagram</a></h5>



<h5 class="wp-block-heading has-text-color has-link-color wp-elements-9f246d5fc12382d8b8ce882d42781a53" style="color:#ded9d5;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:2.8vw;font-style:normal;font-weight:700;line-height:1.5;text-decoration:none;text-transform:uppercase"><a href="#">TikTok</a></h5>



<h4 class="wp-block-heading has-text-color has-link-color wp-elements-3be3494da8f014d3814b03bb9ba09284" style="border-bottom-color:#ded9d5;border-bottom-style:solid;border-bottom-width:1px;color:#a04933;margin-top:4vw;margin-bottom:2vw;font-size:2vw;font-style:normal;font-weight:400;line-height:1.5;text-transform:uppercase">Information</h4>



<h5 class="wp-block-heading has-text-color has-link-color wp-elements-90c0283e600b255764cd599362764fe9" style="color:#ded9d5;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:2.8vw;font-style:normal;font-weight:700;line-height:1.5;text-decoration:none;text-transform:uppercase"><a href="#">About us</a></h5>



<h5 class="wp-block-heading has-text-color has-link-color wp-elements-a506f6d90066d0c023d7b003cb9d0304" style="color:#ded9d5;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;font-size:2.8vw;font-style:normal;font-weight:700;line-height:1.5;text-decoration:none;text-transform:uppercase"><a href="#">Conditions</a></h5>
</div>
</div>
</div>
        </div><!-- .site-footer -->
        
        	</div><!-- .kalasakti-body-padding-content -->
	<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/kalasakti/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="text/javascript" src="https://sabkakabadiwala.com/wp-includes/js/comment-reply.min.js?ver=6.9.4" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script>
</body>
</html>