/* global React */
const { useState } = window.ReactHooks;

function GalleryPage() {
  const products = window.PRODUCTS;
  const [sel, setSel] = useState(products[0].id);
  const p = products.find((x) => x.id === sel) || products[0];

  return (
    <main>
      <section className="page-head">
        <div className="container">
          <div className="crumb">
            <a href="#/home">Home</a><span>/</span><span>Live gallery</span>
          </div>
          <h1>Live gallery</h1>
          <p className="sub">Interactive demos of every visual, rendered on synthetic sample data. Select any visual to explore its behaviour — no Power BI install required.</p>
        </div>
      </section>

      <section style={{ paddingBottom: 112 }}>
        <div className="container">
          <div className="gallery-layout">
            <div className="gallery-list">
              {products.map((x) => (
                <div key={x.id} className={"gallery-row " + (x.id === sel ? "on" : "")} onClick={() => setSel(x.id)}>
                  <div>
                    <div className="t">{x.name}</div>
                    <div className="k">{x.category}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>v{x.version}</span>
                </div>
              ))}
            </div>

            <div className="gallery-stage">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
                <div>
                  <div className="eyebrow">{p.category} · v{p.version}</div>
                  <h2 className="display" style={{ fontSize: 40, margin: "8px 0 0", letterSpacing: "-0.02em" }}>{p.name}</h2>
                </div>
                <div style={{ display: "flex", gap: 12 }}>
                  <a href={"#/product?id=" + p.id} className="btn btn-ghost btn-sm">View details →</a>
                  <a href="#/contact" className="btn btn-sm">Request demo</a>
                </div>
              </div>

              <div className="frame">
                <div className="ph" style={{ padding: "14px 20px", borderBottom: "1px solid var(--line-softer)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--muted)", textTransform: "uppercase" }}>
                    {p.name} · demo-dataset-01
                  </span>
                  <span className="hero-chip"><span className="dot" /> LIVE</span>
                </div>
                <div style={{ padding: 32, flex: 1 }}>
                  <window.ProductVisual id={p.id} big />
                </div>
                <div style={{ padding: "14px 20px", borderTop: "1px solid var(--line-softer)", display: "flex", justifyContent: "space-between", color: "var(--muted)", fontFamily: "var(--f-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em" }}>
                  <span>Data · 12,400 rows · synthetic</span>
                  <span>Rendered in SVG</span>
                </div>
              </div>

              <div className="spacer-6" />
              <p style={{ color: "var(--muted)", maxWidth: 640, fontSize: 14 }}>{p.summary}</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.GalleryPage = GalleryPage;