import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import Banner from '../components/Banner';
import Footer from '../components/Footer';
import ProductCatalog from '../components/ProductCatalog';

const Home = () => {
  const bannerData = {
    images: [
      { src: '/assets/image1.jpg' },
      { src: '/assets/image2.png' },
    ],
  };

  return (
    <>
      <Banner data={bannerData} />

      {/* Features Section */}
      <Container className="mt-5">
        <Row className="d-flex justify-content-center align-items-center">
          {/* Trusted Couriers */}
          <Col md={3} className="text-center mb-4">
            <i className="bi bi-truck text-primary mb-3" style={{ fontSize: '4rem' }}></i>
            <div className="text-uppercase" style={{ fontSize: '1.4rem' }}>Trusted Couriers</div>
            <div className='text-opacity-10'>We ship nationwide</div>
          </Col>

          {/* 7 Days Replacement */}
          <Col md={3} className="text-center mb-4">
            <i className="bi bi-arrow-return-left text-primary mb-3" style={{ fontSize: '4rem' }}></i>
            <div className="text-uppercase" style={{ fontSize: '1.4rem' }}>7 Days Replacement</div>
            <div>If manufacturer defective</div>
          </Col>

          {/* Best Prices */}
          <Col md={3} className="text-center mb-4">
            <i className="bi bi-currency-dollar text-primary mb-3" style={{ fontSize: '4rem' }}></i>
            <div className="text-uppercase" style={{ fontSize: '1.4rem' }}>Best Prices</div>
            <div>Huge selections of items</div>
          </Col>

          {/* Trusted Store */}
          <Col md={3} className="text-center mb-4">
            <i className="bi bi-check-circle text-primary mb-3" style={{ fontSize: '4rem' }}></i>
            <div className="text-uppercase" style={{ fontSize: '1.4rem' }}>Trusted Store</div>
            <div>Tons of positive feedbacks</div>
          </Col>
        </Row>

        <ProductCatalog />
      </Container>
      <Footer />
    </>
  );
};

export default Home;