import React, { useState, useEffect } from "react";
import {
  ChevronRight,
  Download,
  ExternalLink,
} from "lucide-react";

interface TocItem {
  id: string;
  title: string;
  level: number;
}

export function TermsCondition() {
  const [activeSection, setActiveSection] =
    useState<string>("introduction");
  const [tocOpen, setTocOpen] = useState(false);

  // Table of Contents items
  const tocItems: TocItem[] = [
    {
      id: "introduction",
      title: "Introduction",
      level: 1,
    },
    {
      id: "limits-of-use",
      title: "Limits of Use",
      level: 1,
    },
    {
      id: "services-offered",
      title: "Services Offered",
      level: 1,
    },
    {
      id: "disclaimer-warranties",
      title: "Disclaimer of Warranties & Liability",
      level: 1,
    },
    {
      id: "privacy-policy",
      title: "Privacy Policy",
      level: 1,
    },
    {
      id: "termination",
      title: "Termination",
      level: 1,
    },
    {
      id: "intellectual-property",
      title: "Intellectual Property Rights",
      level: 1,
    },
    {
      id: "third-party-links",
      title: "Links to Third-Party",
      level: 1,
    },
    {
      id: "indemnity",
      title: "Indemnity",
      level: 1,
    },
    {
      id: "amendment",
      title: "Amendment",
      level: 1,
    },
    {
      id: "governing-law",
      title: "Governing Laws & Jurisdiction",
      level: 1,
    },
    {
      id: "grievances",
      title: "Grievances",
      level: 1,
    },
  ];

  // Scroll to section and update active state
  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      const offsetTop = element.offsetTop - 100; // Account for sticky nav
      window.scrollTo({
        top: offsetTop,
        behavior: "smooth",
      });
      setActiveSection(sectionId);
    }
  };

  // Update active section on scroll
  useEffect(() => {
    const handleScroll = () => {
      const sections = tocItems
        .map((item) => document.getElementById(item.id))
        .filter(Boolean);
      const scrollPosition = window.scrollY + 150;

      for (let i = sections.length - 1; i >= 0; i--) {
        const section = sections[i];
        if (section && section.offsetTop <= scrollPosition) {
          setActiveSection(section.id);
          break;
        }
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () =>
      window.removeEventListener("scroll", handleScroll);
  }, []);

  // Handle URL fragments
  useEffect(() => {
    const hash = window.location.hash.replace("#", "");
    if (hash && tocItems.find((item) => item.id === hash)) {
      setTimeout(() => scrollToSection(hash), 100);
    }
  }, []);

  const lastUpdated = "2025-01-01";
  const versionHash = "v25.01";

  return (
    <div style={{ backgroundColor: "#FFFFFF" }}>

      {/* Hero Banner */}
      <section
        className="py-16 section-margin-x"
        style={{ backgroundColor: "#FFFFFF" }}
      >
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-100 text-blue-800 rounded-full text-small mb-6">
            <span className="w-2 h-2 bg-blue-600 rounded-full"></span>
            Legal Document
            <span className="ml-2 px-2 py-1 bg-blue-200 text-blue-900 rounded text-xs font-medium">
              {versionHash}
            </span>
          </div>

          <h1 className="text-h1 mb-6">Terms & Conditions</h1>

          <p className="text-body-lg text-muted max-w-2xl mx-auto mb-4">
            This website 'leadershipcentre.in' ('Website') is owned and operated by Kautilya Leadership Centre Pvt. Ltd ('Leadership Centre'), a company incorporated and registered under the laws of India.
          </p>

          <p className="text-small text-muted">
            Last updated:{" "}
            {new Date(lastUpdated).toLocaleDateString("en-US", {
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </p>
        </div>
      </section>

      <div
        className="section-margin-x"
        style={{ backgroundColor: "#FFFFFF" }}
      >
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-12 gap-8">
            {/* Sticky Table of Contents */}
            <div className="col-span-12 lg:col-span-3">
              <div className="sticky top-24">
                <nav
                  aria-label="On-page navigation"
                  className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm"
                >
                  <div className="flex items-center justify-between mb-4 lg:hidden">
                    <h3 className="text-h4">Contents</h3>
                    <button
                      onClick={() => setTocOpen(!tocOpen)}
                      className="p-2 hover:bg-gray-100 rounded-md transition-colors"
                      aria-expanded={tocOpen}
                    >
                      <ChevronRight
                        className={`w-4 h-4 transition-transform ${tocOpen ? "rotate-90" : ""}`}
                      />
                    </button>
                  </div>

                  <div
                    className={`space-y-2 ${tocOpen ? "block" : "hidden lg:block"}`}
                  >
                    {tocItems.map((item) => (
                      <button
                        key={item.id}
                        onClick={() => scrollToSection(item.id)}
                        className={`block w-full text-left p-2 rounded-md text-small transition-all duration-200 hover:bg-gray-100 ${
                          activeSection === item.id
                            ? "bg-blue-50 text-primary border-l-2 border-primary pl-3"
                            : "text-muted hover:text-black"
                        }`}
                      >
                        {item.title}
                      </button>
                    ))}
                  </div>
                </nav>
              </div>
            </div>

            {/* Main Content */}
            <div className="col-span-12 lg:col-span-9">
              <div
                className="max-w-3xl prose prose-lg"
                style={{ maxWidth: "720px" }}
              >
                {/* Introduction */}
                <section
                  id="introduction"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("introduction")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      1. Introduction
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body-lg">
                      Please read carefully these terms of use ('Terms of Use') for using the Website. 
                      In case, you ('User') do not agree to any of the terms or conditions, made by 
                      Kautilya Leadership Centre for the Website, kindly refrain from using the Website.
                    </p>
                    <p className="text-body">
                      By continuing to use the Website, User shall be deemed to have agreed that User 
                      is of legal age to enter into a binding contract, have read, consented, understood 
                      and is bound to the Terms of Use hereunder.
                    </p>
                    
                    <h3 className="text-h3 mb-4 mt-8">1.1 Parties</h3>
                    <p className="text-body">
                      The parties to the Terms of Use are Users of the Website and Kautilya Leadership Centre. 
                      User and Kautilya Leadership Centre hereinafter may be individually referred to as 
                      'Party' and collectively as 'Parties'.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">1.2 Applicability of Terms of Use</h3>
                    <p className="text-body">
                      The Terms of Use govern the Website's usage and states the rights and obligations 
                      of the Parties arising thereof.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">1.3 Ownership of the Website and the content</h3>
                    <p className="text-body">
                      The Website is owned and controlled by Kautilya Leadership Centre subject to provisions 
                      hereunder. All web pages, any content such as textual, visual or aural (including modules, 
                      videos, including calls to action, text placement, images and other information) available 
                      online and or offline shall be property of Kautilya Leadership Centre.
                    </p>

                    <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
                      <p className="text-body text-yellow-800">
                        <strong>Important:</strong> These terms create a legally binding agreement 
                        between you and Kautilya Leadership Centre. Please ensure you understand 
                        your rights and obligations.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Limits of Use */}
                <section
                  id="limits-of-use"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("limits-of-use")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      2. Limits of Use
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>2.1</strong> The User acknowledges that the User shall use the Website only for personal, non-commercial use.
                    </p>
                    
                    <p className="text-body">
                      <strong>2.2</strong> The User shall use the website only for lawful purposes. User shall not use the website: in breach of any national or international law or regulation; in a fraudulent and unlawful manner; and to transmit, send or upload any material or data that contains any viruses, trojan horses, malware, worms, time-bombs, keystroke loggers, spyware, adware or any other harmful programs or computer code designed to adversely affect the operation of this website or any computer hardware or software.
                    </p>

                    <p className="text-body">
                      <strong>2.3</strong> The User shall not: copy, reproduce, duplicate or re-sell any part of the Website; charge others for the usage of the Website; and use or re-use any part of the Website in any way that may be illegally detrimental to the business and autonomy of Kautilya Leadership Centre, unless with the explicit written consent of the Kautilya Leadership Centre.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">Access to minors</h3>
                    <p className="text-body">
                      <strong>2.4.1</strong> For the purpose of this Terms of Use and the Privacy and Cookie Policy, a minor shall mean a natural person below the age of 18 (eighteen).
                    </p>
                    
                    <p className="text-body">
                      <strong>2.4.2</strong> The Website may be accessed by minors for educational purposes only.
                    </p>
                    
                    <p className="text-body">
                      <strong>2.4.3</strong> The parent or guardian of the minor shall provide their own details while creating an account with Kautilya Leadership Centre.
                    </p>
                    
                    <p className="text-body">
                      <strong>2.4.4</strong> Kautilya Leadership Centre does not knowingly collect any data from minors. Upon knowledge that it holds Personal Data (Privacy and Cookie Policy) of a minor, Kautilya Leadership Centre shall erase the same. Parents or Guardians who believe that Kautilya Leadership Centre may have collected personal information of a minor shall inform Kautilya Leadership Centre.
                    </p>

                    <div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-red-800">
                        <strong>Warning:</strong> Violation of these terms may result in immediate 
                        termination of your access to our services and potential legal action.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Services Offered */}
                <section
                  id="services-offered"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("services-offered")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      3. Services Offered
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>3.1</strong> This Website is an information gateway to the learning programs ('Course') that Kautilya Leadership Centre extends to eligible Users ('Services'). Apart from providing Services, the Website also hosts the platform for the online payment for subscribing to or buying Course(s) from the Kautilya Leadership Centre for the User(s) who may subscribe for the Services offered by Kautilya Leadership Centre ('Subscriber').
                    </p>
                    
                    <p className="text-body">
                      <strong>3.2</strong> The User(s) or the Subscriber(s) may interact with the agents or employees of Kautilya Leadership Centre using the 'Help' or 'Contact Us' sections on the Website. User(s) are solely responsible for their interactions with the consultants of the Website and any content that the User may share with them.
                    </p>

                    <p className="text-body">
                      <strong>3.3</strong> Kautilya Leadership Centre is not liable for any damage or harm resulting from any posts by or interactions between Users.
                    </p>

                    <p className="text-body">
                      <strong>3.4</strong> Kautilya Leadership Centre reserves the right, but has no obligation, to monitor interactions between the Website (including its consultants) and the Users.
                    </p>

                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-blue-800">
                        <strong>Note:</strong> All interactions and communications through our platform 
                        are subject to monitoring for quality assurance and legal compliance purposes.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Disclaimer of Warranties & Liability */}
                <section
                  id="disclaimer-warranties"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("disclaimer-warranties")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      4. Disclaimer of Warranties and Liability
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>4.1</strong> While Kautilya Leadership Centre has endeavoured to ensure that all the information on the Website is correct, Kautilya Leadership Centre neither warrants nor makes any representations regarding the quality, accuracy or completeness of any data, information, product, or website (whether any third-party website or this Website) or Service.
                    </p>
                    
                    <p className="text-body">
                      <strong>4.2</strong> Kautilya Leadership Centre and its representatives, directors, employees, agents and affiliates shall not be liable for any loss:
                    </p>

                    <ul className="list-disc pl-6 space-y-2 text-body ml-4">
                      <li>(i) of revenue, income, any direct, special, indirect or consequential loss or damage incurred by the User in connection with the Website; and</li>
                      <li>(ii) in connection with the use, inability to use, or results of the use of the Website, any webpage or website linked to it and any materials posted on it, including, loss of income or revenue; loss of business; loss of profits or contracts; loss of anticipated savings; loss of data; loss of goodwill; wasted management or office time; and</li>
                      <li>(iii) of any other kind, however arising and whether caused by tort (including negligence), breach of contract or otherwise, even if foreseeable.</li>
                    </ul>

                    <p className="text-body">
                      <strong>4.3</strong> Kautilya Leadership Centre shall not be liable for any possible hacks (including the database), bugs, malware or faults in our system which may affect the Users, their computer hardware or software in any possible way.
                    </p>

                    <p className="text-body">
                      <strong>4.4</strong> The User agrees to be responsible for their own use of the Website and will use or access this Website in compliance with all applicable laws, regulations and rules of India including, but not limited to, the Information Technology Act, 2000 and the Copyright Act, 1957 and the rules notified thereunder.
                    </p>

                    <p className="text-body">
                      <strong>4.5</strong> The User or Subscriber shall take the responsibility to obtain valid permissions or licenses required on his or her respective devices to be able to utilize the course(s). Kautilya Leadership Centre does not take any responsibility for any act of the User or Subscriber in breach of any such licenses.
                    </p>

                    <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-yellow-800">
                        <strong>Important Legal Notice:</strong> The information provided on this website 
                        is for educational purposes only and does not constitute professional advice. 
                        KLC makes no warranties about the completeness, reliability, or accuracy of this information.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Privacy Policy */}
                <section
                  id="privacy-policy"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("privacy-policy")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      5. Privacy Policy
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>5.1</strong> The User hereby consents, expresses and agrees that it has read and fully understands the Privacy and Cookie Policy of Kautilya Leadership Centre in respect of the Website. User further consents that the terms of the Privacy and Cookie Policy are acceptable to the User.
                    </p>
                    
                    <p className="text-body">
                      <strong>5.2</strong> Kautilya Leadership Centre reserves the right to update, change or modify the Privacy Policy at any time. The Privacy Policy shall come to effect from the date of such update, change or modification.
                    </p>

                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-blue-800">
                        <strong>Your Privacy Matters:</strong> We are committed to protecting your personal 
                        information. Please review our comprehensive Privacy Policy for detailed information 
                        about how we collect, use, and protect your data.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Termination */}
                <section
                  id="termination"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("termination")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      6. Termination
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>6.1</strong> Kautilya Leadership Centre retains the right to terminate the User's access to the Website at any time at its sole and absolute discretion, if the User's conduct is in anyway detrimental to the business and or autonomy of Kautilya Leadership Centre.
                    </p>
                    
                    <p className="text-body">
                      <strong>6.2</strong> Kautilya Leadership Centre reserves the right to terminate or discontinue the Website at its sole discretion. Such cessation of operations, whether permanent or temporary, shall be notified to the User in such manner as prescribed by law, if and when such requirement to notify the User is necessitated by law.
                    </p>

                    <div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-red-800">
                        <strong>Important:</strong> We reserve the right to suspend or terminate access 
                        to our services without prior notice for violations of these terms or conduct 
                        that harms our platform or other users.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Intellectual Property Rights */}
                <section
                  id="intellectual-property"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("intellectual-property")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      7. Intellectual Property Rights
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>7.1</strong> Unless otherwise indicated or anything contained to the contrary or any proprietary material owned by a third party and so expressly mentioned, Kautilya Leadership Centre owns all Intellectual Property Rights to and into the trademarks 'Kautilya Leadership Centre Pvt. Ltd' and 'leadershipcentre.in', and the Website, including, without limitation, any and all rights, title and interest in and to copyright, related rights, logos, patents, utility models, designs, know-how, trade secrets and inventions (including any patent/s pending), goodwill, source code, meta tags, databases, text, content, graphics, icons, and hyperlinks. User acknowledges and agrees that it shall not use, reproduce or distribute any content from the Website belonging to Kautilya Leadership Centre without obtaining prior written consent.
                    </p>

                    <p className="text-body">
                      <strong>7.2</strong> Notwithstanding the foregoing, it is expressly clarified that User will be solely responsible for any content provided or uploaded by the User when accessing the Website, including any text, data, information, images, photographs, music, sound, video or any other material which may be accessible through the User's post, or any other content that the User may have uploaded, transmitted or stored when accessing the Website.
                    </p>

                    <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
                      <p className="text-body text-blue-800">
                        <strong>Copyright Notice:</strong> © 2025 Kautilya Leadership Centre. All rights reserved. 
                        This website and its contents are protected by copyright, trademark, and other intellectual property laws.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Links to Third-Party */}
                <section
                  id="third-party-links"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("third-party-links")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      8. Links to Third-Party
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>8.1</strong> Any links to third-party websites are provided solely as a convenience to the User, Kautilya Leadership Centre does not endorse the contents on any such third-party websites. Kautilya Leadership Centre is not responsible for the content of, or any damage that may result from User's access to or reliance on such third-party websites and shall be at the sole risk of the User.
                    </p>

                    <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-yellow-800">
                        <strong>Caution:</strong> We are not responsible for the content, privacy policies, 
                        or practices of external sites. Please review their terms and policies before use.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Indemnity */}
                <section
                  id="indemnity"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("indemnity")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      9. Indemnity
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>9.1</strong> Kautilya Leadership Centre retains the right to take legal course against the User, if the User's act is illegal and or detrimental to the business and or autonomy of Kautilya Leadership Centre or the Website.
                    </p>
                    
                    <p className="text-body">
                      <strong>9.2</strong> The User agrees to indemnify Kautilya Leadership Centre, its affiliates, officers, directors, employees and agents from and against any and all third-party claims, liabilities, damages, losses (direct and indirect) or expenses, including reasonable legal costs, arising out of or in any way connected with the usage of the Website and/or any of its contents, the violation of the terms of these Terms of Use, and violation of any third-party rights.
                    </p>

                    <div className="bg-red-50 border-l-4 border-red-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-red-800">
                        <strong>Legal Protection:</strong> You agree to protect and hold harmless 
                        Kautilya Leadership Centre from any claims arising from your use of our services 
                        or violation of these terms.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Amendment */}
                <section
                  id="amendment"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("amendment")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      10. Amendment
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>10.1</strong> Kautilya Leadership Centre reserves the right to modify the Terms of Use at any time by posting any modifications on this Website, without advance notice to the User.
                    </p>
                    
                    <p className="text-body">
                      <strong>10.2</strong> Any modification to the Terms of Use will be effective immediately after it is posted on this Website. Use of the Website following the posting of any such modification will constitute the User's acceptance of any such modification.
                    </p>

                    <p className="text-body">
                      <strong>10.3</strong> Notwithstanding the above, such modification shall be notified to the User in such manner as prescribed by law, if and when such requirement to notify the User is necessitated by law.
                    </p>

                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-blue-800">
                        <strong>Your Responsibility:</strong> It is your responsibility to periodically 
                        review these terms for changes. Continued use of our website after modifications 
                        constitutes acceptance of the updated terms.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Governing Laws & Jurisdiction */}
                <section
                  id="governing-law"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("governing-law")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      11. Governing Laws and Jurisdiction
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>11.1</strong> These Terms of Use shall be governed and construed in accordance with the laws of the Republic of India. Any dispute regarding this Agreement shall be subject to the exclusive jurisdiction of the courts in Mumbai, Maharashtra.
                    </p>

                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
                      <p className="text-body">
                        <strong>Exclusive Jurisdiction:</strong> Mumbai, Maharashtra, India
                      </p>
                      <p className="text-body mt-2">
                        Any disputes arising from these terms or your use of our services shall be 
                        subject to the exclusive jurisdiction of the courts in Mumbai, Maharashtra, India.
                      </p>
                    </div>

                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-blue-800">
                        <strong>Legal Framework:</strong> These terms are governed by Indian law and 
                        any legal proceedings must be conducted in Mumbai, Maharashtra courts.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Grievances */}
                <section
                  id="grievances"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("grievances")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      12. Grievances
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <p className="text-body">
                      <strong>12.1</strong> For any queries or grievances regarding Terms of Use, the courses offered on the Website and the subsequent Privacy Policy etc. the user may contact Ms. Diju Shali at connect@leadershipcentre.in
                    </p>

                    <div className="bg-green-50 border border-green-200 rounded-lg p-6">
                      <h3 className="text-h3 mb-4 text-green-800">Contact Information</h3>
                      <div className="space-y-2">
                        <p className="text-body text-green-800">
                          <strong>Grievance Officer:</strong> Ms. Diju Shali
                        </p>
                        <p className="text-body text-green-800">
                          <strong>Email:</strong> <a href="mailto:connect@leadershipcentre.in" className="underline hover:text-green-900">connect@leadershipcentre.in</a>
                        </p>
                        <p className="text-body text-green-800">
                          <strong>Organization:</strong> Kautilya Leadership Centre Pvt. Ltd
                        </p>
                      </div>
                    </div>

                    <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg mt-6">
                      <p className="text-body text-blue-800">
                        <strong>Support Commitment:</strong> We are committed to addressing your concerns 
                        promptly and fairly. Please provide detailed information about your query or grievance 
                        to help us assist you better.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Important Notice */}
                <section className="mb-12">
                  <div className="bg-gradient-to-r from-blue-50 to-yellow-50 border-2 border-primary rounded-lg p-8">
                    <h3 className="text-h3 mb-4 text-primary">
                      Legal Compliance & Updates
                    </h3>
                    <p className="text-body mb-4">
                      These Terms of Use are effective as of the last updated date mentioned above. 
                      By using our website, you acknowledge that you have read, understood, and agree 
                      to be bound by these terms.
                    </p>
                    <p className="text-body text-muted">
                      For the most current version of our Terms of Use, please visit this page regularly. 
                      If you have any questions about these terms, please contact us using the information provided above.
                    </p>
                  </div>
                </section>

                {/* Download Section */}
                <section className="mb-12">
                  <div className="text-center bg-gray-50 border border-gray-200 rounded-lg p-8">
                    <h3 className="text-h3 mb-4">Download Terms & Conditions</h3>
                    <p className="text-body text-muted mb-6">
                      Save a copy of these terms for your records
                    </p>
                    <button
                      onClick={() => window.print()}
                      className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                    >
                      <Download className="w-4 h-4" />
                      Download PDF
                    </button>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}