// About — "Who's behind this." Personal and direct.
const About = () => {
  const mob = useIsMobile();
  return (
    <section
      id="about"
      data-screen-label="06 About"
      style={{
        background: '#2C365A', color: '#FFFFFF',
        padding: mob ? '64px 20px 60px' : '140px 32px 120px',
      }}
    >
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: mob ? '1fr' : '0.9fr 1.1fr',
        gap: mob ? 40 : 80,
        alignItems: 'start',
      }}>
        {/* Left: mark + meta */}
        <div className="reveal-left" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: '#C4BCB0',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
            About
          </div>

          {/* Monogram card */}
          <div style={{
            aspectRatio: '1 / 1', maxWidth: mob ? 220 : 340,
            background: '#1C2540',
            border: '1px solid rgba(238,232,223,0.1)',
            borderRadius: 14, padding: 32,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            position: 'relative', overflow: 'hidden',
          }}>
            {/* Faint orbit lines inside */}
            <svg viewBox="-100 -100 200 200" style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              opacity: 0.3, pointerEvents: 'none',
            }} aria-hidden>
              <ellipse cx="0" cy="0" rx="90" ry="28" fill="none" stroke="rgba(238,232,223,0.3)" strokeWidth="0.5" transform="rotate(-8)" />
              <ellipse cx="0" cy="0" rx="72" ry="50" fill="none" stroke="rgba(238,232,223,0.3)" strokeWidth="0.5" transform="rotate(22)" />
              <ellipse cx="0" cy="0" rx="55" ry="55" fill="none" stroke="rgba(238,232,223,0.3)" strokeWidth="0.5" />
            </svg>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <svg width={mob ? 148 : 220} height={mob ? 65 : 96} viewBox="100 285 620 270" fill="none" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <mask id="arCutoutAbout">
                    <rect width="800" height="800" fill="white"/>
                    <line x1="356" y1="424" x2="576" y2="324" stroke="black" strokeWidth="22" strokeLinecap="round"/>
                    <line x1="356" y1="424" x2="624" y2="512" stroke="black" strokeWidth="22" strokeLinecap="round"/>
                    <circle cx="356" cy="424" r="44" fill="black"/>
                    <circle cx="576" cy="324" r="30" fill="black"/>
                    <circle cx="624" cy="512" r="30" fill="black"/>
                  </mask>
                </defs>
                <g mask="url(#arCutoutAbout)">
                  <g transform="translate(200.19,490) scale(0.26,-0.26)">
                    <path d="M201 0H-10L279 670H548L838 0H622L571 124H253ZM363 387 324 293H502L463 387L419 500H406Z" fill="#edeae2"/>
                  </g>
                  <g transform="translate(415.47,490) scale(0.26,-0.26)">
                    <path d="M218 0H30V670H421Q553 670 622.0 617.0Q691 564 691 465Q691 384 647.5 338.0Q604 292 510 280V270Q558 258 581.5 235.0Q605 212 626 168L709 0H492L412 164Q394 202 371.5 215.0Q349 228 295 228H218ZM218 501V368H419Q462 368 478.0 381.0Q494 394 494 435Q494 474 477.5 487.5Q461 501 419 501Z" fill="#C4BCB0"/>
                  </g>
                </g>
              </svg>
            </div>
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 6,
              position: 'relative', zIndex: 1,
            }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#FFFFFF', letterSpacing: '-0.01em' }}>
                Andri Rivera
              </div>
              <div style={{ fontSize: 12, color: '#C4BCB0', letterSpacing: '0.04em' }}>
                20 · New York
              </div>
            </div>
          </div>
        </div>

        {/* Right: copy */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
          <h2 className="reveal" style={{
            margin: 0, fontFamily: 'Clash Display, General Sans, system-ui',
            fontSize: 'clamp(36px, 4.4vw, 60px)',
            fontWeight: 700, lineHeight: 1.04,
            letterSpacing: '-0.03em', color: '#FFFFFF',
          }}>
            Who's behind this.
          </h2>

          <div className="reveal" style={{
            display: 'flex', flexDirection: 'column', gap: 24,
            fontSize: 'clamp(17px, 1.4vw, 20px)',
            lineHeight: 1.7,
            color: 'rgba(255,255,255,0.82)',
            transitionDelay: '0.1s',
          }}>
            <p style={{ margin: 0 }}>
              I'm Andri Rivera, 20, based in New York. I built my first back office
              system for a real electrical contractor. Watched it change how the
              business operated.
            </p>
            <p style={{ margin: 0 }}>
              I do that for other businesses now.
            </p>
            <p style={{ margin: 0,
              paddingTop: 20,
              borderTop: '1px solid rgba(238,232,223,0.12)',
              fontFamily: 'Clash Display, General Sans, system-ui',
              fontWeight: 700, fontSize: 'clamp(22px, 2.4vw, 30px)',
              lineHeight: 1.2, letterSpacing: '-0.02em',
              color: '#EEE8DF',
            }}>
              I'm not a consultant who hands you a document. I build the system
              and I run it.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

window.About = About;