/* eslint-disable react/prop-types */
/**
 * Digo · Bloque 3 de la página Servicios · ALGORITMO PROPIETARIO.
 * Brief 1 §3.3 Bloque 3.
 *
 * Anchor: #digo · Fondo crema · Borde superior cobre 4px (es el activo
 * propietario y se destaca visualmente sobre los otros bloques).
 *
 *  - Eyebrow + título DIGO® + subtítulo
 *  - 2 párrafos de descripción
 *  - 4 dimensiones D · I · G · O con letra gigante + concepto + body
 *  - 3 outputs operables como lista
 *  - CTA principal a Dataria (www.dataria.mx — plataforma que opera DIGO®)
 */

const { useState: uS_Dg } = React;

const DIMENSIONS = [
  {
    letter: 'D',
    name: 'Demografía',
    question: '¿Quiénes viven, trabajan y pasan?',
    body: 'Densidad real (no censo agregado). Pirámide etaria. Composición familiar. Momento de vida del polígono.',
  },
  {
    letter: 'I',
    name: 'Ingreso',
    question: '¿Cuánto ganan y cuánto destinan a consumo discrecional?',
    body: 'Modelo socioeconómico calibrado por NSE. Curvas de gasto por categoría.',
  },
  {
    letter: 'G',
    name: 'Gasto',
    question: '¿En qué gastan y dónde?',
    body: 'Distribución del gasto por categoría comercial. Fuga hacia plazas competidoras. Propensión por giro.',
  },
  {
    letter: 'O',
    name: 'Oferta',
    question: '¿Qué hay y qué falta?',
    body: 'Inventario competitivo en 1.5 km, 5 km y 15 minutos. Ocupación, mezcla, vocación dominante.',
  },
];

const OUTPUTS = [
  {
    title: 'Tabla de demanda insatisfecha',
    body: 'm² faltantes por categoría comercial en el área de influencia.',
    icon: 'data',
  },
  {
    title: 'Mapa de vocaciones por componente',
    body: 'Qué tipo de comercio puede vivir dónde y por qué.',
    icon: 'compass',
  },
  {
    title: 'Curva de capacidad de pago',
    body: 'Cuánto puede pagar de renta cada vocación-objetivo.',
    icon: 'target',
  },
];

