'use client'


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 BlogContent() {
    // 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}>


            <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="/" prefetch={false}>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="Blog Section Decorative Dinner Icon" width={24} height={24} />
                    <span>ANTALYA</span>
                    <Image src="/images/eat.png" alt="Blog Section Decorative Cutlery Icon" width={24} height={24} />
                </div>
                <h2 className={styles.mainHeading}>Stories Crafted Through Flavor & Celebration</h2>
                <p className={styles.description}>
                    Discover how Antalya brings Turkish heritage to your table through our catering. From handcrafted mezze and slow-grilled kebabs to the warmth of Turkish hospitality, we create dining moments that tell stories - making every event memorable and meaningful.
                </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={`/antalya-turkish-food-blog/${blog.slug}`} prefetch={false}>{blog.title}</Link>
                                </h3>
                                <p className={styles.date}>{blog.date}</p>
                                <p className={styles.excerpt}>{blog.excerpt}</p>
                                <Link href={`/antalya-turkish-food-blog/${blog.slug}`} className={styles.button} prefetch={false}>
                                    Read More
                                </Link>
                            </div>
                        </motion.div>
                    ))}
                </motion.div>
            </section>

            <Footer />
        </main>
    );
}
