import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Helmet } from 'react-helmet-async';
import { BlogCard } from "./BlogCard";
import { BlogPost, getFeaturedPosts } from "../data/blogPosts";
import { slugify } from "../utils/slugify";
import {
  ChevronDown,
  Mail,
  Phone,
  MapPin,
  Linkedin,
  Search,
  TrendingUp,
  Award,
  Users,
  Calendar,
  Code,
  BarChart3,
  Target,
  Globe,
  ArrowRight,
  BookOpen,
  Star,
} from "lucide-react";

export const Home: React.FC = () => {
  const navigate = useNavigate();
  const [activeSection, setActiveSection] = useState("home");
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [typedText, setTypedText] = useState("");
  const [featuredPosts, setFeaturedPosts] = useState<BlogPost[]>([]);
  const fullText = "Febin Joy";

  useEffect(() => {
    let currentText = "";
    let index = 0;
    const typeInterval = setInterval(() => {
      if (index < fullText.length) {
        currentText += fullText[index];
        setTypedText(currentText);
        index++;
      } else {
        clearInterval(typeInterval);
      }
    }, 100);

    return () => clearInterval(typeInterval);
  }, []);

  useEffect(() => {
    setFeaturedPosts(getFeaturedPosts());
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const sections = [
        "home",
        "about",
        "experience",
        "skills",
        "education",
        "blog",
        "contact",
      ];
      const scrollPosition = window.scrollY + 100;

      sections.forEach((section) => {
        const element = document.getElementById(section);
        if (element) {
          const { offsetTop, offsetHeight } = element;
          if (
            scrollPosition >= offsetTop &&
            scrollPosition < offsetTop + offsetHeight
          ) {
            setActiveSection(section);
          }
        }
      });
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToSection = (sectionId: string) => {
    if (sectionId === "blog") {
      navigate("/blog");
      return;
    }

    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
      setIsMenuOpen(false);
    }
  };


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

  const experiences = [
    {
      period: "2025/10 – Present",
      title: "SEO Specialist",
      company: "Perimattic",
      location: "Remote",
      description:
        "Planned and executed end-to-end SEO strategies, combining technical optimization, content enhancement, and off-page initiatives to improve search performance.",
      achievements: [
        "Improved search visibility with consistent off-page SEO and keyword targeting strategies",
        "Enhanced local SEO performance through optimized Google Business and content signals",
        "Accelerated indexing and improved crawl efficiency with technical SEO refinements",
      ],
    },
    {
      period: "2025/05 – 2025/10",
      title: "SEO Analyst",
      company: "Reon Technologies",
      location: "Koratty, Kerala",
      description:
        "Conducted keyword research using Ahrefs and SEMrush to identify high-conversion search terms and optimize content for organic visibility. Performed SEO audits, fixed technical issues, and improved site speed for better crawlability and ranking across the UAE market.",
      achievements: [
        "Increased organic traffic with targeted keyword optimization",
        "Achieved top Google rankings for competitive keywords",
        "Enhanced site crawlability & reduced page load time",
      ],
    },
    {
      period: "2024/11 – 2025/01",
      title: "Data Analytics Intern",
      company: "Trainity",
      location: "Remote",
      description:
        "Completed self-paced guided training covering data wrangling in Excel & MySQL, predictive analytics, cluster analysis, Tableau, Power BI, and data visualization techniques.",
      achievements: [
        "Gained hands-on expertise in data cleaning and wrangling",
        "Built interactive dashboards with Tableau & Power BI",
        "Applied predictive analytics & clustering methods for insights",
      ],
    },
    {
      period: "2023/11 – 2024/07",
      title: "SEO Specialist & Google Ads",
      company: "Exotic Wood Zone & Best Cocopeat",
      location: "Kakkanad, Kerala",
      description:
        "Optimized an e-commerce (Shopify) website through on-page SEO, competitor backlink analysis, strategic link building, mobile-friendly testing, and page speed improvements.",
      achievements: [
        "Boosted organic traffic",
        "Built quality backlinks",
        "Optimized Shopify store speed & mobile performance",
      ],
    },
    {
      period: "2021/11 – 2023/07",
      title: "Junior Outreach Specialist",
      company: "Techwyse IT Solutions",
      location: "Remote",
      description:
        "Created well-optimized, keyword-rich content for off-page SEO campaigns, including guest blogging, backlink prospecting, and outreach to high-authority sites.",
      achievements: [
        "Created high-quality backlinks",
        "Managed multiple client portfolios",
        "Designed content strategies for diverse industries",
      ],
    },
    {
      period: "2021/03 – 2021/04",
      title: "Digital Marketing Intern",
      company: "Tuttifrutti Interactive",
      location: "Remote",
      description:
        "Managed social media campaigns that increased engagement across key platforms. Collected and analyzed game reviews & survey data to refine marketing strategies.",
      achievements: [
        "Ran targeted social media campaigns to improve reach",
        "Conducted data-driven analysis of reviews & surveys",
        "Engaged with gamers on Twitter, Reddit & Discord, boosting brand awareness",
      ],
    },
  ];

  const skills = [
    { name: "Search Engine Optimization", level: 95, icon: Search },
    { name: "Keyword Research", level: 90, icon: Target },
    { name: "Link Building", level: 88, icon: Globe },
    { name: "Content Strategy", level: 85, icon: Code },
    { name: "Analytics & Reporting", level: 92, icon: BarChart3 },
    { name: "Technical SEO", level: 87, icon: TrendingUp },
  ];

  const tools = [
    "SEMrush",
    "Ahrefs",
    "Google Search Console",
    "Screaming Frog",
    "Pagespeed Insights",
    "Mobile-Friendly Test",
    "Google Keyword Planner",
    "ChatGPT",
    "Google Gemini",
    "Google Analytics",
    "Google Business Profile Manager",
  ];

  // Helper function to convert percentage to star rating (1-5 stars)
  const getStarRating = (percentage: number): number => {
    if (percentage >= 95) return 5;
    if (percentage >= 85) return 4;
    if (percentage >= 70) return 3;
    if (percentage >= 50) return 2;
    return 1;
  };

  // Helper function to render stars
  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, index) => (
      <Star
        key={index}
        size={20}
        className={`transition-all duration-200 ${
          index < rating
            ? "text-yellow-400 fill-yellow-400 drop-shadow-sm"
            : "text-gray-200"
        }`}
      />
    ));
  };

  return (
    <>
      <Helmet>
        <title>SEO Expert in Kerala | Febin Joy – Proven SEO Services & Digital Marketing</title>
        <meta name="description" content="Hire Febin Joy, a trusted SEO Expert in Kerala with 3+ years of experience. Get higher Google rankings, organic traffic, and ROI-driven SEO strategies for your business." />
        <meta name="keywords" content="seo expert in kerala, seo specialist kerala, digital marketing expert kerala, search engine optimization kerala, seo consultant kerala, organic traffic expert, local seo kerala, seo services kerala" />
        <meta name="author" content="Febin Joy" />
        <meta name="robots" content="index, follow" />
        <link rel="canonical" href="https://febinjoy.netlify.app" />
        
        {/* Open Graph Meta Tags */}
        <meta property="og:title" content="SEO Expert in Kerala | Febin Joy – Grow Organic Traffic" />
        <meta property="og:description" content="Hire Febin Joy, SEO expert in Kerala, to boost Google rankings, drive organic traffic, and grow your business with proven SEO strategies." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://febinjoy.netlify.app" />
        <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 Expert in Kerala | Febin Joy – Boost Your Google Ranking" />
        <meta name="twitter:description" content="Hire Febin Joy, a Kerala-based SEO expert, to increase organic traffic, improve Google rankings, and drive measurable growth for your business." />
        <meta name="twitter:image" content="https://febinjoy.netlify.app/og-image.jpg" />
        
        {/* Additional SEO Tags */}
        <meta name="geo.region" content="IN-KL" />
        <meta name="geo.placename" content="Kerala" />
        <meta name="geo.position" content="10.8505;76.2711" />
        <meta name="ICBM" content="10.8505, 76.2711" />
        
        {/* Schema.org Structured Data */}
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Person",
            "name": "Febin Joy",
            "jobTitle": "SEO Expert",
            "description": "Boost your Google rankings & organic traffic with Febin Joy, a trusted SEO expert in Kerala delivering proven strategies for business growth.",
            "url": "https://febinjoy.netlify.app",
            "email": "febinjoypuliyanmackal@gmail.com",
            "telephone": "+91-9188652985",
            "address": {
              "@type": "PostalAddress",
              "addressLocality": "Palakkad",
              "addressRegion": "Kerala",
              "addressCountry": "India",
              "postalCode": "678002"
            },
            "sameAs": [
              "https://linkedin.com/in/febin-joy"
            ],
            "knowsAbout": [
              "Search Engine Optimization",
              "Digital Marketing",
              "Keyword Research",
              "Link Building",
              "Technical SEO",
              "E-commerce SEO",
              "Content Strategy"
            ],
            "hasOccupation": {
              "@type": "Occupation",
              "name": "SEO Expert",
              "occupationLocation": {
                "@type": "Place",
                "name": "Kerala, India"
              },
              "skills": [
                "SEO",
                "Digital Marketing",
                "Analytics",
                "Content Marketing",
                "Technical SEO"
              ]
            }
          })}
        </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>

            {/* Desktop Menu */}
            <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 ${
                    activeSection === section
                      ? "text-blue-600 font-semibold"
                      : "text-gray-600"
                  }`}
                  aria-current={activeSection === section ? "page" : undefined}
                >
                  {section}
                </button>
              ))}
            </div>

            {/* Mobile Menu Button */}
            <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>

          {/* Mobile Menu */}
          {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={activeSection === section ? "page" : undefined}
                >
                  {section}
                </button>
              ))}
            </div>
          )}
        </div>
      </nav>

      <main>
        {/* Hero Section */}
      <section
        id="home"
        className="relative flex items-center justify-center min-h-screen overflow-hidden"
      >
        <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-green-50"></div>
        <div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-green-600/10"></div>

        <div className="relative z-10 max-w-4xl px-4 mx-auto text-center sm:px-6 lg:px-8">
          <div className="animate-fade-in-up">
            <h1 className="mb-6 text-5xl font-bold sm:text-6xl lg:text-7xl">
              <span className="block text-gray-800">SEO Expert in Kerala</span>
              <span className="block text-transparent bg-gradient-to-r from-blue-600 to-green-600 bg-clip-text">
                {typedText}
                <span className="animate-pulse">|</span>
              </span>
            </h1>

            <p className="max-w-2xl mx-auto mb-8 text-xl leading-relaxed text-gray-600">
              Helping businesses in Kerala and beyond achieve top Google
              rankings, sustainable organic traffic, and measurable growth with
              proven SEO strategies.
            </p>

            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              <button
                onClick={() => scrollToSection("contact")}
                className="flex items-center gap-2 px-8 py-4 font-semibold text-white transition-all duration-300 transform rounded-full bg-gradient-to-r from-blue-600 to-blue-700 hover:shadow-xl hover:scale-105"
              >
                Hire SEO Expert in Kerala
              </button>
              <button
                onClick={() => scrollToSection("experience")}
                className="px-8 py-4 font-semibold text-blue-600 transition-all duration-300 border-2 border-blue-600 rounded-full hover:bg-blue-600 hover:text-white"
              >
                View My Work
              </button>
            </div>
          </div>
        </div>

        <div className="absolute transform -translate-x-1/2 bottom-8 left-1/2 animate-bounce">
          <ChevronDown className="text-blue-600" size={32} />
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-white">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-4xl font-bold text-gray-800">About Me</h2>
            <p className="max-w-2xl mx-auto text-xl text-gray-600">
              I'm Febin Joy, a passionate SEO Expert in Kerala with 4+ years of
              experience helping startups, enterprises, and e-commerce stores
              dominate search results.
            </p>
          </div>

          <div className="grid items-center gap-12 lg:grid-cols-2">
            <div className="space-y-6">
              <h3 className="text-2xl font-semibold text-gray-800">
                Why Work With Me?
              </h3>
              <p className="leading-relaxed text-gray-600">
                My approach combines technical SEO expertise, keyword research,
                and creative strategies to deliver lasting results.
              </p>
              <p className="leading-relaxed text-gray-600">
                Whether you need local SEO for Kerala businesses or
                enterprise-level SEO for global reach, I create data-driven
                solutions that drive real ROI.
              </p>

              <div className="grid grid-cols-2 gap-6 mt-8">
                <div className="p-6 text-center transition-shadow bg-blue-50 rounded-xl hover:shadow-lg">
                  <div className="mb-2 text-3xl font-bold text-blue-600">
                    30+
                  </div>
                  <div className="text-gray-600">SEO Projects Completed</div>
                </div>
                <div className="p-6 text-center transition-shadow bg-green-50 rounded-xl hover:shadow-lg">
                  <div className="mb-2 text-3xl font-bold text-green-600">
                    4+
                  </div>
                  <div className="text-gray-600">Years of Experience</div>
                </div>
              </div>
            </div>

            <div className="p-8 bg-gradient-to-br from-blue-50 to-green-50 rounded-2xl">
              <h3 className="mb-6 text-2xl font-semibold text-gray-800">
                Key Expertise
              </h3>
              <div className="space-y-4">
                {[
                  "Technical SEO & Site Optimization – Faster websites, better crawlability.",
                  "Keyword Research & Strategy – Rank for the right keywords that drive traffic.",
                  "Link Building & Outreach – High-quality backlinks for stronger authority.",
                  "E-commerce SEO – Optimize online stores for higher sales.",
                  "Content Strategy & Optimization – Create content that ranks and converts.",
                  "SEO Analytics & Reporting – Track progress with transparent reporting.",
                ].map((item, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-600 to-green-600"></div>
                    <span className="text-gray-700">{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Experience Section */}
      <section id="experience" className="py-20 bg-gray-50">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-4xl font-bold text-gray-800">
              Professional Experience
            </h2>
            <p className="text-xl text-gray-600">
              Proven record in e-commerce and local SEO with result-oriented
              strategies that drive measurable growth.
            </p>
          </div>

          <div className="space-y-12">
            {experiences.map((exp, index) => (
              <div
                key={index}
                className="p-8 transition-all duration-300 transform bg-white shadow-sm rounded-2xl hover:shadow-lg hover:-translate-y-1"
              >
                <div className="flex flex-col mb-6 lg:flex-row lg:items-center lg:justify-between">
                  <div>
                    <h3 className="mb-2 text-2xl font-semibold text-gray-800">
                      {exp.title}
                    </h3>
                    <p className="mb-1 text-xl font-medium text-blue-600">
                      {exp.company}
                    </p>
                    <p className="flex items-center gap-2 text-gray-500">
                      <MapPin size={16} /> {exp.location}
                    </p>
                  </div>
                  <div className="mt-4 lg:mt-0">
                    <span className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-800 rounded-full bg-gradient-to-r from-blue-100 to-green-100">
                      <Calendar size={16} />
                      {exp.period}
                    </span>
                  </div>
                </div>

                <p className="mb-6 leading-relaxed text-gray-600">
                  {exp.description}
                </p>

                <div className="grid gap-4 md:grid-cols-3">
                  {exp.achievements.map((achievement, achIndex) => (
                    <div
                      key={achIndex}
                      className="flex items-center gap-3 p-3 rounded-lg bg-green-50"
                    >
                      <Award
                        className="flex-shrink-0 text-green-600"
                        size={20}
                      />
                      <span className="text-sm text-gray-700">
                        {achievement}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Skills Section */}
      <section id="skills" className="py-20 bg-white">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-4xl font-bold text-gray-800">
              Skills & Expertise
            </h2>
            <p className="text-xl text-gray-600">
              Comprehensive SEO skill set in technical SEO, keyword research,
              link building, and analytics, backed by years of hands-on
              experience.
            </p>
          </div>

          <div className="grid gap-6 mb-16 md:grid-cols-2 lg:grid-cols-3">
            {skills.map((skill, index) => {
              const IconComponent = skill.icon;
              const starRating = getStarRating(skill.level);
              return (
                <div
                  key={index}
                  className="group relative p-6 transition-all duration-300 bg-white rounded-2xl shadow-sm hover:shadow-xl hover:-translate-y-1 border border-gray-100"
                >
                  {/* Icon and Rating Badge */}
                  <div className="flex items-start justify-between mb-4">
                    <div className="p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg group-hover:shadow-blue-200 group-hover:scale-110 transition-all duration-300">
                      <IconComponent className="text-white" size={24} />
                    </div>
                    <div className="flex items-center gap-1 px-3 py-1 bg-yellow-50 rounded-full border border-yellow-200">
                      <Star className="text-yellow-500 fill-yellow-500" size={14} />
                      <span className="text-sm font-semibold text-yellow-700">
                        {starRating}.0
                      </span>
                    </div>
                  </div>

                  {/* Skill Name */}
                  <h3 className="text-lg font-semibold text-gray-800 mb-3 group-hover:text-blue-600 transition-colors duration-300">
                    {skill.name}
                  </h3>

                  {/* Star Rating */}
                  <div className="flex items-center gap-1 mb-2">
                    {renderStars(starRating)}
                  </div>

                  {/* Skill Level Text */}
                  <p className="text-sm text-gray-500">
                    {starRating === 5 && "Expert Level"}
                    {starRating === 4 && "Advanced Level"}
                    {starRating === 3 && "Intermediate Level"}
                    {starRating === 2 && "Basic Level"}
                    {starRating === 1 && "Beginner Level"}
                  </p>

                  {/* Subtle Background Pattern */}
                  <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-blue-50 to-transparent rounded-full opacity-50 group-hover:opacity-70 transition-opacity duration-300"></div>
                </div>
              );
            })}
          </div>

          <div className="text-center">
            <h3 className="mb-8 text-2xl font-semibold text-gray-800">
              SEO Tools I Use
            </h3>
            <div className="flex flex-wrap justify-center gap-4">
              {tools.map((tool, index) => (
                <span
                  key={index}
                  className="px-6 py-3 font-medium text-blue-800 transition-all duration-300 transform rounded-full bg-gradient-to-r from-blue-100 to-green-100 hover:shadow-lg hover:scale-105"
                >
                  {tool}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Education Section */}
      <section id="education" className="py-20 bg-gray-50">
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-4xl font-bold text-gray-800">
              Education & Certifications
            </h2>
            <p className="text-xl text-gray-600">
              Solid academic background and industry-recognized SEO
              certifications for expert digital marketing solutions in Kerala.
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            <div className="p-6 transition-all duration-300 bg-white shadow-sm rounded-xl hover:shadow-lg">
              <div className="flex items-center justify-center w-12 h-12 mb-4 bg-blue-100 rounded-lg">
                <Award className="text-blue-600" size={24} />
              </div>
              <h3 className="mb-2 text-xl font-semibold text-gray-800">MBA</h3>
              <p className="mb-1 font-medium text-blue-600">
                Acharya Institute of Technology
              </p>
              <p className="mb-2 text-gray-500">
                Finance and Marketing Management
              </p>
              <p className="text-sm text-gray-500">2019 - 2021, Bangalore</p>
            </div>

            <div className="p-6 transition-all duration-300 bg-white shadow-sm rounded-xl hover:shadow-lg">
              <div className="flex items-center justify-center w-12 h-12 mb-4 bg-green-100 rounded-lg">
                <Users className="text-green-600" size={24} />
              </div>
              <h3 className="mb-2 text-xl font-semibold text-gray-800">BBA</h3>
              <p className="mb-1 font-medium text-green-600">
                Bharathamatha College
              </p>
              <p className="mb-2 text-gray-500">Human Resource Management</p>
              <p className="text-sm text-gray-500">2016 - 2019, Palakkad</p>
            </div>

            <div className="p-6 transition-all duration-300 bg-white shadow-sm rounded-xl hover:shadow-lg">
              <div className="flex items-center justify-center w-12 h-12 mb-4 bg-purple-100 rounded-lg">
                <BarChart3 className="text-purple-600" size={24} />
              </div>
              <h3 className="mb-2 text-xl font-semibold text-gray-800">
                Google Analytics
              </h3>
              <p className="mb-1 font-medium text-purple-600">
                Individual Qualification
              </p>
              <p className="mb-2 text-gray-500">Certified by Google</p>
              <p className="text-sm text-gray-500">Skillshop</p>
            </div>
          </div>
        </div>
      </section>

      {/* Blog Preview Section */}
      <section id="blog" className="py-20 bg-white">
        <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
            </div>
            <h2 className="mb-4 text-4xl font-bold text-gray-800">
              SEO Insights & Blog
            </h2>
            <p className="max-w-2xl mx-auto text-xl text-gray-600">
              Stay updated with the latest SEO strategies and expert insights to
              boost your online visibility and grow your business.
            </p>
          </div>

          <div className="grid gap-8 mb-12 md:grid-cols-2">
            {featuredPosts.map((post) => (
              <BlogCard key={post.id} post={post} onReadMore={handleReadMore} />
            ))}
          </div>

          <div className="text-center">
            <button
              onClick={() => navigate("/blog")}
              className="inline-flex items-center gap-2 px-8 py-4 font-semibold text-white transition-all duration-300 transform rounded-full bg-gradient-to-r from-blue-600 to-green-600 hover:shadow-xl hover:scale-105"
            >
              View All SEO Articles
              <ArrowRight size={20} />
            </button>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section
        id="contact"
        className="py-20 bg-gradient-to-br from-blue-600 to-green-600"
      >
        <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
          <div className="mb-16 text-center">
            <h2 className="mb-4 text-4xl font-bold text-white">
              Let's Work Together
            </h2>
            <p className="max-w-2xl mx-auto text-xl text-blue-100">
              Looking to rank higher on Google and grow your business online?
              Hire a trusted SEO Expert in Kerala who delivers measurable
              results.
            </p>
          </div>

          <div className="grid items-start gap-12 lg:grid-cols-2">
            <div className="space-y-8">
              <div className="flex items-center gap-4 text-white">
                <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-white/20">
                  <Phone size={24} />
                </div>
                <div>
                  <p className="font-semibold">Phone</p>
                  <a
                    href="tel:+919188652985"
                    className="text-blue-100 transition-colors hover:text-white"
                  >
                    +91 9188652985
                  </a>
                </div>
              </div>

              <div className="flex items-center gap-4 text-white">
                <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-white/20">
                  <Mail size={24} />
                </div>
                <div>
                  <p className="font-semibold">Email</p>
                  <a
                    href="mailto:febinjoypuliyanmackal@gmail.com"
                    className="text-blue-100 transition-colors hover:text-white"
                  >
                    febinjoypuliyanmackal@gmail.com
                  </a>
                </div>
              </div>

              <div className="flex items-center gap-4 text-white">
                <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-white/20">
                  <MapPin size={24} />
                </div>
                <div>
                  <p className="font-semibold">Location</p>
                  <p className="text-blue-100">Palakkad, Kerala, India</p>
                </div>
              </div>

              <div className="flex items-center gap-4 text-white">
                <div className="flex items-center justify-center w-12 h-12 rounded-lg bg-white/20">
                  <Linkedin size={24} />
                </div>
                <div>
                  <p className="font-semibold">LinkedIn</p>
                  <a
                    href="https://linkedin.com/in/febin-joy"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-100 transition-colors hover:text-white"
                  >
                    linkedin.com/in/febin-joy
                  </a>
                </div>
              </div>
            </div>

            <div className="p-8 bg-white/10 backdrop-blur-sm rounded-2xl">
              <form className="space-y-6">
                <div>
                  <label className="block mb-2 font-medium text-white">
                    Your Name
                  </label>
                  <input
                    type="text"
                    className="w-full px-4 py-3 text-white border rounded-lg bg-white/20 border-white/30 placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="Enter your name"
                  />
                </div>

                <div>
                  <label className="block mb-2 font-medium text-white">
                    Email Address
                  </label>
                  <input
                    type="email"
                    className="w-full px-4 py-3 text-white border rounded-lg bg-white/20 border-white/30 placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="Enter your email"
                  />
                </div>

                <div>
                  <label className="block mb-2 font-medium text-white">
                    Project Details
                  </label>
                  <textarea
                    rows={4}
                    className="w-full px-4 py-3 text-white border rounded-lg bg-white/20 border-white/30 placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"
                    placeholder="Tell me about your SEO needs..."
                  ></textarea>
                </div>

                <button
                  type="submit"
                  className="w-full bg-white text-blue-600 font-semibold py-4 px-6 rounded-lg hover:bg-blue-50 transition-colors duration-300 transform hover:scale-[1.02]"
                  aria-label="Send contact message"
                >
                  Send Message
                </button>
              </form>
            </div>
          </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>
    </>
  );
};