// AboutPage.jsx — full about page focused on the youth-run studio story
function AboutPage({ onCustom, onShop }) {
  return (
    <div className="mys-fade">

      {/* Hero */}
      <section className="mys-section" style={{ paddingTop: 56, paddingBottom: 48 }}>
        <div className="mys-page" style={{ maxWidth: 760 }}>
          <p className="mys-eyebrow">The studio</p>
          <h1 style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600,
            fontSize: 'clamp(44px, 6vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.02em',
            color: 'var(--fg)', margin: '0 0 8px'
          }}>
            Built by hand,<br />at age fourteen.
          </h1>
          <hr className="mys-rule" />
          <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--fg-muted)', maxWidth: 600, margin: '0' }}>
            Made Yours is a one-person custom engraving studio in Ottawa, Ontario —
            started in 2026 by Isaac Dyment, a 14-year-old who believed the best gifts
            aren't bought off a shelf.
          </p>
        </div>
      </section>

      {/* Story */}
      <section style={{ background: 'var(--bg-elevated)', borderTop: '0.5px solid var(--cream-edge)', borderBottom: '0.5px solid var(--cream-edge)', padding: '72px 0' }}>
        <div className="mys-page" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}>
          <div>
            {/* Placeholder for a studio photo */}
            <div style={{
              aspectRatio: '4/5',
              background: 'var(--cream-warm)',
              borderRadius: 'var(--radius-xl)',
              border: '0.5px solid var(--cream-edge)',
              display: 'flex', alignItems: 'flex-end', padding: 20,
              boxShadow: 'var(--shadow-md)'
            }}>
              <span style={{ fontSize: 10, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--stone)' }}>
                Photo — studio bench
              </span>
            </div>
          </div>
          <div>
            <p className="mys-eyebrow" style={{ marginBottom: 20 }}>How it started</p>
            <p style={{ fontSize: 16, lineHeight: 1.8, color: 'var(--fg-muted)', marginBottom: 18 }}>
              My name is Isaac Dyment. I'm 14, I go to Kars on the Rideau Public School, and
              I started Made Yours because I kept running into the same problem — I wanted to give
              people gifts that actually meant something, and I couldn't find anything like that
              in a store. So I saved up, got an xTool F2 Ultra laser engraver, and taught myself
              how to use it.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.8, color: 'var(--fg-muted)', marginBottom: 18 }}>
              When I'm not in the studio I'm on the ice with the Osgoode Richmond Romans or
              out on the course at Carleton Golf &amp; Yacht. I'm used to putting in the work
              to get something right — and I bring that same approach to every order.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.8, color: 'var(--fg-muted)' }}>
              Every piece that leaves here gets my name on the back. That keeps me honest.
            </p>
          </div>
        </div>
      </section>

      {/* Values row */}
      <section className="mys-section">
        <div className="mys-page">
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <p className="mys-eyebrow">What I stand for</p>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 36, margin: 0, letterSpacing: '-0.02em' }}>
              The things that don't change.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {[
              { word: 'Personal', desc: 'Every piece starts with the person receiving it. I don\'t make anything generic.' },
              { word: 'Intentional', desc: 'Nothing here is made by accident. I take my time and I don\'t rush orders.' },
              { word: 'Lasting', desc: 'I only make things I\'d want to keep. Built to be gifted, held onto, passed down.' },
              { word: 'Honest', desc: 'I\'m Isaac. I\'m 14 and I run this myself. No warehouse, no team — just me and the machine.' },
            ].map(v => (
              <div key={v.word} style={{
                background: 'var(--bg-elevated)',
                border: '0.5px solid var(--cream-edge)',
                borderRadius: 'var(--radius-lg)',
                padding: '24px 20px',
                boxShadow: 'var(--shadow-xs)'
              }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 22, color: 'var(--fg)', marginBottom: 8 }}>
                  {v.word}
                </div>
                <hr className="mys-rule" style={{ width: 32, margin: '0 0 12px' }} />
                <p style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--fg-muted)', margin: 0 }}>{v.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The machine / process */}
      <section style={{ background: 'var(--walnut)', color: 'var(--cream)', padding: '80px 0' }}>
        <div className="mys-page" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <p style={{ fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', fontWeight: 500, color: 'rgba(245,239,230,0.5)', margin: '0 0 16px' }}>
              The process
            </p>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 40, margin: '0 0 12px', letterSpacing: '-0.02em', lineHeight: 1.1 }}>
              One machine.<br/>One person.<br/>One piece at a time.
            </h2>
            <hr style={{ width: 56, height: 1.5, background: 'var(--ember)', border: 0, margin: '16px 0' }} />
            <p style={{ fontSize: 16, lineHeight: 1.8, color: 'rgba(245,239,230,0.8)', maxWidth: 460, marginBottom: 18 }}>
              I use an xTool F2 Ultra — a professional-grade laser and UV printer. It lets me
              engrave wood, etch glass, and UV-print designs with the kind of precision that used
              to take a whole shop to pull off.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.8, color: 'rgba(245,239,230,0.8)', maxWidth: 460, marginBottom: 18 }}>
              When your order comes in, I read it myself, design it myself, and run it myself.
              I send you a photo before it ships. Nothing goes out the door that I'm not proud of.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.8, color: 'rgba(245,239,230,0.8)', maxWidth: 460 }}>
              I'm heading into South Carleton High School next year. Made Yours is coming with me.
            </p>
          </div>
          <div>
            <img src="images/xtool.png" alt="xTool F2 Ultra at work" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 'var(--radius-xl)', display: 'block' }} />
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="mys-section" style={{ textAlign: 'center' }}>
        <div className="mys-page" style={{ maxWidth: 560 }}>
          <p className="mys-eyebrow">Ready?</p>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 600, fontSize: 40, margin: '0 0 10px', letterSpacing: '-0.02em' }}>
            Let's make something yours.
          </h2>
          <hr className="mys-rule center" />
          <p style={{ fontSize: 16, lineHeight: 1.75, color: 'var(--fg-muted)', marginBottom: 28 }}>
            Browse the shop for ideas, or come to me with something specific — I'm good at figuring it out.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
            <button className="mys-btn mys-btn-primary mys-btn-lg" onClick={onShop}>See the shop</button>
            <button className="mys-btn mys-btn-secondary mys-btn-lg" onClick={onCustom}>Start a custom <span className="mys-btn-arrow">→</span></button>
          </div>
        </div>
      </section>

    </div>
  );
}

window.AboutPage = AboutPage;