<?php
/**
 * FILE: public_html/page.php
 * Routes between Layout 1 (document/legal) and Layout 2 (landing page)
 * Layout determined by pages.layout_version = '2'
 * Layout 2 data comes from flat DB columns:
 *   global_page_title, global_page_description, global_page_subtext,
 *   global_buttons (JSON), global_stats (JSON),
 *   about_subtext, about_title, about_description, about_image,
 *   whychoose_subtext, whychoose_heading, whychoose_cards (JSON),
 *   missionvision_subtext, missionvision_heading, missionvision_cards (JSON),
 *   cta_title, cta_description, cta_buttons (JSON)
 */

ini_set('display_errors', 0);
error_reporting(E_ALL);
if (session_status() === PHP_SESSION_NONE) session_start();

include_once __DIR__ . '/config/db_new.php';

$slug = trim($_GET['slug'] ?? '');

if (!$slug && $pdo) {
    try {
        $first = $pdo->query("SELECT slug FROM pages WHERE status IN ('published','draft') ORDER BY id ASC LIMIT 1")->fetch();
        if ($first) { header('Location: /' . urlencode($first['slug'])); exit; }
    } catch (PDOException $e) {}
}

$pageData = null;
if ($slug && $pdo) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM pages WHERE slug = ? AND status IN ('published','draft') LIMIT 1");
        $stmt->execute([$slug]);
        $pageData = $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {}
}

