bayarea/components/Hero.tsx

import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { motion, useMotionTemplate, useMotionValue, useReducedMotion } from 'framer-motion';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import heroBg from '../src/assets/hero-bg.webp';

gsap.registerPlugin(ScrollTrigger);

const Hero: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  const parallaxWrapperRef = useRef<HTMLDivElement>(null);
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const prefersReducedMotion = useReducedMotion();
  const [isInteractive, setIsInteractive] = useState(false);
  const maskImage = useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`;
  const webkitMaskImage = useMotionTemplate`radial-gradient(100px circle at ${mouseX}px ${mouseY}px, black, transparent)`;

  useEffect(() => {
    if (prefersReducedMotion || typeof window === 'undefined') {
      setIsInteractive(false);
      return;
    }

    const mediaQuery = window.matchMedia('(pointer: fine) and (hover: hover)');
    const updateState = () => setIsInteractive(mediaQuery.matches);

    updateState();

    if (typeof mediaQuery.addEventListener === 'function') {
      mediaQuery.addEventListener('change', updateState);
      return () => mediaQuery.removeEventListener('change', updateState);
    }

    mediaQuery.addListener(updateState);
    return () => mediaQuery.removeListener(updateState);
  }, [prefersReducedMotion]);

  const handleMouseMove = ({ currentTarget, clientX, clientY }: React.MouseEvent) => {
    if (!isInteractive) return;
    const { left, top } = currentTarget.getBoundingClientRect();
    mouseX.set(clientX - left);
    mouseY.set(clientY - top + 75);
  };

  useLayoutEffect(() => {
    if (!isInteractive) {
      return;
    }

    const ctx = gsap.context(() => {
      // Parallax Background
      gsap.to(parallaxWrapperRef.current, {
        yPercent: 30,
        ease: "none",
        scrollTrigger: {
          trigger: containerRef.current,
          start: "top top",
          end: "bottom top",
          scrub: true
        }
      });

      // Text Stagger Animation
      gsap.fromTo(".hero-stagger",
        { y: 50, opacity: 0 },
        { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out", delay: 0.2 }
      );
    }, containerRef);

      return () => ctx.revert();
  }, [isInteractive]);

  return (
    <section
      ref={containerRef}
      onMouseMove={isInteractive ? handleMouseMove : undefined}
      className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20 group"
    >

      <div className="absolute inset-0 z-0 pointer-events-none">
        <div ref={parallaxWrapperRef} className="absolute w-full h-[120%] -top-[10%] left-0">
          {/* Base Layer - Slightly Brighter */}
          <img
            alt="Abstract dark technology background"
            className="w-full h-full object-cover opacity-90 dark:opacity-70 brightness-75 contrast-150"
            src={heroBg}
            loading="eager"
            decoding="async"
            fetchPriority="high"
          />

          {isInteractive && (
            <motion.img
              style={{ maskImage, WebkitMaskImage: webkitMaskImage }}
              alt=""
              aria-hidden="true"
              className="absolute inset-0 w-full h-full object-cover mix-blend-screen opacity-100 brightness-150 contrast-150 filter saturate-150"
              src={heroBg}
              loading="lazy"
              decoding="async"
            />
          )}
        </div>
        <div className="absolute inset-0 bg-gradient-to-t from-background-light via-transparent to-transparent dark:from-background-dark dark:via-transparent dark:to-transparent"></div>
        <div className="absolute inset-0 bg-gradient-to-b from-background-light/50 dark:from-background-dark/50 to-transparent"></div>
      </div>

      <div className="relative z-10 text-center max-w-4xl px-6">
        <div className="hero-stagger flex items-center justify-center gap-2 mb-6">
          <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
          <span className="text-xs uppercase tracking-[0.2em] text-gray-600 dark:text-gray-400 font-medium">Serving the Coastal Bend since 2000</span>
          <span className="h-px w-8 bg-gray-400 dark:bg-gray-500"></span>
        </div>

        <h1 className="hero-stagger font-display text-5xl md:text-7xl lg:text-8xl font-medium tracking-tighter leading-[1.1] mb-8 text-gray-900 dark:text-white">
          Reliable IT Services<br />
          <span className="text-gray-500 dark:text-gray-500">for Over 25 Years</span>
        </h1>

        <p className="hero-stagger text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-10 font-light leading-relaxed">
          Local IT support, help desk coverage, networking, email, and practical technology support for Coastal Bend businesses.
        </p>

        <div className="hero-stagger flex flex-col sm:flex-row items-center justify-center gap-4">
          <motion.a
            href="#services"
            className="px-8 py-3 bg-black dark:bg-white text-white dark:text-black rounded-full font-medium"
            whileHover={{ scale: 1.05, backgroundColor: "#3b82f6", color: "#ffffff" }}
            whileTap={{ scale: 0.95 }}
          >
            IT Services
          </motion.a>
          <motion.a
            href="#contact"
            className="px-8 py-3 bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-full font-medium"
            whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.1)", borderColor: "#ffffff" }}
            whileTap={{ scale: 0.95 }}
          >
            Get in Touch
          </motion.a>
        </div>
      </div>
    </section>
  );
};

export default Hero;