// Product Detail Page
function ProductPage() {
  const thumbs = ["01", "02", "03", "04", "05"];
  return (
    <div className="n-page">
      <NobleNav active="shop" />

      {/* Breadcrumb */}
      <div
        style={{
          padding: "20px 56px",
          borderBottom: "1px solid var(--n-line)",
          fontFamily: "var(--n-mono)",
          fontSize: 11,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: "var(--n-muted)",
        }}
      >
        Shop / Headphones / <span style={{ color: "var(--n-cream)" }}>M-1 Obsidian — Series 04</span>
      </div>

      {/* Hero: gallery + buy column */}
      <section style={{ padding: "48px 56px 80px", display: "grid", gridTemplateColumns: "1fr 480px", gap: 64 }}>
        {/* Gallery */}
        <div>
          <div style={{ display: "grid", gridTemplateColumns: "72px 1fr", gap: 16 }}>
            <div style={{ display: "grid", gap: 8 }}>
              {thumbs.map((t, i) => (
                <div
                  key={t}
                  style={{
                    height: 72,
                    border: i === 0 ? "1px solid var(--n-gold)" : "1px solid var(--n-line)",
                    background: "var(--n-panel)",
                    fontFamily: "var(--n-mono)",
                    fontSize: 10,
                    letterSpacing: "0.12em",
                    color: i === 0 ? "var(--n-gold)" : "var(--n-faint)",
                    display: "grid",
                    placeItems: "center",
                  }}
                >
                  {t}
                </div>
              ))}
            </div>
            <NoblePlaceholder height={680} label="M-1 OBSIDIAN · 3/4 STUDIO" corner="01 / 05" cornerRight="ZOOM ⤢" />
          </div>

          {/* Spec scroll */}
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            <NoblePlaceholder height={280} label="DETAIL · EARCUP MACHINING" corner="DETAIL A" />
            <NoblePlaceholder height={280} label="DETAIL · DRIVER ARRAY" corner="DETAIL B" />
          </div>
        </div>

        {/* Buy column */}
        <div style={{ position: "relative" }}>
          <div style={{ position: "sticky", top: 24 }}>
            <div className="n-eyebrow" style={{ marginBottom: 18 }}>
              ─── Series 04 · Edition of 800
            </div>
            <h1 className="n-display" style={{ fontSize: 52, margin: 0, marginBottom: 12 }}>
              M-1 <em>Obsidian</em>
            </h1>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 24 }}>
              <div className="n-num" style={{ fontSize: 28, color: "var(--n-gold)" }}>$1,890</div>
              <div className="n-mono" style={{ fontSize: 11, color: "var(--n-muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>
                or 12 × $158 · Affirm
              </div>
            </div>
            <p style={{ fontSize: 15, color: "var(--n-cream-dim)", lineHeight: 1.6, margin: 0, marginBottom: 32 }}>
              A closed-back studio reference, machined from a single billet of
              recycled aluminium. Hand-assembled in Kyoto over the course of
              forty-two hours by a single artisan.
            </p>

            {/* Finish picker */}
            <div className="n-label" style={{ marginBottom: 14 }}>Finish</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 32 }}>
              {[
                { n: "Obsidian", c: "#0a0a0a", a: true },
                { n: "Graphite", c: "#3a3a3a", a: false },
                { n: "Sumi Walnut", c: "#4a2e1c", a: false },
              ].map((f) => (
                <div
                  key={f.n}
                  style={{
                    padding: "14px 12px",
                    border: f.a ? "1px solid var(--n-gold)" : "1px solid var(--n-line-strong)",
                    background: f.a ? "rgba(201,168,106,0.06)" : "transparent",
                    display: "flex",
                    flexDirection: "column",
                    gap: 12,
                  }}
                >
                  <div style={{ width: "100%", height: 28, background: f.c, border: "1px solid var(--n-line)" }} />
                  <div style={{ fontSize: 12 }}>{f.n}</div>
                </div>
              ))}
            </div>

            {/* Cable */}
            <div className="n-label" style={{ marginBottom: 14 }}>Cable</div>
            <div style={{ display: "grid", gap: 8, marginBottom: 32 }}>
              {[
                { n: "3m balanced — XLR4", inc: "Included", a: true },
                { n: "1.5m unbalanced — 6.35mm", inc: "Included", a: false },
                { n: "Studio coil — 5m OFC", inc: "+$220", a: false },
              ].map((c) => (
                <div
                  key={c.n}
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    padding: "14px 16px",
                    border: c.a ? "1px solid var(--n-gold)" : "1px solid var(--n-line-strong)",
                    background: c.a ? "rgba(201,168,106,0.04)" : "transparent",
                  }}
                >
                  <span style={{ fontSize: 13 }}>{c.n}</span>
                  <span className="n-mono" style={{ fontSize: 11, color: c.a ? "var(--n-gold)" : "var(--n-muted)", letterSpacing: "0.1em" }}>
                    {c.inc}
                  </span>
                </div>
              ))}
            </div>

            {/* Engraving */}
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "16px 18px",
                border: "1px solid var(--n-line-strong)",
                marginBottom: 24,
              }}
            >
              <div>
                <div className="n-label">Engraving</div>
                <div style={{ fontSize: 13, marginTop: 4, color: "var(--n-muted)" }}>Up to 18 characters, inside left cup</div>
              </div>
              <span className="n-mono" style={{ fontSize: 11, color: "var(--n-gold)" }}>ADD +$60 →</span>
            </div>

            <button
              className="n-btn n-btn-gold"
              style={{ width: "100%", justifyContent: "center", padding: "18px 22px", fontSize: 13, marginBottom: 12 }}
            >
              Reserve — ships 14 May 2026
            </button>
            <button
              className="n-btn n-btn-ghost"
              style={{ width: "100%", justifyContent: "center", padding: "16px 22px" }}
            >
              Add to commission list
            </button>

            <div
              style={{
                marginTop: 32,
                paddingTop: 24,
                borderTop: "1px solid var(--n-line)",
                display: "grid",
                gap: 14,
                fontSize: 12,
                color: "var(--n-cream-dim)",
              }}
            >
              {[
                ["White-glove delivery", "Insured, 5 working days"],
                ["12-year guarantee", "Including parts & labour"],
                ["30-day audition", "Return for full refund"],
              ].map(([t, d]) => (
                <div key={t} style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ color: "var(--n-cream)" }}>{t}</span>
                  <span style={{ color: "var(--n-muted)" }}>{d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Specs table */}
      <section style={{ padding: "100px 56px", background: "var(--n-ink)", borderTop: "1px solid var(--n-line)", borderBottom: "1px solid var(--n-line)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80 }}>
          <div>
            <div className="n-eyebrow" style={{ marginBottom: 24 }}>─── Measured · ABX-009</div>
            <h2 className="n-display" style={{ fontSize: 48, margin: 0 }}>
              The numbers,<br />
              <em>for the record.</em>
            </h2>
          </div>
          <div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 64px" }}>
              {[
                ["Driver", "50mm planar magnetic"],
                ["Impedance", "32 Ω"],
                ["Sensitivity", "104 dB / mW"],
                ["Frequency", "8 Hz – 51 kHz"],
                ["THD", "< 0.04 % @ 1 kHz"],
                ["Weight", "412 g (without cable)"],
                ["Earpads", "Hand-stitched Nappa, replaceable"],
                ["Housing", "6061 aluminium, urushi"],
              ].map(([k, v]) => (
                <div
                  key={k}
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "baseline",
                    padding: "22px 0",
                    borderBottom: "1px solid var(--n-line)",
                  }}
                >
                  <span className="n-mono" style={{ fontSize: 11, color: "var(--n-muted)", letterSpacing: "0.14em", textTransform: "uppercase" }}>{k}</span>
                  <span className="n-num" style={{ fontSize: 14, color: "var(--n-cream)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Frequency chart placeholder */}
      <section style={{ padding: "100px 56px" }}>
        <div className="n-eyebrow" style={{ marginBottom: 32 }}>─── Frequency response · 0.5 smoothing</div>
        <div
          className="n-panel"
          style={{
            height: 320,
            position: "relative",
            padding: 32,
            overflow: "hidden",
          }}
        >
          {/* grid */}
          <svg width="100%" height="100%" viewBox="0 0 1000 260" preserveAspectRatio="none" style={{ position: "absolute", inset: 32, width: "calc(100% - 64px)", height: "calc(100% - 64px)" }}>
            {[0, 1, 2, 3, 4].map((i) => (
              <line key={"h" + i} x1="0" y1={i * 65} x2="1000" y2={i * 65} stroke="rgba(236,230,216,0.06)" />
            ))}
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
              <line key={"v" + i} x1={i * 100} y1="0" x2={i * 100} y2="260" stroke="rgba(236,230,216,0.06)" />
            ))}
            <path
              d="M0,140 C80,138 140,132 200,128 C280,124 340,118 420,120 C500,122 560,110 640,108 C720,106 780,118 840,134 C900,150 950,164 1000,180"
              stroke="var(--n-gold)"
              strokeWidth="1.5"
              fill="none"
            />
            <path
              d="M0,140 C80,138 140,132 200,128 C280,124 340,118 420,120 C500,122 560,110 640,108 C720,106 780,118 840,134 C900,150 950,164 1000,180 L1000,260 L0,260 Z"
              fill="var(--n-gold)"
              opacity="0.08"
            />
          </svg>
          <div style={{ position: "absolute", bottom: 12, left: 32, right: 32, display: "flex", justifyContent: "space-between", fontFamily: "var(--n-mono)", fontSize: 10, color: "var(--n-faint)" }}>
            {["20", "100", "500", "1k", "5k", "10k", "20k"].map((t) => <span key={t}>{t} Hz</span>)}
          </div>
          <div style={{ position: "absolute", top: 32, right: 32, fontFamily: "var(--n-mono)", fontSize: 10, color: "var(--n-muted)", letterSpacing: "0.12em" }}>
            +5 dB / -5 dB · ABX-009 · 24°C
          </div>
        </div>
      </section>

      <NobleFooter />
    </div>
  );
}

window.ProductPage = ProductPage;