$journal  = null;
$navPages = [];
if ($pageData && !empty($pageData['journal_id']) && $pdo) {
    try {
        $js = $pdo->prepare("SELECT * FROM journals WHERE journal_id = ? LIMIT 1");
        $js->execute([$pageData['journal_id']]);
        $journal = $js->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {}
    if ($journal) {
        try {
            $ns = $pdo->prepare("SELECT id, title, slug FROM pages WHERE journal_id = ? AND status IN ('published','draft') ORDER BY title ASC");
            $ns->execute([$journal['journal_id']]);
            $navPages = $ns->fetchAll(PDO::FETCH_ASSOC);
        } catch (PDOException $e) {}
    }
} elseif ($pdo) {
    try {
        $ns = $pdo->query("SELECT id, title, slug FROM pages WHERE (journal_id IS NULL OR journal_id = 0) AND status IN ('published','draft') ORDER BY title ASC");
        $navPages = $ns->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {}
}

if (!$pageData) http_response_code(404);

/* ── Detect layout ── */
$isLayout2 = (trim($pageData['layout_version'] ?? '1') === '2');

/* ── Decode JSON fields for Layout 2 ── */
$l2_buttons     = [];
$l2_stats       = [];
$l2_whychoose   = [];
$l2_missionvision = [];
$l2_cta_buttons = [];

if ($isLayout2 && $pageData) {
    $jd = function($v) {
        if (empty($v) || !is_string($v)) return [];
        $r = json_decode($v, true);
        return is_array($r) ? $r : [];
    };
    $l2_buttons       = $jd($pageData['global_buttons']     ?? '');
    $l2_stats         = $jd($pageData['global_stats']        ?? '');
    $l2_whychoose     = $jd($pageData['whychoose_cards']     ?? '');
    $l2_missionvision = $jd($pageData['missionvision_cards'] ?? '');
    $l2_cta_buttons   = $jd($pageData['cta_buttons']         ?? '');
}

/* ── SEO vars (shared) ── */
$siteUrl  = (isset($_SERVER['HTTPS']) ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'];
$pageUrl  = $siteUrl . $_SERVER['REQUEST_URI'];
$siteName = 'Communeglobal';

if ($pageData) {
    $p              = $pageData;
    $jName          = $journal['name'] ?? $siteName;
    $finalTitle     = $p['meta_title']         ?: ($p['title'] . ' — ' . $jName);
    $finalDesc      = $p['meta_description']    ?: ($p['overview'] ?: '');
    $finalKeywords  = $p['meta_keywords']       ?: '';
    $finalCanonical = $p['canonical_url']       ?: ($siteUrl . '/' . $p['slug']);
    $ogTitle        = $p['og_title']            ?: $finalTitle;
    $ogDesc         = $p['og_description']      ?: $finalDesc;
    $ogImage        = $p['og_image']            ?: ($p['feature_image'] ?? '');
    $ogType         = $p['og_type']             ?: 'article';
    $twCard         = $p['twitter_card']        ?: 'summary_large_image';
    $twTitle        = $p['twitter_title']       ?: $ogTitle;
    $twDesc         = $p['twitter_description'] ?: $ogDesc;
    $twImage        = $p['twitter_image']       ?: $ogImage;
    $twSite         = $p['twitter_site']        ?: '';
    $schemaRaw      = trim($p['schema_markup']  ?? '');
    $faqsRaw        = trim($p['faqs']           ?? '[]');
    $faqs           = json_decode($faqsRaw, true);
    if (!is_array($faqs)) $faqs = [];
    $faqs           = array_filter($faqs, fn($f) => !empty($f['q']) && !empty($f['a']));
    $faqSchema = '';
    if (!empty($faqs)) {
        $faqSchema = json_encode([
            '@context'   => 'https://schema.org',
            '@type'      => 'FAQPage',
            'mainEntity' => array_map(fn($f) => [
                '@type'          => 'Question',
                'name'           => $f['q'],
                'acceptedAnswer' => ['@type' => 'Answer', 'text' => $f['a']],
            ], array_values($faqs)),
        ], JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
    }
} else {
    $finalTitle = $siteName . ' — Page Not Found';
    $finalDesc = $finalKeywords = $finalCanonical = '';
    $ogTitle = $finalTitle; $ogDesc = $ogImage = $ogType = '';
    $twCard = 'summary'; $twTitle = $finalTitle;
    $twDesc = $twImage = $twSite = $schemaRaw = $faqSchema = '';
    $faqs = [];
}

/* ── Layout 1 icon map ── */
$iconMap = [
    'privacy-policy'         => ['fa-shield-halved',    'Privacy Policy'],
    'terms-and-conditions'   => ['fa-file-contract',    'Legal'],
    'terms-conditions'       => ['fa-file-contract',    'Legal'],
    'about-us'               => ['fa-building-columns', 'About Us'],
    'contact'                => ['fa-envelope',         'Contact'],
    'editorial-policies'     => ['fa-gavel',            'Policy'],
    'editorial-process'      => ['fa-diagram-project',  'Process'],
    'open-access-policy'     => ['fa-lock-open',        'Open Access'],
    'copyright-statement'    => ['fa-copyright',        'Copyright'],
    'aims-scope'             => ['fa-crosshairs',       'Aims & Scope'],
    'call-for-papers'        => ['fa-bullhorn',         'Call for Papers'],
    'author-style-guidelines'=> ['fa-pen-nib',          'Guidelines'],
    'reviewer-guidelines'    => ['fa-magnifying-glass', 'Review'],
    'indexing-abstracting'   => ['fa-database',         'Indexing'],
    'digital-library'        => ['fa-book-open',        'Archive'],
    'special-issue'          => ['fa-star',             'Special Issue'],
    'ojs'                    => ['fa-server',           'OJS'],
    'registration'           => ['fa-id-card',          'Registration'],
    'board-members'          => ['fa-users',            'Editorial Board'],
    'research-areas'         => ['fa-flask',            'Research Areas'],
    'default'                => ['fa-file-lines',       'Page'],
];
$iconData = $iconMap[$slug] ?? $iconMap['default'];

/* ── [em] headline parser ── */
function parse_headline(string $t): string {
    return preg_replace('/\[em\](.*?)\[\/em\]/i', '<em>$1</em>', htmlspecialchars($t, ENT_QUOTES));
}

include __DIR__ . '/include/header.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= htmlspecialchars($finalTitle) ?></title>
<?php if ($finalDesc): ?><meta name="description" content="<?= htmlspecialchars($finalDesc) ?>"><?php endif; ?>
<?php if ($finalKeywords): ?><meta name="keywords" content="<?= htmlspecialchars($finalKeywords) ?>"><?php endif; ?>
<?php if ($finalCanonical): ?><link rel="canonical" href="<?= htmlspecialchars($finalCanonical) ?>"><?php endif; ?>
<meta property="og:title"       content="<?= htmlspecialchars($ogTitle ?? '') ?>">
<meta property="og:description" content="<?= htmlspecialchars($ogDesc  ?? '') ?>">
<meta property="og:type"        content="<?= htmlspecialchars($ogType ?: 'article') ?>">
<meta property="og:url"         content="<?= htmlspecialchars($pageUrl) ?>">
<?php if (!empty($ogImage)): ?><meta property="og:image" content="<?= htmlspecialchars($ogImage) ?>"><?php endif; ?>
<meta name="twitter:card"        content="<?= htmlspecialchars($twCard  ?? 'summary') ?>">
<meta name="twitter:title"       content="<?= htmlspecialchars($twTitle ?? '') ?>">
<meta name="twitter:description" content="<?= htmlspecialchars($twDesc  ?? '') ?>">
<?php if (!empty($twImage)): ?><meta name="twitter:image" content="<?= htmlspecialchars($twImage) ?>"><?php endif; ?>
<?php if (!empty($schemaRaw)): ?><script type="application/ld+json"><?= $schemaRaw ?></script><?php endif; ?>
<?php if (!empty($faqSchema)):  ?><script type="application/ld+json"><?= $faqSchema  ?></script><?php endif; ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<?php if (!$isLayout2): ?>
<!-- ═══════════════════════════════
     LAYOUT 1 — Document / Legal
     ═══════════════════════════════ -->
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{--navy:#0d2137;--navy2:#1a3a5c;--blue:#1a5fa8;--accent:#2a80d0;--light:#f4f7fb;--border:#dce6f0;--text:#2c3e50;--muted:#607d96;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Source Sans 3',sans-serif;color:var(--text);background:#fff;line-height:1.6;}
.lora{font-family:'Lora',Georgia,serif;}
.pg-hero{background:linear-gradient(135deg,var(--navy) 0%,#1a3f6e 55%,var(--blue) 100%);padding:52px 20px 44px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.pg-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.04);}
.pg-hero::after{content:'';position:absolute;bottom:-80px;left:-40px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.03);}
.pg-hero-inner{position:relative;z-index:1;}
.pg-breadcrumb{font-size:.8rem;opacity:.6;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:.4rem;}
.pg-breadcrumb a{color:#fff;text-decoration:none;}.pg-breadcrumb a:hover{opacity:.85;}.pg-breadcrumb span{opacity:.45;}
.pg-hero-icon{width:68px;height:68px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2);border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.pg-hero-icon i{font-size:1.9rem;color:#fff;}
.pg-hero-tag{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:20px;padding:3px 14px;font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px;}
.pg-draft-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(245,158,11,.25);border:1px solid rgba(245,158,11,.4);color:#fde68a;border-radius:20px;padding:3px 12px;font-size:.72rem;font-weight:600;margin-left:6px;}
.pg-hero h1{font-family:'Lora',Georgia,serif;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.2;margin-bottom:10px;}
.pg-hero-sub{font-size:.92rem;opacity:.72;font-weight:300;max-width:520px;margin:0 auto;line-height:1.6;}
.pg-hero-meta{display:inline-flex;align-items:center;gap:6px;margin-top:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:5px 14px;font-size:.78rem;}
.pg-subnav{background:var(--light);border-bottom:1px solid var(--border);}
.pg-subnav-inner{max-width:860px;margin:0 auto;padding:0 24px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;}
.pg-subnav-inner::-webkit-scrollbar{display:none;}
.pg-subnav-inner a{display:inline-flex;align-items:center;gap:.35rem;padding:.7rem 1rem;font-size:.8rem;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s;}
.pg-subnav-inner a:hover{color:var(--blue);border-color:var(--accent);}
.pg-subnav-inner a.active{color:var(--blue);border-color:var(--blue);font-weight:600;}
.pg-wrap{max-width:860px;margin:0 auto;padding:52px 24px 80px;}
.pg-intro{border-left:3px solid var(--accent);padding:16px 20px;background:var(--light);border-radius:0 8px 8px 0;margin-bottom:44px;font-size:.96rem;line-height:1.75;color:var(--text);}
.pg-intro a{color:var(--accent);text-decoration:none;}.pg-intro a:hover{text-decoration:underline;}
.pg-body{font-size:.96rem;line-height:1.82;color:var(--text);}
.pg-body h1{font-family:'Lora',serif;font-size:1.9rem;font-weight:700;color:var(--navy);margin:2rem 0 1rem;}
.pg-body h2{font-family:'Lora',serif;font-size:1.2rem;font-weight:700;color:var(--navy);margin:2.25rem 0 .875rem;padding-bottom:.6rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.65rem;}
.pg-body h3{font-family:'Lora',serif;font-size:1.1rem;font-weight:700;color:var(--navy2);margin:1.5rem 0 .6rem;}
.pg-body h4{font-size:1rem;font-weight:600;color:var(--navy2);margin:1.25rem 0 .5rem;}
.pg-body h5,.pg-body h6{font-size:.9rem;font-weight:600;color:var(--muted);margin:1rem 0 .4rem;}
.pg-body p{margin-bottom:1rem;}.pg-body p:last-child{margin-bottom:0;}
.pg-body strong,.pg-body b{font-weight:600;color:var(--navy);}
.pg-body em,.pg-body i{font-style:italic;}
.pg-body a{color:var(--accent);text-decoration:none;}.pg-body a:hover{text-decoration:underline;}
.pg-body hr{border:none;border-top:1px solid var(--border);margin:2rem 0;}
.pg-body blockquote{border-left:3px solid var(--accent);background:var(--light);padding:1rem 1.4rem;margin:1.5rem 0;border-radius:0 8px 8px 0;font-style:italic;color:var(--muted);}
.pg-body ul{padding-left:20px;margin:.875rem 0 1rem;}.pg-body ul li{margin-bottom:.5rem;font-size:.95rem;line-height:1.75;}
.pg-body ol{padding-left:20px;margin:.875rem 0 1rem;}.pg-body ol li{margin-bottom:.5rem;font-size:.95rem;line-height:1.75;}
.pg-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.875rem;}
.pg-body table th{background:var(--navy);color:#fff;padding:.7rem 1rem;text-align:left;font-weight:600;font-size:.85rem;}
.pg-body table td{padding:.65rem 1rem;border-bottom:1px solid var(--border);color:var(--text);}
.pg-body table tr:last-child td{border-bottom:none;}.pg-body table tr:hover td{background:var(--light);}
.pg-body img{max-width:100%;height:auto;border-radius:8px;margin:1rem 0;display:block;}
.pg-body code{background:var(--light);padding:.1rem .4rem;border-radius:4px;font-size:.85rem;color:var(--accent);font-family:monospace;border:1px solid var(--border);}
.pg-body pre{background:#1e293b;color:#e2e8f0;padding:1.25rem 1.5rem;border-radius:8px;overflow-x:auto;font-size:.84rem;margin:1rem 0;line-height:1.7;}
.pg-body pre code{background:none;padding:0;color:inherit;border:none;}
.pg-body .intro-text{border-left:3px solid var(--accent);padding:16px 20px;background:var(--light);border-radius:0 8px 8px 0;margin-bottom:2rem;font-size:.96rem;line-height:1.75;}
.pg-body .section-heading{font-family:'Lora',serif;font-size:1.35rem;font-weight:700;color:var(--navy);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--blue);display:inline-block;}
.pg-body .section-subheading{font-family:'Lora',serif;font-size:1.1rem;font-weight:700;color:var(--navy2);margin:1.25rem 0 .6rem;}
.pg-body .policy-section{margin-bottom:2rem;}
.pg-body .policy-header{background:var(--navy);color:#fff;padding:.8rem 1.2rem;font-size:.95rem;font-weight:600;margin-bottom:.875rem;border-radius:6px;}
.pg-body .policy-content{color:var(--text);font-size:.9375rem;line-height:1.8;padding-left:.75rem;}
.pg-body .closing-statement{background:var(--light);border-left:3px solid var(--accent);padding:1.1rem 1.4rem;margin-top:2rem;border-radius:0 6px 6px 0;color:var(--text);font-size:.9375rem;line-height:1.8;}
.pg-body .guidelines-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.875rem;}
.pg-body .guideline-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.pg-body .guideline-item:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(26,95,168,.1);}
.pg-body .guideline-header{display:flex;align-items:center;gap:.875rem;padding:.875rem 1.1rem;background:var(--light);border-bottom:1px solid var(--border);}
.pg-body .guideline-item:hover .guideline-header{background:#eef4fb;}
.pg-body .guideline-number{width:28px;height:28px;background:var(--blue);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;}
.pg-body .guideline-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:#fff;flex-shrink:0;}
.pg-body .guideline-title{font-size:.9375rem;font-weight:700;color:var(--navy);}
.pg-body .guideline-body{padding:.875rem 1.1rem 1.1rem;}
.pg-body .closing-note{margin-top:1.5rem;padding:1rem 1.4rem;background:#eef4fb;border-radius:8px;color:var(--navy2);font-weight:500;font-size:.9rem;line-height:1.7;border-left:3px solid var(--accent);}
.pg-body .icon-purple{background:#5b21b6;}.pg-body .icon-blue{background:var(--blue);}.pg-body .icon-green{background:#10b981;}.pg-body .icon-orange{background:#f59e0b;}.pg-body .icon-red{background:#ef4444;}
.pg-body .info-table,.pg-body .fee-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.875rem;}
.pg-body .info-table th,.pg-body .fee-table th{background:var(--navy);color:#fff;padding:.7rem 1rem;text-align:left;}
.pg-body .info-table td,.pg-body .fee-table td{padding:.65rem 1rem;border-bottom:1px solid var(--border);color:var(--text);}
.pg-body .info-table td:first-child{font-weight:600;color:var(--navy);}
.pg-body .volume-badge{display:inline-block;background:#dbeafe;color:var(--blue);padding:.18rem .55rem;border-radius:4px;font-size:.72rem;font-weight:600;margin-top:.2rem;}
.pg-body .payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem;margin-bottom:1.75rem;}
.pg-body .payment-option{background:var(--light);border-radius:8px;padding:1.25rem;text-align:center;border:1px solid var(--border);transition:all .25s;}
.pg-body .payment-option:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px);}
.pg-body .pay-button{background:var(--blue);color:#fff;padding:.65rem 1.2rem;border:none;border-radius:7px;font-weight:600;cursor:pointer;width:100%;transition:background .2s;}
.pg-body .pay-button:hover{background:var(--navy);}
.pg-body .year-section{border:1px solid var(--border);border-radius:10px;margin-bottom:1.5rem;overflow:hidden;}
.pg-body .year-header{background:var(--light);padding:1.1rem 1.4rem;border-bottom:2px solid var(--blue);cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
.pg-body .year-header:hover{background:#eef4fb;}
.pg-body .year-title{font-family:'Lora',serif;font-size:1.3rem;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:.875rem;}
.pg-body .year-icon{width:34px;height:34px;background:var(--blue);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;}
.pg-body .year-toggle{color:var(--blue);transition:transform .3s;}
.pg-body .year-section.collapsed .year-toggle{transform:rotate(-90deg);}
.pg-body .volumes-grid{padding:1.1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem;}
.pg-body .volume-card{background:var(--light);border:1px solid var(--border);border-radius:8px;padding:1rem;transition:all .25s;position:relative;overflow:hidden;}
.pg-body .volume-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent);transform:scaleY(0);transition:transform .25s;}
.pg-body .volume-card:hover{background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08);transform:translateX(3px);}
.pg-body .volume-card:hover::before{transform:scaleY(1);}
.pg-body .volume-title{font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:.5rem;}
.pg-body .volume-link{display:flex;align-items:center;gap:.4rem;color:var(--accent);text-decoration:none;font-size:.78rem;padding:.3rem .55rem;border-radius:5px;background:#fff;border:1px solid var(--border);transition:all .2s;margin-top:.3rem;}
.pg-body .volume-link:hover{background:#eef4fb;border-color:var(--accent);}
.pg-body .leadership-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;margin-bottom:2rem;}
.pg-body .leadership-card{background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:12px;padding:1.5rem;color:#fff;transition:all .3s;}
.pg-body .leadership-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(13,33,55,.3);}
.pg-body .leadership-content{position:relative;z-index:1;}
.pg-body .leadership-role{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-bottom:.35rem;}
.pg-body .leadership-name{font-family:'Lora',serif;font-size:1.2rem;font-weight:700;margin-bottom:.5rem;}
.pg-body .leadership-affiliation{font-size:.8rem;opacity:.85;line-height:1.5;}
.pg-body .board-members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem;}
.pg-body .member-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1.1rem;transition:all .3s;position:relative;overflow:hidden;}
.pg-body .member-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--navy),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.pg-body .member-card:hover{border-color:var(--blue);box-shadow:0 5px 16px rgba(26,95,168,.12);transform:translateY(-2px);}
.pg-body .member-card:hover::before{transform:scaleX(1);}
.pg-body .member-avatar{width:46px;height:46px;border-radius:9px;background:linear-gradient(135deg,var(--navy),var(--blue));display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;font-size:1.1rem;font-weight:700;color:#fff;}
.pg-body .member-prefix{font-size:.68rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.2rem;}
.pg-body .member-name{font-size:.9375rem;font-weight:700;color:var(--navy);margin-bottom:.35rem;line-height:1.3;}
.pg-body .member-affiliation{font-size:.8rem;color:var(--muted);line-height:1.5;}
.pg-body .section-description{color:var(--muted);font-size:.95rem;margin-bottom:1.75rem;line-height:1.6;}
.pg-body .indexing-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-bottom:2rem;}
@media(min-width:640px){.pg-body .indexing-grid{grid-template-columns:repeat(2,1fr);}}
.pg-body .indexing-item{background:#fff;padding:1.25rem;border:1px solid var(--border);display:flex;gap:1.1rem;align-items:flex-start;transition:all .3s;position:relative;overflow:hidden;border-radius:8px;}
.pg-body .indexing-item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .35s;}
.pg-body .indexing-item:hover{border-color:var(--blue);transform:translateX(4px);box-shadow:0 5px 16px rgba(0,0,0,.08);}
.pg-body .indexing-item:hover::after{transform:scaleX(1);}
.pg-body .indexing-logo-wrapper{flex-shrink:0;width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:var(--light);border:1px solid var(--border);overflow:hidden;border-radius:6px;}
.pg-body .indexing-logo-wrapper img{width:100%;height:100%;object-fit:contain;padding:.35rem;}
.pg-body .indexing-name{font-weight:700;font-size:.9375rem;color:var(--navy);margin-bottom:.3rem;}
.pg-body .indexing-description{font-size:.8rem;color:var(--muted);line-height:1.6;}
.pg-body .info-alert{background:#fff;border-left:4px solid var(--accent);padding:1.25rem 1.5rem;margin-top:2rem;box-shadow:0 2px 8px rgba(0,0,0,.07);border-radius:0 6px 6px 0;}
.pg-body .info-alert-title{font-weight:700;font-size:.95rem;color:var(--navy);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem;}
.pg-body .info-alert-text{color:var(--muted);line-height:1.7;font-size:.875rem;}
.pg-body .stats-overview{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-bottom:2rem;}
@media(min-width:640px){.pg-body .stats-overview{grid-template-columns:repeat(4,1fr);}}
.pg-body .stat-box{background:#fff;border-radius:10px;padding:1.25rem 1rem;text-align:center;border:2px solid var(--border);transition:all .2s;}
.pg-body .stat-box:hover{border-color:var(--blue);transform:translateY(-2px);}
.pg-body .stat-box.sky{background:#e0f2fe;border-color:#0ea5e9;}.pg-body .stat-box.mint{background:#d1fae5;border-color:#10b981;}.pg-body .stat-box.lavender{background:#ede9fe;border-color:#5b21b6;}.pg-body .stat-box.peach{background:#fed7aa;border-color:#f59e0b;}
.pg-body .stat-icon-main{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;margin:0 auto .65rem;border-radius:8px;}
.pg-body .stat-icon-main i{font-size:1.35rem;color:var(--blue);}
.pg-body .stat-number{font-size:1.75rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:.3rem;}
.pg-body .stat-text{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.pg-body .action-grid{display:grid;grid-template-columns:1fr;gap:1.1rem;}
@media(min-width:640px){.pg-body .action-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.pg-body .action-grid{grid-template-columns:repeat(3,1fr);}}
.pg-body .action-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:all .3s;position:relative;overflow:hidden;text-align:center;}
.pg-body .action-card:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(26,95,168,.1);transform:translateY(-3px);}
.pg-body .action-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .3s;}
.pg-body .action-card:hover::after{transform:scaleX(1);}
.pg-body .action-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin:0 auto 1.1rem;background:var(--blue);transition:transform .3s;}
.pg-body .action-card:hover .action-icon{transform:scale(1.1);}
.pg-body .action-title{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.5rem;}
.pg-body .action-description{color:var(--muted);font-size:.8rem;margin-bottom:1.1rem;line-height:1.6;}
.pg-body .action-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent);font-weight:600;text-decoration:none;font-size:.85rem;transition:gap .2s;}
.pg-body .action-link:hover{gap:.6rem;}
.pg-body .features-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.5rem;}
.pg-body .feature-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.5rem;transition:all .3s;position:relative;overflow:hidden;}
.pg-body .feature-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--blue);transform:scaleY(0);transition:transform .3s;}
.pg-body .feature-card:hover{border-color:var(--blue);box-shadow:0 5px 16px rgba(26,95,168,.1);transform:translateY(-3px);}
.pg-body .feature-card:hover::before{transform:scaleY(1);}
.pg-body .feature-header{display:flex;align-items:flex-start;gap:1.1rem;margin-bottom:1.1rem;}
.pg-body .feature-number{width:46px;height:46px;background:var(--blue);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:800;flex-shrink:0;}
.pg-body .feature-title{font-size:1.2rem;font-weight:700;color:var(--navy);margin-bottom:.35rem;}
.pg-body .feature-content{color:var(--muted);line-height:1.8;font-size:.9375rem;}
.pg-top{text-align:right;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--border);margin-bottom:2rem;}
.pg-top a{font-size:.78rem;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;transition:color .15s;}
.pg-top a:hover{color:var(--accent);}
.pg-faq-section{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border);}
.pg-faq-title{font-family:'Lora',serif;font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem;}
.pg-faq-title i{color:var(--blue);}
.pg-faq-item{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:.625rem;}
.pg-faq-item summary{padding:.875rem 1.1rem;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center;background:var(--light);transition:background .15s;}
.pg-faq-item summary:hover{background:#e8f0f9;}
.pg-faq-item summary::-webkit-details-marker{display:none;}
.pg-faq-item[open] summary{background:#deeaf8;color:var(--blue);border-bottom:1px solid var(--border);}
.pg-faq-chevron{font-size:.65rem;color:var(--blue);flex-shrink:0;margin-left:.75rem;transition:transform .25s;}
.pg-faq-item[open] .pg-faq-chevron{transform:rotate(180deg);}
.pg-faq-answer{padding:.875rem 1.1rem;font-size:.875rem;color:var(--text);line-height:1.75;}
.pg-404{text-align:center;padding:5rem 2rem;}
.pg-404-icon{font-size:4.5rem;color:var(--border);margin-bottom:1.5rem;}
.pg-404 h2{font-family:'Lora',serif;font-size:1.75rem;font-weight:700;color:var(--text);margin-bottom:.75rem;}
.pg-404 p{color:var(--muted);font-size:.95rem;margin-bottom:2rem;line-height:1.65;}
.pg-404 code{background:var(--light);padding:.2rem .55rem;border-radius:4px;color:var(--blue);font-size:.9rem;border:1px solid var(--border);}
.pg-btn-back{display:inline-flex;align-items:center;gap:.5rem;background:var(--blue);color:#fff;padding:.75rem 1.75rem;border-radius:8px;font-weight:600;font-size:.9rem;text-decoration:none;transition:all .2s;}
.pg-btn-back:hover{background:var(--navy);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,95,168,.3);}
@media(max-width:640px){
    .pg-hero{padding:36px 16px 32px;}.pg-hero h1{font-size:1.65rem;}
    .pg-wrap{padding:32px 16px 60px;}.pg-body{font-size:.9rem;}
    .pg-body .volumes-grid{grid-template-columns:1fr;}
}
</style>

<?php else: ?>
<!-- ═══════════════════════════════
     LAYOUT 2 — Landing Page
     ═══════════════════════════════ -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--navy:#0d1f4e;--cobalt:#1a3a8f;--sky:#3b7dd8;--gold:#e8a842;--cream:#faf8f4;--ink:#1c1c2e;--muted:#6b7589;--white:#ffffff;--radius:14px;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);line-height:1.75;overflow-x:hidden;}
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--navy);}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 30%,rgba(58,125,216,.35) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 70%,rgba(232,168,66,.18) 0%,transparent 55%),radial-gradient(ellipse 40% 40% at 50% 10%,rgba(26,58,143,.6) 0%,transparent 50%);animation:meshShift 12s ease-in-out infinite alternate;}
@keyframes meshShift{from{transform:scale(1) translateY(0);}to{transform:scale(1.08) translateY(-20px);}}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;}
.hero-inner{position:relative;z-index:2;text-align:center;padding:0 24px;max-width:860px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;opacity:0;animation:fadeUp .7s .3s forwards;}
.hero-eyebrow span{display:inline-block;width:32px;height:1px;background:var(--gold);}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(42px,7vw,82px);font-weight:700;color:var(--white);line-height:1.1;margin-bottom:28px;opacity:0;animation:fadeUp .8s .5s forwards;}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero-desc{font-size:17px;color:rgba(255,255,255,.72);max-width:600px;margin:0 auto 44px;font-weight:300;opacity:0;animation:fadeUp .8s .7s forwards;}
.hero-cta-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s .9s forwards;}
.btn-primary{padding:14px 32px;background:var(--gold);color:var(--navy);font-weight:600;font-size:14px;border-radius:50px;text-decoration:none;letter-spacing:.04em;transition:transform .2s,box-shadow .2s;display:inline-block;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,168,66,.4);}
.btn-outline{padding:14px 32px;border:1.5px solid rgba(255,255,255,.35);color:var(--white);font-weight:500;font-size:14px;border-radius:50px;text-decoration:none;letter-spacing:.04em;transition:background .2s,border-color .2s;display:inline-block;}
.btn-outline:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);}
.scroll-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.scroll-hint .line{width:1px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);animation:linePulse 2s ease-in-out infinite;}
@keyframes linePulse{0%,100%{opacity:1;transform:scaleY(1);}50%{opacity:.4;transform:scaleY(.6);}}
.stats-strip{background:var(--cobalt);padding:0;}
.stats-inner{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);}
.stat-item{padding:40px 30px;text-align:center;border-right:1px solid rgba(255,255,255,.1);transition:background .2s;}
.stat-item:last-child{border-right:none;}
.stat-item:hover{background:rgba(255,255,255,.05);}
.stat-num{font-family:'Playfair Display',serif;font-size:42px;font-weight:700;color:var(--gold);line-height:1;}
.stat-label{font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.1em;text-transform:uppercase;margin-top:6px;}
.page-wrap{max-width:1100px;margin:auto;padding:0 28px;}
section{padding:100px 0;}
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.about-intro-text .label{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin-bottom:18px;}
.about-intro-text h2{font-family:'Playfair Display',serif;font-size:clamp(28px,3.5vw,44px);font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:24px;}
.about-intro-text p{color:var(--muted);font-size:15.5px;margin-bottom:16px;}
.about-visual{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,var(--navy),var(--cobalt));display:flex;align-items:center;justify-content:center;}
.about-visual img{width:100%;height:100%;object-fit:cover;}
.globe-svg{width:72%;opacity:.85;}
.about-visual::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 30%,rgba(232,168,66,.15),transparent 60%);}
.section-header{text-align:center;margin-bottom:56px;}
.section-header .label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);display:block;margin-bottom:14px;}
.section-header h2{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--navy);}
.highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.highlight-card{background:var(--white);border-radius:var(--radius);padding:36px 30px;border:1px solid rgba(0,0,0,.06);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden;}
.highlight-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sky),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.highlight-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(13,31,78,.1);}
.highlight-card:hover::before{transform:scaleX(1);}
.card-icon{font-size:36px;margin-bottom:18px;display:block;}
.card-title{font-weight:600;font-size:16px;color:var(--navy);margin-bottom:10px;}
.card-text{font-size:14px;color:var(--muted);line-height:1.7;}
.mv-section{background:var(--navy);}
.mv-section .section-header .label{color:var(--gold);}
.mv-section .section-header h2{color:#fff;}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.mv-card{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:48px 40px;position:relative;overflow:hidden;transition:border-color .3s;}
.mv-card:hover{border-color:var(--gold);}
.mv-card::after{content:'';position:absolute;bottom:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.03);}
.mv-tag{display:inline-block;padding:5px 14px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:50px;margin-bottom:22px;}
.mv-card h3{font-family:'Playfair Display',serif;font-size:28px;color:var(--white);margin-bottom:18px;}
.mv-card p{color:rgba(255,255,255,.65);font-size:15px;line-height:1.8;}
.cta-section{background:linear-gradient(135deg,var(--cobalt),var(--sky));text-align:center;padding:100px 28px;}
.cta-section h2{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,48px);color:var(--white);margin-bottom:16px;}
.cta-section p{color:rgba(255,255,255,.75);font-size:16px;max-width:520px;margin:0 auto 40px;}
.cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
@media(max-width:900px){
    .about-intro{grid-template-columns:1fr;}.about-visual{display:none;}
    .highlights-grid{grid-template-columns:1fr 1fr;}.mv-grid{grid-template-columns:1fr;}
    .stats-inner{grid-template-columns:repeat(2,1fr);}.stat-item:nth-child(2){border-right:none;}
}
@media(max-width:560px){
    .highlights-grid{grid-template-columns:1fr;}.stats-inner{grid-template-columns:1fr 1fr;}
}
</style>
<?php endif; ?>
</head>
<body>
<main>

