function About() {
  return (
    <div className="fade-in">
      {/* Page header */}
      <section style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="container-wide">
          <Eyebrow>Woman Owned · Family Run · Since 1988</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 9vw, 140px)", marginTop: 28, lineHeight: 1 }}>
            <em>About</em><br/>Art Dallas.
          </h1>
        </div>
      </section>

      {/* Origin story */}
      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <div className="origin-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{ aspectRatio: "4/5", background: "linear-gradient(135deg, var(--hairline), var(--bg))", border: "1px solid var(--hairline)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--muted)" }}>[ Founder portrait ]</div>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 28, color: "var(--ink)" }}>Judy Martin</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--gold)", maxWidth: 180, textAlign: "center" }}>{`/* TODO: Get Judy Martin portrait from client */`}</div>
              </div>
            </div>
            <div>
              <Eyebrow>How It Started</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", marginTop: 16, marginBottom: 32 }}>
                <em>A card table.</em><br/>
                A phone. The old<br/>
                Dallas Police<br/>
                property room.
              </h2>
              <p style={{ fontSize: 17, lineHeight: 1.8, marginBottom: 20 }}>
                In 1988 owner, Judy Martin, started Art Dallas with a card table and a phone in a space that had once been the Dallas Police property room. Art Dallas started and remains a family owned business.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.8 }}>
                Judy was joined early on by her husband John, children Michael and Sloan — and a uniquely skilled staff of about a dozen.
              </p>
            </div>
          </div>
          <style>{`@media (max-width: 880px) { .origin-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </div>
      </section>

      {/* Today */}
      <section className="section">
        <div className="container-wide">
          <div style={{ maxWidth: 880 }}>
            <Eyebrow>Today</Eyebrow>
            <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 16, marginBottom: 32 }}>
              From a card table to a <em>55,000 sq. ft.</em> studio.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.8, marginBottom: 24 }}>
              Our mission is to encourage and promote creative artistic expression both locally and throughout the world. Since 1988, Art Dallas has aided designers, owners, and corporate executives in realizing their vision for artwork within their interior space. We are your complete art resource under one roof.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.8 }}>
              We are proud to claim that we produce art of all mediums from start to finish — all in-house. Our 55,000 sq. ft. facility and skilled staff allows us to see projects through their entirety to ensure maximum quality and efficiency.
            </p>
          </div>
          <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, paddingTop: 56, borderTop: "1px solid var(--hairline)" }} className="stats-grid">
            <Stat n="1988" label="Founded" />
            <Stat n="55,000" label="Sq. ft. of in-house production" />
            <Stat n="30+" label="Years producing original artwork" />
            <Stat n="50+" label="Years of consulting experience" />
          </div>
          <style>{`@media (max-width: 880px) { .stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
        </div>
      </section>

      {/* In-house talent */}
      <section className="section" style={{ background: "var(--forest)", color: "#fff" }}>
        <div className="container-wide">
          <Eyebrow style={{ color: "var(--gold)" }}>All Under One Roof</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", color: "#fff", marginTop: 16, marginBottom: 56 }}>
            Twelve disciplines. <em>One studio.</em>
          </h2>
          <div className="disciplines-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
            {DISCIPLINES.map((d, i) => (
              <div key={d} style={{ padding: "28px 28px 28px 0", borderTop: "1px solid rgba(255,255,255,0.15)", display: "flex", alignItems: "baseline", gap: 20 }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)", minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ fontFamily: "var(--font-display)", fontStyle: i % 2 ? "italic" : "normal", fontSize: 28, color: "#fff" }}>{d}</span>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 720px) { .disciplines-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 480px) { .disciplines-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Judy's quote */}
      <section className="section-lg">
        <div className="container" style={{ textAlign: "center" }}>
          <PullQuote attribution="Judy Martin, Founder">
            Art never ceases to amaze us! Its affect on your senses covers the gamut — it can evoke sensory overload to bliss and tranquility.
          </PullQuote>
        </div>
      </section>

      {/* AD callout */}
      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <div className="ad-about" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <Eyebrow>As Seen In</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", marginTop: 16, marginBottom: 24 }}>
                Featured in <em>Architectural Digest.</em>
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-body)", maxWidth: 500 }}>
                Art Dallas's work has been featured in <em style={{ fontFamily: "var(--font-display)", fontSize: 19 }}>Architectural Digest</em>, recognizing the firm's contribution to contemporary hospitality and commercial art programs at scale.
              </p>
            </div>
            <div><img src={IMG.AD_MAGAZINE} alt="AD Magazine" style={{ width: "100%" }} /></div>
          </div>
          <style>{`@media (max-width: 880px) { .ad-about { grid-template-columns: 1fr !important; gap: 40px !important; } }`}</style>
        </div>
      </section>

      <CTASection title={<><em>Start a project</em> with us.</>} body="From a single piece to a multi-property art program, we'd love to hear what you're working on." ctaLabel="Begin Intake" ctaTo="/new-project" />
    </div>
  );
}
window.About = About;