---
import BaseLayout from '@/layouts/BaseLayout.astro';
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
import MailIcon from '@/components/icons/MailIcon.astro';
import WordpressIcon from '@/components/icons/WordpressIcon.astro';
import CodeIcon from '@/components/icons/CodeIcon.astro';
import ShopIcon from '@/components/icons/ShopIcon.astro';
import TranslateIcon from '@/components/icons/TranslateIcon.astro';
import ServerIcon from '@/components/icons/ServerIcon.astro';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const slug = Astro.params.slug;

export function getStaticPaths() {
  return [
    { params: { slug: 'hosting-correo-web' } },
    { params: { slug: 'mantenimiento-wordpress' } },
    { params: { slug: 'desarrollo-webs-institucionales' } },
    { params: { slug: 'e-commerce' } },
    { params: { slug: 'gestion-contenido-traducciones' } },
    { params: { slug: 'servidores-linux-virtualizacion' } },
  ];
}

const services: Record<string, {
  icon: any;
  title_es: string;
  title_en: string;
  category: string;
  body_es: string;
  body_en: string;
  features_es: string[];
  features_en: string[];
}> = {
  'hosting-correo-web': {
    icon: MailIcon,
    title_es: 'Hosting correo y web',
    title_en: 'Hosting for email and web',
    category: 'Hosting & Correo',
    body_es: 'Alojamiento web optimizado con cPanel. Infraestructura estable y profesional para que tu sitio rinda al máximo sin complicaciones técnicas. Soporte para WordPress, PHP y MySQL.',
    body_en: 'Optimized web hosting with cPanel. Stable, professional infrastructure for your site to perform at its best without technical complications. WordPress, PHP and MySQL support.',
    features_es: [
      'Panel cPanel intuitivo',
      'PHP 7.4 a 8.3, MySQL/MariaDB',
      'SSL gratis (Let\'s Encrypt)',
      'Backups automáticos diarios',
      'Soporte para WordPress optimizado',
      'Correo electrónico corporativo',
    ],
    features_en: [
      'Intuitive cPanel',
      'PHP 7.4 to 8.3, MySQL/MariaDB',
      'Free SSL (Let\'s Encrypt)',
      'Daily automatic backups',
      'Optimized WordPress support',
      'Corporate email',
    ],
  },
  'mantenimiento-wordpress': {
    icon: WordpressIcon,
    title_es: 'Mantenimiento WordPress',
    title_en: 'WordPress maintenance',
    category: 'Hosting & Correo',
    body_es: 'Mantenimiento proactivo y parches de seguridad por expertos que participan en el ecosistema oficial de WordPress. Tu sitio, siempre protegido.',
    body_en: 'Proactive maintenance and security patches by experts participating in the official WordPress ecosystem. Your site, always protected.',
    features_es: [
      'Actualizaciones de core, themes y plugins',
      'Parches de seguridad críticos',
      'Backups antes de cada cambio',
      'Monitoreo de uptime 24/7',
      'Reporte mensual de actividad',
      'Restauración ante incidentes',
    ],
    features_en: [
      'Core, theme and plugin updates',
      'Critical security patches',
      'Backups before every change',
      '24/7 uptime monitoring',
      'Monthly activity report',
      'Incident restoration',
    ],
  },
  'desarrollo-webs-institucionales': {
    icon: CodeIcon,
    title_es: 'Desarrollo webs institucionales',
    title_en: 'Institutional website development',
    category: 'Diseño & Contenido',
    body_es: 'Diseño y desarrollo de sitios web corporativos a medida de tu negocio. Trabajamos con foco en performance, accesibilidad y SEO.',
    body_en: 'Design and development of corporate websites tailored to your business. We focus on performance, accessibility and SEO.',
    features_es: [
      'Diseño responsive y accesible (WCAG AA)',
      'Optimización SEO técnico desde el inicio',
      'Performance > 90 en Lighthouse',
      'CMS amigable para edición autónoma',
      'Formación de uso al equipo del cliente',
      'Soporte post-lanzamiento',
    ],
    features_en: [
      'Responsive, accessible design (WCAG AA)',
      'Technical SEO from the start',
      'Lighthouse performance > 90',
      'Friendly CMS for autonomous editing',
      'Training for the client team',
      'Post-launch support',
    ],
  },
  'e-commerce': {
    icon: ShopIcon,
    title_es: 'Sitios web con e-commerce',
    title_en: 'E-commerce websites',
    category: 'Diseño & Contenido',
    body_es: 'Tiendas online robustas con WooCommerce. Pagos seguros, gestión de inventario, envíos y todo lo necesario para vender online.',
    body_en: 'Robust online stores with WooCommerce. Secure payments, inventory management, shipping and everything you need to sell online.',
    features_es: [
      'WooCommerce con pasarelas de pago locales',
      'Gestión de stock y pedidos',
      'Integración con transportistas',
      'Panel de reportes de venta',
      'Cupones, descuentos y envíos gratis',
      'Optimización para Core Web Vitals',
    ],
    features_en: [
      'WooCommerce with local payment gateways',
      'Stock and order management',
      'Carrier integration',
      'Sales reporting panel',
      'Coupons, discounts and free shipping',
      'Core Web Vitals optimization',
    ],
  },
  'gestion-contenido-traducciones': {
    icon: TranslateIcon,
    title_es: 'Gestión de contenido y traducciones',
    title_en: 'Content management and translations',
    category: 'Diseño & Contenido',
    body_es: 'Servicio editorial recurrente: redacción, actualización de contenido, gestión de blog y traducción multilenguaje. Tu sitio siempre al día, sin que tengas que ocuparte.',
    body_en: 'Recurring editorial service: copywriting, content updates, blog management and multilingual translation. Your site always up to date, without you having to worry.',
    features_es: [
      'Redacción profesional de artículos',
      'Traducción es/en/pt',
      'Publicación en CMS o WordPress',
      'Calendario editorial mensual',
      'Optimización SEO de cada pieza',
      'Reporte de tráfico y engagement',
    ],
    features_en: [
      'Professional article writing',
      'ES/EN/PT translation',
      'CMS or WordPress publishing',
      'Monthly editorial calendar',
      'SEO optimization of every piece',
      'Traffic and engagement report',
    ],
  },
  'servidores-linux-virtualizacion': {
    icon: ServerIcon,
    title_es: 'Servidores Linux y virtualización',
    title_en: 'Linux servers and virtualization',
    category: 'Infraestructura',
    body_es: 'Diseño, instalación y administración de servidores Linux con virtualización KVM. Nubes privadas, servicios empresariales y plataformas de alta disponibilidad.',
    body_en: 'Design, installation and administration of Linux servers with KVM virtualization. Private clouds, enterprise services and high-availability platforms.',
    features_es: [
      'Servidores dedicados o VPS con KVM',
      'Nubes privadas estilo Nextcloud',
      'Alta disponibilidad y balanceo',
      'Monitoreo 24/7 con Prometheus/Grafana',
      'Respaldos automatizados',
      'Hardening y seguridad perimetral',
    ],
    features_en: [
      'Dedicated servers or VPS with KVM',
      'Nextcloud-style private clouds',
      'High availability and balancing',
      '24/7 monitoring with Prometheus/Grafana',
      'Automated backups',
      'Hardening and perimeter security',
    ],
  },
};

