/* eslint-disable react/prop-types */
/**
 * Originacion · Bloque 1 de la página Servicios.
 * Brief 1 §3.3 Bloque 1.
 *
 * Anchor: #originacion · Fondo blanco
 *
 *  - Eyebrow SERVICIO 01 + título ORIGINACIÓN + subtítulo
 *  - Descripción larga 3 párrafos
 *  - 4 fases en grid 2×2 desktop / 1col mobile
 *  - CTA "Hablemos de tu proyecto"
 */

const PHASES = [
  {
    num: '01',
    name: 'Inteligencia de Mercado · DIGO®',
    body: 'Levantamos el perfil cuantitativo del polígono en tres radios (1.5 km · 5 km · 15 min). Demografía, ingreso, gasto, oferta competitiva. Producimos la matriz de demanda real que es el insumo de toda decisión posterior.',
    icon: 'data',
  },
  {
    num: '02',
    name: 'Definición de Producto',
    body: 'Convertimos la matriz de demanda en plan maestro: vocación por componente, tenant mix, marcas-objetivo, moodboard. La salida es la identidad comercial del activo.',
    icon: 'target',
  },
  {
    num: '03',
    name: 'Estructuración',
    body: 'Sembrado micro inquilino por inquilino, características arquitectónicas por giro, plan de rentas, proyección de tráfico, tabla consolidada de ingresos. La estrategia se vuelve plano ejecutivo y proforma comercial.',
    icon: 'building',
  },
  {
    num: '04',
    name: 'Arrendamiento Institucional',
    body: 'Activamos la lista de marcas-objetivo. Recorridos, negociación, cierre de contratos, hand-off operativo. Solo cobramos comisión sobre contratos firmados.',
    icon: 'check',
  },
];

