/* Builders Alpha Tech — sample slide layouts. 1280×720 design frame.
   Every slide is composed from the design-system components; nothing is re-implemented here. */
const NS = window.BuildersAlphaTechDesignSystem_589e10;
const { SectionLabel, IconTile, ServiceCard, StatFigure, ProcessStep, Callout, Logo, Card, Badge, Button, Icon, Divider } = NS;

const ASSETS = "../assets";

function Slide({ children, tone = "dark", grid = true, style }) {
  const dark = tone === "dark";
  return (
    <div
      data-theme={dark ? "dark" : undefined}
      style={{
        position: "relative", width: 1280, height: 720, overflow: "hidden",
        background: dark ? "var(--teal-900)" : "var(--slate-000)",
        backgroundImage: grid ? "var(--grid-overlay)" : undefined,
        backgroundSize: "64px 64px",
        fontFamily: "var(--font-text)",
        display: "flex", flexDirection: "column",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

function SlideHeader({ kicker, title, tone = "dark", index }) {
  const dark = tone === "dark";
  return (
    <div style={{ padding: "48px 64px 0", display: "flex", flexDirection: "column", gap: "14px" }}>
      <SectionLabel tone={dark ? "inverse" : "default"} index={index}>{kicker}</SectionLabel>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: "44px", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.06, margin: 0, maxWidth: "22ch", color: dark ? "var(--slate-000)" : "var(--teal-900)" }}>{title}</h2>
    </div>
  );
}

function SlideFooter({ tone = "dark", left, right }) {
  const dark = tone === "dark";
  return (
    <div style={{ marginTop: "auto", padding: "0 64px 30px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20 }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.12em", textTransform: "uppercase", color: dark ? "var(--slate-400)" : "var(--slate-400)" }}>{left}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.12em", color: dark ? "var(--slate-400)" : "var(--slate-400)" }}>{right}</span>
    </div>
  );
}

/* ---------------- 01 · Title ---------------- */
function TitleSlide() {
  return (
    <Slide tone="dark">
      <div style={{ position: "absolute", right: -120, top: -120, width: 520, height: 520, border: "1px solid rgba(0,150,222,.28)", borderRadius: "50%" }} />
      <div style={{ position: "absolute", right: 60, bottom: -80, width: 300, height: 300, border: "1px solid rgba(242,160,61,.22)", borderRadius: "50%" }} />
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 6, background: "var(--blue-500)" }} />
      <div style={{ padding: "56px 64px 0", display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
        <SectionLabel tone="inverse">Jornada de proveedores PCR Conecta · Malargüe · 9.09.2026</SectionLabel>
        <Logo variant="mark" tone="light" height={54} basePath={ASSETS} />
      </div>
      <div style={{ padding: "0 64px", marginTop: 68, display: "flex", flexDirection: "column", gap: 22, position: "relative" }}>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: "84px", fontWeight: 800, letterSpacing: "-0.035em", lineHeight: 0.96, margin: 0, color: "var(--slate-000)" }}>
          Builders<br />Alpha Tech
        </h1>
        <p style={{ fontSize: "23px", lineHeight: 1.3, margin: 0, color: "var(--blue-300)", maxWidth: "24ch", fontWeight: 500 }}>
          Ingeniería y tecnología para la industria energética
        </p>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 6, maxWidth: 720 }}>
          {["Software a medida", "Infraestructura y sistemas", "Inteligencia artificial", "Ciberseguridad", "Ingeniería Civil e Industrial"].map((t) => (
            <span key={t} style={{ fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.06em", color: "var(--slate-300)", border: "1px solid var(--border-inverse-strong)", padding: "6px 10px", borderRadius: 2 }}>{t}</span>
          ))}
        </div>
      </div>
      <div style={{ marginTop: "auto", borderTop: "1px solid var(--border-inverse)", padding: "22px 64px 26px", display: "flex", gap: 64 }}>
        {[["Hernán Abeldaño", "CTO · Ingeniero civil / software engineer", "hernan@buildersalfatech.com"],
          ["Federico Abeldaño", "CEO · Ingeniero industrial / software engineer", "federico@buildersalfatech.com"]].map(([n, r, m]) => (
          <div key={n} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            <span style={{ fontFamily: "var(--font-display)", fontSize: "17px", fontWeight: 700, color: "var(--slate-000)" }}>{n}</span>
            <span style={{ fontSize: "13px", color: "var(--slate-400)" }}>{r}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "12px", color: "var(--blue-300)" }}>{m}</span>
          </div>
        ))}
      </div>
    </Slide>
  );
}

