/* eslint-disable react/prop-types */
/**
 * CoDesarrollo · Bloque 2 de la página Servicios.
 * Brief 1 §3.3 Bloque 2.
 *
 * Anchor: #co-desarrollo · Fondo crema (alterna con Originación blanco)
 *
 *  - Eyebrow SERVICIO 02 + título CO-DESARROLLO + subtítulo
 *  - Descripción larga
 *  - Card lateral con Emmanuel Perales (líder de la práctica)
 *  - "Lo que aportamos" como lista con cobre tick / icon
 */

const APORTES = [
  { title: 'Coordinación integral',
    body: 'De todos los equipos involucrados: arquitectos, ingenierías, comercializadores y operación.',
    icon: 'people' },
  { title: 'Supervisión de rentabilidad',
    body: 'Cumplimiento de metas del modelo de negocio originado, fase por fase.',
    icon: 'target' },
  { title: 'Gestión de cambios',
    body: 'Cuando hay desviaciones del plan, las navegamos contigo y recalibramos.',
    icon: 'compass' },
  { title: 'Decisiones clave en mesa',
    body: 'Precios, fases, capital, contratos institucionales — siempre con piel en el juego.',
    icon: 'check' },
  { title: 'Dirección comercial',
    body: 'Durante pre-venta y operación, con la lista de marcas-objetivo activa.',
    icon: 'building' },
  { title: 'Validación continua',
    body: 'De los supuestos del modelo de negocio contra la realidad de campo.',
    icon: 'data' },
];

