/* eslint-disable react/prop-types */
/**
 * FichaHero · Hero de la ficha individual de un distrito.
 *
 * - Imagen full-bleed del distrito con overlay navy
 * - Breadcrumb: NUESTRO TRABAJO / DISTRITOS / [Nombre]
 * - Tags pill (TIPOS) + estado
 * - Title grande + ubicación
 * - Stats inline: año, región, estado
 */

const { useState: uS_FH, useEffect: uE_FH } = React;

function FichaHero({ d }) {
  const [loaded, setLoaded] = uS_FH(false);
  uE_FH(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []);

  if (!d) return null;

  return (
    <section data-screen-label="01 Ficha Hero" style={fhStyles.section}>
      <div style={fhStyles.imgWrap}>
        <window.ImagePlaceholder
          src={d.img}
          alt={`${d.name} — distrito co-creado por Prosperia`}
          label={`${d.name.toUpperCase()} · ${d.tone?.toUpperCase() || 'URBAN'} · 16:9`}
          tone={d.tone || 'urban'}
          ratio="auto"
          style={{ width: '100%', height: '100%', aspectRatio: 'auto' }}
          overlay
          overlayOpacity={0.62}
        />
      </div>
      <div style={fhStyles.bottomGradient} aria-hidden="true" />

      <div className="container" style={fhStyles.inner}>
        <div style={{
          ...fhStyles.crumbRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 600ms ease 150ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 150ms',
        }}>
          <a href="/distritos/Distritos.html" style={fhStyles.crumbLink}>NUESTRO TRABAJO · DISTRITOS</a>
          <span style={fhStyles.crumbSep}>/</span>
          <span style={fhStyles.crumbHere}>{d.name.toUpperCase()}</span>
        </div>

        <div style={{
          ...fhStyles.chipsRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(8px)',
          transition: 'opacity 600ms ease 250ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 250ms',
        }}>
          {(d.types || []).map(t => (
            <span key={t} style={fhStyles.chipCobre}>{t}</span>
          ))}
          <span style={fhStyles.chipEstado}>{d.estado}</span>
        </div>

        <h1 style={{
          ...fhStyles.title,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(16px)',
          transition: 'opacity 800ms ease 400ms, transform 800ms cubic-bezier(0.16,1,0.3,1) 400ms',
        }}>
          {d.name}
        </h1>

        <p style={{
          ...fhStyles.location,
          opacity: loaded ? 1 : 0,
          transition: 'opacity 800ms ease 550ms',
        }}>
          <window.Icon name="pin" size={18} stroke={1.6} />
          <span>{d.location}</span>
        </p>

        <div style={{
          ...fhStyles.statsRow,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 700ms ease 700ms, transform 700ms cubic-bezier(0.16,1,0.3,1) 700ms',
        }}>
          <div style={fhStyles.stat}>
            <span style={fhStyles.statLabel}>AÑO DE ORIGINACIÓN</span>
            <span style={fhStyles.statValue}>{d.year}</span>
          </div>
          <div style={fhStyles.statDivider} />
          <div style={fhStyles.stat}>
            <span style={fhStyles.statLabel}>REGIÓN</span>
            <span style={fhStyles.statValue}>{d.region}</span>
          </div>
          {d.verified && (
            <React.Fragment>
              <div style={fhStyles.statDivider} />
              <div style={fhStyles.stat}>
                <span style={fhStyles.statLabel}>STATUS</span>
                <span style={{ ...fhStyles.statValue, color: 'var(--color-copper-fallback)' }}>VERIFICADO</span>
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

const fhStyles = {
  section: {
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'flex-end',
    minHeight: '78vh',
    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,
    /* Gradient extendido que cubre toda la zona del texto */
    height: '80%',
    background: 'linear-gradient(180deg, transparent 0%, rgba(15,27,35,0.30) 35%, rgba(15,27,35,0.70) 65%, rgba(15,27,35,0.95) 100%)',
    zIndex: 1, pointerEvents: 'none',
  },
  inner: { position: 'relative', zIndex: 2 },
  crumbRow: {
    display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 12,
    marginBottom: 24,
    fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
    textTransform: 'uppercase',
    textShadow: '0 1px 4px rgba(0,0,0,0.5)',
  },
  crumbLink: { color: 'rgba(255,255,255,0.85)', textDecoration: 'none', borderBottom: '1px solid transparent', transition: 'color 200ms, border-color 200ms' },
  crumbSep:  { color: 'rgba(255,255,255,0.5)' },
  crumbHere: { color: '#fff' },
  chipsRow: {
    display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8,
    marginBottom: 24,
  },
  chipCobre: {
    backgroundImage: 'url("../home/assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    color: '#fff',
    fontSize: 11, fontWeight: 700,
    letterSpacing: '0.16em', textTransform: 'uppercase',
    padding: '5px 13px', borderRadius: 2,
    boxShadow: '0 2px 8px rgba(0,0,0,0.25)',
  },
  chipEstado: {
    background: 'rgba(15,27,35,0.40)',
    border: '1px solid rgba(255,255,255,0.42)',
    color: '#fff',
    fontSize: 11, fontWeight: 600,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    padding: '4px 12px', borderRadius: 2,
    backdropFilter: 'blur(6px)',
    WebkitBackdropFilter: 'blur(6px)',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(28px, 6.5vw, 96px)',
    lineHeight: 1.02,
    color: '#fff',
    letterSpacing: '-0.015em',
    maxWidth: 1100,
    textWrap: 'balance',
    textShadow: '0 2px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3)',
  },
  location: {
    margin: '20px 0 0',
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontSize: 'clamp(15px, 1.5vw, 18px)',
    color: '#fff',
    textShadow: '0 1px 8px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4)',
    fontWeight: 700,
  },
  statsRow: {
    marginTop: 40,
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: 24,
  },
  stat: { display: 'flex', flexDirection: 'column', gap: 6 },
  statLabel: {
    fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
    color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase',
    textShadow: '0 1px 4px rgba(0,0,0,0.5)',
  },
  statValue: {
    fontSize: 22, fontWeight: 800, color: '#fff',
    letterSpacing: '-0.005em',
    textShadow: '0 1px 8px rgba(0,0,0,0.5)',
  },
  statDivider: { width: 1, height: 36, background: 'rgba(255,255,255,0.35)' },
};

const fhMQ = document.createElement('style');
fhMQ.textContent = `
  section[data-screen-label="01 Ficha Hero"] a:hover {
    color: #fff !important;
    border-bottom-color: rgba(255,255,255,0.4) !important;
  }
`;
document.head.appendChild(fhMQ);

window.FichaHero = FichaHero;