---
// src/layouts/PostLayout.astro
import { getHeadings } from '../utils/getHeadings'; // Asumimos que crearemos esta utilidad
import RelatedPosts from '../components/PostsRelacionados.astro'; // Componente para posts relacionados
import Navbar from '../components/Navbar.astro';

const { frontmatter, content } = Astro.props;
const headings = getHeadings(content);

const description = frontmatter.descripcion;

// URLs para compartir en redes sociales
const shareUrl = new URL(Astro.url.pathname, Astro.site).toString();
const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
const twitterShareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(frontmatter.title)}`;
const linkedinShareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(frontmatter.title)}`;
---

<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{frontmatter.title} - Ecobjetivos</title>
    <meta name="description" content={description}>
    <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).toString()}>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="article">
    <meta property="og:url" content={Astro.url}>
    <meta property="og:title" content={frontmatter.title}>
    <meta property="og:description" content={description}>
    <meta property="og:image" content={frontmatter.image && new URL(frontmatter.image, Astro.site)}>

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content={Astro.url}>
    <meta property="twitter:title" content={frontmatter.title}>
    <meta property="twitter:description" content={description}>
    <meta property="twitter:image" content={frontmatter.image && new URL(frontmatter.image, Astro.site)}>

    <!-- Structured Data for Google -->
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            "headline": "${frontmatter.titulo}",
            "image": "${frontmatter.imagen && new URL(frontmatter.imagen, Astro.site)}",
            "datePublished": "${frontmatter.fecha}",
            "dateModified": "${frontmatter.lastModified || frontmatter.fecha}",
            "author": {
                "@type": "Person",
                "name": "${frontmatter.autor}"
            },
            "publisher": {
                "@type": "Organization",
                "name": "Ecobjetivos",
                "logo": {
                    "@type": "ImageObject",
                    "url": "${new URL('/logo.png', Astro.site)}"
                }
            },
            "description": "${description}"
        }
    </script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
        }
        .post-header {
            background-color: #4CAF50;
            color: white;
            padding: 2rem 0;
        }
        .post-content {
            font-size: 1.1rem;
        }
        .post-content img {
            max-width: 100%;
            height: auto;
            margin: 1.5rem 0;
        }
        .post-meta {
            font-size: 0.9rem;
            color: #666;
        }
        blockquote {
            background-color: #f9f9f9;
            border-left: 5px solid #4CAF50;
            padding: 1rem;
            margin: 1rem 0;
            font-style: italic;
        }
        .table-of-contents {
            background-color: #f3f3f3;
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 2rem;
        }
        .table-of-contents ul {
            list-style-type: none;
            padding-left: 0;
        }
        .table-of-contents ul ul {
            padding-left: 1rem;
        }

        .table-of-contents {
            background-color: #f3f3f3;
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 2rem;
        }
        .table-of-contents ul {
            list-style-type: none;
            padding-left: 0;
        }
        .table-of-contents ul ul {
            padding-left: 1rem;
        }
        .table-of-contents a {
            color: #333;
            text-decoration: none;
        }
        .table-of-contents a:hover {
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <Navbar posts="/" proyectos="/" />

    <header class="post-header">
        <div class="container">
            <h1 class="display-4">{frontmatter.title}</h1>
            <p class="post-meta">
                <i class="fas fa-calendar-alt"></i> {new Date(frontmatter.fecha).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})}
                &nbsp;|&nbsp;
                <i class="fas fa-user"></i> {frontmatter.autor}
                {frontmatter.lastModified && (
                    <>&nbsp;|&nbsp;
                    <i class="fas fa-edit"></i> Última actualización: {new Date(frontmatter.lastModified).toLocaleDateString('es-ES', {year: 'numeric', month: 'long', day: 'numeric'})}</>
                )}
            </p>
        </div>
    </header>

    <main class="container my-5">
        <div class="row">
            <div class="col-lg-8">
                <article class="post-content">
                    <slot />
                </article>
            </div>
            <div class="col-lg-4">
                <aside class="sticky-top" style="top: 2rem;">
                    <div class="table-of-contents">
                        <h4>Contenido</h4>
                        <ul>
                            {headings.map(heading => (
                                <li style={`margin-left: ${(heading.depth - 1) * 1}rem`}>
                                    <a href={`#${heading.slug}`}>{heading.text}</a>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">Sobre el autor</h5>
                            <p class="card-text">{frontmatter.authorBio}</p>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Compartir</h5>
                            <a href={facebookShareUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary me-2"><i class="fab fa-facebook-f"></i></a>
                            <a href={twitterShareUrl} target="_blank" rel="noopener noreferrer" class="btn btn-info me-2"><i class="fab fa-twitter"></i></a>
                            <a href={linkedinShareUrl} target="_blank" rel="noopener noreferrer" class="btn btn-secondary"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </aside>
            </div>
        </div>

        <RelatedPosts currentPost={frontmatter} />
    </main>

    <footer class="bg-dark text-white py-4">
        <!-- ... (contenido del footer) ... -->
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>