import Image from "next/image";

import { BLUR } from "@/lib/blurData";
import { SITE } from "@/lib/site";
import {
  AIR_CLEANERS,
  BATTERIES,
  type Product,
  PRODUCT_RANGES,
  type SpecTable,
  UPS_SYSTEM,
} from "@/lib/products";

const AIR_CLEANER_BLURB =
  PRODUCT_RANGES.find((r) => r.id === "air-cleaner")?.blurb ?? "";

const PRODUCT_TABS = [
  { id: "ups-system", label: "UPS System" },
  { id: "batteries", label: "Batteries" },
  { id: "air-cleaner", label: "Air Cleaner" },
];

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

/** Spec table with horizontal scroll on small screens (no page overflow). */
function SpecTable({ table }: { table: SpecTable }) {
  return (
    <div className="mt-8">
      <h4 className="text-xs font-bold uppercase tracking-[0.22em] text-ink">
        {table.title}
      </h4>
      {table.note ? (
        <p className="mt-2 text-xs italic text-ink-soft">{table.note}</p>
      ) : null}
      <div
        tabIndex={0}
        className="mt-4 overflow-x-auto rounded-card border border-line"
      >
        <table className="w-full min-w-[640px] text-left text-xs sm:text-sm">
          <thead>
            <tr className="bg-sky text-ink">
              {table.headers.map((h) => (
                <th key={h} scope="col" className="whitespace-nowrap px-3.5 py-3 font-semibold">
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {table.rows.map((row, ri) => (
              <tr key={ri} className="border-b border-line odd:bg-surface/60">
                {row.map((cell, ci) => (
                  <td
                    key={ci}
                    className={`whitespace-nowrap px-3.5 py-2.5 align-top ${
                      ci === 0 ? "font-medium text-ink" : "text-ink-soft"
                    }`}
                  >
                    {cell}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/** UPS series card. Data-driven: chips for applications, bullet list for
 *  features, label:value blocks for specs (with tables) or a compact
 *  label:value sheet for specs without tables. */
function SeriesCard({ product }: { product: Product }) {
  const specBlocks = product.specs && product.tables && product.tables.length > 0;

  return (
    <article className="overflow-hidden rounded-card border border-line bg-paper">
      <div className="grid gap-8 p-6 sm:p-10 lg:grid-cols-[14rem_1fr] lg:items-start lg:gap-12">
        <div className="flex items-start justify-center lg:justify-start">
          {product.image ? (
            <Image
              src={product.image}
              alt={product.imageAlt ?? product.name}
              width={200}
              height={200}
              className="h-28 w-auto object-contain"
            />
          ) : null}
        </div>
        <div>
          <h3 className="font-display text-2xl font-semibold tracking-tight text-ink">
            {product.name}
          </h3>
          {product.tagline ? (
            <p className="mt-2 text-sm font-semibold uppercase tracking-[0.18em] text-accent-deep">
              {product.tagline}
            </p>
          ) : null}
          <p className="mt-5 max-w-3xl text-base leading-relaxed text-ink-soft">
            {product.description}
          </p>
        </div>
      </div>

      <div className="space-y-10 border-t border-line p-6 sm:p-10">
        {product.applications && product.applications.length > 0 ? (
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.22em] text-ink">
              Applications
            </h4>
            <div className="mt-4 flex flex-wrap gap-2">
              {product.applications.map((a) => (
                <span
                  key={a}
                  className="rounded-full border border-line bg-sky px-3.5 py-1.5 text-sm font-medium text-ink"
                >
                  {a}
                </span>
              ))}
            </div>
          </div>
        ) : null}

        {product.features && product.features.length > 0 ? (
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.22em] text-ink">
              Protection &amp; Features
            </h4>
            <ul className="mt-4 grid gap-x-8 gap-y-2.5 lg:grid-cols-2">
              {product.features.map((f) => (
                <li
                  key={f}
                  className="flex items-start gap-2.5 text-sm leading-relaxed text-ink-soft"
                >
                  <span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />
                  {f}
                </li>
              ))}
            </ul>
          </div>
        ) : null}

        {product.specs && specBlocks ? (
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.22em] text-ink">
              Key Features
            </h4>
            <div className="mt-4 grid gap-4 sm:grid-cols-2">
              {product.specs.map((s) => (
                <div key={s.label} className="rounded-card border border-line bg-sky/60 p-5">
                  <h5 className="text-xs font-bold uppercase tracking-[0.18em] text-accent-deep">
                    {s.label}
                  </h5>
                  <p className="mt-2.5 text-sm leading-relaxed text-ink-soft">{s.value}</p>
                </div>
              ))}
            </div>
          </div>
        ) : null}

        {product.specs && !specBlocks ? (
          <div>
            <h4 className="text-xs font-bold uppercase tracking-[0.22em] text-ink">
              Specifications
            </h4>
            <div className="mt-4 grid gap-x-10 gap-y-4 sm:grid-cols-2">
              {product.specs.map((s) => (
                <div key={s.label} className="border-b border-line pb-4">
                  <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-ink-soft">
                    {s.label}
                  </p>
                  <p className="mt-1.5 text-sm leading-relaxed text-ink">{s.value}</p>
                </div>
              ))}
            </div>
          </div>
        ) : null}

        {product.tables && product.tables.length > 0
          ? product.tables.map((t) => <SpecTable key={t.title} table={t} />)
          : null}
      </div>
    </article>
  );
}

export default function ProductsPage() {
  const heroBlur = BLUR["/images/solutions/ups.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/solutions/ups.jpg"
              alt="GV PowerGuard UPS systems"
              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!">{SITE.tagline}</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">
              Products
            </h1>
          </Reveal>
          <Reveal delay={0.16}>
            <p className="mt-6 max-w-xl text-base leading-relaxed text-white/85 sm:text-lg">
              GV PowerGuard UPS systems, CSB &amp; FIAMM batteries, and AIRA air
              cleaning systems - engineered to keep your power clean and
              uninterrupted.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Shortcut tabs */}
      <section className="pt-8 lg:pt-10">
        <div className="container-gv">
          <nav
            aria-label="Product sections"
            className="flex w-full max-w-md flex-col gap-2 rounded-card border border-line bg-surface p-1.5 sm:flex-row"
          >
            {PRODUCT_TABS.map((t) => (
              <a
                key={t.id}
                href={"#" + t.id}
                className="flex flex-1 items-center justify-center gap-2 whitespace-nowrap rounded-xl px-4 py-3 text-sm font-semibold text-ink-soft transition-colors hover:bg-sky hover:text-ink"
              >
                {t.label}
              </a>
            ))}
          </nav>
        </div>
      </section>

      {/* UPS System */}
      <section id="ups-system" className="bg-surface py-20 scroll-mt-24 lg:py-28">
        <div className="container-gv">
          <Reveal>
            <div className="mb-12 max-w-2xl">
              <h2 className="font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
                {UPS_SYSTEM.name}
              </h2>
              <p className="mt-3 text-base font-medium leading-relaxed text-accent-deep sm:text-lg">
                Uninterruptible Power Supply
              </p>
              <p className="mt-5 text-base leading-relaxed text-ink-soft sm:text-lg">
                {UPS_SYSTEM.blurb}
              </p>
            </div>
          </Reveal>
          <div className="grid gap-8">
            {UPS_SYSTEM.series.map((product, i) => (
              <Reveal key={product.id} delay={(i % 2) * 0.08} className="min-w-0">
                <SeriesCard product={product} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Batteries */}
      <section id="batteries" className="py-20 scroll-mt-24 lg:py-28">
        <div className="container-gv">
          <Reveal>
            <div className="mb-12 max-w-2xl">
              <h2 className="font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
                {BATTERIES.name}
              </h2>
              <p className="mt-5 text-base leading-relaxed text-ink-soft sm:text-lg">
                {BATTERIES.blurb}
              </p>
            </div>
          </Reveal>
          <div className="grid gap-8">
            {BATTERIES.groups.map((group, i) => (
              <Reveal key={group.id} delay={(i % 2) * 0.08} className="min-w-0">
                <article className="rounded-card border border-line bg-paper p-6 sm:p-10">
                  <h3 className="font-display text-2xl font-semibold tracking-tight text-ink">
                    {group.name}
                  </h3>
                  {group.tagline ? (
                    <p className="mt-2 text-sm font-semibold uppercase tracking-[0.18em] text-accent-deep">
                      {group.tagline}
                    </p>
                  ) : null}
                  <p className="mt-4 max-w-3xl text-base leading-relaxed text-ink-soft">
                    {group.description}
                  </p>
                  {group.features && group.features.length > 0 ? (
                    <ul className="mt-6 grid gap-x-8 gap-y-2.5 sm:grid-cols-2">
                      {group.features.map((f) => (
                        <li
                          key={f}
                          className="flex items-start gap-2.5 text-sm leading-relaxed text-ink-soft"
                        >
                          <span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />
                          {f}
                        </li>
                      ))}
                    </ul>
                  ) : null}
                  {group.tables && group.tables.length > 0
                    ? group.tables.map((t) => <SpecTable key={t.title} table={t} />)
                    : null}
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Air Cleaner */}
      <section id="air-cleaner" className="bg-surface py-20 scroll-mt-24 lg:py-28">
        <div className="container-gv">
          <Reveal>
            <div className="mb-12 max-w-2xl">
              <h2 className="font-display text-3xl font-bold leading-[1.08] tracking-tight text-ink sm:text-4xl lg:text-5xl">
                Air Cleaner
              </h2>
              <p className="mt-5 text-base leading-relaxed text-ink-soft sm:text-lg">
                {AIR_CLEANER_BLURB}
              </p>
            </div>
          </Reveal>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {AIR_CLEANERS.map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) * 0.06}>
                <article className="h-full rounded-card border border-line bg-paper p-7">
                  {p.image ? (
                    <div className="flex h-32 w-full items-center justify-center rounded-card bg-surface">
                      <Image
                        src={p.image}
                        alt={p.imageAlt ?? p.name}
                        width={442}
                        height={293}
                        className="h-32 w-auto object-contain"
                      />
                    </div>
                  ) : null}
                  <h3 className="mt-6 font-display text-xl font-semibold tracking-tight text-ink">
                    {p.name}
                  </h3>
                  {p.tagline ? (
                    <p className="mt-1 text-xs font-semibold uppercase tracking-[0.16em] text-accent-deep">
                      {p.tagline}
                    </p>
                  ) : null}
                  <p className="mt-3 text-sm leading-relaxed text-ink-soft">
                    {p.description}
                  </p>
                  {p.specs && p.specs.length > 0 ? (
                    <div className="mt-5 flex flex-wrap gap-2">
                      {p.specs.map((s) => (
                        <span
                          key={s.label}
                          className="rounded-full border border-line bg-sky px-3 py-1.5 text-xs font-medium text-ink"
                        >
                          <span className="font-semibold">{s.label}:</span> {s.value}
                        </span>
                      ))}
                    </div>
                  ) : null}
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  );
}