---
import type { TranslationKey } from '@/i18n/ui';

interface Props {
  t: (key: TranslationKey) => string;
  whatsappUrl: string;
}

const { t, whatsappUrl } = Astro.props;
---
<section class="relative overflow-hidden pt-20 pb-28 md:pt-32 md:pb-40">
  <div class="absolute inset-0 particle-grid" aria-hidden="true"></div>
  <div class="absolute inset-0" style="background: linear-gradient(180deg, transparent 0%, var(--hds-bg) 100%);" aria-hidden="true"></div>

  <!-- Cuadraditos decorativos (estilo grilla del logo) -->
  <div class="absolute top-32 right-8 md:right-16 opacity-50" aria-hidden="true">
    <svg width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="12" height="12" fill="#EE7623" rx="1"/>
      <rect x="14" y="0" width="12" height="12" fill="#FA9F5C" rx="1"/>
      <rect x="28" y="0" width="12" height="12" fill="#FFCBA1" rx="1"/>
      <rect x="0" y="14" width="12" height="12" fill="#FA9F5C" rx="1"/>
      <rect x="14" y="14" width="12" height="12" fill="#EE7623" rx="1"/>
      <rect x="28" y="14" width="12" height="12" fill="#FA9F5C" rx="1"/>
      <rect x="0" y="28" width="12" height="12" fill="#FFCBA1" rx="1"/>
      <rect x="14" y="28" width="12" height="12" fill="#FA9F5C" rx="1"/>
      <rect x="28" y="28" width="12" height="12" fill="#EE7623" rx="1"/>
    </svg>
  </div>

  <div class="absolute bottom-12 left-8 md:left-16 opacity-40" aria-hidden="true">
    <svg width="80" height="80" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
      <rect x="0" y="0" width="10" height="10" fill="#FA9F5C" rx="1"/>
      <rect x="12" y="0" width="10" height="10" fill="#EE7623" rx="1"/>
      <rect x="0" y="12" width="10" height="10" fill="#FFCBA1" rx="1"/>
      <rect x="12" y="12" width="10" height="10" fill="#FA9F5C" rx="1"/>
      <rect x="0" y="24" width="10" height="10" fill="#EE7623" rx="1"/>
      <rect x="12" y="24" width="10" height="10" fill="#FFCBA1" rx="1"/>
    </svg>
  </div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl">
      <div class="eyebrow mb-7">
        <span>Premium hosting · Desde 2000</span>
      </div>

      <h1 class="font-display leading-[0.98] mb-8" style="font-size: clamp(2.75rem, 7vw, 5.5rem); color: var(--hds-fg); letter-spacing: -0.025em; font-weight: 400;">
        Alojamiento en la nube<br/>
        que te <span style="color: var(--color-hds-naranja); font-style: italic;">conoce</span>.
      </h1>

      <p class="text-lg md:text-xl leading-relaxed mb-10 max-w-2xl" style="color: var(--hds-fg-soft);">
        Soporte humano senior en Maldonado, Uruguay. Del otro lado hay una persona que conoce tu proyecto, no un ticket automático. La misma tecnología que los gigantes, con la cercanía que nos diferencia.
      </p>

      <div class="flex flex-col sm:flex-row gap-4 mb-14">
        <a href="/planes/" class="btn-primary">
          Ver planes
        </a>
        <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-secondary">
          Hablar por WhatsApp
        </a>
      </div>

      <div class="flex flex-wrap items-center gap-x-8 gap-y-3 text-sm" style="color: var(--hds-fg-muted);">
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          26+ años
        </span>
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          Uptime 99.9%
        </span>
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          Soporte humano
        </span>
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          Maldonado, Uruguay
        </span>
      </div>
    </div>
  </div>
</section>
