<?php
session_start();
include __DIR__ . '/includes/header.php';
include __DIR__ . '/includes/sidebar.php';

$aboutFile = __DIR__ . '/data/about.json';

/* Load About Content */
if (file_exists($aboutFile)) {
    $about = json_decode(file_get_contents($aboutFile), true);
} else {
    $about = [
        'mission' => '',
        'who' => '',
        'play' => '',
        'story1' => '',
        'story2' => '',
        'cta' => ''
    ];
}

/* Convert What We Play list into <li> items */
$playItems = array_filter(array_map('trim', explode("\n", $about['play'])));
?>

<div class="main-wrap">
    <div class="content-panel">

        <!-- ABOUT HERO -->
        <div class="about-hero">
            <h1 class="neon-title">About Oldies and More! Radio</h1>
            <p class="about-tagline">Where memories meet music</p>
        </div>

        <div class="vinyl-divider center-divider"></div>

        <!-- MISSION -->
        <div class="content-box center-text">
            <h2 class="section-title">🎙️ Our Mission</h2>
            <p class="about-text">
                <?= nl2br(htmlspecialchars($about['mission'])) ?>
            </p>
        </div>

        <div class="vinyl-divider center-divider"></div>

        <!-- WHO WE ARE -->
        <div class="neon-card center-text">
            <h3>Who We Are</h3>
            <p class="about-text">
                <?= nl2br(htmlspecialchars($about['who'])) ?>
            </p>
        </div>

        <div class="vinyl-divider center-divider"></div>

        <!-- WHAT WE PLAY -->
        <div class="neon-card center-text">
            <h3>What We Play</h3>
            <ul class="about-list">
                <?php foreach ($playItems as $item): ?>
                    <li><?= htmlspecialchars($item) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div class="vinyl-divider center-divider"></div>

        <!-- OUR STORY -->
        <div class="content-box center-text">
            <h2 class="section-title">📻 Our Story</h2>

            <p class="about-text">
                <?= nl2br(htmlspecialchars($about['story1'])) ?>
            </p>

            <p class="about-text">
                <?= nl2br(htmlspecialchars($about['story2'])) ?>
            </p>
        </div>

        <div class="vinyl-divider center-divider"></div>

        <!-- CALL TO ACTION -->
        <div class="content-box center-text">
            <h3 class="section-title">❤️ Thanks for Listening</h3>
            <p class="about-text">
                <?= nl2br(htmlspecialchars($about['cta'])) ?>
            </p>
            <a href="index.php" class="button radio-static">⬅ Back to Home</a>
        </div>
<?php include __DIR__ . '/includes/footer.php'; ?>
    </div>
</div>


