/* GlassPanel — slides up from bottom, 3D parallax on mouse, marquee at bottom. */
const { useEffect: useEffectGP, useRef: useRefGP } = React;

function GlassPanel() {
  const containerRef = useRefGP(null);
  const wrapperRef = useRefGP(null);
  const panelRef = useRefGP(null);

  useEffectGP(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const tween = window.gsap.fromTo(wrapperRef.current,
      { y: '100%' },
      {
        y: '0%', ease: 'none',
        scrollTrigger: {
          trigger: containerRef.current,
          start: 'top bottom',
          end: 'bottom bottom',
          scrub: 1.5,
        },
      }
    );

    const onMove = (e) => {
      if (!panelRef.current) return;
      const rect = panelRef.current.getBoundingClientRect();
      const moveX = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
      const moveY = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
      window.gsap.to(panelRef.current, {
        x: moveX * 20, y: moveY * 20,
        rotationY: moveX * 4, rotationX: -moveY * 4,
        ease: 'power3.out', duration: 1,
      });
    };
    const node = containerRef.current;
    node && node.addEventListener('mousemove', onMove);

    return () => {
      tween.scrollTrigger && tween.scrollTrigger.kill();
      tween.kill();
      node && node.removeEventListener('mousemove', onMove);
    };
  }, []);

  const trustItems = ['BBB ACCREDITED', 'A+ RATING', '5-STAR REVIEWS', 'CASH OFFERS', '7-DAY CLOSE'];
  // Duplicate 4x for seamless infinite scroll
  const marqueeRow = [].concat(trustItems, trustItems, trustItems, trustItems);

  return (
    <div
      ref={containerRef}
      style={{
        position: 'absolute', bottom: 0, left: 0, width: '100%', height: '100vh',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none', padding: '0 24px',
      }}
    >
      <div
        ref={wrapperRef}
        style={{
          width: '100%', maxWidth: 1250, height: 900, maxHeight: '85vh',
          pointerEvents: 'auto', perspective: 1000,
        }}
      >
        <div
          ref={panelRef}
          style={{
            width: '100%', height: '100%',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            borderRadius: 24, position: 'relative', overflow: 'hidden',
            backgroundColor: 'rgba(0, 0, 0, 0.16)',
            backdropFilter: 'blur(160px)',
            WebkitBackdropFilter: 'blur(160px)',
            border: '1px solid rgba(255, 255, 255, 0.1)',
            transformStyle: 'preserve-3d',
            willChange: 'transform',
          }}
        >
          <div style={{
            flex: 1,
            display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: '48px 32px', textAlign: 'center',
          }}>
            <p style={{
              fontFamily: 'var(--font-serif)', fontStyle: 'italic',
              color: 'rgba(255,255,255,0.7)',
              fontSize: 18, margin: '0 0 24px',
            }}>About Us</p>

            <h2 style={{
              fontFamily: 'var(--font-serif)',
              color: '#fff',
              fontSize: 'clamp(2rem, 5.5vw, 96px)',
              lineHeight: 1.06,
              letterSpacing: '-0.015em',
              maxWidth: 1000,
              margin: '0 auto',
              fontWeight: 400,
            }}>
              Selling your <span style={{ fontStyle: 'italic' }}>Tampa Bay</span> home should be simple.
              We make a fair <span style={{ fontStyle: 'italic' }}>cash</span> offer, you pick the closing date,
              we handle the <span style={{ fontStyle: 'italic' }}>rest</span>.
            </h2>

            <p style={{
              fontFamily: 'var(--font-sans)',
              color: 'rgba(255,255,255,0.6)',
              fontSize: 15,
              letterSpacing: '0.02em',
              marginTop: 32,
              maxWidth: 620,
            }}>
              Locally owned and operated in the Tampa Bay area — your neighbors, not a faceless out-of-state fund.
            </p>
          </div>

          {/* Marquee */}
          <div style={{
            borderTop: '1px solid rgba(255,255,255,0.1)',
            padding: '24px 0',
            overflow: 'hidden',
            position: 'relative',
          }}>
            <div className="animate-marquee" style={{
              display: 'flex', gap: 56,
              whiteSpace: 'nowrap', width: 'max-content',
            }}>
              {marqueeRow.map((label, i) => (
                <span key={i} style={{
                  color: '#fff', opacity: 0.4,
                  textTransform: 'uppercase',
                  fontFamily: 'var(--font-sans)',
                  fontWeight: 600, fontSize: 14,
                  letterSpacing: '0.18em',
                  transition: 'opacity 0.3s',
                  cursor: 'default',
                }}
                onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
                onMouseLeave={(e) => e.currentTarget.style.opacity = 0.4}
                >
                  ★ {label}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.GlassPanel = GlassPanel;