// PrismaHero — cinematic fullscreen hero with background video, big type, pull-up reveals
// Adapted from 21st.dev/r/rahil1202/prisma-hero for ODAS (cream editorial palette)

function WordsPullUp({ text, style, showAsterisk = false, delay = 0 }) {
  const ref = React.useRef(null);
  const [isInView, setIsInView] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) { setIsInView(true); io.disconnect(); } },
      { threshold: 0.2 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const words = text.split(' ');

  return (
    <span ref={ref} style={{ display: 'inline-flex', flexWrap: 'wrap', ...style }}>
      {words.map((word, i) => {
        const isLast = i === words.length - 1;
        return (
          <span
            key={i}
            style={{
              display: 'inline-block',
              position: 'relative',
              marginRight: isLast ? 0 : '0.15em',
              transform: isInView ? 'translateY(0)' : 'translateY(30px)',
              opacity: isInView ? 1 : 0,
              transition: `transform 0.9s cubic-bezier(0.16,1,0.3,1) ${delay + i * 0.08}s, opacity 0.9s cubic-bezier(0.16,1,0.3,1) ${delay + i * 0.08}s`,
            }}
          >
            {word}
            {showAsterisk && isLast && (
              <span style={{
                position: 'absolute', top: '0.55em', right: '-0.35em',
                fontSize: '0.31em', fontFamily: 'Instrument Serif, serif',
              }}>*</span>
            )}
          </span>
        );
      })}
    </span>
  );
}

