// FAQ
function FAQPage() {
  const groups = [
    {
      title: "Ordering & delivery",
      kicker: "I",
      items: [
        {
          q: "How long until my Noble arrives?",
          a: "Each Noble is built to order. Current production for Series 04 is approximately fourteen working days from confirmation. We'll send a film of your specific unit on the day it's signed off. Standard delivery within the EU, UK, US, JP and AU is included; we use insured white-glove courier and require a signature.",
          open: true,
        },
        { q: "Can I have my Noble engraved?", a: "Yes — up to eighteen characters, hand-engraved inside the left earcup. We can also engrave a date or short numeral. Engraving adds two days to the build and is non-returnable." },
        { q: "Do you ship outside listed regions?", a: "On request, anywhere we can guarantee customs handling. Please email the atelier with your address — we will reply within one working day." },
      ],
    },
    {
      title: "The instrument",
      kicker: "II",
      items: [
        { q: "Are Nobles broken in from the factory?", a: "Lightly. Drivers receive 24 hours of pink-noise conditioning before final matching. Most owners report a settling-in after roughly 120 hours of listening." },
        { q: "Will my finish patina over time?", a: "The urushi lacquer deepens in colour over years, particularly in the Sumi finish. We consider this a feature, not a flaw. Should you prefer to refresh it, we re-lacquer at no charge once every five years." },
        { q: "What's included in the box?", a: "The instrument, two cables (3m XLR4 + 1.5m unbalanced 6.35mm), a leather travel case made in Florence, a care kit, and a signed certificate from the assembling artisan." },
      ],
    },
    {
      title: "Service & care",
      kicker: "III",
      items: [
        { q: "What does the twelve-year guarantee cover?", a: "Everything except deliberate damage. Drivers, headband, cables, earpads, lacquer — all replaceable, all included. We pay return shipping. The clock starts on the day of first delivery." },
        { q: "Where do I send a Noble for service?", a: "Anywhere in the world, we'll send a courier to collect. Service typically takes ten to fourteen days. You'll have updates from Yuki throughout." },
      ],
    },
    {
      title: "Membership",
      kicker: "IV",
      items: [
        { q: "How do I become a Patron?", a: "Patronage is by invitation, typically extended after five years of ownership. We do not publish a waitlist — if we think you'd enjoy it, we'll write." },
        { q: "Can I gift a Noble?", a: "Yes. Gift orders include a hand-written card from the workshop and a private unboxing call for the recipient if they'd like one." },
      ],
    },
  ];

  return (
    <div className="n-page" style={{ minHeight: 1400 }}>
      <NobleNav active="support" />

      {/* Hero */}
      <section style={{ padding: "100px 56px 56px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end" }}>
        <div>
          <div className="n-eyebrow" style={{ marginBottom: 24 }}>─── Support · Frequently asked</div>
          <h1 className="n-display" style={{ fontSize: 96, margin: 0 }}>
            Ask us<br /><em>anything.</em>
          </h1>
        </div>
        <div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--n-cream-dim)", maxWidth: 460, margin: 0, marginBottom: 28 }}>
            We've gathered the questions we hear most. If yours isn't here, the
            atelier is staffed Tuesday through Saturday and replies within a
            working day.
          </p>
          <div style={{ display: "flex", gap: 12 }}>
            <button className="n-btn n-btn-gold">Email the atelier</button>
            <button className="n-btn n-btn-ghost">Book a call</button>
          </div>
        </div>
      </section>

      {/* Search */}
      <section style={{ padding: "0 56px 56px" }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 16,
            padding: "18px 24px",
            border: "1px solid var(--n-line-strong)",
            background: "var(--n-panel)",
          }}
        >
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ color: "var(--n-gold)" }}>
            <circle cx="7" cy="7" r="5" stroke="currentColor" />
            <path d="M11 11L15 15" stroke="currentColor" strokeLinecap="round" />
          </svg>
          <input
            className="n-input"
            style={{ border: "none", padding: 0, fontSize: 15 }}
            placeholder="Search the atelier — try ‘engraving’, ‘service’, ‘cable’…"
          />
          <span className="n-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--n-faint)", textTransform: "uppercase" }}>
            42 articles
          </span>
        </div>
      </section>

      {/* FAQ groups */}
      <section style={{ padding: "40px 56px 80px", display: "grid", gridTemplateColumns: "260px 1fr", gap: 80 }}>
        {/* Sticky toc */}
        <aside>
          <div style={{ position: "sticky", top: 24 }}>
            <div className="n-label" style={{ marginBottom: 20 }}>On this page</div>
            <nav style={{ display: "grid", gap: 12 }}>
              {groups.map((g, i) => (
                <a
                  key={g.title}
                  style={{
                    display: "flex",
                    alignItems: "baseline",
                    gap: 14,
                    fontSize: 13,
                    color: i === 0 ? "var(--n-cream)" : "var(--n-cream-dim)",
                    textDecoration: "none",
                    borderLeft: i === 0 ? "1px solid var(--n-gold)" : "1px solid var(--n-line)",
                    paddingLeft: 14,
                  }}
                >
                  <span className="n-num" style={{ fontSize: 11, color: "var(--n-gold)" }}>{g.kicker}</span>
                  {g.title}
                </a>
              ))}
            </nav>
            <div className="n-divider" style={{ marginTop: 32, marginBottom: 24 }} />
            <div className="n-mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--n-muted)", lineHeight: 1.8 }}>
              Last updated<br />
              <span style={{ color: "var(--n-cream)" }}>10 May 2026</span>
            </div>
          </div>
        </aside>

        <div style={{ display: "grid", gap: 80 }}>
          {groups.map((g) => (
            <div key={g.title}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 20, marginBottom: 32 }}>
                <span className="n-num" style={{ fontSize: 14, color: "var(--n-gold)" }}>{g.kicker}</span>
                <h2 className="n-display" style={{ fontSize: 36, margin: 0 }}>{g.title}</h2>
              </div>

              <div className="n-panel" style={{ padding: 0 }}>
                {g.items.map((it, i, arr) => (
                  <div
                    key={it.q}
                    style={{
                      padding: "28px 32px",
                      borderBottom: i < arr.length - 1 ? "1px solid var(--n-line)" : "none",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "flex-start",
                        cursor: "pointer",
                        gap: 32,
                      }}
                    >
                      <h3
                        style={{
                          fontFamily: "var(--n-serif)",
                          fontSize: 22,
                          margin: 0,
                          color: it.open ? "var(--n-cream)" : "var(--n-cream-dim)",
                          flex: 1,
                        }}
                      >
                        {it.q}
                      </h3>
                      <span
                        style={{
                          width: 28,
                          height: 28,
                          border: "1px solid var(--n-line-strong)",
                          borderRadius: "50%",
                          display: "grid",
                          placeItems: "center",
                          color: it.open ? "var(--n-gold)" : "var(--n-muted)",
                          fontFamily: "var(--n-mono)",
                          fontSize: 14,
                          flex: "0 0 auto",
                        }}
                      >
                        {it.open ? "−" : "+"}
                      </span>
                    </div>
                    {it.open && (
                      <p style={{ fontSize: 14, lineHeight: 1.7, color: "var(--n-cream-dim)", margin: 0, marginTop: 20, maxWidth: 720 }}>
                        {it.a}
                      </p>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Bottom contact */}
      <section style={{ padding: "100px 56px", background: "var(--n-ink)", borderTop: "1px solid var(--n-line)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="n-eyebrow" style={{ marginBottom: 24 }}>─── Still wondering?</div>
            <h2 className="n-display" style={{ fontSize: 56, margin: 0, marginBottom: 20 }}>
              The atelier is a<br /><em>person, not a form.</em>
            </h2>
            <p style={{ color: "var(--n-cream-dim)", fontSize: 15, lineHeight: 1.6, maxWidth: 480, margin: 0 }}>
              Yuki, Hiroshi and the team reply personally — usually inside a
              working day, often within hours.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            {[
              { l: "Email", v: "atelier@noble.audio", k: "Tue–Sat · within 1 day" },
              { l: "Phone (UK)", v: "+44 20 7946 0142", k: "10:00 – 18:00 BST" },
              { l: "Phone (JP)", v: "+81 75 555 0042", k: "10:00 – 18:00 JST" },
              { l: "Studio visit", v: "Book Kyoto / CPH", k: "By appointment" },
            ].map((c) => (
              <div key={c.l} className="n-panel" style={{ padding: 24 }}>
                <div className="n-label" style={{ marginBottom: 12 }}>{c.l}</div>
                <div style={{ fontFamily: "var(--n-serif)", fontSize: 20, marginBottom: 8 }}>{c.v}</div>
                <div className="n-mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--n-muted)", textTransform: "uppercase" }}>
                  {c.k}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <NobleFooter />
    </div>
  );
}

window.FAQPage = FAQPage;