---
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  
const services = [
  {
    title: 'VPN (WireGuard)',
    description: 'WireGuard is much better than other solutions like open VPN Free VPN. as WireGuard is the best we provide WireGuard VPN',
    imageUrl: '/assets/images/wiregurd-thumb.jpg',
    features: ["600 GB bandwidth", "WireGuard® protocol", "Global server locations", "No activity logs"],
    learnMoreUrl: '/services/vpn',
    buyButtonText: 'Buy VPN',
    buyButtonUrl: '/services/buy-vpn'
  },{
    title: 'Deploy an App',
    description: 'WordPress, Joomla, Drupal, PrestaShop, Wiki, Moodle, Directus, PocketBase, StarAPI and more.',
    imageUrl: '/assets/images/deployapp-thumb.jpg',
    features: [ 'WordPress', 'Joomla', 'Drupal', 'PrestaShop', 'Wiki', 'Moodle', 'Directus', 'PocketBase', 'StarAPI' ],
    learnMoreUrl: '/services/deploy-an-app',
    buyButtonText: '',
    buyButtonUrl: ''
  },
  {
    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',
    buyButtonText: '',
    buyButtonUrl: ''
  },
  {
    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',
    buyButtonText: '',
    buyButtonUrl: ''
  },
  {
    title: "Python Hosting",
    description: "High-performance hosting for Python applications with support for all major frameworks.",
    imageUrl: "https://images.unsplash.com/photo-1526379095098-d400fd0bf935?q=80&w=2000&auto=format&fit=crop",
    features: ["Django", "Flask", "FastAPI", "Pyramid", "Bottle", "WSGI Support", "ASGI Support", "Celery", "Redis"],
    learnMoreUrl: "/services/python-hosting",
    buyButtonText: "",
    buyButtonUrl: ""
  },
  {
    title: "Node.js Hosting",
    description: "Optimized cloud hosting for Node.js applications with automatic scaling.",
    imageUrl: "/assets/node-js.jpg",
    features: ["Express", "NestJS", "Koa", "Socket.io", "PM2", "WebSockets", "Serverless", "TypeScript", "GraphQL"],
    learnMoreUrl: "/services/nodejs-hosting",
    buyButtonText: "",
    buyButtonUrl: ""
  },
  {
    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',
    buyButtonText: '',
    buyButtonUrl: ''
  },
  {
    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',
    buyButtonText: '',
    buyButtonUrl: ''
  },
  {
    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',
    buyButtonText: '',
    buyButtonUrl: ''
  },
  {
    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',
    buyButtonText: '',
    buyButtonUrl: ''
  }
];
---

<Layout
  title={pageTitle}
  description={pageDescription}
  ogImage={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}
              buyButtonText={service.buyButtonText}
              buyButtonUrl={service.buyButtonUrl}
            />
        ))}
      </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>