import React from "react";
import { Helmet } from "react-helmet";
const sections = [
  {
    title: "Products & Services",
    categories: [
      {
        title: "Web Hosting",
        links: [
          { href: "/web-hosting", text: "Web Hosting" },
          { href: "/reseller-hosting", text: "Reseller Hosting" },
          { href: "/free-hosting", text: "Free Hosting" },
        ],
      },
      {
        title: "VPS Hosting",
        links: [
          { href: "/managed-vps", text: "Managed VPS" },
          { href: "/unmanaged-vps", text: "Unmanaged VPS" },
        ],
      },
      // {
      //   title: "Additional Services",
      //   links: [
      //     { href: "/domain-names", text: "Domain Names" },
      //     { href: "/ssl-certificates", text: "SSL Certificates" },
      //     { href: "/website-builder", text: "Website Builder" },
      //     { href: "/email-hosting", text: "Email Hosting" },
      //   ],
      // },
    ],
  },
  {
    title: "Support & Resources",
    categories: [
      {
        title: "Support",
        links: [
          { href: "/contact-support", text: "Contact Support" },
          { href: "/submit-ticket", text: "Submit Ticket" },
          { href: "/live-chat", text: "Live Chat" },
          { href: "/phone-support", text: "Phone Support" },
        ],
      },
      {
        title: "Documentation",
        links: [
          { href: "/knowledge-base", text: "Knowledge Base" },
          { href: "/api-documentation", text: "API Documentation" },
          { href: "/developer-guides", text: "Developer Guides" },
          { href: "/tutorial-videos", text: "Tutorial Videos" },
        ],
      },
      {
        title: "Resources",
        links: [
          { href: "/blog", text: "Blog" },
          { href: "/community-forums", text: "Community Forums" },
          { href: "/status-page", text: "Status Page" },
          { href: "/system-updates", text: "System Updates" },
        ],
      },
    ],
  },
  {
    title: "Account & Billing",
    categories: [
      {
        title: "Account Management",
        links: [
          { href: "/account-dashboard", text: "Account Dashboard" },
          { href: "/profile-settings", text: "Profile Settings" },
          { href: "/security-settings", text: "Security Settings" },
          { href: "/api-keys", text: "API Keys" },
        ],
      },
      {
        title: "Billing",
        links: [
          { href: "/view-invoices", text: "View Invoices" },
          { href: "/payment-methods", text: "Payment Methods" },
          { href: "/billing-history", text: "Billing History" },
          { href: "/usage-reports", text: "Usage Reports" },
        ],
      },
    ],
  },
  {
    title: "Company",
    categories: [
      {
        title: "About Us",
        links: [
          { href: "/company-overview", text: "Company Overview" },
          { href: "/our-team", text: "Our Team" },
          { href: "/careers", text: "Careers" },
          { href: "/press-kit", text: "Press Kit" },
        ],
      },
      {
        title: "Legal",
        links: [
          { href: "/terms-of-service", text: "Terms of Service" },
          { href: "/privacy-policy", text: "Privacy Policy" },
          { href: "/acceptable-use-policy", text: "Acceptable Use Policy" },
          { href: "/gdpr-compliance", text: "GDPR Compliance" },
        ],
      },
      {
        title: "Partnerships",
        links: [
          { href: "/affiliate-program", text: "Affiliate Program" },
          { href: "/reseller-program", text: "Reseller Program" },
          { href: "/partner-portal", text: "Partner Portal" },
          { href: "/technology-partners", text: "Technology Partners" },
        ],
      },
    ],
  },
];

const CategoryCard = ({ category }) => (
  <div className="bg-slate-950 p-5 rounded-md">
    <h3 className="text-lg font-semibold text-white mb-4">{category.title}</h3>
    <div className="flex flex-col space-y-2">
      {category.links.map((link, linkIndex) => (
        <a
          key={linkIndex}
          href={link.href}
          className="text-gray-400 hover:text-blue-500 transition-colors duration-200"
        >
          {link.text}
        </a>
      ))}
    </div>
  </div>
);

const SitemapSection = ({ section }) => (
  <section className="py-12 md:py-24">
    <div className="container mx-auto px-4 max-w-screen-xl">
      <h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
        {section.title}
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-8">
        {section.categories.map((category, index) => (
          <CategoryCard key={index} category={category} />
        ))}
      </div>
    </div>
  </section>
);

const SitemapLinks = () => {
  return (
    <div className="min-h-screen bg-slate-900">
      <Helmet>
        <title>Sitemap | GameZone</title>
      </Helmet>
      {/* Hero */}
      <section className="py-12 md:py-24 bg-slate-900">
        <div className="container mx-auto px-4 max-w-screen-xl">
          <div className="text-center max-w-3xl mx-auto">
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Site Map
            </h1>
            <p className="text-xl text-gray-300">
              Find everything you need with our comprehensive site navigation
            </p>
          </div>
        </div>
      </section>

      {/* Map Sections */}
      {sections.map((section, index) => (
        <div
          key={index}
          className={index % 2 === 0 ? "bg-slate-950" : "bg-slate-900"}
        >
          <SitemapSection section={section} />
        </div>
      ))}
    </div>
  );
};

export default SitemapLinks;
