'use client';

import { Toolbox } from 'lucide-react';
import Logo from './Logo';

export default function Hero() {
  const scrollToTools = () => {
    document.getElementById('tools')?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <section className="relative min-h-screen flex flex-col items-center justify-center px-6 py-24">
      <div className="flex flex-col items-center text-center max-w-2xl mx-auto">

        {/* Logo */}
        <div style={{ animation: 'fadeIn 0.6s ease-out both' }}>
          <Logo size={64} />
        </div>

        {/* Badge */}
        <div
          className="mt-8 flex items-center gap-2 px-3 py-1 glass rounded-full"
          style={{ animation: 'slideUp 0.5s ease-out 0.2s both' }}
        >
          <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
          <span className="text-[10px] font-mono text-muted-foreground/60 tracking-widest uppercase">
            Browser-first toolkit
          </span>
        </div>

        {/* Title */}
        <h1
          className="mt-5 text-6xl md:text-8xl font-bold text-foreground tracking-tight leading-none"
          style={{ animation: 'slideUp 0.5s ease-out 0.3s both' }}
        >
          Kit
        </h1>

        {/* Description */}
        <p
          className="mt-5 text-sm text-muted-foreground/60 max-w-sm leading-relaxed"
          style={{ animation: 'slideUp 0.5s ease-out 0.4s both' }}
        >
          A curated collection of browser-based tools for developers and creators.
          Everything runs locally — no uploads, no tracking.
        </p>

        {/* CTA */}
        <div
          className="mt-8"
          style={{ animation: 'slideUp 0.5s ease-out 0.5s both' }}
        >
          <button
            onClick={scrollToTools}
            className="flex items-center gap-2 px-5 py-2.5 glass rounded-lg border border-primary/30 hover:border-primary/60 hover:bg-primary/10 text-sm font-medium text-foreground/70 hover:text-foreground transition-all duration-200"
          >
            <Toolbox className="w-3.5 h-3.5 text-primary" />
            Explore Tools
          </button>
        </div>

        {/* Scroll indicator */}
        <button
          onClick={scrollToTools}
          className="mt-20 flex flex-col items-center gap-2 group"
          style={{ animation: 'fadeIn 0.5s ease-out 0.9s both' }}
        >
          <span className="text-[9px] font-mono text-muted-foreground/25 uppercase tracking-widest group-hover:text-muted-foreground/50 transition-colors">
            Scroll
          </span>
          <div className="w-4 h-7 border border-muted-foreground/15 rounded-full flex items-start justify-center pt-1.5 group-hover:border-primary/30 transition-colors">
            <div
              className="w-0.5 h-1.5 bg-primary/50 rounded-full"
              style={{ animation: 'float 1.5s ease-in-out infinite' }}
            />
          </div>
        </button>
      </div>
    </section>
  );
}