// ========================================
// PRISM SALES — Home page (Trust-first B2B)
// ========================================

// ============================================================
// BANNER SWIPE HERO
// ============================================================
function BannerSwipe({ setRoute }) {
  const slides = [
    { label: "UPVC CONDUIT PIPES & ACCESSORIES", sub: "AU POWER",           img: "assets/Banners/AU POWER.webp",                                        accent: "var(--accent-orange)", imgOnly: true },
    { label: "WIRES & CABLES",                   sub: "POLYCAB · RR KABEL", img: "assets/Banners/WIRES & CABLES · POLYCAB · RR KABEL.webp",             accent: "var(--accent-orange)", imgOnly: true },
    { label: "METAL BOXES & CABLE TRAYS",        sub: "ISI CERTIFIED",      img: "assets/Banners/METAL BOXES & CABLE TRAYS · ISI CERTIFIED.webp",       accent: "var(--accent-orange)", imgOnly: true },
    { label: "MCB & SWITCHGEAR",                 sub: "C&S ELECTRIC · LK",  img: "assets/Banners/MCB & SWITCHGEAR · C&S ELECTRIC · LK.webp",           accent: "var(--accent-orange)", imgOnly: true },
    { label: "FANS & LIGHTINGS",                 sub: "ENERGY EFFICIENT",   img: "assets/Banners/FANS & LIGHTINGS · ENERGY EFFICIENT.webp",             accent: "var(--accent-orange)", imgOnly: true },
    { label: "CABLE TIE & TAPE ROLL",            sub: "ACCESSORIES",        img: "assets/Banners/CABL TIE, TAPE ROL.webp",                              accent: "var(--accent-orange)", imgOnly: true },
  ];

  const [active, setActive] = useState(0);
  const [touchStart, setTouchStart] = useState(null);
  const timerRef = React.useRef(null);

  const go = React.useCallback((idx) => {
    setActive((idx + slides.length) % slides.length);
  }, [slides.length]);

  useEffect(() => {
    timerRef.current = setInterval(() => go(active + 1), 5000);
    return () => clearInterval(timerRef.current);
  }, [active, go]);

  const s = slides[active];

  return (
    <div
      style={{ position: "relative", width: "100%", overflow: "hidden", background: s.bg || "#000" }}
      onTouchStart={e => setTouchStart(e.touches[0].clientX)}
      onTouchEnd={e => {
        if (touchStart === null) return;
        const diff = touchStart - e.changedTouches[0].clientX;
        if (Math.abs(diff) > 50) go(active + (diff > 0 ? 1 : -1));
        setTouchStart(null);
      }}
    >
      {/* Banner image */}
      {s.img && (
        <img
          key={s.img}
          src={s.img.split("/").map(encodeURIComponent).join("/")}
          alt={s.label}
          fetchpriority="high"
          decoding="async"
          className="banner-swipe-img"
          style={{ display: "block", width: "100%", height: "520px", objectFit: "fill" }}
        />
      )}


      {/* Label overlay — hidden when banner image already contains text */}
      {!s.imgOnly && (
        <div style={{ position: "relative", zIndex: 2, padding: "0 64px" }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: s.accent, marginBottom: 16 }}>
            {String(active + 1).padStart(2, "0")} / {String(slides.length).padStart(2, "0")} · {s.sub}
          </div>
          <div style={{ fontFamily: "var(--f-display-black)", fontSize: "clamp(32px, 5.5vw, 80px)", fontWeight: 900, lineHeight: 1, letterSpacing: "-0.03em", color: "#fff", textTransform: "uppercase", maxWidth: 800 }}>
            {s.label}
          </div>
        </div>
      )}

      {/* Arrows */}
      <button aria-label="Previous slide" onClick={() => go(active - 1)} style={{ position: "absolute", left: 24, top: "50%", transform: "translateY(-50%)", background: "rgba(255,255,255,0.85)", border: "none", color: "#111", width: 44, height: 44, borderRadius: 4, cursor: "pointer", fontSize: 22, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, boxShadow: "0 2px 8px rgba(0,0,0,0.35)" }}>‹</button>
      <button aria-label="Next slide" onClick={() => go(active + 1)} style={{ position: "absolute", right: 24, top: "50%", transform: "translateY(-50%)", background: "rgba(255,255,255,0.85)", border: "none", color: "#111", width: 44, height: 44, borderRadius: 4, cursor: "pointer", fontSize: 22, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, boxShadow: "0 2px 8px rgba(0,0,0,0.35)" }}>›</button>

      {/* Dots */}
      <div style={{ position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)", display: "flex", zIndex: 2 }}>
        {slides.map((_, i) => (
          <button
            key={i}
            onClick={() => go(i)}
            aria-label={`Go to slide ${i + 1} of ${slides.length}`}
            aria-current={i === active ? "true" : undefined}
            style={{
              width: 44, height: 44,
              display: "flex", alignItems: "center", justifyContent: "center",
              background: "none", border: "none", cursor: "pointer", padding: 0,
            }}
          >
            <span style={{
              width: i === active ? 28 : 8, height: 8, borderRadius: 4,
              background: i === active ? s.accent : "rgba(255,255,255,0.25)",
              display: "block",
              transition: "all 0.3s ease",
            }} />
          </button>
        ))}
      </div>

    </div>
  );
}

function HomePage({ setRoute, setSelectedProduct, heroVariant = "scroll" }) {
  return (
    <div className="page">
      <BannerSwipe setRoute={setRoute} />
      {heroVariant === "scroll" && <window.HeroScroll setRoute={setRoute} />}
      {heroVariant === "ledger" && <HeroLedger setRoute={setRoute} />}
      {heroVariant === "headline" && <HeroHeadline setRoute={setRoute} />}
      {heroVariant === "grid" && <HeroGrid setRoute={setRoute} />}
      {heroVariant === "datasheet" && <HeroDatasheet setRoute={setRoute} />}
      <Marquee />
      <ProductLines setRoute={setRoute} setSelectedProduct={setSelectedProduct} />
      <ValueProps />

      <Testimonials />
      <RFQInline setRoute={setRoute} />
      <CTAStrip setRoute={setRoute} />
    </div>);
}

