---
import BaseLayout from '@/layouts/BaseLayout.astro';
import SectionEyebrow from '@/components/SectionEyebrow.astro';
import PricingTiersFeatured from '@/components/PricingTiersFeatured.astro';
import PricingGrid from '@/components/PricingGrid.astro';
import CloudDivider from '@/components/CloudDivider.astro';
import CtaFinal from '@/components/CtaFinal.astro';
import { PLANS, getFeaturedPlans, getOtherPlans, ADDITIONAL_PLANS } from '@/lib/pricing';
import { getLangFromUrl, useTranslations } from '@/i18n/utils';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const whatsappUrl = 'https://wa.me/59899812487';
const base = lang === 'en' ? '/en' : '';

const featured = getFeaturedPlans();
const other = getOtherPlans();
---
<BaseLayout
  title={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'}
  description={lang === 'en'
    ? 'Hosting plans in USD, billed annually. From basic to corporate HD, choose the plan that fits your project.'
    : 'Planes de hosting en USD, con cobro anual. Desde básico hasta corporativo HD, elegí el plan que se adapta a tu proyecto.'}
  lang={lang}
>
  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative" style="background: var(--hds-bg-soft);">
    <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">
      <SectionEyebrow text={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'} />
      <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
        Elegí el plan que se<br/>adapta a tu <span style="color: var(--color-hds-naranja); font-style: italic;">proyecto</span>.
      </h1>
      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
        {lang === 'en'
          ? 'Prices in USD, billed annually. Features may vary depending on the project and server configuration.'
          : 'Precios en USD, con cobro anual. Las características pueden variar según el proyecto y la configuración del servidor.'}
      </p>
    </div>
  </section>

  <CloudDivider fillClass="fill-hds-bg" />

  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold tracking-[0.2em] uppercase" style="background: var(--hds-bg-soft); color: var(--color-hds-naranja);">
          {lang === 'en' ? 'Most popular' : 'Más elegidos'}
        </span>
        <h2 class="font-display mt-4" style="font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--hds-fg);">
          {lang === 'en' ? 'Featured plans' : 'Planes destacados'}
        </h2>
      </div>

      <PricingTiersFeatured plans={featured} whatsappUrl={whatsappUrl} />

      <div class="mt-10 text-center text-sm space-y-1" style="color: var(--hds-fg-muted);">
        <p>⚠️ {lang === 'en' ? 'Prices are in US Dollars (USD). Billed annually.' : 'Los precios están expresados en dólares estadounidenses (USD). El cobro es anual.'}</p>
        <p>{lang === 'en' ? 'Features may vary based on project and server configuration.' : 'Las características pueden variar según el proyecto y la configuración del servidor.'}</p>
      </div>
    </div>
  </section>

  <CloudDivider fillClass="fill-hds-bg-soft" flip={true} />

  <section class="py-20 md:py-24" style="background: var(--hds-bg-soft);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold tracking-[0.2em] uppercase" style="background: var(--hds-bg); color: var(--hds-fg-soft);">
          {lang === 'en' ? 'Complete catalog' : 'Catálogo completo'}
        </span>
        <h2 class="font-display mt-4" style="font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--hds-fg);">
          {lang === 'en' ? 'All 9 plans' : 'Los 9 planes'}
        </h2>
        <p class="mt-3 max-w-2xl mx-auto" style="color: var(--hds-fg-soft);">
          {lang === 'en' ? 'From basic personal hosting to corporate HD with everything. Find the one that fits.' : 'Desde el hosting personal básico hasta corporativo HD con todo incluido. Encontrá el que mejor se ajusta.'}
        </p>
      </div>

      <PricingGrid plans={other} whatsappUrl={whatsappUrl} />

      <div class="mt-16 text-center">
        <p class="text-sm" style="color: var(--hds-fg-muted);">
          {lang === 'en' ? 'Need a custom plan?' : '¿Necesitás un plan a medida?'} <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="font-semibold" style="color: var(--color-hds-naranja);">{lang === 'en' ? 'Chat with us' : 'Charla con nosotros'}</a>
        </p>
      </div>
    </div>
  </section>
</BaseLayout>
