---
import ServiceCard from './ServiceCard.astro';
import SectionEyebrow from './SectionEyebrow.astro';
import type { TranslationKey } from '@/i18n/ui';
import MailIcon from './icons/MailIcon.astro';
import WordpressIcon from './icons/WordpressIcon.astro';
import CodeIcon from './icons/CodeIcon.astro';
import ShopIcon from './icons/ShopIcon.astro';
import TranslateIcon from './icons/TranslateIcon.astro';
import ServerIcon from './icons/ServerIcon.astro';

interface Props {
  t: (key: TranslationKey) => string;
  lang: 'es' | 'en';
}

const { t, lang } = Astro.props;
const base = lang === 'en' ? '/en' : '';

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)',
      },
    ],
  },
];
---
<section id="servicios" class="py-20 md:py-28" style="background: var(--hds-bg);">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-3xl mb-14 md:mb-20 reveal">
      <SectionEyebrow text={t('services.eyebrow')} />
      <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 5vw, 3.5rem); color: var(--hds-fg);">
        {t('services.title')}
      </h2>
      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
        {t('services.subtitle')}
      </p>
    </div>

    <div class="space-y-14">
      {groups.map((group) => (
        <div>
          <div class="flex items-baseline gap-4 mb-6">
            <h3 class="text-2xl md:text-3xl font-display" style="color: var(--hds-fg);">
              {group.title}
            </h3>
            <span class="text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
              {group.items.length} {group.items.length === 1 ? 'servicio' : '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>

    <div class="text-center mt-14">
      <a href={`${base}/servicios/`} class="btn-secondary">
        Ver todos los servicios
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <line x1="5" y1="12" x2="19" y2="12"/>
          <polyline points="12 5 19 12 12 19"/>
        </svg>
      </a>
    </div>
  </div>
</section>
