// ============================================================
// Hero Section Component
// ============================================================
const Hero = () => {
  React.useEffect(() => {
    // Trigger entrance animations after mount
    const els = document.querySelectorAll('.hero-animate');
    els.forEach((el, i) => {
      setTimeout(() => {
        el.classList.add('animate-fade-up');
        el.style.opacity = '1';
      }, 80 + i * 140);
    });
  }, []);

  const handleViewWork = () => {
    const el = document.getElementById('projects');
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  const handleContact = () => {
    const el = document.getElementById('contact');
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section
      id="hero"
      className="relative min-h-screen flex items-center justify-center overflow-hidden px-6"
      aria-label="Introduction"
    >
      {/* Background decorative blobs */}
      <div
        className="hero-blob w-96 h-96 top-10 -left-24 bg-bordeaux/10 dark:bg-bordeaux/15"
        aria-hidden="true"
      />
      <div
        className="hero-blob w-80 h-80 bottom-20 right-0 bg-bordeaux/8 dark:bg-bordeaux/12"
        aria-hidden="true"
      />
      <div
        className="hero-blob w-56 h-56 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-200/60 dark:bg-gray-800/50"
        aria-hidden="true"
      />

      {/* Grid texture overlay */}
      <div
        className="absolute inset-0 opacity-[0.025] dark:opacity-[0.04]"
        style={{
          backgroundImage: `linear-gradient(rgba(0,0,0,1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px)`,
          backgroundSize: '40px 40px',
        }}
        aria-hidden="true"
      />

      <div className="relative z-10 max-w-4xl mx-auto text-center">
        {/* Status badge */}
        <div
          className="hero-animate will-animate inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-600 dark:text-gray-400 mb-8"
          style={{ opacity: 0 }}
        >
          <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse-slow" />
          Available for opportunities
        </div>

        {/* Main headline */}
        <h1
          className="hero-animate will-animate text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black tracking-tight leading-[1.05] mb-6"
          style={{ opacity: 0 }}
        >
          Hi, I'm{' '}
          <span
            className="relative inline-block"
            style={{
              background: 'linear-gradient(135deg, #800020 0%, #9a0026 50%, #660019 100%)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}
          >
            Rob Willemsen
          </span>
          <span className="text-bordeaux">.</span>
        </h1>

        {/* Sub-headline */}
        <p
          className="hero-animate will-animate text-lg md:text-xl text-gray-500 dark:text-gray-400 leading-relaxed max-w-2xl mx-auto mb-4"
          style={{ opacity: 0 }}
        >
          Full-Stack &amp; Backend Software Developer based in Antwerp, passionate about writing clean, robust code and solving complex problems from the ground up.
        </p>
        <p
          className="hero-animate will-animate text-base md:text-lg text-gray-400 dark:text-gray-500 leading-relaxed max-w-xl mx-auto mb-12"
          style={{ opacity: 0 }}
        >
          When I hit something unknown, I don't back away. I dig in, research thoroughly, and build the best solution I can. Currently looking for a full-stack or backend role where I can keep growing.
        </p>

        {/* CTA Buttons */}
        <div
          className="hero-animate will-animate flex flex-col sm:flex-row gap-4 justify-center items-center"
          style={{ opacity: 0 }}
        >
          <button
            id="hero-cta-work"
            onClick={handleViewWork}
            className="btn-bordeaux text-sm"
          >
            View My Work
            <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </button>
          <button
            id="hero-cta-contact"
            onClick={handleContact}
            className="btn-outline text-sm"
          >
            Get in Touch
          </button>
        </div>

        {/* Scroll indicator */}
        <div
          className="hero-animate will-animate absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-gray-400 dark:text-gray-600"
          style={{ opacity: 0 }}
        >
          <span className="text-xs font-medium tracking-widest uppercase">Scroll</span>
          <div className="w-px h-10 bg-gradient-to-b from-gray-300 dark:from-gray-600 to-transparent" />
        </div>
      </div>

      {/* Floating code snippets – decorative */}
      <div
        className="hidden lg:block absolute top-28 right-12 animate-float"
        style={{ animationDelay: '0s' }}
        aria-hidden="true"
      >
        <div className="glass-card rounded-xl px-4 py-3 shadow-lg">
          <pre className="text-xs font-mono text-gray-500 dark:text-gray-400 leading-relaxed">
{`const rob = {
  role: "Software Developer",
  focus: ["Backend", "Full-Stack"],
  passion: "robust code",
};`}
          </pre>
        </div>
      </div>
      <div
        className="hidden lg:block absolute bottom-40 left-10 animate-float"
        style={{ animationDelay: '2s' }}
        aria-hidden="true"
      >
        <div className="glass-card rounded-xl px-4 py-3 shadow-lg">
          <span className="code-badge">git commit -m "init 🚀"</span>
        </div>
      </div>
    </section>
  );
};