function Digo() {
  const [active, setActive] = uS_Dg(0);

  return (
    <section id="digo" data-screen-label="04 Digo" style={dgStyles.section}>

      {/* Hero band — vista cenital del filo entre la mancha urbana y el suelo
          libre. Es exactamente lo que el algoritmo "lee" antes de operar:
          un polígono con su frontera, su drenaje, su tejido. */}
      <div style={dgStyles.band} aria-hidden="false">
        <img
          src="../home/assets/images/prosperia-digo-filo-urbano-montana.jpg"
          alt="Filo urbano-montaña en la periferia de Monterrey: cuadrícula residencial densa que se encuentra con las laderas del Cerro de las Mitras"
          style={dgStyles.bandImg}
          loading="lazy"
          decoding="async"
        />
        <div style={dgStyles.bandOverlay} aria-hidden="true" />
        <div className="container" style={dgStyles.bandContent}>
          <span className="eyebrow" style={dgStyles.bandEyebrow}>ALGORITMO PROPIETARIO</span>
          <h2 style={dgStyles.bandTitle}>
            DIGO<span style={dgStyles.bandTitleR}>®</span>
          </h2>
          <p style={dgStyles.bandSubtitle}>La brújula que orienta cada decisión.</p>
        </div>
      </div>

      <div style={dgStyles.topBorder} aria-hidden="true" />

      <div className="container">
        <window.Reveal style={dgStyles.headContent}>
          <p style={dgStyles.lead}>
            DIGO® no es un dashboard. No es un reporte. Es el algoritmo propietario que cruza demografía, ingreso, gasto y oferta competitiva para responder, con números, qué tipo de inmobiliario puede vivir en un polígono — y cuánto puede pagar.
          </p>
          <p style={dgStyles.body}>
            Calibrado por +1,900 proyectos a lo largo de 18 años. Aplicado en 57 ciudades de 3 regiones. Sistematizado como producto en 2012, después de cuatro años de iteración con datos reales. Es el único algoritmo de su tipo en Latinoamérica.
          </p>

          <div data-calib-stats style={dgStyles.calibStats}>
            <div style={dgStyles.statBlock}>
              <div style={dgStyles.statNum}>+1,900</div>
              <div style={dgStyles.statLabel}>PROYECTOS DE CALIBRACIÓN</div>
            </div>
            <div style={dgStyles.statDivider} aria-hidden="true" />
            <div style={dgStyles.statBlock}>
              <div style={dgStyles.statNum}>57</div>
              <div style={dgStyles.statLabel}>CIUDADES · 3 REGIONES</div>
            </div>
            <div style={dgStyles.statDivider} aria-hidden="true" />
            <div style={dgStyles.statBlock}>
              <div style={dgStyles.statNum}>2012</div>
              <div style={dgStyles.statLabel}>AÑO DE SISTEMATIZACIÓN</div>
            </div>
          </div>
        </window.Reveal>

        {/* Las 4 dimensiones */}
        <div style={dgStyles.dimHeader}>
          <span style={dgStyles.dimLabel}>LAS 4 DIMENSIONES</span>
          <span style={dgStyles.dimDivider} aria-hidden="true" />
          <span style={dgStyles.dimNote}>D · I · G · O — Demografía, Ingreso, Gasto, Oferta</span>
        </div>

        <div style={dgStyles.dimGrid}>
          {DIMENSIONS.map((d, i) => (
            <window.Reveal
              as="article"
              key={d.letter}
              delay={i * 100}
              onMouseEnter={() => setActive(i)}
              data-cursor="link"
              style={{
                ...dgStyles.dimCard,
                background: active === i ? 'var(--color-navy-deep)' : '#fff',
                color: active === i ? '#fff' : 'var(--color-navy-deep)',
              }}
            >
              <div style={dgStyles.dimLetterWrap}>
                <span style={{
                  ...dgStyles.dimLetter,
                  background: active === i
                    ? 'url("assets/textures/cobre-patinado.svg") center/cover'
                    : 'transparent',
                  WebkitBackgroundClip: active === i ? 'text' : 'unset',
                  WebkitTextFillColor: active === i ? 'transparent' : 'unset',
                  backgroundClip: active === i ? 'text' : 'unset',
                  color: active === i ? 'transparent' : 'rgba(168, 107, 45, 0.85)',
                }}>{d.letter}</span>
                <span style={{
                  ...dgStyles.dimDot,
                  background: active === i ? 'var(--color-copper-fallback)' : 'rgba(168, 107, 45, 0.3)',
                }} />
              </div>
              <h3 style={dgStyles.dimName}>{d.name}</h3>
              <p style={{
                ...dgStyles.dimQuestion,
                color: active === i ? 'rgba(255,255,255,0.7)' : 'var(--color-navy-medium)',
              }}>{d.question}</p>
              <p style={{
                ...dgStyles.dimBody,
                color: active === i ? 'rgba(255,255,255,0.9)' : 'var(--color-navy-deep)',
              }}>{d.body}</p>
            </window.Reveal>
          ))}
        </div>

        {/* Outputs operables */}
        <div style={dgStyles.outputsHeader}>
          <span style={dgStyles.dimLabel}>OUTPUTS OPERABLES</span>
          <span style={dgStyles.dimDivider} aria-hidden="true" />
          <span style={dgStyles.dimNote}>Lo que entregamos en cada proyecto DIGO®</span>
        </div>

        <div style={dgStyles.outputsGrid}>
          {OUTPUTS.map((o, i) => (
            <window.Reveal as="article" key={i} delay={i * 90} style={dgStyles.output}>
              <div style={dgStyles.outputIcon}>
                <window.Icon name={o.icon} size={28} stroke={1.5} />
              </div>
              <div style={dgStyles.outputText}>
                <h4 style={dgStyles.outputTitle}>{o.title}</h4>
                <p style={dgStyles.outputBody}>{o.body}</p>
              </div>
            </window.Reveal>
          ))}
        </div>

        {/* CTA Banner a Dataria (la plataforma que opera DIGO) */}
        <window.Reveal style={dgStyles.banner}>
          <div style={dgStyles.bannerTexture} aria-hidden="true" />
          <div style={dgStyles.bannerInner}>
            <div style={dgStyles.bannerLeft}>
              <span className="eyebrow" style={{ color: '#fff', opacity: 0.85 }}>PLATAFORMA · EMPRESA DEL GRUPO</span>
              <h3 style={dgStyles.bannerTitle}>
                Dataria: DIGO® en producción, todos los días
              </h3>
              <p style={dgStyles.bannerDesc}>
                Dataria es la plataforma tecnológica del grupo Prosperia que opera el algoritmo DIGO®: estudios de polígono específicos, dashboards interactivos y curvas de capacidad de pago en tiempo real.
              </p>
            </div>
            <div style={dgStyles.bannerRight}>
              <a href="https://www.dataria.mx" target="_blank" rel="noopener noreferrer"
                 className="btn"
                 data-cursor="link"
                 style={dgStyles.bannerCta}>
                Conoce Dataria
                <window.Icon name="arrow-up-right" size={16} stroke={1.8} />
              </a>
              <span style={dgStyles.bannerUrl}>www.dataria.mx</span>
            </div>
          </div>
        </window.Reveal>

        <window.Reveal style={dgStyles.ctaWrap}>
          <a href="#contacto" className="btn btn-navy-outline">
            Hablemos de tu proyecto
            <window.Icon name="arrow-right" size={16} stroke={1.8} />
          </a>
        </window.Reveal>
      </div>
    </section>
  );
}

