<?php
/**
 * Template for displaying single blog posts
 * Save this file as: single.php
 * Upload to: /wp-content/themes/my-static-page/
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700&display=swap" rel="stylesheet">
    <?php wp_head(); ?>
    <style>
        /* BC Floorball Single Post Styles */
        :root {
            --bc-green: #1B7340;
            --bc-green-dark: #145832;
            --bc-green-light: #2A9B5A;
            --bc-navy: #1E3A5F;
            --bc-navy-dark: #152A45;
            --white: #FFFFFF;
            --off-white: #F8FAF9;
            --gray-100: #F0F4F2;
            --gray-200: #E1E7E4;
            --gray-500: #6B7C74;
            --gray-800: #2D3B35;
            --font-display: 'Bebas Neue', sans-serif;
            --font-heading: 'Barlow Condensed', sans-serif;
            --font-body: 'Barlow', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-body);
            color: var(--gray-800);
            background: var(--off-white);
            line-height: 1.6;
        }

        /* Top Bar */
        .bcf-top-bar {
            background: var(--bc-navy-dark);
            padding: 10px 0;
            font-size: 14px;
        }

        .bcf-top-bar-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(255,255,255,0.7);
        }

        .bcf-top-bar a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            margin-left: 20px;
        }

        .bcf-top-bar a:hover {
            color: var(--white);
        }

        /* Header */
        .bcf-header {
            background: var(--bc-navy);
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .bcf-header-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .bcf-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--white);
        }

        .bcf-logo img {
            height: 50px;
            width: auto;
        }

        .bcf-logo-text {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 24px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .bcf-logo-text span {
            display: block;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.7);
        }

        .bcf-nav {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .bcf-nav a {
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--white);
            text-decoration: none;
            transition: color 0.2s;
        }

        .bcf-nav a:hover {
            color: var(--bc-green-light);
        }

        .bcf-nav-btn {
            background: var(--bc-green) !important;
            padding: 12px 24px !important;
            border-radius: 6px;
        }

        .bcf-nav-btn:hover {
            background: var(--bc-green-dark) !important;
        }

        /* Article Header */
        .bcf-article-header {
            background: linear-gradient(135deg, var(--bc-navy) 0%, var(--bc-navy-dark) 100%);
            padding: 60px 0 80px;
            position: relative;
        }

        .bcf-article-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: radial-gradient(circle at 80% 20%, rgba(27, 115, 64, 0.15) 0%, transparent 50%);
        }

        .bcf-article-header-inner {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 40px;
            position: relative;
            z-index: 2;
        }

        .bcf-article-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .bcf-article-category {
            background: var(--bc-green);
            color: var(--white);
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 6px 14px;
            border-radius: 4px;
            text-decoration: none;
        }

        .bcf-article-category:hover {
            background: var(--bc-green-light);
        }

        .bcf-article-date {
            color: rgba(255,255,255,0.7);
            font-size: 14px;
        }

        .bcf-article-title {
            font-family: var(--font-display);
            font-size: clamp(36px, 5vw, 56px);
            color: var(--white);
            letter-spacing: 1px;
            line-height: 1.1;
            margin: 0;
        }

        /* Featured Image */
        .bcf-featured-image {
            max-width: 900px;
            margin: -40px auto 0;
            padding: 0 40px;
            position: relative;
            z-index: 3;
        }

        .bcf-featured-image img {
            width: 100%;
            height: auto;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
        }

        /* Article Content */
        .bcf-article-content {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 40px;
        }

        .bcf-article-body {
            max-width: 700px;
        }

        .bcf-article-body p {
            font-size: 18px;
            line-height: 1.9;
            color: var(--gray-800);
            margin: 0 0 24px 0;
        }

        .bcf-article-body h2 {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 28px;
            color: var(--bc-navy);
            text-transform: uppercase;
            margin: 48px 0 20px 0;
            padding-top: 24px;
            border-top: 2px solid var(--gray-200);
        }

        .bcf-article-body h3 {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 22px;
            color: var(--bc-navy);
            margin: 36px 0 16px 0;
        }

        .bcf-article-body h4 {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 18px;
            color: var(--bc-navy);
            margin: 28px 0 12px 0;
        }

        .bcf-article-body ul,
        .bcf-article-body ol {
            margin: 0 0 24px 0;
            padding-left: 24px;
        }

        .bcf-article-body li {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 12px;
        }

        .bcf-article-body a {
            color: var(--bc-green);
            text-decoration: underline;
            transition: color 0.2s;
        }

        .bcf-article-body a:hover {
            color: var(--bc-green-dark);
        }

        .bcf-article-body blockquote {
            margin: 40px 0;
            padding: 30px 40px;
            background: var(--gray-100);
            border-left: 5px solid var(--bc-green);
            border-radius: 0 12px 12px 0;
        }

        .bcf-article-body blockquote p {
            font-size: 20px;
            font-style: italic;
            color: var(--bc-navy);
            margin: 0;
        }

        .bcf-article-body img {
            max-width: 100%;
            height: auto;
            border-radius: 12px;
            margin: 30px 0;
        }

        .bcf-article-body .wp-block-image {
            margin: 30px 0;
        }

        .bcf-article-body figure {
            margin: 30px 0;
        }

        .bcf-article-body figcaption {
            font-size: 14px;
            color: var(--gray-500);
            text-align: center;
            margin-top: 10px;
        }

        /* Post Tags */
        .bcf-post-tags {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 2px solid var(--gray-200);
        }

        .bcf-post-tags span {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--gray-500);
            margin-right: 12px;
        }

        .bcf-post-tags a {
            display: inline-block;
            background: var(--gray-100);
            color: var(--gray-800);
            font-size: 14px;
            padding: 6px 14px;
            border-radius: 20px;
            text-decoration: none;
            margin: 4px 4px 4px 0;
            transition: all 0.2s;
        }

        .bcf-post-tags a:hover {
            background: var(--bc-green);
            color: var(--white);
        }

        /* Post Navigation */
        .bcf-post-nav {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px;
            border-top: 2px solid var(--gray-200);
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .bcf-post-nav a {
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--bc-green);
            text-decoration: none;
            padding: 12px 24px;
            border: 2px solid var(--bc-green);
            border-radius: 6px;
            transition: all 0.3s;
        }

        .bcf-post-nav a:hover {
            background: var(--bc-green);
            color: var(--white);
        }

        /* Footer */
        .bcf-footer {
            background: var(--bc-navy-dark);
            padding: 60px 0 30px;
            color: rgba(255,255,255,0.7);
        }

        .bcf-footer-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .bcf-footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 60px;
            margin-bottom: 40px;
        }

        .bcf-footer h4 {
            font-family: var(--font-heading);
            font-weight: 700;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--white);
            margin-bottom: 20px;
        }

        .bcf-footer p {
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .bcf-footer-links {
            list-style: none;
        }

        .bcf-footer-links li {
            margin-bottom: 12px;
        }

        .bcf-footer-links a {
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            transition: color 0.2s;
        }

        .bcf-footer-links a:hover {
            color: var(--bc-green-light);
        }

        .bcf-footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }

        .bcf-social-links {
            display: flex;
            gap: 16px;
        }

        .bcf-social-links a {
            color: rgba(255,255,255,0.7);
            font-size: 20px;
            transition: color 0.2s;
        }

        .bcf-social-links a:hover {
            color: var(--bc-green-light);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .bcf-footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .bcf-top-bar-inner {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }

            .bcf-header-inner {
                flex-direction: column;
                gap: 20px;
            }

            .bcf-nav {
                flex-wrap: wrap;
                justify-content: center;
                gap: 16px;
            }

            .bcf-article-header-inner,
            .bcf-featured-image,
            .bcf-article-content,
            .bcf-post-nav {
                padding-left: 20px;
                padding-right: 20px;
            }

            .bcf-post-nav {
                flex-direction: column;
                text-align: center;
            }

            .bcf-footer-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .bcf-footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }
    </style>
