// SINZETA Landing — scroll-driven from hero (logo) to honeycomb (sections)

const HEX_GLOW = '#00E5FF';

// Single hexagon — pointy-top orientation
function Hex({ size = 100, stroke = HEX_GLOW, fill = 'transparent', strokeWidth = 1.5, opacity = 1, glow = false, children, onClick, label, sub }) {
  const sizeStr = typeof size === 'number' ? `${size}px` : size;
  // Pointy-top hex: width = sqrt(3)*r, height = 2*r, r = size/2
  const VB = 100;
  const ph = 200;
  const pw = Math.sqrt(3) * VB;
  const ppoints = [
    [pw / 2, 0], [pw, VB * 0.5], [pw, VB * 1.5],
    [pw / 2, ph], [0, VB * 1.5], [0, VB * 0.5],
  ].map(p => p.join(',')).join(' ');
  const cssW = `calc(${sizeStr} * ${Math.sqrt(3) / 2})`;
  const cssH = sizeStr;
  const labelSize = `calc(${sizeStr} * 0.10)`;
  const subSize   = `calc(${sizeStr} * 0.06)`;

  return (
    <div
      onClick={onClick}
      style={{
        position: 'relative',
        width: cssW, height: cssH,
        cursor: onClick ? 'pointer' : 'default',
        opacity: opacity,
        transition: 'opacity .4s, transform .3s, filter .3s',
        filter: glow ? `drop-shadow(0 0 14px ${stroke})` : 'none',
      }}
      className={onClick ? 'hex-clickable' : ''}
    >
      <svg viewBox={`0 0 ${pw} ${ph}`} preserveAspectRatio="none" width="100%" height="100%"
           style={{ display: 'block', overflow: 'visible' }}>
        <polygon points={ppoints} fill={fill} stroke={stroke} strokeWidth={strokeWidth * 2}
                 strokeLinejoin="miter" vectorEffect="non-scaling-stroke" />
      </svg>
      {(label || children) && (
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center',
          textAlign: 'center', padding: '0.5vmin',
          pointerEvents: 'none',
        }}>
          {children}
          {label && (
            <div style={{
              fontFamily: '"Orbitron", sans-serif', fontWeight: 600,
              fontSize: labelSize, letterSpacing: '0.18em',
              color: '#E6FBFF', textShadow: '0 0 12px rgba(0,229,255,0.55)',
            }}>{label}</div>
          )}
          {sub && (
            <div style={{
              marginTop: '0.6vmin', fontFamily: '"JetBrains Mono", monospace',
              fontSize: subSize, letterSpacing: '0.3em',
              color: 'rgba(180,240,255,0.55)', textTransform: 'uppercase',
            }}>{sub}</div>
          )}
        </div>
      )}
    </div>
  );
}

