'use client';

import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { ArrowRight, TrendingUp } from 'lucide-react';

export function HeroSection() {
  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <Image
          src="/images/hero-bg.jpg"
          alt="Professional investment team discussing market opportunities"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-b from-navy/90 via-navy/80 to-navy" />
      </div>

      {/* Gold accent line */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-gold to-transparent" />

      <div className="relative z-10 max-w-[1200px] mx-auto px-4 sm:px-6 pt-24 pb-16 md:pt-32 md:pb-24">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, ease: 'easeOut' }}
          >
            <div className="inline-flex items-center gap-2 bg-gold/20 border border-gold/30 rounded-full px-4 py-1.5 mb-6">
              <TrendingUp className="w-4 h-4 text-gold" />
              <span className="text-gold text-sm font-medium">Investment Opportunity</span>
            </div>

            <h1 className="font-display text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight tracking-tight mb-6">
              Smart Investments.
              <br />
              <span className="text-gold">Stronger Tomorrow.</span>
            </h1>

            <p className="text-white/70 text-lg leading-relaxed mb-8 max-w-lg">
              At TradeTheMarkets.co.uk, we provide professional investment solutions with transparency, expertise, and a commitment to your financial growth.
            </p>

            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href="/services"
                className="inline-flex items-center justify-center gap-2 bg-gold hover:bg-gold-light text-navy font-semibold px-8 py-4 rounded-md transition-all duration-300 text-base hover:shadow-lg hover:shadow-gold/20"
              >
                Explore Investments
                <ArrowRight className="w-5 h-5" />
              </Link>
              <Link
                href="/contact"
                className="inline-flex items-center justify-center gap-2 border-2 border-white/30 hover:border-gold text-white hover:text-gold font-semibold px-8 py-4 rounded-md transition-all duration-300 text-base"
              >
                Get In Touch
              </Link>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.3, ease: 'easeOut' }}
            className="hidden md:flex items-center justify-center"
          >
            <div className="relative">
              <div className="w-64 h-64 lg:w-80 lg:h-80 rounded-full bg-gradient-to-br from-gold/20 to-gold/5 flex items-center justify-center">
                <div className="w-48 h-48 lg:w-60 lg:h-60 rounded-full bg-gradient-to-br from-gold/30 to-gold/10 flex items-center justify-center">
                  <div className="text-center">
                    <p className="text-gold font-display text-lg font-semibold">Minimum Investment</p>
                    <p className="text-white font-display text-4xl lg:text-5xl font-bold mt-2">£3,500</p>
                    <p className="text-white/60 text-sm mt-2">Start your journey</p>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Bottom curved divider */}
      <div className="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 80" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0,80 L0,40 Q720,0 1440,40 L1440,80 Z" fill="hsl(var(--background))" />
        </svg>
      </div>
    </section>
  );
}