<?php if (!$isLayout2): ?>
<!-- ══════════════════════════════════════════
     LAYOUT 1 — Document / Legal  (original)
     ══════════════════════════════════════════ -->
<div class="pg-hero">
<div class="pg-hero-inner">
<?php if ($pageData): ?>
<div class="pg-breadcrumb">
    <a href="/">Home</a><span>›</span>
    <?php if ($journal): ?>
    <a href="/journals/<?= htmlspecialchars($journal['slug']) ?>/"><?= htmlspecialchars($journal['name']) ?></a><span>›</span>
    <?php endif; ?>
    <span style="opacity:.85;"><?= htmlspecialchars($pageData['title']) ?></span>
</div>
<div>
    <?php if (($pageData['status'] ?? '') === 'draft'): ?>
    <span class="pg-draft-badge"><i class="fas fa-pencil" style="font-size:.65rem;"></i> Draft</span>
    <?php endif; ?>
</div>
<div class="pg-hero-icon"><i class="fas <?= htmlspecialchars($iconData[0]) ?>"></i></div>
<h1 class="lora"><?= htmlspecialchars($pageData['title']) ?></h1>
<?php if (!empty($pageData['overview'])): ?>
<p class="pg-hero-sub"><?= htmlspecialchars($pageData['overview']) ?></p>
<?php elseif ($journal): ?>
<p class="pg-hero-sub"><?= htmlspecialchars($journal['name']) ?></p>
<?php endif; ?>
<?php if (!empty($pageData['updated_at'])): ?>
<div class="pg-hero-meta">
    <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
    Last updated: <?= date('F j, Y', strtotime($pageData['updated_at'])) ?>
