<?php
// about.php - About Us Page
// File location: /bidwheels.net/about.php

require_once 'includes/functions.php';
require_once 'includes/header.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn about BidWheels.net - The premier online auction platform for luxury vehicles, motorcycles, and yachts. Discover our mission, values, and what makes us different.">
    <title>About Us - <?php echo SITE_NAME; ?></title>
    
    <style>
        .about-page {
            background: #EFEBE0;
            overflow-x: hidden;
        }
        
        /* Hero Section */
        .about-hero {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            padding: 80px 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .about-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,140,62,0.1) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .about-hero-content {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .about-hero h1 {
            font-size: 56px;
            font-weight: 800;
            color: white;
            margin-bottom: 20px;
            letter-spacing: -1px;
        }
        
        .about-hero h1 span {
            color: #FF8C3E;
        }
        
        .about-hero p {
            font-size: 18px;
            color: #aaa;
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Mission Section */
        .mission-section {
            padding: 80px 24px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .mission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .mission-content h2 {
            font-size: 36px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
        }
        
        .mission-content h2 span {
            color: #FF8C3E;
        }
        
        .mission-content p {
            color: #555;
            line-height: 1.7;
            margin-bottom: 20px;
            font-size: 16px;
        }
        
        .mission-stats {
            display: flex;
            gap: 40px;
            margin-top: 30px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-number {
            font-size: 42px;
            font-weight: 800;
            color: #FF8C3E;
        }
        
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        
        .mission-image {
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .mission-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* Values Section */
        .values-section {
            background: white;
            padding: 80px 24px;
        }
        
        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 50px;
        }
        
        .section-header h2 {
            font-size: 36px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 15px;
        }
        
        .section-header p {
            color: #666;
            font-size: 16px;
        }
        
        .values-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .value-card {
            text-align: center;
            padding: 30px 20px;
            background: #f8f9fa;
            border-radius: 24px;
            transition: all 0.3s;
        }
        
        .value-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(255,140,62,0.1);
        }
        
        .value-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .value-icon i {
            font-size: 32px;
            color: white;
        }
        
        .value-card h3 {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 12px;
        }
        
        .value-card p {
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }
        
        /* Journey Section */
        .journey-section {
            padding: 80px 24px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .journey-timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 50px;
        }
        
        .timeline-item {
            text-align: center;
            position: relative;
        }
        
        .timeline-year {
            font-size: 28px;
            font-weight: 800;
            color: #FF8C3E;
            margin-bottom: 15px;
        }
        
        .timeline-dot {
            width: 12px;
            height: 12px;
            background: #FF8C3E;
            border-radius: 50%;
            margin: 0 auto 20px;
            position: relative;
        }
        
        .timeline-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -60px;
            right: -60px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #FF8C3E, transparent);
            transform: translateY(-50%);
        }
        
        .timeline-item:first-child .timeline-dot::before {
            display: none;
        }
        
        .timeline-item:last-child .timeline-dot::before {
            display: none;
        }
        
        .timeline-title {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 8px;
        }
        
        .timeline-desc {
            font-size: 13px;
            color: #666;
        }
        
        /* Team Section */
        .team-section {
            background: white;
            padding: 80px 24px;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .team-card {
            text-align: center;
            background: #f8f9fa;
            border-radius: 24px;
            padding: 30px 20px;
            transition: all 0.3s;
        }
        
        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .team-avatar {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
        
        .team-avatar i {
            font-size: 50px;
            color: white;
        }
        
        .team-card h3 {
            font-size: 18px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 5px;
        }
        
        .team-card p {
            color: #FF8C3E;
            font-size: 13px;
            margin-bottom: 10px;
        }
        
        .team-bio {
            font-size: 12px;
            color: #666;
            line-height: 1.5;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
            padding: 70px 24px;
            text-align: center;
        }
        
        .cta-content {
            max-width: 700px;
            margin: 0 auto;
        }
        
        .cta-content h2 {
            font-size: 36px;
            font-weight: 700;
            color: white;
            margin-bottom: 15px;
        }
        
        .cta-content p {
            color: #aaa;
            font-size: 16px;
            margin-bottom: 30px;
        }
        
        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #FF8C3E;
            color: white;
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            background: #e67a22;
            transform: translateY(-2px);
        }
        
        .btn-outline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            border: 2px solid #FF8C3E;
            color: #FF8C3E;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-outline:hover {
            background: #FF8C3E;
            color: white;
            transform: translateY(-2px);
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .values-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .journey-timeline {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }
            
            .timeline-dot::before {
                display: none;
            }
        }
        
        @media (max-width: 992px) {
            .mission-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .mission-image {
                order: -1;
            }
        }
        
        @media (max-width: 768px) {
            .about-hero h1 {
                font-size: 36px;
            }
            
            .about-hero p {
                font-size: 16px;
            }
            
            .section-header h2 {
                font-size: 28px;
            }
            
            .values-grid {
                grid-template-columns: 1fr;
            }
            
            .team-grid {
                grid-template-columns: 1fr;
            }
            
            .journey-timeline {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .mission-stats {
                justify-content: center;
            }
            
            .cta-content h2 {
                font-size: 28px;
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
        
        @media (max-width: 480px) {
            .about-hero {
                padding: 50px 16px;
            }
            
            .about-hero h1 {
                font-size: 28px;
            }
            
            .mission-stats {
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>
</head>
<body>

<div class="about-page">
    <!-- Hero Section -->
    <section class="about-hero">
        <div class="about-hero-content">
            <h1>About <span><?php echo SITE_NAME; ?></span></h1>
            <p>Your premier destination for luxury vehicle auctions. We connect passionate buyers with exceptional vehicles through a transparent, secure, and exciting bidding platform.</p>
        </div>
    </section>
    
    <!-- Mission Section -->
    <section class="mission-section">
        <div class="mission-grid">
            <div class="mission-content">
                <h2>Our <span>Mission</span></h2>
                <p>At <?php echo SITE_NAME; ?>, we're revolutionizing the way people buy and sell luxury vehicles. Our mission is to provide a transparent, secure, and exciting auction platform where car enthusiasts, collectors, and everyday drivers can find their dream vehicles at fair prices.</p>
                <p>We believe that buying a vehicle should be an exhilarating experience, not a stressful one. That's why we've built a platform that combines the thrill of live auctions with the convenience of online bidding.</p>
                <div class="mission-stats">
                    <div class="stat-item">
                        <div class="stat-number">10k+</div>
                        <div class="stat-label">Happy Customers</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">5k+</div>
                        <div class="stat-label">Vehicles Sold</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">$50M+</div>
                        <div class="stat-label">Sales Volume</div>
                    </div>
                </div>
            </div>
            <div class="mission-image">
                <img src="<?php echo SITE_URL; ?>/luxury.jpeg" alt="Luxury car auction">
            </div>
        </div>
    </section>
    
    <!-- Values Section -->
    <section class="values-section">
        <div class="section-header">
            <h2>Our Core Values</h2>
            <p>The principles that guide everything we do at <?php echo SITE_NAME; ?></p>
        </div>
        <div class="values-grid">
            <div class="value-card">
                <div class="value-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>Transparency</h3>
                <p>We believe in complete transparency throughout the bidding process, from vehicle history to final sale.</p>
            </div>
            <div class="value-card">
                <div class="value-icon">
                    <i class="fas fa-handshake"></i>
                </div>
                <h3>Trust</h3>
                <p>Building trust with our community is our top priority. Every transaction is secure and verified.</p>
            </div>
            <div class="value-card">
                <div class="value-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                <h3>Innovation</h3>
                <p>We continuously innovate to bring you the best online auction experience with cutting-edge technology.</p>
            </div>
            <div class="value-card">
                <div class="value-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>Community</h3>
                <p>We've built a passionate community of car enthusiasts who share a love for exceptional vehicles.</p>
            </div>
        </div>
    </section>
    
    <!-- Journey Section -->
    <section class="journey-section">
        <div class="section-header">
            <h2>Our Journey</h2>
            <p>How we grew from an idea to a leading auction platform</p>
        </div>
        <div class="journey-timeline">
            <div class="timeline-item">
                <div class="timeline-year">2020</div>
                <div class="timeline-dot"></div>
                <div class="timeline-title">Founded</div>
                <div class="timeline-desc"><?php echo SITE_NAME; ?> was founded with a vision to transform vehicle auctions.</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-year">2021</div>
                <div class="timeline-dot"></div>
                <div class="timeline-title">First Auction</div>
                <div class="timeline-desc">Successfully hosted our first live online auction with 50+ vehicles.</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-year">2023</div>
                <div class="timeline-dot"></div>
                <div class="timeline-title">5,000 Vehicles</div>
                <div class="timeline-desc">Reached 5,000 vehicles sold and 10,000+ active users.</div>
            </div>
            <div class="timeline-item">
                <div class="timeline-year">2025</div>
                <div class="timeline-dot"></div>
                <div class="timeline-title">Global Expansion</div>
                <div class="timeline-desc">Expanded to international markets with worldwide shipping.</div>
            </div>
        </div>
    </section>
    
    <!-- Team Section -->
    <section class="team-section">
        <div class="section-header">
            <h2>Leadership Team</h2>
            <p>The passionate people behind <?php echo SITE_NAME; ?></p>
        </div>
        <div class="team-grid">
            <div class="team-card">
                <div class="team-avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <h3>James Wilson</h3>
                <p>CEO & Founder</p>
                <div class="team-bio">20+ years in automotive industry, passionate about connecting buyers with dream cars.</div>
            </div>
            <div class="team-card">
                <div class="team-avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <h3>Sarah Chen</h3>
                <p>Chief Technology Officer</p>
                <div class="team-bio">Former tech lead at major auction platforms, expert in secure online transactions.</div>
            </div>
            <div class="team-card">
                <div class="team-avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <h3>Michael Rodriguez</h3>
                <p>Head of Operations</p>
                <div class="team-bio">Logistics expert ensuring smooth delivery of vehicles worldwide.</div>
            </div>
            <div class="team-card">
                <div class="team-avatar">
                    <i class="fas fa-user-circle"></i>
                </div>
                <h3>Emily Thompson</h3>
                <p>Customer Experience</p>
                <div class="team-bio">Dedicated to providing exceptional support to our community.</div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="cta-section">
        <div class="cta-content">
            <h2>Ready to Start Bidding?</h2>
            <p>Join thousands of satisfied customers who found their dream vehicles with us.</p>
            <div class="cta-buttons">
                <a href="<?php echo SITE_URL; ?>/product/index.php" class="btn-primary">
                    <i class="fas fa-gavel"></i> Browse Vehicles
                </a>
                <a href="<?php echo SITE_URL; ?>/user/register.php" class="btn-outline">
                    <i class="fas fa-user-plus"></i> Create Account
                </a>
            </div>
        </div>
    </section>
</div>

<?php require_once 'includes/footer.php'; ?>