<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';

$aboutTitle = getSetting($pdo, 'about_page_title', 'About Us');
$aboutContent = getSetting($pdo, 'about_page_content', '');

$pageTitle = $aboutTitle;
$pageDescription = 'Learn about ' . SITE_NAME . ' - our mission, values, and commitment to connecting talented professionals with amazing job opportunities.';
$pageKeywords = 'about us, job board, career portal, employment services, our mission';

require_once 'includes/header.php';
?>

<section class="hero" style="padding: 60px 0;">
    <div class="container">
        <div class="hero-content">
            <h1><?php echo sanitize($aboutTitle); ?></h1>
            <p>Connecting talented professionals with amazing opportunities</p>
        </div>
    </div>
</section>

<section style="padding: 80px 0; background: var(--white);">
    <div class="container">
        <div style="max-width: 900px; margin: 0 auto;">
            <?php if (!empty($aboutContent)): ?>
                <div class="page-content">
                    <?php echo $aboutContent; ?>
                </div>
            <?php else: ?>
                <h2 style="font-size: 2rem; margin-bottom: 20px;">Our Mission</h2>
                <p style="font-size: 1.1rem; color: var(--gray-600); line-height: 1.8; margin-bottom: 30px;">
                    We believe that finding the right job or the right candidate shouldn't be complicated. Our platform is designed to make the hiring process seamless, efficient, and rewarding for both job seekers and employers.
                </p>
                
                <h2 style="font-size: 2rem; margin-bottom: 20px;">What We Offer</h2>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px;">
                    <div class="card" style="padding: 25px;">
                        <h3 style="color: var(--primary); margin-bottom: 15px;"><i class="fas fa-user-tie"></i> For Job Seekers</h3>
                        <ul style="list-style: none; color: var(--gray-600);">
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Easy job search and filters</li>
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> One-click applications</li>
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Application tracking</li>
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Save favorite jobs</li>
                        </ul>
                    </div>
                    
                    <div class="card" style="padding: 25px;">
                        <h3 style="color: var(--primary); margin-bottom: 15px;"><i class="fas fa-building"></i> For Employers</h3>
                        <ul style="list-style: none; color: var(--gray-600);">
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Easy job posting</li>
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Application management</li>
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Candidate tracking</li>
                            <li style="padding: 8px 0;"><i class="fas fa-check" style="color: var(--success); margin-right: 10px;"></i> Featured job options</li>
                        </ul>
                    </div>
                </div>
                
                <h2 style="font-size: 2rem; margin-bottom: 20px;">Contact Us</h2>
                <p style="font-size: 1.1rem; color: var(--gray-600); line-height: 1.8;">
                    Have questions or feedback? We'd love to hear from you. Reach out to us at <a href="mailto:support@jobboard.com" style="color: var(--primary);">support@jobboard.com</a>
                </p>
            <?php endif; ?>
        </div>
    </div>
</section>

<style>
.page-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gray-700);
}
.page-content h2 {
    font-size: 1.8rem;
    margin: 30px 0 15px;
    color: var(--gray-900);
}
.page-content h3 {
    font-size: 1.4rem;
    margin: 25px 0 12px;
    color: var(--gray-800);
}
.page-content p {
    margin-bottom: 15px;
}
.page-content ul, .page-content ol {
    margin: 15px 0;
    padding-left: 25px;
}
.page-content li {
    margin-bottom: 8px;
}
</style>

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