"use client";

import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/app/shadcn_components/ui/tooltip";

export function LodgedEpcTooltip() {
  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-brandbrown/60 hover:text-brandbrown transition-colors focus:outline-none"
            aria-label="Lodged EPC rating explanation"
          >
            <QuestionMarkCircleIcon className="w-3.5 h-3.5" />
          </button>
        </TooltipTrigger>
        <TooltipContent
          side="left"
          className="max-w-xs p-0 overflow-hidden border-gray-200 shadow-xl"
          sideOffset={8}
        >
          <div className="px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100">
            <p className="text-xs font-bold text-gray-700 uppercase tracking-widest">Lodged EPC Rating</p>
            <p className="text-[11px] text-gray-400 mt-0.5">From the official EPC register</p>
          </div>
          <div className="px-4 py-3 space-y-2.5">
            <p className="text-[11px] text-gray-500 leading-snug">
              This is the rating recorded on the{" "}
              <span className="font-semibold text-gray-700">official EPC register</span> at the time of the last survey.
            </p>
            <p className="text-[11px] text-gray-500 leading-snug">
              Your <span className="font-semibold text-gray-700">current rating</span> may differ because we re-model this property under{" "}
              <span className="font-semibold text-gray-700">SAP 10</span>, which uses updated energy factors and can produce a different result than the original survey.
            </p>
            <p className="text-[11px] text-gray-500 leading-snug">
              We also re-model when the EPC has{" "}
              <span className="font-semibold text-gray-700">expired</span> or is{" "}
              <span className="font-semibold text-gray-700">invalid</span>, or when you have told us the property has{" "}
              <span className="font-semibold text-gray-700">changed</span> since the last survey.
            </p>
          </div>
          <div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100">
            <p className="text-[11px] text-gray-400 leading-snug">
              SAP 10 is the latest version of the{" "}
              <span className="font-semibold text-gray-600">Standard Assessment Procedure</span>, introduced to better reflect modern energy use and lower-carbon fuels.
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
