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

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const whatsappUrl = 'https://wa.me/59899812487';
---
<BaseLayout
  title={lang === 'en' ? 'About us' : 'Nosotros'}
  description={lang === 'en'
    ? 'Since 2000, Hosting del Sur provides technology services with a human touch from Maldonado, Uruguay, across four countries.'
    : 'Desde 2000, Hosting del Sur brinda servicios de tecnología con atención humana desde Maldonado, Uruguay, con alcance en cuatro países.'}
  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' ? 'About us' : 'Nosotros'} />
      <h1 class="font-display leading-tight mt-5 max-w-4xl" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
        {lang === 'en'
          ? <>Technology with a <span style="color: var(--color-hds-naranja); font-style: italic;">human face</span> since 2000.</>
          : <>Tecnología con <span style="color: var(--color-hds-naranja); font-style: italic;">cara de persona</span> desde 2000.</>}
      </h1>
    </div>
  </section>

  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="prose prose-lg max-w-none" style="color: var(--hds-fg-soft);">
        <p class="text-lg leading-relaxed" style="color: var(--hds-fg-soft);">
          {lang === 'en'
            ? 'We are a small team of senior SysAdmins and SREs based in Maldonado, Uruguay. We work with clients across Latin America and the world.'
            : 'Somos un equipo chico de SysAdmins y SREs senior, radicados en Maldonado, Uruguay. Trabajamos con clientes de toda Latinoamérica y el mundo.'}
        </p>

        <h2 class="font-display mt-12 mb-4" style="color: var(--hds-fg); font-size: 2rem;">
          {lang === 'en' ? 'Our story' : 'Nuestra historia'}
        </h2>
        <p>
          {lang === 'en'
            ? 'Hosting del Sur was born in 2000 as a hosting services provider for Uruguayan businesses. From the beginning we were clear: we wanted to offer enterprise-level technology with the closeness of a small team. Twenty-six years later we are still the same — fewer tickets, real names, infrastructure we know by heart.'
            : 'Hosting del Sur nació en el año 2000 como proveedor de servicios de hosting para empresas uruguayas. Desde el principio teníamos claro: queríamos ofrecer tecnología de nivel enterprise con la cercanía de un equipo chico. Veintiséis años después seguimos siendo lo mismo — menos tickets, nombres reales, infraestructura que conocemos de memoria.'}
        </p>

        <h2 class="font-display mt-12 mb-4" style="color: var(--hds-fg); font-size: 2rem;">
          {lang === 'en' ? 'What we believe' : 'En qué creemos'}
        </h2>
        <ul class="space-y-2" style="color: var(--hds-fg-soft);">
          <li><strong style="color: var(--hds-fg);">{lang === 'en' ? 'A real person answers.' : 'Una persona real te responde.'}</strong> {lang === 'en' ? 'Always.' : 'Siempre.'}</li>
          <li><strong style="color: var(--hds-fg);">{lang === 'en' ? 'You own your data.' : 'Tus datos son tuyos.'}</strong> {lang === 'en' ? 'We just host it.' : 'Nosotros solo los hospedamos.'}</li>
          <li><strong style="color: var(--hds-fg);">{lang === 'en' ? 'Open source first.' : 'Open source primero.'}</strong> {lang === 'en' ? 'Vendor lock-in never.' : 'Vendor lock-in nunca.'}</li>
          <li><strong style="color: var(--hds-fg);">{lang === 'en' ? 'No magic, no jargon.' : 'Sin magia, sin jerga.'}</strong> {lang === 'en' ? 'We explain what we do.' : 'Explicamos lo que hacemos.'}</li>
        </ul>
      </div>
    </div>
  </section>

  <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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <div>
          <SectionEyebrow text={lang === 'en' ? 'Where we work' : 'Dónde trabajamos'} />
          <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 4.5vw, 3rem); color: var(--hds-fg);">
            {lang === 'en'
              ? <>Four countries,<br/><span style="color: var(--color-hds-naranja); font-style: italic;">one team</span>.</>
              : <>Cuatro países,<br/><span style="color: var(--color-hds-naranja); font-style: italic;">un equipo</span>.</>}
          </h2>
          <p class="text-lg mt-5" style="color: var(--hds-fg-soft);">
            {lang === 'en'
              ? 'We operate from Maldonado, Uruguay, with infrastructure distributed across four countries: Canada, the United States, Germany and Uruguay. We combine providers in three regions with our own equipment in Uruguay to give you redundancy, low latency and data sovereignty.'
              : 'Operamos desde Maldonado, Uruguay, con infraestructura distribuida en cuatro países: Canadá, Estados Unidos, Alemania y Uruguay. Combinamos proveedores en tres regiones con equipos propios en Uruguay para darte redundancia, baja latencia y soberanía de datos.'}
          </p>

          <ul class="mt-8 space-y-3 text-sm" style="color: var(--hds-fg-soft);">
            <li class="flex items-start gap-3">
              <span class="mt-1.5 w-2 h-2 rounded-full flex-shrink-0" style="background: var(--color-hds-naranja);"></span>
              <span><strong style="color: var(--hds-fg);">{lang === 'en' ? 'Canada, USA, Germany:' : 'Canadá, USA, Alemania:'}</strong> {lang === 'en' ? 'provider infrastructure.' : 'infraestructura de proveedores.'}</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="mt-1.5 w-2 h-2 rounded-full flex-shrink-0" style="background: var(--color-hds-naranja);"></span>
              <span><strong style="color: var(--hds-fg);">{lang === 'en' ? 'Uruguay:' : 'Uruguay:'}</strong> {lang === 'en' ? 'our own equipment and headquarters.' : 'equipos propios y sede operativa.'}</span>
            </li>
          </ul>
        </div>

        <div class="rounded-2xl p-6 lg:p-8" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
          <WorldMap class="w-full h-auto" />
        </div>
      </div>
    </div>
  </section>

  <CtaFinal t={t} whatsappUrl={whatsappUrl} />
</BaseLayout>