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">
      {/* Background image layer */}
      <div
        className="absolute inset-0 bg-cover bg-center"
        style={{
          backgroundImage: 'url(/images/porsche.jpeg)',
          maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)',
          WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.08) 40%, transparent 70%)'
        }}
      />
      
      {/* Subtle radial gradient overlay */}
      <div className="absolute inset-0 bg-gradient-radial from-primary-blue/10 via-transparent to-transparent opacity-40 pointer-events-none" />
      
      {/* 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 className="relative z-10">
        <Heading level={1} className="text-white leading-tight tracking-tight">
          League racing is incredible. What's missing is everything around it.
        </Heading>
        <div className="mt-8 text-lg leading-relaxed text-slate-400 font-light">
          <p>
            If you've been in any league, you know the feeling:
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-6 max-w-2xl mx-auto">
            <div className="flex items-center gap-3">
              <span className="text-primary-blue text-xl">•</span>
              <span>Results scattered across Discord</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-primary-blue text-xl">•</span>
              <span>No long-term identity</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-primary-blue text-xl">•</span>
              <span>No career progression</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="text-primary-blue text-xl">•</span>
              <span>Forgotten after each season</span>
            </div>
          </div>
          <p className="mt-8">
            The ecosystem isn't built for this.
          </p>
          <p className="mt-4">
            <strong className="text-white">GridPilot gives your league racing a real home.</strong>
          </p>
        </div>
        <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>
  );
}