// About — personal, builder-y, not a wall of text
function About() {
  return (
    <section id="about" className="section">
      <div className="container about-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)',
        gap: 64,
        alignItems: 'start',
      }}>
        <Reveal>
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="label" style={{ marginBottom: 24 }}>// about</div>
            {/* portrait placeholder */}
            <div style={{
              aspectRatio: '4 / 5',
              background: 'linear-gradient(160deg, #14130F 0%, #2A2823 100%)',
              borderRadius: 12,
              position: 'relative',
              overflow: 'hidden',
              border: '1px solid var(--line-2)',
            }}>
              <div className="serif italic-em" style={{
                position: 'absolute',
                bottom: 24, left: 24, right: 24,
                color: 'var(--bg)',
                fontSize: 56,
                lineHeight: 0.95,
                letterSpacing: '-0.03em',
              }}>
                hi, hadi.
              </div>
              <div className="mono" style={{
                position: 'absolute', top: 16, left: 16,
                color: '#8a8576', fontSize: 11,
              }}>// portrait.jpg → coming soon</div>
              {/* dot grid */}
              <div aria-hidden="true" style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
                backgroundSize: '20px 20px',
              }}/>
            </div>
            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between' }}>
              <span className="label">based — anywhere with wifi</span>
              <span className="label">est — 2026</span>
            </div>
          </div>
        </Reveal>

        <div>
          <Reveal delay={1}>
            <span className="eyebrow">about hadi</span>
          </Reveal>
          <Reveal delay={2}>
            <div className="about-card" style={{
              marginTop: 24, marginBottom: 40,
              background: '#14130F',
              borderRadius: 16,
              padding: '48px 40px 44px',
              position: 'relative',
              overflow: 'hidden',
              border: '1px solid #2C2A23',
              boxShadow: '0 30px 60px -20px rgba(0,0,0,0.4)',
            }}>
              {/* animated dot grid */}
              <div aria-hidden="true" style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)',
                backgroundSize: '24px 24px',
              }}/>
              {/* lone planet orb — one human */}
              <div aria-hidden="true" style={{
                position: 'absolute',
                top: -30, right: -20,
                width: 140, height: 140,
                borderRadius: '50%',
                background: 'radial-gradient(circle at 40% 40%, #FF5B22 0%, #FF5B2240 50%, transparent 70%)',
                filter: 'blur(2px)',
                animation: 'orbPulse 4s ease-in-out infinite',
              }}/>
              <div aria-hidden="true" style={{
                position: 'absolute',
                top: -10, right: 0,
                width: 140, height: 140,
                borderRadius: '50%',
                boxShadow: '0 0 60px 20px #FF5B2218',
                animation: 'orbPulse 4s ease-in-out infinite',
              }}/>
              <style>{`
                @keyframes orbPulse {
                  0%, 100% { opacity: .7; transform: scale(1); }
                  50% { opacity: 1; transform: scale(1.08); }
                }
              `}</style>
              {/* small accent line */}
              <div style={{
                width: 32, height: 3, borderRadius: 2,
                background: 'var(--accent)',
                marginBottom: 20,
                position: 'relative', zIndex: 2,
              }}/>
              <h2 className="display display--md" style={{
                lineHeight: 1.05, paddingBottom: 0, margin: 0,
                color: '#F1ECE3',
                position: 'relative', zIndex: 2,
              }}>
                one human.<br/>
                <span className="italic-em" style={{ color: 'var(--accent)' }}>no team. no fluff.</span>
              </h2>
              <div className="mono" style={{
                marginTop: 16, fontSize: 12, color: '#6B6557',
                letterSpacing: '.04em',
                position: 'relative', zIndex: 2,
              }}>
                // no agency. no overhead. just results.
              </div>
            </div>
          </Reveal>

          <Reveal delay={3}>
            <div style={{ marginTop: 32, display: 'grid', gap: 20, fontSize: 18, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 560 }}>
              <p style={{ margin: 0, textWrap: 'pretty' }}>
                hi — i'm hadi. i build websites and quiet little systems for solopreneurs.
              </p>
              <p style={{ margin: 0, textWrap: 'pretty' }}>
                i spent six years inside other people's businesses watching the same thing happen: brilliant founders, drowning in busywork. fixing the same five things over and over. losing leads to slow follow-up. running a calendar instead of a company.
              </p>
              <p style={{ margin: 0, textWrap: 'pretty' }}>
                so i started doing it for them. one site. one system. fixed price. two weeks. it works, or you don't pay. that's the whole pitch.
              </p>
            </div>
          </Reveal>

          <Reveal delay={4}>
            <div className="about-detail-grid" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
              <Detail k="who i help" v="solopreneurs · coaches · creators · service shops" />
              <Detail k="how i work" v="solo. fixed price. two weeks. or it's free." />
              <Detail k="what i won't do" v="6-month projects · committees · monthly retainers you can't escape" />
              <Detail k="my promise" v="if you're not thrilled when we're done, you don't pay. simple as that." />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Detail({ k, v }) {
  return (
    <div>
      <div className="label" style={{ marginBottom: 8 }}>{k}</div>
      <div className="mono" style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5 }}>{v}</div>
    </div>
  );
}

Object.assign(window, { About });