// dr-content.jsx — Capacidades, Stack, Proceso, Seguridad, Ubicación, CTA

function SectionHeader({ kicker, title, lede, num }) {
  const wrap = { marginBottom: 60, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', position: 'relative' };
  const eyebrow = { marginBottom: 20, display: 'flex', alignItems: 'baseline', gap: 14 };
  const rule = { flex: 1, height: 1, background: 'var(--line)', maxWidth: 80 };
  const h2 = {
    fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500,
    fontSize: 'clamp(34px, 4.6vw, 60px)', lineHeight: 1.04,
    letterSpacing: '-0.028em', color: 'var(--text)', maxWidth: '15ch',
  };
  const right = { fontSize: 16, lineHeight: 1.65, color: 'var(--muted)', maxWidth: 440 };
  return (
    <div style={{ ...wrap, overflow: 'hidden' }} className="dr-section-header">
      {num && (
        <span className="dr-sec-watermark" aria-hidden="true" style={{
          position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)',
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700,
          fontSize: 'clamp(90px,11vw,150px)', color: 'rgba(255,255,255,0.04)',
          letterSpacing: '-0.06em', lineHeight: 1,
          pointerEvents: 'none', userSelect: 'none', zIndex: 0,
        }}>{num}</span>
      )}
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={eyebrow}>
          <span className="dr-eyebrow">{kicker}</span>
          <span style={rule}></span>
        </div>
        <h2 style={h2} data-word-reveal>{title}</h2>
      </div>
      {lede && <div style={{ ...right, position: 'relative', zIndex: 1 }}>{lede}</div>}
      <style>{`
        @media (max-width: 880px){ .dr-section-header{ grid-template-columns:1fr !important; align-items:start !important; } }
        @media (max-width: 760px){ .dr-sec-watermark{ display:none !important; } }
      `}</style>
    </div>
  );
}

// ==================================================================
// TechLogos — Stack strip below Hero
// ==================================================================
function TypeScriptIcon() {
  return (
    <svg viewBox="0 0 256 256" width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block', opacity: 0.88 }}>
      <path d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z" fill="#94A3B8"/>
      <path d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179 6.133 1.151 12.597 1.726 19.393 1.726 6.622 0 12.914-.633 18.874-1.899 5.96-1.266 11.187-3.352 15.678-6.257 4.492-2.906 8.048-6.704 10.669-11.394 2.62-4.689 3.93-10.486 3.93-17.391 0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898-3.945-2.33-8.394-4.531-13.347-6.602-3.628-1.497-6.881-2.949-9.761-4.359-2.879-1.41-5.327-2.848-7.342-4.316-2.016-1.467-3.571-3.021-4.665-4.661-1.094-1.64-1.641-3.495-1.641-5.567 0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547 2.591-.604 5.471-.906 8.638-.906 2.304 0 4.737.173 7.299.518 2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719 41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582-4.981-.777-10.697-1.165-17.147-1.165-6.565 0-12.784.705-18.658 2.115-5.874 1.409-11.043 3.61-15.506 6.602-4.463 2.993-7.99 6.805-10.582 11.437-2.591 4.632-3.887 10.17-3.887 16.615 0 8.228 2.375 15.248 7.127 21.06 4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66 2.39 1.611 4.276 3.366 5.658 5.265 1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97-1.756 1.122-3.945 1.999-6.565 2.632-2.62.633-5.687.95-9.2.95-5.989 0-11.92-1.05-17.794-3.151-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z" fill="#0C1219"/>
    </svg>
  );
}