</div>
<?php endif; ?>
<?php else: ?>
<div class="pg-hero-icon" style="background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.3);"><i class="fas fa-circle-exclamation" style="color:#fca5a5;"></i></div>
<span class="pg-hero-tag">404</span>
<h1 class="lora">Page Not Found</h1>
<p class="pg-hero-sub">The page you're looking for doesn't exist or hasn't been published yet.</p>
<?php endif; ?>
</div>
</div>

<?php if (!empty($navPages)): ?>
<!--<nav class="pg-subnav">-->
<!--    <div class="pg-subnav-inner">-->
<!--        <?php foreach ($navPages as $np): ?>-->
<!--        <a href="/<?= htmlspecialchars($np['slug']) ?>" class="<?= $np['slug'] === $slug ? 'active' : '' ?>">-->
<!--            <?= htmlspecialchars($np['title']) ?>-->
<!--        </a>-->
<!--        <?php endforeach; ?>-->
<!--    </div>-->
<!--</nav>-->
<?php endif; ?>

<div class="pg-wrap">
<?php if ($pageData): ?>
    <?php if (!empty($pageData['overview'])): ?>
    <div class="pg-intro"><?= htmlspecialchars($pageData['overview']) ?></div>
    <?php endif; ?>
    <?php if (!empty($pageData['description'])): ?>
    <div class="pg-body"><?= $pageData['description'] ?></div>
    <?php else: ?>
    <div style="text-align:center;padding:3rem 0;color:var(--muted);">
        <i class="fas fa-file-pen" style="font-size:2.5rem;display:block;margin-bottom:1rem;opacity:.3;"></i>
        <p style="font-size:.95rem;">No content has been added to this page yet.</p>
    </div>
    <?php endif; ?>
    <?php if (!empty($faqs)): ?>
    <div class="pg-faq-section">
        <h3 class="pg-faq-title"><i class="fas fa-circle-question"></i> Frequently Asked Questions</h3>
        <?php foreach ($faqs as $faq): ?>
        <details class="pg-faq-item">
            <summary><?= htmlspecialchars($faq['q']) ?><i class="fas fa-chevron-down pg-faq-chevron"></i></summary>
            <div class="pg-faq-answer"><?= nl2br(htmlspecialchars($faq['a'])) ?></div>
        </details>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