/* ---------------- 02 · Quiénes somos ---------------- */
function AboutSlide() {
  const leads = [
    ["compass", "Dirección técnica", "Ingeniería Civil — obra, infraestructura y arquitectura de sistemas."],
    ["workflow", "Dirección de operaciones", "Ingeniería Industrial — procesos, gestión de proyectos y mejora continua."],
    ["users", "Equipo multidisciplinario", "Desarrollo, infraestructura, datos y seguridad, con base en Argentina."],
  ];
  return (
    <Slide tone="light">
      <SlideHeader tone="light" index="02 / 09" kicker="Quiénes somos" title="Builders que construyen tecnología" />
      <div style={{ padding: "34px 64px 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 44, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <p style={{ fontSize: "17.5px", lineHeight: 1.55, margin: 0, color: "var(--teal-900)", fontWeight: 500 }}>
            <strong style={{ fontWeight: 700 }}>Builders Alpha Tech nace del cruce entre la ingeniería y el software.</strong>{" "}
            Diseñamos, construimos y operamos los sistemas que sostienen la operación: desde la aplicación
            que usa el equipo todos los días hasta la infraestructura y la inteligencia artificial que
            corren por detrás.
          </p>
          <p style={{ fontSize: "16px", lineHeight: 1.6, margin: 0, color: "var(--slate-500)" }}>
            Nuestro diferencial no es solo técnico: venimos de la ingeniería, entendemos cómo funciona una
            obra y una planta, y eso cambia por completo la forma en que se resuelve un problema con software.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {leads.map(([icon, title, desc]) => (
            <Card key={title} tone="quiet" padding="22px" style={{ flexDirection: "row", gap: 18, alignItems: "flex-start" }}>
              <IconTile name={icon} tone="solid" size="sm" />
              <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: "17px", fontWeight: 700, margin: 0, color: "var(--teal-900)" }}>{title}</h4>
                <p style={{ fontSize: "13.5px", lineHeight: 1.5, margin: 0, color: "var(--slate-500)" }}>{desc}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
      <SlideFooter tone="light" left="Builders Alpha Tech" right="02 / 09" />
    </Slide>
  );
}

/* ---------------- 03 · Services grid ---------------- */
function ServicesSlide() {
  const items = [
    ["code-xml", "Desarrollo de software y SaaS", "Aplicaciones a medida y plataformas propias en modelo SaaS: gestión operativa, trazabilidad, integraciones con sistemas existentes."],
    ["server-cog", "Infraestructura y sistemas", "Servidores, redes, virtualización, nube y cloud privada. Diseño, implementación y operación."],
    ["life-buoy", "Soporte y mantenimiento", "Mantenimiento evolutivo y correctivo de sistemas propios y heredados. Mesa de ayuda y niveles de servicio acordados."],
    ["cpu", "Inteligencia artificial", "Infraestructura de inferencia y servicios de IA, en nube pública o cloud local dentro de la empresa."],
    ["shield-check", "Ciberseguridad", "Diagnóstico, hardening, segmentación IT/OT, monitoreo y respuesta a incidentes."],
    ["ruler", "Servicios de ingeniería", "Ingeniería civil e industrial: proyectos, dirección técnica, procesos y digitalización de obra."],
  ];
  return (
    <Slide tone="light">
      <SlideHeader tone="light" index="03 / 09" kicker="Qué hacemos" title="Seis líneas de servicio, un solo interlocutor" />
      <div style={{ padding: "34px 64px 0", display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20 }}>
        {items.map(([icon, title, description]) => (
          <ServiceCard key={title} icon={icon} title={title} description={description} />
        ))}
      </div>
      <SlideFooter tone="light" left="Builders Alpha Tech" right="03 / 09" />
    </Slide>
  );
}

/* ---------------- 04 · Focus / two-by-two on dark ---------------- */
function FocusSlide() {
  const items = [
    ["activity", "Mantenimiento predictivo", "Modelos sobre datos de sensores e historial de fallas para anticipar paradas en bombeo, compresión y equipos críticos."],
    ["cctv", "Visión artificial en campo", "Uso de EPP, control de accesos, lectura automática de instrumentos y monitoreo de instalaciones sobre las cámaras ya instaladas."],
    ["file-search", "Asistentes documentales", "Consulta en lenguaje natural sobre procedimientos, normativa, planos y contratos, con la respuesta citando la fuente."],
    ["chart-column", "Analítica y reportería", "Datos de producción, mantenimiento y proveedores integrados en un tablero único, con reportes generados automáticamente."],
  ];
  return (
    <Slide tone="dark">
      <SlideHeader index="04 / 09" kicker="Foco" title="IA aplicada a la industria energética" />
      <div style={{ padding: "36px 64px 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {items.map(([icon, title, desc]) => (
          <Card key={title} tone="inverse" padding="26px" style={{ gap: 16, flexDirection: "row", alignItems: "flex-start" }}>
            <IconTile name={icon} tone="amber" size="lg" />
            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: "20px", fontWeight: 700, margin: 0, color: "var(--slate-000)" }}>{title}</h4>
              <p style={{ fontSize: "14.5px", lineHeight: 1.5, margin: 0, color: "var(--slate-300)" }}>{desc}</p>
            </div>
          </Card>
        ))}
      </div>
      <SlideFooter left="Builders Alpha Tech" right="04 / 09" />
    </Slide>
  );
}

