import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Helmet } from 'react-helmet-async';
import { BlogCard } from "./BlogCard";
import { blogPosts, BlogPost } from "../data/blogPosts";
import { slugify } from "../utils/slugify";
import { BookOpen } from "lucide-react";

export const Blog: React.FC = () => {
  const navigate = useNavigate();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const handleReadMore = (post: BlogPost) => {
    navigate(`/blog/${slugify(post.title)}`);
  };

  const scrollToSection = (sectionId: string) => {
    if (sectionId === "blog") {
      return; // Already on blog page
    }
    navigate("/");
    setTimeout(() => {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }, 100);
  };

  return (
    <>
      <Helmet>
        <title>SEO Blog & Insights | Febin Joy – Latest SEO Tips & Strategies</title>
        <meta name="description" content="Read the latest SEO insights, tips, and strategies from Febin Joy, a trusted SEO expert in Kerala. Learn about digital marketing, keyword research, and Google ranking optimization." />
        <meta name="keywords" content="seo blog, seo tips, seo insights, digital marketing blog, seo strategies, google ranking tips, keyword research, seo expert blog kerala, seo articles" />
        <meta name="author" content="Febin Joy" />
        <meta name="robots" content="index, follow" />
        <link rel="canonical" href="https://febinjoy.netlify.app/blog" />
        
        {/* Open Graph Meta Tags */}
        <meta property="og:title" content="SEO Blog & Insights | Febin Joy – Latest SEO Tips & Strategies" />
        <meta property="og:description" content="Read the latest SEO insights, tips, and strategies from Febin Joy, a trusted SEO expert in Kerala. Learn about digital marketing and Google ranking optimization." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://febinjoy.netlify.app/blog" />
        <meta property="og:image" content="https://febinjoy.netlify.app/og-image.jpg" />
        <meta property="og:locale" content="en_IN" />
        <meta property="og:site_name" content="Febin Joy - SEO Expert Kerala" />
        
        {/* Twitter Card Meta Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="SEO Blog & Insights | Febin Joy – Latest SEO Tips" />
        <meta name="twitter:description" content="Read the latest SEO insights, tips, and strategies from Febin Joy, a trusted SEO expert in Kerala." />
        <meta name="twitter:image" content="https://febinjoy.netlify.app/og-image.jpg" />
        
        {/* Schema.org Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Blog",
            "name": "SEO Blog & Insights by Febin Joy",
            "description": "Latest SEO insights, tips, and strategies from a trusted SEO expert in Kerala",
            "url": "https://febinjoy.netlify.app/blog",
            "author": {
              "@type": "Person",
              "name": "Febin Joy",
              "url": "https://febinjoy.netlify.app"
            },
            "publisher": {
              "@type": "Person",
              "name": "Febin Joy",
              "url": "https://febinjoy.netlify.app"
            },
            "inLanguage": "en-IN",
            "about": [
              "Search Engine Optimization",
              "Digital Marketing",
              "SEO Tips",
              "Google Ranking",
              "Keyword Research"
            ]
          })}
        </script>
      </Helmet>
      <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 z-50 shadow-sm bg-white/95 backdrop-blur-md">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <button
              onClick={() => navigate("/")}
              className="text-2xl font-bold text-transparent transition-opacity bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text hover:opacity-80"
              aria-label="Go to homepage"
            >
              Febin Joy
            </button>

            <div className="hidden space-x-8 md:flex">
              {[
                "home",
                "about",
                "experience",
                "skills",
                "education",
                "blog",
                "contact",
              ].map((section) => (
                <button
                  key={section}
                  onClick={() => scrollToSection(section)}
                  className={`capitalize transition-all duration-300 hover:text-blue-600 ${
                    section === "blog"
                      ? "text-blue-600 font-semibold"
                      : "text-gray-600"
                  }`}
                  aria-current={section === "blog" ? "page" : undefined}
                >
                  {section}
                </button>
              ))}
            </div>

            <button
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
              aria-expanded={isMenuOpen}
            >
              <div className="flex flex-col justify-center w-6 h-6 space-y-1">
                <span
                  className={`block h-0.5 bg-gray-600 transition-transform ${
                    isMenuOpen ? "rotate-45 translate-y-1.5" : ""
                  }`}
                ></span>
                <span
                  className={`block h-0.5 bg-gray-600 transition-opacity ${
                    isMenuOpen ? "opacity-0" : ""
                  }`}
                ></span>
                <span
                  className={`block h-0.5 bg-gray-600 transition-transform ${
                    isMenuOpen ? "-rotate-45 -translate-y-1.5" : ""
                  }`}
                ></span>
              </div>
            </button>
          </div>

          {isMenuOpen && (
            <div className="py-4 border-t md:hidden">
              {[
                "home",
                "about",
                "experience",
                "skills",
                "education",
                "blog",
                "contact",
              ].map((section) => (
                <button
                  key={section}
                  onClick={() => scrollToSection(section)}
                  className="block w-full py-2 text-left text-gray-600 capitalize transition-colors hover:text-blue-600"
                  aria-current={section === "blog" ? "page" : undefined}
                >
                  {section}
                </button>
              ))}
            </div>
          )}
        </div>
      </nav>

      <main>
        {/* Blog Section */}
      <section className="min-h-screen pt-24 pb-20">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <div className="inline-flex items-center gap-3 px-6 py-3 mb-6 font-medium text-blue-600 rounded-full bg-blue-50">
              <BookOpen size={20} />
              SEO Insights & Tips
            </div>
            <h1 className="mb-6 text-4xl font-bold text-gray-800 md:text-5xl">
              SEO Insights &{" "}
              <span className="text-transparent bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text">
                Blog
              </span>
            </h1>
            <p className="max-w-3xl mx-auto text-xl text-gray-600">
              Stay updated with the latest SEO strategies, tips, and insights
              to help your business in Kerala rank higher on Google and drive
              more organic traffic.
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {blogPosts.map((post) => (
              <BlogCard
                key={post.id}
                post={post}
                onReadMore={handleReadMore}
              />
            ))}
          </div>
        </div>
      </section>
      </main>

      {/* Footer */}
      <footer className="py-8 text-white bg-gray-900">
        <div className="px-4 mx-auto text-center max-w-7xl sm:px-6 lg:px-8">
          <p className="mb-4">
            © 2026 Febin Joy – SEO Expert in Kerala. All Rights Reserved.
          </p>
          <p className="text-sm text-gray-400">
            Helping businesses achieve top rankings and sustainable organic
            growth through strategic SEO optimization.
          </p>
        </div>
      </footer>
      </div>
    </>
  );
};