import React from "react";

const page: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-b from-amber-50 to-orange-100 py-16 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto">
        {/* Header Section */}
        <div className="text-center mb-12">
          <h1 className="text-5xl md:text-6xl font-extrabold text-amber-700 mb-4">
            Cookie Policy
          </h1>
          <p className="text-xl text-amber-800 max-w-3xl mx-auto">
            At Kulcha King, we use cookies to make your experience deliciously
            smooth!
          </p>
          <div className="mt-8 flex justify-center">
            <div className="w-32 h-1 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full"></div>
          </div>
        </div>

        {/* Main Content Card */}
        <div className="bg-white/95 backdrop-blur-sm shadow-2xl rounded-3xl overflow-hidden border border-amber-200">
          <div className="p-8 md:p-12 lg:p-16">
            {/* Introduction */}
            <section className="mb-12 bg-gradient-to-r from-amber-50 to-orange-50 p-8 rounded-2xl border border-amber-200">
              <p className="text-lg text-gray-800 leading-relaxed">
                Kulcha King uses small data files known as cookies to
                differentiate you from other users on the website. The
                acceptance of cookies helps users to have a smoother, more
                efficient website experience. By accepting cookies, you can
                scroll the menus and access the online ordering platform more
                smoothly.
              </p>
              <p className="text-lg text-gray-800 leading-relaxed mt-6">
                The use of cookies helps us to further improve the functionality
                of our website and services. If a user visits our website and
                browses, it will be deemed that he/she agree to our use of
                cookies.
              </p>
            </section>

            {/* Cookies We Use */}
            <section className="mb-12">
              <h2 className="text-3xl font-bold text-amber-700 mb-8 flex items-center justify-center">
                The Cookies We Use
              </h2>
              <p className="text-lg text-gray-700 text-center mb-10">
                We utilize the following categories of cookies to enhance users’
                online ordering experience:
              </p>

              {/* Strictly Necessary */}
              <div className="mb-10 bg-gray-50 p-8 rounded-2xl border-l-8 border-amber-600 shadow-md">
                <h3 className="text-2xl font-bold text-amber-700 mb-4">
                  1. Strictly Necessary Cookies
                </h3>
                <p className="text-lg text-gray-700 leading-relaxed">
                  These cookies are essential for the basic operation of our
                  food ordering website, Kulcha King. These cookies enable you
                  to:
                </p>
                <ul className="mt-4 space-y-3 text-lg text-gray-700">
                  <li className="flex items-start">
                    <span className="mr-3 text-amber-600 font-bold">•</span>
                    Safely log in to your secure customer account.
                  </li>
                  <li className="flex items-start">
                    <span className="mr-3 text-amber-600 font-bold">•</span>
                    Use the shopping cart to hold your selected food items.
                  </li>
                  <li className="flex items-start">
                    <span className="mr-3 text-amber-600 font-bold">•</span>
                    Process payments and utilize billing services during
                    checkout.
                  </li>
                </ul>
              </div>

              {/* Performance/Analytical */}
              <div className="mb-10 bg-gray-50 p-8 rounded-2xl border-l-8 border-orange-500 shadow-md">
                <h3 className="text-2xl font-bold text-amber-700 mb-4">
                  2. Performance/Analytical Cookies
                </h3>
                <p className="text-lg text-gray-700 leading-relaxed">
                  These cookies allow us to count and recognize the number of
                  visitors and, more importantly, discover how customers are
                  using our food ordering platform. This information by the
                  user, helps us to know about the popular dishes in the menu,
                  identify any loopholes in the ordering process, and make
                  further improvisations, ensuring that our website works at a
                  speedy pace with complete efficacy.
                </p>
              </div>

              {/* Functionality */}
              <div className="mb-10 bg-gray-50 p-8 rounded-2xl border-l-8 border-amber-500 shadow-md">
                <h3 className="text-2xl font-bold text-amber-700 mb-4">
                  3. Functionality Cookies
                </h3>
                <p className="text-lg text-gray-700 leading-relaxed">
                  These cookies are used to recognize those users who take a
                  turn and return to our website. They allow us to:
                </p>
                <ul className="mt-4 space-y-3 text-lg text-gray-700">
                  <li className="flex items-start">
                    <span className="mr-3 text-amber-600 font-bold">•</span>
                    Personalize the content for the user (e.g., highlighting
                    favorite food in the menu).
                  </li>
                  <li className="flex items-start">
                    <span className="mr-3 text-amber-600 font-bold">•</span>
                    Greet them by name when the user logs in
                  </li>
                  <li className="flex items-start">
                    <span className="mr-3 text-amber-600 font-bold">•</span>
                    Remember the users' choices (like their past orders)
                  </li>
                </ul>
              </div>

              {/* Targeting */}
              <div className="mb-10 bg-gray-50 p-8 rounded-2xl border-l-8 border-orange-600 shadow-md">
                <h3 className="text-2xl font-bold text-amber-700 mb-4">
                  4. Targeting Cookies
                </h3>
                <p className="text-lg text-gray-700 leading-relaxed">
                  These cookies record users’ activity on our website, such as
                  the pages they visited and the special offer links they
                  followed. We use this information to make our website more
                  efficient. Also, it helps us display those advertisements that
                  cater to the user’s interests. We may also share this
                  information with third parties such as advertising networks
                  and the companies that provide website traffic analysis.
                </p>
              </div>
            </section>

            {/* Managing Preferences */}
            <section className="mb-12 bg-gradient-to-r from-amber-50 to-orange-50 p-8 rounded-2xl border border-amber-300">
              <h2 className="text-3xl font-bold text-amber-700 mb-6 flex items-center">
                Managing Your Cookie Preferences
              </h2>
              <p className="text-lg text-gray-800 leading-relaxed">
                Our usage of cookies doesn’t involve collecting any personal
                information, such as your device or internet browser. Most of
                the web browsers from today’s world (Like Firefox, Safari, and
                Chrome) provide an option where users can disable cookies
                permanently.
              </p>
              <p className="text-lg font-semibold text-amber-800 leading-relaxed mt-6 bg-amber-100 p-5 rounded-xl border-l-4 border-amber-600">
                Well, if you select “Disable Cookies,” you will not be able to
                enjoy some of our personalized services, such as a history of
                your orders or a quick checkout as they might not be visible to
                you!
              </p>
            </section>
          </div>

          {/* Footer */}
          <div className="bg-gradient-to-r from-amber-600 to-orange-700 text-white py-6 px-12 text-center">
            <p className="text-lg font-medium">
              Last updated: December 13, 2025
            </p>
            <p className="mt-3 text-amber-100">
              Thank you for trusting Kulcha King — enjoy your meal with peace of
              mind!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default page;