import Link from "next/link";
import { LogIn } from "lucide-react";

export default function Hero() {
  return (
    <section className="bg-white py-12 md:py-20 overflow-hidden">
      <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">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-tomato font-bold text-rise-dark leading-tight">
                Start your <br className="hidden md:block" />
                investment journey{" "}
                <span className="text-rise-teal italic">With Us.</span>
              </h1>

              <p className="text-lg md:text-xl text-gray-600 font-work leading-relaxed max-w-lg">
                We provide innovative investment solutions tailored to your
                financial goals. <br />
                Minimum Investment: $20
              </p>
            </div>

            {/* CTA Buttons */}
            <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>

              <Link href="/login" className="flex items-center justify-center sm:justify-start space-x-2 text-gray-700 hover:text-rise-teal transition-colors">
                <div className="w-10 h-10 bg-white border border-gray-200 rounded-full flex items-center justify-center shadow-sm">
                  <LogIn size={16} className="fill-current ml-0.5" />
                </div>
                <span className="font-work text-sm font-medium">Login</span>
              </Link>
            </div>

            {/* Investors and Partners */}
            <div className="pt-8">
              <p className="text-sm text-gray-500 font-work mb-4">
                Investors and Partners
              </p>

              {/* Desktop: Static grid */}
              <div className="hidden md:flex items-center space-x-6 opacity-60">
                <img src="bybit.svg" alt="Bybit" className="h-8 grayscale" />
                <img
                  src="morgan.png"
                  alt="Morgan Stanley"
                  className="h-8 grayscale"
                />
                <img
                  src="allianz.svg"
                  alt="Allianz"
                  className="h-8 grayscale"
                />
                <img
                  src="ml.png"
                  alt="Merrill Lynch"
                  className="h-8 grayscale"
                />
                <img src="square.svg" alt="Square" className="h-8 grayscale" />
              </div>

              {/* Mobile: Marquee */}
              <div className="md:hidden relative w-full overflow-hidden opacity-60">
                <div className="flex animate-marquee space-x-6">
                  {[
                    { src: "bybit.svg", alt: "Bybit" },
                    { src: "morgan.png", alt: "Morgan Stanley" },
                    { src: "allianz.svg", alt: "Allianz" },
                    { src: "ml.png", alt: "Merrill Lynch" },
                    { src: "square.svg", alt: "Square" },
                    // Duplicate for smooth loop
                    { src: "bybit.svg", alt: "Bybit" },
                    { src: "morgan.png", alt: "Morgan Stanley" },
                    { src: "allianz.svg", alt: "Allianz" },
                    { src: "ml.png", alt: "Merrill Lynch" },
                    { src: "square.svg", alt: "Square" },
                  ].map((logo, idx) => (
                    <img
                      key={idx}
                      src={logo.src}
                      alt={logo.alt}
                      className="h-8 grayscale shrink-0 whitespace-nowrap"
                    />
                  ))}
                </div>
              </div>
            </div>

            <style jsx>{`
              @keyframes marquee {
                0% {
                  transform: translateX(0);
                }
                100% {
                  transform: translateX(-50%);
                }
              }

              .animate-marquee {
                animation: marquee 15s linear infinite;
              }

              /* Ensure grayscale works with animation */
              .animate-marquee img {
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
              }
            `}</style>
          </div>

          {/* Right Content - Phone Mockup */}
          <div className="relative lg:pl-12">
            {/* Background Gradient Circles */}
            <div className="absolute inset-0 -z-10">
              <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-teal-100 to-teal-200 rounded-full opacity-30 blur-3xl" />
              <div className="absolute bottom-0 left-0 w-64 h-64 bg-gradient-to-tr from-orange-100 to-orange-200 rounded-full opacity-30 blur-3xl" />
            </div>

            {/* Phone Image */}
            <div className="relative max-w-sm mx-auto lg:max-w-none">
              <img
                src="/hero-2.png"
                alt="Euphoria 5 App Interface"
                className="w-full h-auto relative z-10"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