<?php else: ?>
<div class="pg-404">
    <div class="pg-404-icon"><i class="fas fa-file-slash"></i></div>
    <h2>Oops! Page not found</h2>
    <p>The page <code><?= htmlspecialchars($slug) ?></code> doesn't exist or hasn't been published yet.</p>
    <a href="/" class="pg-btn-back"><i class="fas fa-arrow-left"></i> Back to Home</a>
</div>
<?php endif; ?>
</div>

<?php else: ?>
<!-- ══════════════════════════════════════════
     LAYOUT 2 — Landing Page (about-us style)
     Reads from flat DB columns
     ══════════════════════════════════════════ -->

<?php if ($pageData): ?>

<!-- HERO -->
<?php
$heroEyebrow = trim($pageData['global_page_subtext']     ?? '') ?: 'Academic Publishing Platform';
$heroTitle   = trim($pageData['global_page_title']       ?? '') ?: 'Where Research Meets [em]Global[/em] Reach';
$heroDesc    = trim($pageData['global_page_description'] ?? '') ?: 'A fast, transparent, and author-friendly publishing experience built for today\'s research community.';
?>
<section class="hero">
    <div class="hero-inner">
        <p class="hero-eyebrow"><span></span><?= htmlspecialchars($heroEyebrow) ?><span></span></p>
        <h1><?= parse_headline($heroTitle) ?></h1>
        <p class="hero-desc"><?= htmlspecialchars($heroDesc) ?></p>
        <div class="hero-cta-row">
            <?php if (!empty($l2_buttons)): ?>
                <?php foreach ($l2_buttons as $bi => $btn): ?>
                <?php if (!empty($btn['name'])): ?>
                <a href="<?= htmlspecialchars($btn['link'] ?? '#') ?>" class="<?= $bi === 0 ? 'btn-primary' : 'btn-outline' ?>">
                    <?= htmlspecialchars($btn['name']) ?>
                </a>
                <?php endif; ?>
                <?php endforeach; ?>
            <?php else: ?>
                <a href="#" class="btn-primary">Submit Your Paper</a>
                <a href="#" class="btn-outline">Explore Journals</a>
            <?php endif; ?>
        </div>
    </div>
    <div class="scroll-hint"><div class="line"></div><span>Scroll</span></div>
