import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { ArrowRight, Menu } from "lucide-react";
import Image from "next/image";
import TestimonialSection from "./_components/TestimonialSection";

export default function InvestmentClubPage() {
  return (
    <main className="min-h-screen bg-white">
      {/* Header */}
      <Header />

      {/* Hero Section */}
      <section className="hero-gradient py-20 relative overflow-hidden">
        <div className="absolute inset-0 world-map-bg opacity-50"></div>

        {/* Profile avatars */}
        <div className="absolute inset-0">
          <div className="container mx-auto px-4 relative h-full max-w-7xl">
            <img src="https://avatar.iran.liara.run/public/75" alt="Member" className="absolute top-16 left-20 w-12 h-12 rounded-full border-2 border-white shadow-lg hidden lg:block" />
            <img src="https://avatar.iran.liara.run/public/78" alt="Member" className="absolute top-32 right-32 w-12 h-12 rounded-full border-2 border-white shadow-lg hidden lg:block" />
            <img src="https://avatar.iran.liara.run/public/77" alt="Member" className="absolute bottom-32 left-32 w-12 h-12 rounded-full border-2 border-white shadow-lg hidden lg:block" />
            <img src="https://avatar.iran.liara.run/public/74" alt="Member" className="absolute bottom-20 right-20 w-12 h-12 rounded-full border-2 border-white shadow-lg hidden lg:block" />
            <img src="https://avatar.iran.liara.run/public/76" alt="Member" className="absolute top-40 left-1/2 w-12 h-12 rounded-full border-2 border-white shadow-lg hidden lg:block" />
          </div>
        </div>

        <div className="container mx-auto px-4 text-center relative z-10 max-w-4xl">
          <h1 className="text-5xl lg:text-6xl font-bold text-rise-dark-gray mb-6 leading-tight">
            Our Reviews
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
            The journey to building wealth does not have to be lonely, and when you have questions on wealth building and accumulation, you dont have too look far.
          </p>
          {/* <Button className="bg-rise-teal hover:bg-rise-teal/90 text-white rounded-full px-8 py-3 text-lg">
            Join the Community <ArrowRight className="ml-2 h-5 w-5" />
          </Button> */}
        </div>
      </section>      

      {/* Testimonials Section */}
      <TestimonialSection />

        <Footer />
    </main>
  );
}