/* ---------------- 05 · Differentiator ---------------- */
function DifferentiatorSlide() {
  const modes = [
    ["server", "Cloud local", "Servidores de inferencia con GPU dentro de la empresa. El dato no sale de la red corporativa."],
    ["cloud-cog", "Híbrido", "Lo sensible se procesa en la cloud local; el resto aprovecha la escala de la nube pública."],
    ["cloud", "Nube pública", "Despliegue rápido y elástico cuando el caso de uso no involucra información crítica."],
  ];
  return (
    <Slide tone="light">
      <SlideHeader tone="light" index="05 / 09" kicker="Diferencial" title="Inteligencia artificial sin ceder el dato" />
      <div style={{ padding: "34px 64px 0", display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20 }}>
        {modes.map(([icon, title, desc], i) => (
          <Card key={title} tone="quiet" accent={i === 0} padding="26px" style={{ gap: 18 }}>
            <IconTile name={icon} tone={i === 0 ? "accent" : "solid"} size="lg" />
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: "22px", fontWeight: 700, margin: 0, color: "var(--teal-900)" }}>{title}</h4>
              <p style={{ fontSize: "14.5px", lineHeight: 1.5, margin: 0, color: "var(--slate-500)" }}>{desc}</p>
            </div>
          </Card>
        ))}
      </div>
      <div style={{ padding: "28px 64px 0" }}>
        <Callout icon="lock" tone="inverse">
          Montamos y operamos la infraestructura de inferencia. Con modelos abiertos corriendo sobre hardware
          propio, la información sensible —producción, contratos, ingeniería— nunca sale de la organización.
        </Callout>
      </div>
      <SlideFooter tone="light" left="Builders Alpha Tech" right="05 / 09" />
    </Slide>
  );
}