// ============================================================
// HERO VARIANT 1 — "Ledger" — Trust panel beats logo orb
// ============================================================
function HeroLedger({ setRoute }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick((n) => n + 1), 4200);
    return () => clearInterval(t);
  }, []);

  const tickerLines = [
    { sku: "PRS-CND-2501", qty: "240 lengths", to: "Shivalik Towers · Bopal",    tag: "DISPATCHED" },
    { sku: "PRS-MCB-RCCB", qty: "48 units",   to: "Adani Shantigram · SG Hwy",   tag: "STAGED" },
    { sku: "PRS-WRC-25FR", qty: "32 coils",   to: "Savvy Swaraaj · Ognaj",       tag: "DISPATCHED" },
    { sku: "PRS-ACC-GLAND",  qty: "200 units", to: "Goyal Orchid · Chandkheda",   tag: "PICKING" }];

  return (
    <section style={{ minHeight: "92vh", position: "relative", overflow: "hidden", paddingBottom: 80 }}>
      <div className="container" style={{ paddingTop: 32, position: "relative" }}>
        {/* Top metadata strip */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr",
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em",
          color: "var(--ink-dim)", marginBottom: 64, paddingBottom: 16,
          borderBottom: "1px solid var(--border)"
        }}>
          <span>EST. 2020 · AHMEDABAD</span>
          <span>GSTIN · 24AAZFP9610N1ZD</span>
          <span>ISO 9001:2015 CERTIFIED</span>
          <span style={{ color: "var(--accent-lime)", textAlign: "right" }}>● TRADE DESK OPEN</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 80, alignItems: "start" }}>
          {/* Left — bold headline */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 36 }}>
              Certified Electrical Materials · Trade Distributor
            </div>

            <h1 style={{
              fontFamily: "var(--f-display-black)",
              fontSize: "clamp(72px, 10vw, 168px)",
              lineHeight: 0.86,
              letterSpacing: "-0.04em",
              fontWeight: 900,
              textTransform: "uppercase",
              marginBottom: 36
            }}>
              Spec it.<br />
              <span style={{ color: "var(--accent)" }}>Source it.</span><br />
              Sign off.
            </h1>

            <p style={{
              fontSize: 19, lineHeight: 1.5, maxWidth: 540,
              color: "var(--ink-dim)", marginBottom: 48
            }}>
              One Stop Electrical Solution. Authorised distributors of Polycab, RR, C&S, LK, AU Power and Wonder — serving builders, electricians and infrastructure teams across Gujarat since 2020.
            </p>

            <div style={{ display: "flex", gap: 14, marginBottom: 64 }}>
              <button className="btn btn-primary" onClick={() => setRoute("contact")}>
                Request Trade Quote <span>→</span>
              </button>
              <button className="btn" onClick={() => setRoute("catalog")}>
                Browse Catalog
              </button>
            </div>

            {/* Stats strip */}
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
              paddingTop: 28, borderTop: "1px solid var(--border-strong)"
            }}>
              {[
              { n: "27", l: "Years trading" },
              { n: "352+", l: "Active SKUs" },
              { n: "1,800", l: "Trade accounts" },
              { n: "94%", l: "Same-day ship" }].
              map((s) =>
              <div key={s.l}>
                  <div style={{ fontFamily: "var(--f-display-black)", fontSize: 48, letterSpacing: "-0.03em", lineHeight: 1, fontWeight: 900 }}>
                    {s.n}
                  </div>
                  <div className="mono" style={{ marginTop: 10, color: "var(--ink-dim)", fontSize: 10 }}>
                    {s.l}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Right — Trust ledger */}
          <div style={{
            border: "1px solid var(--border-strong)",
            background: "var(--surface)",
            position: "sticky",
            top: 24
          }}>
            {/* Header bar */}
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "14px 20px",
              borderBottom: "1px solid var(--border-strong)",
              background: "var(--ink)",
              color: "var(--bg)"
            }}>
              <span className="mono" style={{ fontSize: 10 }}>TRADE DESK · LIVE</span>
              <span className="mono" style={{ fontSize: 10, color: "var(--accent-lime)" }}>● {new Date().toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit" })} IST</span>
            </div>

            {/* Stat block */}
            <div style={{ padding: 28, borderBottom: "1px solid var(--border)" }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 16 }}>
                THIS MORNING
              </div>
              <div style={{
                fontFamily: "var(--f-display-black)",
                fontSize: 64,
                lineHeight: 0.95,
                letterSpacing: "-0.03em",
                fontWeight: 900
              }}>
                94%
              </div>
              <div style={{ marginTop: 8, fontSize: 13, color: "var(--ink-dim)" }}>
                same-day dispatch · 9 RFQs · 4 active
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 24 }}>
                <div>
                  <div className="mono" style={{ fontSize: 9, color: "var(--ink-soft)" }}>AVG. QUOTE TURNAROUND</div>
                  <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 22, marginTop: 4 }}>3h 42m</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 9, color: "var(--ink-soft)" }}>STOCK FILL RATE</div>
                  <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 22, marginTop: 4 }}>94.3%</div>
                </div>
              </div>
            </div>

            {/* Live ticker */}
            <div style={{ padding: 20, borderBottom: "1px solid var(--border)" }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 14 }}>
                LIVE DISPATCH LOG ↓
              </div>
              {tickerLines.map((line, i) => {
                const isActive = i === tick % tickerLines.length;
                return (
                  <div key={i} style={{
                    display: "grid",
                    gridTemplateColumns: "auto 1fr auto",
                    gap: 12,
                    padding: "10px 0",
                    borderTop: i === 0 ? "none" : "1px dashed var(--border)",
                    opacity: isActive ? 1 : 0.55,
                    transition: "opacity 0.4s"
                  }}>
                    <span className="mono" style={{ fontSize: 10, color: "var(--ink)" }}>{line.sku}</span>
                    <span style={{ fontSize: 12, color: "var(--ink-dim)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {line.qty} → {line.to}
                    </span>
                    <span className="mono" style={{
                      fontSize: 9,
                      color: line.tag === "DISPATCHED" ? "var(--accent-lime)" : line.tag === "STAGED" ? "var(--accent-amber)" : "var(--accent-orange)"
                    }}>● {line.tag}</span>
                  </div>);
              })}
            </div>

            {/* Cert badges */}
            <div style={{ padding: 20, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
              {["ISI", "BIS", "IEC", "ISO"].map((c) =>
              <div key={c} style={{
                aspectRatio: "1",
                border: "1px solid var(--border-strong)",
                display: "grid",
                placeItems: "center",
                fontFamily: "var(--f-display-black)",
                fontSize: 16,
                fontWeight: 900,
                letterSpacing: "0.05em"
              }}>
                  {c}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ============================================================
// HERO VARIANT 2 — "Headline" — full-bleed type
// ============================================================
function HeroHeadline({ setRoute }) {
  return (
    <section style={{ minHeight: "92vh", paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <div style={{
          display: "flex", justifyContent: "space-between",
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em",
          color: "var(--ink-dim)", marginBottom: 56, paddingBottom: 16,
          borderBottom: "1px solid var(--border)"
        }}>
          <span>SINCE 2020 · OGNAJ · AHMEDABAD</span>
          <span style={{ color: "var(--accent-lime)" }}>● TRADE OPEN</span>
        </div>

        <h1 style={{
          fontFamily: "var(--f-display-black)",
          fontSize: "clamp(80px, 14vw, 240px)",
          lineHeight: 0.82,
          letterSpacing: "-0.05em",
          fontWeight: 900,
          textTransform: "uppercase",
          marginBottom: 48
        }}>
          Wired by<br />
          <span style={{ color: "var(--accent)" }}>Prism.</span>
        </h1>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 48, paddingTop: 40, borderTop: "1px solid var(--border-strong)" }}>
          <p style={{ fontSize: 22, lineHeight: 1.4, color: "var(--ink)", maxWidth: 640 }}>
            Ahmedabad's certified trade desk for electrical materials. 352 SKUs, ISI/BIS/IEC compliant — picked, packed and dispatched same-day to 1,800 active accounts across Gujarat.
          </p>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 12 }}>BEFORE YOU PROCURE</div>
            <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6, marginBottom: 20 }}>
              Send a BOQ, drawing or parts list. Get a line-item quote with MOQ and dispatch window within working hours.
            </div>
            <button className="btn btn-primary" onClick={() => setRoute("contact")}>Request Quote <span>→</span></button>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 12 }}>EXPLORE</div>
            <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.6, marginBottom: 20 }}>
              Conduit, wires, switchgear, MCB, trays, Metal Box & PVC Box, accessories — all in one catalog with full datasheets.
            </div>
            <button className="btn" onClick={() => setRoute("catalog")}>Open Catalog →</button>
          </div>
        </div>
      </div>
    </section>);
}

