components/Hero.jsx

import { ArrowDown, Download } from 'lucide-react';

export default function Hero() {
  return (
    <section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-white to-primary-50 pt-16">
      <div className="section-container text-center animate-slide-up">
        {/* Profile Image Placeholder */}
        <div className="relative mx-auto mb-8 w-32 h-32 sm:w-40 sm:h-40">
          <div className="absolute inset-0 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 animate-pulse"></div>
          <div className="absolute inset-1 rounded-full bg-white flex items-center justify-center">
            <span className="text-4xl sm:text-5xl font-bold text-primary-600">JD</span>
          </div>
        </div>

        {/* Name and Title */}
        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4">
          John Doe
        </h1>
        <p className="text-xl sm:text-2xl text-primary-600 font-medium mb-6">
          Full Stack Developer & UI/UX Designer
        </p>
        <p className="max-w-2xl mx-auto text-lg text-gray-600 mb-8 leading-relaxed">
          Passionate about creating beautiful, functional, and user-centered digital experiences. 
          Specialized in building modern web applications with cutting-edge technologies.
        </p>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
          <a href="#projects" className="btn-primary w-full sm:w-auto">
            View My Work
          </a>
          <a href="#contact" className="btn-secondary w-full sm:w-auto">
            Get In Touch
          </a>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-3 gap-8 max-w-md mx-auto mb-12">
          <div>
            <div className="text-3xl font-bold text-gray-900">5+</div>
            <div className="text-sm text-gray-600">Years Experience</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-gray-900">50+</div>
            <div className="text-sm text-gray-600">Projects Completed</div>
          </div>
          <div>
            <div className="text-3xl font-bold text-gray-900">30+</div>
            <div className="text-sm text-gray-600">Happy Clients</div>
          </div>
        </div>

        {/* Built with anycoder */}
        <a
          href="https://huggingface.co/spaces/akhaliq/anycoder"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-primary-600 transition-colors"
        >
          <span>Built with</span>
          <span className="font-semibold underline decoration-primary-400 underline-offset-2">anycoder</span>
        </a>

        {/* Scroll Indicator */}
        <a
          href="#about"
          className="absolute bottom-8 left-1/2 -translate-x-1/2 text-gray-400 hover:text-primary-600 transition-colors animate-bounce"
          aria-label="Scroll down"
        >
          <ArrowDown className="w-6 h-6" />
        </a>
      </div>
    </section>
  );
}