function TechLogos() {
  const logos = [
    ['JavaScript', 'javascript.svg', 'https://developer.mozilla.org/en-US/docs/Web/JavaScript'],
    ['TypeScript', 'typescript.svg', 'https://www.typescriptlang.org/'],
    ['Python', 'python.svg', 'https://www.python.org/'],
    ['PHP', 'php.svg', 'https://www.php.net/'],
    ['React', 'react.svg', 'https://react.dev/'],
    ['Node.js', 'nodejs.svg', 'https://nodejs.org/'],
    ['PostgreSQL', 'postgresql.svg', 'https://www.postgresql.org/'],
    ['MySQL', 'mysql.svg', 'https://www.mysql.com/'],
    ['MongoDB', 'mongodb.svg', 'https://www.mongodb.com/'],
    ['Linux', 'linux.svg', 'https://www.kernel.org/'],
    ['Docker', 'docker.svg', 'https://www.docker.com/'],
    ['Azure', 'azure.svg', 'https://azure.microsoft.com/'],
    ['AWS', 'aws.svg', 'https://aws.amazon.com/'],
    ['.NET', 'dotnet.svg', 'https://dotnet.microsoft.com/'],
    ['SQL Server', 'sqlserver.svg', 'https://www.microsoft.com/sql-server/'],
    ['Windows Server', 'windows.svg', 'https://www.microsoft.com/windows-server/'],
    ['Microsoft 365', null, 'https://www.microsoft.com/microsoft-365'],
    ['GraphQL', 'graphql.svg', 'https://graphql.org/'],
  ];
  return (
    <div style={{ background: 'var(--void-2)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '48px 0' }}>
      <div className="container">
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: '0.2em', color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 22, textAlign: 'center' }}>
          Tecnologías principales
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 10 }} className="dr-techlogos-grid">
          {logos.map(([name, file, url]) => (
            <a key={name} href={url} target="_blank" rel="noopener noreferrer" aria-label={`Abrir sitio oficial de ${name}`} className="dr-tech-logo" style={{ flex: '0 0 108px', minHeight: 94, padding: '14px 10px 12px', border: '1px solid var(--line)', borderRadius: 9, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 9, background: 'rgba(255,255,255,0.012)', textDecoration: 'none', cursor: 'pointer' }}>
              {file ? (
                <img src={`assets/tech-logos/${file}`} alt={`${name} logo`} width="34" height="34" loading="lazy" style={{ display: 'block', width: 34, height: 34, objectFit: 'contain' }} />
              ) : (
                <span aria-label="Microsoft 365" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 12px)', gap: 2 }}>
                  {['#F35325', '#81BC06', '#05A6F0', '#FFBA08'].map((color) => <span key={color} style={{ width: 12, height: 12, background: color }}></span>)}
                </span>
              )}
              <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 11, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.1 }}>{name}</span>
            </a>
          ))}
        </div>
      </div>
      <style>{`
        .dr-tech-logo { transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; }
        .dr-tech-logo:hover { border-color: rgba(45,212,191,0.35) !important; background: rgba(255,255,255,0.028) !important; transform: translateY(-2px); }
        @media (max-width: 560px) { .dr-tech-logo { flex-basis: 96px !important; } }
      `}</style>
    </div>
  );
}

// ==================================================================
// Capacidades — INTERACTIVE EXPLORER (list + detail panel w/ visual)
// ==================================================================
const CAP_DATA = [
  {
    id: 'software', num: '01', title: 'Desarrollo de software',
    short: 'Aplicaciones y módulos a la medida',
    body: 'Programación y desarrollo de aplicaciones y módulos a la medida — propios o de terceros. Del requerimiento al sistema en producción, con código mantenible y documentado.',
    tags: ['Aplicaciones', 'APIs', 'A la medida'],
    img: 'cap-software.jpg',
    items: ['Aplicaciones web, móvil y de escritorio a la medida', 'Módulos e integraciones para sistemas existentes', 'APIs REST documentadas y entregadas al cliente', 'Pruebas automatizadas antes de cada despliegue', 'Código fuente documentado — es suyo, sin dependencia'],
  },
  {
    id: 'consultoria', num: '02', title: 'Diseño y consultoría de sistemas',
    short: 'Arquitectura antes que código',
    body: 'Análisis, estudio, asesoría y diseño de arquitectura. Definimos la solución correcta antes de escribir una sola línea: alcance, integraciones y riesgos sobre la mesa.',
    tags: ['Análisis', 'Arquitectura', 'Asesoría'],
    img: 'cap-consultoria.jpg',
    items: ['Análisis de procesos e infraestructura actual', 'Arquitectura de solución por escrito y aprobada', 'Evaluación de tecnología y riesgos existentes', 'Plan de proyecto con fases y entregables definidos', 'Propuesta concreta antes de escribir una línea de código'],
  },
  {
    id: 'redes', num: '03', title: 'Redes y sistemas en operación',
    short: 'Conectividad confiable, monitoreada',
    body: 'Implementación y operación de sistemas computacionales en red — directa, indirecta o distribuida. Diseño de topología, segmentación y monitoreo permanente.',
    tags: ['Redes', 'Topología', 'Monitoreo'],
    img: 'cap-redes.jpg',
    items: ['Diseño de topología, VLANs y segmentación de red', 'Configuración de switches, routers y firewalls', 'VPN sitio a sitio y acceso remoto seguro', 'Monitoreo continuo de disponibilidad con alertas', 'Documentación completa de la infraestructura'],
  },
  {
    id: 'admin', num: '04', title: 'Administración de TI',
    short: 'Su operación en un solo responsable',
    body: 'Administración continua de sistemas, soporte y mantenimiento preventivo. Su operación tecnológica vigilada bajo un SLA con tiempos de respuesta comprometidos.',
    tags: ['Soporte', 'Mantenimiento', 'SLA'],
    img: 'cap-admin.jpg',
    items: ['Monitoreo 24/7 con alertas en tiempo real', 'Mantenimiento preventivo programado', 'SLA con tiempos de respuesta definidos por escrito', 'Respaldos verificados con prueba de restauración', 'Canal de soporte directo con el ingeniero responsable'],
  },
  {
    id: 'equipo', num: '05', title: 'Equipo de cómputo',
    short: 'Hardware listo para operar',
    body: 'Comercio al por mayor de computadoras y accesorios. Suministro, configuración y puesta en marcha del equipo que su operación necesita — entregado funcionando.',
    tags: ['Hardware', 'Accesorios', 'Configuración'],
    img: 'cap-equipo.jpg',
    items: ['Workstations, laptops, servidores y periféricos', 'Configuración completa antes de la entrega', 'Compatibilidad verificada con su red existente', 'Garantía de fábrica gestionada por nuestra firma', 'Instalación y puesta en marcha in-situ'],
  },
];

