import Image from "next/image";

import { BLUR } from "@/lib/blurData";
import { SITE } from "@/lib/site";

import CtaBand from "@/components/CtaBand";
import OrgChart from "@/components/OrgChart";
import Parallax from "@/components/Parallax";
import Reveal from "@/components/Reveal";

import { CERTS } from "@/lib/certs";
import { PARTNERS } from "@/lib/partners";

const COMPANY_INFO: { label: string; value: string | string[] }[] = [
  { label: "Incorporated", value: "28 November 2000" },
  { label: "Company Registration No.", value: "200001030533 (533140-D)" },
  { label: "Authorized Capital", value: "RM 5,001,000.00" },
  { label: "Paid Up Capital", value: "RM 5,001,000.00" },
  {
    label: "Company Secretary",
    value: "Fakrul Anwar Bin Ab Rahman (MAICSA7053830)",
  },
  { label: "Auditor", value: "Teh Ng & Partners (AF2631)" },
  {
    label: "Financial Information (Bank)",
    value: [
      "Malayan Banking Bhd",
      "Alliance Bank Malaysia Berhad",
      "Bank Muamalat Malaysia",
    ],
  },
  {
    label: "Head Office",
    value: [
      "30-2 & 32-2, Jalan Kuchai Maju 10,",
      "Kuchai Entrepreneurs Park,",
      "Off Jalan Kuchai Lama, 58200,",
      "Kuala Lumpur, Malaysia",
    ],
  },
  {
    label: "Contact",
    value: [
      `Tel: ${SITE.tel}`,
      `Fax: ${SITE.fax}`,
      `Email: ${SITE.email}`,
      `Website: ${SITE.website}`,
    ],
  },
];

const SUSTAINABILITY = [
  "Renewable and Sustainable",
  "Environmentally Friendly",
  "Reduces Electricity Bills",
  "Energy Independence",
];

const CLIENTS = [
  { src: "/images/clients/public-bank-public-bank-logo.png", alt: "Public Bank" },
  { src: "/images/clients/js-solar.png", alt: "JS Solar (Founder)" },
  { src: "/images/clients/founder-energy.png", alt: "Sunview Energy (Founder)" },
  { src: "/images/clients/fabulous-sunview.png", alt: "Fabulous Sunview" },
  { src: "/images/clients/uda-holdings.png", alt: "UDA Holdings Berhad" },
  { src: "/images/clients/kementerian-dalam-negeri.png", alt: "Ministry of Home Affairs" },
  { src: "/images/clients/sabah-energy.png", alt: "Sabah Energy Corporation Sdn Bhd" },
  { src: "/images/clients/polis-diraja.png", alt: "Polis DiRaja Malaysia" },
];

