// About v3 — updated bio, exhibitions, new portrait
const COLLABS_V3 = [
  { 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' },
];

const EXHIBITIONS_V3 = [
  { city: 'Tokyo', title: 'Neo Shibuya Gallery', detail: 'Superchief Artist x AI // 000002', date: 'November 2022' },
  { city: 'Miami', title: 'Miami Basel · Monolith', detail: 'Superchief Artist x AI // 000002', date: 'November 2022' },
  { city: 'Los Angeles', title: 'Superchief Gallery', detail: 'MAIF x SuperchiefNFT · DEEP FAKE', date: 'March 2023' },
  { city: 'Paris', title: 'Carrousel du Louvre', detail: 'by NFTUK · during Paris Blockchain Week', date: 'March 2023' },
  { city: 'Rome', title: 'SPQAI Exhibition', detail: 'Piazza di Sant’Apollonia · NFTRome · MAIF x SuperchiefNFT', date: 'May 2023' },
  { city: 'New York City', title: 'Oculus NYC', detail: '185 Greenwich St · SPQAI · MAIF x SuperchiefNFT', date: 'May 2023' },
  { city: 'Rome', title: 'Real Thoughts Exhibition', detail: 'Mecenate Fine Art Gallery · curated by DVK the artist', date: 'May 2023' },
  { city: 'Seoul', title: 'What Dreams May Come', detail: 'Uncommon Gallery · Superchief Gallery NFT', date: 'September 2023' },
  { city: 'Seoul', title: 'Crypto Art Seoul', detail: 'Artist x AI 000004: A Show of Hands · Superchief Gallery NFT', date: 'September 2023' },
  { city: 'London', title: 'Unit London · E-motions', detail: 'exhibition curated by Claire Silver', date: 'September 2023' },
  { city: 'Seoul · New York', title: 'Crypto Art Seoul Season 2 Starter Pack', detail: 'Superchief Gallery NFT · Superchief.io Launch', date: 'September 2023' },
  { city: 'Milan', title: 'Web3 x Fashion', detail: 'MakersPlace · Via A. Calabiana 6 · Milan Fashion Week', date: 'September 2023' },
];
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: '14%', right: '-5%',
          width: '38vw', height: '38vw', borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(116,164,255,.24), rgba(178,214,255,.12) 48%, transparent 72%)',
          filter: 'blur(95px)',
        }}></div>
      </div>

      <div className="reveal" style={{ maxWidth: 1180, margin: '0 auto', position: 'relative' }}>
        <div className="about-grid-v3" style={{
          display: 'grid', gridTemplateColumns: '360px 1fr', gap: 64, alignItems: 'start',
        }}>
          <div className="reveal delay-1" style={{ position: 'relative' }}>
            <div className="about-portrait-v3" 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 style={{ marginTop: 24 }}>
              <div className="mono-meta" style={{ opacity: .42, marginBottom: 12, fontSize: 9 }}>collaborated with</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {COLLABS_V3.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 12px', borderRadius: 999,
                    border: '1px solid rgba(26,24,18,.16)',
                    background: 'rgba(255,255,255,.36)',
                    backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
                    color: 'var(--ink)', opacity: .72,
                  }}>{c.name} ↗</a>
                ))}
              </div>
            </div>
          </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: 20, marginTop: 22, maxWidth: 760 }}>
              <div className="mono-meta" style={{ opacity: .42, marginBottom: 14, fontSize: 9 }}>selected exhibitions</div>
              <div className="exhibitions-list-v3" style={{
                display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
                columnGap: 18, rowGap: 0,
              }}>
                {EXHIBITIONS_V3.map((ex, i) => (
                  <div key={`${ex.city}-${ex.title}-${i}`} style={{
                    padding: '8px 0 10px', borderTop: '1px solid rgba(26,24,18,.10)' ,
                  }}>
                    <div style={{
                      display: 'flex', flexDirection: 'column', gap: 2,
                      marginBottom: 5,
                    }}>
                      <div style={{
                        fontFamily: 'var(--display)', fontWeight: 300, fontSize: 15, lineHeight: 1.15,
                        color: 'var(--ink)', letterSpacing: '-.01em',
                      }}>{ex.city}</div>
                      <div className="mono-meta" style={{ fontSize: 7.5, opacity: .36, whiteSpace: 'nowrap' }}>{ex.date}</div>
                    </div>
                    <div className="mono-meta" style={{
                      fontSize: 8, letterSpacing: '.11em', lineHeight: 1.35, color: 'var(--ink)', opacity: .62,
                    }}>{ex.title}</div>
                    <div style={{
                      fontFamily: 'var(--display)', fontWeight: 300, fontSize: 11.5, lineHeight: 1.34,
                      color: 'var(--ash)', marginTop: 3,
                    }}>{ex.detail}</div>
                  </div>
                ))}
              </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/Z8Hne65KDr' },
    { name: 'them x / twitter', 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;