<?php
/**
 * Dynamic Blog Hero Section Component
 * 
 * Required Variables:
 * $blogImage    - URL to hero background image
 * $blogTitle    - Blog post title
 * $publishDate  - Publication date (e.g., "May 12, 2026")
 * $readTime     - Reading time (e.g., "8 Minutes")
 * $category     - Blog category (e.g., "Business Systems")
 * $backLink     - Link to return to blogs (optional, defaults to "blog.php")
 */

// Validate required variables
$requiredVars = ['blogImage', 'blogTitle', 'publishDate', 'readTime', 'category'];
$missingVars = [];

foreach ($requiredVars as $var) {
    if (empty($$var)) {
        $missingVars[] = $var;
    }
}

// Show error if variables are missing
if (!empty($missingVars)) {
    echo '<div class="w-full bg-yellow-50 border border-yellow-200 rounded-lg p-6 mx-auto my-8">';
    echo '<h3 class="text-lg font-semibold text-yellow-800 mb-2">⚠️ Blog Hero Component - Missing Variables</h3>';
    echo '<p class="text-yellow-700 mb-3">Please set the following variables before including this component:</p>';
    echo '<ul class="list-disc list-inside text-yellow-700 space-y-1 mb-4">';
    foreach ($missingVars as $var) {
        echo '<li><code class="bg-yellow-100 px-2 py-1 rounded">$' . htmlspecialchars($var) . '</code></li>';
    }
    echo '</ul>';
    echo '<p class="text-sm text-yellow-600"><strong>Usage Example:</strong></p>';
    echo '<pre class="bg-yellow-100 p-3 rounded mt-2 text-xs overflow-x-auto"><code>$blogImage = "https://example.com/image.jpg";
$blogTitle = "Your Blog Title Here";
$publishDate = "June 3, 2026";
$readTime = "5 Minutes";
$category = "Your Category";
include "../components/BlogDetails/blog-head.php";</code></pre>';
    echo '</div>';
    return;
}

$backLink = $backLink ?? 'blog.php';
?>

<section class="relative min-h-[60dvh] lg:min-h-[70dvh] w-full overflow-hidden">

    <div class="absolute inset-0 z-0">
        <div class="absolute inset-0 bg-[#000000]/55 z-10"></div>
        <img src="<?php echo htmlspecialchars($blogImage); ?>"
            class="w-full h-full object-cover object-center"
            alt="<?php echo htmlspecialchars($blogTitle); ?>" />
    </div>

    <div class="relative z-20 h-full w-full max-w-[1300px] mx-auto px-6 md:px-16 pt-32 lg:pt-40 pb-16">

        <div class="flex items-center justify-between w-full mb-8" data-aos="fade-down">
            <a href="<?php echo htmlspecialchars($backLink); ?>" class="group flex items-center gap-3 text-white/80 hover:text-white transition-all duration-300">
                <div class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center group-hover:border-brandOrange group-hover:bg-brandOrange transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition-transform group-hover:-translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="19" y1="12" x2="5" y2="12"></line>
                        <polyline points="12 19 5 12 12 5"></polyline>
                    </svg>
                </div>
                <span class="font-mono text-[11px] font-semibold tracking-[0.2em] uppercase">Back to Blogs</span>
            </a>
        </div>

        <div class="flex flex-col items-start text-left max-w-4xl">
            <h1 data-aos="fade-right" data-aos-delay="200"
                class="text-3xl md:text-[2.75rem] lg:text-5xl font-[400] tracking-[-0.04em] leading-[1.08] text-white mb-8">
                <?php echo htmlspecialchars($blogTitle); ?>
            </h1>

            <div class="flex flex-wrap items-center gap-6 md:gap-10 py-6 border-t border-white/10 w-full" data-aos="fade-up" data-aos-delay="400">

                <div class="flex items-center gap-3">
                    <i class="ri-calendar-line text-brandOrange text-lg"></i>
                    <div class="flex flex-col">
                        <span class="font-mono text-[10px] uppercase tracking-widest text-white/40">Published</span>
                        <span class="text-white font-[400] text-sm"><?php echo htmlspecialchars($publishDate); ?></span>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <i class="ri-time-line text-brandOrange text-lg"></i>
                    <div class="flex flex-col">
                        <span class="font-mono text-[10px] uppercase tracking-widest text-white/40">Read Time</span>
                        <span class="text-white font-[400] text-sm"><?php echo htmlspecialchars($readTime); ?></span>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <i class="ri-building-4-line text-brandOrange text-lg"></i>
                    <div class="flex flex-col">
                        <span class="font-mono text-[10px] uppercase tracking-widest text-white/40">Category</span>
                        <span class="text-white font-[400] text-sm"><?php echo htmlspecialchars($category); ?></span>
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>