export default function AboutPage() {
  const heroBlur = BLUR["/images/hero/engineers-walking.jpg"];

  return (
    <>
      {/* Page hero - photo bg with parallax and navy scrim */}
      <section className="relative flex min-h-[55dvh] items-center overflow-hidden pt-24">
        <Parallax amount={0.06} className="absolute inset-0">
          <div className="relative h-full">
            <Image
              src="/images/hero/engineers-walking.jpg"
              alt="GV engineers walking on site"
              fill
              sizes="100vw"
              preload
              placeholder={heroBlur ? "blur" : undefined}
              blurDataURL={heroBlur}
              className="object-cover"
            />
          </div>
        </Parallax>
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[#0b1638]/90 via-[#0b1638]/65 to-[#0b1638]/15" />
        <div className="container-gv relative w-full pb-12 pt-8">
          <Reveal>
            <p className="eyebrow text-white/90!">The Power Never Interrupts</p>
          </Reveal>
          <Reveal delay={0.08}>
            <h1 className="mt-6 max-w-2xl font-display text-4xl font-bold leading-[1.05] tracking-tight text-white sm:text-5xl lg:text-6xl">
              A specialized energy solutions provider since year 2000
            </h1>
          </Reveal>
          <Reveal delay={0.16}>
            <p className="mt-6 max-w-xl text-base leading-relaxed text-white/85 sm:text-lg">
              {SITE.blurb}
            </p>
          </Reveal>
        </div>
      </section>

      {/* Company information */}
      <section className="section">
        <div className="container-gv">
          <Reveal>
            <h2 className="section-head max-w-xl font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
              Company Information
            </h2>
          </Reveal>
          <div className="grid gap-4 lg:grid-cols-2">
            {COMPANY_INFO.map((row, i) => (
              <Reveal key={row.label} delay={(i % 2) * 0.05}>
                <div className="grid gap-1.5 rounded-card border border-line bg-paper px-6 py-5 sm:grid-cols-[13rem_1fr] sm:items-baseline sm:gap-6">
                  <span className="text-xs font-bold uppercase tracking-[0.18em] text-accent-deep">
                    {row.label}
                  </span>
                  {Array.isArray(row.value) ? (
                    <div className="space-y-1">
                      {row.value.map((line, li) => (
                        <p key={li} className="text-sm leading-relaxed text-ink">
                          {li > 0 ? " " : null}
                          {line}
                        </p>
                      ))}
                    </div>
                  ) : (
                    <p className="text-sm leading-relaxed text-ink">
                      {row.value}
                    </p>
                  )}
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Sustainability */}
      <section className="bg-surface py-20 lg:py-28">
        <div className="container-gv">
          <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
            <div>
              <Reveal>
                <h2 className="max-w-lg font-display text-3xl font-semibold leading-[1.08] tracking-tight text-ink sm:text-4xl">
                  Why sustainability matters today?
                </h2>
              </Reveal>
              <Reveal delay={0.08}>
                <p className="mt-4 text-lg font-semibold text-accent-deep">
                  Exploring clean energy solutions.
                </p>
              </Reveal>
              <Reveal delay={0.16}>
                <p className="mt-6 max-w-md text-base leading-relaxed text-ink-soft">
                  {SITE.blurb}
                </p>
              </Reveal>
            </div>
            <ul className="space-y-4">
              {SUSTAINABILITY.map((benefit, i) => (
                <li
                  key={benefit}
                  className="flex items-center gap-4 rounded-card border border-line bg-paper px-6 py-5"
                >
                  <Reveal delay={i * 0.06} className="flex w-full items-center gap-4">
                    <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-card bg-sky font-display text-sm font-semibold text-accent-deep">
                      0{i + 1}
                    </span>
                    <span className="font-display text-base font-semibold tracking-tight text-ink">
                      {benefit}
                    </span>
                  </Reveal>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Organization chart */}
      <section className="section">
        <div className="container-gv">
          <Reveal>
            <h2 className="section-head max-w-xl font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
              Organization Chart
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <OrgChart />
          </Reveal>
        </div>
      </section>

      {/* Certifications */}
      <section className="bg-surface py-20 lg:py-28">
        <div className="container-gv">
          <Reveal>
            <h2 className="section-head max-w-xl font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
              Certifications
            </h2>
          </Reveal>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {CERTS.map((cert, i) => (
              <Reveal key={cert.issuer} delay={(i % 3) * 0.06}>
                <div className="card-lift h-full rounded-card border border-line bg-paper p-7">
                  <div className="relative h-14 w-full rounded-card bg-white">
                    <Image
                      src={cert.logo}
                      alt={`${cert.issuer} logo`}
                      fill
                      sizes="(min-width: 1024px) 30vw, 50vw"
                      className="object-contain object-left"
                    />
                  </div>
                  <h3 className="mt-6 font-display text-base font-semibold tracking-tight text-ink">
                    {cert.issuer}
                  </h3>
                  <ul className="mt-3 space-y-2">
                    {cert.labels.map((label) => (
                      <li
                        key={label}
                        className="text-sm leading-relaxed text-ink-soft"
                      >
                        {label}
                      </li>
                    ))}
                  </ul>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Clients */}
      <section className="section">
        <div className="container-gv">
          <Reveal>
            <h2 className="section-head max-w-2xl font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
              Clients
            </h2>
          </Reveal>
          <Reveal delay={0.08}>
            <p className="mb-12 max-w-2xl text-base leading-relaxed text-ink-soft sm:text-lg">
              Through strong client relationships and strategic partnerships, we
              consistently deliver efficient and sustainable energy solutions
              across industries.
            </p>
          </Reveal>

          {/* Clients */}
          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-10">
            {CLIENTS.map((c, i) => (
              <Reveal key={c.src} delay={i * 0.05}>
                <div className="relative h-16 w-40">
                  <Image
                    src={c.src}
                    alt={c.alt}
                    fill
                    sizes="160px"
                    className="object-contain"
                  />
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Business partners */}
      <section className="bg-surface py-20 lg:py-28">
        <div className="container-gv">
          <Reveal>
            <h2 className="section-head max-w-xl font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
              Business Partners
            </h2>
          </Reveal>
          <div className="space-y-12">
            {PARTNERS.map((group) => (
              <div key={group.category}>
                <Reveal>
                  <h3 className="mb-6 border-b border-line pb-3 text-xs font-bold uppercase tracking-[0.22em] text-ink">
                    {group.category}
                  </h3>
                </Reveal>
                <div className="flex flex-wrap items-center gap-x-12 gap-y-8">
                  {group.logos.map((logo) => (
                    <div key={logo.src} className="relative h-14 w-36">
                      <Image
                        src={logo.src}
                        alt={logo.alt}
                        fill
                        sizes="144px"
                        className="object-contain"
                      />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  );
}