import type { Metadata } from "next";
import { PageHero } from "@/components/sections/PageHero";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { TagList } from "@/components/ui/TagList";
import { WashWipe } from "@/components/sections/WashWipe";
import { IndigoShift } from "@/components/sections/IndigoShift";
import { ProcessRibbon } from "@/components/sections/ProcessRibbon";
import { ContactCta } from "@/components/sections/ContactCta";
import { Reveal, RevealItem } from "@/components/motion/Reveal";
import { MediaSlot } from "@/components/media/MediaSlot";
import { resolveMedia } from "@/lib/media";
import { CapacityGrid } from "@/components/ui/CapacityGrid";
import { Clients } from "@/components/sections/Clients";
import {
  denimCapabilities,
  denimCapacities,
  denimWashes,
  laundryStatement,
} from "@/content/capacities";
import { greenJourney } from "@/content/certifications";
import { company } from "@/content/company";

export const metadata: Metadata = {
  title: "Denim and woven",
  description:
    "A fully compliant denim and woven operation in Lahore with in house sewing, a state of the art laundry and laser finishing, exporting to buyers worldwide.",
};

const DENIM_STAGES = [
  { step: "Rope dyeing", note: "Indigo, sulphur and over dyes" },
  { step: "Weaving", note: "Rigid and stretch twills" },
  { step: "Cutting", note: "Automated lays" },
  { step: "Sewing", note: "In house denim lines" },
  { step: "Laundry", note: "Full wash range" },
  { step: "Laser", note: "Whiskering and fading" },
  { step: "Finishing", note: "Pressing, trims, packing" },
  { step: "Audit", note: "Inline and final inspection" },
] as const;

export default function DenimPage() {
  // Resolved on the server so the wipe stays a drop in photo slot.
  const beforeSrc = resolveMedia("denim-rigid");
  const afterSrc = resolveMedia("denim-washed");

  return (
    <>
      <PageHero
        index="02"
        kicker="Division two, Lahore"
        title="Indigo, finished properly."
        lede="A fully compliant, modern and technologically developed denim and woven operation, exporting to buyers all over the world. Sewing, laundry and laser sit in the same building, so a wash recipe can be corrected in an afternoon rather than a shipping cycle."
        pattern="twill"
        tone="indigo"
        meta={[
          { label: "Unit", value: "Kot Lakhpat, Lahore" },
          { label: "Established", value: "1992" },
          { label: "Finishing", value: "Laundry and laser" },
        ]}
      />

      <IndigoShift>
        {/* Capability ------------------------------------------------------ */}
        <section className="section">
          <div className="shell">
            <SectionHeading
              eyebrow="Capability"
              title="Cut, sewn, washed and lasered under one roof."
              lede={company.groupScale}
            />

            <CapacityGrid rows={denimCapacities} columns={3} className="mt-14" />

            <Reveal
              stagger={0.09}
              className="mt-14 grid gap-px bg-[var(--rule)] sm:grid-cols-2"
            >
              {denimCapabilities.map((item) => (
                <RevealItem
                  key={item.title}
                  className="group relative overflow-hidden bg-[var(--ink)]/70 p-8 backdrop-blur-sm lg:p-10"
                >
                  <span className="absolute inset-x-0 top-0 h-px origin-left scale-x-0 bg-[var(--indigo-lit)] transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />
                  <h3 className="display-md text-[1.5rem] text-[var(--cotton)]">
                    {item.title}
                  </h3>
                  <p className="mt-4 text-sm leading-relaxed text-[var(--cotton)]/70">
                    {item.body}
                  </p>
                </RevealItem>
              ))}
            </Reveal>
          </div>
        </section>

        {/* Laundry and laser ---------------------------------------------- */}
        <section className="section">
          <div className="shell">
            <SectionHeading
              eyebrow="Laundry and laser"
              title="The look of ten years of wear, without ten years of water."
              lede={`${laundryStatement} Laser whiskering and fading replaces pumice stone and hand scraping, so the finish lands the same but the water and the dust do not. Drag the handle to see the difference.`}
            />

            <Reveal className="mt-14">
              <WashWipe beforeSrc={beforeSrc} afterSrc={afterSrc} />
            </Reveal>

            <div className="mt-16">
              <Reveal>
                <h3 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
                  Washes we run
                </h3>
              </Reveal>
              <div className="mt-6">
                <TagList items={denimWashes} accent="indigo" />
              </div>
            </div>

          </div>
        </section>

        {/* Green journey --------------------------------------------------- */}
        <section className="section">
          <div className="shell grid gap-14 lg:grid-cols-12">
            <div className="lg:col-span-5">
              <Reveal direction="right">
                <MediaSlot
                  id="denim-laundry"
                  alt="The laundry and laser finishing floor at the Lahore unit"
                  ratio="4/5"
                  pattern="twill"
                  tone="indigo"
                  caption="Laundry floor, Lahore"
                />
              </Reveal>
            </div>

            <div className="lg:col-span-7">
              <SectionHeading
                eyebrow="Green journey"
                title="Sustainability that shows up on the water bill."
                lede="Certification without a change on the floor is paperwork. These are the three places the denim operation has actually changed how it works."
              />

              <ol className="mt-10 divide-y divide-[var(--rule)] border-y border-[var(--rule)]">
                {greenJourney.map((item, i) => (
                  <li key={item.title}>
                    <Reveal>
                      <div className="flex gap-6 py-7">
                        <span className="data shrink-0 text-[11px] text-[var(--thread)]">
                          {String(i + 1).padStart(2, "0")}
                        </span>
                        <div>
                          <h3 className="text-base text-[var(--cotton)]">
                            {item.title}
                          </h3>
                          <p className="mt-2 text-sm leading-relaxed text-[var(--cotton)]/65">
                            {item.body}
                          </p>
                        </div>
                      </div>
                    </Reveal>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </section>

        {/* Route through the unit ------------------------------------------ */}
        <section className="section">
          <div className="shell">
            <SectionHeading
              eyebrow="The route"
              title="From rope dyeing to the final audit."
            />
            <div className="mt-14">
              <ProcessRibbon stages={DENIM_STAGES} accent="indigo" />
            </div>
          </div>
        </section>

        <Clients />
      </IndigoShift>

      <ContactCta
        title="Send us a denim style."
        body="A sketch, a fabric weight and a wash reference is enough to start. We will build the sample and tell you what it costs at your quantity."
        paths={["tech-pack", "capacity", "yarn"]}
      />
    </>
  );
}