export default function Home() {
  return (
    <main className="bg-black text-white min-h-screen">

      {/* HERO SECTION */}
      <section className="h-screen flex flex-col justify-center items-center text-center px-6">
        <h1 className="text-6xl md:text-8xl font-bold text-yellow-500">
          MY SALOUNGE
        </h1>

        <p className="mt-6 text-xl md:text-2xl text-gray-300 max-w-3xl">
          Ahmedabad's Ultimate Luxury Salon Experience
        </p>

        <p className="mt-4 text-gray-400 max-w-2xl">
          Hair • Skin • Makeup • Nails • Laser Hair Removal • Bridal Makeovers
        </p>

        <div className="mt-10 flex gap-4">
          <a
            href="tel:+917450074745"
            className="bg-yellow-500 text-black px-8 py-4 rounded-full font-semibold"
          >
            Book Appointment
          </a>

          <a
            href="#franchise"
            className="border border-yellow-500 text-yellow-500 px-8 py-4 rounded-full"
          >
            Franchise Inquiry
          </a>
        </div>
      </section>

      {/* ABOUT */}
      <section className="py-24 px-6 max-w-6xl mx-auto">
        <h2 className="text-4xl font-bold text-yellow-500 mb-8">
          About My Salounge
        </h2>

        <p className="text-gray-300 leading-8 text-lg">
          Located at Times Square Grand on Sindhu Bhavan Road, My Salounge is
          Ahmedabad's premier luxury salon destination. We bring together
          world-class beauty treatments, expert stylists and premium
          experiences under one roof.
        </p>
      </section>

      {/* SERVICES */}
      <section className="py-24 px-6 bg-zinc-950">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-bold text-yellow-500 mb-12">
            Our Premium Services
          </h2>

          <div className="grid md:grid-cols-3 gap-8">

            <div className="border border-zinc-800 p-8 rounded-xl">
              <h3 className="text-2xl text-yellow-500 mb-4">
                Hair Services
              </h3>
              <p className="text-gray-400">
                Haircuts, Styling, Keratin, Smoothening, Hair Spa, Colouring
                and Hair Transformations.
              </p>
            </div>

            <div className="border border-zinc-800 p-8 rounded-xl">
              <h3 className="text-2xl text-yellow-500 mb-4">
                Skin Treatments
              </h3>
              <p className="text-gray-400">
                Facials, Skin Rejuvenation, Hydration Treatments and Advanced
                Skin Care.
              </p>
            </div>

            <div className="border border-zinc-800 p-8 rounded-xl">
              <h3 className="text-2xl text-yellow-500 mb-4">
                Nail Studio
              </h3>
              <p className="text-gray-400">
                Nail Extensions, Nail Art and Luxury Nail Care Services.
              </p>
            </div>

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

      {/* LASER */}
      <section className="py-24 px-6">
        <div className="max-w-5xl mx-auto text-center">

          <h2 className="text-5xl font-bold text-yellow-500">
            Laser Hair Removal
          </h2>

          <p className="mt-8 text-xl text-gray-300">
            One of the most loved services at My Salounge.
          </p>

          <p className="mt-6 text-gray-400 leading-8">
            Experience smooth, hair-free skin with advanced laser technology
            performed by trained professionals in a safe and luxurious
            environment.
          </p>

        </div>
      </section>

      {/* BRIDAL */}
      <section className="py-24 px-6 bg-zinc-950">
        <div className="max-w-6xl mx-auto">

          <h2 className="text-4xl font-bold text-yellow-500 mb-8">
            Bridal & Wedding Makeovers
          </h2>

          <p className="text-gray-300 text-lg leading-8">
            From engagements and pre-wedding shoots to receptions and bridal
            ceremonies, our team creates flawless looks tailored to your
            special day.
          </p>

        </div>
      </section>

      {/* WHY US */}
      <section className="py-24 px-6">
        <div className="max-w-6xl mx-auto">

          <h2 className="text-4xl font-bold text-yellow-500 mb-12">
            Why Choose My Salounge?
          </h2>

          <div className="grid md:grid-cols-4 gap-8">

            <div>
              <h3 className="text-xl font-semibold text-yellow-500">
                Luxury Experience
              </h3>
            </div>

            <div>
              <h3 className="text-xl font-semibold text-yellow-500">
                Expert Stylists
              </h3>
            </div>

            <div>
              <h3 className="text-xl font-semibold text-yellow-500">
                Premium Products
              </h3>
            </div>

            <div>
              <h3 className="text-xl font-semibold text-yellow-500">
                Advanced Technology
              </h3>
            </div>

          </div>

        </div>
      </section>

      {/* FRANCHISE */}
      <section
        id="franchise"
        className="py-24 px-6 bg-zinc-950"
      >
        <div className="max-w-6xl mx-auto">

          <h2 className="text-4xl font-bold text-yellow-500 mb-8">
            Own a My Salounge Franchise
          </h2>

          <p className="text-gray-300 leading-8 text-lg">
            Join one of Gujarat's most premium salon brands. Receive training,
            operational support, branding assistance and proven business
            systems.
          </p>

          <button className="mt-10 bg-yellow-500 text-black px-8 py-4 rounded-full font-bold">
            Request Franchise Information
          </button>

        </div>
      </section>

      {/* CONTACT */}
      <section className="py-24 px-6 text-center">

        <h2 className="text-4xl font-bold text-yellow-500 mb-8">
          Visit Us
        </h2>

        <p className="text-gray-300">
          B-104 Times Square Grand
        </p>

        <p className="text-gray-300">
          Sindhu Bhavan Road, Ahmedabad
        </p>

        <p className="text-yellow-500 mt-4 text-xl">
          +91 74500 74745
        </p>

      </section>

      {/* WHATSAPP BUTTON */}
      <a
        href="https://wa.me/917450074745"
        target="_blank"
        className="fixed bottom-6 right-6 bg-green-500 text-white px-5 py-3 rounded-full font-bold shadow-lg"
      >
        WhatsApp
      </a>

    </main>
  );
}