// About v3 — updated bio, exhibitions, new portrait
function AboutV3() {
  return (
    <section id="about" data-screen-label="05 About" style={{
      position: 'relative', padding: '140px 40px 80px',
      background: 'transparent', overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{
          position: 'absolute', top: '20%', left: '-10%',
          width: '40vw', height: '40vw', borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(217,156,176,.38), transparent 65%)',
          filter: 'blur(80px)',
        }}></div>
        <div style={{
          position: 'absolute', bottom: '0%', right: '-5%',
          width: '35vw', height: '35vw', borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(77,99,216,.25), transparent 65%)',
          filter: 'blur(80px)',
        }}></div>
      </div>

      <div className="reveal" style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
        <div className="about-grid-v3" style={{
          display: 'grid', gridTemplateColumns: '320px 1fr', gap: 80, alignItems: 'start',
        }}>
          <div className="reveal delay-1" style={{
            position: 'relative', aspectRatio: '4/5',
            borderRadius: 4, overflow: 'hidden',
            boxShadow: '0 30px 80px rgba(40,30,15,.22)',
          }}>
            <img src="about/photo_petra.jpg" alt="petra" style={{
              width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top',
            }} />
          </div>

          <div className="reveal delay-2">
            <div className="mono-meta" style={{ color: 'var(--vermilion)', marginBottom: 16 }}>about</div>
            <h2 style={{
              fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
              fontSize: 'clamp(44px, 5.5vw, 80px)', lineHeight: .95, letterSpacing: '-.04em',
              marginBottom: 28,
            }}>
              <span data-parallax="0.08" style={{ position: 'relative', display: 'inline-block' }}>
                petra{' '}
                <span style={{ display: 'inline-block', filter: 'blur(3px)', opacity: 0.58, color: 'var(--ash)' }}>voice</span>
              </span>
            </h2>

            <p style={{
              fontFamily: 'var(--display)', fontWeight: 300, fontSize: 15, lineHeight: 1.6,
              color: 'var(--ink-2)', maxWidth: 560, marginBottom: 16,
            }}>
              I have been creating atmospheric digital worlds since 2022. My work is best known for its signature soft blur and dreamy portraits that tend to go viral and find their way onto thousands of Pinterest boards.
            </p>

            <p style={{
              fontFamily: 'var(--display)', fontWeight: 300, fontSize: 15, lineHeight: 1.6,
              color: 'var(--ash)', maxWidth: 560, marginBottom: 8,
            }}>
              Since I started, I have designed album covers for some amazing musicians, collaborated with many artists, launched renowned NFT collections, and shared my work in exhibitions all around the world.
            </p>

            {/* Exhibitions */}
            <div style={{ marginBottom: 28, marginTop: 20 }}>
              <div className="mono-meta" style={{ opacity: .4, marginBottom: 10, fontSize: 9 }}>exhibitions</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['Miami Art Basel', 'Crypto Art Seoul', 'Unit London', 'Carousel du Louvre'].map(ex => (
                  <span key={ex} style={{
                    fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '.12em',
                    padding: '5px 12px', borderRadius: 999,
                    border: '1px solid rgba(26,24,18,.18)',
                    background: 'rgba(255,255,255,.45)',
                    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                    color: 'var(--ink)', opacity: .75,
                  }}>{ex}</span>
                ))}
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '.12em',
                  padding: '5px 12px', borderRadius: 999,
                  color: 'var(--ash)', opacity: .5,
                }}>& more</span>
              </div>
            </div>

            {/* Collaborations */}
            <div style={{ marginBottom: 32 }}>
              <div className="mono-meta" style={{ opacity: .4, marginBottom: 10, fontSize: 9 }}>collaborated with</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {[
                  { name: 'Zerion', url: 'https://zerion.io' },
                  { name: 'Base', url: 'https://base.org' },
                  { name: 'Onchain Summer', url: 'https://onchainsummer.xyz' },
                  { name: 'Mantle', url: 'https://mantle.xyz' },
                ].map(c => (
                  <a key={c.name} href={c.url} target="_blank" data-hover style={{
                    fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '.14em', textTransform: 'uppercase',
                    padding: '6px 14px', borderRadius: 999,
                    border: '1px solid rgba(26,24,18,.2)',
                    background: 'rgba(255,255,255,.5)',
                    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                    color: 'var(--ink)', opacity: .8,
                  }}>{c.name} ↗</a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Footer v3 — editorial, 4-col, no separate background
function FooterV3() {
  const colThem = [
    { name: 'them website', url: 'https://them.petravoice.art/' },
    { name: 'discord', url: 'https://discord.gg/bQwCNPZBYF' },
    { name: '@thembypetra', url: 'https://x.com/thembypetra' },
  ];
  const colPetra = [
    { name: 'twitter / x', url: 'https://x.com/petravoice' },
    { name: 'instagram', url: 'https://www.instagram.com/petra_voice' },
    { name: 'petravoice.art@gmail.com', url: 'mailto:petravoice.art@gmail.com' },
  ];
  const colShop = [
    { name: 'prints · darkroom', url: 'https://petravoice.darkroom.com/' },
    { name: 'objkt', url: 'https://objkt.com/users/tz1XXXX' },
    { name: 'opensea', url: 'https://opensea.io/petravoice' },
    { name: 'superrare', url: 'https://superrare.com/petravoice' },
    { name: 'rarible', url: 'https://og.rarible.com/petravoice/created' },
  ];

  const LinkCol = ({ header, links }) => (
    <div>
      <div className="mono-meta" style={{ fontSize: 8, opacity: .38, marginBottom: 16, letterSpacing: '.22em' }}>{header}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {links.map(l => (
          <a key={l.name} href={l.url} target={l.url.startsWith('mailto') ? undefined : '_blank'} data-hover style={{
            fontFamily: 'var(--display)', fontWeight: 300, fontSize: 14,
            color: 'var(--ink)', opacity: .55, transition: 'opacity .3s', lineHeight: 1.2,
          }}>{l.name}</a>
        ))}
      </div>
    </div>
  );

  return (
    <footer id="footer" style={{
      position: 'relative',
      background: 'transparent',
      color: 'var(--ink)',
      borderTop: '1px solid rgba(26,24,18,.1)',
      padding: '64px 40px 48px',
    }}>
      <div className="footer-grid-v3" style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, alignItems: 'start',
      }}>
        {/* Brand */}
        <div>
          <div style={{
            fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
            fontSize: 'clamp(52px, 7vw, 100px)', lineHeight: .88, letterSpacing: '-.04em',
            marginBottom: 28,
          }}>
            <span style={{ position: 'relative', display: 'inline-block' }}>
              <span style={{ position: 'absolute', inset: '-2px -10px', filter: 'blur(20px)', opacity: .28 }}>petra voice</span>
              <span style={{ position: 'absolute', inset: 0, filter: 'blur(8px)', opacity: .24 }}>petra voice</span>
              <span style={{ position: 'relative', display: 'inline-block', filter: 'blur(3px)', opacity: 0.78 }}>petra voice</span>
            </span>
          </div>
          <div className="mono-meta" style={{ fontSize: 9, opacity: .3 }}>© mmxxvi · all dreams reserved</div>
        </div>

        <LinkCol header="THEM" links={colThem} />
        <LinkCol header="PETRA" links={colPetra} />
        <LinkCol header="MINT / SHOP" links={colShop} />
      </div>
    </footer>
  );
}

window.AboutV3 = AboutV3;
window.FooterV3 = FooterV3;