/* METAL PROFILES */
function MetalsPage({ go }) {
  const D = window.MPP;
  return (
    <main className="page">
      {/* HERO */}
      <section className="pagehero wrap-wide">
        <Eyebrow idx="02" accent>Metal Profiles</Eyebrow>
        <div className="pagehero__row" style={{ marginTop: 22 }}>
          <SplitText as="h1" className="display" style={{ fontSize: "clamp(40px,6vw,84px)" }} accent="metal" text="Metal profiles, meticulously crafted." />
          <ClipImg className="pagehero__media" src={D.img.metalHero} alt="Metal profiles" label="Metal Profiles" eager view />
        </div>
        <p className="lead" style={{ marginTop: 30, maxWidth: "70ch" }}>
          A wide selection of high-quality profiles — each engineered to exceed your unique needs.
          Distinct materials and geometries, catered to versatile structural and mechanical applications.
        </p>
      </section>

      <Marquee items={["Square PTR", "Rectangular PTR", "Mechanical Tube", "C Channel", "Z Channel", "Flat Bar", "Angle", "Cold Rolled"]} line dur={30} />

      {/* GRADES strip */}
      <section className="section-tight wrap-wide">
        <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", justifyContent: "space-between", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "26px 0" }}>
          <Eyebrow>Available finishes &amp; grades</Eyebrow>
          <div className="chips">
            {D.grades.map((g) => <span className="chip" key={g}>{g}</span>)}
          </div>
        </div>
      </section>

      {/* SHOWCASE gallery */}
      <section className="section-tight wrap-wide">
        <Eyebrow accent>Product Showcase</Eyebrow>
        <SplitText as="h2" className="h2" style={{ marginTop: 16, maxWidth: "20ch" }} text="Strength you can see in the cross-section." />
        <div className="gallery3" style={{ marginTop: 36 }}>
          <ClipImg src={D.img.metalShowA} alt="Metal showcase" label="Showcase 01" view />
          <ClipImg src={D.img.metalShowB} alt="Metal showcase" label="Showcase 02" view />
          <ClipImg src={D.img.metalShowC} alt="Metal showcase" label="Showcase 03" view />
        </div>
      </section>

      {/* PROFILE 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>Our Profiles</Eyebrow>
            <SplitText as="h2" className="h2" style={{ marginTop: 16 }} text="A profile for every connection." />
          </div>
          <span className="mono body-muted" style={{ fontSize: 13 }}>{D.profiles.length} profile types</span>
        </div>
        <div className="cardgrid">
          {D.profiles.map((p, i) => (
            <Reveal className="matcard" key={p.name} delay={(i % 3) * 60}>
              <div className="matcard__media">
                <span className="matcard__cat">{String(i + 1).padStart(2, "0")}</span>
                <Img src={p.img} alt={p.name} label={p.name} />
              </div>
              <div className="matcard__body">
                <h4>{p.name}</h4>
                <p>{p.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* PROCESS */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap-wide">
          <Eyebrow accent>How we work</Eyebrow>
          <SplitText as="h2" className="h2" style={{ marginTop: 16, maxWidth: "18ch" }} text="From your drawing to your dock." />
          <div className="cardgrid cardgrid--4" style={{ marginTop: 44 }}>
            {[
              { n: "01", t: "Specify", d: "Send dimensions, grade and finish — or share a drawing and let us advise." },
              { n: "02", t: "Quote", d: "We confirm availability, lead time and pricing, usually within 48 hours." },
              { n: "03", t: "Fabricate", d: "Profiles are cut and finished to tolerance, then quality-checked." },
              { n: "04", t: "Deliver", d: "Packed and shipped on schedule, ready to move straight to your line." },
            ].map((s, i) => (
              <Reveal key={s.n} delay={i * 70} style={{ borderTop: "2px solid var(--accent)", paddingTop: 22 }}>
                <span className="num" style={{ fontSize: 40, color: "var(--ink)" }}>{s.n}</span>
                <h4 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 21, letterSpacing: "-.02em", margin: "14px 0 10px" }}>{s.t}</h4>
                <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 15, lineHeight: 1.5 }}>{s.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

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