import React from 'react';
import { Users, Leaf, Globe } from 'lucide-react';

const About = () => {
  return (
    <div className="about py-5">
      <div className="container">
        <div className="text-center mb-5">
          <h1 className="display-4 mb-3">About EcoConnect</h1>
          <p className="lead">An innovative platform tackling food waste by connecting surplus food donors with those in need.</p>
        </div>

        <div className="row mb-5">
          <div className="col-md-6">
            <img
              src="https://images.unsplash.com/photo-1488459716781-31db52582fe9"
              alt="Team working together"
              className="img-fluid rounded shadow-lg"
            />
          </div>
          <div className="col-md-6 d-flex flex-column justify-content-center">
            <h2 className="mb-4">Our Mission</h2>
            <p className="mb-4">EcoConnect is an innovative platform designed to tackle the growing issue of food waste by connecting surplus food donors with organizations that serve those in need. We allow donors, including supermarkets, restaurants, food manufacturers, and party venues, to log and donate surplus food.</p>
            <p className="mb-4">The platform ensures food safety through a detailed checklist followed by volunteers during pick-up and offers partnerships with food experts and local authorities for quality assurance.</p>
            <p>EcoConnect also manages the logistics of food transportation, with a focus on both direct delivery and collaboration with local food banks, shelters, and orphanages. With liability waivers for both donors and recipients, the platform fosters a safe and reliable way to redistribute food, reducing waste while supporting vulnerable communities.</p>
          </div>
        </div>

        <div className="row g-4">
          <div className="col-md-4">
            <div className="card h-100 border-0 shadow-sm">
              <div className="card-body text-center">
                <Users className="text-success mb-3" size={40} />
                <h3 className="h5 mb-3">Community First</h3>
                <p>Connecting food donors with recipients and volunteers to create a sustainable food ecosystem.</p>
              </div>
            </div>
          </div>
          <div className="col-md-4">
            <div className="card h-100 border-0 shadow-sm">
              <div className="card-body text-center">
                <Leaf className="text-success mb-3" size={40} />
                <h3 className="h5 mb-3">Sustainable Impact</h3>
                <p>Reducing food waste while supporting communities in need through efficient food redistribution.</p>
              </div>
            </div>
          </div>
          <div className="col-md-4">
            <div className="card h-100 border-0 shadow-sm">
              <div className="card-body text-center">
                <Globe className="text-success mb-3" size={40} />
                <h3 className="h5 mb-3">Global Reach</h3>
                <p>Building a network of donors, volunteers, and recipients to maximize our impact on food waste reduction.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;