---
import BaseLayout from '@/layouts/BaseLayout.astro';
import SectionEyebrow from '@/components/SectionEyebrow.astro';
import CloudDivider from '@/components/CloudDivider.astro';
import CtaFinal from '@/components/CtaFinal.astro';
import { PLANS } from '@/lib/pricing';
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 planIcons: Record<string, any> = {
  basico: MailIcon,
  wordpress: WordpressIcon,
  institucional: CodeIcon,
  empresarial: ServerIcon,
  'e-commerce': ShopIcon,
  avanzado: CloudIcon || ServerIcon,
  'avanzado-hd': ServerIcon,
  corporativo: ServerIcon,
  'corporativo-hd': ServerIcon,
};

import CloudIcon from '@/components/icons/CloudIcon.astro';

const customServices = [
  {
    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,
  },
  {
    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,
  },
  {
    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,
  },
];

const plansByCategory = {
  hosting: PLANS.filter(p => ['basico', 'wordpress', 'institucional', 'empresarial'].includes(p.slug)),
  business: PLANS.filter(p => ['e-commerce', 'avanzado', 'avanzado-hd'].includes(p.slug)),
  corporate: PLANS.filter(p => ['corporativo', 'corporativo-hd'].includes(p.slug)),
};

const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtitle: string; }> = {
  hosting: { title: lang === 'en' ? 'Hosting plans' : 'Planes de hosting', subtitle: lang === 'en' ? 'For sites, blogs and WordPress' : 'Para sitios, blogs y WordPress' },
  business: { title: lang === 'en' ? 'Business plans' : 'Planes business', subtitle: lang === 'en' ? 'For e-commerce and growing businesses' : 'Para e-commerce y empresas en crecimiento' },
  corporate: { title: lang === 'en' ? 'Corporate plans' : 'Planes corporativos', subtitle: lang === 'en' ? 'For high-traffic and enterprise' : 'Para alto tráfico y empresas' },
};
---
<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 relative overflow-hidden" style="background: var(--hds-bg-soft);">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
    </div>
    <div class="absolute inset-0 particle-grid opacity-60" aria-hidden="true"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
      <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>

  <CloudDivider fill="var(--hds-bg)" />

  <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-16">

      <!-- Custom services -->
      <div>
        <div class="flex items-baseline gap-4 mb-6">
          <h2 class="text-2xl md:text-3xl font-display" style="color: var(--hds-fg);">
            {lang === 'en' ? 'Custom services' : 'Servicios a medida'}
          </h2>
          <span class="text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
            {customServices.length} {lang === 'en' ? 'services' : 'servicios'}
          </span>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
          {customServices.map((service) => (
            <a
              href={`${base}/servicios/${service.slug}/`}
              class="glass-card group flex flex-col h-full p-6 md:p-7"
              style="border-top: 3px solid var(--color-hds-coral);"
            >
              <div class="icon-circle mb-5" style="width: 48px; height: 48px;">
                <service.Icon class="w-6 h-6" />
              </div>
              <h3 class="text-xl font-semibold mb-2 transition-colors" style="color: var(--hds-fg);">
                {service.title}
              </h3>
              <p class="text-sm leading-relaxed mb-4 flex-grow" style="color: var(--hds-fg-soft);">
                {service.desc}
              </p>
              <span class="btn-ghost text-sm mt-auto">
                {lang === 'en' ? 'View details' : 'Ver detalles'}
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
              </span>
            </a>
          ))}
        </div>
      </div>

      <!-- All 9 plans as services -->
      {Object.entries(plansByCategory).map(([key, plans]) => (
        <div>
          <div class="flex flex-wrap items-baseline gap-4 mb-6">
            <h2 class="text-2xl md:text-3xl font-display" style="color: var(--hds-fg);">
              {categoryInfo[key as keyof typeof categoryInfo].title}
            </h2>
            <span class="text-sm" style="color: var(--hds-fg-muted);">
              {categoryInfo[key as keyof typeof categoryInfo].subtitle}
            </span>
            <span class="text-xs font-semibold tracking-[0.25em] uppercase" style="color: var(--color-hds-naranja);">
              {plans.length} {plans.length === 1 ? (lang === 'en' ? 'plan' : 'plan') : (lang === 'en' ? 'plans' : 'planes')}
            </span>
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {plans.map((plan) => {
              const Icon = planIcons[plan.slug] || ServerIcon;
              return (
                <a
                  href={`${base}/planes/#${plan.slug}`}
                  class="glass-card group flex flex-col h-full p-6 md:p-7 relative"
                  style={`border-top: 3px solid ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-line)'};`}
                >
                  {plan.recommended && (
                    <div class="absolute -top-3 right-4 text-[10px] font-bold tracking-[0.15em] uppercase px-2.5 py-0.5 rounded-full" style="background: var(--color-hds-naranja); color: white;">
                      ⭐ Top
                    </div>
                  )}

                  <div class="icon-circle mb-4" style="width: 48px; height: 48px;">
                    <Icon class="w-6 h-6" />
                  </div>

                  <div class="flex items-baseline justify-between gap-2 mb-2">
                    <h3 class="text-lg font-semibold transition-colors" style="color: var(--hds-fg);">
                      {plan.name}
                    </h3>
                    <div class="font-display leading-none" style="font-size: 1.75rem; color: var(--color-hds-naranja); font-weight: 500;">${plan.priceUsdYear}</div>
                  </div>

                  <p class="text-xs mb-3" style="color: var(--hds-fg-muted);">
                    USD/año · {plan.features[0]}
                  </p>

                  <ul class="text-xs space-y-1 mb-4 flex-grow" style="color: var(--hds-fg-soft);">
                    {plan.features.slice(1, 4).map((feature) => (
                      <li class="flex items-start gap-1.5">
                        <span style="color: var(--color-hds-naranja);">·</span>
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>

                  <span class="btn-ghost text-sm mt-auto">
                    {lang === 'en' ? 'View plan' : 'Ver plan'}
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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>
                  </span>
                </a>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  </section>

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