---
import BaseLayout from '@/layouts/BaseLayout.astro';
import SectionEyebrow from '@/components/SectionEyebrow.astro';
import ServiceCard from '@/components/ServiceCard.astro';
import CtaFinal from '@/components/CtaFinal.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 base = lang === 'en' ? '/en' : '';
const whatsappUrl = 'https://wa.me/59899812487';

const groups = [
  {
    title: t('services.cat.hosting'),
    items: [
      { slug: 'hosting-correo-web', title: lang === 'en' ? 'Hosting for email & web' : 'Hosting correo y web', desc: lang === 'en' ? 'Optimized hosting with cPanel for WordPress, PHP and MySQL.' : 'Alojamiento optimizado con cPanel para WordPress, PHP y MySQL.', Icon: MailIcon, border: 'var(--color-hds-naranja)' },
      { slug: 'mantenimiento-wordpress', title: lang === 'en' ? 'WordPress maintenance' : 'Mantenimiento WordPress', desc: lang === 'en' ? 'Security patches and updates by official WordPress ecosystem experts.' : 'Parches de seguridad y actualizaciones por expertos del ecosistema WP.', Icon: WordpressIcon, border: 'var(--color-hds-naranja)' },
    ],
  },
  {
    title: t('services.cat.design'),
    items: [
      { slug: 'desarrollo-webs-institucionales', title: lang === 'en' ? 'Institutional websites' : 'Desarrollo webs institucionales', desc: lang === 'en' ? 'Corporate sites tailored to your business and identity.' : 'Sitios corporativos a medida de tu negocio e identidad.', Icon: CodeIcon, border: 'var(--color-hds-coral)' },
      { slug: 'e-commerce', title: lang === 'en' ? 'E-commerce websites' : 'Sitios web con e-commerce', desc: lang === 'en' ? 'WooCommerce stores with secure payments and inventory.' : 'Tiendas WooCommerce con pagos seguros y gestión de stock.', Icon: ShopIcon, border: 'var(--color-hds-coral)' },
      { slug: 'gestion-contenido-traducciones', title: lang === 'en' ? 'Content & translations' : 'Gestión de contenido y traducciones', desc: lang === 'en' ? 'Recurring editorial: copy, updates, blog and translations.' : 'Servicio editorial recurrente: redacción, blog, traducciones.', Icon: TranslateIcon, border: 'var(--color-hds-coral)' },
    ],
  },
  {
    title: t('services.cat.infra'),
    items: [
      { slug: 'servidores-linux-virtualizacion', title: lang === 'en' ? 'Linux servers & virtualization' : 'Servidores Linux y virtualización', desc: lang === 'en' ? 'Linux servers, KVM virtualization, private clouds.' : 'Servidores Linux, virtualización KVM, nubes privadas.', Icon: ServerIcon, border: 'var(--color-hds-durazno)' },
    ],
  },
];
---
<BaseLayout
  title={lang === 'en' ? 'Services' : 'Servicios'}
  description={lang === 'en'
    ? 'Hosting, web development, e-commerce, content management and infrastructure services.'
    : 'Servicios de hosting, desarrollo web, e-commerce, gestión de contenido e infraestructura.'}
  lang={lang}
>
  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionEyebrow text={lang === 'en' ? 'What we do' : 'Lo que hacemos'} />
      <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
        {lang === 'en' ? 'Our' : 'Nuestros'} <span style="color: var(--color-hds-naranja); font-style: italic;">{lang === 'en' ? 'services' : 'servicios'}</span>.
      </h1>
      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
        {lang === 'en'
          ? 'A complete stack of services to support your business at every step, from basic hosting to complex infrastructure.'
          : 'Un stack completo de servicios para acompañar a tu empresa en cada paso, desde el hosting básico hasta la infraestructura compleja.'}
      </p>
    </div>
  </section>

  <section class="py-20 md:py-24" style="background: var(--hds-bg);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-14">
      {groups.map((group) => (
        <div>
          <div class="flex flex-wrap items-baseline gap-3 mb-6">
            <h2 class="text-2xl md:text-3xl font-display" style="color: var(--hds-fg);">{group.title}</h2>
            <span class="text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
              {group.items.length} {group.items.length === 1 ? (lang === 'en' ? 'service' : 'servicio') : (lang === 'en' ? 'services' : 'servicios')}
            </span>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {group.items.map((item) => (
              <ServiceCard
                href={`${base}/servicios/${item.slug}/`}
                title={item.title}
                description={item.desc}
                Icon={item.Icon}
                borderColor={item.border}
              />
            ))}
          </div>
        </div>
      ))}
    </div>
  </section>

  <CtaFinal t={t} whatsappUrl={whatsappUrl} />
</BaseLayout>
