---
// Sitemap Page for WorkRoot IT Solutions
// Features: Visual sitemap with links to all pages organized by category

import BaseLayout from '../layouts/BaseLayout.astro';

// Sitemap structure
const sitemapSections = [
  {
    title: 'Main Pages',
    icon: 'home',
    links: [
      { name: 'Home', url: '/', description: 'Welcome to WorkRoot IT Solutions' },
      { name: 'About Us', url: '/about', description: 'Our story, team, and mission' },
      { name: 'Services', url: '/services', description: 'Our IT service offerings' },
      { name: 'Portfolio', url: '/portfolio', description: 'Featured projects and case studies' },
      { name: 'Blog', url: '/blog', description: 'Insights and articles' },
      { name: 'Contact', url: '/contact', description: 'Get in touch with us' },
    ],
  },
  {
    title: 'Services',
    icon: 'briefcase',
    links: [
      { name: 'Web Development', url: '/services#web-development', description: 'Custom web applications and e-commerce' },
      { name: 'Mobile Development', url: '/services#mobile-development', description: 'iOS, Android, and cross-platform apps' },
      { name: 'AI & Machine Learning', url: '/services#ai-ml', description: 'Intelligent solutions and automation' },
      { name: 'Cloud Services', url: '/services#cloud', description: 'Cloud migration and infrastructure' },
    ],
  },
  {
    title: 'Resources',
    icon: 'book',
    links: [
      { name: 'Blog', url: '/blog', description: 'Latest articles and insights' },
      { name: 'Case Studies', url: '/portfolio', description: 'Detailed project analyses' },
    ],
  },
  {
    title: 'Company',
    icon: 'building',
    links: [
      { name: 'About Us', url: '/about', description: 'Learn about our company' },
      { name: 'Our Team', url: '/about#team', description: 'Meet our experts' },
      { name: 'Careers', url: '/contact', description: 'Join our team' },
    ],
  },
  {
    title: 'Legal',
    icon: 'shield',
    links: [
      { name: 'Privacy Policy', url: '/privacy', description: 'How we handle your data' },
      { name: 'Terms of Service', url: '/terms', description: 'Terms and conditions' },
      { name: 'Sitemap', url: '/sitemap', description: 'This page' },
    ],
  },
  {
    title: 'Connect',
    icon: 'share',
    links: [
      { name: 'Contact Us', url: '/contact', description: 'Send us a message' },
      { name: 'LinkedIn', url: '#', description: 'Follow us on LinkedIn', external: true },
      { name: 'Twitter', url: '#', description: 'Follow us on Twitter', external: true },
      { name: 'GitHub', url: '#', description: 'View our open source projects', external: true },
    ],
  },
];

// Icons mapping
const icons: Record<string, string> = {
  home: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>`,
  briefcase: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>`,
  book: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>`,
  building: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>`,
  shield: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>`,
  share: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path></svg>`,
};
---

<BaseLayout
  title="Sitemap"
  description="WorkRoot IT Solutions Sitemap - Navigate to all pages and resources on our website."
>
  <!-- Hero Section -->
  <section class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-16 lg:py-20">
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary-500/10 rounded-full blur-3xl"></div>
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl"></div>
    </div>
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="max-w-3xl mx-auto text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
          Site<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-accent-400">map</span>
        </h1>
        <p class="text-lg text-secondary-300">
          Find your way around our website
        </p>
      </div>
    </div>
  </section>

  <!-- Sitemap Grid Section -->
  <section class="py-16 lg:py-24 bg-secondary-950">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {sitemapSections.map((section) => (
          <div class="bg-secondary-900/50 border border-secondary-800 rounded-2xl p-6 hover:border-primary-500/30 transition-colors duration-300">
            <div class="flex items-center gap-3 mb-6">
              <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-primary-500/20 text-primary-400" set:html={icons[section.icon]} />
              <h2 class="text-xl font-bold text-white">{section.title}</h2>
            </div>
            <ul class="space-y-3">
              {section.links.map((link) => (
                <li>
                  <a
                    href={link.url}
                    class="group flex items-start gap-3 p-3 rounded-lg hover:bg-secondary-800/50 transition-colors duration-200"
                    target={link.external ? '_blank' : undefined}
                    rel={link.external ? 'noopener noreferrer' : undefined}
                  >
                    <svg class="w-5 h-5 mt-0.5 text-primary-400 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                    <div>
                      <span class="text-white font-medium group-hover:text-primary-400 transition-colors duration-200">
                        {link.name}
                        {link.external && (
                          <svg class="w-4 h-4 inline-block ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                          </svg>
                        )}
                      </span>
                      <p class="text-sm text-secondary-400 mt-0.5">{link.description}</p>
                    </div>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <!-- XML Sitemap Note -->
      <div class="mt-16 text-center">
        <div class="inline-flex items-center gap-3 bg-secondary-900/50 border border-secondary-800 rounded-xl px-6 py-4">
          <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
          <span class="text-secondary-300">
            Looking for the XML sitemap? Visit
            <a href="/sitemap.xml" class="text-primary-400 hover:text-primary-300 underline underline-offset-2">
              /sitemap.xml
            </a>
          </span>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>