import Link from 'next/link';

export default function CommunitySection() {
  return (
    <section className="bg-white py-16">
      <div className="container mx-auto px-4">
        <div className="bg-rise-teal rounded-2xl overflow-hidden relative">
          {/* Background Map/Pattern */}
          <div className="absolute inset-0 opacity-10">
            <div className="w-full h-full bg-gradient-to-br from-teal-600 to-teal-700" />
            {/* World map dots pattern */}
            <div className="absolute inset-0">
              <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-white rounded-full opacity-60" />
              <div className="absolute top-1/3 right-1/3 w-2 h-2 bg-white rounded-full opacity-60" />
              <div className="absolute bottom-1/3 left-1/2 w-2 h-2 bg-white rounded-full opacity-60" />
              <div className="absolute top-1/2 right-1/4 w-2 h-2 bg-white rounded-full opacity-60" />
              <div className="absolute bottom-1/4 left-1/3 w-2 h-2 bg-white rounded-full opacity-60" />
            </div>
          </div>

          <div className="relative z-10 px-8 py-12 md:px-12 md:py-16">
            <div className="max-w-2xl">
              <h2 className="text-3xl md:text-4xl font-tomato font-bold text-white mb-6 leading-tight">
                Join the Euphoria 5 Community
              </h2>

              <p className="text-lg text-teal-100 font-work mb-8 leading-relaxed">
                Our community surrounds you with others who can help you along your financial journey with tips, advice and learning.
              </p>

              <Link
                href="/reviews.html"
                className="inline-block bg-white text-rise-teal px-8 py-4 rounded-lg hover:bg-gray-50 transition-colors font-work text-base font-medium"
              >
                Reviews
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
