'use client';

import { ArrowDown } 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 */}
        <Logo size={72} />

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

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

        {/* Description */}
        <p
          className="mt-6 text-sm text-muted-foreground/55 max-w-xs 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 data leaves your machine.
        </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-6 py-2.5 rounded-xl border border-primary/30 bg-primary/[0.07] hover:border-primary/55 hover:bg-primary/[0.13] text-sm font-medium text-foreground/70 hover:text-foreground transition-all duration-200"
          >
            Explore Tools
            <ArrowDown className="w-3.5 h-3.5 text-primary" />
          </button>
        </div>

        {/* Scroll indicator */}
        <button
          onClick={scrollToTools}
          className="mt-24 flex flex-col items-center gap-2 group"
          style={{ animation: 'fadeIn 0.5s ease-out 0.9s both' }}
        >
          <div className="w-px h-8 bg-gradient-to-b from-transparent via-primary/30 to-primary/60 group-hover:via-primary/50 group-hover:to-primary transition-colors duration-300" />
          <span className="text-[9px] font-mono text-muted-foreground/25 uppercase tracking-widest group-hover:text-muted-foreground/50 transition-colors">
            Scroll
          </span>
        </button>
      </div>
    </section>
  );
}