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

  <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>{t('hero.eyebrow')}</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;">
        {t('hero.title')}
      </h1>

      <p class="text-lg md:text-xl leading-relaxed mb-10 max-w-2xl" style="color: var(--hds-fg-soft);">
        {t('hero.body')}
      </p>

      <div class="flex flex-col sm:flex-row gap-4 mb-14">
        <a href="/planes/" class="btn-primary">
          {t('hero.ctaPrimary')}
        </a>
        <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-secondary">
          {t('hero.ctaSecondary')}
        </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>
          {t('hero.badge26')}
        </span>
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          {t('hero.badgeUptime')}
        </span>
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          {t('hero.badgeSupport')}
        </span>
        <span class="flex items-center gap-2">
          <span style="color: var(--color-hds-naranja);">●</span>
          {t('hero.badgeLocation')}
        </span>
      </div>
    </div>
  </div>
</section>