function CoDesarrollo() {
  return (
    <section id="co-desarrollo" data-screen-label="03 Co-Desarrollo" style={cdStyles.section}>

      {/* Hero band — paseo en operación al atardecer, equipo caminando.
          Es la imagen que mejor expresa Co-Desarrollo: el distrito ya vivido,
          la obra que sigue al fondo, gente que camina junta — partnership
          hecho visible. */}
      <div style={cdStyles.band} aria-hidden="false">
        <img
          src="../home/assets/images/prosperia-co-desarrollo-paseo-equipo.jpg"
          alt="Cuatro personas caminando en conversación por un paseo en un distrito recién entregado al atardecer; café terraza activado a la derecha, andamio de la siguiente fase al fondo"
          style={cdStyles.bandImg}
          loading="lazy"
          decoding="async"
        />
        <div style={cdStyles.bandOverlay} aria-hidden="true" />
        <div className="container" style={cdStyles.bandContent}>
          <span className="eyebrow" style={cdStyles.bandEyebrow}>SERVICIO 02</span>
          <h2 style={cdStyles.bandTitle}>CO-DESARROLLO</h2>
          <p style={cdStyles.bandSubtitle}>De la ejecución a la operación, contigo.</p>
        </div>
      </div>

      <div className="container">
        <div style={cdStyles.intro}>
          <window.Reveal>
            <p style={cdStyles.lead}>
              Cuando el desarrollador valiente quiere más que asesoría — cuando quiere un socio que esté en la mesa durante toda la ejecución, que ponga piel en el juego en cada decisión crítica, que asuma parte del riesgo y comparta la ganancia.
            </p>
          </window.Reveal>
          <window.Reveal delay={120}>
            <p style={cdStyles.body}>
              Co-Desarrollo es exactamente eso: emprendemos contigo la ejecución del proyecto. Coordinamos arquitectos, ingenierías, comercializadores y operación. Velamos por que el plan que originamos juntos se materialice sin desviaciones, y si las hay, las navegamos contigo.
            </p>
          </window.Reveal>
        </div>

        <window.Reveal style={cdStyles.leaderCard}>
          <div style={cdStyles.leaderPhoto}>
            <window.ImagePlaceholder
              src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=800&q=80&auto=format&fit=crop"
              alt="Emmanuel Perales Velázquez — Co-Founder de Prosperia"
              label="EMMANUEL PERALES · CO-FOUNDER · 1:1"
              tone="people"
              ratio="1 / 1"
              style={{ width: '100%', aspectRatio: '1 / 1' }}
            />
          </div>
          <div style={cdStyles.leaderText}>
            <span className="eyebrow" style={{ color: 'var(--color-copper-fallback)' }}>LÍDER DE LA PRÁCTICA</span>
            <h3 style={cdStyles.leaderName}>Emmanuel Perales Velázquez</h3>
            <p style={cdStyles.leaderRole}>Co-Founder · Lidera Co-Desarrollo</p>
            <blockquote className="pull-quote" style={cdStyles.leaderQuote}>
              Esta práctica la lidera Emmanuel Perales Velázquez, co-fundador de Prosperia. Desde el día 0 ha trabajado al lado de Héctor González Castañeda en construir Originación Inmobiliaria como disciplina propia.
            </blockquote>
          </div>
        </window.Reveal>

        <div style={cdStyles.aportesHeader}>
          <span style={cdStyles.aportesLabel}>LO QUE APORTAMOS</span>
          <span style={cdStyles.aportesDivider} aria-hidden="true" />
          <span style={cdStyles.aportesNote}>Seis frentes de trabajo simultáneo</span>
        </div>

        <div style={cdStyles.grid}>
          {APORTES.map((a, i) => (
            <window.Reveal as="article" key={i} delay={i * 70} style={cdStyles.aporte}>
              <div style={cdStyles.aporteIcon}>
                <window.Icon name={a.icon} size={22} stroke={1.5} />
              </div>
              <div style={cdStyles.aporteText}>
                <h4 style={cdStyles.aporteTitle}>{a.title}</h4>
                <p style={cdStyles.aporteBody}>{a.body}</p>
              </div>
            </window.Reveal>
          ))}
        </div>

        <window.Reveal style={cdStyles.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 cdStyles = {
  section: {
    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',
    marginBottom: 'clamp(64px, 8vw, 96px)',
  },
  bandImg: {
    position: 'absolute', inset: 0,
    width: '100%', height: '100%',
    objectFit: 'cover',
    objectPosition: 'center 50%',
  },
  bandOverlay: {
    position: 'absolute', inset: 0,
    background: 'linear-gradient(180deg, rgba(15,27,35,0.72) 0%, rgba(15,27,35,0.40) 50%, rgba(15,27,35,0.30) 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(48px, 6vw, 80px)',
  },
  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)',
  },
  leaderCard: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 32,
    padding: 'clamp(24px, 3vw, 40px)',
    background: '#fff',
    borderRadius: 4,
    marginBottom: 80,
    alignItems: 'center',
  },
  leaderPhoto: {
    width: '100%',
    maxWidth: 320,
    aspectRatio: '1 / 1',
    overflow: 'hidden',
    borderRadius: 4,
  },
  leaderText: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  leaderName: {
    margin: '8px 0 0',
    fontSize: 'clamp(24px, 2.4vw, 32px)',
    fontWeight: 800,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.005em',
  },
  leaderRole: {
    margin: 0,
    fontSize: 14,
    color: 'var(--color-navy-medium)',
    fontWeight: 700,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
  },
  leaderQuote: {
    marginTop: 20,
    fontSize: 'clamp(15px, 1.4vw, 17px)',
    lineHeight: 1.65,
    color: 'var(--color-navy-deep)',
    maxWidth: 560,
    fontStyle: 'normal',
  },
  aportesHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: 16,
    marginBottom: 32,
  },
  aportesLabel: {
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  aportesDivider: {
    flex: 1,
    height: 1,
    background: 'rgba(33,52,64,0.12)',
  },
  aportesNote: {
    fontSize: 13,
    color: 'var(--color-navy-medium)',
    fontStyle: 'italic',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 16,
  },
  aporte: {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    gap: 20,
    padding: '24px 28px',
    background: '#fff',
    borderRadius: 4,
    alignItems: 'start',
    borderLeft: '2px solid transparent',
    transition: 'border-color 360ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1), box-shadow 360ms ease',
  },
  aporteIcon: {
    width: 44, height: 44,
    display: 'inline-flex',
    alignItems: 'center', justifyContent: 'center',
    background: 'var(--color-cream-soft)',
    color: 'var(--color-copper-fallback)',
    borderRadius: 999,
    flexShrink: 0,
  },
  aporteText: { display: 'flex', flexDirection: 'column', gap: 6 },
  aporteTitle: {
    margin: 0,
    fontSize: 17,
    fontWeight: 700,
    color: 'var(--color-navy-deep)',
    lineHeight: 1.3,
  },
  aporteBody: {
    margin: 0,
    fontSize: 14,
    color: 'var(--color-navy-medium)',
    lineHeight: 1.6,
  },
  ctaWrap: {
    marginTop: 64,
    display: 'flex',
    justifyContent: 'flex-start',
  },
};

const cdMQ = document.createElement('style');
cdMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="03 Co-Desarrollo"] .container > div:nth-of-type(2) {
      grid-template-columns: 320px 1fr !important;
      gap: 48px !important;
    }
    section[data-screen-label="03 Co-Desarrollo"] .container > div:nth-of-type(4) {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  section[data-screen-label="03 Co-Desarrollo"] article:hover {
    border-left-color: var(--color-copper-fallback) !important;
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(33, 52, 64, 0.04);
  }
`;
document.head.appendChild(cdMQ);

window.CoDesarrollo = CoDesarrollo;