"use client";

import { useState } from "react";
import { ArrowUpRight } from "lucide-react";
import { FaRegCircleCheck, FaChevronUp } from "react-icons/fa6";

export default function ServicesSection() {
  const [activeTab, setActiveTab] = useState("seo");

  const tabs = [
    {
      id: "seo",
      label: "SEO Services",
      title: "SEO Services",
      desc: "From technical fixes to AI-powered content — rank higher and stay there.",
    },
    {
      id: "smo",
      label: "SMO Services",
      title: "SMO Services",
      desc: "Build brand presence, drive engagement, and convert followers into customers.",
    },
    {
      id: "branding",
      label: "Branding Services",
      title: "Branding Services",
      desc: "Create a brand identity that stands out and builds lasting trust.",
    },
    {
      id: "tools",
      label: "Tools",
      title: "Professional-Grade SEO Tools",
      desc: "Built for agencies and in-house teams who need data they can trust and act on.",
    },
  ];

  const data = {
    seo: [
      {
        title: "On-Page SEO",
        desc: "Comprehensive optimization of your content, meta tags, headings, internal linking, and site architecture to maximize relevance for target keywords.",
        points: [
          "Title & meta optimization",
          "Content gap analysis",
          "Schema markup",
          "Internal linking",
          "Core Web Vitals",
        ],
        image: "/services-1.png",
      },
      {
        title: "Technical SEO",
        desc: "Deep crawl analysis and fixes for crawlability, indexation, site speed, structured data, and all technical factors impacting search performance.",
        points: [
          "Site audit",
          "XML sitemap & robots",
          "Page speed",
          "Structured data",
          "Redirect audit",
        ],
        image: "/services-1.png",
      },
      {
        title: "Local SEO",
        desc: "Dominate local search results with Google Business Profile optimization, citation building, and location-specific content strategies.",
        points: [
          "GBP optimization",
          "Citation cleanup",
          "Local keywords",
          "Review management",
          "Landing pages",
        ],
        image: "/services-1.png",
      },
      {
        title: "E-Commerce SEO",
        desc: "Specialized SEO for Shopify, WooCommerce, and custom stores — from product page optimization to category structure and faceted navigation.",
        points: [
          "Title & meta optimization",
          "Content gap analysis",
          "Schema markup",
          "Internal linking",
          "Core Web Vitals",
        ],
        image: "/services-1.png",
      },
      {
        title: "AI SEO Optimization",
        desc: "Leverage our proprietary AI to automatically generate optimized content briefs, identify topical authority gaps, and predict ranking opportunities.",
        points: [
          "Site audit",
          "XML sitemap & robots",
          "Page speed",
          "Structured data",
          "Redirect audit",
        ],
        image: "/services-1.png",
      },
    ],

    smo: [
      {
        title: "Social Media Management",
        desc: "Full-service management of your social channels — content creation, scheduling, community management, and analytics across all platforms.",
        points: [
          "Content calendar",
          "Post scheduling",
          "Engagement growth",
          "Analytics tracking",
        ],
        image: "/services-1.png",
      },
      {
        title: "Influencer Marketing",
        desc: "End-to-end influencer campaign management — from talent sourcing and vetting to contract negotiation, content approval, and ROI tracking.",
        points: [
          "Ad creatives",
          "Audience targeting",
          "A/B testing",
          "ROI tracking",
        ],
        image: "/services-1.png",
      },
      {
        title: "Paid Social Campaigns",
        desc: "Data-driven paid advertising on Meta, TikTok, LinkedIn, and Pinterest with rigorous A/B testing and conversion optimization.",
        points: [
          "Influencer outreach",
          "Campaign setup",
          "Performance tracking",
        ],
        image: "/services-1.png",
      },
      {
        title: "Content & Community",
        desc: "Build genuine brand authority through strategic content marketing, thought leadership pieces, and an engaged, loyal community.",
        points: [
          "Influencer outreach",
          "Campaign setup",
          "Performance tracking",
        ],
        image: "/services-1.png",
      },
    ],

    branding: [
      {
        title: "Logo & Visual Identity",
        desc: "From initial concept to final brand guidelines — we craft visual identities that are distinctive, memorable, and built to scale.",
        points: [
          "Logo design",
          "Brand guidelines",
          "Typography",
          "Color palette",
        ],
        image: "/services-1.png",
      },
      {
        title: "UI/UX Design",
        desc: "User-centered design for web and mobile — wireframes, prototypes, and final UI that converts visitors into customers.",
        points: ["Wireframing", "Prototyping", "User research", "Testing"],
        image: "/services-1.png",
      },
      {
        title: "Reputation Management",
        desc: " Monitor, protect, and improve your online reputation across review platforms, news, and social media with proactive response strategies.",
        points: ["Brand voice", "Storytelling", "Content planning"],
        image: "/services-1.png",
      },
    ],

    tools: [
      {
        title: "Keyword Research",
        desc: "Uncover high-value keywords with search volume, difficulty scores, and AI-powered suggestions.",
        points: ["Site health", "Errors", "Recommendations"],
        image: "/services-1.png",
      },
      {
        title: "SEO Audit Tool",
        desc: "Get a comprehensive score out of 100 with actionable fixes for errors, warnings, and notices.",
        points: ["Volume", "Difficulty", "Suggestions"],
        image: "/services-1.png",
      },
      {
        title: "Rank Tracker",
        desc: "Monitor your keyword positions daily with historical ranking graphs and SERP analysis.",
        points: ["Backlinks", "Ref domains", "Spam score"],
        image: "/services-1.png",
      },
    ],
  };

  return (
    <section className="py-16 px-6">
      <div className="max-w-6xl mx-auto text-center">
        <div className="flex flex-wrap justify-center gap-3 mb-10">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-5 py-2 rounded-full text-sm font-medium border transition ${
                activeTab === tab.id
                  ? "bg-[#794AFF] text-white border-[#794AFF]"
                  : "bg-white text-[#3B3B3B] border-[#DDDDDD] hover:bg-gray-50"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <h2 className="text-2xl lg:text-3xl font-semibold text-[#3B3B3B]">
          {tabs.find((t) => t.id === activeTab)?.title}
        </h2>

        <p className="text-[#676767] mt-2">
          {tabs.find((t) => t.id === activeTab)?.desc}
        </p>

        <div className="mt-10 grid md:grid-cols-3 gap-6">
          {data[activeTab].map((item, i) => (
            <div
              key={i}
              className="bg-white border border-[#DDDDDD] rounded-2xl p-4 text-left shadow-sm hover:shadow-md transition flex flex-col h-full"
            >
              <img
                src={item.image}
                alt={item.title}
                className="w-full h-50 object-cover rounded-lg mb-4 border border-[#E5E7EB]"
              />

              <h3 className="text-lg lg:text-xl font-semibold text-[#3B3B3B]">
                {item.title}
              </h3>

              <p className="text-md lg:text-base text-[#676767] mt-2 min-h-20">
                {item.desc}
              </p>

              <button className="mt-3 text-sm text-[#794AFF] font-medium flex items-center gap-1">
                Hide details
                <span className="text-xs">
                  <FaChevronUp />
                </span>
              </button>

              <ul className="mt-3 space-y-2 text-md lg:text-base text-[#676767]">
                {item.points.map((p, idx) => (
                  <li key={idx} className="flex items-center gap-2">
                    <FaRegCircleCheck />
                    {p}
                  </li>
                ))}
              </ul>

              <div className="mt-auto">
                <button className="mt-6 inline-flex items-center gap-2 bg-[#794AFF] text-white px-4 py-2 rounded-full text-sm hover:opacity-90 transition group">
                  Get Started
                  <ArrowUpRight className="w-4 h-4 transition-transform duration-300 group-hover:-translate-y-1 group-hover:translate-x-1" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}