/* eslint-disable react/prop-types */
/**
 * Focus · Sección 4 del Home · CREER: NUESTRO PROPÓSITO.
 * Brief 1 §3.1 Sección 4.
 *
 * - Foto urbana + overlay navy 65%, parallax 34px max
 * - Eyebrow + título CREER + intro grande
 * - 3 cards pilares en row, fondo crema 95% alpha
 * - Entrada escalonada 0.2s entre cada pilar
 */

const { useState: uS_F, useEffect: uE_F, useRef: uR_F } = React;

const PILARES = [
  {
    title: 'Construir mejores ciudadanos.',
    body:  'Un entorno bien planeado eleva la calidad de vida, el comportamiento social y la confianza colectiva. Donde vivimos, así nos volvemos.',
  },
  {
    title: 'Generar prosperidad recíproca.',
    body:  'Cuando el habitante prospera, el desarrollador prospera. Cuando el desarrollador prospera, la ciudad prospera. Ese ciclo se llama sinergia, y es nuestro argumento moral y comercial al mismo tiempo.',
  },
  {
    title: 'Fomentar la responsabilidad.',
    body:  'Impulsamos proyectos que la población valora, cuida y habita con orgullo. Los espacios que se aman, duran.',
  },
];

function Focus() {
  const ref = uR_F(null);
  const [y, setY] = uS_F(0);
  const [run, setRun] = uS_F(false);

  uE_F(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const p  = Math.max(0, Math.min(1, 1 - rect.top / vh));
      setY(Math.min(34, p * 34));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  uE_F(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setRun(true); obs.disconnect(); }
    }, { threshold: 0.2 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={ref} data-screen-label="04 Focus CREER" style={focusStyles.section}>
      <div style={{
        ...focusStyles.bg,
        transform: `translateY(${y}px)`,
      }} aria-hidden="true">
        <img
          src="assets/images/prosperia-focus-viena-aerea.jpg"
          alt=""
          style={{ width: '100%', height: '120%', objectFit: 'cover', display: 'block' }}
          loading="lazy"
          decoding="async"
        />
      </div>
      <div style={focusStyles.overlay} aria-hidden="true" />

      <div className="container" style={focusStyles.inner}>
        <span className="eyebrow" style={focusStyles.eyebrow}>NUESTRO PROPÓSITO</span>
        <h2 style={focusStyles.title}>CREER</h2>
        <p style={focusStyles.intro}>
          Las ciudades que construimos nos construyen de vuelta. Por eso no diseñamos espacios — diseñamos las vidas que van a vivir en ellos.
        </p>
        <p style={focusStyles.transition}>En cada proyecto buscamos:</p>

        <div style={focusStyles.grid}>
          {PILARES.map((p, i) => (
            <article
              key={i}
              style={{
                ...focusStyles.card,
                opacity: run ? 1 : 0,
                transform: run ? 'translateY(0)' : 'translateY(24px)',
                transition: `opacity 600ms ease ${i * 200}ms, transform 600ms ease ${i * 200}ms`,
              }}
            >
              <div style={focusStyles.cardNumber}>0{i + 1}</div>
              <h3 style={focusStyles.cardTitle}>{p.title}</h3>
              <p style={focusStyles.cardBody}>{p.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const focusStyles = {
  section: {
    position: 'relative',
    paddingBlock: 'var(--space-3xl)',
    overflow: 'hidden',
    color: '#fff',
    background: '#0F1B23',
  },
  bg: {
    position: 'absolute', inset: '-10% 0 -10% 0',
    transition: 'transform 200ms linear',
  },
  overlay: {
    position: 'absolute', inset: 0,
    background: 'rgba(33, 52, 64, 0.72)',
  },
  inner: {
    position: 'relative',
    zIndex: 2,
  },
  eyebrow: {
    color: 'var(--color-copper-fallback)',
    display: 'block',
  },
  title: {
    margin: '16px 0 0',
    fontWeight: 800,
    fontSize: 'clamp(32px, 8vw, 72px)',
    lineHeight: 1.0,
    color: '#fff',
    letterSpacing: '0.04em',
  },
  intro: {
    margin: '32px 0 0',
    maxWidth: 800,
    color: '#fff',
    fontSize: 'clamp(22px, 2.2vw, 28px)',
    lineHeight: 1.5,
    fontWeight: 400,
    textWrap: 'pretty',
  },
  transition: {
    margin: '40px 0 32px',
    color: 'rgba(255,255,255,0.85)',
    fontStyle: 'italic',
    fontSize: 18,
    fontWeight: 400,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 24,
    marginTop: 16,
  },
  card: {
    background: 'rgba(250, 249, 244, 0.97)',
    color: 'var(--color-navy-deep)',
    padding: 32,
    borderRadius: 4,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
  },
  cardNumber: {
    fontFamily: 'ui-monospace, Menlo, Consolas, monospace',
    fontSize: 12,
    letterSpacing: '0.18em',
    color: 'var(--color-copper-fallback)',
    fontWeight: 700,
  },
  cardTitle: {
    margin: 0,
    fontSize: 22,
    fontWeight: 700,
    lineHeight: 1.25,
    color: 'var(--color-navy-deep)',
    textWrap: 'balance',
  },
  cardBody: {
    margin: 0,
    fontSize: 16,
    lineHeight: 1.55,
    color: 'var(--color-navy-deep)',
  },
};

const focusMQ = document.createElement('style');
focusMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="04 Focus CREER"] > div:last-child > div:last-child {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }
`;
document.head.appendChild(focusMQ);

window.Focus = Focus;