import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { FaChartLine, FaUserLock, FaShare, FaChartBar } from 'react-icons/fa';

const LandingPage = () => {
  return (
    <div className="landing-page">
      {/* Hero Section */}
      <div className="bg-primary text-white py-5 mb-5">
        <Container>
          <Row className="align-items-center">
            <Col className="text-center">
              <h1 className="display-4 fw-bold mb-3">Project Progress Tracker</h1>
              <p className="lead mb-4">
                Track, manage, and share your project progress with stakeholders in a
                secure and user-friendly environment.
              </p>
              <div className="d-flex justify-content-center gap-3">
                <Button 
                  as={Link} 
                  to="/login" 
                  variant="light" 
                  size="lg"
                >
                  Login
                </Button>
                <Button 
                  as={Link} 
                  to="/register" 
                  variant="outline-light" 
                  size="lg"
                >
                  Register
                </Button>
              </div>
            </Col>
          </Row>
        </Container>
      </div>

      {/* Features Section */}
      <Container className="mb-5">
        <h2 className="text-center mb-5">Key Features</h2>
        <Row>
          <Col md={3} className="mb-4">
            <Card className="h-100 shadow-sm text-center">
              <Card.Body>
                <FaChartLine size={50} className="text-primary mb-3" />
                <Card.Title>Progress Tracking</Card.Title>
                <Card.Text>
                  Visualize project progress with interactive charts and progress bars.
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={3} className="mb-4">
            <Card className="h-100 shadow-sm text-center">
              <Card.Body>
                <FaUserLock size={50} className="text-primary mb-3" />
                <Card.Title>Secure Access</Card.Title>
                <Card.Text>
                  Role-based access control ensures that only authorized users can view or modify projects.
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={3} className="mb-4">
            <Card className="h-100 shadow-sm text-center">
              <Card.Body>
                <FaShare size={50} className="text-primary mb-3" />
                <Card.Title>Project Sharing</Card.Title>
                <Card.Text>
                  Share project status with external stakeholders via secure links.
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
          <Col md={3} className="mb-4">
            <Card className="h-100 shadow-sm text-center">
              <Card.Body>
                <FaChartBar size={50} className="text-primary mb-3" />
                <Card.Title>Visual Dashboard</Card.Title>
                <Card.Text>
                  Get a comprehensive overview of all your projects at a glance.
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
        </Row>
      </Container>

      {/* CTA Section */}
      <div className="cta-section py-5">
        <Container className="text-center">
          <h2 className="mb-4 cta-title">Ready to track your projects more effectively?</h2>
          <p className="lead mb-4 cta-description">
            Join today and experience the benefits of organized project tracking and sharing.
          </p>
          <Button 
            as={Link} 
            to="/login" 
            variant="primary" 
            size="lg"
            className="px-4 py-2"
          >
            Get Started
          </Button>
        </Container>
      </div>

      {/* Footer */}
      <footer className="bg-dark text-white py-4 mt-5">
        <Container className="text-center">
          <p className="mb-0">
            &copy; {new Date().getFullYear()} Project Progress Tracker. All rights reserved.
          </p>
        </Container>
      </footer>
    </div>
  );
};

export default LandingPage;
