<?php
require_once 'config.php';
require_once 'functions.php';

// Get about content
$about_content = getAboutContent();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Healthy Food Point</title>
    <meta name="description" content="Learn more about Healthy Food Point - your trusted destination for delicious and nutritious meals.">
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #ff6b35;
            --secondary-color: #ff8c42;
            --dark-color: #343a40;
            --light-color: #f8f9fa;
            --success-color: #ff6b35;
            --warning-color: #ff8c42;
            --danger-color: #dc3545;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--dark-color);
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary-color), #ff8c42);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
        }
        
        .nav-link {
            color: white !important;
            font-weight: 500;
            margin: 0 10px;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            color: #fff3e0 !important;
            transform: translateY(-2px);
        }
        
        .page-header {
            background: linear-gradient(135deg, var(--primary-color), #ff8c42);
            color: white;
            padding: 8rem 0 4rem;
            text-align: center;
        }
        
        .page-header h1 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .page-header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 3rem;
            color: var(--dark-color);
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--primary-color);
            margin: 1rem auto;
            border-radius: 2px;
        }
        
        .about-content {
            background: white;
            border-radius: 15px;
            padding: 3rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 3rem;
        }
        
        .about-content h2 {
            color: var(--primary-color);
            font-weight: 700;
            margin-bottom: 2rem;
        }
        
        .about-content p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }
        
        .about-content ul {
            font-size: 1.1rem;
            line-height: 1.8;
        }
        
        .about-content li {
            margin-bottom: 0.5rem;
        }
        
        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
            transition: all 0.3s ease;
            height: 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        
        .feature-card i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
        }
        
        .feature-card h4 {
            color: var(--dark-color);
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .feature-card p {
            color: #6c757d;
        }
        
        .stats-section {
            background: var(--light-color);
            padding: 4rem 0;
        }
        
        .stat-item {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            font-size: 1.1rem;
            color: var(--dark-color);
            font-weight: 600;
        }
        
        .cart-badge {
            position: relative;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .footer {
            background: #1a1a1a;
            color: white;
            padding: 2rem 0;
            text-align: center;
        }
        
        .social-links a {
            color: white;
            font-size: 1.5rem;
            margin: 0 10px;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            color: var(--primary-color);
        }
        
        @media (max-width: 768px) {
            .page-header h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .about-content {
                padding: 2rem;
            }
        }
    </style>
</head>
<body>
    <?php include 'topbar.php'; ?>

    <!-- Page Header -->
    <section class="page-header">
        <div class="container">
            <h1>About Healthy Food Point</h1>
            <p>Your trusted destination for delicious and nutritious meals</p>
        </div>
    </section>

    <!-- About Content Section -->
    <section class="py-5">
        <div class="container">
            <div class="about-content">
                <?php if ($about_content): ?>
                    <?php echo $about_content['content']; ?>
                <?php else: ?>
                    <h2>Welcome to Healthy Food Point</h2>
                    <p>Welcome to Healthy Food Point, your trusted destination for delicious and nutritious meals. We are committed to serving you the finest quality food prepared with fresh ingredients and authentic recipes.</p>
                    
                    <p>Our mission is to provide healthy, tasty, and affordable food options that cater to all your dietary preferences. Whether you are looking for traditional Indian cuisine or modern healthy alternatives, we have something for everyone.</p>
                    
                    <p>At Healthy Food Point, we believe in:</p>
                    <ul>
                        <li><strong>Fresh Ingredients:</strong> Using only the finest and freshest ingredients in all our dishes</li>
                        <li><strong>Quality Standards:</strong> Maintaining strict hygiene standards throughout our kitchen</li>
                        <li><strong>Customer Service:</strong> Providing excellent customer service and support</li>
                        <li><strong>Affordable Prices:</strong> Offering competitive prices for quality food</li>
                        <li><strong>Timely Delivery:</strong> Ensuring fast and reliable delivery to your doorstep</li>
                    </ul>
                    
                    <p>Our team of experienced chefs combines traditional cooking methods with modern techniques to create dishes that are not only delicious but also nutritious. We take pride in our commitment to quality and customer satisfaction.</p>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5" style="background: var(--light-color);">
        <div class="container">
            <h2 class="section-title">Why Choose Us</h2>
            <div class="row">
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-leaf"></i>
                        <h4>Fresh Ingredients</h4>
                        <p>We use only the finest and freshest ingredients sourced from trusted suppliers to ensure the best quality in every dish.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-clock"></i>
                        <h4>Quick Delivery</h4>
                        <p>Fast and reliable delivery service to your doorstep, ensuring your food arrives hot and fresh every time.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-heart"></i>
                        <h4>Healthy Options</h4>
                        <p>Nutritious and balanced meals prepared with health-conscious cooking methods for your well-being.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 mb-4">
                    <div class="feature-card">
                        <i class="fas fa-star"></i>
                        <h4>Quality Assured</h4>
                        <p>Maintaining highest standards of quality and hygiene in our kitchen and delivery process.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number">500+</div>
                        <div class="stat-label">Happy Customers</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">Menu Items</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number">2+</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="stat-item">
                        <div class="stat-number">24/7</div>
                        <div class="stat-label">Customer Support</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <?php include 'footer.php'; ?>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>