import Image from "next/image";
import { Building2, Construction, Home } from "lucide-react";
import SectionHeader from "@/components/home/SectionHeader";

const leftItems = ["Lead Management", "Property Inventory", "Sales & CRM", "Reports & Analytics"];
const rightItems = ["Resident Management", "Maintenance & Billing", "Complaints & Visitors", "Notices & Communication"];

export default function PlatformDiagram({
  platformLabel,
  subtitle,
  title,
}: {
  platformLabel: string;
  subtitle: string;
  title: string;
}) {
  return (
    <section className="mx-auto max-w-[1360px] px-6 py-7 xl:px-8">
      <SectionHeader
        title={title}
        subtitle={subtitle}
      />

      <div className="relative mx-auto mt-5 hidden h-[302px] max-w-[1180px] lg:block">
        <svg aria-hidden="true" viewBox="0 0 1180 302" preserveAspectRatio="none" className="absolute inset-0 h-full w-full">
          <g fill="none" stroke="#AAB7E7" strokeWidth="1.25" strokeDasharray="4 5">
            <path d="M590 104V136" />
            <path d="M590 136 382 187" />
            <path d="M590 136 798 187" />
            <path d="M590 136V230" />
            <path d="M178 189H312" />
            <path d="M868 189h134" />
            <path d="M382 241 513 259" />
            <path d="M667 259 798 241" />
          </g>
          <g fill="none" stroke="#D4DCF3" strokeWidth="1.1">
            <path d="M178 124h28v130h-28" />
            <path d="M1002 124h-28v130h28" />
            <path d="M206 144h40M206 180h40M206 216h40M206 252h40" />
            <path d="M934 144h40M934 180h40M934 216h40M934 252h40" />
          </g>
        </svg>

        <div className="absolute left-0 top-[110px] w-[178px] space-y-2">
          {leftItems.map((item) => <SidePill key={item}>{item}</SidePill>)}
        </div>
        <div className="absolute right-0 top-[110px] w-[178px] space-y-2">
          {rightItems.map((item) => <SidePill key={item}>{item}</SidePill>)}
        </div>

        <div className="absolute left-1/2 top-0 flex h-[125px] w-[125px] -translate-x-1/2 flex-col items-center justify-center rounded-full border border-[#e5e8fb] bg-white text-center shadow-[0_11px_25px_rgba(80,87,178,0.16)]">
          <Image src={"/images/puresaas_logo.webp"} alt="PureSaaS" loading="eager" width={2804} height={600} sizes="82px" className="h-auto w-[126px]" />
          <p className="text-[8px] font-semibold text-[#7d89a7]">{platformLabel}</p>
        </div>

        <DiagramNode
          className="left-[245px] top-[151px]"
          icon={Building2}
          title="PureEstate"
          subtitle="Real Estate CRM/ERP"
          tone="violet"
        />
        <DiagramNode
          className="left-1/2 top-[215px] -translate-x-1/2"
          icon={Construction}
          title="BuildPro"
          subtitle="Builder CRM/ERP"
          tone="blue"
        />
        <DiagramNode
          className="right-[245px] top-[151px]"
          icon={Home}
          title="SocietyPro"
          subtitle="Society Management"
          tone="green"
        />

        <div className="absolute bottom-1 left-[186px] rounded-md border border-[#e4e9f5] bg-white px-4 py-2 text-[10px] font-semibold text-[#687691]">Project Management</div>
        <div className="absolute bottom-1 left-[346px] rounded-md border border-[#e4e9f5] bg-white px-4 py-2 text-[10px] font-semibold text-[#687691]">Bookings &amp; Sales</div>
        <div className="absolute bottom-1 right-[346px] rounded-md border border-[#e4e9f5] bg-white px-4 py-2 text-[10px] font-semibold text-[#687691]">Construction Tracking</div>
        <div className="absolute bottom-1 right-[215px] rounded-md border border-[#e4e9f5] bg-white px-4 py-2 text-[10px] font-semibold text-[#687691]">Team &amp; Tasks</div>
      </div>

      <div className="mx-auto mt-6 grid max-w-xl grid-cols-1 gap-3 sm:grid-cols-3 lg:hidden">
        <div className="rounded-xl border border-[#e5e8fb] bg-white p-4 text-center shadow-sm sm:col-span-3">
          <Image src={"/images/puresaas_logo.webp"} alt="PureSaaS" loading="eager" width={2804} height={561} sizes="112px" className="mx-auto h-auto w-28" />
          <p className="text-[10px] text-[#7d89a7]">{platformLabel}</p>
        </div>
        <MobileNode title="PureEstate" subtitle="Real Estate CRM/ERP" />
        <MobileNode title="BuildPro" subtitle="Builder CRM/ERP" />
        <MobileNode title="SocietyPro" subtitle="Society Management" />
      </div>
    </section>
  );
}

function SidePill({ children }: { children: React.ReactNode }) {
  return (
    <div className="rounded-md border border-[#e4e9f5] bg-white px-3 py-2 text-[10px] font-semibold text-[#687691] shadow-[0_2px_6px_rgba(60,74,122,0.03)]">
      {children}
    </div>
  );
}

function DiagramNode({
  className,
  icon: Icon,
  title,
  subtitle,
  tone,
}: {
  className: string;
  icon: typeof Building2;
  title: string;
  subtitle: string;
  tone: "violet" | "blue" | "green";
}) {
  const toneClass = {
    violet: "border-[#9c83f2] text-[#7257df]",
    blue: "border-[#6e9cf0] text-[#4b7fdf]",
    green: "border-[#5dbd87] text-[#279b62]",
  };

  return (
    <div className={`absolute flex h-[110px] w-[110px] flex-col items-center justify-center rounded-full border bg-white text-center shadow-[0_8px_18px_rgba(66,81,126,0.09)] ${toneClass[tone]} ${className}`}>
      <Icon size={25} strokeWidth={1.7} />
      <h4 className="mt-1 text-[12px] font-extrabold">{title}</h4>
      <p className="mt-0.5 max-w-[74px] text-[8px] font-medium leading-tight">{subtitle}</p>
    </div>
  );
}

function MobileNode({ title, subtitle }: { title: string; subtitle: string }) {
  return (
    <div className="rounded-xl border border-[#e5e8fb] bg-white px-3 py-4 text-center shadow-sm">
      <h4 className="text-[12px] font-extrabold text-[#5362df]">{title}</h4>
      <p className="mt-1 text-[9px] text-[#7d89a7]">{subtitle}</p>
    </div>
  );
}