import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import { Calendar, ArrowRight, Clock, ArrowUp } from 'lucide-react';
import { Link } from 'react-router-dom';
import ScrollReveal from '@/components/ScrollReveal';
import { useEffect, useRef, useState } from 'react';
import { generateArticleSchema, injectStructuredData } from '@/utils/structuredData';
import { useSEO } from '@/hooks/useSEO';
import { blogPosts } from '@/data/blogPosts';

const Blog = () => {
  const imageRef = useRef<HTMLImageElement>(null);
  const [showScrollTop, setShowScrollTop] = useState(false);

  // SEO metadata for blog overview page
  useSEO({
    title: 'IT Insights & Technology Blog | Bay Area Affiliates Corpus Christi',
    description: 'Practical IT advice, security insights, and technology guides for small businesses in Corpus Christi and the Coastal Bend region.',
    keywords: 'IT blog Corpus Christi, technology insights Coastal Bend, small business IT tips, managed services blog South Texas',
    canonical: 'https://bayarea-cc.com/blog',
    ogTitle: 'IT Insights for Corpus Christi Businesses',
    ogDescription: 'Expert IT advice and technology solutions for the Coastal Bend region.',
  });

  useEffect(() => {
    const handleScroll = () => {
      if (imageRef.current) {
        const scrolled = window.pageYOffset;
        const parallax = scrolled * 0.5;
        imageRef.current.style.transform = `translateY(${parallax}px) scale(1.1)`;
      }
      // Show scroll to top button after 500px
      setShowScrollTop(window.scrollY > 500);
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  // Inject Article Schema for all blog posts
  useEffect(() => {
    const schemas = blogPosts.map((post) => {
      const schema = generateArticleSchema({
        headline: post.title,
        description: post.excerpt,
        author: post.author,
        datePublished: post.date,
        url: `https://bayarea-cc.com/blog/${post.slug}`,
        keywords: post.keywords,
        image: post.image,
      });

      // Add entity mentions for Knowledge Graph
      if (post.entities && post.entities.length > 0) {
        return {
          ...schema,
          mentions: post.entities,
        };
      }

      return schema;
    });

    // Inject combined schema graph
    const schemaGraph = {
      "@context": "https://schema.org",
      "@graph": schemas,
    };

    injectStructuredData(schemaGraph, 'blog-articles-schema');
  }, []);

  return (
    <div className="min-h-screen">
      <Navigation />

      <main role="main">
        {/* Hero section with image background */}
        <section className="relative h-screen flex items-center justify-center overflow-hidden">
          {/* Background image with parallax */}
          <div className="absolute inset-0 overflow-hidden">
            <img
              ref={imageRef}
              src="/blog_banner.png"
              alt="IT insights and technology solutions blog for Corpus Christi small and medium businesses"
              className="w-full h-[110%] object-cover will-change-transform"
              style={{ transform: 'translateY(0px) scale(1.1)' }}
              loading="eager"
              fetchPriority="high"
            />
          </div>

          {/* Overlay for better text readability */}
          <div className="absolute inset-0 bg-black/40"></div>

          {/* Hero content */}
          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <ScrollReveal>
              <div className="max-w-4xl mx-auto">
                <h1 className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]">
                  IT insights for{' '}
                  <span className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]">your business</span>
                </h1>
                <p className="text-xl sm:text-2xl text-white/95 mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]">
                  Practical advice, industry insights, and technical guides to help
                  your business make better technology decisions.
                </p>

                {/* CTA button */}
                <div className="flex justify-center">
                  <a
                    href="#articles"
                    className="btn-neon group flex items-center space-x-2"
                  >
                    <span>Read our articles</span>
                    <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
                  </a>
                </div>
              </div>
            </ScrollReveal>
          </div>

          {/* Scroll indicator */}
          <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
            <div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
              <div className="w-1 h-3 bg-neon rounded-full mt-2 animate-bounce"></div>
            </div>
          </div>
        </section>

        {/* Blog posts */}
        <section id="articles" className="py-24 bg-background-deep">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 gap-16">
              {blogPosts.map((post, index) => (
                <ScrollReveal key={post.id} delay={index * 100}>
                  <article className="card-dark overflow-hidden group hover:shadow-neon transition-all duration-500">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
                      {/* Image */}
                      <div className="relative overflow-hidden">
                        <img
                          src={post.image}
                          alt={post.title}
                          className="w-full h-64 lg:h-full object-cover transition-transform duration-500 group-hover:scale-105"
                        />
                        <div className="absolute top-4 left-4">
                          <span className="inline-block px-3 py-1 bg-neon text-neon-foreground text-xs font-medium rounded-full">
                            {post.category}
                          </span>
                        </div>
                      </div>

                      {/* Content */}
                      <div className="p-8 lg:p-12 flex flex-col">
                        <div className="flex items-center space-x-4 text-sm text-foreground-muted mb-4">
                          <div className="flex items-center">
                            <Calendar className="w-4 h-4 mr-1" />
                            {new Date(post.date).toLocaleDateString('en-US', {
                              year: 'numeric',
                              month: 'long',
                              day: 'numeric'
                            })}
                          </div>
                          <div className="flex items-center">
                            <Clock className="w-4 h-4 mr-1" />
                            {post.readTime}
                          </div>
                        </div>

                        <h2 className="font-heading font-bold text-2xl lg:text-3xl text-foreground mb-4 group-hover:text-neon transition-colors">
                          {post.title}
                        </h2>

                        <p className="text-foreground-muted leading-relaxed mb-6 flex-grow">
                          {post.excerpt}
                        </p>

                        <div className="flex items-center justify-between">
                          <span className="text-sm text-foreground-muted">
                            By {post.author}
                          </span>

                          <Link
                            to={`/blog/${post.slug}`}
                            className="inline-flex items-center text-neon font-medium hover:text-neon/80 transition-colors group"
                          >
                            Read article
                            <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
                          </Link>
                        </div>
                      </div>
                    </div>
                  </article>
                </ScrollReveal>
              ))}
            </div>

          </div>
        </section>
      </main>

      <Footer />

      {/* Scroll to Top Button */}
      <button
        onClick={scrollToTop}
        className={`fixed bottom-8 right-8 z-50 p-4 bg-neon text-neon-foreground rounded-full shadow-lg shadow-neon/50 transition-all duration-300 hover:scale-110 hover:shadow-neon ${showScrollTop ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-16 pointer-events-none'
          }`}
        aria-label="Scroll to top"
      >
        <ArrowUp className="w-6 h-6" />
      </button>
    </div>
  );
};

export default Blog;
