<?php
session_start();
require_once 'admin-panal/includes/db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
       <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-Z2X2T395KZ');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>About Us — Elegance of India</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
  <style>
    .about-story { padding: 80px 0; background: #fff; }
    .about-story-inner { max-width: 900px; margin: 0 auto; line-height: 1.8; color: #444; }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
    .about-card { background: #f9f9f9; padding: 40px; border-radius: 4px; }
    
    @media (max-width: 768px) {
      .page-header { padding: 40px 0 !important; }
      .page-header h1 { font-size: 2.2rem !important; }
      .about-story { padding: 40px 0; }
      .about-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
      .about-card { padding: 30px; }
    }
  </style>
</head>
<body>
<?php include 'inc/header.php'; ?>

<?php
$stmt = $pdo->prepare("SELECT * FROM page_sections WHERE page_slug = ? ORDER BY sort_order, id ASC");
$stmt->execute(['about']);
$sections = $stmt->fetchAll();
?>

<div class="page-header" style="background: #fdfbf8; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee;">
    <div class="container">
        <h1 style="font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 10px;">About Us</h1>
        <p style="color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem;">Heritage • Artistry • Elegance</p>
    </div>
</div>

<div class="about-story">
    <div class="container about-story-inner">
        <?php 
        $cards = [];
        foreach ($sections as $sec) {
            if ($sec['style'] === 'card') {
                $cards[] = $sec;
                continue;
            }
            ?>
            <div class="story-block" style="margin-bottom: 40px;">
                <h2 style="text-align: center; margin-bottom: 40px; font-weight: 600; font-family: 'Playfair Display', serif; font-size: 2.2rem;">
                    <?= htmlspecialchars($sec['title']) ?>
                </h2>
                <div class="story-content">
                    <?php 
                    $paragraphs = explode("\n\n", str_replace("\r", "", $sec['content'] ?? ''));
                    foreach ($paragraphs as $para) {
                        $para = trim($para);
                        if (empty($para)) continue;
                        echo '<p style="margin-bottom: 20px;">' . nl2br(htmlspecialchars($para)) . '</p>';
                    }
                    ?>
                </div>
            </div>
            <?php
        }

        if (!empty($cards)): ?>
            <div class="about-grid">
                <?php foreach ($cards as $c): ?>
                <div class="about-card">
                    <h3 style="margin-bottom: 15px; font-size: 1.25rem; color: #c9a96e; font-family: 'Playfair Display', serif;">
                        <?= htmlspecialchars($c['title']) ?>
                    </h3>
                    <p style="font-size: 0.95rem;"><?= nl2br(htmlspecialchars($c['content'])) ?></p>
                </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <?php if (empty($sections)): ?>
            <p style="text-align:center; color:#888;">Content coming soon.</p>
        <?php endif; ?>
    </div>
</div>

<?php include 'inc/footer.php'; ?>
</body>
</html>
