/* ABOUT */
function AboutPage({ go }) {
  const D = window.MPP;
  return (
    <main className="page">
      <section className="pagehero wrap-wide">
        <Eyebrow idx="A" accent>About us</Eyebrow>
        <SplitText as="h1" className="display" style={{ marginTop: 22, maxWidth: "16ch" }} accent="craftsmanship" text="Where innovation meets meticulous craftsmanship." />
        <p className="lead" style={{ marginTop: 28, maxWidth: "64ch" }}>
          Experience excellence in metal and plastics with MP&amp;P. With over 30 years of industry expertise,
          we are the trusted partner for industries seeking top-quality fabrication and material supply.
        </p>
      </section>

      <section className="section-tight wrap-wide">
        <ClipImg className="pagehero__media" style={{ aspectRatio: "16/8" }} src={D.img.about} alt="MP&P facility" label="Our Facility" view />
      </section>

      {/* PRINCIPLES */}
      <section className="section-tight wrap-wide">
        <div className="prodrow">
          <div>
            <Eyebrow accent>Our standard</Eyebrow>
            <SplitText as="h2" className="h2" style={{ marginTop: 18 }} text="We leave no stone unturned." />
          </div>
          <p className="lead">
            Our unwavering dedication to excellence drives us to maintain the highest standards of quality
            in every aspect of our process. From material selection to meticulous production techniques,
            we deliver products that stand the test of time.
          </p>
        </div>
      </section>

      {/* VALUES */}
      <section className="section-tight wrap-wide">
        <div className="cardgrid">
          {[
            { n: "01", t: "Quality, first", d: "Every grade and profile is verified against spec before it leaves our hands." },
            { n: "02", t: "Deep expertise", d: "Three decades in polymers and metal fabrication, applied to your project." },
            { n: "03", t: "Partnership", d: "We treat your timeline and tolerances as if they were our own." },
          ].map((c, i) => (
            <Reveal className="matcard" key={c.n} delay={i * 80} style={{ padding: "30px 28px 32px" }}>
              <span className="mono" style={{ color: "var(--accent)", fontSize: 13, letterSpacing: ".1em" }}>{c.n}</span>
              <h4 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 23, letterSpacing: "-.02em", margin: "16px 0 12px" }}>{c.t}</h4>
              <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 15.5, lineHeight: 1.5 }}>{c.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      {/* STATS */}
      <section className="section-tight wrap-wide">
        <div className="stats">
          {D.stats.map((s, i) => (
            <Reveal className="stat" key={i} delay={i * 70}>
              <Counter value={s.n} className="num" />
              <span className="lbl">{s.l}</span>
            </Reveal>
          ))}
        </div>
      </section>

      {/* CLOSER */}
      <section className="section wrap-wide" style={{ textAlign: "center" }}>
        <Eyebrow accent className="no-tick" style={{ justifyContent: "center" }}>Let&apos;s get to know each other</Eyebrow>
        <SplitText as="h2" className="display" style={{ fontSize: "clamp(38px,6vw,84px)", margin: "20px auto 0", maxWidth: "16ch" }} text="Ready when you are." />
        <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
          <Btn variant="accent" onClick={() => go("contact")}>Get in touch</Btn>
          <Btn variant="ghost" onClick={() => go("plastics")}>Browse catalog</Btn>
        </div>
      </section>

      <ContactCTA go={go} />
    </main>
  );
}
window.AboutPage = AboutPage;