'use client'

import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/Footer/Footer";
import Image from "next/image";
import Link from "next/link";
import styles from "./blog.module.css";
import { blogData } from "@/utils/constant";
import { motion } from "framer-motion";

export default function BlogPage() {
    // Animation variants
    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.15,
                delayChildren: 0.2
            }
        }
    };

    const cardVariants = {
        hidden: {
            opacity: 0,
            y: 30
        },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                duration: 0.6
            }
        }
    };

    const heroVariants = {
        hidden: { opacity: 0, y: -20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: {
                duration: 0.8
            }
        }
    };

    return (
        <main className={styles.main}>
            <Navbar />

            <motion.section
                className={styles.hero}
                initial="hidden"
                animate="visible"
                variants={heroVariants}
            >
                <div className={styles.heroContent}>
                    <h1 className={styles.heroTitle}>Our Blog</h1>
                    <p className={styles.breadcrumb}>
                        <Link href="/">Home</Link> / Blog
                    </p>
                </div>
            </motion.section>

            <section className={styles.sectionHeading}>
                <div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
                    <Image src="/images/dinner.png" alt="icon" width={24} height={24} />
                    <span>ANTALYA</span>
                    <Image src="/images/eat.png" alt="icon" width={24} height={24} />
                </div>
                <h2 className={styles.mainHeading}>Stories From Our Kitchen, And Traditions</h2>
                <p className={styles.description}>
                    Discover the rich heritage of Turkish cuisine through our blog. From traditional recipes and cooking techniques to the cultural significance of tea and hospitality, we share insights into what makes Turkish food truly special.
                </p>
            </section>

            <section className={styles.blogSection}>
                <motion.div
                    className={styles.grid}
                    initial="hidden"
                    animate="visible"
                    variants={containerVariants}
                >
                    {blogData.map((blog) => (
                        <motion.div
                            key={blog.id}
                            className={styles.card}
                            variants={cardVariants}
                            whileHover={{
                                y: -8,
                                transition: { duration: 0.3 }
                            }}
                        >
                            <div className={styles.imageContainer}>
                                <Image
                                    src={blog.image}
                                    alt={blog.title}
                                    fill
                                    style={{ objectFit: 'cover' }}
                                />
                            </div>
                            <div className={styles.cardContent}>
                                <h3 className={styles.blogTitle}>
                                    <Link href={`/blog/${blog.slug}`}>{blog.title}</Link>
                                </h3>
                                <p className={styles.date}>{blog.date}</p>
                                <p className={styles.excerpt}>{blog.excerpt}</p>
                                <Link href={`/blog/${blog.slug}`} className={styles.button}>
                                    Read More
                                </Link>
                            </div>
                        </motion.div>
                    ))}
                </motion.div>
            </section>

            <Footer />
        </main>
    );
}