function About() {
  return (
    <section id="about" style={{
      padding: "120px 0 100px",
      background: "var(--paper)",
      position: "relative",
    }}>
      <div className="wrap">
        <div className="about-grid" style={{
          display: "grid",
          gridTemplateColumns: "0.85fr 1.15fr",
          gap: 72,
          alignItems: "start",
        }}>
          {/* Portrait card */}
          <div style={{
            position: "sticky", top: 100,
          }}>
            <div style={{
              position: "relative",
              borderRadius: 8,
              overflow: "hidden",
              aspectRatio: "4/5",
              background: "linear-gradient(145deg, #c8d4be 0%, #8ba590 100%)",
            }}>
              {/* Placeholder portrait — abstract illustration */}
              <svg viewBox="0 0 400 500" style={{ width: "100%", height: "100%", display: "block" }}>
                <defs>
                  <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="#e8d4a8" />
                    <stop offset="0.5" stopColor="#d8c896" />
                    <stop offset="1" stopColor="#a8b890" />
                  </linearGradient>
                  <radialGradient id="sun" cx="0.7" cy="0.3" r="0.4">
                    <stop offset="0" stopColor="#fff4d8" stopOpacity="1" />
                    <stop offset="1" stopColor="#fff4d8" stopOpacity="0" />
                  </radialGradient>
                </defs>
                <rect width="400" height="500" fill="url(#sky)" />
                <rect width="400" height="500" fill="url(#sun)" />
                {/* Silhouette */}
                <ellipse cx="200" cy="200" rx="58" ry="65" fill="#2d4a3a" />
                <path d="M120 500 L120 380 Q120 290 200 290 Q280 290 280 380 L280 500 Z" fill="#2d4a3a" />
                {/* Leaves overlay */}
                <g opacity="0.45" fill="#1f3a2e">
                  <path d="M20 480 Q60 460 100 480 Q70 490 50 500 L20 500 Z" />
                  <path d="M340 470 Q380 450 400 460 L400 500 L340 500 Z" />
                  <path d="M340 60 Q380 30 410 60 Q380 80 360 80 Z" />
                </g>
                <g opacity="0.3" stroke="#1f3a2e" strokeWidth="1" fill="none">
                  <path d="M0 380 Q100 360 200 370 T400 360" />
                  <path d="M0 410 Q120 390 230 400 T400 390" />
                </g>
              </svg>
              <div style={{
                position: "absolute", left: 20, bottom: 20, right: 20,
                color: "var(--cream)",
                background: "rgba(31, 58, 46, 0.55)",
                backdropFilter: "blur(8px)",
                padding: "12px 16px", borderRadius: 6,
                fontSize: 12.5, lineHeight: 1.5,
              }}>
                <em className="serif" style={{ fontSize: 15, display: "block", marginBottom: 2 }}>
                  Alex Morgan
                </em>
                MFT Trainee · supervised by Sarah Chen, LMFT 12345
              </div>
            </div>

            {/* Credential chips */}
            <div style={{ marginTop: 24, display: "flex", flexWrap: "wrap", gap: 8 }}>
              {[
                "USF · Practicum '25",
                "8 yrs USAF",
                "MFA, Creative Writing",
                "Axis Mundi · Supervised",
              ].map(c => (
                <span key={c} style={{
                  fontSize: 12, padding: "6px 12px", borderRadius: 999,
                  background: "var(--cream)", color: "var(--forest)",
                  border: "1px solid var(--line)",
                }}>{c}</span>
              ))}
            </div>
          </div>

          {/* Bio body */}
          <div>
            <p className="eyebrow" style={{ marginBottom: 20 }}>About your therapist</p>
            <h2 className="serif" style={{
              fontSize: "clamp(36px, 4.4vw, 56px)",
              lineHeight: 1.05, color: "var(--forest)",
              marginBottom: 36, letterSpacing: "-0.015em",
            }}>
              Hello, I'm Alex.<br/>
              <em style={{ fontStyle: "italic", color: "var(--moss)" }}>
                Therapist, veteran, writer,
              </em><br/>
              <em style={{ fontStyle: "italic", color: "var(--moss)" }}>walker-of-the-woods.</em>
            </h2>

            <div style={{
              fontSize: 17.5, lineHeight: 1.7, color: "var(--ink-2)",
              display: "flex", flexDirection: "column", gap: 20,
              maxWidth: 580,
            }}>
              <p>
                My passion is partnering with individuals and families
                experiencing tension or disconnection in their relationships — to
                themselves, their loved ones, and the world around them.
              </p>
              <p>
                I take a <strong style={{ color: "var(--forest)", fontWeight: 600 }}>relational
                approach</strong>: deep healing happens in connection. Between
                therapist and client. With ourselves. With our families and
                communities. And, when we can find our way back, with the
                natural world.
              </p>
              <p>
                Before becoming a therapist I served eight years in the Air
                Force, earned an MFA in creative writing, and worked in higher
                education. I bring that breadth — and a tender curiosity — into
                every session.
              </p>
            </div>

            {/* Quote */}
            <blockquote style={{
              marginTop: 48,
              padding: "32px 36px",
              background: "linear-gradient(135deg, #ecead6 0%, #d8e3cb 100%)",
              borderRadius: 4,
              position: "relative",
              maxWidth: 580,
            }}>
              <span className="serif" style={{
                position: "absolute", top: 8, left: 18,
                fontSize: 80, lineHeight: 1, color: "var(--terracotta)",
                fontStyle: "italic", opacity: 0.45,
              }}>"</span>
              <p className="serif" style={{
                fontSize: 22, lineHeight: 1.4, color: "var(--forest)",
                fontStyle: "italic", paddingLeft: 16,
              }}>
                Therapy is a space to write your own story — and
                re-write your understanding of yourself and your place in the
                world.
              </p>
            </blockquote>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .about-grid > div:first-child { position: relative !important; top: 0 !important; max-width: 420px; }
        }
      `}</style>
    </section>
  );
}

window.About = About;