// ============================================================
// HERO VARIANT 3 — "Grid" — quadrant
// ============================================================
function HeroGrid({ setRoute }) {
  const cells = [
    { label: "01 / SUPPLY", title: "Seven lines.", sub: "352 active SKUs across conduit, wires, MCB, switchgear, trays, Metal Box & PVC Box, accessories." },
    { label: "02 / CERTIFICATION", title: "ISI · BIS · IEC.", sub: "Every product carries valid certification marks. We reject uncertified stock at intake." },
    { label: "03 / DISPATCH", title: "Same-day, 94%.", sub: "8,000 sq.ft Ahmedabad warehousing. Picking starts within 90 minutes of PO acceptance." },
    { label: "04 / TRADE", title: "1,800 accounts.", sub: "Open a trade account for priority service. No hidden fees. GST-inclusive invoice on every order." }
  ];
  return (
    <section style={{ minHeight: "92vh", paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginBottom: 32, paddingBottom: 16, borderBottom: "1px solid var(--border)" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)", letterSpacing: "0.14em" }}>
            PRISM SALES CORPORATION · EST. 2020
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--accent-lime)", letterSpacing: "0.14em", textAlign: "right" }}>
            ● TRADE DESK OPEN · 10:30–18:30 IST
          </div>
        </div>

        <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(18px, 2.2vw, 28px)", fontStyle: "italic", color: "var(--ink-dim)", letterSpacing: "-0.01em", marginBottom: 32 }}>
          Powering Trust, Delivering Quality.
        </div>

        <h1 style={{
          fontFamily: "var(--f-display-black)",
          fontSize: "clamp(56px, 8vw, 128px)",
          lineHeight: 0.88,
          letterSpacing: "-0.04em",
          fontWeight: 900,
          textTransform: "uppercase",
          marginBottom: 56,
          maxWidth: 1100
        }}>
          The trade desk for <span style={{ color: "var(--accent)" }}>certified</span> electrical materials.
        </h1>

        <div style={{ display: "flex", gap: 14, marginBottom: 64 }}>
          <button className="btn btn-primary" onClick={() => setRoute("contact")}>Request Trade Quote <span>→</span></button>
          <button className="btn" onClick={() => setRoute("catalog")}>Browse 352 SKUs</button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", border: "1px solid var(--border-strong)" }}>
          {cells.map((c, i) =>
            <div key={i} style={{
              padding: 36,
              borderRight: i % 2 === 0 ? "1px solid var(--border-strong)" : "none",
              borderBottom: i < 2 ? "1px solid var(--border-strong)" : "none",
              minHeight: 220
            }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 24, letterSpacing: "0.14em" }}>{c.label}</div>
              <div style={{ fontFamily: "var(--f-display-black)", fontSize: 44, lineHeight: 0.96, letterSpacing: "-0.03em", fontWeight: 900, marginBottom: 16, textTransform: "uppercase" }}>
                {c.title}
              </div>
              <div style={{ fontSize: 14, color: "var(--ink-dim)", lineHeight: 1.55, maxWidth: 420 }}>
                {c.sub}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

// ============================================================
// HERO VARIANT 4 — "Datasheet" — Engineering spec page aesthetic
// Brutalist/utilitarian: blueprint-style, looks like an actual
// PDF datasheet you'd download from an OEM.
// ============================================================
function HeroDatasheet({ setRoute }) {
  const [t, setT] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setT((n) => n + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const now = new Date();
  const ts = now.toISOString().slice(0, 19).replace("T", " ");

  return (
    <section style={{
      position: "relative",
      paddingTop: 24,
      paddingBottom: 80,
      borderTop: "2px solid var(--ink)",
      background: "var(--bg)"
    }}>
      {/* Blueprint grid backdrop */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: `
          linear-gradient(to right, color-mix(in oklch, var(--ink) 5%, transparent) 1px, transparent 1px),
          linear-gradient(to bottom, color-mix(in oklch, var(--ink) 5%, transparent) 1px, transparent 1px),
          linear-gradient(to right, color-mix(in oklch, var(--ink) 9%, transparent) 1px, transparent 1px),
          linear-gradient(to bottom, color-mix(in oklch, var(--ink) 9%, transparent) 1px, transparent 1px)
        `,
        backgroundSize: "20px 20px, 20px 20px, 100px 100px, 100px 100px",
        pointerEvents: "none",
        opacity: 0.7
      }}></div>

      <div className="container" style={{ position: "relative" }}>
        {/* Top datasheet header */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "auto 1fr auto auto auto",
          gap: 0,
          fontFamily: "var(--f-mono)",
          fontSize: 10,
          letterSpacing: "0.08em",
          color: "var(--ink-dim)",
          borderBottom: "2px solid var(--ink)",
          paddingBottom: 12,
          marginBottom: 0
        }}>
          <span style={{ color: "var(--ink)", fontWeight: 600 }}>DOC ↗ PRS-CO-DS-001</span>
          <span style={{ paddingLeft: 32 }}>PRISM SALES CORPORATION · DATASHEET</span>
          <span style={{ paddingLeft: 24 }}>REV 27 · 2026</span>
          <span style={{ paddingLeft: 24 }}>SHEET 01 / 06</span>
          <span style={{ paddingLeft: 24, color: "var(--accent-lime)" }}>● {ts} IST</span>
        </div>

        {/* Main type-block in datasheet box */}
        <div style={{
          border: "2px solid var(--ink)",
          borderTop: 0,
          padding: "48px 56px 56px",
          background: "var(--bg)",
          position: "relative"
        }}>
          {/* Corner reg-marks */}
          {[
            { top: 8, left: 8, br: 0, bb: 0 },
            { top: 8, right: 8, bl: 0, bb: 0 },
            { bottom: 8, left: 8, br: 0, bt: 0 },
            { bottom: 8, right: 8, bl: 0, bt: 0 }
          ].map((p, i) =>
            <span key={i} style={{
              position: "absolute",
              top: p.top, left: p.left, right: p.right, bottom: p.bottom,
              width: 12, height: 12,
              borderTop: p.bt === 0 ? 0 : "2px solid var(--ink)",
              borderBottom: p.bb === 0 ? 0 : "2px solid var(--ink)",
              borderLeft: p.bl === 0 ? 0 : "2px solid var(--ink)",
              borderRight: p.br === 0 ? 0 : "2px solid var(--ink)",
              ...(p.br === 0 ? { borderRight: 0 } : {}),
              ...(p.bl === 0 ? { borderLeft: 0 } : {}),
              ...(p.bt === 0 ? { borderTop: 0 } : {}),
              ...(p.bb === 0 ? { borderBottom: 0 } : {}),
              border: "2px solid var(--ink)",
              ...(p.br === 0 && { borderRight: 0 }),
              ...(p.bl === 0 && { borderLeft: 0 }),
              ...(p.bt === 0 && { borderTop: 0 }),
              ...(p.bb === 0 && { borderBottom: 0 })
            }}></span>
          )}

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)", marginBottom: 14, letterSpacing: "0.16em" }}>
                ↳ TITLE BLOCK · §1.0
              </div>
              <h1 style={{
                fontFamily: "var(--f-display-black)",
                fontSize: "clamp(64px, 9vw, 144px)",
                lineHeight: 0.84,
                letterSpacing: "-0.045em",
                fontWeight: 900,
                textTransform: "uppercase",
                marginBottom: 32
              }}>
                Certified.<br />
                Catalogued.<br />
                <span style={{
                  background: "var(--accent)",
                  color: "var(--bg)",
                  padding: "0 12px",
                  display: "inline-block",
                  marginLeft: -4
                }}>Cabled.</span>
              </h1>

              <div style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: "10px 24px",
                fontFamily: "var(--f-mono)",
                fontSize: 11,
                marginBottom: 36,
                paddingTop: 20,
                borderTop: "1px solid var(--ink)"
              }}>
                {[
                  ["DESCRIPTION", "Trade distributor of certified electrical materials"],
                  ["LOCATION", "Ognaj · Ahmedabad 380060 · IN"],
                  ["LICENSING", "ISI · BIS · IEC · ISO 9001:2015 · MSME"],
                  ["LINE COUNT", "7 categories · 352 active SKUs"],
                  ["TRADE BASE", "1,800 accounts · Ahmedabad & Gujarat"],
                  ["LEAD TIME", "Same-day (94%) · 48h backstop"]
                ].map(([k, v]) =>
                  <React.Fragment key={k}>
                    <span style={{ color: "var(--ink-soft)", letterSpacing: "0.1em" }}>{k}</span>
                    <span style={{ color: "var(--ink)" }}>{v}</span>
                  </React.Fragment>
                )}
              </div>

              <div style={{ display: "flex", gap: 12 }}>
                <button className="btn btn-primary" onClick={() => setRoute("contact")}>
                  ↗ ISSUE RFQ
                </button>
                <button className="btn" onClick={() => setRoute("catalog")}>
                  ⌥ Open Catalog
                </button>
                <button className="btn">
                  ↓ Download PDF
                </button>
              </div>
            </div>

            {/* Right — Single-line wiring schematic of Prism's 8 product lines */}
            <div style={{ position: "relative" }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)", marginBottom: 14, letterSpacing: "0.16em" }}>
                ↳ FIG. 1 · PRISM 8-LINE SINGLE-LINE DIAGRAM
              </div>
              <div style={{
                border: "1.5px solid var(--ink)",
                aspectRatio: "1.05",
                position: "relative",
                background: "var(--surface)",
                overflow: "hidden"
              }}>
                <svg viewBox="0 0 400 380" style={{ width: "100%", height: "100%", display: "block" }}>
                  <defs>
                    <pattern id="hatch" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                      <line x1="0" y1="0" x2="0" y2="5" stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
                    </pattern>
                  </defs>

                  {/* INCOMING MAINS — top */}
                  <g style={{ color: "var(--ink)" }}>
                    <text x="200" y="22" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="currentColor">INCOMING · 415V 3Ø</text>
                    <line x1="200" y1="28" x2="200" y2="50" stroke="currentColor" strokeWidth="1.5"/>
                    {/* MCB symbol */}
                    <rect x="190" y="50" width="20" height="14" fill="none" stroke="currentColor" strokeWidth="1"/>
                    <line x1="200" y1="64" x2="200" y2="80" stroke="currentColor" strokeWidth="1.5"/>
                    <text x="216" y="60" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="var(--ink-dim)">MCB · 63A</text>
                  </g>

                  {/* PRISM busbar block */}
                  <rect x="40" y="80" width="320" height="38" fill="var(--ink)" />
                  <text x="200" y="100" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="14" fill="var(--bg)" letterSpacing="3">PRISM · DISTRIBUTION BUS</text>
                  <text x="200" y="112" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="var(--accent-lime)">● LIVE · OGNAJ · AHMEDABAD 380060</text>

                  {/* 8 drop-circuits */}
                  {[
                    { x: 50,  code: "CND", label: "CONDUIT",   c: "var(--accent-orange)" },
                    { x: 95,  code: "WRC", label: "WIRES",     c: "var(--ink)" },
                    { x: 140, code: "SWS", label: "SWITCHES",  c: "var(--ink)" },
                    { x: 185, code: "MCB", label: "MCB",       c: "var(--accent-orange)" },
                    { x: 230, code: "CBL", label: "TRAYS",     c: "var(--ink)" },
                    { x: 275, code: "ENC", label: "ENCLOSURE", c: "var(--ink)" },
                    { x: 320, code: "ACC", label: "ACCESS.",   c: "var(--ink)" },
                  ].map((d, i) => (
                    <g key={d.code} style={{ color: "var(--ink)" }}>
                      <line x1={d.x} y1="118" x2={d.x} y2="155" stroke="currentColor" strokeWidth="1"/>
                      {/* fuse mark */}
                      <rect x={d.x - 4} y="138" width="8" height="6" fill="var(--bg)" stroke="currentColor" strokeWidth="0.8"/>
                      <line x1={d.x} y1="155" x2={d.x} y2="200" stroke={d.c} strokeWidth="1.2"/>
                      <rect x={d.x - 18} y="200" width="36" height="22" fill="var(--bg)" stroke="currentColor" strokeWidth="1"/>
                      <text x={d.x} y="214" textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize="8" fill="currentColor">{d.code}</text>
                      <text x={d.x} y="234" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="var(--ink-dim)">{d.label}</text>
                      {/* current pulse */}
                      <circle cx={d.x} cy={155 + ((t * 8 + i * 14) % 45)} r="2" fill={d.c} opacity={i === (t % 8) ? 1 : 0.35} />
                    </g>
                  ))}

                  {/* Site row — buildings */}
                  <line x1="40" y1="260" x2="360" y2="260" stroke="currentColor" strokeWidth="0.8" opacity="0.4" strokeDasharray="2 2"/>
                  <text x="40" y="254" fontFamily="JetBrains Mono, monospace" fontSize="7" fill="var(--ink-dim)">↓ DEPLOYED ON SITE</text>

                  <g style={{ color: "var(--ink-dim)" }}>
                    {/* Building 1 */}
                    <rect x="48" y="270" width="46" height="80" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.8"/>
                    {Array.from({ length: 4 }).map((_, r) => Array.from({ length: 3 }).map((_, c) => (
                      <rect key={`b1-${r}-${c}`} x={54 + c * 12} y={278 + r * 16} width="6" height="8" fill="var(--bg)"/>
                    )))}
                    <text x="71" y="362" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="currentColor">SHIVALIK TWR</text>

                    {/* Building 2 — taller */}
                    <rect x="115" y="250" width="50" height="100" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.8"/>
                    {Array.from({ length: 5 }).map((_, r) => Array.from({ length: 3 }).map((_, c) => (
                      <rect key={`b2-${r}-${c}`} x={122 + c * 12} y={258 + r * 16} width="6" height="8" fill="var(--bg)"/>
                    )))}
                    <text x="140" y="362" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="currentColor">SAVVY SWARAAJ</text>

                    {/* Building 3 — wide low (hospital) */}
                    <rect x="186" y="295" width="58" height="55" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.8"/>
                    {Array.from({ length: 3 }).map((_, r) => Array.from({ length: 4 }).map((_, c) => (
                      <rect key={`b3-${r}-${c}`} x={192 + c * 12} y={302 + r * 14} width="6" height="6" fill="var(--bg)"/>
                    )))}
                    <text x="215" y="362" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="currentColor">GOYAL ORCHID</text>

                    {/* Building 4 — tallest */}
                    <rect x="262" y="240" width="46" height="110" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.8"/>
                    {Array.from({ length: 6 }).map((_, r) => Array.from({ length: 3 }).map((_, c) => (
                      <rect key={`b4-${r}-${c}`} x={268 + c * 12} y={248 + r * 16} width="6" height="8" fill="var(--bg)"/>
                    )))}
                    <text x="285" y="362" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="currentColor">ADANI SHANTI.</text>

                    {/* Building 5 */}
                    <rect x="324" y="280" width="42" height="70" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.8"/>
                    {Array.from({ length: 4 }).map((_, r) => Array.from({ length: 3 }).map((_, c) => (
                      <rect key={`b5-${r}-${c}`} x={330 + c * 12} y={288 + r * 14} width="6" height="6" fill="var(--bg)"/>
                    )))}
                    <text x="345" y="362" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6.5" fill="currentColor">SG HWY COMM.</text>
                  </g>
                </svg>

                <span className="mono" style={{ position: "absolute", top: 8, left: 10, fontSize: 8, color: "var(--ink-soft)" }}>A1</span>
                <span className="mono" style={{ position: "absolute", top: 8, right: 10, fontSize: 8, color: "var(--ink-soft)" }}>SCALE — N.T.S</span>
                <span className="mono" style={{ position: "absolute", bottom: 8, left: 10, fontSize: 8, color: "var(--ink-soft)" }}>DRG. PRS-SLD-04</span>
                <span className="mono" style={{ position: "absolute", bottom: 8, right: 10, fontSize: 8, color: "var(--ink-soft)" }}>REV 27</span>
              </div>

              {/* Stat readout below schematic */}
              <div style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr 1fr",
                marginTop: 14,
                border: "1.5px solid var(--ink)"
              }}>
                {[
                  ["27", "YEARS"],
                  ["425+", "SKUs"],
                  ["94%", "SAME-DAY"]
                ].map(([n, l], i) =>
                  <div key={l} style={{
                    padding: "16px 14px",
                    borderRight: i < 2 ? "1px solid var(--ink)" : "none",
                    textAlign: "center"
                  }}>
                    <div style={{ fontFamily: "var(--f-display-black)", fontSize: 32, fontWeight: 900, lineHeight: 1, letterSpacing: "-0.03em" }}>{n}</div>
                    <div className="mono" style={{ fontSize: 9, color: "var(--ink-dim)", marginTop: 4, letterSpacing: "0.12em" }}>{l}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Bottom datasheet footer / signature block */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr 1fr",
          fontFamily: "var(--f-mono)",
          fontSize: 10,
          letterSpacing: "0.1em",
          color: "var(--ink-dim)",
          borderTop: "2px solid var(--ink)",
          marginTop: -2,
          padding: "12px 0"
        }}>
          <span><span style={{ color: "var(--ink-soft)" }}>DRAWN ↘ </span>PRS / TRADE DESK</span>
          <span><span style={{ color: "var(--ink-soft)" }}>CHECKED ↘ </span>QA · ISI BENCHMARK</span>
          <span><span style={{ color: "var(--ink-soft)" }}>APPROVED ↘ </span>MD / 2026-04</span>
          <span style={{ textAlign: "right", color: "var(--accent)" }}>↗ CONTINUED ON SHEET 02</span>
        </div>
      </div>
    </section>);
}
function Marquee() {
  const items = [
  "ISI CERTIFIED", "BIS APPROVED", "IEC COMPLIANT",
  "TRADE ACCOUNTS WELCOME", "SAME-DAY DISPATCH", "BULK ORDERS",
  "DEALERS ENROLLING 2026", "CONDUIT · WIRES · MCB · LIGHTING"];

  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((t, i) =>
        <span key={i} className="marquee-item">{t}</span>
        )}
      </div>
    </div>);
}

