"use client";

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

export function HeritageTooltip() {
  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            className="inline-flex items-center justify-center w-4 h-4 rounded-full text-gray-400 hover:text-brandblue transition-colors focus:outline-none"
            aria-label="Heritage and planning restrictions explanation"
          >
            <QuestionMarkCircleIcon className="w-4 h-4" />
          </button>
        </TooltipTrigger>
        <TooltipContent
          side="right"
          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">Planning Restrictions</p>
            <p className="text-[11px] text-gray-400 mt-0.5">Conservation, listed &amp; heritage properties</p>
          </div>
          <div className="px-4 py-3 space-y-2.5">
            <p className="text-[11px] text-gray-500 leading-snug">
              Properties in a <span className="font-semibold text-gray-700">conservation area</span> or with{" "}
              <span className="font-semibold text-gray-700">listed</span> or{" "}
              <span className="font-semibold text-gray-700">heritage</span> status may have restrictions on
              certain improvement measures, including:
            </p>
            <ul className="text-[11px] text-gray-500 leading-snug space-y-1 pl-3">
              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>Solar panel installation</li>
              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>External wall insulation</li>
              <li className="flex items-start gap-1.5"><span className="mt-0.5 shrink-0 text-gray-400">•</span>Alterations to windows, doors, or roof materials</li>
            </ul>
          </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">
              Always consult your <span className="font-semibold text-gray-600">local planning authority</span> to
              confirm which measures are permitted before commissioning any works.
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
