<?php
$settings = json_decode(file_get_contents('data/settings.json'), true);
$content = json_decode(file_get_contents('data/content.json'), true);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - <?php echo htmlspecialchars($settings['site_title']); ?></title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
    
    <style>
        .page-header { padding: 200px 0 100px; background-color: var(--primary); color: var(--text-white); text-align: center; }
        .page-title { font-size: 4rem; color: var(--accent); margin-bottom: 20px; }
        .about-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .about-text p { margin-bottom: 25px; font-size: 1.15rem; color: var(--text-light); }
        @media (max-width: 992px) { .about-content-grid { grid-template-columns: 1fr; } }
    </style>
</head>
<body>

<?php include 'header.php'; ?>

    <div class="page-header">
        <div class="container">
            <h1 class="page-title fade-up">About <?php echo htmlspecialchars($settings['site_title']); ?></h1>
            <p class="fade-up" style="transition-delay: 0.1s; max-width: 600px; margin: 0 auto; font-size: 1.2rem; font-weight: 300;">Building legacy through exceptional real estate development.</p>
        </div>
    </div>

    <section class="section">
        <div class="container about-content-grid">
            <div class="about-text fade-up">
                <h4 style="color: var(--accent); margin-bottom: 15px; font-family: var(--font-heading); letter-spacing: 3px; font-size: 0.9rem; text-transform: uppercase;">Our Journey</h4>
                <h2 class="section-title"><?php echo htmlspecialchars($content['about_title']); ?></h2>
                <p style="margin-top: 40px;"><?php echo nl2br(htmlspecialchars($content['about_p1'])); ?></p>
                <p><?php echo nl2br(htmlspecialchars($content['about_p2'])); ?></p>
            </div>
            <div class="fade-up" style="transition-delay: 0.3s; position: relative;">
                <div style="position: absolute; top: -30px; right: -30px; width: 100%; height: 100%; border: 1px solid var(--accent); z-index: -1;"></div>
                <img src="images/hero.png" alt="Building" style="box-shadow: 0 20px 50px rgba(0,0,0,0.1);">
            </div>
        </div>
    </section>

<?php include 'footer.php'; ?>