</head>
<body <?php body_class(); ?>>

<!-- Top Bar -->
<div class="bcf-top-bar">
    <div class="bcf-top-bar-inner">
        <div>
            <span>📍 Vancouver, BC</span>
            <a href="mailto:bcfloorball@gmail.com">✉️ bcfloorball@gmail.com</a>
        </div>
        <div>
            <a href="https://www.instagram.com/HockeyGrowthInitiative" target="_blank">@HockeyGrowthInitiative</a>
            <a href="https://www.instagram.com/BCFloorballorg" target="_blank">@BCFloorballorg</a>
            <a href="https://www.youtube.com/@BCfloorballAssociation" target="_blank">YouTube</a>
        </div>
    </div>
</div>

<!-- Header -->
<header class="bcf-header">
    <div class="bcf-header-inner">
        <a href="<?php echo home_url(); ?>" class="bcf-logo">
            <img src="<?php echo get_template_directory_uri(); ?>/floor.jpeg" alt="BC Floorball">
            <div class="bcf-logo-text">
                BC Floorball
                <span>British Columbia</span>
            </div>
        </a>
        <nav class="bcf-nav">
            <a href="<?php echo home_url(); ?>">Home</a>
            <a href="<?php echo home_url('/about'); ?>">About</a>
            <a href="<?php echo home_url('/play'); ?>">Play</a>
            <a href="<?php echo home_url('/leagues'); ?>">Leagues</a>
            <a href="<?php echo home_url('/events'); ?>">Events</a>
            <a href="<?php echo home_url('/news'); ?>">News</a>
            <a href="<?php echo home_url('/contact'); ?>">Contact</a>
            <a href="<?php echo home_url('/register'); ?>" class="bcf-nav-btn">Register Now</a>
        </nav>
    </div>
