// ADOS website — Services
const { Button, Callout } = window.ADOSDesignSystem_5aafbb;

function ServiceCard({ s, i }) {
  const [hover, setHover] = React.useState(false);
  const num = String(i + 1).padStart(2, '0');
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        borderRadius: 'var(--radius-ui)',
        overflow: 'hidden',
        // card depth: gradient navy (top) → darker navy (bottom)
        background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 118%)',
        border: `1px solid ${hover ? 'var(--accent)' : 'var(--border)'}`,
        boxShadow: hover
          ? '0 0 0 1px var(--accent), 0 18px 48px rgba(249,178,51,0.10)'
          : '0 1px 0 rgba(255,255,255,0.02)',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)',
        minHeight: 248,
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* top accent rule that fills in amber on hover */}
      <div style={{ height: 2, background: hover ? 'var(--accent)' : 'transparent', transition: 'background var(--dur-base) var(--ease-standard)' }} />
      <div style={{ padding: '26px 28px 30px', display: 'flex', flexDirection: 'column', height: '100%' }}>
        {/* decorative anchor number — large, light weight */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 22 }}>
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 58, lineHeight: 0.9,
            letterSpacing: '-0.04em',
            color: hover ? 'var(--accent)' : 'var(--text-faint)',
            transition: 'color var(--dur-base) var(--ease-standard)',
          }}>{num}</span>
          <img src="./assets/logo/ados-cube-real.png" alt="" style={{ width: 26, opacity: hover ? 1 : 0.5, transition: 'opacity var(--dur-base)' }} />
        </div>
        <h3 style={{ fontSize: 20, margin: '0 0 10px', letterSpacing: '-0.015em', lineHeight: 1.12 }}>{s.t}</h3>
        <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.6 }}>{s.d}</p>
      </div>
    </div>
  );
}

function ServicesSection({ onNavigate }) {
  const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--pad-x)' };
  // Implementación BIM lidera: es el servicio bandera de ADOS.
  const services = [
    { t: 'Implementación BIM para empresas', d: 'Estrategia, estándares, plantillas y capacitación para adoptar BIM en constructoras y estudios.' },
    { t: 'Modelado BIM', d: 'Creación de modelos paramétricos LOD 200–400 en Revit para arquitectura, estructura e instalaciones.' },
    { t: 'Coordinación BIM', d: 'Federación y detección de interferencias, gestión del Common Data Environment y flujo interdisciplinar.' },
    { t: 'Consultoría en ingeniería', d: 'Revisión técnica de proyectos estructurales, hidrosanitarios y de procesos con criterio de ingeniería.' },
    { t: 'Diseño arquitectónico', d: 'Diseño, documentación y cortes sincronizados con el modelo federado.' },
    { t: 'Automatización de procesos BIM', d: 'Dynamo, Python y scripts para eliminar tareas repetitivas y acelerar entregas.' },
  ];
  return (
    <React.Fragment>
      {/* HERO — deepest navy layer */}
      <section style={{ borderBottom: '1px solid var(--border)', background: 'var(--bg-deep)' }}>
        <div style={{ ...wrap, padding: '64px var(--pad-x) 56px' }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Servicios</div>
          <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', letterSpacing: '-0.03em', margin: '0 0 16px', maxWidth: 720 }}>Un modelo, todas las disciplinas</h1>
          <p style={{ color: 'var(--text-muted)', fontSize: 17, maxWidth: 540, margin: 0, lineHeight: 1.6 }}>
            Integramos ingeniería, arquitectura y coordinación BIM en un solo flujo de trabajo.
          </p>
        </div>
      </section>

      {/* GRID — mid navy layer */}
      <section style={{ background: 'var(--bg-deep)' }}>
        <div style={{ ...wrap, padding: '0 var(--pad-x)' }}>
          {/* diagonal accent line separating hero text from the cards grid */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '40px 0 36px' }}>
            <span style={{ width: 64, height: 2, background: 'var(--accent)', transform: 'skewX(-24deg)', transformOrigin: 'left' }} />
            <span style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, var(--border-strong), transparent)' }} />
            <span style={{ fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-faint)' }}>Seis disciplinas, un flujo BIM</span>
          </div>

          <div className="w-grid-3">
            {services.map((s, i) => <ServiceCard key={s.t} s={s} i={i} />)}
          </div>

          <div style={{ marginTop: 32 }}>
            <Callout tone="info" title="BIM desde el primer día">
              No entregamos planos sueltos: entregamos un modelo coordinado del que se derivan planos, cantidades y renders.
            </Callout>
          </div>
          <div style={{ marginTop: 40, paddingBottom: 88, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" onClick={() => onNavigate('contacto')}>Solicitar consultoría</Button>
            <Button variant="secondary" size="lg" onClick={() => onNavigate('proyectos')}>Ver proyectos</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.ServicesSection = ServicesSection;