function CapVisual({ items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {items.map((item, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'flex-start', gap: 13,
          padding: '12px 0',
          borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none',
        }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--signal)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
            <path d="M20 6L9 17l-5-5" />
          </svg>
          <span style={{ fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, lineHeight: 1.5, color: 'var(--text)' }}>{item}</span>
        </div>
      ))}
    </div>
  );
}

function Capacidades() {
  const [active, setActive] = React.useState('software');
  const sec = { padding: '116px 0', borderTop: '1px solid var(--line)' };
  const cap = CAP_DATA.find((c) => c.id === active);

  const layout = { display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 0, border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', background: 'var(--panel)' };
  const list = { borderRight: '1px solid var(--line)', display: 'flex', flexDirection: 'column' };
  const row = (on) => ({
    padding: '22px 24px', borderBottom: '1px solid var(--line)', cursor: 'pointer',
    background: on ? 'var(--void-2)' : 'transparent', transition: 'background 0.2s',
    display: 'flex', alignItems: 'center', gap: 16, position: 'relative',
  });
  const rowNum = (on) => ({ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.16em', color: on ? 'var(--signal)' : 'var(--muted)' });
  const rowTitle = (on) => ({ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17, fontWeight: 500, color: on ? 'var(--text)' : 'var(--muted)', transition: 'color 0.2s' });
  const rowShort = { fontSize: 12, color: 'var(--muted)', marginTop: 2, fontFamily: "'IBM Plex Sans', sans-serif" };
  const accentBar = (on) => ({ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: on ? 'var(--signal)' : 'transparent', transition: 'all 0.2s' });

  const detail = { padding: '40px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 420 };
  const dNum = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.2em', color: 'var(--signal)' };
  const dTitle = { fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em', marginTop: 14, color: 'var(--text)' };
  const dBody = { fontSize: 15, lineHeight: 1.65, color: 'var(--muted)', marginTop: 16, maxWidth: 480 };
  const tags = { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 22 };
  const tag = { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.1em', padding: '6px 11px', border: '1px solid var(--line)', borderRadius: 4, color: 'var(--muted)' };
  const visualBox = {
    marginTop: 30,
    padding: '4px 0',
    background: 'transparent',
    borderTop: '1px solid var(--line)',
  };

  return (
    <section id="capacidades" style={sec}>
      <div className="container">
        <SectionHeader
          kicker="Capacidades · 01–05"
          num="01"
          title={<>Una firma técnica.<br /><span style={{ color: 'var(--signal)' }}>Cinco</span> capacidades.</>}
          lede={<>Cubrimos el ciclo completo de sistemas: del diseño y la programación a las redes, la administración y el equipo. Explore cada capacidad.</>}
        />
        <div style={layout} className="dr-cap-layout" data-reveal>
          <div style={list} className="dr-cap-list">
            {CAP_DATA.map((c) => {
              const on = c.id === active;
              return (
                <div key={c.id} style={row(on)} onClick={() => setActive(c.id)} onMouseEnter={() => setActive(c.id)}>
                  <span style={accentBar(on)}></span>
                  <span style={rowNum(on)}>{c.num}</span>
                  <div>
                    <div style={rowTitle(on)}>{c.title}</div>
                    <div style={rowShort}>{c.short}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={detail} className="dr-cap-detail">
            <div style={{ margin: '-40px -40px 28px -40px', height: 185, position: 'relative', overflow: 'hidden' }}>
              <img
                src={`${cap.img}`}
                alt={cap.title}
                loading="lazy"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center',
                  filter: 'grayscale(100%) brightness(0.52) contrast(1.1)', display: 'block' }}
              />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(16,23,32,0.25) 0%, var(--panel) 100%)' }}></div>
            </div>
            <div>
              <div style={dNum}>CAP · {cap.num}</div>
              <h3 style={dTitle}>{cap.title}</h3>
              <p style={dBody}>{cap.body}</p>
              <div style={tags}>{cap.tags.map((t) => <span key={t} style={tag}>{t}</span>)}</div>
            </div>
            <div style={visualBox}><CapVisual items={cap.items} /></div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 860px){
          .dr-cap-layout{ grid-template-columns:1fr !important; }
          .dr-cap-list{ border-right:none !important; }
          .dr-cap-detail{ border-top:1px solid var(--line); min-height:auto !important; }
        }
      `}</style>
    </section>
  );
}

// ==================================================================
// Stack — capability chips grid
// ==================================================================
function Stack() {
  const sec = { padding: '116px 0', borderTop: '1px solid var(--line)', background: 'var(--void-2)' };
  const groups = [
    { k: 'Lenguajes & frameworks', items: ['JavaScript / TypeScript', 'Python', 'PHP', 'C# / .NET', 'React', 'Node.js'] },
    { k: 'Datos', items: ['SQL Server', 'PostgreSQL', 'MySQL', 'MongoDB', 'Respaldos', 'ETL / BI'] },
    { k: 'Infraestructura & redes', items: ['Linux', 'Windows Server', 'VPN / Firewall', 'Switching', 'Virtualización', 'Monitoreo'] },
    { k: 'Cloud & operación', items: ['Azure', 'AWS', 'Microsoft 365', 'Docker', 'CI/CD', 'Soporte 24/7'] },
  ];
  const grid = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 };
  const card = { border: '1px solid var(--line)', borderRadius: 10, padding: 28, background: 'var(--panel)' };
  const k = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.16em', color: 'var(--signal)', textTransform: 'uppercase', marginBottom: 18 };
  const chips = { display: 'flex', flexWrap: 'wrap', gap: 9 };
  const chip = { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 13, padding: '8px 13px', border: '1px solid var(--line)', borderRadius: 6, color: 'var(--text)', background: 'var(--void-2)' };
  return (
    <section id="stack" style={sec}>
      <div className="container">
        <SectionHeader
          kicker="Stack tecnológico"
          num="02"
          title={<>Herramientas <span style={{ color: 'var(--signal)' }}>probadas</span>, no modas.</>}
          lede={<>Trabajamos con tecnología madura y soportada. Elegimos por estabilidad y continuidad — su sistema debe seguir operando en cinco años.</>}
        />
        <div style={grid} className="dr-stack-grid">
          {groups.map((g) => (
            <div key={g.k} style={card} data-reveal className="dr-lift">
              <div style={k}>{g.k}</div>
              <div style={chips}>{g.items.map((it) => <span key={it} style={chip}>{it}</span>)}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 760px){ .dr-stack-grid{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}

// ==================================================================
// Proceso — DEPLOYMENT PIPELINE (vertical, glowing connector)
// ==================================================================
function Proceso() {
  const sec = { padding: '116px 0', borderTop: '1px solid var(--line)' };
  const steps = [
    { n: '01', label: 'Diagnóstico', time: '30 min', status: 'COMPLETADO', title: 'Entendemos su operación.', body: 'Revisamos sistemas, redes y procesos actuales. Identificamos cuellos de botella, riesgos y oportunidades de automatización.' },
    { n: '02', label: 'Diseño', time: '1–2 semanas', status: 'COMPLETADO', title: 'Arquitectura y alcance.', body: 'Definimos la solución: tecnología, integraciones, tiempos y entregables. Todo por escrito y aprobado antes de construir.' },
    { n: '03', label: 'Implementación', time: 'Por fases', status: 'EN CURSO', title: 'Construcción y despliegue.', body: 'Desarrollo iterativo con entregas parciales. Pruebas, migración de datos y puesta en producción controlada.' },
    { n: '04', label: 'Operación', time: 'Continua', status: 'MONITOREO', title: 'Soporte y mejora continua.', body: 'Monitoreo 24/7, respaldos, mantenimiento y mejoras. Su infraestructura vigilada, con SLA definido.' },
  ];
  const statusColor = (s) => s === 'EN CURSO' ? '#4C8DCC' : s === 'MONITOREO' ? '#2A9D8F' : '#2A9D8F';

  const rail = { position: 'relative', marginTop: 40 };
  const line = { position: 'absolute', left: 13, top: 8, bottom: 8, width: 2, background: 'linear-gradient(180deg, var(--signal), var(--pulse) 70%, var(--line))' };
  const node = (i) => ({ position: 'absolute', left: 5, top: 4, width: 18, height: 18, borderRadius: '50%', background: 'var(--void)', border: '2px solid var(--signal)', display: 'grid', placeItems: 'center', zIndex: 2 });
  const nodeDot = { width: 6, height: 6, borderRadius: '50%', background: 'var(--signal)' };
  const stepWrap = { position: 'relative', paddingBottom: 44, paddingLeft: 48 };
  const head = { display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' };
  const n = { fontFamily: "'Space Grotesk', sans-serif", fontSize: 30, lineHeight: 1, color: 'var(--text)', fontWeight: 500 };
  const label = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.16em', color: 'var(--muted)', textTransform: 'uppercase' };
  const time = { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.12em', color: 'var(--muted)' };
  const badge = (s) => ({ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: '0.12em', padding: '4px 9px', borderRadius: 4, border: `1px solid ${statusColor(s)}`, color: statusColor(s), display: 'inline-flex', alignItems: 'center', gap: 6 });
  const title = { fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 21, lineHeight: 1.18, marginTop: 12, color: 'var(--text)' };
  const body = { fontSize: 14, lineHeight: 1.6, color: 'var(--muted)', marginTop: 8, maxWidth: 620 };

  return (
    <section id="proceso" style={sec}>
      <div className="container">
        <SectionHeader
          kicker="Proceso · Pipeline"
          num="03"
          title={<>Del diagnóstico<br />al <span style={{ color: 'var(--signal)' }}>despliegue</span>.</>}
          lede={<>Tratamos cada proyecto como un pipeline: fases con entregables claros y su aprobación antes de avanzar a la siguiente.</>}
        />
        <div style={rail}>
          <div style={line}></div>
          {steps.map((s, i) => (
            <div key={s.n} style={stepWrap} data-reveal>
              <div style={node(i)}><span style={nodeDot}></span></div>
              <div style={head}>
                <span style={n}>{s.n}</span>
                <span style={label}>{s.label}</span>
                <span style={time}>· {s.time}</span>
                <span style={badge(s.status)}><span style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor(s.status) }}></span>{s.status}</span>
              </div>
              <h3 style={title}>{s.title}</h3>
              <p style={body}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==================================================================
// Seguridad — AUDIT CONSOLE (terminal checks + score)
// ==================================================================
function Seguridad() {
  const sec = { padding: '116px 0', borderTop: '1px solid var(--line)', background: 'var(--void-2)', position: 'relative', overflow: 'hidden' };
  const checks = [
    { k: 'cifrado', d: 'transito + reposo', v: 'AES-256' },
    { k: 'accesos', d: 'privilegios minimos', v: 'IAM' },
    { k: 'respaldos', d: 'RPO 1h / RTO 4h', v: 'OK' },
    { k: 'monitoreo', d: 'alertas en vivo', v: '24/7' },
    { k: 'sla', d: 'tiempos de respuesta', v: 'OK' },
    { k: 'parches', d: 'actualizaciones al dia', v: 'OK' },
  ];

  const grid = { display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 24, marginTop: 8 };

  // Terminal window
  const term = { border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden', background: 'var(--panel)' };
  const termHead = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 18px', borderBottom: '1px solid var(--line)', background: 'var(--void-2)' };
  const dots = { display: 'flex', gap: 7 };
  const dot = (c) => ({ width: 10, height: 10, borderRadius: '50%', background: c });
  const termTitle = { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em' };
  const termBody = { padding: '22px 22px', fontFamily: "'JetBrains Mono', monospace", fontSize: 13, lineHeight: 2.05 };
  const prompt = { color: 'var(--signal)' };
  const dim = { color: 'rgba(133,147,163,0.6)' };

  // Score card
  const scoreCard = { border: '1px solid var(--line)', borderRadius: 12, background: 'var(--panel)', padding: 30, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' };
  const scoreBig = { fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 84, lineHeight: 1, color: 'var(--signal)', letterSpacing: '-0.03em' };

  return (
    <section id="seguridad" style={sec}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0, pointerEvents: 'none' }}>
        <img src="cables-bg.jpg" alt="" aria-hidden="true" loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center',
            filter: 'grayscale(100%) brightness(0.60) contrast(1.1)', opacity: 0.45 }} />
      </div>
      <div className="container" style={{ position: 'relative' }}>
        <SectionHeader
          kicker="Seguridad · Auditoría"
          num="04"
          title={<>Seguridad por <span style={{ color: 'var(--signal)' }}>diseño</span>, no por parche.</>}
          lede={<>Cada sistema que entregamos incorpora cifrado, control de accesos, respaldos y monitoreo desde el primer día. Así se ve una auditoría aprobada.</>}
        />
        <div style={grid} className="dr-sec-grid">
          <div style={term} data-reveal>
            <div style={termHead}>
              <div style={dots}><span style={dot('#FF5F57')}></span><span style={dot('#FEBC2E')}></span><span style={dot('#28C840')}></span></div>
              <span style={termTitle}>security-audit --run</span>
            </div>
            <div style={termBody}>
              <div><span style={prompt}>$</span> ejecutando auditoría de seguridad…</div>
              {checks.map((c) => (
                <div key={c.k} style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ color: 'var(--signal)' }}>✓</span>
                  <span style={{ color: 'var(--text)', minWidth: 92, display: 'inline-block' }}>{c.k}</span>
                  <span style={dim}>{c.d}</span>
                  <span style={{ flex: 1 }}></span>
                  <span style={{ color: 'var(--pulse)' }}>{c.v}</span>
                </div>
              ))}
              <div style={{ marginTop: 8 }}><span style={prompt}>$</span> <span style={{ color: 'var(--signal)' }}>0 vulnerabilidades críticas.</span> <span style={dim}>auditoría completa.</span></div>
            </div>
          </div>
          <div style={scoreCard} data-reveal>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.16em', color: 'var(--muted)', textTransform: 'uppercase' }}>Calificación</div>
            <div style={scoreBig}>A+</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: 'var(--signal)', marginTop: 6, letterSpacing: '0.08em' }}>6 / 6 controles activos</div>
            <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 14, lineHeight: 1.6, maxWidth: 220 }}>Estándar mínimo en todo sistema que entregamos. No es un extra: es el punto de partida.</div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .dr-sec-grid{ grid-template-columns:1fr !important; } }`}</style>
    </section>
  );
}

// ==================================================================
// Casos — Bento grid de sectores atendidos
// ==================================================================
function Casos() {
  const sec = { padding: '116px 0', borderTop: '1px solid var(--line)', background: 'var(--void-2)' };
  const CASOS = [
    { id:'pyme',       n:'01', title:'PyME',               accent:'var(--signal)', desc:'Redes y software a medida para operaciones de 5–50 colaboradores. Despliegue rápido, SLA claro.',       stats:[['Nodos','8–40'],['Deploy','< 2 sem'],['Soporte','24/7']] },
    { id:'mediana',    n:'02', title:'Mediana empresa',     accent:'var(--pulse)',  desc:'Infraestructura multi-sede: VPN, VLANs y monitoreo centralizado. Escalable sin reescritura.',         stats:[['Sedes','2–8'],['Uptime','99.9%'],['SLA','4h RTO']] },
    { id:'corporativo',n:'03', title:'Corporativo',         accent:'var(--signal)', desc:'Arquitectura redundante, DR activo y administración continua de TI bajo contrato.',                    stats:[['Usuarios','100+'],['DR','Activo'],['Cifrado','AES-256']] },
    { id:'gobierno',   n:'04', title:'Gobierno / Inst.',    accent:'var(--pulse)',  desc:'Redes segregadas, cumplimiento de política de seguridad y auditoría con calificación A+.',            stats:[['Audit','A+'],['Parches','< 24h'],['Accesos','IAM']] },
    { id:'startup',    n:'05', title:'Startup / Scale-up',  accent:'var(--signal)', desc:'Cloud-first: AWS/Azure, CI/CD y contenedores. Infraestructura que crece con el producto.',            stats:[['Cloud','Multi'],['CI/CD','Activo'],['Escala','Auto']] },
  ];

  return (
    <section id="casos" style={sec}>
      <div className="container">
        <SectionHeader
          kicker="Casos · Sectores"
          num="05"
          title={<>Sectores que <span style={{ color: 'var(--signal)' }}>atendemos</span>.</>}
          lede={<>Desde PyMEs hasta instituciones. Adaptamos arquitectura, SLA y stack a las necesidades reales de cada tipo de operación.</>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }} className="dr-casos-grid">
          {CASOS.map((c, i) => (
            <div key={c.id} data-reveal className="dr-caso-card"
              style={{ background: 'var(--panel)', border: '1px solid var(--line)', borderRadius: 12, padding: '26px 26px 26px 30px', position: 'relative', overflow: 'hidden', gridColumn: i === 0 || i === 3 ? 'span 2' : 'span 1', transition: 'border-color 0.2s' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, width: 2, height: '100%', background: '#1F8A80', borderRadius: '12px 0 0 12px' }}></div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.16em', color: c.accent, textTransform: 'uppercase', marginBottom: 10 }}>{c.n}</div>
              <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 21, color: 'var(--text)', letterSpacing: '-0.015em', marginBottom: 10 }}>{c.title}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.65, color: 'var(--muted)', marginBottom: 22 }}>{c.desc}</p>
              <div style={{ display: 'flex', gap: 20 }}>
                {c.stats.map(([k,v]) => (
                  <div key={k}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.14em', color: 'var(--muted)', textTransform: 'uppercase' }}>{k}</div>
                    <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17, fontWeight: 500, color: 'var(--text)', marginTop: 3 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .dr-caso-card:hover { border-color: rgba(52,224,196,0.28) !important; }
        @media (max-width: 860px) { .dr-casos-grid { grid-template-columns: 1fr 1fr !important; } .dr-caso-card { grid-column: span 1 !important; } }
        @media (max-width: 560px) { .dr-casos-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ==================================================================
// Ubicación — NETWORK TOPOLOGY (office as central node)
// ==================================================================
function Ubicacion() {
  const sec = { padding: '116px 0', borderTop: '1px solid var(--line)' };
  const grid = { display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' };
  const eyebrow = { marginBottom: 20, display: 'flex', alignItems: 'baseline', gap: 14 };
  const rule = { flex: 1, height: 1, background: 'var(--line)', maxWidth: 80 };
  const h2 = { fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 'clamp(32px, 4.2vw, 52px)', lineHeight: 1.06, letterSpacing: '-0.025em', color: 'var(--text)' };
  const addr = { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 19, lineHeight: 1.5, color: 'var(--text)', marginTop: 30 };
  const meta = { marginTop: 22, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '0.1em', color: 'var(--muted)', textTransform: 'uppercase', lineHeight: 1.9 };
  const ctaRow = { display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' };



  return (
    <section style={sec}>
      <div className="container">
        <div style={grid} className="dr-loc-grid">
          <div data-reveal>
            <div style={eyebrow}><span className="dr-eyebrow">Oficinas · CDMX</span><span style={rule}></span></div>
            <h2 style={h2} data-word-reveal>Un nodo en el <span style={{ color: 'var(--signal)' }}>centro</span> de la ciudad.</h2>
            <div style={addr}>Calle Hamburgo 182, Piso 4, Int. 400,<br />Col. Juárez, Alcaldía Cuauhtémoc,<br />C.P. 06600, CDMX.</div>
            <div style={meta}>Lun–Vie · 09:00–18:00<br />datosyredesacosta@outlook.com</div>
            <div style={ctaRow}>
              <a href="https://maps.google.com/?q=Hamburgo+182,+Juárez,+CDMX" target="_blank" rel="noopener" className="dr-btn dr-btn-primary">Ver en Google Maps<span className="dr-arrow">→</span></a>
              <a href="#diagnostico" className="dr-btn dr-btn-ghost">Agendar visita</a>
            </div>
          </div>

          {/* Google Maps embed */}
          <div data-reveal style={{ aspectRatio:'1/1', borderRadius:12, overflow:'hidden', border:'1px solid var(--line)', position:'relative', background:'var(--panel)' }}>
            <iframe
              src="https://maps.google.com/maps?q=Hamburgo+182,+Col.+Ju%C3%A1rez,+Ciudad+de+M%C3%A9xico,+CDMX+06600&output=embed&z=17&hl=es"
              width="100%" height="100%"
              style={{ border:0, display:'block', width:'100%', height:'100%', filter:'invert(90%) hue-rotate(180deg) saturate(0.5) brightness(0.92)' }}
              allowFullScreen={true}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Datos y Redes de Sistema Acosta · Hamburgo 182, Col. Juárez, CDMX"
            />
            {/* Label overlay */}
            <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'12px 16px', background:'linear-gradient(to top, rgba(8,12,17,0.85) 0%, transparent 100%)', pointerEvents:'none' }}>
              <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, letterSpacing:'0.12em', color:'var(--text)', textTransform:'uppercase' }}>
                Hamburgo 182 · Col. Juárez · CDMX
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .dr-loc-grid{ grid-template-columns:1fr !important; gap:40px !important; } }`}</style>
    </section>
  );
}

// ==================================================================
// FAQ — accordion de preguntas reales
// ==================================================================
function FAQ() {
  const [open, setOpen] = React.useState(null);
  const toggle = (i) => setOpen(open === i ? null : i);

  const ITEMS = [
    { q: '¿Solo trabajan en Ciudad de México?', a: 'Tenemos oficinas en Col. Juárez, CDMX, pero atendemos proyectos de manera remota en toda la República Mexicana. Para implementaciones físicas (redes, cableado, equipo), evaluamos cada caso según ubicación y alcance del proyecto.' },
    { q: '¿Cuánto cuesta un proyecto?', a: 'Depende del alcance, y es por eso que empezamos con un diagnóstico gratuito: no cotizamos sin entender su operación primero. Trabajamos con proyectos de inversión única, contratos de administración mensual o esquemas mixtos.' },
    { q: '¿Qué pasa si ya tenemos proveedor de TI?', a: 'Podemos trabajar en paralelo, hacer una transición ordenada, o simplemente auditar lo que ya tienen. No imponemos migración completa — evaluamos qué sirve, qué no, y proponemos mejoras específicas sin obligar a cambiar todo.' },
    { q: '¿Pueden administrar sistemas que no construyeron?', a: 'Sí. Una parte importante de nuestro servicio de administración es exactamente eso: tomar sistemas heredados, documentarlos, estabilizarlos y operarlos bajo SLA. Es uno de los casos más frecuentes que atendemos.' },
    { q: '¿Ofrecen contratos de soporte y mantenimiento?', a: 'Sí. Ofrecemos contratos de administración continua con SLA definido por escrito: tiempos de respuesta, canales de escalamiento y mantenimiento preventivo programado. El objetivo es que usted no tenga que pensar en TI.' },
    { q: '¿Cuánto tarda un proyecto típico?', a: 'Un módulo de software a medida puede tomar de 4 a 12 semanas según la complejidad. Una implementación de red puede estar lista en días. En el diagnóstico definimos tiempos reales — no estimados genéricos que luego no se cumplen.' },
    { q: '¿Qué incluye el diagnóstico técnico gratuito?', a: 'Una sesión de 30 minutos con un ingeniero (no un vendedor) donde revisamos su infraestructura actual, identificamos riesgos y le entregamos una propuesta concreta. Si no necesita nuestros servicios, se lo decimos directamente. Sin presión ni seguimiento no solicitado.' },
    { q: '¿Trabajan con empresas pequeñas o solo corporativos?', a: 'Trabajamos con todo tipo de organización: PyMEs, medianas empresas, corporativos e instituciones de gobierno. El tamaño del cliente no define la calidad del servicio — adaptamos arquitectura y SLA a cada caso.' },
  ];

  return (
    <section id="faq" style={{ padding: '116px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <SectionHeader
          kicker="FAQ · Preguntas frecuentes"
          num="06"
          title={<>Preguntas que <span style={{ color: 'var(--signal)' }}>solemos</span> escuchar.</>}
          lede={<>Si su pregunta no está aquí, el diagnóstico gratuito es el mejor lugar para hacerla — 30 minutos, sin presión.</>}
        />
        <div style={{ border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }} data-reveal>
          {ITEMS.map((item, i) => (
            <div key={i} style={{ borderBottom: i < ITEMS.length - 1 ? '1px solid var(--line)' : 'none' }}>
              <button
                onClick={() => toggle(i)}
                style={{
                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  padding: '20px 28px', gap: 24,
                  background: open === i ? 'rgba(255,255,255,0.025)' : 'transparent',
                  border: 'none', cursor: 'pointer', textAlign: 'left',
                  transition: 'background 0.2s',
                }}
              >
                <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15.5, fontWeight: 500, color: 'var(--text)', letterSpacing: '-0.01em', lineHeight: 1.3 }}>
                  {item.q}
                </span>
                <span style={{
                  width: 24, height: 24, borderRadius: '50%', flexShrink: 0,
                  border: '1px solid var(--line)', background: open === i ? 'rgba(45,212,191,0.08)' : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: open === i ? 'var(--signal)' : 'var(--muted)',
                  fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 300, lineHeight: 1,
                  transform: open === i ? 'rotate(45deg)' : 'none',
                  transition: 'transform 0.25s ease, background 0.2s, color 0.2s',
                }}>+</span>
              </button>
              <div style={{ maxHeight: open === i ? '360px' : '0px', overflow: 'hidden', transition: 'max-height 0.4s cubic-bezier(0.22,0.61,0.36,1)' }}>
                <p style={{ margin: 0, padding: '2px 28px 22px 28px', fontSize: 14.5, lineHeight: 1.75, color: 'var(--muted)', borderLeft: '2px solid rgba(45,212,191,0.18)', marginLeft: 28 }}>
                  {item.a}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ==================================================================
// ClosingCTA
// ==================================================================
function ClosingCTA() {
  const sec = { padding: '116px 0', background: 'var(--void-2)', borderTop: '1px solid var(--line)', position: 'relative', overflow: 'hidden' };
  const inner = { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' };
  const h2 = { fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 'clamp(38px, 5.2vw, 72px)', lineHeight: 1.0, letterSpacing: '-0.03em', color: 'var(--text)' };
  const right = { fontSize: 16, lineHeight: 1.65, color: 'rgba(226,232,240,0.82)', textShadow: '0 1px 8px rgba(0,0,0,0.85)' };
  const ctaRow = { display: 'flex', gap: 14, marginTop: 26, flexWrap: 'wrap' };
  return (
    <section style={sec}>
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0, pointerEvents: 'none' }}>
        <img src="trabajo-bg.jpg" alt="" aria-hidden="true" loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center',
            filter: 'grayscale(100%) brightness(0.60) contrast(1.1)', opacity: 0.48 }} />
      </div>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.4 }}><window.NetworkCanvas density={0.7} opacity={0.7} /></div>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 70% at 70% 50%, rgba(110,168,254,0.06), transparent 60%)', pointerEvents: 'none' }}></div>
      <div className="container" style={{ position: 'relative' }}>
        <div style={inner} className="dr-closing-grid">
          <div>
            <div className="dr-eyebrow" style={{ marginBottom: 22 }}>· Diagnóstico técnico</div>
            <h2 style={h2} data-word-reveal>30 minutos.<br /><span style={{ color: 'var(--signal)' }}>Sin compromiso.</span></h2>
          </div>
          <div style={right}>
            <p>Revisamos su infraestructura actual, identificamos riesgos y le proponemos un plan concreto. Si no necesita nuestros servicios, se lo decimos.</p>
            <div style={ctaRow}>
              <a href="#diagnostico" className="dr-btn dr-btn-primary">Solicitar diagnóstico<span className="dr-arrow">→</span></a>
              <a href="mailto:datosyredesacosta@outlook.com" className="dr-btn dr-btn-ghost" style={{ background: 'rgba(8,12,17,0.55)', borderColor: 'rgba(226,232,240,0.3)', color: 'var(--text)' }}>Escribir un correo</a>
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .dr-closing-grid{ grid-template-columns:1fr !important; gap:30px !important; } }`}</style>
    </section>
  );
}

Object.assign(window, { TechLogos, Capacidades, Stack, Proceso, Seguridad, Casos, FAQ, Ubicacion, ClosingCTA });