<?php
$page_title = "Tentang Kami";
$page_desc = "Ketahui lebih dekat PT Namora Nexa Niaga, visi misi, nilai-nilai perusahaan, dan komitmen kami dalam menyediakan batu alam berkualitas tinggi.";
require_once 'includes/header.php';

if (!isset($settings['menu_about_visible']) || $settings['menu_about_visible'] == 0) {
    header("Location: index.php");
    exit;
}
?>

<!-- Page Header Banner -->
<section style="background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('assets/images/hero_bg.jpg') no-repeat center center/cover; padding: 120px 0 60px; text-align: center; color: var(--text-light);">
    <div class="container">
        <h1 style="font-size: 42px; font-weight: 800; margin-bottom: 10px;">Tentang Kami</h1>
        <p style="color: var(--primary); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-size: 14px;">Profil Perusahaan & Visi Misi</p>
    </div>
</section>

<!-- Detailed About Section -->
<section class="bg-alt">
    <div class="container">
        <div class="grid-2">
            <div class="about-content">
                <span class="section-tag">PROFIL PERUSAHAAN</span>
                <h2 class="section-title">PT Namora Nexa Niaga</h2>
                <p style="font-size: 18px; font-weight: 600; color: var(--accent); margin-bottom: 20px;"><?php echo $settings['tagline']; ?></p>
                <div style="line-height: 1.8; color: var(--text-muted);">
                    <?php echo nl2br(htmlspecialchars($settings['about_full'])); ?>
                </div>
            </div>
            <div class="about-image">
                <?php 
                $about_img_2 = 'assets/images/' . (isset($settings['about_img_2']) ? $settings['about_img_2'] : 'about_img2.jpg');
                if (isset($settings['about_img_2']) && !empty($settings['about_img_2']) && file_exists('uploads/' . $settings['about_img_2'])) {
                    $about_img_2 = 'uploads/' . $settings['about_img_2'];
                }
                ?>
                <img src="<?php echo $about_img_2; ?>" alt="Profil PT Namora Nexa Niaga" onerror="this.src='https://images.unsplash.com/photo-1581094794329-c8112a89af12?auto=format&fit=crop&w=800&q=80'" style="border-radius: 12px; box-shadow: var(--shadow-xl);">
            </div>
        </div>
    </div>
</section>

<!-- Vision & Mission Section -->
<section style="background-color: var(--secondary); color: var(--text-light);">
    <div class="container">
        <div class="grid-2">
            <!-- Visi -->
            <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 40px; border-radius: 12px;">
                <div style="width: 60px; height: 60px; background-color: var(--primary-light); border-radius: 12px; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 28px; margin-bottom: 25px;">
                    <i class="fas fa-eye"></i>
                </div>
                <h3 style="font-size: 24px; font-weight: 700; color: #ffffff; margin-bottom: 15px;">Visi Kami</h3>
                <p style="color: rgba(255,255,255,0.7); line-height: 1.8; font-size: 16px;"><?php echo nl2br(htmlspecialchars($settings['vision'])); ?></p>
            </div>
            
            <!-- Misi -->
            <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 40px; border-radius: 12px;">
                <div style="width: 60px; height: 60px; background-color: var(--primary-light); border-radius: 12px; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 28px; margin-bottom: 25px;">
                    <i class="fas fa-bullseye"></i>
                </div>
                <h3 style="font-size: 24px; font-weight: 700; color: #ffffff; margin-bottom: 15px;">Misi Kami</h3>
                <p style="color: rgba(255,255,255,0.7); line-height: 1.8; font-size: 16px;"><?php echo nl2br(htmlspecialchars($settings['mission'])); ?></p>
            </div>
        </div>
    </div>
</section>

<!-- Values Section -->
<section class="bg-alt">
    <div class="container">
        <div class="section-header">
            <span class="section-tag">NILAI PERUSAHAAN</span>
            <h2 class="section-title">Mengapa Memilih Kami?</h2>
            <p class="section-desc">Prinsip kerja dan nilai utama yang kami junjung tinggi dalam melayani setiap pelanggan dan mitra bisnis.</p>
        </div>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;">
            <!-- Nilai 1 -->
            <div style="background-color: var(--bg-white); border: 1px solid var(--border-color); padding: 30px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition);">
                <div style="width: 50px; height: 50px; background-color: var(--primary-light); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 20px; margin: 0 auto 20px;">
                    <i class="fas fa-award"></i>
                </div>
                <h3 style="font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 12px;">Kualitas Premium</h3>
                <p style="color: var(--text-muted); font-size: 14px;">Kami melakukan seleksi ketat di area tambang dan memotong dengan mesin presisi untuk menjamin hasil yang sempurna.</p>
            </div>
            
            <!-- Nilai 2 -->
            <div style="background-color: var(--bg-white); border: 1px solid var(--border-color); padding: 30px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition);">
                <div style="width: 50px; height: 50px; background-color: var(--primary-light); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 20px; margin: 0 auto 20px;">
                    <i class="fas fa-handshake"></i>
                </div>
                <h3 style="font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 12px;">Kepercayaan & Integritas</h3>
                <p style="color: var(--text-muted); font-size: 14px;">Kami menjaga komitmen pengiriman, keseragaman ukuran batu, serta ketebalan batu alam sesuai spesifikasi pesanan.</p>
            </div>
            
            <!-- Nilai 3 -->
            <div style="background-color: var(--bg-white); border: 1px solid var(--border-color); padding: 30px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition);">
                <div style="width: 50px; height: 50px; background-color: var(--primary-light); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--primary); font-size: 20px; margin: 0 auto 20px;">
                    <i class="fas fa-tags"></i>
                </div>
                <h3 style="font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 12px;">Harga Kompetitif</h3>
                <p style="color: var(--text-muted); font-size: 14px;">Memiliki akses langsung ke tambang batu alam memungkinkan kami menawarkan harga terbaik tanpa perantara tambahan.</p>
            </div>
        </div>
    </div>
</section>

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