import ContainerPage from "../components/shared/ContainerPage";

import { ArrowLeft, ChevronDown, Info, Search, Zap } from "lucide-react";

import { Lightbulb, Share2 } from "lucide-react";
import StrategyHero from "../components/Analysis/StrategyHero";
import RankingsCard from "../components/Analysis/RankingsCard";
import BacklinksCard from "../components/Analysis/BacklinksCard";
import Preplextiy from "../assets/icons/perplextiy-light.svg"
import ChatGPT from "../assets/icons/gpt.svg"
import Gemini from "../assets/icons/gemini2.svg"
import Google from "../assets/icons/google-original-logo.svg"
import Map from "../assets/icons/maps.svg"
import SharedIcon from "../components/icons/shared-icon";
import { useState } from "react";
import MetricTooltip from "../components/shared/MetricTooltip";

const Analysis = () => {

  {/* <BecomeTheSource /> */ }
  // <SourcesChart />

  const healthcareSegments = [
    { percentage: 40, color: "#4C60E5" },
    { percentage: 20, color: "#9CCCFa" },
    { percentage: 24, color: "#93B3FE" },
    { percentage: 7, color: "#a2c4f1" },
    { percentage: 9, color: "#82d4fd" },
  ];

  const sourceSegments = [
    { percentage: 30, color: "#4285f4" },
    { percentage: 30, color: "#34A853" },
    { percentage: 25, color: "#fbbc05" },
    { percentage: 10, color: "#4285f4" },
    { percentage: 5, color: "#EA4335" },
  ];

  const healthcareItems = [
    { label: "40% Consumer Health Giants", color: "#4C60E5", highlighted: true },
    { label: "30% Mainstream Media Sections", color: "#4285F4", highlighted: false },
    { label: "20% Elite Midical Journals", color: "#34A853", highlighted: false, subtitle: "(Forbes, Inc.)" },
    { label: "10% Specialty Platforms", color: "#FBBC05", highlighted: false },
    { label: "3% Professional/Academic Crossovers", color: "#EA4335", highlighted: false },
  ];

  const sourceItems = [
    { label: "30% Branded Aesthetics Social Signals", color: "#4C60E5", icons: ["🎯", "📌", "🎨"] },
    { label: "30% Local + Medical-Cosmetic Citations", color: "#4285F4", icons: ["🏥", "📍", "⚕️"] },
    { label: "20% Web 2.0 Microblogging Sites", color: "#34A853", icons: ["✍️", "💬", "📱"] },
    { label: "20% Multimedia Content & Beauty Visuals", color: "#FBBC05", icons: ["📹", "📷", "🎬"] },
    { label: "10% Community and UGC Signals", color: "#EA4335", icons: ["👥", "💭", "⭐"] },
  ];

  interface TableRow {
    id: number;
    source: {
      name: string;
      icon: string;
      link: string;
    };
    aiq: number;
    howToGetCited: string;
    difficulty: string;
  }

  const tableData: TableRow[] = [
    {
      id: 1,
      source: {
        name: "Healthline",
        icon: "https://api.builder.io/api/v1/image/assets/TEMP/b15602913e63eb3520fb41cd31ec6bc43267262c?width=47",
        link: "#",
      },
      aiq: 81,
      howToGetCited: "Submit expert commentary, pass credential sniff test, and wait 9 months. Then get buried beneath 14 'updated' versions of the same article.",
      difficulty: "You'll see your quote once. In cached Google snippets.",
    },
    {
      id: 2,
      source: {
        name: "Local NBC News Health\nStory",
        icon: "https://api.builder.io/api/v1/image/assets/TEMP/df61dae6a5530ed011c41ccfeafd08399739dd3c?width=36",
        link: "#",
      },
      aiq: 79,
      howToGetCited: "Sponsor a blood drive. Save a puppy. Cure a rash on live TV. Boom! 'Local doctor says...' and you're famous for 5 minutes.",
      difficulty: "Surprisingly realistic. But fleeting.",
    },
    {
      id: 3,
      source: {
        name: "Local NBC News Health\nStory",
        icon: "https://api.builder.io/api/v1/image/assets/TEMP/a043d044048cc5b543593793ddb419fe940bdd67?width=36",
        link: "#",
      },
      aiq: 78,
      howToGetCited: "Convince 400 patients to leave glowing reviews. They won't. Your 1-star client will, though.",
      difficulty: "Takes a village. A very vain village.",
    },
  ];

  const SortIcon = () => (
    <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
      <path d="M7.3018 7.72026C7.3018 7.83808 7.2538 7.95589 7.18179 8.05014L4.13336 11.2546C3.98934 11.4195 3.7253 11.4431 3.55727 11.3017C3.53327 11.2782 3.53327 11.2782 3.50927 11.2546L0.460837 8.02657C0.388827 7.95589 0.34082 7.83808 0.34082 7.72026C0.34082 7.48464 0.532847 7.27258 0.772881 7.24902H6.86974C7.10977 7.24902 7.3018 7.46108 7.3018 7.72026ZM7.3018 4.1411C7.3018 4.37672 7.10977 4.58878 6.86974 4.61234H0.772881C0.532847 4.61234 0.34082 4.40028 0.34082 4.1411C0.34082 4.02329 0.388827 3.90547 0.460837 3.81123L3.50927 0.60675C3.65329 0.441814 3.91732 0.418252 4.08535 0.559626C4.10935 0.583188 4.10935 0.583188 4.13336 0.60675L7.18179 3.83479C7.2538 3.90547 7.3018 4.02329 7.3018 4.1411Z" fill="#999BAD" />
    </svg>
  );

  const [selectedItem, setSelectedItem] = useState<any>(null);
  const [showDetails, setShowDetails] = useState<any>(true);


  return (
    <>
      <Header />

      <ContainerPage>

        <div className="mb-5">
          <div className="mb-2 flex justify-between items-center">
            <h1 className="text-xl font-bold text-gray-950 mb-1">Analysis of Visibility</h1>
            <div className="flex items-center gap-[2.3rem] w-[61%] text-xs font-semibold text-gray-700 mt-1">
              <div className="w-22 flex items-center gap-2">
                <span className="w-full">
                  AIO Health
                </span>
                <MetricTooltip tooltipText="AIO Health" widthfit={true} />
              </div>
              <div className="w-20 flex items-center gap-2">Backlinks
                <MetricTooltip tooltipText="Backlinks" widthfit={true} />
              </div>
              <div className="w-14 text-[#65677D]">G Pos #</div>
              <div className="w-10 text-[#65677D]">Maps</div>
              <div className="w-20 text-[#65677D]">Ai Overview</div>
              <div className="w-16 text-[#65677D]">Chat GPT</div>
              <div className="w-16 text-[#65677D]">Gemini</div>
              <div className="w-16 text-[#65677D]">Perplexity</div>
            </div>
          </div>
          <div className="flex items-center justify-between border border-gray-300 rounded-lg bg-white p-3">
            <div>
              <h2 className="text-sm font-semibold text-gray-950">BH Medical Spa of Beverly Hills</h2>
              <div className="flex items-center gap-4 mt-1 text-xs">
                <div className="flex items-center gap-1.5">
                  <span className="font-semibold text-[#17171B]">Sector:</span>
                  <span className="text-[#65677D] font-normal">Healthcare</span>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="font-semibold text-[#17171B]">Industry:</span>
                  <span className="text-[#65677D] font-normal">Medical Spa</span>
                </div>
              </div>
            </div>

            <div className="flex items-center gap-[2.3rem] w-[60%]">
              <div className="flex items-center gap-3">
                <svg width="20" height="20" viewBox="0 0 23 24" className="flex-shrink-0">
                  <circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
                  <path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
                </svg>
                <span className="text-sm font-semibold text-gray-900">24%</span>
              </div>

              <div className="flex items-center gap-3">
                <svg width="20" height="20" viewBox="0 0 23 24" className="flex-shrink-0">
                  <circle opacity="0.8" cx="11.5" cy="12" r="9.55" stroke="#E9EAF1" strokeWidth="3.32" fill="none" />
                  <path d="M11.5518 2.44824C13.8878 2.44824 16.1428 3.30431 17.8904 4.85452C19.6379 6.40473 20.7568 8.54161 21.0354 10.861" stroke="#4C60E5" strokeWidth="3.32" strokeLinecap="round" fill="none" />
                </svg>
                <div className="flex flex-col">
                  <span className="text-sm font-semibold text-gray-900">14%</span>
                  <span className="text-[11px] font-semibold text-gray-700">50/370 links</span>
                </div>
              </div>

              <div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-gray-300 bg-white">
                <svg width="15" height="15" viewBox="0 0 15 16">
                  <path d="M13.9853 8.15431C13.9853 7.67081 13.9419 7.2059 13.8613 6.75958H7.43933V9.40027H11.109C10.9478 10.2495 10.4643 10.9686 9.73908 11.4521V13.1691H11.9521C13.2414 11.979 13.9853 10.2309 13.9853 8.15431Z" fill="#4285F4" />
                  <path d="M7.43878 14.8186C9.27982 14.8186 10.8233 14.2111 11.9515 13.1697L9.73853 11.4527C9.13105 11.8618 8.3562 12.1097 7.43878 12.1097C5.66592 12.1097 4.15962 10.9134 3.62032 9.3017H1.35156V11.0622C2.47354 13.2875 4.7733 14.8186 7.43878 14.8186Z" fill="#34A853" />
                  <path d="M3.62113 9.29494C3.48475 8.88582 3.40417 8.45191 3.40417 7.99939C3.40417 7.54688 3.48475 7.11297 3.62113 6.70385V4.94339H1.35237C0.887459 5.86081 0.620911 6.89601 0.620911 7.99939C0.620911 9.10278 0.887459 10.138 1.35237 11.0554L3.11902 9.67927L3.62113 9.29494Z" fill="#FBBC05" />
                  <path d="M7.43878 3.89567C8.44298 3.89567 9.33561 4.24281 10.0485 4.91228L12.0011 2.95966C10.8171 1.85627 9.27982 1.1806 7.43878 1.1806C4.7733 1.1806 2.47354 2.71171 1.35156 4.94327L3.62032 6.70373C4.15962 5.09204 5.66592 3.89567 7.43878 3.89567Z" fill="#EA4335" />
                </svg>
                <span className="text-sm font-semibold text-gray-900">5</span>
              </div>

              <div className="flex items-center gap-2 px-2.5 py-1.5 rounded-3xl border border-gray-300 bg-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="16" viewBox="0 0 11 16" fill="none">
                  <path d="M2.80688 11.5217C3.25814 12.086 3.71773 12.7957 3.95824 13.2243C4.25114 13.7815 4.37259 14.1578 4.59047 14.8317C4.71787 15.2008 4.83932 15.3127 5.09412 15.3127C5.37273 15.3127 5.50013 15.1246 5.59776 14.8317C5.80136 14.1994 5.95853 13.7184 6.20737 13.26C7.16703 11.4502 8.73155 10.1643 9.61262 8.40216C9.61262 8.40216 10.1925 7.32582 10.1925 5.81846C10.1925 4.41349 9.62096 3.43716 9.62096 3.43716L2.81046 11.5336L2.80688 11.5217Z" fill="#34A853" />
                  <path d="M0.49625 8.21276C1.04514 9.46294 2.09172 10.5583 2.80611 11.5228L6.59236 7.03402C6.59236 7.03402 6.05776 7.73412 5.09215 7.73412C4.0158 7.73412 3.13949 6.87686 3.13949 5.79337C3.13949 5.04802 3.5836 4.53128 3.5836 4.53128C0.797483 4.94563 0.952267 5.62072 0.487915 8.21038L0.49625 8.21276Z" fill="#FBBC04" />
                  <path d="M6.64104 0.922089C7.90313 1.3281 8.97471 2.18417 9.61766 3.43435L6.59342 7.04202C6.59342 7.04202 7.03753 6.52289 7.03753 5.77993C7.03753 4.67382 6.10406 3.83917 5.09677 3.83917C4.14068 3.83917 3.59656 4.53094 3.59656 4.53094C3.82873 4.00229 6.22789 1.10188 6.64462 0.923279L6.64104 0.922089Z" fill="#4285F4" />
                  <path d="M1.18726 2.50895C1.93975 1.61358 3.25898 0.687256 5.08067 0.687256C5.96056 0.687256 6.62851 0.920623 6.62851 0.920623L3.59236 4.52828C3.38757 4.4172 1.38967 2.86138 1.18726 2.50418V2.50895Z" fill="#1A73E8" />
                  <path d="M0.496744 8.21327C0.496744 8.21327 0.000244141 7.22741 0.000244141 5.80816C0.000244141 4.46273 0.52651 3.28399 1.19089 2.52197L3.596 4.54607L0.500316 8.21327H0.496744Z" fill="#EA4335" />
                </svg>
                <span className="text-sm font-semibold text-gray-900">8</span>
              </div>

              <div className="flex items-center gap-5">
                <div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
                  <img src={Gemini} alt="G" className="w-4 h-4" />
                  Invisible
                </div>
                <div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
                  <img src={ChatGPT} alt="ChatGPT" className="w-4 h-4" />
                  Invisible</div>
                <div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
                  <img src={Gemini} alt="Gemini" className="w-4 h-4" />Invisible</div>
                <div className="text-xs text-gray-700 opacity-30 border-2 border-gray-200 px-2 py-1 rounded-full flex items-center justify-between gap-2">
                  <img src={Preplextiy} alt="Perplexity" className="w-4 h-4" />
                  Invisible</div>
              </div>

              <button className="flex items-center gap-1 px-1.5 py-1 rounded-md border border-gray-300 bg-white shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                  <path d="M6.59226 2H5.69226C3.75926 2 2.19226 3.567 2.19226 5.5V10.5C2.19226 12.433 3.75926 14 5.69226 14H10.6923C12.6253 14 14.1923 12.4333 14.1923 10.5003C14.1923 10.2415 14.1923 9.95005 14.1923 9.6" stroke="#65677D" stroke-width="1.5" stroke-linecap="round" />
                  <path d="M10.1923 2H14.1923M14.1923 2V6M14.1923 2L8.19128 8" stroke="#65677D" stroke-width="1.5" stroke-linejoin="round" />
                </svg>
                <span className="text-xs font-semibold text-gray-900">Share</span>
              </button>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-4">



          {showDetails ?
            <div className="flex flex-col gap-5 rounded-xl bg-white border border-gray-300 shadow-sm overflow-hidden justify-between">
              <div className="flex items-center gap-2 px-4 py-3 border-b border-gray-300 h-[60px]">
                <h2 className="text-base font-semibold text-gray-950">Ai Frequently Cited Sources in Healthcare</h2>
              </div>

              <div className="flex flex-col justify-between h-full gap-8 px-6 pb-6">
                <div className="flex items-center gap-5">
                  <DonutChart segments={healthcareSegments} size={200} strokeWidth={53} />

                  <div className="flex flex-col gap-1.5 flex-1">
                    {healthcareItems.map((item, index) => (
                      <div
                        key={index}
                        className={`flex items-center gap-2.5 px-2 py-1.5 rounded-md border hover:border-[#C9D7FB] hover:bg-[#ECF1FD] cursor-pointer ${item.highlighted ? "border-[#C9D7FB] bg-[#ECF1FD]" : "border-gray-300"
                          }`}
                        onClick={() => {
                          setSelectedItem(item);
                          setShowDetails(false);
                        }}
                      >
                        <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: item.color }} />
                        <div className="flex items-center gap-0.5 flex-1">
                          <span className="text-sm">
                            <span className="font-bold text-gray-900">{item.label.split(" ")[0]}</span>
                            <span className="text-gray-900 font-medium"> {item.label.split(" ").slice(1).join(" ")}</span>
                          </span>
                          {item.subtitle && (
                            <span className="text-sm text-gray-700 ml-1">{item.subtitle}</span>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="flex flex-col px-3 py-3 rounded-xl bg-[#a8abb3]">
                  <div className="flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
                      <path d="M7.05074 3.62323C5.68916 3.62323 4.49145 4.39338 3.86719 5.52409" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M4.27642 14.6968C4.55366 14.6212 4.83089 14.5456 5.10813 14.47C9.24146 13.2854 9.03984 13.3862 9.11545 13.2098C9.72033 11.1936 10.1236 11.748 11.2073 10.2106C11.7114 9.47974 12.0894 8.64804 12.2407 7.76592C12.3163 7.41308 12.3415 7.03503 12.3415 6.65698C12.3415 3.50657 9.79594 0.961044 6.67073 0.961044C3.54553 0.961044 1 3.50657 1 6.63178C1 7.51389 1.17642 8.42121 1.55447 9.22771C1.83171 9.83259 2.23496 10.3871 2.68862 10.8659C3.08885 11.2852 3.58998 11.6613 3.90862 12.1576" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                      <path d="M5.28516 17.039L8.81361 16.0056" stroke="#17171B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span className="text-sm font-semibold text-gray-950">How Ai and LLMs Choose Their Sources</span>
                  </div>
                  <p className="text-xs text-gray-900 leading-[18px]">
                    Our analysis reveals distinct patterns in how leading AIs source and prioritize industry information. For example, ChatGPT leans heavily on user-generated content, while Google's AI Overviews favors authoritative tech review sites. Across the board, backlink quality plays a crucial role, with...{" "}
                    <span className="text-[#4C60E5] underline cursor-pointer">read more</span>
                  </p>
                </div>
              </div>
            </div>
            :
            (
              <div className="w-full bg-white rounded-xl shadow-elevation  flex flex-col border border-gray-300">
                <div className="flex items-center gap-4 px-4 py-2 ">
                  <div className="flex items-center gap-2">
                    <button
                      className="flex items-center justify-center gap-1.5 w-7 h-6 rounded-md border border-gray-300 bg-transparent hover:bg-gray-200 transition-colors"
                      onClick={() => setShowDetails(true)}
                    >
                      <ArrowLeft className="w-4 h-4 text-gray-800" strokeWidth={1.275} />
                    </button>
                    <h1 className="text-sm font-semibold">
                      <span className="font-normal text-gray-800">Consumer Health Giants... </span>
                      <span className="font-bold text-[#2B2D3B]">Good Lick With That </span>
                      <span className="font-normal text-[#2B2D3B]">Tier</span>
                    </h1>
                  </div>
                </div>

                <div className="relative w-full mx-auto border-t border-[#d0d7d8] shadow-xl ">
                  <div className="h-1.5 bg-gradient-to-b from-[#0A2527]/8 to-transparent"></div>
                </div>

                <div className="flex flex-col flex-1 px-2 pb-2">
                  {/* Table Header */}
                  <div className="hidden md:flex items-center px-6 py-2 border-b border-gray-300  text-body-s font-semibold text-gray-800 gap-3">
                    <div className="flex items-center font-semibold gap-2 w-[160px] flex-shrink-0 text-[#65677D]">
                      <span>Source</span>
                      <SortIcon />
                    </div>
                    <div className="flex items-center font-semibold gap-2 w-[60px] flex-shrink-0 justify-center text-[#65677D]">
                      <span>AIQ</span>
                      <SortIcon />
                    </div>
                    <div className="flex items-center font-semibold gap-2 w-[233px] flex-shrink-0 text-[#65677D]">
                      <span>How to Get Cited</span>
                      <SortIcon />
                    </div>
                    <div className="flex items-center font-semibold gap-2 w-[180px] flex-shrink-0 text-[#65677D]">
                      <span>Difficulty</span>
                      <SortIcon />
                    </div>
                  </div>

                  {/* Table Body */}
                  <div className="overflow-y-auto h-full px-2">
                    {tableData.map((row) => (
                      <div
                        key={row.id}
                        className="flex flex-col md:flex-row items-start md:items-start border-b border-gray-200 bg-white px-6 pt-3 pb-6 hover:bg-gray-50 transition h-[30%] gap-3"
                      >
                        {/* Source */}
                        <div className="flex items-center gap-2 w-[160px] flex-shrink-0">
                          <div className="w-5 h-5 rounded-sm overflow-hidde">
                            <img
                              src={row.source.icon}
                              alt={row.source.name}
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <a
                            href={row.source.link}
                            className="text-sm text-[#4C60E5] underline hover:no-underline truncatse"
                          >
                            {row.source.name}
                          </a>
                        </div>

                        {/* AIQ */}
                        <div className="w-[60px] text-sm text-[#65677D]  flex-shrink-0">
                          {row.aiq}
                        </div>

                        {/* How to Get Cited */}
                        <div className="w-[233px] text-sm text-[#65677D] leading-snug flex-shrink-0">
                          {row.howToGetCited}
                        </div>

                        {/* Difficulty */}
                        <div className="w-[180px] text-sm text-[#65677D] leading-snug flex-shrink-0">
                          {row.difficulty}
                        </div>
                      </div>
                    ))}
                  </div>

                  {/* Footer */}
                  <div className="flex justify-center items-center py-3.5 px-2 rounded-lg bg-[#F2F3F7]">
                    <p className="text italic text-[#65677D] text-center max-w-[800px]">
                      "Mass SEO factories disguised as medical authorities."
                    </p>
                  </div>
                </div>

              </div>
            )}


          <div className="flex flex-col gap-5 rounded-xl bg-white border border-gray-300 shadow-sm overflow-hidden">
            <div className="flex flex-col gap-7 px-4 py-3 border-b border-gray-300 h-[60px]">
              <div>
                <h2 className="text-base font-bold text-gray-950">Become the Source</h2>
                <p className="text-xs text-gray-700">
                  Custom Authority Beacons & Backlink Strategy, Tailored for <span className="font-bold text-gray-950">Medical Spas</span>
                </p>
              </div>
            </div>

            <div className="flex flex-col gap-4 px-6 pb-6">
              <div className="flex items-center gap-5">
                <DonutChart segments={sourceSegments} size={200} strokeWidth={51.76} />

                <div className="flex flex-col gap-2 flex-1">
                  {sourceItems.map((item, index) => (
                    <div key={index} className="flex items-start gap-1">
                      <div className="w-[10px] h-[10px] rounded-full flex-shrink-0 mt-[10px]" style={{ backgroundColor: item.color }} />
                      <div className="flex flex-col gap-0 flex-1">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-0.5">
                            <span className="text-sm font-bold text-gray-900">{item.label.split(" ")[0]}</span>
                            <MetricTooltip tooltipText={item.label.split(" ").slice(1).join(" ")} />
                          </div>
                          <div className="flex items-center gap-1">
                            {item.icons.map((icon, i) => (
                              <div key={i} className="w-[30px] h-[30px] rounded-md border border-gray-300 bg-white flex items-center justify-center text-md">
                                {icon}
                              </div>
                            ))}
                          </div>
                        </div>
                        <span className="text-sm text-gray-900">{item.label.split(" ").slice(1).join(" ")}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="flex items-center justify-center">
                <button className="w-[55%] px-2 py-6 rounded-full bg-white border-4 border-transparent bg-gradient-to-r from-blue-500 via-red-500 via-orange-400 via-yellow-400 to-green-500 bg-clip-padding relative group mx-auto hover:bg-[#ECF1FD] transition-colors">
                  <div className="absolute inset-0 bg-white rounded-full m-[3px] flex items-center justify-center gap-3 hover:bg-[#ECF1FD] transition-colors">
                    <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center">
                      <Zap className="w-4 h-4 text-white fill-white" />
                    </div>
                    <span className="text-md font-semibold text-gray-900">
                      Add your Keywords and Become the Source
                    </span>
                  </div>
                </button>
              </div>
            </div>
          </div>
        </div>

        <StrategyHero />

        <div className="flex items-start gap-5">
          <RankingsCard />
          <BacklinksCard />
        </div>
      </ContainerPage>
    </>
  );
};

export default Analysis;


interface DonutChartProps {
  segments: {
    percentage: number;
    color: string;
  }[];
  size?: number;
  strokeWidth?: number;
}


function Header() {
  return (
    <div className="w-full border-b border-gray-300 bg-[#F6F8FE] px-2 py-2.5 mt-[-8px]">
      <div className="flex items-center justify-center gap-1.5">
        <div className="flex h-[30px] w-[312px] items-center gap-1.5 rounded-lg border border-gray-300 bg-white p-0.5">
          <div className="flex items-center gap-1.5 flex-1">
            <div className="flex items-end rounded-lg">
              <div className="flex px-1.5 items-center justify-center">
                <span className="text-xs font-semibold text-gray-700">AIQ</span>
              </div>
              <div className="flex px-1.5 items-center justify-center rounded-[5px] bg-gray-300">
                <span className="text-xs font-semibold text-gray-700">10</span>
              </div>
            </div>
            <div className="w-px h-5 bg-gray-300" />
            <div className="flex px-1.5 justify-between items-center flex-1 cursor-pointer">
              <span className="text-sm text-gray-900 tracking-tight">mysite.com</span>
              <ChevronDown className="w-3 h-3 text-gray-800" />
            </div>
          </div>
        </div>
        <button className="flex h-7 px-1 items-center justify-center gap-1.25 rounded-md border border-gray-300 bg-white shadow-sm">
          <div className="flex px-1 items-center gap-1.25">
            <Search className="w-4 h-4 text-gray-800" strokeWidth={1.5} />
            <span className="text-xs font-semibold text-gray-900">Analyze</span>
          </div>
        </button>
      </div>

    </div>
  );
}



function DonutChart({ segments, size = 200, strokeWidth = 53 }: DonutChartProps) {
  const radius = size / 2 - strokeWidth / 2;
  const centerX = size / 2;
  const centerY = size / 2;

  let accumulatedAngle = 0;

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="flex-shrink-0">
      {segments.map((segment, index) => {
        const angle = (segment.percentage / 100) * 360;
        const startAngle = accumulatedAngle - 90;
        const endAngle = startAngle + angle;

        const startRad = (startAngle * Math.PI) / 180;
        const endRad = (endAngle * Math.PI) / 180;

        const x1 = centerX + radius * Math.cos(startRad);
        const y1 = centerY + radius * Math.sin(startRad);
        const x2 = centerX + radius * Math.cos(endRad);
        const y2 = centerY + radius * Math.sin(endRad);

        const largeArcFlag = angle > 180 ? 1 : 0;

        const pathData = [
          `M ${x1} ${y1}`,
          `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`
        ].join(' ');

        accumulatedAngle += angle;

        return (
          <path
            key={index}
            d={pathData}
            fill="none"
            stroke={segment.color}
            strokeWidth={strokeWidth}
            strokeLinecap="butt"
          />
        );
      })}
      <circle
        cx={centerX}
        cy={centerY}
        r={size * 0.268}
        fill="none"
        stroke="#0B246F"
        strokeWidth={13.37}
        opacity={0.07}
      />
    </svg>
  );
}
