/* PLASTICS */
function PlasticsPage({ go }) {
  const D = window.MPP;
  const [filter, setFilter] = useState("All");
  const cats = ["All", "Commodity", "Engineering"];
  const mats = filter === "All" ? D.materials : D.materials.filter((m) => m.cat === filter);

  return (
    <main className="page">
      {/* HERO */}
      <section className="pagehero wrap-wide">
        <Eyebrow idx="01" accent>Plastics</Eyebrow>
        <div className="pagehero__row" style={{ marginTop: 22 }}>
          <SplitText as="h1" className="display" style={{ fontSize: "clamp(40px,6vw,84px)" }} accent="plastics" text="High-quality plastics, tailored to you." />
          <ClipImg className="pagehero__media" src={D.img.polymers} alt="Polymers" label="Polymer Stock" eager view />
        </div>
        <p className="lead" style={{ marginTop: 30, maxWidth: "70ch" }}>{D.plasticIntro}</p>
      </section>

      <Marquee items={["PP", "PE", "PC", "PA", "ABS", "PET", "POM", "PVC", "PMMA", "TPU", "PEI", "PBT"]} line dur={26} />

      {/* COMMODITIES spec list */}
      <section className="section-tight wrap-wide">
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 20, flexWrap: "wrap" }}>
          <div>
            <Eyebrow accent>Commodity Plastics</Eyebrow>
            <SplitText as="h2" className="h2" style={{ marginTop: 16 }} text="High-volume resins, ready to run." />
          </div>
          <span className="mono body-muted" style={{ fontSize: 13 }}>Prime · Off-Spec · Compound Pellets</span>
        </div>
        <div className="speclist" style={{ marginTop: 36 }}>
          {D.commodities.map((c, i) => (
            <Reveal className="specrow" key={i} delay={i * 50}>
              <span className="specrow__abbr">{c.abbr}</span>
              <span className="specrow__name">{c.name}</span>
              <span className="specrow__forms">
                {c.forms.map((f) => <span className="chip" key={f}>{f}</span>)}
              </span>
            </Reveal>
          ))}
        </div>
      </section>

      {/* MATERIALS catalog */}
      <section className="section-tight wrap-wide">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginBottom: 30 }}>
          <div>
            <Eyebrow accent>Material Catalog</Eyebrow>
            <SplitText as="h2" className="h2" style={{ marginTop: 16 }} text="Engineering & commodity grades." />
          </div>
          <div className="filterbar">
            {cats.map((c) => (
              <button key={c} className="filterbtn" data-on={filter === c} onClick={() => setFilter(c)}>{c}</button>
            ))}
          </div>
        </div>
        <div className="cardgrid">
          {mats.map((m, i) => (
            <Reveal className="matcard" key={m.abbr + m.name} delay={(i % 3) * 60}>
              <div className="matcard__media">
                <span className="matcard__abbr">{m.abbr}</span>
                <span className="matcard__cat">{m.cat}</span>
                <Img src={m.img} alt={m.name} label={m.name} />
              </div>
              <div className="matcard__body">
                <h4>{m.name}</h4>
                <p>{m.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ADDITIVES */}
      <section className="section-tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(28px,4vw,64px)", alignItems: "center" }}>
          <div>
            <Eyebrow accent>Additives &amp; Masterbatch</Eyebrow>
            <h2 className="h2" style={{ marginTop: 16 }}>Tune every property.</h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Round out any compound with flame retardants, antioxidants, UV stabilizers and color masterbatch.
            </p>
          </div>
          <div className="cardgrid cardgrid--4" style={{ gap: 14 }}>
            {D.additives.map((a, i) => (
              <Reveal className="matcard" key={a} delay={i * 60} style={{ padding: "24px 20px", justifyContent: "center", minHeight: 130 }}>
                <span className="mono" style={{ color: "var(--accent)", fontSize: 12, letterSpacing: ".1em" }}>0{i + 1}</span>
                <h4 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 18, letterSpacing: "-.01em", marginTop: 12 }}>{a}</h4>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* APPLICATIONS gallery */}
      <section className="section wrap-wide">
        <Eyebrow accent>Applications</Eyebrow>
        <SplitText as="h2" className="h2" style={{ marginTop: 16, maxWidth: "20ch" }} text="From bottle to bumper, our polymers show up everywhere." />
        <div className="gallery3" style={{ marginTop: 36 }}>
          <ClipImg src={D.img.showA} alt="Application" label="Application 01" view />
          <ClipImg src={D.img.applications} alt="Application" label="Application 02" view />
          <ClipImg src={D.img.showC} alt="Application" label="Application 03" view />
        </div>
      </section>

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