/* eslint-disable react/prop-types */
/**
 * EnfoqueHero · Hero de la página Nuestro Enfoque.
 * Brief 1 §3.4 Hero.
 *
 * Tesis central de la marca. Se trata como portada editorial:
 *  - Fondo navy profundo con textura cobre patinado MUY sutil al fondo
 *  - Eyebrow + sello "MANIFIESTO 01"
 *  - Título extra grande con la frase ancla
 *  - Intro corta
 *  - Pista de scroll en línea vertical cobre
 */

const { useState: uS_Eh, useEffect: uE_Eh } = React;

function EnfoqueHero() {
  const [loaded, setLoaded] = uS_Eh(false);
  uE_Eh(() => { const t = setTimeout(() => setLoaded(true), 60); return () => clearTimeout(t); }, []);

  return (
    <section id="top" data-screen-label="01 Enfoque Hero" style={ehStyles.section}>
      <div style={ehStyles.copperBg} aria-hidden="true" />
      <div style={ehStyles.vignette} aria-hidden="true" />
      <div style={ehStyles.grid} aria-hidden="true" />

      <div className="container" style={ehStyles.inner}>
        <div style={{
          ...ehStyles.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={ehStyles.eyebrowDot} aria-hidden="true" />
          <span style={ehStyles.eyebrow}>NUESTRO ENFOQUE</span>
          <span style={ehStyles.sello}>MANIFIESTO · 18 AÑOS</span>
        </div>

        <h1 style={{
          ...ehStyles.title,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(20px)',
          transition: 'opacity 1100ms ease 350ms, transform 1100ms cubic-bezier(0.16,1,0.3,1) 350ms',
        }}>
          Las ciudades que construimos<br/>
          <span style={ehStyles.titleAccent}>nos construyen de vuelta.</span>
        </h1>

        <p style={{
          ...ehStyles.intro,
          opacity: loaded ? 1 : 0,
          transform: loaded ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 900ms ease 600ms, transform 900ms cubic-bezier(0.16,1,0.3,1) 600ms',
        }}>
          Esta es la frase que organiza todo lo que hacemos. Lo que sigue es por qué.
        </p>

        <div style={{
          ...ehStyles.scrollHint,
          opacity: loaded ? 0.8 : 0,
          transition: 'opacity 900ms ease 900ms',
        }} aria-hidden="true">
          <span style={ehStyles.scrollLabel}>EMPEZAMOS</span>
          <span style={ehStyles.scrollLine}><span style={ehStyles.scrollDot} /></span>
        </div>
      </div>
    </section>
  );
}

const ehStyles = {
  section: {
    position: 'relative',
    minHeight: '100vh',
    display: 'flex',
    alignItems: 'center',
    overflow: 'hidden',
    background: '#0E1B23',
    color: '#fff',
    padding: '160px 0 120px',
  },
  copperBg: {
    position: 'absolute',
    inset: 0,
    backgroundImage: 'url("assets/textures/cobre-patinado.svg")',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    opacity: 0.10,
    mixBlendMode: 'screen',
  },
  vignette: {
    position: 'absolute', inset: 0,
    background: 'radial-gradient(ellipse at 20% 50%, rgba(33,52,64,0.55) 0%, rgba(14,27,35,0.92) 70%)',
  },
  grid: {
    position: 'absolute', inset: 0,
    backgroundImage: 'linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
    backgroundSize: '80px 80px',
  },
  inner: {
    position: 'relative',
    zIndex: 2,
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
  },
  eyebrowRow: {
    display: 'inline-flex', alignItems: 'center', gap: 12,
    paddingInline: 14, paddingBlock: 8,
    background: 'rgba(255,255,255,0.04)',
    border: '1px solid rgba(255,255,255,0.18)',
    borderRadius: 999,
    alignSelf: 'flex-start',
    marginBottom: 40,
  },
  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',
  },
  sello: {
    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(30px, 7.5vw, 96px)',
    lineHeight: 1.04,
    letterSpacing: '-0.005em',
    color: '#fff',
    maxWidth: 1100,
    textWrap: 'balance',
  },
  titleAccent: {
    background: 'url("assets/textures/cobre-patinado.svg") center/cover',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
    color: 'transparent',
  },
  intro: {
    margin: '32px 0 0',
    maxWidth: 600,
    fontSize: 'clamp(18px, 1.7vw, 22px)',
    lineHeight: 1.55,
    color: 'rgba(255,255,255,0.92)',
    fontStyle: 'italic',
    fontWeight: 400,
    textWrap: 'pretty',
  },
  scrollHint: {
    marginTop: 80,
    display: 'flex',
    alignItems: 'center',
    gap: 14,
  },
  scrollLabel: {
    fontWeight: 700, fontSize: 10,
    letterSpacing: '0.28em',
    color: 'rgba(255,255,255,0.7)',
    textTransform: 'uppercase',
  },
  scrollLine: {
    position: 'relative',
    width: 80, height: 1,
    background: 'rgba(255,255,255,0.18)',
    overflow: 'hidden',
  },
  scrollDot: {
    position: 'absolute',
    top: 0, left: 0,
    height: '100%',
    width: '40%',
    background: 'var(--color-copper-fallback)',
    animation: 'enfoqueHintSlide 2.4s ease-in-out infinite',
  },
};

const ehMQ = document.createElement('style');
ehMQ.textContent = `
  @keyframes enfoqueHintSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
  }
`;
document.head.appendChild(ehMQ);

window.EnfoqueHero = EnfoqueHero;