import Link from 'next/link';

export default function AppDownload() {
  return (
    <section className="bg-gray-50 py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Content */}
          <div className="space-y-8">
            <div className="space-y-6">
              <h2 className="text-3xl md:text-4xl font-tomato font-bold text-rise-dark leading-tight">
                Download the Euphoria 5 App
              </h2>

              <p className="text-lg text-gray-600 font-work leading-relaxed">
                Euphoria 5 makes investing simple.
              </p>
            </div>

            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href="/register"
                className="bg-rise-teal text-white px-8 py-4 rounded-lg hover:bg-foreground transition-colors font-work text-base font-medium text-center"
              >
                Start Investing
              </Link>
            </div>

            {/* QR Code */}
            <div className="pt-4">
              <p className="text-sm text-gray-500 font-work mb-3">
                Scan to download the app
              </p>
              <img
                src="https://ext.same-assets.com/3278459369/2633599921.png"
                alt="QR Code"
                className="w-24 h-24"
              />
            </div>
          </div>

          {/* Right Content - Phone Image */}
          <div className="relative lg:pl-12">
            <div className="relative max-w-sm mx-auto lg:max-w-none">
              <img
                src="https://ext.same-assets.com/3278459369/3682259540.webp"
                alt="Euphoria 5 Mobile App"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