</section>

<!-- STATS STRIP -->
<?php
$defaultStats = [
    ['name'=>'Countries',          'number'=>'40+'],
    ['name'=>'Open Access',        'number'=>'100%'],
    ['name'=>'Publication Process','number'=>'Fast'],
    ['name'=>'Reviewed Research',  'number'=>'Peer'],
];
$statsToShow = !empty($l2_stats) ? $l2_stats : $defaultStats;
?>
<div class="stats-strip">
    <div class="stats-inner">
        <?php foreach (array_slice($statsToShow, 0, 4) as $si => $stat): ?>
        <div class="stat-item fade-in" <?= $si > 0 ? 'style="transition-delay:' . ($si * 0.1) . 's"' : '' ?>>
            <div class="stat-num"><?= htmlspecialchars($stat['number'] ?? '') ?></div>
            <div class="stat-label"><?= htmlspecialchars($stat['name'] ?? '') ?></div>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<!-- ABOUT INTRO -->
<?php
$aboutSubtext = trim($pageData['about_subtext']     ?? '') ?: 'About Us';
$aboutTitle   = trim($pageData['about_title']       ?? '') ?: 'A Platform Built for Researchers, by Researchers';
$aboutDescRaw = trim($pageData['about_description'] ?? '');
$aboutImage   = trim($pageData['about_image']       ?? '');

