/* eslint-disable react/prop-types */
/**
 * DistritosHero · Hero compacto de la página Distritos.
 * Brief 1 §3.2 Hero.
 *
 * - Eyebrow PORTAFOLIO + título 2-líneas + intro
 * - Imagen full-bleed con overlay navy 40%
 * - Stats inline al pie: 40+ · 18 · 57 · 3
 */

const { useState: uS_Dh, useEffect: uE_Dh } = React;

const DH_STATS = [
  { num: '40+',     label: 'DISTRITOS CO-CREADOS' },
  { num: '+1,900',  label: 'PROYECTOS ORIGINADOS' },
  { num: '18',      label: 'AÑOS DE TRAYECTORIA' },
  { num: '57',      label: 'CIUDADES' },
  { num: '3',       label: 'REGIONES' },
];

function DistritosHero() {
  const [loaded, setLoaded] = uS_Dh(false);
  uE_Dh(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []);

  return (
    <section id="top" data-screen-label="01 Distritos Hero" style={dhStyles.section}>
      <div style={dhStyles.imgWrap}>
        <window.ImagePlaceholder
          src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=1920&q=80&auto=format&fit=crop"
          alt="Vista aérea de ciudad densa"
          label="VISTA AÉREA · CIUDAD DENSA · 16:9"
          tone="aerial"
          ratio="auto"
          style={{ width: '100%', height: '100%', aspectRatio: 'auto' }}
          overlay
          overlayOpacity={0.55}
        />
      </div>
      <div style={dhStyles.bottomGradient} aria-hidden="true" />

      <div className="container" style={dhStyles.inner}>
        <div style={{
          ...dhStyles.eyebrowRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 700ms ease 200ms, transform 700ms cubic-bezier(0.16,1,0.3,1) 200ms',
        }}>
          <span style={dhStyles.eyebrowDot} aria-hidden="true" />
          <span style={dhStyles.eyebrow}>PORTAFOLIO</span>
          <span style={dhStyles.crumb}>NUESTRO TRABAJO</span>
        </div>

        <h1 style={{
          ...dhStyles.title,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(16px)',
          transition: 'opacity 900ms ease 350ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 350ms',
        }}>
          40+ distritos. +1,900 proyectos.<br/>
          <span style={dhStyles.titleAccent}>Una sola tesis.</span>
        </h1>

        <p style={{
          ...dhStyles.intro,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 900ms ease 500ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 500ms',
        }}>
          Cada proyecto empezó con una pregunta: ¿quién vive aquí, y qué le falta? Lo que sigue son las respuestas — los +1,900 negocios inmobiliarios y +40 distritos que originamos junto a desarrolladores, gobiernos y asociaciones que se atrevieron a apostar fuera del paradigma.
        </p>

        <div style={{
          ...dhStyles.statsRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 900ms ease 650ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 650ms',
        }}>
          {DH_STATS.map((s, i) => (
            <React.Fragment key={s.label}>
              {i > 0 && <span style={dhStyles.statSeparator} aria-hidden="true" />}
              <div style={dhStyles.statBlock}>
                <div style={dhStyles.statNum}>{s.num}</div>
                <div style={dhStyles.statLabel}>{s.label}</div>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

const dhStyles = {
  section: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    minHeight: '75vh',
    paddingTop: 160,
    paddingBottom: 80,
    overflow: 'hidden',
    background: 'var(--color-navy-deep)',
    color: '#fff',
  },
  imgWrap: { position: 'absolute', inset: 0 },
  bottomGradient: {
    position: 'absolute', left: 0, right: 0, bottom: 0,
    height: 280,
    background: 'linear-gradient(180deg, transparent 0%, rgba(15,27,35,0.88) 100%)',
    zIndex: 1, pointerEvents: 'none',
  },
  inner: { position: 'relative', zIndex: 2 },
  eyebrowRow: {
    display: 'inline-flex', alignItems: 'center', gap: 12,
    marginBottom: 28,
    paddingInline: 14, paddingBlock: 8,
    background: 'rgba(15,27,35,0.5)',
    border: '1px solid rgba(255,255,255,0.18)',
    borderRadius: 999,
    alignSelf: 'flex-start',
  },
  eyebrowDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--color-copper-fallback)', boxShadow: '0 0 12px rgba(168,107,45,0.7)' },
  eyebrow: { fontWeight: 700, fontSize: 11, letterSpacing: '0.22em', color: '#fff', textTransform: 'uppercase' },
  crumb: {
    fontWeight: 500, fontSize: 11, letterSpacing: '0.22em',
    color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase',
    paddingLeft: 12, borderLeft: '1px solid rgba(255,255,255,0.2)',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(28px, 6vw, 80px)',
    lineHeight: 1.04,
    color: '#fff',
    letterSpacing: '-0.005em',
    maxWidth: 1100,
    textWrap: 'balance',
  },
  titleAccent: {
    background: 'url("assets/textures/cobre-patinado.svg") center/cover',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    color: 'transparent',
  },
  intro: {
    margin: '28px 0 0',
    maxWidth: 720,
    fontSize: 'clamp(16px, 1.5vw, 19px)',
    lineHeight: 1.6,
    color: 'rgba(255,255,255,0.92)',
    textWrap: 'pretty',
  },
  statsRow: {
    marginTop: 56,
    display: 'flex',
    alignItems: 'center',
    gap: 24,
    flexWrap: 'wrap',
  },
  statSeparator: { width: 1, height: 32, background: 'rgba(255,255,255,0.22)' },
  statBlock: { display: 'flex', flexDirection: 'column', gap: 4 },
  statNum: {
    fontWeight: 800,
    fontSize: 'clamp(24px, 2.5vw, 32px)',
    color: '#fff',
    lineHeight: 1.0,
    letterSpacing: '0.02em',
  },
  statLabel: {
    fontSize: 10,
    fontWeight: 700,
    letterSpacing: '0.16em',
    color: 'var(--color-copper-fallback)',
    textTransform: 'uppercase',
  },
};

const dhMQ = document.createElement('style');
dhMQ.textContent = `
  @media (min-width: 1024px) {
    section[data-screen-label="01 Distritos Hero"] { min-height: 85vh !important; padding-top: 200px; padding-bottom: 120px; }
  }
`;
document.head.appendChild(dhMQ);

window.DistritosHero = DistritosHero;