---
import Layout from '../layouts/Layout.astro';
import { ServiceCard } from '../components/ServiceCard';

// Page-specific SEO metadata
const pageTitle = "Hosting Services | SiliconPin";
const pageDescription = "Explore SiliconPin's reliable hosting services for PHP, Node.js, Python, Kubernetes (K8s), and K3s. Scalable solutions for businesses of all sizes with 24/7 support.";
const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=80&w=2000&auto=format&fit=crop";

// Service data
const services = [
  {
    title: 'Deploy an App',
    description: 'WordPress, Joomla, Drupal, PrestaShop, Wiki, Moodle, Directus, PocketBase, StarAPI and more.',
    imageUrl: 'https://images.unsplash.com/photo-1599507593499-a3f7d7d97667?q=80&w=2000&auto=format&fit=crop',
    features: [ 'WordPress', 'Joomla', 'Drupal', 'PrestaShop', 'Wiki', 'Moodle', 'Directus', 'PocketBase', 'StarAPI' ],
    learnMoreUrl: '/services/deploy-an-app'
  },
  {
    title: 'Deploy From Source Code',
    description: 'Node.js, Python, Ruby, Go, Rust, and more. Deploy your custom applications with ease.',
    imageUrl: 'https://images.unsplash.com/photo-1599507593499-a3f7d7d97667?q=80&w=2000&auto=format&fit=crop',
    features: ['Node.js', 'Python', 'Ruby', 'Go', 'Rust', 'Docker', 'Kubernetes', 'JAMstack', 'Serverless'],
    learnMoreUrl: '/services/deploy-from-source-code'
  },
  {
    title: 'Static Site Hosting',
    description: 'Secure and scalable hosting for static websites and JAMstack applications.',
    imageUrl: 'https://images.unsplash.com/photo-1526379879527-8559ecfcaec0?q=80&w=2000&auto=format&fit=crop',
    features: ['JAMstack', 'Gatsby', 'Hugo', 'Next.js', 'Nuxt.js', 'VuePress', 'Eleventy', 'SvelteKit', 'Astro'],
    learnMoreUrl: '/services/static-site-hosting'
  },
  {
    title: 'Kubernetes (K8s)',
    description: 'Enterprise-grade Kubernetes clusters for container orchestration at scale.',
    imageUrl: 'https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=80&w=2000&auto=format&fit=crop',
    features: [
      'Fully managed K8s clusters',
      'Auto-scaling and load balancing',
      'Advanced networking options',
      'Persistent storage solutions',
      'Enterprise support available'
    ],
    learnMoreUrl: '/services/kubernetes'
  },
  {
    title: 'K3s Lightweight Kubernetes',
    description: 'Lightweight Kubernetes for edge, IoT, and resource-constrained environments.',
    imageUrl: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2000&auto=format&fit=crop',
    features: [
      'Minimal resource requirements',
      'Single binary < 100MB',
      'Edge computing optimized',
      'ARM support (Raspberry Pi compatible)',
      'Simplified management'
    ],
    learnMoreUrl: '/services/k3s'
  },
  {
    title: 'Hire a Human Developer',
    description: 'Need a custom solution? Our experts can design a tailored App or WebApp for your specific needs.',
    imageUrl: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2000&auto=format&fit=crop',
    features: ['Node.js', 'Python', 'Ruby', 'Go', 'Rust', 'Docker', 'Kubernetes', 'JAMstack', 'Serverless'],
    learnMoreUrl: '/services/hire-a-human-developer'
  },
  {
    title: 'Hire an AI Agent',
    description: 'Need a custom solution? Our experts can design a tailored AI Agent for your specific needs.',
    imageUrl: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2000&auto=format&fit=crop',
    features: ['Reactive Agents (Stateless, Rule-Based)', 'Proactive Agents (Stateful, Machine Learning)', 'Hybrid Agents (Reactive + Proactive)', 'Model-Based Agents (Stateful, Uses Memory)', 'Goal-Based Agents (Optimizes for an Objective)', 'Utility-Based Agents', 'Self Learning Agents', 'Autonomous AI Agents'],
    learnMoreUrl: '/services/hire-an-ai-agent'
  }
];
---

<Layout
  title={pageTitle}
  description={pageDescription}
  image={pageImage}
  type="website"
>
  <main class="container mx-auto px-4 sm:px-6 py-8 sm:py-12">
    <div class="text-center mb-8 sm:mb-12">
      <h1 class="text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Hosting Services</h1>
      <p class="text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300">
        Reliable, scalable, and secure hosting solutions for all your applications, from simple websites to complex microservices.
      </p>
    </div>

    <section aria-labelledby="services-heading">
      <h2 id="services-heading" class="sr-only">Our hosting services</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
        {services.map((service, index) => (
          <ServiceCard
            client:load
            title={service.title}
            description={service.description}
            imageUrl={service.imageUrl}
            features={service.features}
            learnMoreUrl={service.learnMoreUrl}
          />
        ))}
      </div>
    </section>

    <section class="mt-12 sm:mt-16 bg-neutral-800 rounded-lg p-6 sm:p-8 border border-neutral-700" aria-labelledby="custom-solutions-heading">
      <div class="text-center mb-6 sm:mb-8">
        <h2 id="custom-solutions-heading" class="text-xl sm:text-2xl font-bold text-white">Need a Custom Hosting Solution?</h2>
        <p class="mt-2 text-neutral-300">Our experts can design a tailored hosting environment for your specific needs.</p>
      </div>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a
          href="/contact"
          class="inline-flex items-center justify-center rounded-md bg-[#6d9e37] px-6 py-3 text-base font-medium text-white hover:bg-[#598035] transition-colors w-full sm:w-auto"
          rel="prefetch"
        >
          Contact Us
        </a>
        <a
          href="/services/custom"
          class="inline-flex items-center justify-center rounded-md border border-[#6d9e37] px-6 py-3 text-base font-medium text-[#6d9e37] hover:bg-[#6d9e37] hover:text-white transition-colors w-full sm:w-auto"
        >
          Learn About Custom Solutions
        </a>
      </div>
    </section>
  </main>
</Layout>