/* Strip any embedded <section> / .about-visual / .about-intro wrappers that
   TinyMCE may have saved — we only want the inner paragraph text. */
if (!empty($aboutDescRaw)) {
    // Remove <section>...</section> blocks (TinyMCE sometimes wraps whole layouts)
    $aboutDescRaw = preg_replace('/<section\b[^>]*>.*?<\/section>/is', '', $aboutDescRaw);
    // Remove .about-visual divs
    $aboutDescRaw = preg_replace('/<div\b[^>]*class=["\'][^"\']*about-visual[^"\']*["\'][^>]*>.*?<\/div>/is', '', $aboutDescRaw);
    // Remove .about-intro wrapper divs
    $aboutDescRaw = preg_replace('/<div\b[^>]*class=["\'][^"\']*about-intro[^"\']*["\'][^>]*>.*?<\/div>/is', '', $aboutDescRaw);
    $aboutDescRaw = trim($aboutDescRaw);
}

/* Only show the right-side visual panel when there is NO custom HTML description
   (i.e. when we fall back to the default 3 paragraphs). If the admin wrote a
   custom description, use full-width single-column layout instead. */
$hasCustomDesc  = !empty($aboutDescRaw);
$showVisualPanel = !$hasCustomDesc || !empty($aboutImage);
?>
<section>
    <div class="page-wrap">
        <div class="about-intro" <?= !$showVisualPanel ? 'style="grid-template-columns:1fr;max-width:700px;"' : '' ?>>
            <div class="about-intro-text fade-in">
                <span class="label"><?= htmlspecialchars($aboutSubtext) ?></span>
                <h2><?= htmlspecialchars($aboutTitle) ?></h2>
                <?php if (!empty($aboutDescRaw)): ?>
                <div style="color:var(--muted);font-size:15.5px;line-height:1.75;"><?= $aboutDescRaw ?></div>
                <?php else: ?>
                <p>Commune Global is a modern academic publishing platform dedicated to helping researchers share their work with the world. We provide a fast, transparent, and author-friendly publishing experience designed for today's global research community.</p>
                <p>With contributors from 40+ countries, we are building a diverse and growing network of scholars, reviewers, and editors committed to quality and innovation in research publishing.</p>
                <p>Our mission is simple — to make research accessible, visible, and impactful by combining rigorous peer review with rapid publication and global reach.</p>
                <?php endif; ?>
            </div>
            <?php if ($showVisualPanel): ?>
            <div class="about-visual fade-in" style="transition-delay:.2s">
                <?php if (!empty($aboutImage)): ?>
                    <img src="<?= htmlspecialchars($aboutImage) ?>" alt="<?= htmlspecialchars($aboutTitle) ?>">
                <?php else: ?>
                <svg class="globe-svg" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="160" cy="160" r="130" stroke="rgba(255,255,255,.12)" stroke-width="1"/>
                    <circle cx="160" cy="160" r="90"  stroke="rgba(255,255,255,.1)"  stroke-width="1"/>
                    <circle cx="160" cy="160" r="50"  stroke="rgba(255,255,255,.09)" stroke-width="1"/>
                    <ellipse cx="160" cy="160" rx="130" ry="40" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
                    <ellipse cx="160" cy="160" rx="130" ry="90" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
                    <ellipse cx="160" cy="160" rx="40"  ry="130" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
                    <ellipse cx="160" cy="160" rx="90"  ry="130" stroke="rgba(255,255,255,.07)" stroke-width="1"/>
                    <circle cx="160" cy="30"  r="5" fill="#e8a842" opacity=".9"/>
                    <circle cx="270" cy="110" r="4" fill="#3b7dd8" opacity=".9"/>
                    <circle cx="240" cy="230" r="5" fill="#e8a842" opacity=".8"/>
                    <circle cx="80"  cy="240" r="4" fill="#3b7dd8" opacity=".9"/>
                    <circle cx="50"  cy="120" r="5" fill="#e8a842" opacity=".7"/>
                    <circle cx="160" cy="160" r="8" fill="white"   opacity=".9"/>
                    <line x1="160" y1="30"  x2="270" y2="110" stroke="rgba(232,168,66,.3)" stroke-width="1"/>
                    <line x1="270" y1="110" x2="240" y2="230" stroke="rgba(59,125,216,.3)" stroke-width="1"/>
                    <line x1="240" y1="230" x2="80"  y2="240" stroke="rgba(232,168,66,.3)" stroke-width="1"/>
                    <line x1="80"  y1="240" x2="50"  y2="120" stroke="rgba(59,125,216,.3)" stroke-width="1"/>
                    <line x1="50"  y1="120" x2="160" y2="30"  stroke="rgba(232,168,66,.3)" stroke-width="1"/>
                    <line x1="160" y1="160" x2="160" y2="30"  stroke="rgba(255,255,255,.15)" stroke-width="1"/>
                    <line x1="160" y1="160" x2="270" y2="110" stroke="rgba(255,255,255,.15)" stroke-width="1"/>
                    <line x1="160" y1="160" x2="240" y2="230" stroke="rgba(255,255,255,.15)" stroke-width="1"/>
                    <line x1="160" y1="160" x2="80"  y2="240" stroke="rgba(255,255,255,.15)" stroke-width="1"/>
                    <line x1="160" y1="160" x2="50"  y2="120" stroke="rgba(255,255,255,.15)" stroke-width="1"/>
                </svg>
                <?php endif; ?>
            </div>
            <?php endif; /* showVisualPanel */ ?>
        </div>
    </div>
