import BetaTester from "@/components/BetaTester";
import Link from 'next/link';

export default function LandingPage() {
  return (
    <div className="bg-white font-sans">
      {/* SVG Grid Background */}
      <div className="relative isolate pt-1">
        <svg
          aria-hidden="true"
          className="absolute inset-0 -z-10 w-full h-full stroke-gray-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
        >
          <defs>
            <pattern
              id="grid"
              width={200}
              height={200}
              patternUnits="userSpaceOnUse"
            >
              <path d="M100 200V.5M.5 .5H200" fill="none" />
            </pattern>
          </defs>
          <rect fill="url(#grid)" width="100%" height="100%" strokeWidth={0} />
        </svg>
        <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:flex lg:items-start lg:gap-x-10 lg:px-8 lg:py-40">
          {/* Left: Headline, Subheading, Button */}
          <div className="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
            <h1 className="mt-10 text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
              A better way to plan your next build
            </h1>
            <p className="mt-8 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
              Welcome to Pew Builder – the modern way to discover, compare, and assemble firearm parts. Start your build, explore top brands, and find the perfect components for your next project.
            </p>
            <div className="mt-10 flex items-top gap-x-6">
              <Link
                href="/build"
                className="bg-gray-900 hover:bg-gray-950 text-white text-base font-semibold px-6 py-3 transition-colors"
              >
                Get Building
              </Link>
            </div>
          </div>
          {/* Right: Product Image */}
          <div className="mt-16 sm:mt-24 lg:mt-0 lg:shrink-0 lg:grow items-top flex justify-center group">
            <img
              alt="AR-15 Lower Receiver"
              src="https://i.imgur.com/IK8FbaI.png"
              className="max-w-md w-full h-auto object-contain rounded-xl transition-transform duration-500 ease-in-out animate-float group-hover:-translate-y-2"
              style={{ willChange: 'transform' }}
            />
          </div>
        </div>
      </div>
      {/* Beta Tester CTA */}
      
      <BetaTester />
    </div>
  );
}