// ============================================================
// CLIENT LOGOS RAIL
// ============================================================
function ClientLogos() {
  const [hovered, setHovered] = useState(null);
  const clients = [
    { name: "POLYCAB",   sub: "Wires & Cables"  },
    { name: "RR",        sub: "Cables"           },
    { name: "AU POWER",  sub: "Conduit Systems"  },
    { name: "LK",        sub: "Switchgear"       },
    { name: "C&S",       sub: "Switchgear"       },
    { name: "WONDER",    sub: "Cables"           },
  ];
  return (
    <section className="container" style={{ marginTop: 80 }}>
      <div className="cl-outer" style={{ display: "grid", gridTemplateColumns: "1fr 3fr", gap: 60, alignItems: "center", padding: "32px 0", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", letterSpacing: "0.14em", marginBottom: 8 }}>AUTHORISED BRANDS ↘</div>
          <div style={{ fontSize: 13, color: "var(--ink-dim)", lineHeight: 1.5, fontFamily: "Cambria, Georgia, serif" }}>
            Authorised distributor for Various Brands across Gujarat.
          </div>
        </div>
        <div className="cl-inner" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {clients.map((c, i) => {
            const isHovered = hovered === c.name;
            return (
              <div key={c.name}
                onMouseEnter={() => setHovered(c.name)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  padding: "24px 16px",
                  borderLeft: i % 4 !== 0 ? "1px solid var(--border)" : "none",
                  borderTop: i >= 4 ? "1px solid var(--border)" : "none",
                  textAlign: "center",
                  background: isHovered ? "var(--ink)" : "transparent",
                  transition: "background 0.2s",
                  cursor: "default",
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
                }}>
                <div style={{
                    width: 48, height: 48, borderRadius: 2,
                    background: isHovered ? "var(--bg)" : "var(--surface)",
                    border: `1px solid ${isHovered ? "var(--bg)" : "var(--border)"}`,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "Cambria, Georgia, serif", fontWeight: 700,
                    fontSize: c.name.length > 4 ? 9 : 13,
                    color: isHovered ? "var(--ink)" : "var(--ink-dim)",
                    letterSpacing: "0.05em", transition: "all 0.2s",
                  }}>{c.name}</div>
                <div>
                  <div style={{ fontFamily: "var(--f-display-black)", fontSize: 14, letterSpacing: "0.02em", fontWeight: 900, color: isHovered ? "var(--bg)" : "var(--ink-dim)", transition: "color 0.2s" }}>
                    {c.name}
                  </div>
                  <div className="mono" style={{ fontSize: 9, color: isHovered ? "var(--bg)" : "var(--ink-soft)", marginTop: 3, transition: "color 0.2s" }}>{c.sub}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>);
}

// ============================================================
// PRODUCT LINES
// ============================================================
function ProductLines({ setRoute, setSelectedProduct }) {
  const [active, setActive] = useState("conduit");
  const activeCat = window.CATEGORIES.find((c) => c.id === active);
  const sampleProducts = window.PRODUCTS.filter((p) => p.cat === active).slice(0, 3);

  return (
    <section className="container" style={{ marginTop: 120 }}>
      <div className="sec-head">
        <div className="sec-num">§ 01 / PRODUCT LINES</div>
        <div className="sec-title">
          Various disciplines.<br />
          <span style={{ color: "var(--accent)" }}>One supplier.</span>
        </div>
        <button className="btn" onClick={() => setRoute("catalog")}>
          All Categories →
        </button>
      </div>

      <div className="pl-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 60, marginTop: 20 }}>
        <div>
          {window.CATEGORIES.map((c, i) =>
          <button key={c.id} onClick={() => setActive(c.id)}
          style={{
            display: "grid", gridTemplateColumns: "40px 1fr auto",
            alignItems: "center", gap: 20,
            padding: "22px 0",
            borderTop: i === 0 ? "1px solid var(--border-strong)" : "1px solid var(--border)",
            width: "100%", textAlign: "left",
            cursor: "pointer",
            color: active === c.id ? "var(--ink)" : "var(--ink-dim)",
            transition: "color 0.2s"
          }}
          onMouseEnter={() => setActive(c.id)}>
              <span className="mono" style={{ color: "var(--ink-soft)" }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span style={{
              fontFamily: "var(--f-display-black)",
              fontSize: active === c.id ? 40 : 28,
              fontWeight: 900,
              textTransform: "uppercase",
              letterSpacing: "-0.02em",
              transition: "font-size 0.3s",
              lineHeight: 1.05
            }}>
                {c.name}
                {active === c.id && <span style={{ color: "var(--accent)", marginLeft: 12 }}>→</span>}
              </span>
              <span className="mono" style={{ color: "var(--ink-soft)" }}>
                {c.count} SKUs
              </span>
            </button>
          )}
          <div style={{ borderTop: "1px solid var(--border)" }}></div>
        </div>

        <div className="pl-sticky" style={{ position: "sticky", top: 100, alignSelf: "start" }}>
          <div style={{
            padding: 32,
            border: "1px solid var(--border)",
            background: "var(--surface)"
          }}>
            <div className="mono" style={{ color: "var(--ink-soft)", marginBottom: 16 }}>
              CAT · {activeCat.code} — {activeCat.count} SKUs live
            </div>
            <div style={{ fontFamily: "var(--f-display-black)", fontSize: 36, fontWeight: 900, letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 32, textTransform: "uppercase" }}>
              {activeCat.name}
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
              {sampleProducts.map((p) =>
              <div key={p.id} onClick={() => {setSelectedProduct(p);setRoute("product");}}
              style={{ cursor: "pointer" }}>
                  <ProductImage cat={p.cat} sku={p.sku} img={p.img} aspect="1/1" />
                  <div className="mono" style={{ marginTop: 8, color: "var(--ink-dim)", fontSize: 9 }}>
                    {p.sku}
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.3, marginTop: 4 }}>
                    {p.name.split(" — ")[0]}
                  </div>
                </div>
              )}
            </div>
            <button className="btn" style={{ marginTop: 24, width: "100%", justifyContent: "center" }}
            onClick={() => setRoute("catalog")}>
              Open {activeCat.name} →
            </button>
          </div>
        </div>
      </div>
    </section>);
}

// ============================================================
// CERTIFICATIONS
// ============================================================
function Certifications() {
  const certs = [
    { code: "ISI", name: "Bureau of Indian Standards", id: "CM/L-1834221", since: "2003" },
    { code: "BIS", name: "BIS Hallmark Certification", id: "BIS/H-44892", since: "2005" },
    { code: "IEC", name: "International Electrotech.", id: "IEC-60898/60947", since: "2008" },
    { code: "ISO", name: "ISO 9001 : 2015", id: "QM-IN-2024-04412", since: "2014" },
    { code: "RoHS", name: "Restriction of Hazardous", id: "RoHS-2 2011/65/EU", since: "2016" },
    { code: "MSME", name: "Udyam Registered", id: "UDYAM-MH-19-0021782", since: "2020" }
  ];
  return (
    <section className="container" style={{ marginTop: 160 }}>
      <div className="sec-head">
        <div className="sec-num">§ 02 / CERTIFICATIONS</div>
        <div className="sec-title">
          Compliance,<br />
          on file.
        </div>
        <div className="mono" style={{ color: "var(--ink-dim)", maxWidth: 280, textAlign: "right" }}>
          All licences current. Datasheets available on request.
        </div>
      </div>

      <div className="cert-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--border-strong)" }}>
        {certs.map((c, i) =>
          <div key={c.code} style={{
            padding: 32,
            borderRight: (i % 3) !== 2 ? "1px solid var(--border)" : "none",
            borderBottom: i < 3 ? "1px solid var(--border)" : "none",
            display: "grid",
            gridTemplateColumns: "auto 1fr",
            gap: 24,
            alignItems: "start"
          }}>
            <div style={{
              width: 88, height: 88,
              border: "2px solid var(--ink)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--f-display-black)",
              fontSize: 22,
              fontWeight: 900,
              letterSpacing: "0.04em",
              background: "var(--bg)"
            }}>
              {c.code}
            </div>
            <div>
              <div style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.35, marginBottom: 12 }}>
                {c.name}
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)" }}>
                Lic. {c.id}
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginTop: 4 }}>
                CONTINUOUS SINCE {c.since}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>);
}

