<?php

$descripcion = '
El bucador Catálogo de cine mexicano es una iniciativa del Instituto Mexicano de Cinematografía que tiene como objetivo poner a disposición del público en general y especializado una herramienta de consulta con 
información detallada de las películas mexicanas registradas en la base de datos del IMCINE o del Sistema de Información Cultural (SIC) de la Secretaria de Cultura de México en lo relativo a la cinematografía.

';

/*
|--------------------------------------------------------------------------
| Película destacada
|--------------------------------------------------------------------------
| Por ahora se establecen valores predeterminados.
| Después podemos obtener esta información directamente desde la API.
*/

$peliculaDestacada = [
    'id' => null,
    'titulo' => 'Descubre el cine mexicano',
    'descripcion' => 'Historias, creadoras, creadores y producciones que forman parte de la memoria cinematográfica de México.',
    'imagen' => 'assets/img/cinema-portada.png',
    'anio' => 'Cinema México',
    'pais' => 'México'
];

?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">

    <title>Catálogo de Cine Mexicano </title>

    <meta
        name="description"
        content="Explora películas mexicanas, fichas técnicas, imágenes, reparto y datos cinematográficos."
    >
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="assets/css/cinema.css">

    <!--<link
        href="https://framework-gb.cdn.gob.mx/gm/v3/assets/styles/main.css"
        rel="stylesheet"
    >-->
</head>

<body>

