/* eslint-disable react/prop-types */
/**
 * Method · Sección 5 del Home · CREAR CON PRECISIÓN.
 * Brief 1 §3.1 Sección 5.
 *
 * Espejo del patrón de Focus (CREER):
 *  - Sección dark navy con la imagen aérea de San Pedro Garza García
 *    como background full-bleed con parallax sutil (34px max).
 *  - Overlay navy 72% para que el texto sobre la imagen sea legible
 *    en cualquier scroll position.
 *  - Eyebrow EL MÉTODO + h2 CREAR CON PRECISIÓN + descripción + callout DIGO®
 *    + 3 cards de dimensiones del método + CTA al algoritmo DIGO®.
 *  - Cards en cream alpha 97% (como Focus) para legibilidad sobre el dark.
 *  - Entrada escalonada de las cards al hacer scroll a la sección.
 *
 * Por qué SPGG: es el polígono donde Prosperia origina su praxis y donde
 * Sierra Madre + Cerro de la Silla definen la geografía que la firma lee.
 */

const { useState: uS_M, useEffect: uE_M, useRef: uR_M } = React;

const METHOD_CARDS = [
  {
    title: 'Antropología de la Demanda',
    body:  'No analizamos inventarios, analizamos personas. Entendemos sus necesidades reales, estilos de vida y deseos no resueltos.',
    icon: 'people',
  },
  {
    title: 'Identificación de Oportunidades Ocultas',
    body:  'Contrastamos la demanda real contra la oferta existente para nombrar lo que falta en la zona — lo invisible al ojo, evidente para el algoritmo.',
    icon: 'compass',
  },
  {
    title: 'Definición de Producto Ideal',
    body:  'Diseñamos el concepto óptimo (uso, precio, dimensión, mezcla y proporción ideal) que garantiza la máxima rentabilidad con el menor riesgo, porque nace de una necesidad real, no de una tendencia de moda.',
    icon: 'target',
  },
];

function Method() {
  const ref = uR_M(null);
  const [y, setY] = uS_M(0);
  const [run, setRun] = uS_M(false);

  // Parallax sutil (mismo patrón que Focus)
  uE_M(() => {
    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);
  }, []);

  // Reveal escalonado para las cards
  uE_M(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setRun(true); obs.disconnect(); }
    }, { threshold: 0.15 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={ref} data-screen-label="05 Method CREAR" style={methodStyles.section}>
      <div style={{
        ...methodStyles.bg,
        transform: `translateY(${y}px)`,
      }} aria-hidden="true">
        <img
          src="assets/images/prosperia-method-spgg-cerro-silla.jpg"
          alt=""
          style={{ width: '100%', height: '120%', objectFit: 'cover', objectPosition: 'center 40%', display: 'block' }}
          loading="lazy"
          decoding="async"
        />
      </div>
      <div style={methodStyles.overlay} aria-hidden="true" />

      <div className="container" style={methodStyles.inner}>
        <span className="eyebrow" style={methodStyles.eyebrow}>EL MÉTODO</span>
        <h2 style={methodStyles.title}>CREAR CON PRECISIÓN</h2>

        <p style={methodStyles.desc}>
          El estudio de mercado tradicional fundamenta sus decisiones en lo que ya existe: cuántos departamentos se vendieron, a qué precio y de qué tamaño. Eso no es visión; es un espejo retrovisor. En Prosperia utilizamos nuestro Algoritmo DIGO® para mirar hacia adelante.
        </p>

        <blockquote style={methodStyles.callout}>
          Con nuestro Algoritmo DIGO® analizamos escenarios futuros empleando inteligencia predictiva para medir la demanda insatisfecha con precisión.
        </blockquote>

        <p style={methodStyles.transition}>Tres dimensiones, una sola lectura:</p>

        <div data-method-grid style={methodStyles.grid}>
          {METHOD_CARDS.map((c, i) => (
            <article
              key={i}
              data-cursor="link"
              style={{
                ...methodStyles.card,
                opacity: run ? 1 : 0,
                transform: run ? 'translateY(0)' : 'translateY(24px)',
                transition: `opacity 600ms ease ${i * 200}ms, transform 600ms ease ${i * 200}ms, box-shadow 360ms ease, border-color 360ms ease`,
              }}
            >
              <div style={methodStyles.cardIcon}>
                <window.Icon name={c.icon} size={44} stroke={1.4} />
              </div>
              <h3 style={methodStyles.cardTitle}>{c.title}</h3>
              <p style={methodStyles.cardBody}>{c.body}</p>
              <div style={methodStyles.cardCorner} aria-hidden="true">
                <window.Icon name="arrow-up-right" size={20} stroke={1.6} />
              </div>
            </article>
          ))}
        </div>

        <div style={methodStyles.ctaWrap}>
          <a href="/servicios/Servicios.html#digo" className="btn btn-copper">
            Conoce el Algoritmo DIGO®
            <window.Icon name="arrow-right" size={16} stroke={1.8} />
          </a>
        </div>
      </div>
    </section>
  );
}

const methodStyles = {
  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',
  },
  desc: {
    margin: '32px 0 0',
    maxWidth: 820,
    color: '#fff',
    fontSize: 'clamp(20px, 2vw, 26px)',
    lineHeight: 1.5,
    fontWeight: 400,
    textWrap: 'pretty',
  },
  callout: {
    margin: '32px 0 0',
    padding: '4px 0 4px 20px',
    maxWidth: 820,
    borderLeft: '3px solid var(--color-copper-fallback)',
    fontSize: 'clamp(18px, 1.7vw, 22px)',
    fontWeight: 700,
    lineHeight: 1.45,
    color: '#fff',
    fontStyle: 'normal',
  },
  transition: {
    margin: '48px 0 24px',
    color: 'rgba(255,255,255,0.85)',
    fontStyle: 'italic',
    fontSize: 18,
    fontWeight: 400,
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 24,
    marginTop: 8,
  },
  card: {
    background: 'rgba(250, 249, 244, 0.97)',
    color: 'var(--color-navy-deep)',
    padding: 32,
    borderRadius: 4,
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    position: 'relative',
    border: '1px solid transparent',
  },
  cardIcon: {
    color: 'var(--color-copper-fallback)',
    marginBottom: 8,
  },
  cardCorner: {
    position: 'absolute',
    top: 24, right: 24,
    color: 'var(--color-copper-fallback)',
    opacity: 0,
    transform: 'translate(-6px, 6px)',
    transition: 'opacity 360ms ease, transform 360ms cubic-bezier(0.16,1,0.3,1)',
  },
  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)',
  },
  ctaWrap: {
    marginTop: 64,
    display: 'flex',
    justifyContent: 'flex-start',
  },
};

const methodMQ = document.createElement('style');
methodMQ.textContent = `
  @media (min-width: 900px) {
    section[data-screen-label="05 Method CREAR"] [data-method-grid] {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }
  section[data-screen-label="05 Method CREAR"] article:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
    border-color: rgba(168, 107, 45, 0.30) !important;
  }
  section[data-screen-label="05 Method CREAR"] article:hover > div[aria-hidden="true"] {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
`;
document.head.appendChild(methodMQ);

window.Method = Method;