<?php
if (!isset($recommendedStories) || empty($recommendedStories)) {
    $tempModel = new \App\Models\WebStoryModel();
    if (isset($story) && !empty($story)) {
        $recommendedStories = $tempModel->getRecommendedStories($story->lang_id, $story->id, 4);
    } else {
        $recommendedStories = [];
    }
}

$coverImage = '';
if (!empty($story->cover_image)) {
    if (strpos($story->cover_image, 'http') === 0) {
        $coverImage = $story->cover_image;
    } else {
        $coverImage = base_url($story->cover_image);
    }
}

$datePublished = !empty($story->created_at)
    ? date(DATE_ATOM, strtotime($story->created_at))
    : date(DATE_ATOM);

$dateModified = !empty($story->updated_at)
    ? date(DATE_ATOM, strtotime($story->updated_at))
    : $datePublished;
?>
<!doctype html>
<html amp lang="<?= $activeLang->short_form ?? 'en' ?>">
<head>
    <meta charset="utf-8">
    <title><?= esc($story->title); ?> - <?= esc($settings->site_title ?? ''); ?></title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <?php if ($story->visibility == 1): ?>
    <meta name="robots" content="index, follow, max-image-preview:large">
    <?php else: ?>
    <meta name="robots" content="noindex, nofollow">
    <?php endif; ?>

    <meta name="description" content="<?= esc($story->summary); ?>">
    <link rel="canonical" href="<?= langBaseUrl('web-stories/' . $story->slug); ?>">
    <link rel="preload" as="image" href="<?= $coverImage; ?>">
    <link rel="alternate" type="application/rss+xml" title="Web Stories Feed" href="<?= langBaseUrl('rss/web-stories'); ?>">

    <meta property="og:locale" content="<?= $activeLang->short_form ?? 'en'; ?>">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="<?= esc($settings->application_name ?? ''); ?>">
    <meta property="og:title" content="<?= esc($story->title); ?>">
    <meta property="og:description" content="<?= esc($story->summary); ?>">
    <meta property="og:url" content="<?= langBaseUrl('web-stories/' . $story->slug); ?>">
    <meta property="og:image" content="<?= $coverImage; ?>">
    <meta property="article:published_time" content="<?= $story->created_at; ?>">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?= esc($story->title); ?>">
    <meta name="twitter:description" content="<?= esc($story->summary); ?>">
    <meta name="twitter:image" content="<?= $coverImage; ?>">

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "<?= langBaseUrl('web-stories/' . $story->slug); ?>"
      },
      "headline": "<?= esc($story->title); ?>",
      "image": {
        "@type": "ImageObject",
        "url": "<?= esc($coverImage); ?>",
        "width": 720,
        "height": 1280
      },
      "datePublished": "<?= $datePublished; ?>",
      "dateModified": "<?= $dateModified; ?>",
      "author": {
        "@type": "Organization",
        "name": "<?= esc($settings->application_name ?? ''); ?>",
        "url": "<?= langBaseUrl(); ?>"
      },
      "publisher": {
        "@type": "Organization",
        "name": "<?= esc($settings->application_name ?? ''); ?>",
        "logo": {
          "@type": "ImageObject",
          "url": "<?= getLogo(); ?>",
          "width": 600,
          "height": 60
        }
      }
    }
    </script>

    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
    <script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@500;700;800&family=Poppins:wght@500;700;800&display=swap" rel="stylesheet">

    <?php if (!empty($generalSettings->story_header_codes)): ?>
        <?= $generalSettings->story_header_codes; ?>
    <?php endif; ?>

    <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>amp-story{font-family:Mukta,sans-serif;color:#fff}amp-story-page{background:linear-gradient(135deg,#1f1c2c 0,#000 100%)}.bottom-gradient-overlay{width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.5) 35%,transparent 60%)}.amp-story-card{position:absolute;bottom:70px;left:16px;width:calc(100% - 32px);box-sizing:border-box;height:max-content;background:rgba(15,23,42,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:28px;border:1px solid rgba(255,255,255,.15);padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}.story-category{display:inline-block;background:linear-gradient(135deg,#e91e63,#9c27b0);color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:20px;margin-bottom:12px;box-shadow:0 4px 10px rgba(233,30,99,.3)}.title-wrap{position:relative;padding-left:16px;margin-bottom:16px}.left-border-accent{position:absolute;left:0;top:2px;bottom:2px;width:4px;background:linear-gradient(180deg,#38bdf8,#c084fc,#f472b6);border-radius:10px;box-shadow:0 0 15px rgba(192,132,252,.6)}.slide-title{font-size:1.1rem;font-weight:700;line-height:1.25;color:#fff;margin:0;letter-spacing:-.01em}.quote-summary{background:rgba(255,255,255,.05);border-radius:16px;padding:16px 16px 16px 20px;border-right:2px solid rgba(56,189,248,.5);position:relative}.quote-summary::before{content:"“";font-family:Georgia,serif;font-size:3.5rem;position:absolute;top:-10px;left:2px;color:#fff;line-height:1}.summary-text{font-size:.95rem;line-height:1.5;color:#cbd5e1;margin:0;position:relative;z-index:1}.story-btn{display:flex;align-items:center;justify-content:center;padding:10px 22px;background:#fff;color:#000;font-family:Poppins,sans-serif;font-weight:700;border-radius:30px;text-decoration:none;font-size:.95em;box-shadow:0 4px 15px rgba(0,0,0,.4);margin:0 auto}.link-icon{width:16px;height:16px;margin-right:6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");background-size:cover}.end-screen-wrapper{background:#111;padding:25px;height:100%;display:flex;flex-direction:column;justify-content:center}.end-title{text-align:center;font-size:1.5em;font-weight:800;margin-bottom:25px;color:#d6fd56;text-transform:uppercase}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:30px}.story-card{display:block;text-decoration:none;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:9/13;background:#222;border:1px solid #333}.story-card amp-img{width:100%;height:100%;object-fit:cover;opacity:.85}.story-card-content{position:absolute;bottom:0;left:0;right:0;padding:40px 10px 15px 10px;background:linear-gradient(to top,rgba(0,0,0,.9) 10%,transparent)}.story-card-title{color:#fff;font-size:.9em;font-weight:600;line-height:1.3;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.btn-explore{display:block;width:fit-content;margin:0 auto;border:2px solid #fff;color:#000;background:#fff;padding:12px 35px;border-radius:30px;text-decoration:none;font-weight:700;font-size:.95em;text-transform:uppercase}.top-header-area{position:absolute;top:25px;left:20px;display:flex;align-items:center;gap:12px;z-index:10}.slide-counter{position:absolute;top:25px;left:0;color:#d6fd56;text-shadow:1px 1px 3px #000;border:1px solid rgba(214,253,86,.3);font-weight:800;font-size:1.1rem;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10;font-family:Poppins,sans-serif;box-shadow:0 4px 12px rgba(0,0,0,.7);line-height:1}.story-logo{position:absolute;top:25px;right:25px;padding:5px 10px;border-radius:20px;display:flex;align-items:center;justify-content:center;z-index:10;height:max-content;border:1px solid rgba(255,255,255,.3);box-shadow:0 4px 10px rgba(0,0,0,.2);background:rgba(255,255,255,.15);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}</style>
</head>
<body>
    <amp-story standalone
        title="<?= esc($story->title); ?>"
        publisher="<?= esc($settings->application_name ?? 'Web Story'); ?>"
        publisher-logo-src="<?= getLogo(); ?>" 
        poster-portrait-src="<?= $coverImage; ?>">
        
        <?php if (!empty($generalSettings->story_analytics_codes)): ?>
            <?= $generalSettings->story_analytics_codes; ?>
        <?php endif; ?>

        <?php if (!empty($generalSettings->story_ad_codes)): ?>
            <?= $generalSettings->story_ad_codes; ?>
        <?php endif; ?>
        
        <?php 
        $content = json_decode($story->story_content);
        if(!empty($content)): 
            foreach($content as $index => $slide): 
                $media = $slide->image ?? '';
                if (strpos($media, 'http') !== 0) {
                    $media = base_url($media);
                }
                
                $isVideo = (strpos($media, '.mp4') !== false || strpos($media, '.webm') !== false);
                $videoId = "video" . $index;
                $autoAdvance = $isVideo ? $videoId : "7s";
        ?>
            <amp-story-page id="page<?= $index; ?>" auto-advance-after="<?= $autoAdvance; ?>">
                
                <amp-story-grid-layer template="fill">
                    <?php if($isVideo): ?>
                         <?php 
                             $posterUrl = $story->cover_image ?? '';
                             if (strpos($posterUrl, 'http') === false) {
                                 $posterUrl = base_url($posterUrl);
                             }
                         ?>
                         <amp-video id="<?= $videoId; ?>" autoplay width="720" height="1280" poster="<?= $posterUrl; ?>" layout="responsive" object-fit="cover">
                             <source src="<?= $media; ?>" type="video/mp4">
                         </amp-video>
                     <?php else: ?>
                        <amp-img src="<?= $media; ?>" width="720" height="1280" layout="responsive" object-fit="cover" animate-in="zoom-in" animate-in-duration="10s"></amp-img>
                    <?php endif; ?>
                </amp-story-grid-layer>

                <amp-story-grid-layer template="vertical">
                    <div class="top-header-area" animate-in="fade-in" animate-in-duration="0.5s">
                        <div class="slide-counter">
                            <?= $index + 1; ?>
                        </div>
                        
                        <div class="story-logo">
                            <amp-img src="<?= getLogo(); ?>" width="80" height="30" layout="fixed" alt="Site Logo"></amp-img>
                        </div>
                    </div>
                </amp-story-grid-layer>

                <?php if(!empty(trim($slide->heading ?? '')) || !empty(trim($slide->description ?? ''))): ?>
                
                    <amp-story-grid-layer template="fill">
                        <div class="bottom-gradient-overlay"></div>
                    </amp-story-grid-layer>
                
                    <amp-story-grid-layer template="vertical">
                        <div class="amp-story-card" animate-in="fly-in-bottom" animate-in-duration="0.6s">
                            
                            <div class="story-category">
                                <?= !empty($story->category_name) ? esc($story->category_name) : 'Trending'; ?>
                            </div>
                
                            <?php if(!empty(trim($slide->heading ?? ''))): ?>
                            <div class="title-wrap">
                                <div class="left-border-accent"></div>
                                <h2 class="slide-title"><?= esc($slide->heading); ?></h2>
                            </div>
                            <?php endif; ?>
                
                            <?php if(!empty(trim($slide->description ?? ''))): ?>
                            <div class="quote-summary">
                                <p class="summary-text"><?= esc($slide->description); ?></p>
                            </div>
                            <?php endif; ?>
                
                        </div>
                    </amp-story-grid-layer>
                
                <?php endif; ?>
                
                <?php if(!empty($slide->link)): ?>
                <amp-story-page-outlink layout="nodisplay">
                    <a class="story-btn" href="<?= $slide->link; ?>">
                        <div class="link-icon"></div> Read More
                    </a>
                </amp-story-page-outlink>
                <?php endif; ?>

            </amp-story-page>
        <?php endforeach; endif; ?>

        <amp-story-page id="page-end">
            <amp-story-grid-layer template="fill">
                <div class="end-screen-wrapper">
                    <div class="end-title"><?= trans('top_stories') ?? 'Top Stories'; ?></div>
                    
                    <div class="story-grid">
                        <?php if (!empty($recommendedStories)): ?>
                            <?php 
                            $count = 0;
                            foreach ($recommendedStories as $item): 
                                if($count >= 4) break; 
                                $img = $item->cover_image;
                                if(strpos($img, 'http') === false) {
                                    $img = base_url($img);
                                }
                            ?>
                            <a href="<?= langBaseUrl('web-stories/' . $item->slug); ?>" class="story-card">
                                <amp-img src="<?= $img; ?>" layout="fill"></amp-img>
                                <div class="story-card-content">
                                    <div class="story-card-title"><?= esc(character_limiter($item->title, 45)); ?></div>
                                </div>
                            </a>
                            <?php $count++; endforeach; ?>
                        <?php else: ?>
                            <div style="grid-column: span 2; text-align:center; color:#999; margin-top:20px;">
                                <p>No more stories available.</p>
                            </div>
                        <?php endif; ?>
                    </div>

                    <a href="<?= langBaseUrl('web-stories'); ?>" class="btn-explore"><?= trans('explore_stories') ?? 'Explore Stories'; ?></a>
                </div>
            </amp-story-grid-layer>
        </amp-story-page>

    </amp-story>
</body>
</html>