// ============================================================
// VALUE PROPS
// ============================================================
function ValueProps() {
  const props = [
  { n: "01", t: "Certified only", d: "Every SKU carries valid ISI / BIS / IEC markings. We reject uncertified stock — your projects pass inspection first time, every time." },
  { n: "02", t: "Trade accounts", d: "Open a trade account for priority service and volume benefits. Transparent GST-inclusive invoicing; no hidden handling fees." },
  { n: "03", t: "Inventory-first", d: "8,000 sq.ft of Ahmedabad warehousing means 94% of line items ship same-day. The remainder arrive within 48 hours via direct-OEM despatch." },
  { n: "04", t: "Spec guidance", d: "Our desk has wired 600+ sites. Bring load sheets, drawings or just a site plan — we help you right-size conduit, cable and protection." }];

  return (
    <section className="container" style={{ marginTop: 160 }}>
      <div className="sec-head">
        <div className="sec-num">§ 03 / PRINCIPLES</div>
        <div className="sec-title">
          Built for<br />
          the trade.
        </div>
        <div style={{ maxWidth: 280, color: "var(--ink-dim)", fontSize: 13, lineHeight: 1.55 }}>
          Our entire operation is tuned for the buyer who files purchase orders by the dozen.
        </div>
      </div>

      <div className="vp-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 40 }}>
        {props.map((p, i) =>
        <div key={p.n} className="value-card" style={{
          padding: "32px 28px 48px",
          borderRight: i < 3 ? "1px solid var(--border)" : "none",
          borderTop: "1px solid var(--border-strong)",
          position: "relative"
        }}>
            <div className="mono" style={{ color: "var(--accent)", marginBottom: 24 }}>{p.n} / 04</div>
            <div style={{ fontFamily: "var(--f-display-black)", fontSize: 30, fontWeight: 900, letterSpacing: "-0.02em", marginBottom: 16, lineHeight: 1, textTransform: "uppercase" }}>
              {p.t}
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.6, color: "var(--ink-dim)" }}>
              {p.d}
            </div>
          </div>
        )}
      </div>
    </section>);
}

