import Button from '@/components/ui/Button';
import Container from '@/components/ui/Container';
import Heading from '@/components/ui/Heading';

export default function Hero() {
  return (
    <section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
      {/* Subtle radial gradient overlay */}
      <div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40" />
      
      {/* Optional motorsport grid pattern */}
      <div className="absolute inset-0 opacity-[0.015]" style={{
        backgroundImage: `linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
                         linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)`,
        backgroundSize: '40px 40px'
      }} />
      
      <Container size="sm" center>
        <Heading level={1} className="text-white leading-tight tracking-tight">
          Where iRacing League Racing Finally Comes Together
        </Heading>
        <p className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
          No more Discord chaos. No more spreadsheets. No more manual standings.
          GridPilot is the dedicated home for serious iRacing leagues that want structure over chaos.
        </p>
        <div className="mt-12 flex items-center justify-center">
          <Button as="a" href="#early-access" className="shadow-glow hover:shadow-glow-strong transition-shadow duration-300">
            Get Early Access
          </Button>
        </div>
      </Container>
    </section>
  );
}