"use client";

import Link from "next/link";

export default function Sitemap() {
  const sections = [
    {
      title: "Main Pages",
      links: [
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Steelmaking Solutions",
      links: [
        { label: "Overview", href: "/steelmaking-solutions" },
        { label: "Electric Arc Furnace", href: "/steelmaking-solutions/melting-technologies" },
        { label: "Basic Oxygen Furnace", href: "/steelmaking-solutions/basic-oxygen-furnace" },
        { label: "Material Handling", href: "/steelmaking-solutions/material-handling" },
        { label: "On Site Consulting", href: "/steelmaking-solutions/on-site-consulting" },
      ],
    },
    {
      title: "Secondary Metallurgy",
      links: [
        { label: "Overview", href: "/secondary-metallurgy" },
        { label: "Ladle Metallurgical Furnace", href: "/secondary-metallurgy/ladle-metallurgical-furnace" },
        { label: "Vacuum Tank Degasser", href: "/secondary-metallurgy/vacuum-tank-degasser" },
        { label: "Argon Oxygen Decarbonization", href: "/secondary-metallurgy/argon-oxygen-decarbonization" },
      ],
    },
    {
      title: "Off Gas Systems",
      links: [
        { label: "Overview", href: "/off-gas-systems" },
        { label: "Water Cooled Ducts", href: "/off-gas-systems/water-cooled-ducts" },
        { label: "Drop Out Box", href: "/off-gas-systems/drop-out-box" },
        { label: "Dry Duct", href: "/off-gas-systems/dry-duct" },
        { label: "CFD and Flow Analyses", href: "/off-gas-systems/flow-analyses" },
      ],
    },
    {
      title: "Engineering Technologies",
      links: [
        { label: "Overview", href: "/engineering-technologies" },
        { label: "Simulations", href: "/engineering-technologies/simulations" },
        { label: "3D Modeling", href: "/engineering-technologies/3d-modeling" },
        { label: "Immersive Models", href: "/engineering-technologies/immersive-models" },
        { label: "Our Process", href: "/engineering-technologies/our-process" },
      ],
    },
    {
      title: "Fabrication Capabilities",
      links: [
        { label: "Overview", href: "/fabrication-capabilities" },
      ],
    },
    {
      title: "Industries Serviced",
      links: [
        { label: "Overview", href: "/industries-serviced" },
        { label: "Steel Industry", href: "/industries-serviced/steel-industry" },
        { label: "Aluminum Industry", href: "/industries-serviced/aluminum-industry" },
        { label: "Oil & Gas", href: "/industries-serviced/oil-gas-industry" },
        { label: "Power Generation", href: "/industries-serviced/power-generation-industry" },
      ],
    },
    {
      title: "About",
      links: [
        { label: "Who We Are", href: "/about/who-we-are" },
        { label: "News", href: "/about/news" },
        { label: "Blog", href: "/about/blog" },
        { label: "Social Responsibility", href: "/about/social-responsibility" },
        { label: "Student Outreach", href: "/about/student-outreach" },
      ],
    },
    {
      title: "Legal & Compliance",
      links: [
        { label: "Privacy Policy", href: "/privacy-policy" },
        { label: "Terms of Use", href: "/terms" },
        { label: "Accessibility Statement", href: "/accessibility-statement" },
      ],
    },
  ];

  return (
    <div className="min-h-screen bg-eafab-soft-yellow">
      {/* Hero Banner */}
      <div className="w-full bg-eafab-charcoal px-8 py-16 sm:py-24 flex items-center justify-center">
        <h1 className="text-[clamp(2rem,5vw,4rem)] font-black leading-tight tracking-tighter text-eafab-light-grey text-center">
          Sitemap
        </h1>
      </div>

      {/* Content */}
      <div className="max-w-6xl mx-auto px-6 sm:px-8 py-16 sm:py-24">
        <p className="text-center text-eafab-charcoal mb-12 text-lg">
          Complete directory of all pages on EAFab Corporation's website
        </p>

        {/* Sitemap Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
          {sections.map((section) => (
            <div key={section.title}>
              <h2 className="text-lg font-black text-eafab-charcoal mb-4 tracking-tight">
                {section.title}
              </h2>
              <ul className="space-y-2">
                {section.links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-eafab-charcoal hover:text-eafab-gold transition-colors duration-200 inline-flex items-center gap-2 group"
                    >
                      <span className="text-eafab-gold opacity-0 group-hover:opacity-100 transition-opacity">→</span>
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Additional Info */}
        <div className="mt-16 pt-12 border-t border-eafab-charcoal/20">
          <div className="bg-eafab-charcoal/5 rounded-lg p-8">
            <h3 className="text-lg font-black text-eafab-charcoal mb-4">Need Help?</h3>
            <p className="text-eafab-charcoal mb-4">
              Can't find what you're looking for? Our team is here to help.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href="/contact"
                className="px-6 py-3 bg-eafab-gold text-eafab-charcoal font-bold hover:bg-eafab-orange transition-colors rounded-sm"
              >
                Contact Us
              </Link>
              <a
                href="mailto:sales@eafabcorp.com"
                className="px-6 py-3 border-2 border-eafab-gold text-eafab-gold font-bold hover:bg-eafab-gold/10 transition-colors rounded-sm"
              >
                Email Us
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}