<?php
$coverImage = getPostImageUrl($post, 'default');
$datePublished = !empty($post->created_at) ? date(DATE_ATOM, strtotime($post->created_at)) : date(DATE_ATOM);
$dateModified = !empty($post->updated_at) ? date(DATE_ATOM, strtotime($post->updated_at)) : $datePublished;
$canonicalUrl = generatePostUrl($post);
?>
<!doctype html>
<html amp lang="<?= $activeLang->short_form ?? 'en' ?>">
<head>
    <meta charset="utf-8">
    <title><?= esc($title); ?></title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <meta name="description" content="<?= esc($description); ?>">
    <!-- Canonical point towards your non-AMP page -->
    <link rel="canonical" href="<?= esc($canonicalUrl); ?>">
    
    <!-- JSON-LD -->
    <?= $jsonLdScript ?? '' ?>

    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- Ad Support -->
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;700&display=swap" rel="stylesheet">

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    
    <style amp-custom>
        body { font-family: 'Mukta', sans-serif; background-color: #f8f9fa; color: #333; margin: 0; padding: 0; line-height: 1.6; }
        a { text-decoration: none; color: #0d6efd; }
        .header { background: #fff; padding: 15px 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; }
        .container { max-width: 800px; margin: 0 auto; padding: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.05); margin-top: 20px; border-radius: 8px; }
        .category-badge { display: inline-block; background-color: <?= esc($post->cat_color ?? '#e91e63'); ?>; color: #fff; padding: 4px 12px; border-radius: 4px; font-size: 14px; font-weight: bold; margin-bottom: 15px; }
        .post-title { font-size: 28px; font-weight: 700; margin: 0 0 15px 0; line-height: 1.3; color: #111; }
        .post-summary { font-size: 18px; color: #666; margin: 0 0 20px 0; font-weight: 400; line-height: 1.5; }
        .post-meta { display: flex; align-items: center; gap: 15px; font-size: 14px; color: #888; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 25px; }
        .post-meta .author-img { border-radius: 50%; object-fit: cover; margin-right: 8px; }
        .post-meta .author-name { font-weight: bold; color: #333; }
        .post-image { margin: 0 -20px 25px -20px; }
        .post-content { font-size: 17px; color: #333; }
        .post-content p { margin-bottom: 20px; }
        .post-content img { max-width: 100%; height: auto; border-radius: 6px; }
        .post-content iframe { max-width: 100%; }
        .tags-area { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
        .tag-btn { display: inline-block; background: #f1f1f1; color: #555; padding: 6px 15px; border-radius: 20px; margin: 0 5px 10px 0; font-size: 14px; }
        .footer { text-align: center; padding: 30px 20px; font-size: 14px; color: #999; margin-top: 30px; background: #fff; }
        .read-original-btn { display: block; width: 100%; text-align: center; background: #222; color: #fff; padding: 15px; border-radius: 6px; font-weight: bold; font-size: 16px; margin-top: 30px; }
    </style>
</head>
<body>

    <header class="header">
        <a href="<?= base_url(); ?>">
            <amp-img src="<?= getLogo(); ?>" width="160" height="50" layout="fixed" alt="Logo"></amp-img>
        </a>
    </header>

    <div class="container">
        <a href="<?= generateCategoryUrl($post); ?>">
            <span class="category-badge"><?= esc($post->cat_name); ?></span>
        </a>

        <h1 class="post-title"><?= esc($post->title); ?></h1>
        
        <?php if (!empty($post->summary)): ?>
            <h2 class="post-summary"><?= esc($post->summary); ?></h2>
        <?php endif; ?>

        <div class="post-meta">
            <div style="display: flex; align-items: center;">
                <amp-img src="<?= getUserAvatar($postUser->avatar, $postUser->storage_avatar); ?>" alt="<?= esc($postUser->username); ?>" width="32" height="32" class="author-img" layout="fixed"></amp-img>
                <span class="author-name"><?= esc($postUser->username); ?></span>
            </div>
            <div>
                <?= formatDateClient($post->created_at); ?>
            </div>
        </div>

        <?php if (!empty($coverImage)): ?>
        <div class="post-image">
            <amp-img src="<?= $coverImage; ?>" width="800" height="450" layout="responsive" alt="<?= esc($post->title); ?>"></amp-img>
        </div>
        <?php endif; ?>

        <!-- AMP Ad Slot Top (Replace with your actual AMP Ad code if needed) -->
        <?php if(!empty($baseSettings->adsense_activation_code)): ?>
            <div style="margin-bottom: 20px; text-align:center;">
                 <!-- You can place amp-ad here -->
            </div>
        <?php endif; ?>

        <div class="post-content">
            <?php
               // Clean the content to make it AMP compatible (Removing forbidden tags/styles)
               $content = $post->content;
               $content = preg_replace('/style="[^"]*"/i', '', $content); // Remove inline styles
               $content = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', "", $content); // Remove scripts
               $content = str_replace('<img ', '<amp-img layout="responsive" width="600" height="400" ', $content); // Convert img to amp-img
               $content = str_replace('<iframe ', '<amp-iframe layout="responsive" width="600" height="400" sandbox="allow-scripts allow-same-origin allow-popups" ', $content);
               $content = str_replace('</iframe>', '</amp-iframe>', $content);
               echo $content;
            ?>
        </div>

        <?php if (!empty($postTags)): ?>
        <div class="tags-area">
            <?php foreach ($postTags as $tag) : ?>
                <a href="<?= generateTagURL($tag->tag_slug); ?>" class="tag-btn"><?= esc($tag->tag); ?></a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <a href="<?= esc($canonicalUrl); ?>" class="read-original-btn">Read full article with Comments</a>

    </div>

    <footer class="footer">
        &copy; <?= date('Y'); ?> <?= esc($baseSettings->site_title ?? 'My Site'); ?>. All Rights Reserved.
    </footer>

</body>
</html>