// ========================================
// PRISM SALES — Certifications page
// Image gallery with lightbox + PDF document cards
// ========================================

function CertificationsPage({ setRoute }) {
  const [lightbox, setLightbox] = React.useState(null);

  React.useEffect(() => {
    const id = 'cert-anim-styles';
    if (document.getElementById(id)) return;
    const style = document.createElement('style');
    style.id = id;
    style.textContent = `
      @keyframes certFadeUp {
        from { opacity: 0; transform: translateY(36px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .cert-card {
        animation: certFadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
      @keyframes pdfFadeUp {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .pdf-card {
        animation: pdfFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
      }
    `;
    document.head.appendChild(style);
  }, []);

  const certImages = [
    {
      img: "assets/Certificate/Prism Sales.png",
      title: "Schneider Electric Authorization",
      issuer: "Schneider Electric India Pvt. Ltd.",
      year: "2026",
    },
    {
      img: "assets/Certificate/certificateND_CDL_Distributor_Prism Sales Corporation.png",
      title: "Polycab Authorized Distributor",
      issuer: "Polycab India Ltd. — LDC Division",
      year: "2026–27",
    },
    {
      img: "assets/Certificate/c&s.png",
      title: "C&S Electric Authorized Distributor",
      issuer: "C&S Electric Ltd.",
      year: "2027",
    },
  ];

  const pdfDocs = [
    {
      pdf: "assets/Certificate/241_farem_KEI__30.06.2023_South Gujarat_Distributor Certificate-2.pdf",
      title: "KEI Distributor Certificate",
      issuer: "KEI Industries Ltd.",
      region: "South Gujarat",
      year: "2023",
      icon: "KEI",
    },
    {
      pdf: "assets/Certificate/Wonder Channel partner certificate_251211_195333 (1).pdf",
      title: "Wonder Channel Partner Certificate",
      issuer: "Wonder Cables",
      region: "—",
      year: "2025",
      icon: "WND",
    },
    {
      pdf: "assets/Certificate/PRISM MSME.pdf",
      title: "MSME Registration",
      issuer: "Ministry of MSME, Govt. of India",
      region: "National",
      year: "Active",
      icon: "GOI",
    },
    {
      pdf: "assets/Certificate/ANFIX TIES PRIVATE LIMITED.pdf",
      title: "Anfix Ties Private Limited",
      issuer: "Anfix Ties Private Limited",
      region: "Gujarat",
      year: "Active",
      icon: "PSC",
    },
  ];

  return (
    <div className="page">
      {/* Lightbox */}
      {lightbox !== null && (
        <div
          onClick={() => setLightbox(null)}
          style={{
            position: "fixed", inset: 0, zIndex: 1000,
            background: "rgba(0,0,0,0.92)",
            display: "flex", alignItems: "center", justifyContent: "center",
            cursor: "zoom-out",
          }}
        >
          <div
            style={{ position: "relative", maxWidth: "90vw", maxHeight: "90vh" }}
            onClick={e => e.stopPropagation()}
          >
            <img
              src={certImages[lightbox].img}
              alt={certImages[lightbox].title}
              style={{ maxWidth: "90vw", maxHeight: "85vh", objectFit: "contain", display: "block" }}
            />
            <div style={{
              position: "absolute", bottom: 0, left: 0, right: 0,
              background: "rgba(0,0,0,0.7)", padding: "16px 20px",
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 18, color: "#f4f1ea" }}>
                  {certImages[lightbox].title}
                </div>
                <div className="mono" style={{ fontSize: 10, color: "rgba(244,241,234,0.5)", marginTop: 4 }}>
                  {certImages[lightbox].issuer} · {certImages[lightbox].year}
                </div>
              </div>
              <div style={{ display: "flex", gap: 12 }}>
                <button
                  aria-label="Previous certificate"
                  onClick={() => setLightbox(l => Math.max(0, l - 1))}
                  disabled={lightbox === 0}
                  style={{ width: 40, height: 40, background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#f4f1ea", cursor: lightbox === 0 ? "default" : "pointer", fontSize: 16 }}>
                  ←
                </button>
                <button
                  aria-label="Next certificate"
                  onClick={() => setLightbox(l => Math.min(certImages.length - 1, l + 1))}
                  disabled={lightbox === certImages.length - 1}
                  style={{ width: 40, height: 40, background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#f4f1ea", cursor: lightbox === certImages.length - 1 ? "default" : "pointer", fontSize: 16 }}>
                  →
                </button>
                <button
                  aria-label="Close lightbox"
                  onClick={() => setLightbox(null)}
                  style={{ width: 40, height: 40, background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.2)", color: "#f4f1ea", cursor: "pointer", fontSize: 16 }}>
                  ✕
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <section className="container" style={{ paddingTop: 40 }}>

        {/* Breadcrumb */}
        <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 — 05 / CERTIFICATIONS</span>
          <span className="bc-mid">{certImages.length + pdfDocs.length} CERTIFICATES</span>
          <span>VERIFIED · 2025–2026</span>
        </div>

        <div className="eyebrow" style={{ marginBottom: 32 }}>Standards & compliance</div>
        <h1 className="reveal" style={{
          fontFamily: "var(--f-display)",
          fontSize: "clamp(56px, 9vw, 148px)",
          lineHeight: 0.88,
          letterSpacing: "-0.035em",
          marginBottom: 48,
          maxWidth: 1200,
        }}>
          Every SKU<br />
          <span style={{ fontStyle: "italic", color: "var(--accent)" }}>passes inspection</span>.
        </h1>

        <p style={{ maxWidth: 680, fontSize: 17, lineHeight: 1.65, color: "var(--ink-dim)", marginBottom: 100 }}>
          We reject uncertified stock — no exceptions. All certifications are on file and available on request.
        </p>

        {/* ── Image Certificate Gallery ── */}
        <div style={{ marginBottom: 120 }}>
          <div className="sec-head">
            <div className="sec-num">§ 01 — AUTHORIZATIONS</div>
            <div className="sec-title">Brand <span style={{ fontStyle: "italic" }}>certificates</span>.</div>
            <div style={{ color: "var(--ink-dim)", fontSize: 13, maxWidth: 280 }}>
              Click any certificate to view full size.
            </div>
          </div>

          <div className="cert-gallery-grid" style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }}>
            {certImages.map((c, i) => (
              <div
                key={i}
                className="cert-card"
                onClick={() => setLightbox(i)}
                style={{
                  cursor: "zoom-in",
                  position: "relative",
                  overflow: "hidden",
                  border: "1px solid var(--border)",
                  animationDelay: `${i * 0.14}s`,
                  display: "flex",
                  flexDirection: "column",
                }}
                onMouseEnter={e => {
                  e.currentTarget.querySelector(".cert-img").style.transform = "scale(1.05)";
                  e.currentTarget.querySelector(".cert-overlay").style.opacity = "1";
                  e.currentTarget.style.borderColor = "var(--ink-dim)";
                }}
                onMouseLeave={e => {
                  e.currentTarget.querySelector(".cert-img").style.transform = "scale(1)";
                  e.currentTarget.querySelector(".cert-overlay").style.opacity = "0";
                  e.currentTarget.style.borderColor = "var(--border)";
                }}
              >
                {/* Image area */}
                <div style={{
                  overflow: "hidden",
                  aspectRatio: "4/3",
                  background: "#f5f3ee",
                  position: "relative",
                  flexShrink: 0,
                }}>
                  <img
                    className="cert-img"
                    src={c.img}
                    alt={c.title}
                    style={{
                      width: "100%", height: "100%",
                      objectFit: "contain",
                      display: "block",
                      transition: "transform 0.55s cubic-bezier(0.22, 1, 0.36, 1)",
                    }}
                  />
                  {/* Hover overlay */}
                  <div className="cert-overlay" style={{
                    position: "absolute", inset: 0,
                    background: "rgba(18,18,15,0.72)",
                    display: "flex", flexDirection: "column",
                    justifyContent: "center", alignItems: "center",
                    opacity: 0,
                    transition: "opacity 0.3s",
                  }}>
                    <div style={{
                      width: 48, height: 48, borderRadius: "50%",
                      border: "1.5px solid rgba(244,241,234,0.5)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      marginBottom: 12,
                    }}>
                      <span style={{ color: "#f4f1ea", fontSize: 20 }}>⊕</span>
                    </div>
                    <div className="mono" style={{ fontSize: 9, color: "rgba(244,241,234,0.7)", letterSpacing: "0.18em" }}>
                      CLICK TO EXPAND
                    </div>
                  </div>
                  {/* Year badge */}
                  <div style={{
                    position: "absolute", top: 14, right: 14,
                    background: "var(--ink)", color: "var(--bg)",
                    fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.14em",
                    padding: "4px 8px",
                  }}>{c.year}</div>
                </div>

                {/* Label below image */}
                <div style={{
                  padding: "18px 20px",
                  background: "var(--bg)",
                  borderTop: "1px solid var(--border)",
                }}>
                  <div style={{ fontFamily: "var(--f-display)", fontSize: 16, letterSpacing: "-0.01em", marginBottom: 4 }}>
                    {c.title}
                  </div>
                  <div className="mono" style={{ fontSize: 9, color: "var(--ink-dim)", letterSpacing: "0.1em" }}>
                    {c.issuer}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ── PDF Documents ── */}
        <div style={{ marginBottom: 120 }}>
          <div className="sec-head">
            <div className="sec-num">§ 02 — DOCUMENTS</div>
            <div className="sec-title">Official <span style={{ fontStyle: "italic" }}>registrations</span>.</div>
            <div style={{ color: "var(--ink-dim)", fontSize: 13, maxWidth: 280 }}>
              Click to open or download.
            </div>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
            gap: 1,
            background: "var(--border)",
          }}>
            {pdfDocs.map((d, i) => (
              <a
                key={i}
                href={d.pdf}
                target="_blank"
                rel="noopener noreferrer"
                style={{ textDecoration: "none" }}
              >
                <div
                  className="pdf-card"
                  style={{
                    padding: "32px 28px",
                    background: "var(--bg)",
                    transition: "background 0.2s",
                    display: "flex",
                    flexDirection: "column",
                    gap: 16,
                    height: "100%",
                    boxSizing: "border-box",
                    cursor: "pointer",
                    animationDelay: `${0.3 + i * 0.1}s`,
                  }}
                  onMouseEnter={e => e.currentTarget.style.background = "var(--surface)"}
                  onMouseLeave={e => e.currentTarget.style.background = "var(--bg)"}
                >
                  {/* Icon + year */}
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                    <div style={{
                      width: 48, height: 48,
                      background: "var(--ink)", color: "var(--bg)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--f-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.08em",
                    }}>{d.icon}</div>
                    <div style={{
                      fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.14em",
                      color: "var(--ink-dim)",
                      border: "1px solid var(--border)",
                      padding: "4px 10px",
                    }}>{d.year}</div>
                  </div>

                  {/* Info */}
                  <div>
                    <div style={{ fontFamily: "var(--f-display)", fontSize: 20, letterSpacing: "-0.01em", marginBottom: 6, color: "var(--ink)" }}>
                      {d.title}
                    </div>
                    <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)", marginBottom: 4 }}>
                      {d.issuer}
                    </div>
                    <div className="mono" style={{ fontSize: 9, color: "var(--ink-dim)", opacity: 0.6 }}>
                      {d.region}
                    </div>
                  </div>

                  {/* Open PDF hint */}
                  <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 8 }}>
                    <div style={{
                      fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.12em",
                      color: "var(--accent)", textTransform: "uppercase",
                    }}>View PDF →</div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>

      </section>
    </div>
  );
}

Object.assign(window, { CertificationsPage });