wilddragon-site/src.bright-backup/components/Hero.tsx

"use client";

import { useEffect, useState } from "react";
import { ChevronDown } from "lucide-react";
import Image from "next/image";

const roles = [
  "Broadcast Systems Integration",
  "Production Facility Design",
  "IP & Cloud Production",
  "Extended Reality Stages",
];

export default function Hero() {
  const [loaded, setLoaded] = useState(false);
  const [roleIndex, setRoleIndex] = useState(0);
  const [displayText, setDisplayText] = useState("");
  const [isTyping, setIsTyping] = useState(true);

  useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 100);
    return () => clearTimeout(t);
  }, []);

  // Typewriter effect for roles
  useEffect(() => {
    const currentRole = roles[roleIndex];

    if (isTyping) {
      if (displayText.length < currentRole.length) {
        const timer = setTimeout(() => {
          setDisplayText(currentRole.slice(0, displayText.length + 1));
        }, 50);
        return () => clearTimeout(timer);
      } else {
        const timer = setTimeout(() => setIsTyping(false), 2500);
        return () => clearTimeout(timer);
      }
    } else {
      if (displayText.length > 0) {
        const timer = setTimeout(() => {
          setDisplayText(displayText.slice(0, -1));
        }, 25);
        return () => clearTimeout(timer);
      } else {
        setRoleIndex((prev) => (prev + 1) % roles.length);
        setIsTyping(true);
      }
    }
  }, [displayText, isTyping, roleIndex]);

  return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden bg-surface">
      {/* Hero background photo */}
      <div className="absolute inset-0">
        <Image
          src="/images/photos/production-switcher.jpg"
          alt="Production switcher panel"
          fill
          className="object-cover opacity-25"
          priority
        />
      </div>

      {/* Animated grid overlay */}
      <div className="absolute inset-0 opacity-[0.07]">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `
              linear-gradient(rgba(59, 130, 246, 0.5) 1px, transparent 1px),
              linear-gradient(90deg, rgba(59, 130, 246, 0.5) 1px, transparent 1px)
            `,
            backgroundSize: "80px 80px",
          }}
        />
      </div>

      {/* Gradient overlays for dramatic depth */}
      <div className="absolute inset-0 bg-gradient-to-b from-surface/80 via-surface/20 to-surface" />
      <div className="absolute inset-0 bg-gradient-to-r from-surface/50 via-transparent to-surface/50" />

      {/* Radial glow behind content */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-accent/[0.04] rounded-full blur-[120px]" />

      <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
        {/* Logo */}
        <div
          className={`mb-8 transition-all duration-1000 ease-out ${
            loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
          }`}
        >
          <Image
            src="/images/wild-dragon-logo.png"
            alt="Wild Dragon"
            width={280}
            height={80}
            className="mx-auto invert"
            priority
          />
        </div>

        {/* Animated role tagline */}
        <div
          className={`h-6 mb-8 transition-all duration-1000 delay-150 ease-out ${
            loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
          }`}
        >
          <p className="font-mono text-[11px] tracking-[0.35em] uppercase text-accent">
            {displayText}
            <span className="animate-pulse ml-0.5 text-accent/60">|</span>
          </p>
        </div>

        {/* Name */}
        <h1
          className={`text-5xl md:text-7xl lg:text-[5.5rem] font-light text-white leading-[1.05] mb-8 transition-all duration-1000 delay-300 ease-out ${
            loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
          }`}
        >
          Zachary
          <br />
          <span className="font-semibold text-gradient">Gaetano</span>
        </h1>

        {/* Accent line with glow */}
        <div
          className={`mx-auto mb-8 h-px bg-gradient-to-r from-transparent via-accent/80 to-transparent transition-all duration-1000 delay-400 ease-out ${
            loaded ? "opacity-100 w-40" : "opacity-0 w-0"
          }`}
          style={{ boxShadow: "0 0 12px rgba(59, 130, 246, 0.3)" }}
        />

        {/* Description */}
        <p
          className={`text-lg md:text-xl text-white/60 max-w-2xl mx-auto leading-relaxed mb-14 transition-all duration-1000 delay-500 ease-out ${
            loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
          }`}
        >
          Designing and integrating broadcast production facilities for
          sports, corporate, aerospace, and financial organizations.
        </p>

        {/* CTAs */}
        <div
          className={`flex flex-col sm:flex-row items-center justify-center gap-4 transition-all duration-1000 delay-[650ms] ease-out ${
            loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
          }`}
        >
          <a
            href="#projects"
            className="px-8 py-3.5 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200 hover:shadow-lg hover:shadow-accent/25"
          >
            View Projects
          </a>
          <a
            href="#contact"
            className="px-8 py-3.5 border border-white/20 text-white/75 text-sm font-medium rounded-md hover:border-accent/40 hover:text-white hover:bg-white/5 transition-all duration-200"
          >
            Get in Touch
          </a>
        </div>
      </div>

      {/* Scroll indicator */}
      <a
        href="#clients"
        className={`absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 transition-all duration-1000 delay-[800ms] ease-out ${
          loaded ? "opacity-100" : "opacity-0"
        }`}
      >
        <span className="text-[10px] font-mono tracking-[0.2em] uppercase text-white/30">
          Scroll
        </span>
        <ChevronDown size={18} className="text-white/40 animate-bounce" />
      </a>
    </section>
  );
}