// Design system showcase
function SystemPage() {
  return (
    <div className="page" data-screen-label="10 UI System">
      <section style={{ paddingTop: "calc(var(--pad) + 120px)", paddingBottom: 60 }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 28 }}><span className="dot"></span>UI System</div>
          <h1 style={{ fontSize: "clamp(56px, 8vw, 130px)", lineHeight: .96 }}>
            The visual language <span className="italic" style={{ color: "var(--bronze-2)" }}>that holds it all together.</span>
          </h1>
          <p style={{ marginTop: 36, color: "var(--bone-2)", maxWidth: 720, fontSize: 17, lineHeight: 1.7 }}>
            A short reference for typography, color, spacing, motion, and components. Restrained on purpose — the work in the photographs should always be louder than the chrome around it.
          </p>
        </div>
      </section>

      {/* Typography */}
      <section className="section tight">
        <div className="container">
          <h2 className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}><span className="dot"></span>Typography</h2>
          <div style={{ borderTop: "1px solid var(--line)", paddingTop: 32 }}>
            <div className="grid grid-12">
              <div style={{ gridColumn: "1 / span 3" }}>
                <div className="eyebrow">Display Serif</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 28, marginTop: 12 }}>Cormorant Garamond</div>
                <div style={{ color: "var(--bone-3)", fontSize: 12, marginTop: 6 }}>Light · Regular · Italic</div>
              </div>
              <div style={{ gridColumn: "4 / span 9", fontFamily: "var(--serif)" }}>
                <div style={{ fontSize: 96, lineHeight: .95 }}>Built on a foundation</div>
                <div style={{ fontSize: 72, fontStyle: "italic", color: "var(--bronze-2)", lineHeight: 1, marginTop: 4 }}>of trust.</div>
              </div>
            </div>
          </div>
          <div style={{ borderTop: "1px solid var(--line)", paddingTop: 32, marginTop: 64 }}>
            <div className="grid grid-12">
              <div style={{ gridColumn: "1 / span 3" }}>
                <div className="eyebrow">Body Sans</div>
                <div style={{ fontFamily: "var(--sans)", fontSize: 22, marginTop: 12 }}>Geist</div>
                <div style={{ color: "var(--bone-3)", fontSize: 12, marginTop: 6 }}>300—700</div>
              </div>
              <div style={{ gridColumn: "4 / span 9" }}>
                <div style={{ fontSize: 22, lineHeight: 1.5, color: "var(--bone)" }}>
                  Body copy is restrained, neutral, and easy to skim. We use Geist at 15–17px for paragraph text, 13–14 for secondary, and we lean on the serif for any moment of emphasis.
                </div>
              </div>
            </div>
          </div>

          {/* Scale */}
          <div style={{ marginTop: 64, borderTop: "1px solid var(--line)", paddingTop: 32 }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Type Scale</div>
            {[
              { n: "Display XL", s: 140, f: "var(--serif)" },
              { n: "Display L", s: 96, f: "var(--serif)" },
              { n: "Display M", s: 64, f: "var(--serif)" },
              { n: "Display S", s: 44, f: "var(--serif)" },
              { n: "Body Lg", s: 22, f: "var(--sans)" },
              { n: "Body",   s: 16, f: "var(--sans)" },
              { n: "Caption",s: 12, f: "var(--sans)" },
            ].map(t => (
              <div key={t.n} style={{ display: "grid", gridTemplateColumns: "180px 100px 1fr", padding: "16px 0", borderTop: "1px solid var(--line)", alignItems: "baseline" }}>
                <span className="eyebrow">{t.n}</span>
                <span style={{ fontFamily: "var(--mono)", color: "var(--bone-3)", fontSize: 12 }}>{t.s}px</span>
                <span style={{ fontFamily: t.f, fontSize: t.s, lineHeight: 1, color: "var(--bone)" }}>GenTech Construction</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Color */}
      <section className="section tight">
        <div className="container">
          <h2 className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}><span className="dot"></span>Palette</h2>
          <div className="grid" style={{ gridTemplateColumns: "repeat(6, 1fr)", gap: 16 }}>
            {[
              { n: "Charcoal Green", v: "#13140F", t: "--bg",    text: "var(--bone)" },
              { n: "Surface",        v: "#1B1D17", t: "--bg-2",  text: "var(--bone)" },
              { n: "Moss",           v: "#3A4034", t: "--moss",  text: "var(--bone)" },
              { n: "Sage",           v: "#7A8569", t: "--sage",  text: "var(--bg)" },
              { n: "Bronze",         v: "#B0825A", t: "--bronze",text: "var(--bg)" },
              { n: "Bone",           v: "#EDE8DC", t: "--bone",  text: "var(--bg)" },
            ].map(c => (
              <div key={c.n}>
                <div style={{ background: c.v, aspectRatio: "4 / 5", padding: 14, display: "flex", flexDirection: "column", justifyContent: "space-between", color: c.text, border: "1px solid var(--line)" }}>
                  <div className="eyebrow" style={{ color: c.text, opacity: .8 }}>{c.t}</div>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1 }}>{c.n}</div>
                    <div style={{ fontFamily: "var(--mono)", fontSize: 11, marginTop: 6, opacity: .85 }}>{c.v}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Spacing */}
      <section className="section tight">
        <div className="container">
          <h2 className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}><span className="dot"></span>Spacing</h2>
          <div style={{ display: "flex", gap: 24, alignItems: "flex-end", flexWrap: "wrap" }}>
            {[8, 16, 24, 32, 48, 64, 96, 140].map(n => (
              <div key={n} style={{ textAlign: "center" }}>
                <div style={{ width: n, height: n, background: "var(--bronze)", marginBottom: 12 }} />
                <div className="eyebrow">{n}px</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Buttons */}
      <section className="section tight">
        <div className="container">
          <h2 className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}><span className="dot"></span>Buttons & Links</h2>
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "center" }}>
            <button className="btn">Primary <span className="arr">→</span></button>
            <button className="btn bronze">Bronze <span className="arr">→</span></button>
            <button className="btn ghost">Ghost</button>
            <button className="btn sm">Small →</button>
            <a className="lnk">Inline Link →</a>
            <span className="uline" style={{ color: "var(--bone)" }}>Underlined link</span>
          </div>
        </div>
      </section>

      {/* Cards */}
      <section className="section tight">
        <div className="container">
          <h2 className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}><span className="dot"></span>Cards</h2>
          <div className="grid grid-3">
            <ProjectTile project={PROJECTS[0]} index={0} aspect="ar-3-4" onClick={() => {}} />
            <ProjectTile project={PROJECTS[1]} index={1} aspect="ar-3-4" onClick={() => {}} />
            <ProjectTile project={PROJECTS[2]} index={2} aspect="ar-3-4" onClick={() => {}} />
          </div>
        </div>
      </section>

      {/* Motion */}
      <section className="section tight">
        <div className="container">
          <h2 className="eyebrow" style={{ marginBottom: 32, color: "var(--bone-2)" }}><span className="dot"></span>Motion</h2>
          <div className="grid grid-3">
            {[
              { t: "Fade & Rise", b: "Sections fade in and rise 24px on scroll. 900ms, cubic-bezier(.2,.6,.2,1). Used for first-paint of editorial blocks." },
              { t: "Image Zoom",  b: "Tiles zoom 4% over 1.4s on hover. Slow enough to feel filmic; fast enough to feel responsive." },
              { t: "Underline Draw", b: "Inline links draw an underline left-to-right on hover, 500ms. Bronze is used sparingly as the emphasis color." },
            ].map(m => (
              <div key={m.t}>
                <h3 style={{ fontSize: 28, marginBottom: 14 }}>{m.t}</h3>
                <p style={{ color: "var(--bone-2)", fontSize: 14, lineHeight: 1.7 }}>{m.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SystemPage });