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">
            Terms & Conditions
          </h1>
          <p className="text-xl text-amber-800 max-w-3xl mx-auto">
            Welcome to Kulcha King! By using our website, you agree to these
            terms. Please read them carefully.
          </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">
                These are the terms and conditions that you need to know before
                visiting Kulcha King’s website. Using our website will
                automatically be deemed as the user's agreement to our terms and
                conditions. The terms and conditions include the sections in the{" "}
                <a
                  href="/privacy-policy"
                  className="font-semibold text-amber-700 hover:text-amber-900 underline transition"
                >
                  Privacy Policy
                </a>{" "}
                and the{" "}
                <a
                  href="/cookie-policy"
                  className="font-semibold text-amber-700 hover:text-amber-900 underline transition"
                >
                  Cookie Policy
                </a>
                . So, if a user visits our website and uses it, it will be
                considered their acceptance of Kulcha King’s terms and
                conditions.
              </p>
            </section>

            {/* Order and Menu */}
            <section className="mb-12">
              <h2 className="text-3xl font-bold text-amber-700 mb-6 flex items-center">
                Information Related to Order and Menu
              </h2>
              <div className="bg-gray-50 p-7 rounded-xl border-l-4 border-amber-500">
                <p className="text-lg text-gray-700 leading-relaxed">
                  All items on our menu, their pricing, nutritional values, and
                  information, or any special offers displayed on Kulcha King’s
                  website, shall be taken as general guidance only. All efforts
                  are made to ensure accuracy and transparency. However, the
                  menu items, their prices, and availability are subject to
                  change without prior notice. You are requested to verify the
                  nutritional information, any allergies, or pricing before
                  ordering and making payment on the website.
                </p>
              </div>
            </section>

            {/* Use of Content */}
            <section className="mb-12">
              <h2 className="text-3xl font-bold text-amber-700 mb-6 flex items-center">
                Use of Website Content
              </h2>
              <div className="bg-gray-50 p-7 rounded-xl border-l-4 border-orange-500">
                <p className="text-lg text-gray-700 leading-relaxed">
                  You are allowed to use any of the information displayed on the
                  website, which includes menu descriptions, photographs, or any
                  other content, for your personal or enjoyment purposes only.
                  Users can’t use any of the website content for commercial
                  purposes, which means that they cannot republish or sell any
                  of the information or photos without obtaining the written
                  consent of Kulcha King.
                </p>
              </div>
            </section>

            {/* Disclaimer */}
            <section className="mb-12">
              <h2 className="text-3xl font-bold text-amber-700 mb-6 flex items-center">
                Disclaimer of Liability
              </h2>
              <div className="bg-amber-50 p-7 rounded-xl border-l-4 border-amber-600">
                <p className="text-lg text-gray-700 leading-relaxed">
                  Kulcha King will not be responsible for any losses, damages,
                  or expenses (no matter direct or indirect) arising from or
                  related to your usage of our website and services. This
                  includes, but is not confined to, any delays in delivering
                  your food order, website outages, or any mistakes in the
                  ordered food items.
                </p>
              </div>
            </section>

            {/* Copyright */}
            <section className="mb-12">
              <h2 className="text-3xl font-bold text-amber-700 mb-6 flex items-center">
                Copyright
              </h2>
              <div className="bg-gray-50 p-7 rounded-xl border-l-4 border-orange-600">
                <p className="text-lg text-gray-700 leading-relaxed">
                  We, at Kulcha King, take complete ownership and copyright of
                  the innovative design, graphics, menu, and other original
                  content on the website. Users are allowed to download or
                  print, or take a screenshot of the order confirmation or
                  payment receipt for their personal use. However, users are not
                  allowed to use Kulcha King's images, logos, or other written
                  content in their name.
                </p>
              </div>
            </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 choosing Kulcha King — where every bite tells a
              story!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default page;