// ============================================================
// FEATURED
// ============================================================
function Featured({ setRoute, setSelectedProduct }) {
  const featured = [
  window.PRODUCTS.find((p) => p.id === "p01"),
  window.PRODUCTS.find((p) => p.id === "p13"),
  window.PRODUCTS.find((p) => p.id === "p27"),
  window.PRODUCTS.find((p) => p.id === "p09")];

  return (
    <section className="container" style={{ marginTop: 160 }}>
      <div className="sec-head">
        <div className="sec-num">§ 04 / SELECTIONS</div>
        <div className="sec-title">
          This month's<br />
          <span style={{ color: "var(--accent)" }}>desk picks.</span>
        </div>
        <button className="btn" onClick={() => setRoute("catalog")}>
          All Products →
        </button>
      </div>

      <div className="feat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, marginTop: 20 }}>
        {featured.map((p) =>
        <ProductCard key={p.id} p={p}
        onClick={() => {setSelectedProduct(p);setRoute("product");}} />
        )}
      </div>
    </section>);
}

// ============================================================
// TESTIMONIALS
// ============================================================
function Testimonials() {
  const items = [
    {
      q: "We've sourced Polycab and Schneider through Prism for every project in our Bopal township. They flag spec mismatches before we do — saves a full revision cycle on every BOQ.",
      who: "Parag Patel",
      role: "Builder  ",
      proj: " Rytham Group. Ahmedabad"
    },
    {
      q: "Same-day despatch is real. Our last 12 POs reached the site within the window. BIS-marked material every time — no re-inspection hassle.",
      who: "Mahesh Bhai Patel",
      role: "Director",
     
    },
    {
      q: "Brought a load sheet for a commercial fit-out. They handed back a full cable schedule, MCB rating table and conduit BOM the same evening. That's the difference.",
      who: "Praful Katriya",
      role: "Electrical Consultant",
      proj: " Ahmedabad"
    }
  ];
  return (
    <section className="container" style={{ marginTop: 160 }}>
      <div className="sec-head">
        <div className="sec-num">§ 05 / IN THE FIELD</div>
        <div className="sec-title">
          Words from<br />
          the desk.
        </div>
        <div className="mono" style={{ color: "var(--ink-dim)" }}>
          Verbatim · 2024–25
        </div>
      </div>

      <div className="testi-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--border-strong)" }}>
        {items.map((t, i) =>
          <div key={i} style={{
            padding: "40px 32px",
            borderRight: i < 2 ? "1px solid var(--border)" : "none",
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            minHeight: 380
          }}>
            <div>
              <div style={{ fontFamily: "var(--f-display-black)", fontSize: 64, lineHeight: 0.5, color: "var(--accent)", fontWeight: 900, marginBottom: 24 }}>
                "
              </div>
              <div style={{ fontSize: 17, lineHeight: 1.45, color: "var(--ink)", marginBottom: 32 }}>
                {t.q}
              </div>
            </div>
            <div style={{ paddingTop: 24, borderTop: "1px solid var(--border)" }}>
              <div style={{ fontFamily: "var(--f-display-black)", fontSize: 16, fontWeight: 700, marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.02em" }}>
                {t.who}
              </div>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)", marginBottom: 8 }}>
                {t.role}
              </div>
              <div className="mono" style={{ fontSize: 9, color: "var(--ink-soft)" }}>
                ▸ {t.proj}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>);
}

// ============================================================
// PROJECTS
// ============================================================

// ============================================================
// RFQ INLINE — quick form
// ============================================================
function RFQInline({ setRoute }) {
  const [step, setStep] = useState(0);
  return (
    <section className="container" style={{ marginTop: 160 }}>
      <div className="sec-head">
        <div className="sec-num">§ 07 / 60-SECOND RFQ</div>
        <div className="sec-title">
          Start a quote.<br />
          <span style={{ color: "var(--accent)" }}>Right here.</span>
        </div>
        <div className="mono" style={{ color: "var(--ink-dim)" }}>
          No login. No spam.
        </div>
      </div>

      <div className="rfq-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", border: "1px solid var(--border-strong)", minHeight: 440 }}>
        <div style={{ padding: 40, borderRight: "1px solid var(--border-strong)", background: "var(--surface)" }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 24 }}>
            STEP {String(step + 1).padStart(2, "0")} OF 03
          </div>

          {step === 0 && (
            <>
              <div style={{ fontFamily: "var(--f-display-black)", fontSize: 36, fontWeight: 900, letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 24, textTransform: "uppercase" }}>
                What are you<br />sourcing?
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
                {["Conduit", "Wires", "Switches", "MCB", "Trays", "Metal Box & PVC Box", "Mixed BOQ"].map((c) =>
                  <span key={c} className="chip">{c}</span>
                )}
              </div>
              <button className="btn btn-primary" onClick={() => setStep(1)}>Next <span>→</span></button>
            </>
          )}

          {step === 1 && (
            <>
              <div style={{ fontFamily: "var(--f-display-black)", fontSize: 36, fontWeight: 900, letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 24, textTransform: "uppercase" }}>
                How much?
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
                {["Single item", "Small BOQ", "Project BOQ", "Recurring supply", "Trade account"].map((c) =>
                  <span key={c} className="chip">{c}</span>
                )}
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <button className="btn" onClick={() => setStep(0)}>← Back</button>
                <button className="btn btn-primary" onClick={() => setStep(2)}>Next <span>→</span></button>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div style={{ fontFamily: "var(--f-display-black)", fontSize: 36, fontWeight: 900, letterSpacing: "-0.02em", lineHeight: 1, marginBottom: 24, textTransform: "uppercase" }}>
                Where do<br />we send it?
              </div>
              <div style={{ marginBottom: 16 }}>
                <label className="label">Email</label>
                <input className="input" placeholder="you@firm.in" />
              </div>
              <div style={{ marginBottom: 24 }}>
                <label className="label">Phone (optional)</label>
                <input className="input" placeholder="+91 ..." />
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <button className="btn" onClick={() => setStep(1)}>← Back</button>
                <button className="btn btn-primary" onClick={() => setRoute("contact")}>Submit RFQ <span>→</span></button>
              </div>
            </>
          )}
        </div>

        <div className="rfq-right" style={{ padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginBottom: 16 }}>WHAT YOU GET ↓</div>
            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 18 }}>
              {[
                ["01", "Line-item quote", "MOQ, dispatch window and availability clearly labelled"],
                ["02", "Dispatch window", "Same-day, 48h or back-order — clearly labelled"],
                ["03", "Datasheet pack", "Certified PDFs for every SKU you specify"],
                ["04", "Trade account", "Pre-approved on first quote · 30-day terms"]
              ].map(([n, t, d]) =>
                <li key={n} style={{ display: "grid", gridTemplateColumns: "32px 1fr", gap: 16, alignItems: "start" }}>
                  <span className="mono" style={{ fontSize: 10, color: "var(--accent)" }}>{n}</span>
                  <div>
                    <div style={{ fontFamily: "var(--f-display-black)", fontSize: 18, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.01em" }}>{t}</div>
                    <div style={{ fontSize: 13, color: "var(--ink-dim)", marginTop: 2 }}>{d}</div>
                  </div>
                </li>
              )}
            </ul>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--ink-soft)", marginTop: 32, paddingTop: 16, borderTop: "1px solid var(--border)" }}>
            ▸ AVERAGE TURNAROUND: 3H 42M · MON–SAT
          </div>
        </div>
      </div>
    </section>);
}

