import { Button } from '@/components/ui/button'

export function HeroSection() {
  return (
    <section className="relative w-full flex justify-center py-12 md:py-20 lg:py-28 overflow-hidden">
      {/* Background glow effect */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-primary/20 rounded-full blur-[120px] -z-10 pointer-events-none" />

      <div className="w-full max-w-[1280px] px-4 md:px-10 flex flex-col items-center z-10">
        <div className="@container w-full max-w-[1000px]">
          <div className="flex flex-col gap-8 items-center text-center">
            {/* Hero image with gradient overlay */}
            <div className="w-full h-[300px] md:h-[420px] rounded-xl overflow-hidden relative mb-4 shadow-2xl border border-border group">
              <div
                className="absolute inset-0 flex flex-col justify-center items-center p-6 bg-black/40 backdrop-blur-[2px]"
                style={{
                  backgroundImage: 'linear-gradient(rgba(11, 11, 11, 0.3) 0%, rgba(11, 11, 11, 0.9) 100%), url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200")',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                }}
              >
                <h1 className="text-foreground text-4xl md:text-6xl lg:text-7xl font-black leading-tight tracking-tight mb-4 drop-shadow-lg">
                  Scale Your Business <br />
                  <span className="text-gradient">
                    with AI & Web
                  </span>
                </h1>
                <h2 className="text-gray-300 text-base md:text-xl font-normal leading-relaxed max-w-2xl drop-shadow-md">
                  Premium websites and intelligent automations starting at just 50€.{' '}
                  <br className="hidden md:block" />
                  Built for growth, designed for the future.
                </h2>
              </div>
            </div>

            {/* CTA buttons */}
            <div className="flex flex-wrap gap-4 justify-center mt-2">
              <Button
                size="lg"
                className="glow-button bg-primary hover:bg-primary-glow text-white text-base font-bold h-12 px-8 rounded-lg"
              >
                Start Scaling
              </Button>
              <Button
                variant="outline"
                size="lg"
                className="bg-card border border-border hover:border-gray-500 text-foreground text-base font-bold h-12 px-8 rounded-lg"
              >
                View Portfolio
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}