const dgStyles = {
  section: {
    position: 'relative',
    background: 'var(--color-cream)',
    paddingTop: 0,
    paddingBottom: 'var(--space-3xl)',
  },

  // ─── HERO BAND ──────────────────────────────────────────────────────────
  band: {
    position: 'relative',
    width: '100%',
    aspectRatio: '16 / 9',
    maxHeight: 'clamp(420px, 70vh, 720px)',
    overflow: 'hidden',
  },
  bandImg: {
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
  },
  bandOverlay: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(15,27,35,0.72) 0%, rgba(15,27,35,0.42) 55%, rgba(15,27,35,0.28) 100%)',
  },
  bandContent: {
    position: 'relative', zIndex: 2,
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-start',
    paddingTop: 'clamp(96px, 12vw, 144px)',
    paddingBottom: 'clamp(48px, 6vw, 72px)',
  },
  bandEyebrow: {
    color: 'var(--color-copper-fallback)',
    display: 'block',
  },
  bandTitle: {
    margin: '14px 0 0',
    fontWeight: 800,
    fontSize: 'clamp(60px, 11vw, 132px)',
    lineHeight: 0.92,
    color: '#fff',
    letterSpacing: '0.02em',
    display: 'inline-flex',
    alignItems: 'flex-start',
    textShadow: '0 2px 24px rgba(0,0,0,0.30)',
  },
  bandTitleR: {
    fontSize: '0.32em',
    fontWeight: 700,
    paddingTop: '0.5em',
    paddingLeft: '0.05em',
    color: 'var(--color-copper-fallback)',
    textShadow: 'none',
  },
  bandSubtitle: {
    margin: '12px 0 0',
    fontSize: 'clamp(18px, 1.8vw, 22px)',
    fontWeight: 400,
    fontStyle: 'italic',
    color: 'rgba(255,255,255,0.92)',
    maxWidth: 540,
  },

  topBorder: {
    height: 4,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
  },

  // ─── HEAD CONTENT (debajo de la band) ──────────────────────────────────
  headContent: {
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    maxWidth: 820,
    marginTop: 'clamp(64px, 8vw, 96px)',
    marginBottom: 'clamp(64px, 8vw, 96px)',
  },
  lead: {
    margin: 0,
    fontSize: 'clamp(20px, 1.7vw, 24px)',
    lineHeight: 1.5,
    color: 'var(--color-navy-deep)',
    fontWeight: 700,
    textWrap: 'pretty',
  },
  body: {
    margin: 0,
    fontSize: 'clamp(15px, 1.3vw, 17px)',
    lineHeight: 1.7,
    color: 'var(--color-navy-deep)',
  },
  calibStats: {
    marginTop: 24,
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 24,
    padding: '24px 28px',
    background: '#fff',
    borderRadius: 4,
  },
  statBlock: { display: 'flex', flexDirection: 'column', gap: 6 },
  statNum: {
    fontWeight: 800,
    fontSize: 'clamp(28px, 3vw, 40px)',
    color: 'var(--color-navy-deep)',
    lineHeight: 1.0,
    letterSpacing: '0.02em',
  },
  statLabel: {
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.16em',
    color: 'var(--color-copper-fallback)',
  },
  statDivider: {
    height: 1, background: 'rgba(33,52,64,0.10)',
  },
  dimHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    marginBottom: 32,
  },
  outputsHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    marginTop: 80,
    marginBottom: 32,
  },
  dimLabel: {
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  dimDivider: { flex: 1, height: 1, background: 'rgba(33,52,64,0.12)' },
  dimNote: {
    fontSize: 13,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },
  dimGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 16,
  },
  dimCard: {
    position: 'relative',
    padding: 'clamp(24px, 3vw, 36px)',
    borderRadius: 4,
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    minHeight: 280,
    overflow: 'hidden',
    transition: 'background 360ms ease, color 360ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1)',
  },
  dimLetterWrap: {
    position: 'absolute',
    top: 16, right: 24,
    display: 'flex', alignItems: 'flex-start', gap: 4,
    pointerEvents: 'none',
  },
  dimLetter: {
    fontWeight: 800,
    fontSize: 'clamp(30px, 8vw, 120px)',
    lineHeight: 0.85,
    letterSpacing: '0',
  },
  dimDot: {
    width: 8, height: 8, borderRadius: 999,
    marginTop: 14,
    transition: 'background 360ms ease',
  },
  dimName: {
    margin: 0,
    fontSize: 13,
    fontWeight: 700,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  dimQuestion: {
    margin: '8px 0 0',
    fontSize: 'clamp(18px, 1.8vw, 22px)',
    fontWeight: 700,
    lineHeight: 1.3,
    color: 'var(--color-navy-deep)',
    maxWidth: '70%',
    textWrap: 'balance',
  },
  dimBody: {
    margin: 'auto 0 0',
    fontSize: 14,
    lineHeight: 1.6,
    color: 'var(--color-navy-deep)',
  },
  outputsGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 16,
    marginBottom: 80,
  },
  output: {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    gap: 20,
    padding: 24,
    background: '#fff',
    borderRadius: 4,
    alignItems: 'start',
    transition: 'transform 360ms cubic-bezier(0.16,1,0.3,1), box-shadow 360ms ease',
  },
  outputIcon: {
    width: 52, height: 52,
    display: 'inline-flex',
    alignItems: 'center', justifyContent: 'center',
    background: 'var(--color-cream-soft)',
    color: 'var(--color-copper-fallback)',
    borderRadius: 4,
    flexShrink: 0,
  },
  outputText: { display: 'flex', flexDirection: 'column', gap: 6 },
  outputTitle: {
    margin: 0,
    fontSize: 18,
    fontWeight: 700,
    color: 'var(--color-navy-deep)',
  },
  outputBody: {
    margin: 0,
    fontSize: 14,
    color: 'var(--color-navy-medium)',
    lineHeight: 1.6,
  },
  banner: {
    position: 'relative',
    overflow: 'hidden',
    borderRadius: 4,
    minHeight: 240,
    color: '#fff',
    marginBottom: 48,
  },
  bannerTexture: {
    position: 'absolute', inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  },
  bannerInner: {
    position: 'relative',
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 32,
    padding: 'clamp(32px, 4vw, 56px)',
    background: 'linear-gradient(135deg, rgba(15,27,35,0.55) 0%, rgba(15,27,35,0.15) 100%)',
  },
  bannerLeft: { display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 540 },
  bannerTitle: {
    margin: '8px 0 0',
    fontSize: 'clamp(24px, 2.8vw, 36px)',
    fontWeight: 800,
    lineHeight: 1.15,
    color: '#fff',
    textWrap: 'balance',
  },
  bannerDesc: {
    margin: 0,
    fontSize: 16,
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.92)',
    maxWidth: 480,
  },
  bannerRight: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    alignItems: 'flex-start',
    alignSelf: 'flex-end',
  },
  bannerCta: {
    background: '#fff',
    color: 'var(--color-navy-deep)',
    padding: '16px 28px',
  },
  bannerUrl: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontSize: 13,
    color: 'rgba(255,255,255,0.8)',
    letterSpacing: '0.05em',
  },
  ctaWrap: {
    display: 'flex',
    justifyContent: 'flex-start',
  },
};