</section>

<!-- KEY HIGHLIGHTS / WHY CHOOSE US -->
<?php
$whySubtext  = trim($pageData['whychoose_subtext'] ?? '') ?: 'Why Choose Us';
$whyHeading  = trim($pageData['whychoose_heading'] ?? '') ?: 'Key Highlights';
$icons       = ['🌍','⚡','📄','📊','🤝','🔬','🏆','🎯','💡','📚'];
$defaultCards = [
    ['title'=>'Global Author Network',    'image'=>'','description'=>'Researchers and scholars from 40+ countries contribute to our growing, diverse community of knowledge creators.'],
    ['title'=>'Fast & Transparent Process','image'=>'','description'=>'We streamline every step — from submission to publication — keeping authors informed and in control at all times.'],
    ['title'=>'Rigorous Peer Review',      'image'=>'','description'=>'Our expert reviewers ensure that only high-quality, credible research reaches the global academic audience.'],
    ['title'=>'Open Access Publishing',    'image'=>'','description'=>'All research is freely accessible — maximising visibility, citations, and real-world impact for every author.'],
    ['title'=>'Author-First Support',      'image'=>'','description'=>'From first submission to final publication, our dedicated support team is here to guide every researcher.'],
    ['title'=>'Multi-Disciplinary Scope',  'image'=>'','description'=>'We publish across science, technology, humanities, and social sciences — welcoming research from every field.'],
];
$cardsToShow = !empty($l2_whychoose) ? $l2_whychoose : $defaultCards;
?>
<section style="background:#f1f4fb;padding-top:80px;padding-bottom:80px;">
    <div class="page-wrap">
        <div class="section-header fade-in">
            <span class="label"><?= htmlspecialchars($whySubtext) ?></span>
            <h2><?= htmlspecialchars($whyHeading) ?></h2>
        </div>
        <div class="highlights-grid">
            <?php foreach ($cardsToShow as $ci => $card): ?>
            <div class="highlight-card fade-in" <?= $ci > 0 ? 'style="transition-delay:' . ($ci * 0.1) . 's"' : '' ?>>
                <?php if (!empty($card['image'])): ?>
                    <img src="<?= htmlspecialchars($card['image']) ?>" alt="<?= htmlspecialchars($card['title'] ?? '') ?>"
                         style="width:48px;height:48px;object-fit:contain;margin-bottom:18px;border-radius:8px;">
                <?php else: ?>
                    <span class="card-icon"><?= $icons[$ci % count($icons)] ?></span>
                <?php endif; ?>
                <div class="card-title"><?= htmlspecialchars($card['title'] ?? '') ?></div>
                <p class="card-text"><?= htmlspecialchars($card['description'] ?? '') ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- MISSION & VISION -->
<?php
$mvSubtext   = trim($pageData['missionvision_subtext'] ?? '') ?: 'Our Foundation';
$mvHeading   = trim($pageData['missionvision_heading'] ?? '') ?: 'Mission & Vision';
$defaultMV = [
    ['title'=>'Empowering Researchers','description'=>'To empower researchers by providing a reliable, accessible, and impactful platform for publishing high-quality research globally — breaking down barriers between knowledge and the world.','button_name'=>'Mission'],
    ['title'=>'A Trusted Global Hub',  'description'=>'To become a trusted global hub for research dissemination, fostering innovation, collaboration, and academic excellence for generations of scholars to come.','button_name'=>'Vision'],
];
$mvCards = !empty($l2_missionvision) ? $l2_missionvision : $defaultMV;
?>
<section class="mv-section">
    <div class="page-wrap">
        <div class="section-header fade-in">
            <span class="label"><?= htmlspecialchars($mvSubtext) ?></span>
            <h2><?= htmlspecialchars($mvHeading) ?></h2>
        </div>
        <div class="mv-grid">
            <?php foreach ($mvCards as $mi => $mv): ?>
            <div class="mv-card fade-in" <?= $mi > 0 ? 'style="transition-delay:' . ($mi * 0.15) . 's"' : '' ?>>
                <?php if (!empty($mv['button_name'])): ?>
                <span class="mv-tag"><?= htmlspecialchars($mv['button_name']) ?></span>
                <?php endif; ?>
                <h3><?= htmlspecialchars($mv['title'] ?? '') ?></h3>
                <p><?= htmlspecialchars($mv['description'] ?? '') ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- CTA BANNER -->
<?php
$ctaTitle = trim($pageData['cta_title']       ?? '') ?: 'Ready to Share Your Research?';
$ctaDesc  = trim($pageData['cta_description'] ?? '') ?: 'Join thousands of researchers already publishing with Commune Global.';
$defaultCTA = [['name'=>'Submit Your Paper','link'=>'#'],['name'=>'Explore Journals','link'=>'#']];
$ctaBtns = !empty($l2_cta_buttons) ? $l2_cta_buttons : $defaultCTA;
?>
<section class="cta-section">
    <h2><?= htmlspecialchars($ctaTitle) ?></h2>
    <p><?= htmlspecialchars($ctaDesc) ?></p>
    <div class="cta-row">
        <?php foreach ($ctaBtns as $bi => $btn): ?>
        <?php if (!empty($btn['name'])): ?>
        <a href="<?= htmlspecialchars($btn['link'] ?? '#') ?>" class="<?= $bi === 0 ? 'btn-primary' : 'btn-outline' ?>">
            <?= htmlspecialchars($btn['name']) ?>
        </a>
        <?php endif; ?>
        <?php endforeach; ?>
    </div>
</section>

<script>
const observer = new IntersectionObserver(
    entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }),
    { threshold: 0.12 }
);
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>

<?php else: ?>
<div style="text-align:center;padding:8rem 2rem;font-family:'DM Sans',sans-serif;">
    <div style="font-size:5rem;margin-bottom:1.5rem;opacity:.2;">⚠</div>
    <h2 style="font-size:2rem;font-weight:700;color:#0d1f4e;margin-bottom:.75rem;">Page Not Found</h2>
    <p style="color:#6b7589;margin-bottom:2rem;">The page <code style="background:#f1f4fb;padding:.2rem .5rem;border-radius:4px;"><?= htmlspecialchars($slug) ?></code> doesn't exist or hasn't been published.</p>
    <a href="/" style="display:inline-flex;align-items:center;gap:.5rem;background:#e8a842;color:#0d1f4e;padding:.875rem 2rem;border-radius:50px;font-weight:600;text-decoration:none;">← Back to Home</a>
</div>
<?php endif; ?>

<?php endif; /* end layout2 */ ?>

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