import React from 'react'
import { Card, CardContent } from './ui/card'

const WhatWeOffer = () => {
  return (
    <section className="py-20 bg-white">
        <div className="container mx-auto px-4 max-w-7xl">
          <h2 className="text-4xl font-bold text-center text-rise-dark-gray mb-16">
            What our community offers
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="border-0 shadow-none">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4">
                  <img src="https://ext.same-assets.com/2016015599/2976805009.svg" alt="Insights" className="w-full h-full" />
                </div>
                <h3 className="text-xl font-bold text-rise-dark-gray mb-3">
                  Community
                </h3>
                <p className="text-gray-600">
                  Euphoria 5 community is a platform for sharing valuable financial insights. Members can network with like-minded individuals for advice and insights.
                </p>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-none">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4">
                  <img src="https://ext.same-assets.com/2016015599/32926020.svg" alt="Learning" className="w-full h-full" />
                </div>
                <h3 className="text-xl font-bold text-rise-dark-gray mb-3">
                  Learning Opportunities:
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  Members share tips, strategies, and educational resources on investing. Both new and experienced investors benefit from staying informed about market trends.
                </p>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-none">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4">
                  <img src="https://ext.same-assets.com/2016015599/3503728942.svg" alt="Updates" className="w-full h-full" />
                </div>
                <h3 className="text-xl font-bold text-rise-dark-gray mb-3">
                  Updates
                </h3>
                <p className="text-gray-600">
                  Being part of the community grants access to exclusive updates and news. Members receive information about Euphoria 5 products, investment opportunities, and events.
                </p>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-none">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4">
                  <img src="https://ext.same-assets.com/2016015599/3738524961.svg" alt="Stories" className="w-full h-full" />
                </div>
                <h3 className="text-xl font-bold text-rise-dark-gray mb-3">
                  Motivational Success Stories:
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  Members share success stories, serving as motivation and inspiration for others.
                </p>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-none">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4">
                  <img src="https://ext.same-assets.com/2016015599/2771862227.svg" alt="Events" className="w-full h-full" />
                </div>
                <h3 className="text-xl font-bold text-rise-dark-gray mb-3">
                  Events
                </h3>
                <p className="text-gray-600">
                  Euphoria 5 organizes live and virtual events for interaction with experts. Members can ask questions and deepen their understanding of the investment landscape.
                </p>
              </CardContent>
            </Card>

            <Card className="border-0 shadow-none">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 mx-auto mb-4">
                  <img src="https://ext.same-assets.com/2016015599/2550537632.svg" alt="Goal" className="w-full h-full" />
                </div>
                <h3 className="text-xl font-bold text-rise-dark-gray mb-3">
                  Support
                </h3>
                <p className="text-gray-600">
                  The community aims to help individuals improve their personal finances. Euphoria 5 is dedicated to assisting members in making, managing, and investing money effectively.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
  )
}

export default WhatWeOffer
