import { Card, CardContent } from "@/components/ui/card"
import { Award, Users, Leaf, Shield, Clock, DollarSign } from "lucide-react"

const features = [
  {
    icon: Award,
    title: "Quality Services",
    description:
      "We are committed to providing the highest quality service to our clients ensuring that every aspect of our trip is planned to perfection.",
  },
  {
    icon: Users,
    title: "Local Expertise",
    description:
      "Our team of local experts have a deep understanding and knowledge of East African culture, wildlife and terrain and will design a customized itinerary that caters to your interests and preferences.",
  },
  {
    icon: Shield,
    title: "Experienced Guides",
    description:
      "Our professional guides have years of experience in leading safaris and will ensure that you have a safe, comfortable and unforgettable experience.",
  },
  {
    icon: Leaf,
    title: "Sustainable Tourism",
    description:
      "We are committed to promoting sustainable tourism practices minimising our environmental impact and supporting local communities through responsible tourism initiatives.",
  },
  {
    icon: DollarSign,
    title: "Competitive Pricing",
    description:
      "We offer competitive pricing for all our packages without compromising on the quality of our services.",
  },
  {
    icon: Clock,
    title: "24/7 Support",
    description:
      "Our team is available 24/7 to provide assistance and support during your trip, ensuring that you have a hassle free and enjoyable experience.",
  },
]

export default function AboutContentSection() {
  return (
    <section className="py-20 bg-white">
      <div className="container mx-auto px-4">
        {/* About Content */}
        <div className="max-w-4xl mx-auto text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-8">About Sunset Tanzania Adventure</h2>
          <div className="text-lg text-gray-700 leading-relaxed space-y-6">
            <p>
              We are a team of enthusiastic nature and adventure lovers who have dedicated their lives to outdoor
              activities a long time before making it their profession. Inspired by nature, we are dedicated to let you
              enjoy the true beauty that Tanzania has to offer.
            </p>
            <p>
              We are a locally owned and ran Tanzania safari tour company with customers from all around the world.
              Whether you crave a thrilling African safari, an exhilarating Kilimanjaro hike, a mesmerizing Serengeti
              migration experience, or exploration of Tarangire, Ngorongoro, Lake Manyara, Mkomazi, Nyerere National
              Park (Selous), Mikumi, Ruaha, Mahale Chimpanzee, Gombe, Burigi Chato, and Saadani, we have tailored
              packages to meet your desires.
            </p>
            <p>
              Our commitment goes beyond just providing tours - we strive to create transformative experiences that
              connect you with the raw beauty of Tanzania while contributing to conservation efforts and supporting
              local communities.
            </p>
          </div>
        </div>

        {/* Why Choose Us Section */}
        <div className="mb-16">
          <div className="text-center mb-12">
            <h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
              Why Choose
              <span className="text-orange-500"> Sunset Tanzania Adventure?</span>
            </h3>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
              We go the extra mile to ensure your safari is not just a trip, but a life-changing experience with
              unmatched service and expertise.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card key={index} className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <CardContent className="p-6 text-center">
                  <div className="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 group-hover:bg-orange-500 transition-colors duration-300">
                    <feature.icon className="h-8 w-8 text-orange-500 group-hover:text-white transition-colors duration-300" />
                  </div>
                  <h4 className="text-xl font-bold text-gray-900 mb-3">{feature.title}</h4>
                  <p className="text-gray-600 leading-relaxed">{feature.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

        {/* Mission & Vision */}
        <div className="grid md:grid-cols-2 gap-12">
          <Card className="bg-gradient-to-br from-orange-50 to-amber-50">
            <CardContent className="p-8">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3>
              <p className="text-gray-700 leading-relaxed">
                To provide exceptional safari experiences that showcase Tanzania's incredible wildlife and landscapes
                while promoting conservation, supporting local communities, and creating lasting memories for our
                guests.
              </p>
            </CardContent>
          </Card>

          <Card className="bg-gradient-to-br from-green-50 to-emerald-50">
            <CardContent className="p-8">
              <h3 className="text-2xl font-bold text-gray-900 mb-4">Our Vision</h3>
              <p className="text-gray-700 leading-relaxed">
                To be Tanzania's leading sustainable tourism company, recognized for our commitment to conservation,
                community development, and providing transformative travel experiences that inspire a deeper connection
                with nature.
              </p>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}