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

export const metadata: Metadata = {
  title: "About",
  description:
    "Founded in 1956, Three Star Group is a well known apparel manufacturer operating out of Multan and Lahore, Pakistan, vertically integrated from spinning through to finished garment.",
};

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

  return (
    <>
      <PageHero
        kicker={`Established ${company.founded}`}
        title="A family company that still makes things itself."
        lede={company.summary}
        pattern="jacquard"
        tone="thread"
        meta={[
          { label: "Founded", value: String(company.founded) },
          { label: "People", value: company.employees },
          { label: "Sites", value: "Multan and Lahore" },
        ]}
      />

      {/* Story ------------------------------------------------------------- */}
      <section className="section bg-[var(--ink)]">
        <div className="shell grid gap-14 lg:grid-cols-12">
          <div className="lg:col-span-7">
            <SectionHeading
              eyebrow="The group"
              title="Seventy years is long enough to learn where things go wrong."
              lede={company.groupScale}
            />

            <Reveal delay={0.15}>
              <div className="mt-8 space-y-5 text-base leading-relaxed text-[var(--melange)]">
                <p>
                  Three Star started in Multan in {company.founded} making
                  knitwear. Hosiery followed at scale, socks, stockings, tights
                  and pantyhose knitted, dyed and finished on our own floors and
                  shipped across Europe, the Middle East, Africa, Asia Pacific
                  and North America. In 1992 a denim and woven unit opened in
                  Lahore. Each of those moves added a step to the chain rather
                  than a supplier to it.
                </p>
                <p>
                  That is the whole strategy, and it has not changed in seventy
                  years. Own the process. If a shade is off, the dye house is
                  ours. If a knit is running slow, the machines are ours. If a
                  buyer needs to audit the floor, it is our floor.
                </p>
                <p>{company.ethics}</p>
              </div>
            </Reveal>
          </div>

          <div className="lg:col-span-5">
            <Reveal direction="left">
              <MediaSlot
                id="about-portrait"
                alt="Inside the Three Stars mill in Multan"
                ratio="3/4"
                pattern="jacquard"
                tone="thread"
                caption="Multan, Punjab"
              />
            </Reveal>

            <Reveal delay={0.15}>
              <dl className="mt-8 grid grid-cols-2 gap-px bg-[var(--rule)]">
                {[
                  { label: "Years on the floor", value: years, suffix: "" },
                  { label: "People employed", value: 1000, suffix: "+" },
                  { label: "Manufacturing divisions", value: 3, suffix: "" },
                  { label: "Standards held", value: 9, suffix: "" },
                ].map((stat) => (
                  <div key={stat.label} className="bg-[var(--ink)] p-5">
                    <dd className="data text-2xl text-[var(--cotton)]">
                      <CountUp
                        to={stat.value}
                        suffix={stat.suffix}
                        separator={stat.value > 999}
                      />
                    </dd>
                    <dt className="mt-2 font-mono text-[10px] uppercase leading-relaxed tracking-[0.16em] text-[var(--melange)]">
                      {stat.label}
                    </dt>
                  </div>
                ))}
              </dl>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Timeline ---------------------------------------------------------- */}
      <section className="section relative overflow-hidden bg-[var(--ink-2)]">
        <WeaveRule />
        <div className="shell mt-12">
          <SectionHeading
            eyebrow="Heritage"
            title="One thread, seventy years long."
          />
          <Timeline />
        </div>
      </section>

      {/* Integration, reused from the home page ---------------------------- */}
      <Integration />

      {/* Sites ------------------------------------------------------------- */}
      <section className="section bg-[var(--ink-2)]">
        <div className="shell">
          <SectionHeading
            eyebrow="Where we are"
            title="Two sites, three hundred and forty kilometres apart."
            lede="Multan runs the knitwear and the spinning. Lahore runs the denim and woven. Both are open to audit."
          />

          <Reveal stagger={0.12} className="mt-14 grid gap-px bg-[var(--rule)] md:grid-cols-2">
            {offices.map((office) => (
              <RevealItem
                key={office.id}
                className="group relative overflow-hidden bg-[var(--ink)] p-8 lg:p-10"
              >
                <span className="absolute inset-x-0 top-0 h-px origin-left scale-x-0 bg-[var(--thread)] transition-transform duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100" />

                <p className="eyebrow">{office.role}</p>
                <h3 className="display-md mt-4 text-[1.75rem] text-[var(--cotton)]">
                  {office.label}
                </h3>
                <p className="mt-4 max-w-sm text-sm leading-relaxed text-[var(--melange)]">
                  {office.address}
                </p>
                <p className="data mt-6 text-sm text-[var(--cotton)]/80">
                  {office.coords.lat.toFixed(4)}, {office.coords.lng.toFixed(4)}
                </p>
              </RevealItem>
            ))}
          </Reveal>
        </div>
      </section>

      {/* Compliance -------------------------------------------------------- */}
      <section className="section bg-[var(--ink)]">
        <div className="shell">
          <SectionHeading
            eyebrow="Compliance"
            title="Nine standards, audited on our own floors."
            lede="Certificates are issued to the group and are available in full with any enquiry. Every one of them was earned on a floor a buyer is welcome to walk."
          />
          <div className="mt-14">
            <CertificationGrid />
          </div>
        </div>
      </section>

      <ContactCta
        title="Come and see the floor."
        body="Buyers, auditors and agents are welcome at both sites. Tell us when you are in Pakistan and we will arrange the visit."
        paths={["agent", "tech-pack", "capacity"]}
      />
    </>
  );
}