// V3 logo mark — uses SinzetaV3 from monogram-v3.jsx
function SinzetaV3Mark({ size = '60vmin' }) {
  return (
    <div style={{ width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <SinzetaV3
        size="100%"
        id="hero-landing"
        params={{ topEnd: 'diag-fw', botEnd: 'diag-fw', angle: 22, thick: 46, length: 310 }}
        circleR={80}
        mode="plasma"
      />
    </div>
  );
}

function App() {
  const [scrollProgress, setScrollProgress] = React.useState(0);
  const [hoveredHex, setHoveredHex] = React.useState(null);
  const stickyRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (!stickyRef.current) return;
      const el = stickyRef.current;
      const elTop = el.getBoundingClientRect().top + window.scrollY;
      const scrolled = window.scrollY - elTop;
      const total = el.offsetHeight - window.innerHeight;
      const p = Math.max(0, Math.min(1, scrolled / Math.max(1, total)));
      setScrollProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Hero exits p=0..0.45, honeycomb enters p=0.35..0.80, stable 0.80..1
  const heroY       = -Math.min(scrollProgress / 0.45, 1) * 100;
  const heroOpacity = Math.max(0, 1 - scrollProgress / 0.40);
  const honeyP      = Math.max(0, Math.min(1, (scrollProgress - 0.35) / 0.45));
  const honeyY      = (1 - honeyP) * 100;
  const honeyOpacity = honeyP;

  const sections = [
    { id: 'projects', label: 'Proyectos',     sub: '01' },
    { id: 'about',    label: 'Quiénes somos', sub: '02' },
    { id: 'contact',  label: 'Contacto',      sub: '03' },
    { id: 'deeper',   label: 'El más allá',   sub: '04 · DEEPER' },
  ];

  // Hex sizes (vmin units as numbers, used as `${n}vmin`)
  const MAIN = 34;   // main hex height in vmin
  const DECO = 14;   // large decorative
  const DECOS = 9;   // small decorative

  // Pitch helpers for pointy-top hexagons
  const pitchX = (r) => Math.sqrt(3) * r;   // horizontal distance between adjacent columns
  const pitchY = (r) => 1.5 * r;            // vertical distance between adjacent rows

  // 4 main hexes in a 2×2 honeycomb grid
  const halfR = MAIN / 2; // radius (half-height) of a main hex
  const mainPositions = [
    { x: -pitchX(halfR) * 0.5, y: -pitchY(halfR) * 0.5 },
    { x:  pitchX(halfR) * 0.5, y: -pitchY(halfR) * 0.5 },
    { x: -pitchX(halfR) * 0.5, y:  pitchY(halfR) * 0.5 },
    { x:  pitchX(halfR) * 0.5, y:  pitchY(halfR) * 0.5 },
  ];

  // Decorative hexes — [col, row, size, opacity]
  // col/row multiplied by each hex's own pitch to place them
  const decoHexes = [
    // top / bottom centers (sized like DECO)
    [0,    -1.6,  DECO,  0.50],
    [0,     1.6,  DECO,  0.50],
    // left / right sides
    [-2.6,  0,    DECO,  0.45],
    [ 2.6,  0,    DECO,  0.45],
    // mid corners
    [-2,   -1.6,  DECOS, 0.35],
    [ 2,   -1.6,  DECOS, 0.38],
    [-2,    1.6,  DECOS, 0.35],
    [ 2,    1.6,  DECOS, 0.38],
    // outer fringe
    [-3.5, -0.6,  DECOS, 0.22],
    [ 3.5,  0.6,  DECOS, 0.22],
    [-3.2,  1.9,  DECOS, 0.18],
    [ 3.2, -1.9,  DECOS, 0.18],
    // center gap
    [ 0,    0,    DECO,  0.22],
  ];

  return (
    <>
      {/* Fixed cosmic background */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: -1,
        background: 'radial-gradient(ellipse at 50% 30%, #0E2540 0%, #040915 55%, #000 100%)',
      }}>
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <defs>
            <pattern id="bg-stars" x="0" y="0" width="400" height="400" patternUnits="userSpaceOnUse">
              {Array.from({ length: 80 }).map((_, i) => {
                const x = (i * 53 + 7) % 400;
                const y = (i * 89 + 23) % 400;
                const r = 0.3 + ((i * 7) % 10) / 12;
                const op = 0.2 + ((i * 13) % 10) / 25;
                return <circle key={i} cx={x} cy={y} r={r} fill={i % 9 === 0 ? '#a8fcff' : '#fff'} opacity={op} />;
              })}
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#bg-stars)" />
        </svg>
      </div>

      {/* Scroll driver — 220vh gives comfortable transition range */}
      <div ref={stickyRef} style={{ height: '220vh', position: 'relative' }}>

        {/* Sticky viewport — clips overflow so honeycomb doesn't show during hero */}
        <div style={{
          position: 'sticky', top: 0, height: '100vh',
          overflow: 'hidden',
          isolation: 'isolate',
        }}>

          {/* ── SCREEN 1 · HERO ── */}
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            gap: '4vmin',
            transform: `translateY(${heroY}vh)`,
            opacity: heroOpacity,
            willChange: 'transform, opacity',
          }}>
            <SinzetaV3Mark size="60vmin" />

            <div style={{ textAlign: 'center', lineHeight: 1 }}>
              <div style={{
                fontFamily: '"Orbitron", sans-serif', fontWeight: 700,
                fontSize: 'clamp(36px, 6.5vmin, 92px)', letterSpacing: '0.38em', paddingLeft: '0.38em',
                color: '#E6FBFF', textShadow: '0 0 40px rgba(0,229,255,0.3)',
              }}>SINZETA</div>
              <div style={{
                marginTop: '2vmin', fontFamily: '"JetBrains Mono", monospace',
                fontSize: 'clamp(11px, 1.6vmin, 20px)', letterSpacing: '0.8em', paddingLeft: '0.8em',
                color: 'rgba(180,240,255,0.7)',
              }}>SIN LÍMITES</div>
              <div style={{
                marginTop: '2.6vmin',
                display: 'inline-flex', alignItems: 'center', gap: '1.2vmin',
                padding: '0.9vmin 2.5vmin',
                fontFamily: '"JetBrains Mono", monospace',
                fontSize: 'clamp(10px, 1.3vmin, 16px)', letterSpacing: '0.5em',
                color: 'rgba(0,229,255,0.85)',
                border: '1px solid rgba(0,229,255,0.35)',
                borderRadius: 999,
              }}>
                <span style={{
                  width: 7, height: 7, borderRadius: '50%',
                  background: '#00E5FF', boxShadow: '0 0 10px #00E5FF',
                  animation: 'pulse 1.6s ease-in-out infinite',
                  flexShrink: 0,
                }} />
                COMING SOON
              </div>
            </div>

            {/* Scroll indicator */}
            <div style={{
              position: 'absolute', bottom: '3vh',
              left: '50%', transform: 'translateX(-50%)',
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: 10, letterSpacing: '0.4em',
              color: 'rgba(180,240,255,0.55)',
              textAlign: 'center',
              opacity: Math.max(0, 1 - scrollProgress * 3),
              pointerEvents: 'none',
            }}>
              <div style={{ marginBottom: 8 }}>SCROLL</div>
              <div style={{ width: 1, height: 28, background: 'rgba(0,229,255,0.4)', margin: '0 auto', position: 'relative' }}>
                <div style={{
                  position: 'absolute', top: 0, left: -2,
                  width: 5, height: 10,
                  background: '#00E5FF', boxShadow: '0 0 8px #00E5FF',
                  animation: 'scrollDot 2s ease-in-out infinite',
                }} />
              </div>
            </div>

            <div style={{
              position: 'absolute', top: 24, left: 28,
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: 10, letterSpacing: '0.22em',
              color: 'rgba(180,240,255,0.4)',
            }}>SINZETA.COM · 2026</div>
          </div>

          {/* ── SCREEN 2 · HONEYCOMB ── */}
          <div style={{
            position: 'absolute', inset: 0,
            transform: `translateY(${honeyY}vh)`,
            opacity: honeyOpacity,
            // Keep it fully off-screen when invisible so it never bleeds into hero
            visibility: honeyOpacity < 0.01 ? 'hidden' : 'visible',
            willChange: 'transform, opacity',
            pointerEvents: honeyOpacity > 0.5 ? 'auto' : 'none',
          }}>
            {/* Section header */}
            <div style={{
              position: 'absolute', top: '5vh', left: '50%', transform: 'translateX(-50%)',
              textAlign: 'center', whiteSpace: 'nowrap',
            }}>
              <div style={{
                fontFamily: '"Orbitron", sans-serif', fontWeight: 700,
                fontSize: 'clamp(14px, 2vmin, 24px)', letterSpacing: '0.38em', paddingLeft: '0.38em',
                color: '#E6FBFF',
              }}>SINZETA</div>
              <div style={{
                marginTop: 8, fontFamily: '"JetBrains Mono", monospace',
                fontSize: 'clamp(8px, 1vmin, 12px)', letterSpacing: '0.5em', paddingLeft: '0.5em',
                color: 'rgba(180,240,255,0.55)',
              }}>EXPLORA EL ECOSISTEMA</div>
            </div>

            {/* Hex grid — all positioned from the center of the viewport */}
            {/* Main hexes */}
            {mainPositions.map((pos, i) => {
              const sec = sections[i];
              const isHovered = hoveredHex === sec.id;
              return (
                <div key={sec.id} style={{
                  position: 'absolute', left: '50%', top: '50%',
                  transform: `translate(calc(-50% + ${pos.x}vmin), calc(-50% + ${pos.y}vmin))`,
                }}
                  onMouseEnter={() => setHoveredHex(sec.id)}
                  onMouseLeave={() => setHoveredHex(null)}
                >
                  <Hex
                    size={`${MAIN}vmin`}
                    stroke={isHovered ? '#80F5FF' : HEX_GLOW}
                    strokeWidth={isHovered ? 2.5 : 2}
                    glow={isHovered}
                    label={sec.label}
                    sub={sec.sub}
                    onClick={() => {}}
                  />
                </div>
              );
            })}

            {/* Decorative hexes */}
            {decoHexes.map(([col, row, sz, op], i) => {
              const r = sz / 2;
              const px = col * pitchX(r);
              const py = row * pitchY(r);
              return (
                <div key={i} style={{
                  position: 'absolute', left: '50%', top: '50%',
                  transform: `translate(calc(-50% + ${px}vmin), calc(-50% + ${py}vmin))`,
                  pointerEvents: 'none',
                }}>
                  <Hex
                    size={`${sz}vmin`}
                    stroke={HEX_GLOW}
                    strokeWidth={1}
                    opacity={op}
                  />
                </div>
              );
            })}

            {/* Footer hint */}
            <div style={{
              position: 'absolute', bottom: '3.5vh', left: '50%', transform: 'translateX(-50%)',
              fontFamily: '"JetBrains Mono", monospace',
              fontSize: 'clamp(7px, 0.9vmin, 11px)', letterSpacing: '0.5em',
              color: 'rgba(180,240,255,0.4)', textAlign: 'center', whiteSpace: 'nowrap',
            }}>HOVER · EXPLORE</div>
          </div>

        </div>
      </div>

      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%       { opacity: 0.4; transform: scale(0.85); }
        }
        @keyframes scrollDot {
          0%   { top: 0;    opacity: 1; }
          80%  { top: 28px; opacity: 0.3; }
          100% { top: 0;    opacity: 1; }
        }
        .hex-clickable:hover { transform: scale(1.04); }
      `}</style>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);