import Image from "next/image";

/** Org structure recreated in HTML/CSS (navy boxes, thin CSS connectors). */
export default function OrgChart() {
  return (
    <div>
      <div className="flex flex-col items-center gap-3">
        <div className="rounded-card bg-navy px-8 py-4 text-center">
          <p className="font-display text-sm font-semibold tracking-wide text-white">
            BOARD OF DIRECTOR
          </p>
        </div>
        <div className="h-6 w-px bg-line" />
        <div className="rounded-card bg-navy px-8 py-4 text-center">
          <p className="font-display text-sm font-semibold tracking-wide text-white">
            CEO
          </p>
        </div>
      </div>

      <div className="mt-8 hidden h-px bg-line lg:block" />

      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-7">
        <OrgBranch
          title="STRATEGY & RISK MANAGEMENT"
          leaves={[]}
        />
        <OrgBranch
          title="BUSINESS DEVELOPMENT"
          leaves={[]}
        />
        <OrgBranch
          title="CORPORATE ADMINISTRATION"
          leaves={["General Affairs", "Corporate Service", "Human Resources"]}
        />
        <OrgBranch
          title="CONSTRUCTION DIVISION"
          leaves={[
            "Project Management",
            "Commissioning",
            "Inspection Coordination",
            "Inspection",
            "Quality Control",
          ]}
        />
        <OrgBranch
          title="PROCUREMENT DIVISION"
          leaves={["Purchasing", "Logistic", "Subcontracting"]}
        />
        <OrgBranch
          title="FINANCE & ACCOUNTING DIVISION"
          leaves={["Finance", "Accounting"]}
        />
        <OrgBranch
          title="ENGINEERING DIVISION"
          leaves={[
            "Design",
            "Process",
            "Mechanical, Piping",
            "Electrical",
            "Instrument / Control",
            "Civil / Structural",
            "Regulatory",
          ]}
        />
      </div>

      {/* Deck's own chart image, secondary reference */}
      <figure className="mt-12">
        <div className="media-frame">
          <Image
            src="/images/org/org-chart.webp"
            alt="GV Bumisinar organization chart"
            width={1600}
            height={750}
            priority={false}
            className="w-full rounded-xl"
          />
        </div>
        <figcaption className="mt-3 text-center text-sm text-ink-soft">
          Full organization chart
        </figcaption>
      </figure>
    </div>
  );
}

function OrgBranch({
  title,
  leaves,
}: {
  title: string;
  leaves: string[];
}) {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="w-full rounded-card bg-navy-2 px-4 py-3 text-center">
        <p className="text-[13px] font-semibold leading-snug text-white">
          {title}
        </p>
      </div>
      {leaves.length > 0 ? (
        <>
          <div className="h-6 w-px bg-line" />
          <ul className="w-full space-y-2">
            {leaves.map((leaf) => (
              <li
                key={leaf}
                className="rounded bg-surface px-3 py-2 text-center text-xs leading-snug text-ink-soft"
              >
                {leaf}
              </li>
            ))}
          </ul>
        </>
      ) : null}
    </div>
  );
}