import type { Metadata } from "next";
import { PageHero } from "@/components/sections/PageHero";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { CapacityGrid } from "@/components/ui/CapacityGrid";
import { TagList } from "@/components/ui/TagList";
import { KnitLoop } from "@/components/sections/KnitLoop";
import { ProcessRibbon } from "@/components/sections/ProcessRibbon";
import { ContactCta } from "@/components/sections/ContactCta";
import { Reveal } from "@/components/motion/Reveal";
import { MediaSlot } from "@/components/media/MediaSlot";
import { WeaveRule } from "@/components/ui/WeaveRule";
import {
  knitCapacities,
  knitFabrics,
  knitProducts,
  machineryStats,
  spinningCapacities,
  yarns,
} from "@/content/capacities";
import { productionChain } from "@/content/divisions";

export const metadata: Metadata = {
  title: "Knitwear",
  description:
    "Jersey, pique, interlock, fleece and rib knitted in Multan on 156 machines under one roof, fed by two in house spinning units running 27,000 kg of yarn a day.",
};

export default function KnitwearPage() {
  return (
    <>
      <PageHero
        index="01"
        kicker="Division one, since 1956"
        title="Knitted from our own yarn."
        lede="The division the group was built on. Two spinning units feed one of the largest knitting plants in South East Asia, and the cloth never leaves the site between the cone and the finished garment."
        pattern="knit"
        tone="cotton"
        meta={[
          { label: "Knitting machines", value: "156" },
          { label: "Spinning capacity", value: "27,000 kg / day" },
          { label: "Auto stripers", value: "65" },
        ]}
      />

      {/* Structure --------------------------------------------------------- */}
      <section className="section bg-[var(--ink)]">
        <div className="shell">
          <SectionHeading
            eyebrow="Structure"
            title="A knit is a single yarn pulled through itself, again and again."
            lede="That is the whole difference between knitting and weaving, and it is why a knitted garment stretches, drapes and recovers the way it does. Every quality below is a variation on how those loops are formed."
          />

          <div className="mt-14">
            <KnitLoop />
          </div>

          <div className="mt-16 grid gap-12 lg:grid-cols-2">
            <Reveal>
              <h3 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
                Qualities we run
              </h3>
              <div className="mt-6">
                <TagList items={knitFabrics} />
              </div>
              <p className="mt-6 text-sm leading-relaxed text-[var(--melange)]">
                Any of the above can be run with spandex or lycra for stretch and
                recovery.
              </p>
            </Reveal>

            <Reveal delay={0.1}>
              <h3 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
                Garments we make
              </h3>
              <div className="mt-6">
                <TagList items={knitProducts} />
              </div>
              <p className="mt-6 text-sm leading-relaxed text-[var(--melange)]">
                Solid, printed, yarn dyed and auto striped, with embroidery and
                printing handled in house.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Capacity ---------------------------------------------------------- */}
      <section className="section bg-[var(--ink-2)]">
        <div className="shell">
          <SectionHeading
            eyebrow="Capacity"
            title="Daily output, stated plainly."
            lede="These are the figures the mill publishes. Bring a programme and we will tell you honestly which of these lines it lands on and what the lead time looks like."
          />

          <div className="mt-14">
            <h3 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
              Knitting
            </h3>
            <CapacityGrid rows={knitCapacities} columns={4} className="mt-6" />
          </div>

          <div className="mt-14">
            <h3 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
              Spinning
            </h3>
            <CapacityGrid rows={spinningCapacities} columns={2} className="mt-6" />
          </div>

          <div className="mt-14">
            <h3 className="font-mono text-[11px] uppercase tracking-[0.22em] text-[var(--thread)]">
              Machinery
            </h3>
            <CapacityGrid rows={machineryStats} columns={4} className="mt-6" />
          </div>
        </div>
      </section>

      {/* Yarn -------------------------------------------------------------- */}
      <section className="section relative overflow-hidden bg-[var(--ink)]">
        <WeaveRule />
        <div className="shell mt-12 grid gap-14 lg:grid-cols-12 lg:items-center">
          <div className="lg:col-span-5">
            <Reveal direction="right">
              <MediaSlot
                id="melange-yarn"
                alt="Cones of melange yarn in the Multan spinning unit"
                ratio="4/5"
                pattern="rib"
                tone="melange"
                caption="Melange yarn, spinning unit one"
              />
            </Reveal>
          </div>

          <div className="lg:col-span-7">
            <SectionHeading
              eyebrow="Yarn"
              title="We are known for melange before we are known for anything else."
              lede="Melange is fibre dyed and blended before it is ever spun, which is why the colour sits inside the yarn rather than on top of it. It does not crock, it does not go flat after twenty washes, and no two batches drift apart."
            />

            <ul className="mt-10 divide-y divide-[var(--rule)] border-y border-[var(--rule)]">
              {yarns.map((yarn) => (
                <li key={yarn.name}>
                  <Reveal>
                    <div className="flex flex-col gap-1 py-5 sm:flex-row sm:items-baseline sm:justify-between sm:gap-8">
                      <h3 className="text-base text-[var(--cotton)]">
                        {yarn.name}
                      </h3>
                      <p className="text-sm text-[var(--melange)] sm:max-w-md sm:text-right">
                        {yarn.note}
                      </p>
                    </div>
                  </Reveal>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Departments ------------------------------------------------------- */}
      <section className="section bg-[var(--ink-2)]">
        <div className="shell">
          <SectionHeading
            eyebrow="In house"
            title="Every department, on our own floors."
            lede="No subcontracted dyeing, no outside printer, no third party embroidery house. When a shade needs correcting or a print needs pulling back, it happens in the same building on the same day."
          />
          <div className="mt-14">
            <ProcessRibbon stages={productionChain} />
          </div>
        </div>
      </section>

      <ContactCta
        title="Send us a knit programme."
        body="Fabric quality, GSM, colourways and quantities. We will come back with a costing, a lead time and a sampling plan."
        paths={["tech-pack", "capacity", "yarn"]}
      />
    </>
  );
}