/* ============================================================
   Hero — Spline-powered first screen for Tayhami Labs.
   Replaces the previous AI-face motion video with an interactive
   3D Spline scene while preserving the current messaging and CTAs.
   ============================================================ */
function heroScrollTo(e, href) {
  e.preventDefault();
  const el = document.querySelector(href);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
}

function Hero() {
  const robotStageRef = React.useRef(null);

  React.useEffect(() => {
    const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduceMotion) return undefined;

    const stage = robotStageRef.current;
    if (!stage) return undefined;

    let frame = 0;
    const onPointerMove = (event) => {
      if (frame) return;
      frame = window.requestAnimationFrame(() => {
        const x = (event.clientX / window.innerWidth - 0.5) * 2;
        const y = (event.clientY / window.innerHeight - 0.5) * 2;
        stage.style.transform = `translate3d(${x * 22}px, ${y * 12}px, 0) scale(1.22)`;
        frame = 0;
      });
    };

    window.addEventListener('pointermove', onPointerMove, { passive: true });
    return () => {
      window.removeEventListener('pointermove', onPointerMove);
      if (frame) window.cancelAnimationFrame(frame);
    };
  }, []);

  const ctaPrimary = {
    background: 'var(--grad-accent)', color: '#0A0C18', borderRadius: '50px',
    padding: '16px 26px', fontWeight: 700, fontSize: 'clamp(0.95rem,2vw,1.05rem)',
    boxShadow: '0 4px 28px rgba(139,92,246,0.4)', display: 'inline-flex', alignItems: 'center',
    gap: '12px', border: 'none', cursor: 'pointer', whiteSpace: 'nowrap', textDecoration: 'none',
  };
  const ctaGhost = {
    background: 'rgba(255,255,255,0.05)', color: '#ECEAF2', borderRadius: '50px',
    padding: '16px 26px', fontWeight: 600, fontSize: 'clamp(0.95rem,2vw,1.05rem)',
    border: '1px solid rgba(255,255,255,0.18)', cursor: 'pointer', whiteSpace: 'nowrap',
    textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: '10px',
    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
  };

  return (
    <div id="top" data-screen-label="Hero" className="relative w-full hero-fallback-bg flex flex-col"
      style={{ minHeight: '100vh', overflow: 'hidden' }}>
      {/* Ambient 3D background layer */}
      <div className="absolute inset-0" style={{
        background: 'radial-gradient(920px 560px at 78% 24%, rgba(139,92,246,0.26), transparent 64%), radial-gradient(760px 460px at 18% 84%, rgba(155,232,221,0.13), transparent 62%)',
      }} />

      {/* Legibility scrim */}
      <div className="absolute inset-0" style={{
        background: 'linear-gradient(100deg, rgba(8,9,20,0.94) 0%, rgba(8,9,20,0.78) 31%, rgba(8,9,20,0.36) 58%, rgba(8,9,20,0.12) 100%), linear-gradient(to top, rgba(8,9,20,0.9) 0%, rgba(8,9,20,0) 38%)' }} />

      {/* Content */}
      <main className="relative z-10 flex-1 flex items-center mx-auto w-full hero-shell">
        <div className="w-full hero-shell-inner">
          <Card className="relative overflow-hidden border-white/10 bg-black/[0.22] shadow-2xl hero-stage-card"
            style={{ borderColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)' }}>
            <Spotlight className="-top-40 left-0 md:left-60 md:-top-20" fill="white" />

            <div
              ref={robotStageRef}
              className="hero-robot-bg"
              aria-hidden="true"
            >
              <SplineScene
                scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode"
                className="w-full h-full"
              />
            </div>

            <div className="hero-robot-depth-scrim" aria-hidden="true" />

            <div className="grid items-center relative hero-stage-grid" style={{ gridTemplateColumns: 'minmax(440px, 0.92fr) minmax(520px, 1.08fr)' }}>
              <div className="relative z-10" style={{ padding: 'clamp(28px, 5vw, 58px)' }}>
                <div className="fade-up" style={{ animationDelay: '0.05s' }}>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: '9px', padding: '8px 16px 8px 13px',
                    borderRadius: '9999px', border: '1px solid rgba(255,255,255,0.16)', background: 'rgba(255,255,255,0.07)',
                    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', fontSize: 'clamp(0.78rem,1.6vw,0.92rem)',
                    fontWeight: 500, letterSpacing: '0.01em', color: '#E9F6F3', marginBottom: '26px',
                  }}>
                    <Icon name="Sparkles" size={16} style={{ color: '#9BE8DD' }} />
                    Websites, AI bots & business automation
                  </span>
                </div>

                <h1 className="fade-up" style={{ fontFamily: 'var(--font-heading)', fontSize: 'clamp(2.35rem, 6vw, 4.25rem)',
                  lineHeight: 1.03, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 24px', fontWeight: 700, animationDelay: '0.16s' }}>
                  Modern websites & <span className="grad-text">smart automation</span> for your growing business
                </h1>

                <p className="fade-up" style={{ fontSize: 'clamp(1rem, 2.1vw, 1.2rem)', lineHeight: 1.66, opacity: 0.86,
                  maxWidth: '600px', margin: '0 0 38px', fontWeight: 400, animationDelay: '0.3s' }}>
                  We build websites, AI chatbots, WhatsApp automation, CRM and lead
                  systems, dashboards and custom digital tools — so you get more
                  enquiries, reply faster, build trust, and spend less time on manual work.
                </p>

                <div className="fade-up" style={{ display: 'flex', flexWrap: 'wrap', gap: '14px', animationDelay: '0.44s' }}>
                  <a href="#contact" onClick={(e) => heroScrollTo(e, '#contact')} className="cta-btn" style={ctaPrimary}>
                    Grow my business online
                    <Icon name="ArrowRightCircle" size={20} style={{ color: '#0A0C18' }} />
                  </a>
                  <a href="#services" onClick={(e) => heroScrollTo(e, '#services')} className="ghost-btn" style={ctaGhost}>
                    Explore services
                  </a>
                </div>
              </div>

              <div className="hero-visual-spacer" aria-hidden="true" />
            </div>
          </Card>
        </div>
      </main>

      <style>{`
        .hero-shell {
          max-width: min(1760px, 100vw);
        }
        .hero-shell-inner {
          padding: clamp(82px, 10vh, 108px) clamp(18px, 4.5vw, 72px) clamp(22px, 4vh, 48px);
        }
        .hero-stage-card {
          width: 100%;
          min-height: calc(100vh - clamp(112px, 14vh, 156px));
          isolation: isolate;
          border-radius: clamp(26px, 2.4vw, 40px);
        }
        .hero-stage-grid {
          min-height: calc(100vh - clamp(112px, 14vh, 156px));
        }
        .hero-robot-bg {
          position: absolute;
          top: -9%;
          right: -8%;
          bottom: -9%;
          width: min(64vw, 1040px);
          z-index: 1;
          opacity: 0.98;
          pointer-events: auto;
          transform: translate3d(0, 0, 0) scale(1.22);
          transform-origin: 56% 50%;
          transition: transform 140ms ease-out;
          will-change: transform;
        }
        .hero-robot-bg .spline-scene,
        .hero-robot-bg spline-viewer {
          min-height: 100%;
        }
        .hero-robot-depth-scrim {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
          background:
            radial-gradient(820px 560px at 78% 39%, rgba(139,92,246,0.14), transparent 64%),
            linear-gradient(90deg, rgba(8,9,20,0.86) 0%, rgba(8,9,20,0.58) 31%, rgba(8,9,20,0.18) 58%, rgba(8,9,20,0.03) 100%),
            linear-gradient(to top, rgba(8,9,20,0.44) 0%, rgba(8,9,20,0) 42%);
        }
        .hero-visual-spacer {
          min-height: calc(100vh - clamp(112px, 14vh, 156px));
        }
        @media (max-width: 920px) {
          .hero-shell-inner {
            padding: 88px 18px 26px;
          }
          .hero-stage-card,
          .hero-stage-grid {
            min-height: calc(100vh - 114px);
          }
          [data-screen-label="Hero"] .grid {
            grid-template-columns: 1fr !important;
          }
          .hero-robot-bg {
            top: 8%;
            right: -46%;
            bottom: auto;
            width: 125vw;
            height: 58vh;
            opacity: 0.42;
            transform: translate3d(0, 0, 0) scale(1.38) !important;
          }
          .hero-robot-depth-scrim {
            background: linear-gradient(90deg, rgba(8,9,20,0.88), rgba(8,9,20,0.58) 48%, rgba(8,9,20,0.16));
          }
          .hero-visual-spacer {
            display: none;
          }
          [data-screen-label="Hero"] spline-viewer {
            min-height: 58vh;
          }
        }
        @media (max-width: 560px) {
          [data-screen-label="Hero"] .rounded-lg {
            border-radius: 24px;
          }
          .hero-robot-bg {
            right: -72%;
            width: 160vw;
            height: 54vh;
            opacity: 0.34;
          }
          [data-screen-label="Hero"] spline-viewer {
            min-height: 54vh;
          }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Hero });