---
import SectionIntro from "../components/SectionIntro.astro";
import SiteFooter from "../components/SiteFooter.astro";
import BaseLayout from "../layouts/BaseLayout.astro";

const valuePoints = [
  {
    title: "Menos fragmentación técnica",
    description:
      "Desarrollo, infraestructura y operación se abordan como un solo frente técnico."
  },
  {
    title: "Control técnico directo",
    description:
      "Existe criterio técnico continuo desde el diseño hasta la operación."
  },
  {
    title: "Continuidad operativa real",
    description:
      "La solución considera despliegue, soporte, seguridad base y operación posterior."
  },
  {
    title: "Proporción y criterio",
    description:
      "Cada arquitectura se define según el problema real, sin complejidad innecesaria."
  }
];

const services = [
  {
    title: "Desarrollo de software a medida",
    description:
      "Sistemas internos, plataformas de gestión, portales operativos y aplicaciones web construidas para resolver procesos concretos."
  },
  {
    title: "Infraestructura administrada",
    description:
      "Servidores, contenedores, despliegues, hosting, monitoreo base y componentes de soporte administrados con continuidad técnica."
  },
  {
    title: "Correo corporativo y operación digital",
    description:
      "Configuración y soporte de correo, dominios, flujos operativos y herramientas necesarias para una operación ordenada."
  },
  {
    title: "Automatización e integración",
    description:
      "Integración entre software, dispositivos, sensores y procesos físicos cuando la operación requiere más que una interfaz web."
  }
];

const projectTypes = [
  "Sistemas internos para operación, inventario, atención o gestión.",
  "Migración desde procesos manuales o herramientas dispersas.",
  "Infraestructura para alojar y operar servicios con mayor control.",
  "Correo corporativo y ordenamiento técnico base para empresas.",
  "Automatización de tareas, suscripciones, pagos o flujos operativos.",
  "Integración de hardware, controladores o automatización física."
];

const principles = [
  {
    step: "01",
    title: "Levantamiento y criterio inicial",
    description:
      "Se define el problema real, el impacto operativo y el alcance necesario antes de elegir herramientas o arquitectura."
  },
  {
    step: "02",
    title: "Diseño proporcional",
    description:
      "La solución se plantea según tamaño, riesgo y continuidad requerida, evitando sobrediseño y decisiones difíciles de mantener."
  },
  {
    step: "03",
    title: "Implementación con orden",
    description:
      "Desarrollo, despliegue, configuración e integración se ejecutan con trazabilidad y foco en estabilidad técnica."
  },
  {
    step: "04",
    title: "Operación y continuidad",
    description:
      "Se considera soporte, mantenimiento, ajustes y seguimiento para que lo entregado siga siendo útil durante la operación."
  }
];

const coverage = [
  "Desarrollo web y sistemas internos",
  "Infraestructura administrada y despliegue",
  "Correo corporativo y dominios",
  "Automatización de procesos",
  "Integración con servicios externos",
  "Operación técnica y mantenimiento",
  "Monitoreo base y continuidad",
  "Coordinación directa en modalidad remota"
];

const stackTools = [
  {
    name: "Cloudflare",
    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/cloudflare.png"
  },
  {
    name: "Docker",
    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/docker.png"
  },
  {
    name: "Coolify",
    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/coolify.png"
  },
  {
    name: "Mailcow",
    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/mailcow.png"
  },
  {
    name: "Forgejo",
    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/forgejo.png"
  }
];

const whenFits = [
  "Cuando el proyecto requiere desarrollo y también operación posterior.",
  "Cuando hoy existen varios proveedores sin una responsabilidad técnica clara.",
  "Cuando se necesita infraestructura, correo o automatización además del software.",
  "Cuando conviene resolver bien el problema sin sobredimensionar la solución."
];

const avoids = [
  "Fragmentación entre desarrollo, infraestructura y soporte.",
  "Improvisación técnica durante implementación y despliegue.",
  "Dependencias dispersas entre múltiples actores sin contexto.",
  "Falta de continuidad después de la entrega inicial."
];
---

<BaseLayout
  title="Slaksis Chile SpA | Desarrollo, infraestructura y continuidad operativa"
  description="Slaksis Chile SpA desarrolla, implementa y opera soluciones digitales e infraestructura para empresas y organizaciones."
