import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import Contact from '../../components/Contact';
import SEO from '../../components/SEO';
import { orderedBlogPostData } from '../data/seoData';

const cardVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: (index: number) => ({
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.45,
            delay: Math.min(index * 0.06, 0.3),
            ease: 'easeOut',
        },
    }),
};

const BlogPage: React.FC = () => {
    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);

    return (
        <>
        <SEO
            title="Blog | Bay Area IT Insights for Corpus Christi Businesses"
            description="Read practical IT guidance for Corpus Christi and Coastal Bend businesses, from outsourced IT support to business email and local service coverage."
            keywords={['Corpus Christi IT blog', 'managed IT insights', 'business IT support articles']}
            canonicalUrl="https://bayareait.services/blog"
        />
        <div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
            <div className="absolute top-0 left-0 right-0 h-[800px] bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.25),rgba(255,255,255,0))] pointer-events-none" />
            <div className="absolute top-[300px] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-gray-100/50 dark:bg-white/5 rounded-full blur-[120px] pointer-events-none" />
            <section className="py-20 px-6 bg-white dark:bg-[#0f0f0f] border-b border-gray-100 dark:border-white/5 relative bg-transparent">
                <div className="max-w-4xl mx-auto text-center relative z-10">
                    <span className="text-blue-600 dark:text-blue-400 font-bold tracking-widest uppercase text-sm mb-3 block">Latest Insights</span>
                    <h1 className="font-display text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
                        Tech insights for the <br /><span className="text-gray-400">Coastal Bend business.</span>
                    </h1>
                </div>
            </section>

            <section className="py-16 px-6 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]">
                <div className="max-w-5xl mx-auto space-y-16">
                    {orderedBlogPostData.filter(post => !post.redirect).map((post, index) => (
                        <Link
                            key={post.id}
                            to={`/${post.slug}`}
                            className="block"
                        >
                            <motion.div
                                initial="hidden"
                                animate="visible"
                                custom={index}
                                variants={cardVariants}
                                whileHover={{ y: -5 }}
                                className="group grid md:grid-cols-2 gap-0 bg-white dark:bg-[#161616] rounded-3xl overflow-hidden shadow-lg border border-gray-100 dark:border-white/5 hover:shadow-2xl hover:shadow-blue-900/10 transition-all duration-300"
                            >
                                <div className="h-64 md:h-auto overflow-hidden relative">
                                    <img
                                        src={post.image || '/images/blog/business-email-comparison-new.webp'}
                                        alt={post.h1}
                                        loading={index === 0 ? 'eager' : 'lazy'}
                                        decoding="async"
                                        fetchPriority={index === 0 ? 'high' : 'low'}
                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                                    />
                                    <div className="absolute top-4 left-4">
                                        <span className="px-3 py-1 bg-black/70 backdrop-blur-md text-white text-xs font-bold rounded-full border border-white/20">
                                            {post.category === 'authority' ? 'IT Insights' : 'Local Services'}
                                        </span>
                                    </div>
                                </div>
                                <div className="p-8 md:p-12 flex flex-col justify-center">
                                    <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-4">
                                        <span>Jan 2026</span>
                                        <span className="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></span>
                                        <span>8 min read</span>
                                    </div>
                                    <h2 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                                        {post.h1}
                                    </h2>
                                    <p className="text-gray-600 dark:text-gray-300 leading-relaxed mb-8">
                                        {post.description}
                                    </p>
                                    <div className="mt-auto">
                                        <span className="inline-flex items-center gap-2 font-bold text-blue-600 dark:text-white group-hover:gap-3 transition-all">
                                            Read article <span className="material-symbols-outlined text-sm">arrow_forward</span>
                                        </span>
                                    </div>
                                </div>
                            </motion.div>
                        </Link>
                    ))}
                </div>
            </section>

            <Contact />
        </div>
        </>
    );
};

export default BlogPage;
