// AboutStrip.jsx — founder bio on walnut
function AboutStrip({ onCustom }) {
  return (
    <section style={{ background: 'var(--walnut)', color: 'var(--cream)', padding: '80px 0' }}>
      <div className="mys-page" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{
            aspectRatio: '4/5',
            background: '#5A3E22',
            borderRadius: 'var(--radius-xl)',
            display: 'flex', alignItems: 'flex-end', padding: 18,
            color: 'var(--cream)', fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase',
            opacity: .85
          }}>
            Photo · the studio bench
          </div>
        </div>
        <div>
          <p style={{ fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 500, color: 'rgba(245,239,230,0.55)', margin: '0 0 16px' }}>
            The studio
          </p>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 44, margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            A one-person studio<br/>in Ottawa.
          </h2>
          <hr style={{ width: 56, height: 1.5, background: 'var(--ember)', border: 0, margin: '16px 0' }} />
          <p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(245,239,230,0.85)', maxWidth: 460, marginBottom: 18 }}>
            I started Made Yours at 14, because I believed that the best gifts
            aren't bought — they're made for someone. Every order is personally
            designed, made, and packaged here at my bench.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(245,239,230,0.85)', maxWidth: 460, marginBottom: 28 }}>
            This isn't a warehouse. It's a small wooden room, an xTool F2 Ultra,
            and a lot of ideas. I care about every piece that leaves it.
          </p>
          <button
            className="mys-btn"
            style={{ background: 'var(--cream)', color: 'var(--walnut)' }}
            onClick={onCustom}
          >
            Start a custom <span className="mys-btn-arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

window.AboutStrip = AboutStrip;