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">
              Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
              fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
            </p>
            <div className="mt-10 flex items-top gap-x-6">
              <Link
                href="/build"
                className="btn btn-primary text-base font-semibold px-6"
              >
                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">
            <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"
            />
          </div>
        </div>
      </div>
      {/* Beta Tester CTA */}
      <BetaTester />
    </div>
  );
}