<div class="cm-page cm-home-page">

    <div class="cm-layout">

        <?php include __DIR__ . '/partials/sidebar.php'; ?>

        <main class="cm-content cm-home-content">

            <!-- HERO PRINCIPAL -->
            <section
                class="cm-home-hero"
                style="
                    --cm-home-background:
                    linear-gradient(
                        90deg,
                        rgba(5, 8, 9, 0.98) 0%,
                        rgba(5, 8, 9, 0.88) 38%,
                        rgba(5, 8, 9, 0.35) 72%,
                        rgba(5, 8, 9, 0.75) 100%
                    ),
                    linear-gradient(
                        0deg,
                        rgba(5, 8, 9, 1) 0%,
                        transparent 45%
                    ),
                    url('<?= htmlspecialchars(
                        $peliculaDestacada['imagen'],
                        ENT_QUOTES,
                        'UTF-8'
                    ) ?>');
                "
            >

                <div class="cm-home-hero-content">

                    <div class="cm-home-eyebrow">
                        <span class="cm-home-eyebrow-line"></span>
                        Plataforma cinematográfica
                    </div>

                    <h1 class="cm-home-title">
                        Catálogo de Cine Mexicano
                        
                    </h1>

                    <p class="cm-home-subtitle">
                        <?= htmlspecialchars(
                            $peliculaDestacada['descripcion'],
                            ENT_QUOTES,
                            'UTF-8'
                        ) ?>
                    </p>

                    <div class="cm-home-meta">
                        <span>
                            <?= htmlspecialchars(
                                $peliculaDestacada['anio'],
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>
                        </span>

                        <span class="cm-home-meta-dot"></span>

                        <span>
                            <?= htmlspecialchars(
                                $peliculaDestacada['pais'],
                                ENT_QUOTES,
                                'UTF-8'
                            ) ?>
                        </span>

                        <span class="cm-home-meta-dot"></span>

                        <span>Cinematografía nacional</span>
                    </div>

                    <div class="cm-home-actions">

                        <a
                            href="peliculas.php"
                            class="cm-btn cm-btn-primary"
                        >
                            <span class="cm-btn-icon">▶</span>
                            Explorar películas
                        </a>

                        <a
                            href="#conoce-cinema"
                            class="cm-btn cm-btn-outline"
                        >
                            Conocer la plataforma
                        </a>

                    </div>

                </div>

                <div class="cm-home-hero-decoration">
                    <span>CINE</span>
                    <span>CULTURA</span>
                    <span>MEMORIA</span>
                </div>

            </section>


            <!-- ACCESOS PRINCIPALES -->
            <section class="cm-home-navigation">

                <a href="peliculas.php" class="cm-home-navigation-card">

                    <div class="cm-home-navigation-icon">
                        <span>🎬</span>
                    </div>

                    <div class="cm-home-navigation-text">
                        <span class="cm-home-navigation-label">
                            Catálogo
                        </span>

                        <h2>Películas mexicanas</h2>

                        <p>
                            Consulta producciones, títulos, géneros,
                            años y fichas cinematográficas.
                        </p>
                    </div>

                    <span class="cm-home-navigation-arrow">→</span>

                </a>


                <a href="ar-pelicula.php" class="cm-home-navigation-card">

                    <div class="cm-home-navigation-icon">
                        <span>◉</span>
                    </div>

                    <div class="cm-home-navigation-text">
                        <span class="cm-home-navigation-label">
                            Experiencia
                        </span>

                        <h2>Realidad aumentada</h2>

                        <p>
                            Descubre contenido cinematográfico mediante
                            las experiencias interactivas de Cinema México.
                        </p>
                    </div>

                    <span class="cm-home-navigation-arrow">→</span>

                </a>

            </section>


            <!-- DESCRIPCIÓN -->
            <section
                class="cm-home-about"
                id="conoce-cinema"
            >

                <div class="cm-home-section-heading">

                    <span class="cm-home-section-number">01</span>

                    <div>
                        <span class="cm-home-section-kicker">
                            Sobre el proyecto
                        </span>

                        <h2>
                            Una ventana al cine de México
                        </h2>
                    </div>

                </div>

                <div class="cm-home-about-grid">

                    <div class="cm-home-about-description">

                        <?php
                        $parrafos = preg_split(
                            '/\R{2,}/',
                            trim($descripcion)
                        );
                        ?>

                        <?php foreach ($parrafos as $parrafo): ?>
                            <p>
                                <?= nl2br(
                                    htmlspecialchars(
                                        trim($parrafo),
                                        ENT_QUOTES,
                                        'UTF-8'
                                    )
                                ) ?>
                            </p>
                        <?php endforeach; ?>

                    </div>


                    <aside class="cm-home-about-card">

                        <span class="cm-home-about-card-label">
                            Información disponible
                        </span>

                        <ul class="cm-home-feature-list">

                            <li>
                                <span class="cm-home-feature-icon">01</span>

                                <div>
                                    <strong>Fichas técnicas</strong>
                                    <small>
                                        Dirección, producción, guion,
                                        fotografía y otros créditos.
                                    </small>
                                </div>
                            </li>

                            <li>
                                <span class="cm-home-feature-icon">02</span>

                                <div>
                                    <strong>Material visual</strong>
                                    <small>
                                        Imágenes y galerías asociadas
                                        a cada producción.
                                    </small>
                                </div>
                            </li>

                            <li>
                                <span class="cm-home-feature-icon">03</span>

                                <div>
                                    <strong>Sinopsis y reparto</strong>
                                    <small>
                                        Información narrativa y personas
                                        participantes.
                                    </small>
                                </div>
                            </li>

                        </ul>

                    </aside>

                </div>

            </section>


            <!-- CIERRE -->
            <section class="cm-home-closing">

                <div class="cm-home-closing-copy">

                    <span class="cm-home-section-kicker">
                        Explora el catálogo
                    </span>

                    <h2>
                        Cada película cuenta una parte de nuestra historia
                    </h2>

                    <p>
                        Conoce las obras que forman parte del patrimonio
                        y la producción cinematográfica mexicana.
                    </p>

                </div>

                <a
                    href="peliculas.php"
                    class="cm-btn cm-btn-primary"
                >
                    Ver todas las películas
                    <span>→</span>
                </a>

            </section>

        </main>

    </div>

</div>

<!--<script
    src="https://framework-gb.cdn.gob.mx/gm/v3/assets/js/gobmx.js"
></script>-->

</body>
</html>