/* HOME */
function HomePage({ go }) {
  const D = window.MPP;
  const showcase = [
    { img: D.materials[2].img,  name: "Polycarbonate",   meta: "Engineering plastic", onClick: () => go("plastics") },
    { img: D.profiles[0].img,   name: "Square PTR",      meta: "Metal profile",       onClick: () => go("metals") },
    { img: D.materials[13].img, name: "ABS",             meta: "Engineering plastic", onClick: () => go("plastics") },
    { img: D.profiles[2].img,   name: "Mechanical Tube", meta: "Metal profile",       onClick: () => go("metals") },
    { img: D.materials[0].img,  name: "Polyamide",       meta: "Engineering plastic", onClick: () => go("plastics") },
    { img: D.profiles[4].img,   name: "C Channel",       meta: "Metal profile",       onClick: () => go("metals") },
    { img: D.materials[4].img,  name: "PET",             meta: "Engineering plastic", onClick: () => go("plastics") },
    { img: D.profiles[7].img,   name: "Angle",           meta: "Metal profile",       onClick: () => go("metals") },
  ];
  const ticker = ["Carbon Steel", "Polypropylene", "Galvanized", "Polycarbonate", "Stainless", "Nylon", "Cold Rolled", "ABS", "Aluminized", "PET"];

  return (
    <main className="page">
      {/* CINEMATIC HERO */}
      <section className="xhero wrap-wide">
        <div className="xhero__spec">
          <span>Est. 1992 — RGV · Texas</span>
          <span className="hide-sm">Metal &amp; Polymer Supply</span>
          <span>02 Divisions / 49 Grades</span>
        </div>
        <div className="xhero__grid">
          <SplitText as="h1" className="xhead" accent="metal" text="Metal & Plastics, Mastered." />
          <div className="xhero__side">
            <ClipImg className="xhero__media" src={D.img.heroMetal} alt="Brushed metal" label="Metal" eager view tag="Precision" />
            <Spinner text="Request a Quote · Within 48h · " onClick={() => go("contact")} />
          </div>
        </div>
        <div className="xhero__foot">
          <p className="xhero__lead lead">
            From structural profiles to engineering-grade resins, MP&amp;P turns your specification
            into delivered, on-spec material — quoted fast and built to last.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Btn variant="accent" onClick={() => go("contact")}>Request a Quote</Btn>
            <Btn variant="ghost" onClick={() => go("plastics")}>Explore Catalog</Btn>
          </div>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee items={ticker} dark dur={32} />

      {/* STATS */}
      <section className="wrap-wide section-tight">
        <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>

      {/* PRODUCT SPLIT — Plastics */}
      <section className="section wrap-wide">
        <div className="prodrow">
          <ClipImg className="prodrow__media" src={D.img.pellets} alt="Polymer pellets" label="Polymer Pellets" view />
          <div>
            <Eyebrow idx="01" accent>Plastics</Eyebrow>
            <SplitText as="h2" className="h2" style={{ marginTop: 20 }} text="Finest-grade polymers, dialed to your process." />
            <p className="lead" style={{ marginTop: 20 }}>
              Cutting-edge extrusion and injection grades — commodity resins through high-performance
              engineering plastics, plus the additives and masterbatch to tune color, UV and flame response.
            </p>
            <div className="chips" style={{ marginTop: 26 }}>
              {["PP", "PE", "PC", "PA", "ABS", "PET", "POM", "PVC"].map((c) => <span className="chip" key={c}>{c}</span>)}
              <span className="chip chip--solid">+ 30 grades</span>
            </div>
            <div style={{ marginTop: 32 }}>
              <Btn onClick={() => go("plastics")}>View Plastics Catalog</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* HORIZONTAL PINNED GALLERY */}
      <HPin eyebrow="Selected catalog" title="A material for every demand." items={showcase} go={go} />

      {/* PRODUCT SPLIT — Metals */}
      <section className="section wrap-wide">
        <div className="prodrow rev">
          <ClipImg className="prodrow__media" src={D.img.metalSelection} alt="Metal profile selection" label="Metal Profiles" view />
          <div>
            <Eyebrow idx="02" accent>Metal Profiles</Eyebrow>
            <SplitText as="h2" className="h2" style={{ marginTop: 20 }} text="Exquisite profiles that carry the load." />
            <p className="lead" style={{ marginTop: 20 }}>
              Tubing, channel, bar and angle — meticulously fabricated for structural strength,
              dimensional accuracy and the demands of automotive, construction and industrial work.
            </p>
            <div className="chips" style={{ marginTop: 26 }}>
              {["Square PTR", "Rectangular PTR", "C Channel", "Z Channel", "Flat Bar", "Angle"].map((c) => <span className="chip" key={c}>{c}</span>)}
            </div>
            <div style={{ marginTop: 32 }}>
              <Btn onClick={() => go("metals")}>View Profile Catalog</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* WHY MP&P */}
      <section className="section wrap-wide" style={{ borderTop: "1px solid var(--line)" }}>
        <Eyebrow accent>Why MP&amp;P</Eyebrow>
        <SplitText as="h2" className="h2" style={{ marginTop: 18, maxWidth: "18ch" }} text="Built for buyers who can't afford a bad batch." />
        <div className="cardgrid" style={{ marginTop: 44 }}>
          {[
            { n: "01", t: "Spec-true material", d: "Every grade and profile is verified against your datasheet before it ships — no surprises on the line." },
            { n: "02", t: "Fast, honest quotes", d: "Send the spec; most inquiries are quoted within 48 hours with clear lead times and availability." },
            { n: "03", t: "30 years of judgment", d: "Three decades sourcing polymers and fabricating metal means we flag problems before they cost you." },
          ].map((c, i) => (
            <Reveal className="matcard" key={i} 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>

      {/* INDUSTRIES */}
      <section className="section-tight" style={{ background: "var(--bg-2)" }}>
        <div className="wrap-wide">
          <div className="ind-grid" style={{ display: "grid", gridTemplateColumns: "0.8fr 1.2fr", gap: "clamp(28px,4vw,64px)", alignItems: "center" }}>
            <div>
              <Eyebrow accent>Industries we serve</Eyebrow>
              <SplitText as="h2" className="h2" style={{ marginTop: 18 }} text="One supplier, every line of work." />
            </div>
            <div className="indrow">
              {D.industries.map((s) => <span className="chip" key={s} style={{ fontSize: 14, padding: "11px 17px" }}>{s}</span>)}
            </div>
          </div>
        </div>
      </section>

      {/* TRUSTED BY */}
      <section className="section-tight wrap-wide" style={{ borderTop: "1px solid var(--line)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 40, flexWrap: "wrap", justifyContent: "space-between" }}>
          <Eyebrow>Trusted by industry partners</Eyebrow>
          <div style={{ display: "flex", gap: 48, flexWrap: "wrap", alignItems: "center", opacity: .8 }}>
            {["TRIVALENCE", "NORTHBAY MFG", "RGV INDUSTRIAL", "CASTELLA"].map((b) => (
              <span key={b} style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: 19, letterSpacing: "-.02em", color: "var(--ink-2)" }}>{b}</span>
            ))}
          </div>
        </div>
      </section>

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