/* ---------------- 06 · Split: list + quote panel ---------------- */
function SplitSlide() {
  const rows = [
    ["search", "Diagnóstico y hardening", "Relevamiento de superficie expuesta, gestión de vulnerabilidades y endurecimiento de servidores, redes y puestos de trabajo."],
    ["network", "Seguridad IT / OT", "Segmentación entre la red corporativa y la de automatización, y accesos remotos controlados a instalaciones."],
    ["radar", "Monitoreo y respuesta", "Detección de incidentes, esquema de backup y plan de recuperación efectivamente probado."],
    ["users", "Personas y cumplimiento", "Capacitación, simulacros de phishing y políticas alineadas a estándares reconocidos."],
  ];
  return (
    <Slide tone="light">
      <SlideHeader tone="light" index="06 / 09" kicker="Ciberseguridad" title="Continuidad operativa, no solo informática" />
      <div style={{ padding: "34px 64px 0", display: "grid", gridTemplateColumns: "1fr 372px", gap: 32, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {rows.map(([icon, title, desc], i) => (
            <div key={title} style={{ display: "grid", gridTemplateColumns: "48px 1fr", gap: 18, padding: "18px 0", borderTop: i === 0 ? "none" : "1px solid var(--border-hairline)" }}>
              <IconTile name={icon} tone="solid" size="sm" />
              <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: "18px", fontWeight: 700, margin: 0, color: "var(--teal-900)" }}>{title}</h4>
                <p style={{ fontSize: "14px", lineHeight: 1.5, margin: 0, color: "var(--slate-500)" }}>{desc}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ background: "var(--teal-900)", padding: "32px 30px", borderRadius: "var(--radius-card)", display: "flex", flexDirection: "column", gap: 22, alignSelf: "stretch" }}>
          <IconTile name="shield-alert" tone="amber" size="lg" />
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: "26px", fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.02em", margin: 0, color: "var(--slate-000)" }}>
            Un incidente informático ya no frena una oficina: frena una operación.
          </h3>
          <p style={{ fontSize: "14.5px", lineHeight: 1.55, margin: 0, color: "var(--slate-300)" }}>
            Trabajamos la seguridad como parte del diseño del sistema, no como un agregado posterior.
          </p>
        </div>
      </div>
      <SlideFooter tone="light" left="Builders Alpha Tech" right="06 / 09" />
    </Slide>
  );
}

/* ---------------- 07 · Method / process ---------------- */
function MethodSlide() {
  const services = [
    "Proyectos y dirección técnica de obra civil e infraestructura.",
    "Gestión de proyectos, planificación y control de avance.",
    "Análisis de procesos, productividad y mejora continua.",
    "Digitalización de obra: relevamiento, seguimiento y trazabilidad documental.",
  ];
  return (
    <Slide tone="light">
      <SlideHeader tone="light" index="07 / 09" kicker="Ingeniería y método" title="Del relevamiento en campo a producción" />
      <div style={{ padding: "34px 64px 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "stretch" }}>
        <Card tone="quiet" padding="30px" style={{ gap: 20 }}>
          <IconTile name="hard-hat" tone="solid" size="lg" />
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: "24px", fontWeight: 700, margin: 0, color: "var(--teal-900)" }}>Servicios de ingeniería</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {services.map((s) => (
              <div key={s} style={{ display: "grid", gridTemplateColumns: "18px 1fr", gap: 12, alignItems: "start" }}>
                <span style={{ marginTop: 3, color: "var(--action-primary)" }}><Icon name="check" size={16} strokeWidth={2.4} /></span>
                <span style={{ fontSize: "15px", lineHeight: 1.5, color: "var(--slate-500)" }}>{s}</span>
              </div>
            ))}
          </div>
        </Card>
        <div style={{ background: "var(--teal-900)", padding: "30px", borderRadius: "var(--radius-card)", display: "flex", flexDirection: "column", gap: 22 }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontSize: "24px", fontWeight: 700, margin: 0, color: "var(--slate-000)" }}>Cómo trabajamos</h3>
          <div>
            <ProcessStep tone="inverse" step="1" title="Relevamiento en campo" description="Entendemos el proceso real antes de proponer nada." />
            <ProcessStep tone="inverse" step="2" title="Piloto acotado" description="Un caso de uso, alcance cerrado y resultado medible en semanas." />
            <ProcessStep tone="inverse" step="3" title="Producción y soporte" description="Escalamos lo que funciona, con mantenimiento y niveles de servicio." last />
          </div>
        </div>
      </div>
      <SlideFooter tone="light" left="Builders Alpha Tech" right="07 / 09" />
    </Slide>
  );
}

