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

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

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

  // Table of Contents items
  const tocItems: TocItem[] = [
    {
      id: "acceptance",
      title: "Acceptance of Terms",
      level: 1,
    },
    {
      id: "eligibility",
      title: "Eligibility & Jurisdiction",
      level: 1,
    },
    { id: "use-of-site", title: "Use of Site", level: 1 },
    {
      id: "purchases-refunds",
      title: "Purchases & Refunds",
      level: 1,
    },
    {
      id: "intellectual-property",
      title: "Intellectual Property",
      level: 1,
    },
    {
      id: "disclaimers",
      title: "Disclaimers & Limitations",
      level: 1,
    },
    { id: "governing-law", title: "Governing Law", level: 1 },
    {
      id: "modifications",
      title: "Terms Modifications",
      level: 1,
    },
    {
      id: "contact-info",
      title: "Contact Information",
      level: 1,
    },
    { id: "download-pdf", title: "Download PDF", 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" }}>
      <Navigation />

      {/* 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">
            These terms govern your use of the Kautilya
            Leadership Centre website and services. Please read
            carefully before using our platform.
          </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" }}
              >
                {/* Acceptance of Terms */}
                <section
                  id="acceptance"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("acceptance")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Acceptance of Terms
                      <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">
                      By accessing and using the Kautilya
                      Leadership Centre (KLC) website and
                      services, you accept and agree to be bound
                      by the terms and provision of this
                      agreement.
                    </p>
                    <p className="text-body">
                      If you do not agree to abide by the above,
                      please do not use this service. Your
                      continued use of our platform constitutes
                      acceptance of these terms as they may be
                      modified from time to time.
                    </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 KLC. Please ensure you
                        understand your rights and obligations.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Eligibility & Jurisdiction */}
                <section
                  id="eligibility"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("eligibility")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Eligibility & Jurisdiction
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <h3 className="text-h3 mb-4">
                      Age Requirements
                    </h3>
                    <p className="text-body">
                      You must be at least 18 years of age to
                      use our services. If you are between 13
                      and 18 years old, you may only use our
                      services with the involvement and consent
                      of a parent or guardian.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Geographic Scope
                    </h3>
                    <p className="text-body">
                      Our services are primarily intended for
                      users in India and regions where our
                      educational content and leadership
                      development programs are legally
                      permissible and culturally appropriate.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Corporate Access
                    </h3>
                    <p className="text-body">
                      Organizations and corporate entities
                      accessing our services must ensure they
                      have proper authorization to enter into
                      these terms on behalf of their
                      organization.
                    </p>
                  </div>
                </section>

                {/* Use of Site */}
                <section
                  id="use-of-site"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("use-of-site")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Use of Site
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <h3 className="text-h3 mb-4">
                      Permitted Uses
                    </h3>
                    <ul className="list-disc pl-6 space-y-2 text-body">
                      <li>
                        Accessing educational content and
                        leadership development materials
                      </li>
                      <li>
                        Participating in webinars, courses, and
                        training programs
                      </li>
                      <li>
                        Using our virtual learning facility for
                        authorized purposes
                      </li>
                      <li>
                        Downloading materials explicitly marked
                        as downloadable
                      </li>
                      <li>
                        Sharing content through our designated
                        social sharing features
                      </li>
                    </ul>

                    <h3 className="text-h3 mb-4 mt-8">
                      Prohibited Activities
                    </h3>
                    <ul className="list-disc pl-6 space-y-2 text-body">
                      <li>
                        Unauthorized copying, distribution, or
                        modification of our content
                      </li>
                      <li>
                        Using automated systems to access or
                        scrape our website
                      </li>
                      <li>
                        Attempting to gain unauthorized access
                        to our systems
                      </li>
                      <li>
                        Sharing login credentials or accessing
                        accounts not belonging to you
                      </li>
                      <li>
                        Using our services for any illegal or
                        harmful purposes
                      </li>
                      <li>
                        Disrupting the normal operation of our
                        platform
                      </li>
                    </ul>

                    <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>

                {/* Purchases & Refunds */}
                <section
                  id="purchases-refunds"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("purchases-refunds")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Purchases & Refunds
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <h3 className="text-h3 mb-4">
                      Payment Terms
                    </h3>
                    <p className="text-body">
                      All payments must be made in full before
                      accessing paid content or services. We
                      accept major credit cards, debit cards,
                      and approved corporate payment methods.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      GST & Taxes
                    </h3>
                    <p className="text-body">
                      All prices are inclusive of applicable
                      Goods and Services Tax (GST) as required
                      by Indian law. International customers may
                      be subject to additional taxes in their
                      jurisdiction.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Refund Policy
                    </h3>
                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
                      <h4 className="text-body font-semibold mb-3">
                        Standard Refund Terms:
                      </h4>
                      <ul className="list-disc pl-6 space-y-2 text-body">
                        <li>
                          <strong>Online Courses:</strong> 7-day
                          refund period from date of purchase
                          (before 25% completion)
                        </li>
                        <li>
                          <strong>Live Webinars:</strong> Full
                          refund if cancelled 24 hours before
                          start time
                        </li>
                        <li>
                          <strong>Corporate Programs:</strong>{" "}
                          Refund terms specified in individual
                          agreements
                        </li>
                        <li>
                          <strong>Digital Materials:</strong> No
                          refunds after download or access
                        </li>
                      </ul>

                      <h4 className="text-body font-semibold mb-3 mt-6">
                        Refund Process:
                      </h4>
                      <p className="text-body">
                        To request a refund, contact our support
                        team with your order details. Approved
                        refunds will be processed within 7-10
                        business days to the original payment
                        method.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Intellectual Property */}
                <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">
                      Intellectual Property
                      <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">
                      All content on this website, including but
                      not limited to text, graphics, logos,
                      images, audio clips, video content, and
                      software, is the property of KLC or its
                      content suppliers.
                    </p>

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

                    <h3 className="text-h3 mb-4 mt-8">
                      Limited License
                    </h3>
                    <p className="text-body">
                      We grant you a limited, non-exclusive,
                      non-transferable license to access and use
                      our content for personal or internal
                      business purposes in accordance with these
                      terms.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Trademark Information
                    </h3>
                    <p className="text-body">
                      "Kautilya Leadership Centre" and all
                      related logos are trademarks of KLC. You
                      may not use our trademarks without prior
                      written permission.
                    </p>
                  </div>
                </section>

                {/* Disclaimers & Limitations */}
                <section
                  id="disclaimers"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("disclaimers")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Disclaimers & Limitations
                      <ExternalLink className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                    </span>
                  </h2>
                  <div className="space-y-4">
                    <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
                      <h3 className="text-h3 mb-4 text-yellow-800">
                        Important Legal Notice
                      </h3>
                      <p className="text-body text-yellow-800">
                        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>

                    <h3 className="text-h3 mb-4 mt-8">
                      Limitation of Liability
                    </h3>
                    <p className="text-body">
                      In no event shall KLC be liable for any
                      direct, indirect, incidental, special, or
                      consequential damages resulting from your
                      use of our website or services, even if we
                      have been advised of the possibility of
                      such damages.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Service Availability
                    </h3>
                    <p className="text-body">
                      We strive to maintain continuous service
                      availability but do not guarantee
                      uninterrupted access. Scheduled
                      maintenance and unforeseen technical
                      issues may temporarily affect service
                      availability.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Third-Party Links
                    </h3>
                    <p className="text-body">
                      Our website may contain links to
                      third-party websites. We are not
                      responsible for the content, privacy
                      policies, or practices of these external
                      sites.
                    </p>
                  </div>
                </section>

                {/* Governing Law */}
                <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">
                      Governing Law
                      <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">
                      These terms and conditions are governed by
                      and construed in accordance with the laws
                      of India.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Jurisdiction
                    </h3>
                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
                      <p className="text-body">
                        <strong>Exclusive Jurisdiction:</strong>{" "}
                        Chennai, Tamil Nadu, 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 Chennai, Tamil Nadu,
                        India.
                      </p>
                    </div>

                    <h3 className="text-h3 mb-4 mt-8">
                      Dispute Resolution
                    </h3>
                    <p className="text-body">
                      We encourage resolving disputes through
                      direct communication. If formal legal
                      action becomes necessary, both parties
                      agree to first attempt mediation before
                      pursuing litigation.
                    </p>
                  </div>
                </section>

                {/* Terms Modifications */}
                <section
                  id="modifications"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("modifications")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Terms Modifications
                      <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">
                      KLC reserves the right to modify these
                      terms at any time. Changes will be
                      effective immediately upon posting on this
                      website.
                    </p>

                    <h3 className="text-h3 mb-4 mt-8">
                      Notification Process
                    </h3>
                    <ul className="list-disc pl-6 space-y-2 text-body">
                      <li>
                        Material changes will be highlighted at
                        the top of this page
                      </li>
                      <li>
                        Registered users will receive email
                        notifications of significant updates
                      </li>
                      <li>
                        The "Last Updated" date will reflect the
                        most recent modifications
                      </li>
                      <li>
                        Version history is available upon
                        request
                      </li>
                    </ul>

                    <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. Continued use of our
                        services after changes constitutes
                        acceptance of the modified terms.
                      </p>
                    </div>
                  </div>
                </section>

                {/* Contact Information */}
                <section
                  id="contact-info"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("contact-info")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Contact Information
                      <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">
                      For questions about these terms or to
                      report violations, please contact our
                      legal team:
                    </p>

                    <div className="bg-white border border-gray-200 rounded-lg p-6 space-y-4">
                      <div>
                        <h3 className="text-h4 mb-2">
                          Legal Inquiries
                        </h3>
                        <p className="text-body">
                          <strong>Email:</strong>{" "}
                          legal@klc.edu.in
                          <br />
                          <strong>Response Time:</strong> 3-5
                          business days
                        </p>
                      </div>

                      <div>
                        <h3 className="text-h4 mb-2">
                          Registered Office
                        </h3>
                        <p className="text-body">
                          Kautilya Leadership Centre
                          <br />
                          123 Leadership Avenue
                          <br />
                          Chennai, Tamil Nadu 600001
                          <br />
                          India
                        </p>
                      </div>

                      <div>
                        <h3 className="text-h4 mb-2">
                          General Inquiries
                        </h3>
                        <p className="text-body">
                          <strong>Phone:</strong>{" "}
                          +91-44-1234-5678
                          <br />
                          <strong>Email:</strong>{" "}
                          info@klc.edu.in
                        </p>
                      </div>
                    </div>
                  </div>
                </section>

                {/* Download PDF */}
                <section
                  id="download-pdf"
                  className="mb-12 scroll-mt-24"
                >
                  <h2
                    className="text-h2 mb-6 group cursor-pointer"
                    onClick={() =>
                      scrollToSection("download-pdf")
                    }
                  >
                    <span className="inline-flex items-center gap-2">
                      Download PDF
                      <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">
                      Download a timestamped PDF version of
                      these terms for your records.
                    </p>

                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="text-h4 mb-2">
                            Terms & Conditions PDF
                          </h3>
                          <p className="text-small text-muted">
                            Version {versionHash} • Last updated{" "}
                            {new Date(
                              lastUpdated,
                            ).toLocaleDateString()}{" "}
                            • 156 KB
                          </p>
                        </div>
                        <button
                          onClick={() => {
                            // In a real implementation, this would download the actual PDF
                            alert(
                              "PDF download would start here",
                            );
                          }}
                          className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                          aria-label="Download Terms & Conditions PDF (156 KB)"
                        >
                          <Download className="w-4 h-4" />
                          Download PDF
                        </button>
                      </div>
                    </div>

                    <p className="text-small text-muted">
                      The PDF version includes a digital
                      signature and timestamp for authenticity
                      verification.
                    </p>
                  </div>
                </section>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />

      {/* Print Styles */}
      <style>{`
        @media print {
          .sticky { position: static !important; }
          nav[aria-label="On-page navigation"] { display: none !important; }
          .bg-gradient-to-r { background: white !important; }
          .text-white { color: black !important; }
          .bg-blue-50, .bg-yellow-50, .bg-red-50, .bg-gray-50 {
            background: white !important;
            border: 1px solid #ccc !important;
          }
          .shadow-sm, .shadow-lg { box-shadow: none !important; }
          h1, h2, h3, h4 { break-after: avoid; }
          .space-y-4 > * { break-inside: avoid; }
          @page { margin: 2cm; }
          .page-break { page-break-before: always; }
        }
      `}</style>
    </div>
  );
}