</header>

<?php while ( have_posts() ) : the_post(); ?>

<!-- Article Header -->
<header class="bcf-article-header">
    <div class="bcf-article-header-inner">
        <div class="bcf-article-meta">
            <?php 
            $categories = get_the_category();
            if ($categories) {
                echo '<a href="' . esc_url(get_category_link($categories[0]->term_id)) . '" class="bcf-article-category">' . esc_html($categories[0]->name) . '</a>';
            }
            ?>
            <span class="bcf-article-date"><?php echo get_the_date(); ?></span>
        </div>
        <h1 class="bcf-article-title"><?php the_title(); ?></h1>
    </div>
</header>

<!-- Featured Image -->
<?php if (has_post_thumbnail()) : ?>
<div class="bcf-featured-image">
    <?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>

<!-- Article Content -->
<article class="bcf-article-content">
    <div class="bcf-article-body">
        <?php the_content(); ?>
    </div>

    <!-- Post Tags -->
    <?php
    $tags = get_the_tags();
    if ($tags) : ?>
    <div class="bcf-post-tags">
        <span>Tags:</span>
        <?php foreach ($tags as $tag) : ?>
            <a href="<?php echo get_tag_link($tag->term_id); ?>"><?php echo $tag->name; ?></a>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</article>

<!-- Post Navigation -->
<nav class="bcf-post-nav">
    <?php
    $prev_post = get_previous_post();
    $next_post = get_next_post();
    
    if ($prev_post) {
        echo '<a href="' . get_permalink($prev_post->ID) . '">← Previous Post</a>';
    } else {
        echo '<span></span>';
    }
    
    if ($next_post) {
        echo '<a href="' . get_permalink($next_post->ID) . '">Next Post →</a>';
    }
    ?>
</nav>

<?php endwhile; ?>

<!-- Footer -->
<footer class="bcf-footer">
    <div class="bcf-footer-inner">
        <div class="bcf-footer-grid">
            <div>
                <h4>BC Floorball</h4>
                <p>The provincial sport organization for floorball in British Columbia. We're dedicated to growing the fastest-growing indoor sport across the province.</p>
                <p>Member of Floorball Canada and the International Floorball Federation.</p>
            </div>
            <div>
                <h4>Quick Links</h4>
                <ul class="bcf-footer-links">
                    <li><a href="<?php echo home_url('/about'); ?>">About Us</a></li>
                    <li><a href="<?php echo home_url('/play'); ?>">Play Floorball</a></li>
                    <li><a href="<?php echo home_url('/leagues'); ?>">Find a League</a></li>
                    <li><a href="<?php echo home_url('/events'); ?>">Events</a></li>
                    <li><a href="<?php echo home_url('/contact'); ?>">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4>Programs</h4>
                <ul class="bcf-footer-links">
                    <li><a href="<?php echo home_url('/play'); ?>">Youth Programs</a></li>
                    <li><a href="<?php echo home_url('/play'); ?>">Adult Leagues</a></li>
                    <li><a href="<?php echo home_url('/play'); ?>">School Programs</a></li>
                    <li><a href="<?php echo home_url('/start-a-league'); ?>">Start a League</a></li>
                </ul>
            </div>
            <div>
                <h4>Contact</h4>
                <ul class="bcf-footer-links">
                    <li>Vancouver, BC</li>
                    <li><a href="mailto:bcfloorball@gmail.com">bcfloorball@gmail.com</a></li>
                    <li><a href="https://www.instagram.com/BCFloorballorg" target="_blank">@BCFloorballorg</a></li>
                </ul>
            </div>
        </div>
        <div class="bcf-footer-bottom">
            <p>&copy; <?php echo date('Y'); ?> BC Floorball. All rights reserved.</p>
            <div class="bcf-social-links">
                <a href="https://www.instagram.com/BCFloorballorg" target="_blank">📷</a>
                <a href="https://www.youtube.com/@BCfloorballAssociation" target="_blank">📺</a>
                <a href="mailto:bcfloorball@gmail.com">✉️</a>
            </div>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>