// Cart / Checkout
function CartPage() {
  return (
    <div className="n-page">
      <NobleNav active="shop" />

      {/* Progress */}
      <div style={{ padding: "24px 56px", borderBottom: "1px solid var(--n-line)", display: "flex", justifyContent: "center", gap: 64 }}>
        {[
          ["I", "Cart", true],
          ["II", "Delivery", true],
          ["III", "Payment", false],
          ["IV", "Review", false],
        ].map(([n, t, active]) => (
          <div key={t} style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span
              className="n-num"
              style={{
                width: 28,
                height: 28,
                border: active ? "1px solid var(--n-gold)" : "1px solid var(--n-line-strong)",
                borderRadius: "50%",
                display: "grid",
                placeItems: "center",
                fontSize: 11,
                color: active ? "var(--n-gold)" : "var(--n-muted)",
              }}
            >
              {n}
            </span>
            <span
              className="n-mono"
              style={{
                fontSize: 11,
                letterSpacing: "0.14em",
                textTransform: "uppercase",
                color: active ? "var(--n-cream)" : "var(--n-muted)",
              }}
            >
              {t}
            </span>
          </div>
        ))}
      </div>

      <section style={{ padding: "64px 56px 100px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64 }}>
        {/* Left: form */}
        <div>
          <div className="n-eyebrow" style={{ marginBottom: 24 }}>─── Step II / Delivery</div>
          <h1 className="n-display" style={{ fontSize: 56, margin: 0, marginBottom: 48 }}>
            Where shall we<br />
            <em>deliver it.</em>
          </h1>

          {/* contact */}
          <div className="n-label" style={{ marginBottom: 14 }}>Contact</div>
          <div style={{ display: "grid", gap: 24, marginBottom: 48 }}>
            <input className="n-input" placeholder="Full name" defaultValue="Aoife Lindqvist" />
            <input className="n-input" placeholder="Email" defaultValue="aoife.l@email.com" />
            <input className="n-input" placeholder="Phone (for delivery)" defaultValue="+44 7700 900 142" />
          </div>

          <div className="n-label" style={{ marginBottom: 14 }}>Address</div>
          <div style={{ display: "grid", gap: 24, marginBottom: 48 }}>
            <input className="n-input" placeholder="Street" defaultValue="14 Albemarle Mews" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
              <input className="n-input" placeholder="City" defaultValue="London" />
              <input className="n-input" placeholder="Postcode" defaultValue="W1S 4HW" />
            </div>
            <input className="n-input" placeholder="Country" defaultValue="United Kingdom" />
          </div>

          <div className="n-label" style={{ marginBottom: 14 }}>Delivery method</div>
          <div style={{ display: "grid", gap: 12 }}>
            {[
              { n: "White-glove courier", d: "Insured, hand-delivered · 5 working days", p: "Complimentary", a: true },
              { n: "Atelier collection", d: "Collect in Kyoto or Copenhagen · by appointment", p: "—", a: false },
              { n: "Express, signature", d: "Insured · 2 working days · DHL", p: "+$80", a: false },
            ].map((d) => (
              <div
                key={d.n}
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  padding: "20px 22px",
                  border: d.a ? "1px solid var(--n-gold)" : "1px solid var(--n-line-strong)",
                  background: d.a ? "rgba(201,168,106,0.04)" : "transparent",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                  <span
                    style={{
                      width: 16,
                      height: 16,
                      border: d.a ? "1px solid var(--n-gold)" : "1px solid var(--n-line-strong)",
                      borderRadius: "50%",
                      display: "grid",
                      placeItems: "center",
                    }}
                  >
                    {d.a && (
                      <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--n-gold)" }} />
                    )}
                  </span>
                  <div>
                    <div style={{ fontSize: 14 }}>{d.n}</div>
                    <div style={{ fontSize: 12, color: "var(--n-muted)", marginTop: 4 }}>{d.d}</div>
                  </div>
                </div>
                <span className="n-mono" style={{ fontSize: 12, color: d.a ? "var(--n-gold)" : "var(--n-cream-dim)", letterSpacing: "0.12em" }}>
                  {d.p}
                </span>
              </div>
            ))}
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 56 }}>
            <button className="n-btn n-btn-text" style={{ color: "var(--n-muted)" }}>← Back to cart</button>
            <button className="n-btn n-btn-gold">Continue to payment →</button>
          </div>
        </div>

        {/* Right: order summary */}
        <div>
          <div
            className="n-panel"
            style={{ padding: 32, position: "sticky", top: 24 }}
          >
            <div className="n-eyebrow" style={{ marginBottom: 24 }}>Your order · 02 items</div>

            {/* line items */}
            <div style={{ display: "grid", gap: 24, marginBottom: 24 }}>
              {[
                {
                  name: "M-1 Obsidian",
                  meta: "Series 04 · Obsidian · 3m XLR4",
                  engraving: "Engraved: “A.L. — 2026”",
                  price: "$1,950",
                  num: "01",
                },
                {
                  name: "Atelier care kit",
                  meta: "Brush · cloth · urushi oil",
                  engraving: null,
                  price: "$120",
                  num: "01",
                },
              ].map((item) => (
                <div key={item.name} style={{ display: "grid", gridTemplateColumns: "84px 1fr", gap: 16 }}>
                  <div
                    style={{
                      height: 84,
                      background: "repeating-linear-gradient(135deg, #161616 0 1px, transparent 1px 12px), #0f0f0f",
                      border: "1px solid var(--n-line)",
                    }}
                  />
                  <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
                      <div>
                        <div style={{ fontFamily: "var(--n-serif)", fontSize: 18 }}>{item.name}</div>
                        <div style={{ fontSize: 11, color: "var(--n-muted)", marginTop: 4 }}>{item.meta}</div>
                        {item.engraving && (
                          <div className="n-mono" style={{ fontSize: 10, color: "var(--n-gold)", letterSpacing: "0.1em", marginTop: 6, textTransform: "uppercase" }}>
                            {item.engraving}
                          </div>
                        )}
                      </div>
                      <span className="n-num" style={{ fontSize: 14, color: "var(--n-gold)" }}>{item.price}</span>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}>
                      <div style={{ display: "flex", border: "1px solid var(--n-line-strong)" }}>
                        <button style={{ background: "transparent", border: "none", color: "var(--n-cream-dim)", padding: "4px 10px", cursor: "pointer" }}>−</button>
                        <span className="n-num" style={{ padding: "4px 10px", fontSize: 12, borderLeft: "1px solid var(--n-line-strong)", borderRight: "1px solid var(--n-line-strong)" }}>
                          {item.num}
                        </span>
                        <button style={{ background: "transparent", border: "none", color: "var(--n-cream-dim)", padding: "4px 10px", cursor: "pointer" }}>+</button>
                      </div>
                      <button className="n-btn-text" style={{ background: "none", border: "none", color: "var(--n-muted)", fontSize: 11, letterSpacing: "0.12em", cursor: "pointer", textTransform: "uppercase" }}>Remove</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="n-divider" style={{ marginBottom: 20 }} />

            {/* discount */}
            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
              <input
                className="n-input"
                style={{ borderBottom: "1px solid var(--n-line-strong)", fontSize: 13 }}
                placeholder="Atelier code"
              />
              <button className="n-btn n-btn-ghost" style={{ padding: "10px 16px", fontSize: 11 }}>Apply</button>
            </div>

            {/* totals */}
            <div style={{ display: "grid", gap: 14, fontSize: 13 }}>
              {[
                ["Subtotal", "$2,070"],
                ["Engraving", "$60"],
                ["White-glove delivery", "Complimentary"],
                ["VAT (20%)", "$426"],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "flex", justifyContent: "space-between", color: "var(--n-cream-dim)" }}>
                  <span>{k}</span>
                  <span className="n-num">{v}</span>
                </div>
              ))}
            </div>

            <div className="n-divider" style={{ margin: "24px 0" }} />

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontFamily: "var(--n-serif)", fontSize: 22 }}>Total</span>
              <span className="n-num" style={{ fontSize: 30, color: "var(--n-gold)" }}>$2,556.00</span>
            </div>

            <div
              className="n-mono"
              style={{
                marginTop: 32,
                paddingTop: 20,
                borderTop: "1px solid var(--n-line)",
                fontSize: 10,
                letterSpacing: "0.14em",
                color: "var(--n-faint)",
                textTransform: "uppercase",
                lineHeight: 1.8,
              }}
            >
              Reserved until 18:42 GMT<br />
              Estimated arrival · 21 May 2026
            </div>
          </div>
        </div>
      </section>

      <NobleFooter />
    </div>
  );
}

window.CartPage = CartPage;