<!doctype html>
<html amp lang="tr">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>{{ news.seoTitle|default(news.title) }} | Haber</title>
    <link rel="canonical" href="{{ url('frontend_news_detail', {slug: news.slug}) }}">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="description" content="{{ news.seoDescription|default(news.spot|default('')|striptags|slice(0, 160)) }}">

    {# AMP Boilerplate CSS #}
    <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;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>

    {# AMP Social Share #}
    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

    {# AMP Analytics #}
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

    {# Structured Data - NewsArticle Schema #}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "{{ url('frontend_news_detail', {slug: news.slug}) }}"
        },
        "headline": "{{ news.title|e('js') }}",
        "description": "{{ news.spot|default('')|striptags|slice(0, 200)|e('js') }}",
        {% if news.featuredImage %}
        "image": {
            "@type": "ImageObject",
            "url": "{{ news.featuredImage|media_url }}",
            "width": 1200,
            "height": 630
        },
        {% endif %}
        "datePublished": "{{ news.publishedAt ? news.publishedAt|date('c') : news.createdAt|date('c') }}",
        "dateModified": "{{ news.updatedAt|date('c') }}",
        {% if news.author %}
        "author": {
            "@type": "Person",
            "name": "{{ news.author.name|e('js') }}"
        },
        {% endif %}
        "publisher": {
            "@type": "Organization",
            "name": "Haber",
            "logo": {
                "@type": "ImageObject",
                "url": "",
                "width": 200,
                "height": 60
            }
        }
    }
    </script>

    {# Custom AMP Styles #}
    <style amp-custom>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            margin: 0;
            padding: 0;
            color: #1a1a1a;
            background-color: #ffffff;
            line-height: 1.6;
        }

        /* Header */
        .amp-header {
            background-color: #dc2626;
            color: #ffffff;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .amp-header a {
            color: #ffffff;
            text-decoration: none;
            font-weight: 900;
            font-size: 20px;
            letter-spacing: -0.5px;
        }
        .amp-header .canonical-link {
            font-size: 12px;
            font-weight: 400;
            opacity: 0.9;
        }

        /* Breadcrumb */
        .amp-breadcrumb {
            padding: 12px 16px;
            font-size: 13px;
            color: #6b7280;
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
        }
        .amp-breadcrumb a {
            color: #dc2626;
            text-decoration: none;
        }

        /* Article */
        .amp-article {
            max-width: 680px;
            margin: 0 auto;
            padding: 0 16px;
        }

        .amp-category {
            display: inline-block;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #ffffff;
            background-color: #dc2626;
            border-radius: 20px;
            margin-top: 20px;
            margin-bottom: 12px;
            text-decoration: none;
        }

        .amp-title {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.2;
            margin: 0 0 16px 0;
            color: #111827;
        }

        .amp-spot {
            font-size: 17px;
            color: #4b5563;
            line-height: 1.5;
            margin-bottom: 20px;
            padding-left: 16px;
            border-left: 3px solid #dc2626;
            font-style: italic;
        }

        .amp-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            font-size: 13px;
            color: #6b7280;
            padding-bottom: 16px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e5e7eb;
        }

        .amp-featured-image {
            margin: 0 -16px 8px -16px;
        }
        .amp-caption {
            font-size: 12px;
            color: #9ca3af;
            padding: 4px 16px 16px 16px;
            font-style: italic;
        }

        /* Content */
        .amp-content {
            font-size: 17px;
            line-height: 1.8;
            color: #374151;
            margin-bottom: 24px;
        }
        .amp-content p {
            margin: 0 0 16px 0;
        }
        .amp-content h2 {
            font-size: 22px;
            font-weight: 700;
            margin: 28px 0 12px 0;
            color: #111827;
        }
        .amp-content h3 {
            font-size: 19px;
            font-weight: 700;
            margin: 24px 0 10px 0;
            color: #111827;
        }
        .amp-content a {
            color: #dc2626;
            text-decoration: underline;
        }
        .amp-content blockquote {
            margin: 20px 0;
            padding: 16px 20px;
            border-left: 4px solid #dc2626;
            background: #f9fafb;
            font-style: italic;
            color: #4b5563;
        }
        .amp-content ul, .amp-content ol {
            margin: 16px 0;
            padding-left: 24px;
        }
        .amp-content li {
            margin-bottom: 8px;
        }

        /* Tags */
        .amp-tags {
            margin-bottom: 24px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .amp-tag {
            display: inline-block;
            padding: 4px 12px;
            font-size: 13px;
            background: #f3f4f6;
            color: #4b5563;
            border-radius: 20px;
            text-decoration: none;
        }

        /* Share */
        .amp-share-section {
            padding: 16px 0;
            margin-bottom: 24px;
            border-top: 1px solid #e5e7eb;
            border-bottom: 1px solid #e5e7eb;
        }
        .amp-share-label {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 12px;
        }

        /* Related News */
        .amp-related {
            margin-bottom: 32px;
        }
        .amp-related-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 16px;
            color: #111827;
            padding-bottom: 8px;
            border-bottom: 2px solid #dc2626;
            display: inline-block;
        }
        .amp-related-item {
            display: flex;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f3f4f6;
            text-decoration: none;
            color: inherit;
        }
        .amp-related-item:last-child {
            border-bottom: none;
        }
        .amp-related-item-title {
            font-size: 15px;
            font-weight: 600;
            color: #111827;
            line-height: 1.3;
        }
        .amp-related-item-date {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 4px;
        }

        /* Footer */
        .amp-footer {
            background: #111827;
            color: #9ca3af;
            text-align: center;
            padding: 24px 16px;
            font-size: 13px;
        }
        .amp-footer a {
            color: #dc2626;
            text-decoration: none;
            font-weight: 600;
        }
    </style>
</head>
<body>

    {# AMP Analytics Placeholder #}
    <amp-analytics type="gtag" data-credentials="include">
        <script type="application/json">
        {
            "vars": {
                "gtag_id": "UA-XXXXX-Y",
                "config": {
                    "UA-XXXXX-Y": {
                        "groups": "default"
                    }
                }
            }
        }
        </script>
    </amp-analytics>

    {# ===== HEADER ===== #}
    <header class="amp-header">
        <a href="{{ url('frontend_home') }}">HABER.</a>
        <a href="{{ url('frontend_news_detail', {slug: news.slug}) }}" class="canonical-link">
            Tam Surum
        </a>
    </header>

    {# ===== BREADCRUMB ===== #}
    <div class="amp-breadcrumb">
        <a href="{{ url('frontend_home') }}">Ana Sayfa</a>
        {% if news.category %}
            &rsaquo; <a href="{{ url('frontend_category', {slug: news.category.slug}) }}">{{ news.category.title }}</a>
        {% endif %}
    </div>

    {# ===== ARTICLE ===== #}
    <article class="amp-article">

        {% if news.category %}
            <a href="{{ url('frontend_category', {slug: news.category.slug}) }}" class="amp-category"
               {% if news.category.color %}style="background-color: {{ news.category.color }}"{% endif %}>
                {{ news.category.title }}
            </a>
        {% endif %}

        <h1 class="amp-title">{{ news.title }}</h1>

        {% if news.spot %}
            <p class="amp-spot">{{ news.spot|striptags }}</p>
        {% endif %}

        <div class="amp-meta">
            {% if news.author %}
                <span>{{ news.author.name }}</span>
            {% endif %}
            {% if news.publishedAt %}
                <span>{{ news.publishedAt|date("d.m.Y H:i") }}</span>
            {% endif %}
            <span>{{ news.viewCount }} goruntulenme</span>
        </div>

        {# Featured Image #}
        {% if news.featuredImage %}
            <div class="amp-featured-image">
                <amp-img src="{{ news.featuredImage|media_url }}"
                         alt="{{ news.title }}"
                         width="1200"
                         height="630"
                         layout="responsive">
                </amp-img>
            </div>
            {% if news.imageCaption %}
                <p class="amp-caption">{{ news.imageCaption }}</p>
            {% endif %}
        {% endif %}

        {# Content - replace <img> tags with <amp-img> #}
        <div class="amp-content">
            {{ news.content|replace({'<img ': '<amp-img layout="responsive" width="800" height="450" '})|raw }}
        </div>

        {# Tags #}
        {% if news.tags|length > 0 %}
            <div class="amp-tags">
                {% for tag in news.tags %}
                    <a href="{{ url('frontend_tag', {slug: tag.slug}) }}" class="amp-tag">
                        #{{ tag.name }}
                    </a>
                {% endfor %}
            </div>
        {% endif %}

        {# Share Buttons #}
        <div class="amp-share-section">
            <div class="amp-share-label">Bu haberi paylas</div>
            <amp-social-share type="facebook"
                              data-param-app_id="YOUR_FB_APP_ID"
                              width="40"
                              height="40">
            </amp-social-share>
            <amp-social-share type="twitter"
                              width="40"
                              height="40">
            </amp-social-share>
            <amp-social-share type="whatsapp"
                              width="40"
                              height="40">
            </amp-social-share>
            <amp-social-share type="email"
                              width="40"
                              height="40">
            </amp-social-share>
        </div>

        {# Related News #}
        {% if relatedNews|length > 0 %}
            <section class="amp-related">
                <h2 class="amp-related-title">Ilgili Haberler</h2>
                {% for related in relatedNews %}
                    <a href="{{ url('frontend_amp_news', {slug: related.slug}) }}" class="amp-related-item">
                        {% if related.featuredImage %}
                            <amp-img src="{{ related.featuredImage|media_url }}"
                                     alt="{{ related.title }}"
                                     width="100"
                                     height="75"
                                     layout="fixed">
                            </amp-img>
                        {% endif %}
                        <div>
                            <div class="amp-related-item-title">{{ related.title }}</div>
                            {% if related.publishedAt %}
                                <div class="amp-related-item-date">{{ related.publishedAt|date("d.m.Y") }}</div>
                            {% endif %}
                        </div>
                    </a>
                {% endfor %}
            </section>
        {% endif %}

    </article>

    {# ===== FOOTER ===== #}
    <footer class="amp-footer">
        <p>&copy; {{ "now"|date("Y") }} <a href="{{ url('frontend_home') }}">Haber</a>. Tum haklari saklidir.</p>
    </footer>

</body>
</html>
