---
import BaseLayout from '@/layouts/BaseLayout.astro';
import SectionEyebrow from '@/components/SectionEyebrow.astro';
import PricingTiersFeatured from '@/components/PricingTiersFeatured.astro';
import CloudDivider from '@/components/CloudDivider.astro';
import CtaFinal from '@/components/CtaFinal.astro';
import { 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' : '';

// 5 visible plans on home — Empresarial as hero
const VISIBLE_SLUGS = ['basico', 'institucional', 'empresarial', 'e-commerce', 'avanzado'];
const visible = PLANS.filter(p => VISIBLE_SLUGS.includes(p.slug));
const empresarial = PLANS.find(p => p.slug === 'empresarial');
const visibleWithoutHero = visible.filter(p => p.slug !== 'empresarial');
const advanced = PLANS.filter(p => !VISIBLE_SLUGS.includes(p.slug));

function monthly(annual: number): string {
  return (annual / 12).toFixed(2);
}
---
<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-24 pb-16 md:pt-32 md:pb-20 relative overflow-hidden" style="background: var(--hds-bg-soft);">
    <div class="absolute inset-0" style="background: var(--hds-gradient-hero);" aria-hidden="true"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
      <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);">
        {lang === 'en' ? 'Plans designed around your' : 'Planes pensados alrededor de tu'} <span style="color: var(--color-hds-naranja);">{lang === 'en' ? 'project' : 'proyecto'}</span>.
      </h1>
      <p class="text-lg mt-5 max-w-2xl mx-auto" style="color: var(--hds-fg-soft);">
        {lang === 'en'
          ? 'Prices in USD, billed annually. No surprises, no hidden costs.'
          : 'Precios en USD, facturación anual. Sin sorpresas, sin costos ocultos.'}
      </p>
    </div>
  </section>

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

  <!-- Hero plan: Empresarial (glass-card-hero) -->
  {empresarial && (
    <section class="py-16 md:py-24" style="background: var(--hds-bg);">
      <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-8">
          <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold tracking-[0.2em] uppercase mb-4" style="background: var(--hds-bg-soft); color: var(--color-hds-naranja);">
            {lang === 'en' ? 'Most popular' : 'El más elegido'}
          </span>
        </div>

        <article class="glass-card glass-card-hero p-8 md:p-12 text-center">
          <div class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">
            {empresarial.name}
          </div>
          <div class="flex items-baseline justify-center gap-1.5 mb-6">
            <span class="text-lg font-semibold" style="color: var(--hds-fg-soft);">US$</span>
            <span class="font-display leading-none" style="font-size: 5rem; color: var(--hds-fg); font-weight: 500; letter-spacing: -0.03em;">{empresarial.priceUsdYear}</span>
            <span class="text-lg" style="color: var(--hds-fg-soft);">/año</span>
          </div>
          <div class="text-sm mb-8" style="color: var(--hds-fg-muted);">
            (US${monthly(empresarial.priceUsdYear)}/mes)
          </div>

          <div class="border-t pt-6 mb-8" style="border-color: var(--glass-border);">
            <ul class="grid grid-cols-2 gap-2.5 text-sm text-left max-w-md mx-auto">
              {empresarial.features.map(f => (
                <li class="flex items-start gap-2.5">
                  <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" class="flex-shrink-0 mt-0.5" style="color: var(--color-hds-naranja);" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                  <span style="color: var(--hds-fg-soft);">{f}</span>
                </li>
              ))}
            </ul>
          </div>

          <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-primary text-base px-10 inline-flex">
            {lang === 'en' ? 'Choose' : 'Elegir'} {empresarial.name}
          </a>
        </article>
      </div>
    </section>
  )}

  <!-- 4 secondary plans (glass cards in 2-col grid) -->
  <section class="py-12 md:py-16" style="background: var(--hds-bg);">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-10">
        <h2 class="font-display" style="font-size: clamp(1.5rem, 3.5vw, 2.25rem); color: var(--hds-fg);">
          {lang === 'en' ? 'More options for every need' : 'Más opciones para cada necesidad'}
        </h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 stagger">
        {visibleWithoutHero.map(plan => (
          <article class="glass-card p-8 flex flex-col h-full">
            <div class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style={`color: ${plan.slug === 'institucional' ? 'var(--color-hds-naranja)' : 'var(--hds-fg-muted)'};`}>
              {plan.slug === 'institucional' ? `⭐ ${plan.name} (recomendado)` : plan.name}
            </div>
            <div class="flex items-baseline gap-1 mb-3">
              <span class="text-lg font-semibold" style="color: var(--hds-fg-soft);">US$</span>
              <span class="font-display leading-none" style="font-size: 3.5rem; color: var(--hds-fg); font-weight: 500; letter-spacing: -0.03em;">{plan.priceUsdYear}</span>
              <span class="text-sm" style="color: var(--hds-fg-soft);">/año</span>
            </div>
            <div class="text-xs mb-6" style="color: var(--hds-fg-muted);">
              (US${monthly(plan.priceUsdYear)}/mes)
            </div>

            <div class="border-t pt-5 mb-6 flex-grow" style="border-color: var(--glass-border);">
              <ul class="space-y-2 text-sm">
                {plan.features.slice(0, 5).map(f => (
                  <li class="flex items-start gap-2.5">
                    <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" class="flex-shrink-0 mt-0.5" style="color: var(--color-hds-naranja);" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                    <span style="color: var(--hds-fg-soft);">{f}</span>
                  </li>
                ))}
              </ul>
              {plan.features.length > 5 && (
                <p class="text-xs mt-3 italic" style="color: var(--hds-fg-muted);">
                  +{plan.features.length - 5} características más
                </p>
              )}
            </div>

            <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-secondary justify-center">
              {lang === 'en' ? 'Choose' : 'Elegir'} {plan.name}
            </a>
          </article>
        ))}
      </div>
    </div>
  </section>

  <!-- Advanced plans accordion -->
  <section class="py-12 md:py-20" style="background: var(--hds-bg);">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
      <details class="group">
        <summary class="flex items-center justify-between cursor-pointer py-4 px-6 rounded-2xl glass-card">
          <div>
            <span class="font-semibold" style="color: var(--hds-fg);">
              {lang === 'en' ? 'Advanced plans' : 'Planes avanzados'}
            </span>
            <span class="text-sm ml-3" style="color: var(--hds-fg-muted);">
              {lang === 'en' ? `${advanced.length} plans for high-demand projects` : `${advanced.length} planes para proyectos de alta demanda`}
            </span>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-open:rotate-180" style="color: var(--color-hds-naranja);" aria-hidden="true">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </summary>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-6">
          {advanced.map(plan => (
            <article class="glass-card p-6 flex flex-col h-full">
              <div class="text-xs font-semibold tracking-[0.2em] uppercase mb-3" style="color: var(--hds-fg-muted);">
                {plan.name}
              </div>
              <div class="flex items-baseline gap-1 mb-2">
                <span class="text-sm font-semibold" style="color: var(--hds-fg-soft);">US$</span>
                <span class="font-display leading-none" style="font-size: 2.75rem; color: var(--hds-fg); font-weight: 500; letter-spacing: -0.03em;">{plan.priceUsdYear}</span>
                <span class="text-xs" style="color: var(--hds-fg-soft);">/año</span>
              </div>
              <div class="text-xs mb-4" style="color: var(--hds-fg-muted);">
                (US${monthly(plan.priceUsdYear)}/mes)
              </div>

              <div class="border-t pt-4 mb-5 flex-grow" style="border-color: var(--glass-border);">
                <ul class="space-y-1.5 text-sm">
                  {plan.features.slice(0, 5).map(f => (
                    <li class="flex items-start gap-2.5">
                      <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" class="flex-shrink-0 mt-0.5" style="color: var(--color-hds-naranja);" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                      <span style="color: var(--hds-fg-soft);">{f}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-ghost justify-center text-sm">
                {lang === 'en' ? 'Choose' : 'Elegir'} {plan.name}
              </a>
            </article>
          ))}
        </div>
      </details>
    </div>
  </section>

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

  <!-- CTA -->
  <section class="py-16 md:py-24" style="background: var(--hds-bg-soft);">
    <div class="max-w-2xl mx-auto px-4 text-center">
      <p class="text-sm mb-4" style="color: var(--hds-fg-muted);">
        {lang === 'en' ? 'Need a custom plan?' : '¿Necesitás un plan a medida?'}
      </p>
      <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="btn-primary text-base px-10 inline-flex">
        {lang === 'en' ? 'Let us talk' : 'Charlemos'}
      </a>
    </div>
  </section>
</BaseLayout>