// Landing page mockup
function LandingPage() {
  return (
    <div className="n-page">
      <NobleNav active="shop" />

      {/* Hero */}
      <section style={{ position: "relative", padding: "0 56px" }}>
        {/* announcement bar */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "14px 0",
            borderBottom: "1px solid var(--n-line)",
            fontFamily: "var(--n-mono)",
            fontSize: 11,
            letterSpacing: "0.14em",
            textTransform: "uppercase",
            color: "var(--n-muted)",
          }}
        >
          <span>Edition 04 — The Obsidian Series — shipping June</span>
          <span style={{ display: "flex", gap: 24 }}>
            <span>Free white-glove delivery over $1,200</span>
            <span style={{ color: "var(--n-gold)" }}>Atelier visits by appointment →</span>
          </span>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 80,
            padding: "80px 0 120px",
            alignItems: "center",
          }}
        >
          <div>
            <div className="n-eyebrow" style={{ marginBottom: 32 }}>
              ─── Heritage Audio · Est. Kyoto 2009
            </div>
            <h1
              className="n-display"
              style={{ fontSize: 116, margin: 0, marginBottom: 36 }}
            >
              The sound of<br />
              <em>almost nothing</em><br />
              between you.
            </h1>
            <p
              style={{
                fontSize: 17,
                lineHeight: 1.6,
                color: "var(--n-cream-dim)",
                maxWidth: 460,
                margin: 0,
                marginBottom: 48,
              }}
            >
              Hand-assembled over-ear headphones, machined from a single billet
              of recycled aluminium and finished in Nara lacquer. Forty-two
              hours of craft. Twelve year warranty. Built to outlast trends.
            </p>
            <div style={{ display: "flex", gap: 16, marginBottom: 64 }}>
              <button className="n-btn n-btn-gold">
                Shop the M-1
                <span>→</span>
              </button>
              <button className="n-btn n-btn-ghost">The Craft Film</button>
            </div>

            {/* trust strip */}
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)",
                gap: 32,
                paddingTop: 32,
                borderTop: "1px solid var(--n-line)",
              }}
            >
              {[
                { n: "12,458", l: "Pairs in the wild" },
                { n: "42 hrs", l: "Build time per unit" },
                { n: "12 yr", l: "Service guarantee" },
              ].map((s) => (
                <div key={s.l}>
                  <div className="n-num" style={{ fontSize: 28, color: "var(--n-cream)" }}>
                    {s.n}
                  </div>
                  <div
                    className="n-eyebrow"
                    style={{ marginTop: 6, fontSize: 10 }}
                  >
                    {s.l}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Hero image */}
          <div style={{ position: "relative" }}>
            <NoblePlaceholder
              height={680}
              label="HERO · M-1 OBSIDIAN · 3/4"
              corner="FRAME · 01"
              cornerRight="01 / 06"
            />
            {/* floating spec card */}
            <div
              className="n-panel"
              style={{
                position: "absolute",
                bottom: 32,
                left: -40,
                padding: "20px 24px",
                width: 280,
                backdropFilter: "blur(8px)",
                background: "rgba(20,20,20,0.85)",
              }}
            >
              <div className="n-eyebrow" style={{ marginBottom: 10 }}>
                NOW PLAYING
              </div>
              <div style={{ fontFamily: "var(--n-serif)", fontSize: 22, marginBottom: 4 }}>
                Köln Concert, Pt. I
              </div>
              <div style={{ fontSize: 12, color: "var(--n-muted)", marginBottom: 16 }}>
                Keith Jarrett · ECM 1064/65 · 96kHz
              </div>
              <div style={{ display: "flex", gap: 3, alignItems: "flex-end", height: 24 }}>
                {[14, 8, 20, 12, 24, 18, 10, 22, 16, 8, 14, 20, 12, 18, 10, 6, 14, 22, 16, 12, 8, 18, 14, 10].map((h, i) => (
                  <div
                    key={i}
                    style={{
                      width: 3,
                      height: h,
                      background: i < 12 ? "var(--n-gold)" : "var(--n-line-strong)",
                    }}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Marquee strip */}
      <div
        style={{
          borderTop: "1px solid var(--n-line)",
          borderBottom: "1px solid var(--n-line)",
          padding: "20px 0",
          overflow: "hidden",
          background: "var(--n-ink)",
        }}
      >
        <div
          style={{
            display: "flex",
            gap: 64,
            fontFamily: "var(--n-serif)",
            fontSize: 34,
            color: "var(--n-faint)",
            whiteSpace: "nowrap",
            alignItems: "center",
          }}
        >
          {["Monocle", "Wallpaper*", "Stereophile", "WIRED", "Hi-Fi+", "T Magazine", "Monocle", "Wallpaper*"].map((p, i) => (
            <React.Fragment key={i}>
              <span style={{ fontStyle: "italic" }}>{p}</span>
              <span style={{ color: "var(--n-gold)", fontSize: 8 }}>◆</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* The Collection */}
      <section style={{ padding: "120px 56px" }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            marginBottom: 64,
          }}
        >
          <div>
            <div className="n-eyebrow" style={{ marginBottom: 24 }}>
              ─── 02 / The Collection
            </div>
            <h2 className="n-display" style={{ fontSize: 72, margin: 0, maxWidth: 700 }}>
              Three instruments.<br />
              <em>One philosophy.</em>
            </h2>
          </div>
          <div style={{ textAlign: "right", maxWidth: 320 }}>
            <p style={{ color: "var(--n-cream-dim)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
              Each pair is numbered, signed, and made to order. We don't release
              more than 800 units per series.
            </p>
            <button className="n-btn n-btn-text" style={{ marginTop: 20, color: "var(--n-gold)" }}>
              View all editions →
            </button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {[
            { name: "M-1 Obsidian", series: "Series 04", price: "$1,890", desc: "Closed-back. Black anodised. Studio reference.", stock: "318 / 800 remaining" },
            { name: "M-1 Sumi", series: "Series 03", price: "$2,240", desc: "Open-back. Hand-lacquered walnut. Long listening.", stock: "47 / 800 remaining" },
            { name: "M-1 Argentum", series: "Series 02", price: "$3,120", desc: "Polished sterling. Sapphire grilles. Made to order.", stock: "By commission" },
          ].map((p, i) => (
            <div key={p.name} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <NoblePlaceholder
                height={460}
                label={`COLLECTION · ${p.name.toUpperCase()}`}
                corner={`0${i + 1}`}
                cornerRight="STUDIO"
              />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div className="n-eyebrow">{p.series}</div>
                <div className="n-num" style={{ color: "var(--n-gold)", fontSize: 14 }}>
                  {p.price}
                </div>
              </div>
              <div style={{ fontFamily: "var(--n-serif)", fontSize: 32, letterSpacing: "-0.01em" }}>
                {p.name}
              </div>
              <p style={{ color: "var(--n-cream-dim)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>
                {p.desc}
              </p>
              <div
                className="n-mono"
                style={{
                  fontSize: 10,
                  letterSpacing: "0.14em",
                  color: "var(--n-muted)",
                  textTransform: "uppercase",
                  paddingTop: 16,
                  borderTop: "1px solid var(--n-line)",
                  display: "flex",
                  justifyContent: "space-between",
                }}
              >
                <span>{p.stock}</span>
                <span style={{ color: "var(--n-gold)" }}>Reserve →</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Editorial / Craft block */}
      <section
        style={{
          padding: "120px 56px",
          background: "var(--n-ink)",
          borderTop: "1px solid var(--n-line)",
          borderBottom: "1px solid var(--n-line)",
        }}
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <NoblePlaceholder
            height={640}
            label="CRAFT · ATELIER · KYOTO"
            corner="REEL 04"
            cornerRight="00:42 / 12:08"
          >
            <div
              style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: 84,
                height: 84,
                borderRadius: "50%",
                border: "1px solid var(--n-gold)",
                display: "grid",
                placeItems: "center",
                color: "var(--n-gold)",
                background: "rgba(10,10,10,0.5)",
              }}
            >
              <div
                style={{
                  width: 0,
                  height: 0,
                  borderTop: "10px solid transparent",
                  borderBottom: "10px solid transparent",
                  borderLeft: "14px solid var(--n-gold)",
                  marginLeft: 4,
                }}
              />
            </div>
          </NoblePlaceholder>
          <div>
            <div className="n-eyebrow" style={{ marginBottom: 32 }}>─── 03 / The Craft</div>
            <h2 className="n-display" style={{ fontSize: 64, margin: 0, marginBottom: 40 }}>
              Forty-two hours.<br />
              <em>One pair.</em><br />
              No exceptions.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--n-cream-dim)", maxWidth: 520, margin: 0, marginBottom: 40 }}>
              In a quiet workshop near Higashiyama, four artisans assemble every
              Noble by hand. Drivers are matched to within 0.2 dB. Lacquer is
              applied in seven coats, each cured for a full day.
            </p>

            <div style={{ display: "grid", gap: 1, background: "var(--n-line)" }}>
              {[
                ["I", "Mill", "Billet aluminium cut from a single ingot"],
                ["II", "Match", "Drivers paired by frequency response"],
                ["III", "Lacquer", "Seven coats of urushi, hand-finished"],
                ["IV", "Sign", "Numbered, signed, archived in our ledger"],
              ].map(([n, t, d]) => (
                <div key={n} style={{ display: "grid", gridTemplateColumns: "60px 140px 1fr", gap: 24, padding: "20px 0", background: "var(--n-ink)", alignItems: "baseline" }}>
                  <div className="n-num" style={{ color: "var(--n-gold)", fontSize: 13 }}>{n}</div>
                  <div style={{ fontFamily: "var(--n-serif)", fontSize: 20 }}>{t}</div>
                  <div style={{ fontSize: 13, color: "var(--n-muted)" }}>{d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Press / quotes */}
      <section style={{ padding: "120px 56px" }}>
        <div className="n-eyebrow" style={{ marginBottom: 56, textAlign: "center" }}>
          ─── 04 / In the press
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 56 }}>
          {[
            { q: "A revelation. The first headphone I've heard that sounds like a room rather than a product.", who: "Stereophile", issue: "Issue 482" },
            { q: "Industrial design at the level of a Patek. They will outlast their owners.", who: "Monocle", issue: "Vol. 178" },
            { q: "Noble has done something almost unfashionable — built a thing that gets out of the way.", who: "T Magazine", issue: "April 2026" },
          ].map((t, i) => (
            <div key={i}>
              <div style={{ color: "var(--n-gold)", fontSize: 36, fontFamily: "var(--n-serif)", lineHeight: 1, marginBottom: 16 }}>“</div>
              <p style={{ fontFamily: "var(--n-serif)", fontSize: 22, lineHeight: 1.4, margin: 0, marginBottom: 24, color: "var(--n-cream)" }}>
                {t.q}
              </p>
              <div className="n-mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--n-muted)" }}>
                {t.who} <span style={{ color: "var(--n-faint)" }}>/ {t.issue}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Newsletter */}
      <section
        style={{
          padding: "100px 56px",
          background: "var(--n-ink)",
          borderTop: "1px solid var(--n-line)",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="n-eyebrow" style={{ marginBottom: 24 }}>─── 05 / Atelier letter</div>
            <h2 className="n-display" style={{ fontSize: 56, margin: 0, marginBottom: 20 }}>
              Six dispatches a year.<br />
              <em>No marketing.</em>
            </h2>
            <p style={{ color: "var(--n-cream-dim)", fontSize: 15, lineHeight: 1.6, margin: 0, maxWidth: 460 }}>
              Notes from the workshop, listening sessions, and first access to
              new editions before the public list.
            </p>
          </div>
          <div>
            <div style={{ display: "flex", gap: 16, alignItems: "flex-end" }}>
              <div style={{ flex: 1 }}>
                <div className="n-label" style={{ marginBottom: 12 }}>Email</div>
                <input className="n-input" placeholder="you@elsewhere.com" />
              </div>
              <button className="n-btn n-btn-gold">Subscribe</button>
            </div>
            <div className="n-mono" style={{ marginTop: 20, fontSize: 10, letterSpacing: "0.14em", color: "var(--n-faint)", textTransform: "uppercase" }}>
              No unsubscribe needed — letters self-expire after one year.
            </div>
          </div>
        </div>
      </section>

      <NobleFooter />
    </div>
  );
}

window.LandingPage = LandingPage;