const service = services[slug as keyof typeof services];

if (!service) {
  return Astro.redirect(lang === 'en' ? '/en/servicios/' : '/servicios/');
}

const title = lang === 'en' ? service.title_en : service.title_es;
const body = lang === 'en' ? service.body_en : service.body_es;
const features = lang === 'en' ? service.features_en : service.features_es;
const base = lang === 'en' ? '/en' : '';
const whatsappUrl = 'https://wa.me/59899812487';
---
<BaseLayout
  title={title}
  description={body}
  lang={lang}
>
  <section class="py-12 md:py-16" style="background: var(--hds-bg-soft);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <nav aria-label="Breadcrumb" class="text-sm mb-6" style="color: var(--hds-fg-muted);">
        <ol class="flex flex-wrap items-center gap-2">
          <li><a href={`${base}/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
          <li aria-hidden="true">/</li>
          <li><a href={`${base}/servicios/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
          <li aria-hidden="true">/</li>
          <li aria-current="page" style="color: var(--hds-fg-soft);">{title}</li>
        </ol>
      </nav>

      <div class="flex items-start gap-5 mb-4 reveal">
        <div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
          <service.icon class="w-10 h-10" />
        </div>
        <div>
          <p class="text-xs font-semibold tracking-[0.25em] uppercase mb-1" style="color: var(--color-hds-naranja);">
            {service.category}
          </p>
          <h1 class="font-display leading-tight" style="font-size: clamp(2rem, 4vw, 3rem); color: var(--hds-fg);">
            {title}
          </h1>
        </div>
      </div>
    </div>
  </section>

  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
      <p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
        {body}
      </p>

      <h2 class="font-display mb-6" style="font-size: clamp(1.5rem, 3vw, 2rem); color: var(--hds-fg);">
        {lang === 'en' ? 'What is included' : 'Qué incluye'}
      </h2>

      <ul class="space-y-3 mb-12">
        {features.map((feature) => (
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EE7623" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" aria-hidden="true">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
            <span style="color: var(--hds-fg-soft);">{feature}</span>
          </li>
        ))}
      </ul>

      <div class="glass-card p-8">
        <h3 class="text-xl mb-2" style="color: var(--hds-fg);">
          {lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
        </h3>
        <p class="mb-5" style="color: var(--hds-fg-soft);">
          {lang === 'en'
            ? 'Tell us about your project and we will reply with a tailor-made proposal.'
            : 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
        </p>
        <a
          href={whatsappUrl}
          target="_blank"
          rel="noopener noreferrer"
          class="btn-secondary text-sm"
        >
          {lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
        </a>
      </div>
    </div>
  </section>
</BaseLayout>
