import type { Metadata } from "next";
import { PageHero } from "@/components/sections/PageHero";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { WorkwearCategories } from "@/components/sections/WorkwearCategories";
import { ContactCta } from "@/components/sections/ContactCta";
import { Reveal, RevealItem } from "@/components/motion/Reveal";
import { MediaSlot } from "@/components/media/MediaSlot";
import { WeaveRule } from "@/components/ui/WeaveRule";
import { company } from "@/content/company";

export const metadata: Metadata = {
  title: "Workwear and uniforms",
  description:
    "Medical, kitchen, industrial and high visibility workwear from a mill with over sixty years of producing it, put through extensive wearer trials and fitting reviews.",
};

const PRINCIPLES = [
  {
    title: "Tested on the people who wear it",
    body: "Every garment in the core range has been through wearer trials and fitting reviews before it reached a catalogue. A jacket that binds at the shoulder fails on the second shift, and no fabric spec catches that.",
  },
  {
    title: "Cloth chosen for the job",
    body: "Kitchen wear takes heat and bleach. Industrial wear takes abrasion and repeated industrial laundering. Hi viz has to hold its brightness after fifty washes. The cloth is picked for the failure mode, not the price list.",
  },
  {
    title: "Made where the cloth is made",
    body: "Because the group spins, knits, weaves and dyes in house, a workwear programme can be built on a fabric we control rather than one we source, which is what keeps a two year contract shade consistent.",
  },
] as const;

export default function WorkwearPage() {
  const years = new Date().getFullYear() - company.founded;

  return (
    <>
      <PageHero
        index="03"
        kicker="Division three"
        title="Clothes for people who work in them."
        lede="We have called upon our vast experience and expertise gained from over 60 years of producing workwear and uniforms to create a number of exciting new garments that are specifically designed for the workforce."
        pattern="weave"
        tone="hiviz"
        meta={[
          { label: "Experience", value: `${years} years` },
          { label: "Ranges", value: "Six" },
          { label: "Trials", value: "Wearer tested" },
        ]}
      />

      {/* Ranges ------------------------------------------------------------ */}
      <section className="section bg-[var(--ink)]">
        <div className="shell">
          <SectionHeading
            eyebrow="The ranges"
            title="Six ranges, built around six different working days."
            lede="Open a range to see what sits inside it. Anything here can be made to your own pattern, in your own cloth, with your own branding."
          />

          <div className="mt-14">
            <WorkwearCategories />
          </div>
        </div>
      </section>

      {/* Principles -------------------------------------------------------- */}
      <section className="section relative overflow-hidden bg-[var(--ink-2)]">
        <WeaveRule />
        <div className="shell mt-12 grid gap-14 lg:grid-cols-12">
          <div className="lg:col-span-7">
            <SectionHeading
              eyebrow="How it is built"
              title="This core range has undergone extensive wearer trials and fitting reviews."
              lede="Which is the company's own way of saying that a practical, yet stylish, range of high performance garments is the only kind worth putting a name on."
            />

            <Reveal stagger={0.1} className="mt-12 space-y-px">
              {PRINCIPLES.map((item, i) => (
                <RevealItem
                  key={item.title}
                  className="group relative border-t border-[var(--rule)] py-8 last:border-b"
                >
                  <span className="absolute inset-x-0 top-0 h-px origin-left scale-x-0 bg-[var(--hiviz)] transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />
                  <div className="flex gap-6">
                    <span className="data shrink-0 text-[11px] text-[var(--hiviz)]">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <div>
                      <h3 className="text-lg text-[var(--cotton)]">{item.title}</h3>
                      <p className="mt-3 max-w-xl text-sm leading-relaxed text-[var(--melange)]">
                        {item.body}
                      </p>
                    </div>
                  </div>
                </RevealItem>
              ))}
            </Reveal>
          </div>

          <div className="lg:col-span-5">
            <Reveal direction="left">
              <MediaSlot
                id="workwear-line"
                alt="Workwear stitching line, industrial garments in production"
                ratio="3/4"
                pattern="weave"
                tone="hiviz"
                caption="Workwear stitching line"
              />
            </Reveal>
          </div>
        </div>
      </section>

      <ContactCta
        title="Kitting out a workforce?"
        body="Tell us the trade, the headcount and the laundering regime. We will spec the cloth, build a fit sample and quote the programme."
        paths={["workforce", "tech-pack", "capacity"]}
      />
    </>
  );
}