import { Button } from "@/components/ui/button"
import Image from "next/image"
import Link from "next/link"

export default function HeroSection() {
  return (
    <section className="relative w-full min-h-[500px] bg-white overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 py-16">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
          {/* Text Content */}
          <div className="space-y-8">
            <h1 className="text-4xl lg:text-5xl xl:text-6xl font-bold text-gray-900 leading-tight">
              Making wealth creation and management easier for Americans
            </h1>

            <div className="flex flex-col sm:flex-row gap-4 items-start">
              <Link href="/register" className="bg-rise-teal hover:bg-rise-teal/90 text-white px-8 py-3 rounded-md text-lg font-medium">
                Start Investing →
              </Link>

              {/* <div className="flex items-center gap-2 text-gray-600">
                <Image
                  src="https://ext.same-assets.com/2966879627/2200221687.svg"
                  alt="Apple Store"
                  width={20}
                  height={20}
                />
                <Image
                  src="https://ext.same-assets.com/2966879627/2386713834.svg"
                  alt="Play Store"
                  width={20}
                  height={20}
                />
                <span className="text-sm">Download app</span>
              </div> */}
            </div>
          </div>

          {/* Hero Image with Decorative Background */}
          <div className="relative">
            <Image
              src="/investment.svg"
              alt="Euphoria 5 Investment Platform"
              width={600}
              height={400}
              className="rounded-2xl w-full h-auto"
            />
          </div>
        </div>
      </div>
    </section>
  )
}
