---
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 services = [
  {
    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)',
  },
  {
    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)',
  },
  {
    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 relative overflow-hidden" style="background: var(--hds-bg);">
  <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.12;" loading="lazy" decoding="async" />
    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 30%, transparent 70%, var(--hds-bg) 100%);"></div>
  </div>
  <div class="relative 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="services-grid">
      {services.map((item, i) => (
        <div class="service-tilt-wrap" data-service-index={i}>
          <ServiceCard
            href={`${base}/servicios/${item.slug}/`}
            title={item.title}
            description={item.desc}
            Icon={item.Icon}
            borderColor={item.border}
          />
        </div>
      ))}
    </div>

    <div class="text-center mt-14">
      <a href={`${base}/servicios/`} class="btn-secondary">
        {lang === 'en' ? 'View all services' : '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>

<script>
  import gsap from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';

  gsap.registerPlugin(ScrollTrigger);

  const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const canHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;

  if (!prefersReduced) {
    // Stagger scroll reveal
    gsap.from('.service-tilt-wrap', {
      scrollTrigger: {
        trigger: '.services-grid',
        start: 'top 80%',
        toggleActions: 'play none none none',
      },
      opacity: 0,
      y: 50,
      duration: 0.7,
      stagger: 0.1,
      ease: 'power3.out',
      clearProps: 'transform,opacity',
    });

    // 3D tilt on hover
    if (canHover) {
      document.querySelectorAll<HTMLElement>('.service-tilt-wrap').forEach((wrap) => {
        const card = wrap.querySelector<HTMLElement>('.service-tilt-card');
        if (!card) return;

        const rotateXTo = gsap.quickTo(card, 'rotationX', { duration: 0.4, ease: 'power2.out' });
        const rotateYTo = gsap.quickTo(card, 'rotationY', { duration: 0.4, ease: 'power2.out' });

        wrap.addEventListener('mousemove', (e) => {
          const rect = wrap.getBoundingClientRect();
          const x = (e.clientX - rect.left) / rect.width - 0.5;
          const y = (e.clientY - rect.top) / rect.height - 0.5;
          rotateYTo(x * 12);
          rotateXTo(-y * 12);
        });

        wrap.addEventListener('mouseleave', () => {
          rotateXTo(0);
          rotateYTo(0);
        });
      });
    }
  }
</script>

<style>
  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  @media (min-width: 640px) {
    .services-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .services-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .service-tilt-wrap {
    perspective: 1000px;
  }
</style>
