---
import BaseLayout from '@/layouts/BaseLayout.astro';
import SectionEyebrow from '@/components/SectionEyebrow.astro';
import { getLangFromUrl, useTranslations } from '@/i18n/utils';

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

const categories = [
  { key: 'correo', title: lang === 'en' ? 'Email' : 'Correo electrónico', desc: lang === 'en' ? 'Configuration in clients, IMAP/SMTP, webmail.' : 'Configuración en clientes, IMAP/SMTP, webmail.' },
  { key: 'wordpress', title: 'WordPress', desc: lang === 'en' ? 'Updates, backups, restoration, security.' : 'Actualizaciones, backups, restauración, seguridad.' },
  { key: 'dominios', title: lang === 'en' ? 'Domains & DNS' : 'Dominios y DNS', desc: lang === 'en' ? 'Point a domain, transfers, DNS records.' : 'Apuntar un dominio, transferencias, registros DNS.' },
  { key: 'cpanel', title: 'cPanel', desc: lang === 'en' ? 'Email accounts, FTP, databases, files.' : 'Cuentas de correo, FTP, bases de datos, archivos.' },
  { key: 'ssl', title: lang === 'en' ? 'SSL certificates' : 'Certificados SSL', desc: lang === 'en' ? 'Install, renewal, force HTTPS.' : 'Instalación, renovación, HTTPS forzado.' },
  { key: 'backups', title: lang === 'en' ? 'Backups' : 'Respaldos', desc: lang === 'en' ? 'JetBackup, file and email restoration.' : 'JetBackup, restauración de archivos y correos.' },
];
---
<BaseLayout
  title={lang === 'en' ? 'Tutorials' : 'Instructivos'}
  description={lang === 'en'
    ? 'Step-by-step guides to the most common questions from Hosting del Sur clients.'
    : 'Guías paso a paso para las consultas más frecuentes de los clientes de Hosting del Sur.'}
  lang={lang}
>
  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionEyebrow text={lang === 'en' ? 'Knowledge base' : 'Base de conocimiento'} />
      <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
        {lang === 'en' ? 'Tutorials' : 'Instructivos'}.
      </h1>
      <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
        {lang === 'en'
          ? 'Step-by-step guides for the questions we receive most often. We are preparing detailed tutorials for each category.'
          : 'Guías paso a paso para las preguntas que más recibimos. Estamos preparando instructivos detallados para cada categoría.'}
      </p>
    </div>
  </section>

  <section class="py-20 md:py-24" style="background: var(--hds-bg);">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="rounded-2xl p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6" style="background: linear-gradient(135deg, rgba(238,118,35,0.08) 0%, rgba(250,159,92,0.12) 100%); border: 1px solid rgba(238,118,35,0.25);">
        <div>
          <h2 class="text-xl font-semibold mb-2" style="color: var(--hds-fg);">
            {lang === 'en' ? 'Coming soon' : 'Próximamente'}
          </h2>
          <p style="color: var(--hds-fg-soft);">
            {lang === 'en'
              ? 'We are writing detailed tutorials for each category. In the meantime, write to us on WhatsApp and we will help you right away.'
              : 'Estamos escribiendo instructivos detallados para cada categoría. Mientras tanto, escribinos por WhatsApp y te ayudamos al instante.'}
          </p>
        </div>
        <a
          href={whatsappUrl}
          target="_blank"
          rel="noopener noreferrer"
          class="btn-primary text-sm flex-shrink-0"
        >
          {lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
        </a>
      </div>

      <h2 class="text-2xl mb-6 font-display" style="color: var(--hds-fg);">
        {lang === 'en' ? 'Categories' : 'Categorías'}
      </h2>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {categories.map((cat) => (
          <div class="service-card">
            <h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">{cat.title}</h3>
            <p class="text-sm mb-3" style="color: var(--hds-fg-soft);">{cat.desc}</p>
            <p class="text-xs italic" style="color: var(--hds-fg-muted);">
              {lang === 'en' ? 'No tutorials yet' : 'Sin instructivos aún'}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
</BaseLayout>