import MetricTooltip from "../shared/MetricTooltip";

function BacklinksCard() {
    const competitors = [
        { name: "Milk + Honey Spa", dr: "95", aiq: "79", backlinks: "400", image: "https://api.builder.io/api/v1/image/assets/TEMP/985c97cce1ce854eaa65ce4b054e28a828957b68?width=44" },
        { name: "MEdbeauty LA", dr: "98", aiq: "72", backlinks: "350", image: "https://api.builder.io/api/v1/image/assets/TEMP/f9d249f4e7da75b492dd0037675f9f886cf288cf?width=44", highlighted: true },
        { name: "Beverly Hils Med Spa", dr: "22", aiq: "10", backlinks: "20", image: "https://api.builder.io/api/v1/image/assets/TEMP/adcc4580d54fa23a89a9b0b9e8835525d3a4e01c?width=44", isYou: true },
    ];

    return (
        <div className="flex flex-col justify-between p-4 rounded-xl bg-white shadow-[0_1px_1px_0_rgba(5,23,84,0.02),0_1px_2.5px_0_rgba(5,11,18,0.12),0_0_0_1px_#E9EAF1] flex-1">
            <div className="flex flex-col items-center gap-0 self-stretch justify-between pr-[50px]">
                <div className="flex flex-col items-start gap-[7px] px-2.5 self-stretch">
                    <h2 className="text-base font-semibold text-grey-950 leading-[22px]">
                        Unique Backlinks Count
                    </h2>
                    <p className="text-sm text-[#65677D] leading-5">
                        If everyone has good content and proper SEO, what determines who ranks #1? Backlinks. Period.
                    </p>
                </div>

                <div className="flex flex-col items-start gap-1.5 pt-1.5 self-stretch">
                    {/* Header Row */}
                    <div className="flex items-center gap- self-stretch justify-between pr-[90px]">
                        <span className="w-60 text-xs font-semibold text-[#65677D] leading-[18px]">Top Competitor</span>
                        <div className="flex w-[63px] items-center gap-2 justify-center ">
                            <span className="text-xs font-semibold text-[#65677D] leading-[18px]">DR</span>
                            <MetricTooltip tooltipText="DR" />
                        </div>
                        <div className="flex w-[72px] items-center gap-2 justify-center ">
                            <span className="text-xs font-semibold text-[#65677D] leading-[18px]">AIQ</span>
                            <MetricTooltip tooltipText="AIQ" />

                        </div>
                        <span className="w-[82px] text-xs font-semibold text-[#65677D] leading-[18px] mr-[10px]">Backlinks</span>
                    </div>

                    {/* Competitor Rows */}
                    <div className="flex flex-col items-center self-stretch">
                        {competitors.map((competitor, index) => (
                            <div
                                key={index}
                                className="flex py-3 justify-between items-center self-stretch border-t border-b border-grey-300 bg-white pr-[40px]"
                            >
                                <div className="flex items-center gap-4">
                                    <div className="flex items-center gap-2">
                                        <div className="relative w-[18px] h-[18px] rounded-[5.58px] overflow-hidden">
                                            <img src={competitor.image} alt={competitor.name} className="w-full h-full object-cover" />
                                        </div>
                                        <a href="#" className="text-xs text-[#4C60E5] underline leading-[18px] hover:text-primary/80">
                                            {competitor.name}
                                        </a>
                                    </div>
                                </div>

                                <div className="flex w-[359px] justify-between items-center">
                                    <span className={`w-7 text-sm leading-5 ${competitor.isYou ? 'font-semibold text-[#65677D]' : 'text-grey-700'}`}>
                                        {competitor.dr}
                                    </span>
                                    <span className={`w-9 text-sm leading-5 ${competitor.isYou ? 'font-semibold text-[#65677D]' : 'text-grey-700'}`}>
                                        {competitor.aiq}
                                    </span>
                                    <div className="relative flex w-36 items-center gap-2 px-1 border border-grey-300 rounded-[5px] h-[22px]">
                                        <div
                                            className="absolute left-0 top-0 h-full rounded-[5px] opacity-19"
                                            style={{
                                                width: competitor.isYou ? '23%' : competitor.highlighted ? '39%' : '62%',
                                                backgroundColor: competitor.isYou ? '#dce8fd' : '#fff3d0'
                                            }}
                                        />
                                        <span className="relative z-10 text-sm font-semibold text-grey-900 leading-5">
                                            {competitor.backlinks}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* Bottom Line */}
            <div className="flex flex-col items-start gap-1.5 p-4 rounded-xl bg-[#E6ECFB] self-stretch mt-4">
                <div className="flex items-center gap-1.5">
                    <svg width="16" height="16" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 16.3C10.1217 16.3 12.1566 15.4572 13.6569 13.9569C15.1571 12.4566 16 10.4218 16 8.30005C16 6.17832 15.1571 4.14349 13.6569 2.64319C12.1566 1.1429 10.1217 0.300049 8 0.300049C5.87827 0.300049 3.84344 1.1429 2.34315 2.64319C0.842855 4.14349 0 6.17832 0 8.30005C0 10.4218 0.842855 12.4566 2.34315 13.9569C3.84344 15.4572 5.87827 16.3 8 16.3ZM6.8 11.9C6.8 11.5818 6.92643 11.2766 7.15147 11.0515C7.37652 10.8265 7.68174 10.7 8 10.7C8.31826 10.7 8.62348 10.8265 8.84853 11.0515C9.07357 11.2766 9.2 11.5818 9.2 11.9C9.2 12.2183 9.07357 12.5235 8.84853 12.7486C8.62348 12.9736 8.31826 13.1 8 13.1C7.68174 13.1 7.37652 12.9736 7.15147 12.7486C6.92643 12.5235 6.8 12.2183 6.8 11.9ZM7.2128 4.15605C7.2462 3.9716 7.34331 3.80473 7.48718 3.68457C7.63105 3.56441 7.81255 3.49858 8 3.49858C8.18745 3.49858 8.36895 3.56441 8.51282 3.68457C8.65669 3.80473 8.7538 3.9716 8.7872 4.15605L8.8 4.30005V8.30005L8.7872 8.44405C8.7538 8.6285 8.65669 8.79537 8.51282 8.91553C8.36895 9.03569 8.18745 9.10151 8 9.10151C7.81255 9.10151 7.63105 9.03569 7.48718 8.91553C7.34331 8.79537 7.2462 8.6285 7.2128 8.44405L7.2 8.30005V4.30005L7.2128 4.15605Z" fill="#2B2D3B" />
                    </svg>
                    <h3 className="text-sm font-bold text-grey-950 leading-[18px]">Bottom Line</h3>
                </div>
                <p className="text-xs text-grey-900 leading-[18px]">
                    Your competitors have more backlinks. That's why they rank higher in Google. That's why AI mentions them instead of you. We fix this by building you a network of 250+ quality backlinks that changes both problems at once. Simple problem, simple solution, complex execution that we handle entirely.
                </p>
            </div>
        </div>
    );
}

export default BacklinksCard;