function PrismaHero({ root }) {
  const isMobile = window.useIsMobile();
  const navItems = isMobile ? [
    { label: 'Problema', id: 'problema' },
    { label: 'Solución', id: 'solucion' },
    { label: 'Ley', id: 'ley' },
    { label: 'APP', id: 'app' },
  ] : [
    { label: 'El Problema', id: 'problema' },
    { label: 'Solución', id: 'solucion' },
    { label: 'Ley 1/2025', id: 'ley' },
    { label: 'APP', id: 'app' },
    { label: 'Objetivo', id: 'objetivo' },
    { label: 'Formación', id: 'formacion' },
  ];

  // Smooth scroll to a section within the editorial root scroll container
  const handleNav = (e, id) => {
    e.preventDefault();
    const target = document.getElementById(id);
    if (!target) return;
    // root may be a scrolling container; fall back to window
    const scroller = (root && typeof root.scrollTo === 'function') ? root : window;
    const scrollerRect = (scroller === window)
      ? { top: 0 }
      : scroller.getBoundingClientRect();
    const currentTop = (scroller === window) ? window.scrollY : scroller.scrollTop;
    const targetTop = target.getBoundingClientRect().top - scrollerRect.top + currentTop - 20;
    scroller.scrollTo({ top: targetTop, behavior: 'smooth' });
  };

  // fade-in for the right column
  const [mounted, setMounted] = React.useState(false);
  const [videoReady, setVideoReady] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setMounted(true), 80); return () => clearTimeout(t); }, []);

  return (
    <section style={{
      height: isMobile ? 'auto' : '100vh',
      minHeight: isMobile ? '100vh' : undefined,
      width: '100%', position: 'relative',
      padding: isMobile ? '8px 8px 8px' : '0 12px 12px', boxSizing: 'border-box',
    }}>
      <div style={{
        position: 'relative',
        height: isMobile ? 'auto' : '100%',
        minHeight: isMobile ? 'calc(100vh - 16px)' : undefined,
        width: '100%',
        borderRadius: isMobile ? 18 : 28, overflow: 'hidden',
        background: '#ffffff',
        display: isMobile ? 'flex' : 'block',
        flexDirection: isMobile ? 'column' : undefined,
        paddingTop: isMobile ? 56 : 0,
      }}>
        {/* Background image — factory/assembly-line hero artwork */}
        <img
          src="assets/hero-factory.png"
          alt=""
          aria-hidden="true"
          style={isMobile ? {
            position: 'relative',
            width: '92%', maxWidth: 360, height: 'auto',
            margin: '12px auto 0',
            display: 'block', zIndex: 1,
            mixBlendMode: 'multiply',
          } : {
            position: 'absolute', left: '50%', top: '38%',
            transform: 'translate(-50%, -50%)',
            width: '45%', height: 'auto',
            display: 'block', zIndex: 1,
            mixBlendMode: 'multiply',
          }}
        />

        {/* Subtle vignette for legibility (light) — desktop only */}
        {!isMobile && <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 2,
          background: 'linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.92) 100%)',
        }} />}

        {/* Navbar pill */}
        <nav style={{
          position: 'absolute', left: '50%', top: 0, zIndex: 20,
          transform: 'translateX(-50%)',
          maxWidth: isMobile ? 'calc(100% - 24px)' : 'none',
          overflowX: isMobile ? 'auto' : 'visible',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center',
            gap: isMobile ? 14 : 28,
            background: '#0a0a0a',
            padding: isMobile ? '10px 16px' : '12px 28px',
            borderRadius: '0 0 22px 22px',
            whiteSpace: 'nowrap',
          }}>
            <a href="#" style={{
              display: 'flex', alignItems: 'center',
              color: '#E1E0CC', textDecoration: 'none',
              marginRight: isMobile ? 4 : 8,
            }}>
              <img src="assets/odas-logo.png" alt="ODAS" style={{
                height: isMobile ? 14 : 18, width: 'auto', display: 'block',
                filter: 'brightness(0) invert(1) sepia(0.15)',
              }} />
            </a>
            {navItems.map((item) => (
              <a
                key={item.id} href={`#${item.id}`}
                onClick={(e) => handleNav(e, item.id)}
                style={{
                  fontSize: isMobile ? 11 : 13,
                  fontFamily: 'Instrument Sans, sans-serif',
                  color: 'rgba(225,224,204,0.75)', textDecoration: 'none',
                  transition: 'color 0.2s',
                  whiteSpace: 'nowrap',
                }}
                onMouseEnter={(e) => (e.currentTarget.style.color = '#E1E0CC')}
                onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(225,224,204,0.75)')}
              >
                {item.label}
              </a>
            ))}
          </div>
        </nav>

        {/* Top eyebrow + status — desktop fixed, mobile hidden (saves space) */}
        {!isMobile && <div style={{
          position: 'absolute', top: 28, left: 32, zIndex: 10,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing: 2, textTransform: 'uppercase',
          color: 'rgba(10,10,10,0.6)',
          opacity: mounted ? 1 : 0, transition: 'opacity 1.2s ease 0.6s',
        }}>
          ◇ Negentropy Labs · ODAS
        </div>}

        {!isMobile && <div style={{
          position: 'absolute', top: 28, right: 32, zIndex: 10,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing: 2, textTransform: 'uppercase',
          color: 'rgba(10,10,10,0.6)',
          display: 'flex', alignItems: 'center', gap: 8,
          opacity: mounted ? 1 : 0, transition: 'opacity 1.2s ease 0.6s',
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: '50%',
            background: '#5aa05a', boxShadow: '0 0 10px rgba(90,160,90,0.6)',
          }} />
          Ley 1/2025 · Vigente
        </div>}

        {/* Hero content — title (giant on desktop, sized down on mobile) */}
        <div style={isMobile ? {
          position: 'relative', zIndex: 10,
          padding: '0 24px',
          marginTop: 24,
        } : {
          position: 'absolute', left: 0, right: 0, bottom: 0,
          padding: '0 32px 60px', zIndex: 10,
        }}>
          <div style={isMobile ? { display: 'block' } : {
            display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
            alignItems: 'end', gap: 24,
          }}>
            <div style={isMobile ? {} : { gridColumn: 'span 7' }}>
              <h1 style={{
                fontFamily: 'Instrument Serif, serif',
                fontWeight: 400,
                lineHeight: 0.85,
                letterSpacing: '-0.06em',
                fontSize: isMobile ? 'clamp(80px, 28vw, 130px)' : 'clamp(120px, 20vw, 340px)',
                color: '#0a0a0a',
                margin: 0,
                textAlign: isMobile ? 'center' : 'left',
              }}>
                <WordsPullUp text="ODAS" showAsterisk />
              </h1>
            </div>
          </div>
        </div>

        {/* Description + CTA */}
        <div style={isMobile ? {
          position: 'relative', zIndex: 10,
          padding: '24px 24px 32px',
          display: 'flex', flexDirection: 'column', gap: 16,
          alignItems: 'center', textAlign: 'center',
          marginTop: 'auto',
        } : {
          position: 'absolute', bottom: 60, right: 32, zIndex: 10,
          maxWidth: 360,
          display: 'flex', flexDirection: 'column', gap: 20,
          alignItems: 'flex-end', textAlign: 'right',
        }}>
          <p style={{
            fontSize: isMobile ? 14 : 15, lineHeight: 1.4,
            color: 'rgba(10,10,10,0.75)',
            margin: 0, textWrap: 'pretty',
            transform: mounted ? 'translateY(0)' : 'translateY(20px)',
            opacity: mounted ? 1 : 0,
            transition: 'transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s, opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s',
          }}>
            Objetivo de Desarrollo Alimentario Sostenible — inteligencia artificial que equilibra oferta y demanda del excedente alimentario, en cumplimiento de la Ley 1/2025.
          </p>

          <a
            href="mailto:hello@negentropylabs.com"
            className="prisma-cta"
            style={{
              alignSelf: isMobile ? 'center' : 'flex-end',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              background: '#0a0a0a', color: '#faf8f3',
              padding: '6px 6px 6px 22px',
              borderRadius: 999,
              fontSize: 14, fontWeight: 500,
              fontFamily: 'Instrument Sans, sans-serif',
              textDecoration: 'none',
              transform: mounted ? 'translateY(0)' : 'translateY(20px)',
              opacity: mounted ? 1 : 0,
              transition: 'transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s, opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.7s, gap 0.3s',
            }}
          >
            Solicitar acceso
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 34, height: 34, borderRadius: '50%',
              background: '#E1E0CC',
              transition: 'transform 0.3s',
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <line x1="5" y1="12" x2="19" y2="12" />
                <polyline points="12 5 19 12 12 19" />
              </svg>
            </span>
          </a>
        </div>

        <style>{`
          .prisma-cta:hover { gap: 14px !important; }
          .prisma-cta:hover > span { transform: scale(1.08); }

          .prisma-aurora {
            background:
              radial-gradient(ellipse 80% 60% at 20% 30%, rgba(180, 90, 45, 0.55) 0%, transparent 55%),
              radial-gradient(ellipse 70% 55% at 80% 20%, rgba(90, 55, 130, 0.55) 0%, transparent 60%),
              radial-gradient(ellipse 90% 70% at 60% 85%, rgba(35, 80, 95, 0.65) 0%, transparent 60%),
              radial-gradient(ellipse 60% 50% at 15% 85%, rgba(150, 75, 40, 0.45) 0%, transparent 55%),
              linear-gradient(160deg, #14100c 0%, #0a0908 40%, #0c0f12 100%);
            filter: blur(0px) saturate(1.15);
            animation: prisma-drift 22s ease-in-out infinite alternate;
          }
          @keyframes prisma-drift {
            0%   { transform: scale(1)   translate(0, 0); }
            50%  { transform: scale(1.08) translate(-1.5%, 1%); }
            100% { transform: scale(1.04) translate(1.5%, -1%); }
          }
        `}</style>
      </div>
    </section>
  );
}

Object.assign(window, { PrismaHero });