// ============================================================
// CTA STRIP
// ============================================================
function CTAStrip({ setRoute }) {
  return (
    <section className="container" style={{ marginTop: 160 }}>
      <div style={{
        position: "relative",
        padding: "80px 60px",
        border: "1px solid var(--border-strong)",
        background: "var(--ink)",
        color: "var(--bg)",
        overflow: "hidden"
      }} className="cta-box">
        <div className="cta-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 60, alignItems: "center", position: "relative" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 28, color: "var(--accent)" }}>Open a trade account</div>
            <div style={{ fontFamily: "var(--f-display-black)", fontWeight: 900, fontSize: "clamp(48px, 6vw, 96px)", lineHeight: 0.92, letterSpacing: "-0.04em", textTransform: "uppercase" }}>
              Send us<br />
              your BOQ.<br />
              <span style={{ color: "var(--accent)" }}>Quote by sundown.</span>
            </div>
          </div>
          <div>
            <p style={{ color: "color-mix(in oklch, var(--bg) 75%, transparent)", fontSize: 15, lineHeight: 1.6, marginBottom: 28 }}>
              Upload drawings, load sheets or a parts list. Our desk returns a line-item quote with MOQ and dispatch window within working hours.
            </p>
            <button className="btn btn-accent" onClick={() => setRoute("contact")}>
              Request Quote <span>→</span>
            </button>
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, { HomePage });