>
  <main class="landing">
    <section class="hero" id="inicio">
      <div class="container hero__inner">
        <header class="site-header" data-reveal>
          <a class="brand" href="#inicio" aria-label="Ir al inicio de Slaksis Chile SpA">
            <span class="brand__mark">SL</span>
            <span class="brand__text">
              <strong>Slaksis Chile SpA</strong>
              <small>Soluciones digitales e infraestructura</small>
            </span>
          </a>

          <nav class="site-nav" aria-label="Navegación principal">
            <a href="#servicios">Servicios</a>
            <a href="#enfoque">Enfoque</a>
            <a href="#cobertura">Cobertura</a>
            <a href="#contacto">Contacto</a>
          </nav>

          <a class="header-mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
        </header>

        <div class="hero__grid">
          <div class="hero__content" data-reveal>
            <p class="eyebrow">Desarrollo, infraestructura y operación técnica para empresas y organizaciones</p>
            <h1>Una solución bien implementada también debe estar bien operada.</h1>
            <p class="hero__lead">
              Slaksis Chile SpA diseña, implementa y sostiene soluciones digitales con criterio técnico directo. El
              alcance incluye desarrollo, infraestructura, correo, automatización y continuidad operativa.
            </p>

            <div class="hero__actions">
              <a class="button button--primary" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20propuesta">
                Solicitar propuesta
              </a>
              <a class="button button--secondary" href="mailto:contacto@slaksis.com?subject=Agendar%20reuni%C3%B3n">
                Agendar reunión
              </a>
            </div>

            <p class="hero__microcopy">
              Modalidad remota con coordinación directa, alcance claro y ejecución ordenada.
            </p>
          </div>

          <aside class="hero__aside" aria-label="Resumen institucional" data-reveal>
            <p class="aside__label">Contacto institucional</p>
            <a class="aside__mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
            <p class="aside__body">
              Canal para evaluación de requerimientos, propuesta y coordinación inicial.
            </p>

            <dl class="aside__details">
              <div>
                <dt>Modalidad</dt>
                <dd>Trabajo remoto con coordinación directa</dd>
              </div>
              <div>
                <dt>Alcance</dt>
                <dd>Desarrollo, infraestructura y operación</dd>
              </div>
              <div>
                <dt>Enfoque</dt>
                <dd>Soluciones proporcionales y continuidad real</dd>
              </div>
            </dl>
          </aside>
        </div>
      </div>
    </section>

    <section class="section section--light" aria-labelledby="propuesta-title">
      <div class="container">
        <SectionIntro
          eyebrow="Propuesta de valor"
          titleId="propuesta-title"
          title="Cuando el desarrollo y la operación técnica quedan separados, la solución pierde continuidad."
          body="Slaksis aborda el proyecto como un sistema completo: diseño, implementación, despliegue y soporte técnico alineados en un mismo frente de trabajo."
        />

        <div class="value-grid">
          {valuePoints.map((item) => (
            <article class="info-card" data-reveal>
              <h3>{item.title}</h3>
              <p>{item.description}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    <section class="section" id="servicios" aria-labelledby="servicios-title">
      <div class="container">
        <SectionIntro
          eyebrow="Servicios principales"
          titleId="servicios-title"
          title="Capacidades para resolver desarrollo, infraestructura y operación sin fragmentar la responsabilidad técnica."
          body="El objetivo es que la solución funcione durante la operación diaria, no solo durante la entrega."
        />

        <div class="service-grid">
          {services.map((service) => (
            <article class="service-card" data-reveal>
              <h3>{service.title}</h3>
              <p>{service.description}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    <section class="section section--tint" aria-labelledby="proyectos-title">
      <div class="container">
        <SectionIntro
          eyebrow="Qué tipo de proyectos atendemos"
          titleId="proyectos-title"
          title="Proyectos donde se necesita criterio técnico, orden de implementación y responsabilidad operativa."
          body="La cobertura incluye iniciativas puntuales y entornos donde hace falta ordenar componentes técnicos que hoy funcionan de forma dispersa."
        />

        <div class="project-grid">
          {projectTypes.map((project) => (
            <article class="project-item" data-reveal>
              <p>{project}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    <section class="section" id="enfoque" aria-labelledby="enfoque-title">
      <div class="container">
        <SectionIntro
          eyebrow="Forma de trabajo"
          titleId="enfoque-title"
          title="Implementación ordenada, decisiones claras y continuidad después de la entrega."
          body="Cada proyecto se aborda con una secuencia simple y defendible, para mantener control técnico durante todo el proceso."
        />

        <ol class="process-grid">
          {principles.map((principle) => (
            <li class="process-card" data-reveal>
              <span class="process-card__step">{principle.step}</span>
              <h3>{principle.title}</h3>
              <p>{principle.description}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>

    <section class="section section--light" aria-labelledby="cuando-title">
      <div class="container">
        <SectionIntro
          eyebrow="Cuándo Tiene Sentido Trabajar Con Slaksis"
          titleId="cuando-title"
          title="Encaja especialmente cuando el proyecto necesita ejecución técnica y continuidad en un mismo frente."
          body="No es un servicio pensado solo para publicar una página. Aplica mejor cuando hay operación, infraestructura o soporte que resolver con criterio."
        />

        <div class="simple-grid">
          {whenFits.map((item) => (
            <article class="simple-card" data-reveal>
              <p>{item}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    <section class="section section--tint" aria-labelledby="evitamos-title">
      <div class="container">
        <SectionIntro
          eyebrow="Lo que evitamos"
          titleId="evitamos-title"
          title="Una solución sólida también se define por los problemas técnicos que evita."
          body="La implementación busca reducir desorden operativo, pérdida de contexto y dependencia innecesaria de múltiples actores."
        />

        <div class="simple-grid">
          {avoids.map((item) => (
            <article class="simple-card simple-card--strong" data-reveal>
              <p>{item}</p>
            </article>
          ))}
        </div>
      </div>
    </section>

    <section class="section section--light" id="cobertura" aria-labelledby="cobertura-title">
      <div class="container coverage">
        <div class="coverage__content" data-reveal>
          <p class="eyebrow">Cobertura técnica</p>
          <h2 id="cobertura-title">No solo se desarrolla software. También se implementa, se configura y se sostiene.</h2>
          <p>
            Slaksis puede participar en los componentes que normalmente quedan dispersos entre varios actores. Eso reduce
            pérdida de contexto y mejora la continuidad técnica.
          </p>

          <article class="backup-note">
            <img
              class="backup-note__icon"
              src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/png/cloudflare.png"
              alt="Cloudflare"
              loading="lazy"
              width="40"
              height="40"
            />
            <div>
              <strong>Respaldos con Cloudflare R2</strong>
              <p>Se pueden implementar backups sobre Cloudflare R2 para reforzar continuidad, resguardo y recuperación.</p>
            </div>
          </article>

          <div class="stack-tools" data-reveal>
            <p class="stack-tools__label">Stack operativo habitual</p>
            <div class="stack-tools__grid">
              {stackTools.map((tool) => (
                <div class="stack-tool">
                  <img src={tool.icon} alt={tool.name} loading="lazy" width="32" height="32" />
                  <span>{tool.name}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <ul class="coverage__list">
          {coverage.map((item) => (
            <li class="coverage__item" data-reveal>{item}</li>
          ))}
        </ul>
      </div>
    </section>

    <section class="section" aria-labelledby="institucional-title">
      <div class="container institutional">
        <article class="institutional__block" data-reveal>
          <p class="eyebrow">Perfil institucional</p>
          <h2 id="institucional-title">Un solo frente técnico para proyectos que necesitan continuidad, seguridad y criterio.</h2>
          <p>
            La propuesta de Slaksis es trabajar con responsabilidad sobre lo implementado: revisar alcance, diseñar con
            proporción, ejecutar con orden y mantener capacidad de respuesta durante la operación.
          </p>
          <p class="institutional__note">El proyecto no queda bloqueado. El código es del cliente.</p>
        </article>

        <article class="institutional__block institutional__block--accent" data-reveal>
          <p class="eyebrow">Dirección</p>
          <h2>Gabriel Rojas</h2>
          <p>
            Gerente General de Slaksis Chile SpA. Formación en Ingeniería Civil en Computación y experiencia aplicada en
            desarrollo de software, infraestructura administrada y ciberseguridad.
          </p>
          <p class="institutional__note">
            Modalidad de trabajo principalmente remota, con coordinación directa y foco en requerimientos bien definidos.
          </p>
        </article>
      </div>
    </section>

    <section class="section section--cta" id="contacto" aria-labelledby="contacto-title">
      <div class="container cta">
        <div class="cta__intro" data-reveal>
          <p class="eyebrow">Contacto</p>
          <h2 id="contacto-title">Si el proyecto requiere evaluación técnica seria, el siguiente paso es revisar alcance y contexto operativo.</h2>
          <p>
            La primera conversación sirve para entender requerimientos, riesgos y nivel de soporte necesario.
          </p>
        </div>

        <div class="cta__panel" data-reveal>
          <a class="cta__mail" href="mailto:contacto@slaksis.com">contacto@slaksis.com</a>
          <p>
            Correo institucional para evaluación de proyecto, propuesta inicial y coordinación de reunión.
          </p>

          <div class="cta__actions">
            <a class="button button--light" href="mailto:contacto@slaksis.com?subject=Solicitud%20de%20propuesta">
              Solicitar evaluación de proyecto
            </a>
            <a class="button button--light-outline" href="mailto:contacto@slaksis.com?subject=Agendar%20reuni%C3%B3n">
              Agendar reunión
            </a>
          </div>
        </div>
      </div>
    </section>
  </main>

  <SiteFooter />

  <script is:inline>
    document.documentElement.classList.add("js");

    const elements = document.querySelectorAll("[data-reveal]");
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            observer.unobserve(entry.target);
          }
        }
      },
      {
        threshold: 0.14,
        rootMargin: "0px 0px -10% 0px"
      }
    );

    for (const element of elements) {
      observer.observe(element);
    }
  </script>
</BaseLayout>