import type { Metadata } from 'next';
import Link from 'next/link';
import styles from './blog.module.css';

export const metadata: Metadata = {
    title: 'Blog - SocialBuddy',
    description: 'Latest news, tips, and insights about social media management, marketing strategies, and platform updates.',
};

export default function BlogPage() {
    const blogPosts = [
        {
            title: '10 Social Media Trends to Watch in 2025',
            excerpt: 'Stay ahead of the curve with these emerging social media trends that will shape the digital landscape.',
            category: 'Trends',
            date: 'Dec 8, 2025',
            readTime: '5 min read',
            image: '📈',
            slug: '10-social-media-trends-2025',
        },
        {
            title: 'How to Create a Content Calendar That Works',
            excerpt: 'Learn the best practices for planning and organizing your social media content effectively.',
            category: 'Strategy',
            date: 'Dec 5, 2025',
            readTime: '8 min read',
            image: '📅',
            slug: 'content-calendar-guide',
        },
        {
            title: 'Mastering Instagram Reels for Business Growth',
            excerpt: 'Discover how to leverage Instagram Reels to increase engagement and reach new audiences.',
            category: 'Tutorial',
            date: 'Dec 1, 2025',
            readTime: '6 min read',
            image: '🎬',
            slug: 'instagram-reels-guide',
        },
        {
            title: 'The Ultimate Guide to Social Media Analytics',
            excerpt: 'Understand the metrics that matter and how to use data to improve your social media performance.',
            category: 'Analytics',
            date: 'Nov 28, 2025',
            readTime: '10 min read',
            image: '📊',
            slug: 'social-media-analytics-guide',
        },
        {
            title: 'AI-Powered Content Creation: Tips and Tools',
            excerpt: 'Explore how artificial intelligence is transforming content creation and how you can use it effectively.',
            category: 'Technology',
            date: 'Nov 25, 2025',
            readTime: '7 min read',
            image: '🤖',
            slug: 'ai-content-creation',
        },
        {
            title: 'Building a Strong Brand Voice on Social Media',
            excerpt: 'Learn how to develop and maintain a consistent brand voice across all your social platforms.',
            category: 'Branding',
            date: 'Nov 20, 2025',
            readTime: '6 min read',
            image: '🎯',
            slug: 'brand-voice-guide',
        },
    ];

    const categories = ['All', 'Trends', 'Strategy', 'Tutorial', 'Analytics', 'Technology', 'Branding'];

    return (
        <div className={styles.blogPage}>
            {/* Hero Section */}
            <section className={styles.hero}>
                <div className="container">
                    <div className={styles.heroContent}>
                        <h1 className={styles.heroTitle}>
                            SocialBuddy <span className="gradient-text">Blog</span>
                        </h1>
                        <p className={styles.heroSubtitle}>
                            Insights, tips, and strategies to help you succeed in social media marketing
                        </p>
                    </div>
                </div>
            </section>

            {/* Categories */}
            <section className={styles.categoriesSection}>
                <div className="container">
                    <div className={styles.categories}>
                        {categories.map((category, idx) => (
                            <button key={idx} className={`${styles.categoryBtn} ${idx === 0 ? styles.active : ''}`}>
                                {category}
                            </button>
                        ))}
                    </div>
                </div>
            </section>

            {/* Blog Grid */}
            <section className="section">
                <div className="container">
                    <div className={styles.blogGrid}>
                        {blogPosts.map((post, idx) => (
                            <article key={idx} className={styles.blogCard}>
                                <div className={styles.cardImage}>
                                    <span className={styles.imageIcon}>{post.image}</span>
                                </div>
                                <div className={styles.cardContent}>
                                    <div className={styles.cardMeta}>
                                        <span className={styles.category}>{post.category}</span>
                                        <span className={styles.date}>{post.date}</span>
                                    </div>
                                    <h2 className={styles.cardTitle}>
                                        <Link href={`/blog/${post.slug}`}>{post.title}</Link>
                                    </h2>
                                    <p className={styles.cardExcerpt}>{post.excerpt}</p>
                                    <div className={styles.cardFooter}>
                                        <span className={styles.readTime}>⏱️ {post.readTime}</span>
                                        <Link href={`/blog/${post.slug}`} className={styles.readMore}>
                                            Read More →
                                        </Link>
                                    </div>
                                </div>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            {/* Newsletter Section */}
            <section className={styles.newsletter}>
                <div className="container">
                    <div className={styles.newsletterContent}>
                        <h2 className={styles.newsletterTitle}>Stay Updated</h2>
                        <p className={styles.newsletterSubtitle}>
                            Get the latest social media tips and SocialBuddy updates delivered to your inbox
                        </p>
                        <form className={styles.newsletterForm}>
                            <input
                                type="email"
                                placeholder="Enter your email"
                                className={styles.newsletterInput}
                            />
                            <button type="submit" className="btn btn-primary">
                                Subscribe
                            </button>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    );
}