/* ---------------- 08 · Credentials ---------------- */
function CredentialsSlide() {
  const cards = [
    ["building-2", "Municipalidad de Malargüe", "Obra pública e infraestructura", "Redes de gas y de agua, establecimientos educativos e infraestructura urbana."],
    ["atom", "Comisión Nacional de Energía Atómica", "Tecnologías emergentes", "Inteligencia artificial, computación cuántica y computación de alta prestación."],
    ["gauge", "Aconcagua Energía", "Upstream · IA aplicada", "Aplicativo de medición de pozos con cámaras e IA, y tableros de Power BI para controles operativos."],
  ];
  return (
    <Slide tone="dark">
      <SlideHeader index="08 / 09" kicker="Trayectoria" title="Seguridad, obra pública y tecnología de frontera" />
      <div style={{ padding: "30px 64px 0", display: "flex", flexDirection: "column", gap: 20 }}>
        <div style={{ background: "var(--teal-800)", border: "1px solid var(--border-inverse)", borderRadius: "var(--radius-card)", padding: "24px 28px", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 26, alignItems: "center" }}>
          <IconTile name="badge-check" tone="amber" size="lg" />
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--mint-400)" }}>Ciberseguridad</span>
            <h4 style={{ fontFamily: "var(--font-display)", fontSize: "21px", fontWeight: 700, margin: 0, color: "var(--slate-000)" }}>Auditorías de seguridad internacionales</h4>
            <p style={{ fontSize: "14px", lineHeight: 1.45, margin: 0, color: "var(--slate-300)", maxWidth: "62ch" }}>
              Múltiples protocolos y plataformas internacionales auditados bajo programas de divulgación responsable.
            </p>
          </div>
          <StatFigure tone="inverse" size="lg" value="USD 100.000" label="en un único hallazgo crítico" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20 }}>
          {cards.map(([icon, title, kicker, desc]) => (
            <Card key={title} tone="inverse" padding="24px" style={{ gap: 16 }}>
              <IconTile name={icon} tone="amber" size="md" />
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <h4 style={{ fontFamily: "var(--font-display)", fontSize: "17px", fontWeight: 700, margin: 0, lineHeight: 1.2, color: "var(--slate-000)" }}>{title}</h4>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "10.5px", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mint-400)" }}>{kicker}</span>
                <p style={{ fontSize: "13.5px", lineHeight: 1.5, margin: 0, color: "var(--slate-300)" }}>{desc}</p>
              </div>
            </Card>
          ))}
        </div>
      </div>
      <SlideFooter left="Builders Alpha Tech" right="08 / 09" />
    </Slide>
  );
}

/* ---------------- 09 · Closing ---------------- */
function ClosingSlide() {
  const ways = [
    ["clipboard-check", "Relevamiento inicial", "Una revisión sin costo de sistemas, infraestructura y oportunidades de automatización."],
    ["cpu", "Piloto de IA", "Un proceso puntual, alcance cerrado y resultado medible en pocas semanas."],
    ["shield-check", "Diagnóstico de seguridad", "Evaluación del entorno IT/OT y plan de acción priorizado por riesgo."],
  ];
  return (
    <Slide tone="dark">
      <div style={{ position: "absolute", right: -140, top: -140, width: 460, height: 460, border: "1px solid rgba(0,150,222,.25)", borderRadius: "50%" }} />
      <div style={{ padding: "56px 64px 0", display: "flex", flexDirection: "column", gap: 14 }}>
        <SectionLabel tone="inverse">Empecemos por un caso concreto</SectionLabel>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: "52px", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.04, margin: 0, color: "var(--slate-000)", maxWidth: "22ch" }}>
          Tres formas de empezar a trabajar juntos
        </h2>
      </div>
      <div style={{ padding: "34px 64px 0", display: "grid", gridTemplateColumns: "repeat(3,minmax(0,1fr))", gap: 20 }}>
        {ways.map(([icon, title, desc]) => (
          <Card key={title} tone="inverse" padding="26px" style={{ gap: 16 }}>
            <IconTile name={icon} tone="amber" size="md" />
            <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              <h4 style={{ fontFamily: "var(--font-display)", fontSize: "18px", fontWeight: 700, margin: 0, color: "var(--slate-000)" }}>{title}</h4>
              <p style={{ fontSize: "13.5px", lineHeight: 1.5, margin: 0, color: "var(--slate-300)" }}>{desc}</p>
            </div>
          </Card>
        ))}
      </div>
      <div style={{ marginTop: "auto", borderTop: "1px solid var(--border-inverse)", padding: "26px 64px 30px", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: "32px", fontWeight: 700, letterSpacing: "-0.02em", color: "var(--amber-400)" }}>Gracias.</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "13px", color: "var(--slate-300)" }}>
            Hernán Abeldaño · CTO · hernan@buildersalfatech.com
          </span>
        </div>
        <Logo variant="lockup" tone="light" height={62} basePath={ASSETS} />
      </div>
    </Slide>
  );
}

Object.assign(window, { Slide, SlideHeader, SlideFooter, TitleSlide, AboutSlide, ServicesSlide, FocusSlide, DifferentiatorSlide, SplitSlide, MethodSlide, CredentialsSlide, ClosingSlide });