import { BookOpen, Code2, Terminal, Wrench } from "lucide-react";
import * as React from "react";

export const Hero: React.FC = () => {
  return (
    <section className="relative bg-slate-900 text-white py-16 md:py-24 overflow-hidden text-center">
      {/* Background pattern */}
      <div className="absolute inset-0 opacity-10">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage:
              "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
            backgroundSize: "32px 32px",
          }}
        />
      </div>

      <div className="container relative z-10">
        <div className="max-w-4xl mx-auto">
          {/* Main heading */}
          <h1 className="text-4xl md:text-6xl font-bold mb-4 md:mb-6 animate-slide-up leading-tight">
            Digital Problem Solver
          </h1>

          <p className="text-lg md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in px-4 md:px-0">
            I work on Digital problems and build tools, scripts, and systems to
            solve them.
          </p>

          {/* Quick stats or focus areas */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12 animate-fade-in">
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
              <Code2 className="mx-auto mb-3 text-slate-400" size={28} />
              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
                Code
              </div>
            </div>
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
              <Wrench className="mx-auto mb-3 text-slate-400" size={28} />
              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
                Tools
              </div>
            </div>
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
              <Terminal className="mx-auto mb-3 text-slate-400" size={28} />
              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
                Automation
              </div>
            </div>
            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
              <BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
              <div className="text-xs font-bold uppercase tracking-widest text-slate-300">
                Learning
              </div>
            </div>
          </div>

          {/* Topics */}
          <div className="mt-8 text-sm text-slate-400 animate-fade-in">
            <span className="font-semibold text-slate-300">Topics:</span> Vibe
            coding with AI • Debugging • Mac tools • Automation • Small scripts
            • Learning notes • FOSS
          </div>
        </div>
      </div>
    </section>
  );
};