function Originacion() {
  return (
    <section id="originacion" data-screen-label="02 Originacion" style={oStyles.section}>

      {/* Hero band — vista cenital del polígono, donde se ve el filo entre la
          mancha urbana y el suelo libre. Esa es la "lectura" que precede al
          servicio. */}
      <div style={oStyles.band} aria-hidden="false">
        <img
          src="../home/assets/images/prosperia-originacion-poligono-aereo.jpg"
          alt="Vista cenital de un polígono en la periferia de Monterrey al atardecer, donde la mancha urbana se encuentra con el suelo libre"
          style={oStyles.bandImg}
          loading="lazy"
          decoding="async"
        />
        <div style={oStyles.bandOverlay} aria-hidden="true" />
        <div className="container" style={oStyles.bandContent}>
          <span className="eyebrow" style={oStyles.bandEyebrow}>SERVICIO 01</span>
          <h2 style={oStyles.bandTitle}>ORIGINACIÓN</h2>
          <p style={oStyles.bandSubtitle}>De la lectura del polígono al diseño del negocio.</p>
        </div>
      </div>

      <div className="container">
        <div style={oStyles.intro}>
          <window.Reveal>
            <p style={oStyles.lead}>
              Es lo que está antes del proyecto. Antes del arquitecto, antes del modelo financiero, antes del primer m² programado.
            </p>
          </window.Reveal>
          <window.Reveal delay={120}>
            <p style={oStyles.body}>
              Originar significa preguntar primero: ¿quién vive aquí, quién trabaja, quién pasa? ¿Qué falta en su vida que un espacio inmobiliario podría resolver? Y desde ahí — solo desde ahí — derivar qué se debe construir, para quién, a qué precio, con qué mezcla.
            </p>
          </window.Reveal>
          <window.Reveal delay={200}>
            <p style={oStyles.body}>
              Lo que entregamos en Originación no es un reporte. Es la brújula completa del proyecto antes de que se gaste un peso en planos.
            </p>
          </window.Reveal>
        </div>

        <div style={oStyles.phasesHeader}>
          <span style={oStyles.phasesLabel}>LAS 4 FASES</span>
          <span style={oStyles.phasesDivider} aria-hidden="true" />
          <span style={oStyles.phasesNote}>Cada fase se contrata por separado</span>
        </div>

        <div style={oStyles.grid}>
          {PHASES.map((p, i) => (
            <window.Reveal as="article" key={p.num} delay={i * 90} style={oStyles.card}>
              <div style={oStyles.cardTop}>
                <span style={oStyles.cardNum}>FASE {p.num}</span>
                <span style={oStyles.cardIcon}>
                  <window.Icon name={p.icon} size={26} stroke={1.5} />
                </span>
              </div>
              <h3 style={oStyles.cardTitle}>{p.name}</h3>
              <p style={oStyles.cardBody}>{p.body}</p>
              <div style={oStyles.cardCorner} aria-hidden="true">
                <window.Icon name="arrow-up-right" size={18} stroke={1.6} />
              </div>
              <div style={oStyles.cardLine} aria-hidden="true" />
            </window.Reveal>
          ))}
        </div>

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

const oStyles = {
  section: {
    background: '#fff',
    paddingTop: 0,
    paddingBottom: 'var(--space-3xl)',
  },

  // ─── HERO BAND ──────────────────────────────────────────────────────────
  band: {
    position: 'relative',
    width: '100%',
    aspectRatio: '16 / 9',
    maxHeight: 'clamp(420px, 70vh, 720px)',
    overflow: 'hidden',
    marginBottom: 'clamp(64px, 8vw, 96px)',
  },
  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.70) 0%, rgba(15,27,35,0.35) 55%, rgba(15,27,35,0.20) 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(40px, 7vw, 88px)',
    lineHeight: 0.96,
    color: '#fff',
    letterSpacing: '0.02em',
    textShadow: '0 2px 24px rgba(0,0,0,0.25)',
  },
  bandSubtitle: {
    margin: '12px 0 0',
    fontSize: 'clamp(18px, 1.8vw, 22px)',
    fontWeight: 400,
    fontStyle: 'italic',
    color: 'rgba(255,255,255,0.92)',
    maxWidth: 540,
  },

  // ─── INTRO COPY ─────────────────────────────────────────────────────────
  intro: {
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    maxWidth: 760,
    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)',
  },
  phasesHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    marginBottom: 32,
  },
  phasesLabel: {
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  phasesDivider: {
    flex: 1,
    height: 1,
    background: 'rgba(33,52,64,0.12)',
  },
  phasesNote: {
    fontSize: 13,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 24,
  },
  card: {
    position: 'relative',
    background: 'var(--color-cream)',
    padding: 'clamp(28px, 3vw, 40px)',
    borderRadius: 4,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    minHeight: 260,
    overflow: 'hidden',
    transition: 'background 360ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1)',
  },
  cardTop: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  cardNum: {
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: '0.22em',
    color: 'var(--color-copper-fallback)',
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
  },
  cardIcon: {
    color: 'var(--color-copper-fallback)',
    display: 'inline-flex',
  },
  cardTitle: {
    margin: 0,
    fontSize: 'clamp(20px, 2.2vw, 26px)',
    fontWeight: 800,
    lineHeight: 1.2,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
    textWrap: 'balance',
  },
  cardBody: {
    margin: 0,
    fontSize: 15,
    lineHeight: 1.65,
    color: 'var(--color-navy-deep)',
    flex: 1,
  },
  cardCorner: {
    position: 'absolute',
    top: 24, right: 24,
    color: 'var(--color-copper-fallback)',
    opacity: 0,
    transform: 'translate(-6px, 6px)',
    transition: 'opacity 360ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1)',
  },
  cardLine: {
    position: 'absolute',
    bottom: 0, left: 0, right: 0,
    height: 3,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: '300px 100%',
    transform: 'scaleX(0)',
    transformOrigin: 'left center',
    transition: 'transform 600ms cubic-bezier(0.16,1,0.3,1)',
  },
  ctaWrap: {
    marginTop: 64,
    display: 'flex',
    justifyContent: 'flex-start',
  },
};

const oMQ = document.createElement('style');
oMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="02 Originacion"] .container > div:nth-of-type(3) {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  section[data-screen-label="02 Originacion"] article:hover {
    background: var(--color-cream-soft) !important;
  }
  section[data-screen-label="02 Originacion"] article:hover > div[aria-hidden="true"]:first-of-type {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
  section[data-screen-label="02 Originacion"] article:hover > div[aria-hidden="true"]:last-of-type {
    transform: scaleX(1) !important;
  }
`;
document.head.appendChild(oMQ);

window.Originacion = Originacion;