// Pricing page — for accessories / service / commission tiers, since Noble is e-com.
function PricingPage() {
  const tiers = [
    {
      name: "Audition",
      kicker: "I",
      price: "Complimentary",
      period: "for 30 days",
      desc: "Live with a Noble in your home before deciding. We arrange shipment, you keep what fits.",
      features: ["Loaner M-1 in any finish", "Studio-coil cable, both terminations", "Concierge fitting call", "Return shipping prepaid"],
      cta: "Reserve an audition",
      accent: false,
    },
    {
      name: "Owner",
      kicker: "II",
      price: "$1,890",
      period: "one-time · series 04",
      desc: "Take a numbered M-1 home. Includes the full service guarantee and lifetime access to the atelier.",
      features: [
        "Numbered, signed M-1 Obsidian",
        "Twelve-year service guarantee",
        "Annual driver re-matching",
        "Lifetime parts & lacquer touch-ups",
        "Atelier visit on commission",
      ],
      cta: "Reserve series 04",
      accent: true,
    },
    {
      name: "Patron",
      kicker: "III",
      price: "$8,400",
      period: "annual · by invitation",
      desc: "For collectors, studios and listening rooms. First access to every series, plus a private commission per year.",
      features: [
        "First refusal on every new series",
        "One private commission per year",
        "Direct line to the master artisan",
        "Two atelier visits, Kyoto + Copenhagen",
        "Listening dinners, four times a year",
      ],
      cta: "Apply for patronage",
      accent: false,
    },
  ];

  return (
    <div className="n-page">
      <NobleNav active="collection" />

      <section style={{ padding: "100px 56px 64px", textAlign: "center" }}>
        <div className="n-eyebrow" style={{ marginBottom: 28 }}>─── Membership & Service</div>
        <h1 className="n-display" style={{ fontSize: 92, margin: 0, marginBottom: 24 }}>
          Three ways to<br />
          <em>own a Noble.</em>
        </h1>
        <p style={{ maxWidth: 580, margin: "0 auto", fontSize: 16, lineHeight: 1.6, color: "var(--n-cream-dim)" }}>
          We don't believe in upsells. Choose the relationship that fits — every
          tier includes the same instrument, the same guarantee, the same care.
        </p>
      </section>

      {/* Tier cards */}
      <section style={{ padding: "40px 56px 100px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, alignItems: "stretch" }}>
          {tiers.map((t) => (
            <div
              key={t.name}
              style={{
                background: t.accent ? "var(--n-panel-2)" : "var(--n-panel)",
                border: t.accent ? "1px solid var(--n-gold)" : "1px solid var(--n-line)",
                padding: "40px 36px",
                position: "relative",
                display: "flex",
                flexDirection: "column",
              }}
            >
              {t.accent && (
                <div
                  className="n-mono"
                  style={{
                    position: "absolute",
                    top: -1,
                    left: -1,
                    background: "var(--n-gold)",
                    color: "var(--n-ink)",
                    fontSize: 10,
                    letterSpacing: "0.18em",
                    padding: "6px 14px",
                    textTransform: "uppercase",
                    fontWeight: 600,
                  }}
                >
                  Most chosen
                </div>
              )}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 32 }}>
                <div>
                  <div className="n-num" style={{ color: "var(--n-gold)", fontSize: 13, marginBottom: 12 }}>{t.kicker}</div>
                  <div style={{ fontFamily: "var(--n-serif)", fontSize: 40, lineHeight: 1 }}>{t.name}</div>
                </div>
              </div>

              <div style={{ marginBottom: 24 }}>
                <div className="n-num" style={{ fontSize: 34, color: "var(--n-cream)" }}>{t.price}</div>
                <div className="n-mono" style={{ fontSize: 11, color: "var(--n-muted)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 6 }}>
                  {t.period}
                </div>
              </div>

              <p style={{ fontSize: 14, color: "var(--n-cream-dim)", lineHeight: 1.6, margin: 0, marginBottom: 28 }}>
                {t.desc}
              </p>

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

              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14, flex: 1 }}>
                {t.features.map((f) => (
                  <li key={f} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 13, color: "var(--n-cream)" }}>
                    <span style={{ color: "var(--n-gold)", fontFamily: "var(--n-mono)", fontSize: 11, marginTop: 2 }}>◆</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>

              <button
                className={t.accent ? "n-btn n-btn-gold" : "n-btn n-btn-ghost"}
                style={{ marginTop: 36, justifyContent: "center", width: "100%" }}
              >
                {t.cta} →
              </button>
            </div>
          ))}
        </div>
      </section>

      {/* Comparison table */}
      <section style={{ padding: "80px 56px", background: "var(--n-ink)", borderTop: "1px solid var(--n-line)", borderBottom: "1px solid var(--n-line)" }}>
        <div className="n-eyebrow" style={{ marginBottom: 40 }}>─── The fine print, plain</div>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr" }}>
          {[
            ["", "Audition", "Owner", "Patron"],
            ["Numbered instrument", "—", "✓", "✓"],
            ["Service guarantee", "—", "12 yr", "Lifetime"],
            ["Annual driver matching", "—", "✓", "✓"],
            ["Private commission", "—", "—", "1 / year"],
            ["Atelier visits", "—", "On request", "2 / year"],
            ["First refusal on new series", "—", "—", "✓"],
            ["Direct line to artisan", "—", "—", "✓"],
          ].map((row, ri) => (
            <React.Fragment key={ri}>
              {row.map((cell, ci) => (
                <div
                  key={ci}
                  style={{
                    padding: "18px 16px",
                    borderBottom: "1px solid var(--n-line)",
                    fontFamily: ri === 0 ? "var(--n-mono)" : "var(--n-sans)",
                    fontSize: ri === 0 ? 11 : 14,
                    letterSpacing: ri === 0 ? "0.14em" : 0,
                    textTransform: ri === 0 ? "uppercase" : "none",
                    color: ri === 0 ? "var(--n-muted)" : ci === 0 ? "var(--n-cream-dim)" : "var(--n-cream)",
                    textAlign: ci === 0 ? "left" : "center",
                    background: ci === 2 && ri > 0 ? "rgba(201,168,106,0.03)" : "transparent",
                  }}
                >
                  {cell}
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </section>

      {/* FAQ teaser */}
      <section style={{ padding: "100px 56px", textAlign: "center" }}>
        <h3 className="n-display" style={{ fontSize: 48, margin: 0, marginBottom: 16 }}>
          Have a question first?
        </h3>
        <p style={{ color: "var(--n-cream-dim)", fontSize: 15, marginBottom: 32 }}>
          We'd rather you ask. The atelier is staffed Tuesday through Saturday.
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: 16 }}>
          <button className="n-btn n-btn-gold">Read the FAQ →</button>
          <button className="n-btn n-btn-ghost">Email the atelier</button>
        </div>
      </section>

      <NobleFooter />
    </div>
  );
}

window.PricingPage = PricingPage;