// ========================================
// PRISM SALES — Group Company page
// ========================================

function GroupPage({ setRoute }) {
  return (
    <div className="page">
      <section className="container" style={{ paddingTop: 40 }}>
        <div className="page-hdr-strip" style={{
          display: "flex", justifyContent: "space-between",
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em",
          color: "var(--ink-dim)", marginBottom: 60, paddingBottom: 20,
          borderBottom: "1px solid var(--border)",
        }}>
          <span>INDEX — 04 / GROUP COMPANY</span>
          <span className="bc-mid">01 ALLIED ENTITY</span>
          <span>SHARED OWNERSHIP</span>
        </div>

        <div className="eyebrow" style={{ marginBottom: 32 }}>Group company</div>
        <h1 className="reveal" style={{
          fontFamily: "var(--f-display)",
          fontSize: "clamp(56px, 9vw, 148px)",
          lineHeight: 0.88,
          letterSpacing: "-0.035em",
          marginBottom: 48,
          maxWidth: 1200,
        }}>
          One roof.<br/>
          <span style={{ fontStyle: "italic", color: "var(--accent)" }}>Two</span> trade names.
        </h1>

        <p style={{ maxWidth: 680, fontSize: 17, lineHeight: 1.65, color: "var(--ink-dim)", marginBottom: 100 }}>
          Prism Sales Corporation operates alongside one sister firm under shared family ownership. The allied entity serves a different segment but draws from the same buying desk, inventory discipline and certification standards.
        </p>

        {/* Company card — large, premium */}
        <div className="group-card" style={{
          position: "relative",
          border: "1px solid var(--border-strong)",
          background: "var(--surface)",
          overflow: "hidden",
          transition: "transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s",
        }}>
          <div className="grp-card-inner" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", minHeight: 620 }}>
            {/* Left — visual */}
            <div className="grp-left" style={{
              borderRight: "1px solid var(--border)",
              overflow: "hidden",
            }}>
              <img src="assets/au-power-logo.jpeg"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                alt="AU POWER" />
            </div>

            {/* Right — info */}
            <div className="grp-right-info" style={{ padding: 56, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div className="mono" style={{ color: "var(--accent)", marginBottom: 20 }}>SISTER CONCERN · PRM-02</div>
                <h2 style={{ fontFamily: "var(--f-display)", fontSize: "clamp(40px, 4.5vw, 64px)", letterSpacing: "-0.025em", lineHeight: 0.95, marginBottom: 8 }}>
                  AU <span style={{ fontStyle: "italic" }}>Power</span>
                </h2>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--ink-dim)", letterSpacing: "0.1em", marginBottom: 28 }}>
                  AU POLY PLAST · AHMEDABAD
                </div>

                <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-dim)", marginBottom: 8 }}>
                  Engineered for Power. Built for Safety.
                </p>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--ink-dim)", marginBottom: 32 }}>
                  AU Poly Plast is the manufacturing arm of the group — producing polymer-based electrical conduit systems, fittings and accessories. Every product is BIS/ISI certified and distributed to contractors, builders and distributors across India.
                </p>

                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "18px 32px" }}>
                  <MetaRow k="Entity type" v="AU Poly Plast" />
                  <MetaRow k="Distribution" v="Pan India" />
                  <MetaRow k="Location" v="Ahmedabad, Gujarat" />
                  <MetaRow k="Focus" v="Electrical conduit systems" />
                  <MetaRow k="Certification" v="BIS / ISI marked" />
                  <MetaRow k="Segment" v="Infrastructure" />
                </div>
              </div>

              <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="btn btn-primary">
                  Visit Site <span>↗</span>
                </button>
                <button className="btn" onClick={() => setRoute("contact")}>
                  Request Enquiry
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Capability strip */}
        <div style={{ marginTop: 80 }}>
          <div className="mono" style={{ color: "var(--ink-dim)", marginBottom: 32 }}>§ WHAT THEY MAKE</div>
          <div className="grp-cap-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              { t: "Conduit", d: "Rigid & flexible PVC conduit pipes in all trade sizes, ISI-marked from the press." },
              { t: "Fittings", d: "Full range of bends, couplers, junction boxes and adaptors to match every conduit line." },
              { t: "Accessories", d: "GI saddles, draw wire, PVC trunking and cable management systems." },
              { t: "OEM Supply", d: "White-label and bulk manufacturing for distributors, panels shops and EPC contractors." },
            ].map((c, i) => (
              <div key={c.t} className="capability"
                style={{
                  padding: "28px 24px 36px",
                  borderRight: i < 3 ? "1px solid var(--border)" : "none",
                  borderTop: "1px solid var(--border-strong)",
                  transition: "background 0.3s",
                  cursor: "pointer",
                }}>
                <div className="mono" style={{ color: "var(--accent)", marginBottom: 16 }}>{String(i+1).padStart(2, "0")}</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 32, letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 12 }}>{c.t}</div>
                <div style={{ color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.6 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>

        <CTAStripGroup setRoute={setRoute} />
      </section>
    </div>
  );
}

function MetaRow({ k, v }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "110px 1fr", gap: 12, alignItems: "baseline" }}>
      <span className="mono" style={{ color: "var(--ink-dim)", fontSize: 10 }}>{k.toUpperCase()}</span>
      <span style={{ color: "var(--ink)", fontSize: 14 }}>{v}</span>
    </div>
  );
}

function CTAStripGroup({ setRoute }) {
  return (
    <section style={{ marginTop: 120 }}>
      <div className="cta-box" style={{
        position: "relative",
        padding: "80px 60px",
        border: "1px solid var(--border-strong)",
        background: "linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%)",
      }}>
        <div className="grp-cta-grid" style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr",
          gap: 60, alignItems: "center",
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 28 }}>Need certified conduit systems?</div>
            <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.03em" }}>
              Source direct from<br/><span style={{ fontStyle: "italic", color: "var(--accent)" }}>AU Poly Plast</span>.
            </div>
          </div>
          <div>
            <p style={{ color: "var(--ink-dim)", fontSize: 15, lineHeight: 1.6, marginBottom: 28 }}>
              Prism Sales stocks AU Poly Plast conduit and fittings on the shelf. If you need bulk OEM quantities or a custom BOQ from the manufacturer directly, our desk connects you.
            </p>
            <button className="btn btn-accent" onClick={() => setRoute("contact")}>
              Get in Touch <span>→</span>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GroupPage });