const dgMQ = document.createElement('style');
dgMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="04 Digo"] [data-calib-stats] {
      grid-template-columns: repeat(3, 1fr) !important;
    }
    section[data-screen-label="04 Digo"] [data-calib-stats] > div[aria-hidden] {
      width: 1px !important; height: 32px !important;
    }
    section[data-screen-label="04 Digo"] .container > div:nth-of-type(3) {
      grid-template-columns: repeat(2, 1fr) !important;
    }
    section[data-screen-label="04 Digo"] .container > div:nth-of-type(5) {
      grid-template-columns: repeat(3, 1fr) !important;
    }
    section[data-screen-label="04 Digo"] .container > div:nth-of-type(6) > div:last-child {
      grid-template-columns: 1.6fr 1fr !important;
      gap: 48px !important;
      align-items: center !important;
    }
  }
  @media (min-width: 1024px) {
    section[data-screen-label="04 Digo"] .container > div:nth-of-type(3) {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }
  section[data-screen-label="04 Digo"] article[data-cursor="link"]:hover {
    transform: translateY(-4px);
  }
  section[data-screen-label="04 Digo"] .container > div:nth-of-type(5) article:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(33, 52, 64, 0.06);
  }
  section[data-screen-label="04 Digo"] a[href*="dataria.mx"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  }
`;
document.head.appendChild(dgMQ);

window.Digo = Digo;