<?php
require_once 'config/db.php';
$settings = getAllSettings($pdo);
$activePage = 'about';
$pageTitle = 'About Us - '.($settings['site_name']??'');

$aboutSections = $pdo->query("SELECT * FROM about_content ORDER BY id")->fetchAll();
$aboutData = [];
foreach ($aboutSections as $sec) $aboutData[$sec['section']] = $sec;

$customers = $pdo->query("SELECT * FROM customers WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll();

include 'partials/header.php';
?>

<!-- Page Hero -->
<div class="page-hero">
    <div class="container">
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-2"><li class="breadcrumb-item"><a href="index.php">Home</a></li><li class="breadcrumb-item active">About Us</li></ol></nav>
        <h1 class="fw-bold mb-1 fs-2" data-en="About Us" data-id="Tentang Kami">About Us</h1>
        <p class="mb-0" style="color:rgba(255,255,255,.6);" data-en="Learn more about our company and values" data-id="Pelajari lebih lanjut tentang perusahaan dan nilai kami">Pelajari lebih lanjut tentang perusahaan dan nilai kami</p>
    </div>
</div>

<!-- Company -->
<section class="py-5 py-lg-6">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6 fade-up">
                <img src="<?= htmlspecialchars($aboutData['company']['image']??'') ?>" class="img-fluid rounded-3 w-100" style="height:400px;object-fit:cover;"
                     onerror="this.src='https://placehold.co/600x400/e0e0e0/888?text=About+Company'" alt="Company">
            </div>
            <div class="col-lg-6 fade-up">
                <div class="section-label" data-en="Our Story" data-id="Sejarah Kami">Our Story</div>
                <h2 class="section-title"><?= htmlspecialchars($aboutData['company']['title']??'Tentang Perusahaan') ?></h2>
                <div class="section-divider mb-4"></div>
                <div class="text-muted">
                    <?= $aboutData['company']['content']??'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>' ?>
                </div>
                <div class="row g-3 mt-2">
                    <div class="col-4 text-center">
                        <div class="fw-bold fs-2 text-accent">20+</div>
                        <div class="small text-muted" data-en="Years" data-id="Tahun">Tahun</div>
                    </div>
                    <div class="col-4 text-center">
                        <div class="fw-bold fs-2 text-accent">500+</div>
                        <div class="small text-muted" data-en="Clients" data-id="Klien">Klien</div>
                    </div>
                    <div class="col-4 text-center">
                        <div class="fw-bold fs-2 text-accent">5K+</div>
                        <div class="small text-muted" data-en="Projects" data-id="Proyek">Proyek</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Vision Mission -->
<section class="py-5 bg-section" id="vision">
    <div class="container">
        <div class="section-header text-center fade-up">
            <div class="section-label" data-en="Direction" data-id="Arah">Direction</div>
            <h2 class="section-title" data-en="Vision &amp; Mission" data-id="Visi &amp; Misi">Visi &amp; Misi</h2>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="row g-4 mt-2">
            <div class="col-md-6 fade-up">
                <div class="card border-0 h-100" style="border-radius:12px;overflow:hidden;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div style="width:48px;height:48px;background:#fff3dc;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <i class="bi bi-eye" style="font-size:1.4rem;color:var(--accent)"></i>
                            </div>
                            <h4 class="fw-bold mb-0"><?= htmlspecialchars($aboutData['vision']['title']??'Visi') ?></h4>
                        </div>
                        <div class="text-muted"><?= $aboutData['vision']['content']??'' ?></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 fade-up">
                <div class="card bg-dark text-white border-0 h-100" style="border-radius:12px;overflow:hidden;">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div style="width:48px;height:48px;background:rgba(201,168,76,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <i class="bi bi-rocket-takeoff" style="font-size:1.4rem;color:var(--accent)"></i>
                            </div>
                            <h4 class="fw-bold mb-0"><?= htmlspecialchars($aboutData['mission']['title']??'Misi') ?></h4>
                        </div>
                        <div class="text-secondary"><?= str_replace(['<li>','</ul>'],['<li class="mb-2">','</ul>'], $aboutData['mission']['content']??'') ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Legality -->
<section class="py-5 py-lg-6" id="legality">
    <div class="container">
        <div class="section-header text-center fade-up">
            <div class="section-label" data-en="Legal" data-id="Hukum">Legal</div>
            <h2 class="section-title" data-en="Legality" data-id="Legalitas">Legalitas</h2>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="row justify-content-center mt-4">
            <div class="col-lg-8 fade-up">
                <div class="card border-0 shadow-sm" style="border-radius:12px;">
                    <div class="card-body p-4 p-md-5">
                        <?= $aboutData['legality']['content']??'' ?>
                        <hr class="my-4">
                        <div class="row g-3">
                            <div class="col-sm-4 text-center">
                                <div style="width:64px;height:64px;background:#fff3dc;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;">
                                    <i class="bi bi-patch-check" style="font-size:1.8rem;color:var(--accent)"></i>
                                </div>
                                <div class="fw-semibold small">ISO 9001:2015</div>
                            </div>
                            <div class="col-sm-4 text-center">
                                <div style="width:64px;height:64px;background:#fff3dc;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;">
                                    <i class="bi bi-shield-check" style="font-size:1.8rem;color:var(--accent)"></i>
                                </div>
                                <div class="fw-semibold small">SNI Terdaftar</div>
                            </div>
                            <div class="col-sm-4 text-center">
                                <div style="width:64px;height:64px;background:#fff3dc;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;">
                                    <i class="bi bi-award" style="font-size:1.8rem;color:var(--accent)"></i>
                                </div>
                                <div class="fw-semibold small">Akta Notaris</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Our Customers -->
<section class="py-5 bg-section" id="customers">
    <div class="container">
        <div class="section-header text-center fade-up">
            <div class="section-label" data-en="Trusted By" data-id="Dipercaya Oleh">Dipercaya Oleh</div>
            <h2 class="section-title" data-en="Our Customers" data-id="Pelanggan Kami">Pelanggan Kami</h2>
            <p class="section-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="section-divider mx-auto"></div>
        </div>
        <div class="row g-3 mt-3 justify-content-center">
            <?php foreach ($customers as $c): ?>
            <div class="col-6 col-md-3 col-lg-2 text-center fade-up">
                <div class="card border p-3" style="border-radius:10px;">
                    <img src="<?= htmlspecialchars($c['logo']) ?>" alt="<?= htmlspecialchars($c['name']) ?>" style="height:48px;object-fit:contain;margin:auto;"
                         onerror="this.src='https://placehold.co/120x48/f5f5f5/aaa?text=<?= urlencode($c['name']) ?>'">
                    <p class="small text-muted mt-2 mb-0"><?= htmlspecialchars($c['name']) ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

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