// Commission v3 — two blocks: artworks + music
const VINYL_RECORDS = [
  {
    src: 'commission/lily_cover.png',
    artist: 'Lilyisthatyou', title: 'Painful Euphoria',
    platform: 'spotify', url: 'https://open.spotify.com/album/68tzOxaFmkiOJRn8hs886M',
  },
  {
    src: 'commission/honey_small.jpg',
    artist: 'Sophie Gray', title: 'freaky4x',
    platform: 'spotify', url: 'https://open.spotify.com/album/7uhr24Aa0BtbAIIFXeFtuo',
  },
  {
    src: 'commission/coi_noparental.jpg',
    artist: 'Coi Leray', title: 'Heart Don\'t Lie',
    platform: 'spotify', url: 'https://open.spotify.com/artist/3rod4EzyFn7ng6xw4CjvuP',
  },
  {
    src: 'commission/farhad.jpg',
    artist: 'Aude', title: 'Memories & Skits',
    platform: 'soundcloud', url: 'https://soundcloud.com/aaaude/sets/memories-and-skits',
  },
];

function VinylPlayer() {
  const [idx, setIdx] = React.useState(0);
  const total = VINYL_RECORDS.length;
  const rec = VINYL_RECORDS[idx];
  const prev = () => setIdx(i => (i - 1 + total) % total);
  const next = () => setIdx(i => (i + 1) % total);
  const platformColor = rec.platform === 'spotify' ? '#1DB954' : '#ff5500';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28, padding: '32px 0 20px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <button data-hover onClick={prev} style={{
          width: 34, height: 34, borderRadius: '50%',
          border: '1px solid rgba(26,24,18,.15)', background: 'rgba(255,255,255,.45)',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--mono)', fontSize: 14, color: 'var(--ash)', flexShrink: 0,
        }}>‹</button>

        <div style={{ position: 'relative', width: 220, height: 220, flexShrink: 0 }}>
          <div style={{
            position: 'absolute', bottom: -14, left: '10%', right: '10%', height: 20,
            background: 'radial-gradient(ellipse, rgba(26,24,18,.22), transparent 70%)',
            filter: 'blur(8px)',
          }}></div>
          <div style={{
            width: 220, height: 220, borderRadius: '50%',
            background: 'radial-gradient(circle, #1a1410 40%, #13110d 100%)',
            animation: 'vinylSpin 7s linear infinite',
            position: 'relative', overflow: 'visible',
            boxShadow: '0 8px 40px rgba(26,24,18,.42), inset 0 0 0 1px rgba(255,255,255,.06)',
          }}>
            {[0.98, 0.92, 0.86, 0.80, 0.74, 0.68].map((r, i) => (
              <div key={i} style={{
                position: 'absolute', borderRadius: '50%',
                border: '0.5px solid rgba(255,255,255,.04)',
                inset: `${(1 - r) * 50}%`,
              }}></div>
            ))}
            <div style={{
              position: 'absolute', inset: '18%', borderRadius: '50%', overflow: 'hidden',
              boxShadow: '0 0 0 1.5px rgba(255,255,255,.12), 0 0 20px rgba(0,0,0,.5)',
            }}>
              <img src={rec.src} alt={rec.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{
              position: 'absolute', borderRadius: '50%', width: 10, height: 10,
              top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
              background: '#0a0a0a', border: '0.5px solid rgba(255,255,255,.18)', zIndex: 2,
            }}></div>
          </div>
          <div style={{
            position: 'absolute', top: -8, right: -18,
            transformOrigin: '8px 8px', transform: 'rotate(28deg)', pointerEvents: 'none',
          }}>
            <div style={{
              width: 2, height: 70, borderRadius: 1,
              background: 'linear-gradient(to bottom, rgba(180,170,155,.9), rgba(120,115,100,.5))',
              transform: 'rotate(-10deg)', position: 'relative',
            }}>
              <div style={{
                position: 'absolute', bottom: -5, left: '50%', transform: 'translateX(-50%)',
                width: 5, height: 5, borderRadius: '50%', background: 'rgba(201,70,43,.9)',
              }}></div>
            </div>
          </div>
        </div>

        <button data-hover onClick={next} style={{
          width: 34, height: 34, borderRadius: '50%',
          border: '1px solid rgba(26,24,18,.15)', background: 'rgba(255,255,255,.45)',
          backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'var(--mono)', fontSize: 14, color: 'var(--ash)', flexShrink: 0,
        }}>›</button>
      </div>

      <div style={{ textAlign: 'center', maxWidth: 280 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: platformColor, boxShadow: `0 0 8px ${platformColor}88` }}></span>
          <span className="mono-meta" style={{ fontSize: 9, opacity: .5 }}>{rec.platform}</span>
        </div>
        <div style={{ fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic', fontSize: 20, lineHeight: 1.1, letterSpacing: '-.02em', marginBottom: 3 }}>{rec.title}</div>
        <div className="mono-meta" style={{ fontSize: 9, opacity: .45, marginBottom: 14 }}>{rec.artist}</div>
        <a href={rec.url} target="_blank" data-hover style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '8px 18px', borderRadius: 999,
          background: 'rgba(26,24,18,.07)', border: '1px solid rgba(26,24,18,.12)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--ink)',
        }}>listen ↗</a>
      </div>

      <div style={{ display: 'flex', gap: 5 }}>
        {VINYL_RECORDS.map((_, i) => (
          <button key={i} data-hover onClick={() => setIdx(i)} style={{
            width: i === idx ? 16 : 5, height: 4, borderRadius: 2,
            background: i === idx ? 'var(--vermilion)' : 'rgba(26,24,18,.18)',
            transition: 'all .4s var(--e-out)',
          }}></button>
        ))}
      </div>

      <style>{`@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

function CommissionV3() {
  const [form, setForm] = React.useState({ task: '', contact: '' });
  const [sent, setSent] = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.task.trim() || !form.contact.trim()) return;
    const body = `Commission request\n\nContact / social:\n${form.contact}\n\nProject brief:\n${form.task}`;
    window.location.href = `mailto:petravoice.art@gmail.com?subject=Commission Request&body=${encodeURIComponent(body)}`;
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section id="commission" data-screen-label="06 Commission" style={{
      position: 'relative', background: 'transparent', overflow: 'hidden',
    }}>
      {/* atmospheric blobs */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        {/* dark charcoal blob — upper left, large, asymmetric */}
        <div style={{
          position: 'absolute', top: '18%', left: '-12%',
          width: '56vw', height: '62vw',
          borderRadius: '62% 38% 44% 56% / 48% 54% 46% 52%',
          background: 'radial-gradient(ellipse 55% 60% at 44% 42%, rgba(14,10,7,.50), rgba(54,45,38,.20) 58%, transparent 78%)',
          filter: 'blur(115px)',
        }}></div>
        {/* warm peach/terracotta blob — lower right, softer */}
        <div style={{
          position: 'absolute', top: '44%', left: '16%',
          width: '46vw', height: '50vw',
          borderRadius: '45% 55% 58% 42% / 56% 44% 60% 40%',
          background: 'radial-gradient(ellipse 62% 58% at 52% 56%, rgba(195,148,118,.40), rgba(180,130,100,.16) 55%, transparent 80%)',
          filter: 'blur(110px)',
        }}></div>
        {/* small dark accent — right mid */}
        <div style={{
          position: 'absolute', top: '10%', right: '-4%',
          width: '26vw', height: '32vw',
          borderRadius: '50% 50% 42% 58% / 52% 48% 56% 44%',
          background: 'radial-gradient(ellipse 60% 55% at 40% 45%, rgba(10,7,4,.38), transparent 70%)',
          filter: 'blur(75px)',
        }}></div>
      </div>

      {/* ── BLOCK 1: Photo + description (no form) ── */}
      <div className="commission-pad-1" style={{ padding: '105px 40px 80px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="reveal" style={{ marginBottom: 52 }}>
            <div className="mono-meta" style={{ color: 'var(--vermilion)', marginBottom: 14 }}>commission</div>
            <h2 style={{
              fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
              fontSize: 'clamp(44px, 6vw, 96px)', lineHeight: .9, letterSpacing: '-.04em',
            }}>
              <span style={{ position: 'relative', display: 'inline-block' }}>
                <span style={{ display: 'inline-block', filter: 'blur(3px)', opacity: 0.58, color: 'var(--ash)' }}>your</span>
                {' '}artwork
              </span>
            </h2>
          </div>

          <div className="commission-grid-1" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'start' }}>
            {/* Left — artwork image with reference */}
            <div className="reveal delay-1" style={{ position: 'relative', maxWidth: 500 }}>
              <div style={{ borderRadius: 8, overflow: 'hidden', boxShadow: '0 24px 64px rgba(40,30,15,.18)', aspectRatio: '1/1' }}>
                <img src="commission/jasmine2.png" alt="commission artwork" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{
                position: 'absolute', bottom: 16, right: 16,
                width: 88, borderRadius: 6, overflow: 'hidden',
                boxShadow: '0 4px 20px rgba(0,0,0,.28)',
                border: '2px solid rgba(255,255,255,.7)',
              }}>
                <img src="commission/jasmine_photo.jpg" alt="reference photo" style={{ width: '100%', display: 'block', objectFit: 'cover' }} />
                <div style={{
                  position: 'absolute', top: 5, left: 5,
                  fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '.15em', textTransform: 'uppercase',
                  background: 'rgba(26,24,18,.55)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
                  color: 'rgba(239,233,221,.85)', padding: '2px 5px', borderRadius: 2,
                }}>ref</div>
              </div>
            </div>

            {/* Right — description only */}
            <div className="reveal delay-2" style={{ paddingTop: 8 }}>
              <p style={{
                fontFamily: 'var(--display)', fontWeight: 300, fontSize: 19, lineHeight: 1.65,
                color: 'var(--ink-2)', marginBottom: 20, maxWidth: 440,
              }}>
                original digital art tailored to your vision — portrait, gift, or anything else you can imagine. almost any request.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
                {['custom artworks & portraits', 'prints for brands and clothes'].map(item => (
                  <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--vermilion)', flexShrink: 0 }}></span>
                    <span className="mono-meta" style={{ opacity: .7 }}>{item}</span>
                  </div>
                ))}
              </div>
              <div className="mono-meta" style={{ opacity: .4, fontSize: 9 }}>starting at $250+</div>
            </div>
          </div>
        </div>
      </div>

      {/* ── BLOCK 2: Vinyl right + album text left + inquiry form ── */}
      <div className="commission-pad-2" style={{ padding: '120px 40px 100px' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto' }}>
          <div className="commission-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>

            {/* Left — album text + inquiry form */}
            <div className="reveal delay-1">
              <div className="mono-meta" style={{ color: 'var(--vermilion)', marginBottom: 12 }}>album covers</div>
              <h3 style={{
                fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
                fontSize: 'clamp(28px, 3.5vw, 52px)', lineHeight: .95, letterSpacing: '-.03em',
                marginBottom: 16,
              }}>
                <span style={{ position: 'relative', display: 'inline-block' }}>
                  <span style={{ position: 'absolute', inset: 0, filter: 'blur(8px)', opacity: .25 }}>music</span>
                  <span style={{ position: 'relative' }}>music</span>
                </span>
              </h3>
              <p style={{
                fontFamily: 'var(--display)', fontWeight: 300, fontSize: 16, lineHeight: 1.6,
                color: 'var(--ash)', marginBottom: 28,
              }}>
                album & single covers, ep artwork, artist visuals. works released on spotify, soundcloud, and beyond.
              </p>

              <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div className="mono-meta" style={{ fontSize: 9, letterSpacing: '.2em', textTransform: 'uppercase', opacity: .55, marginBottom: 2 }}>send inquiry</div>
                <textarea name="task" value={form.task} onChange={e => setForm(f => ({ ...f, task: e.target.value }))}
                  placeholder="describe your project — style, mood, references, deadline"
                  required rows={4}
                  style={{
                    width: '100%', padding: '13px 15px', borderRadius: 6,
                    border: '1px solid rgba(26,24,18,.18)', background: 'rgba(255,255,255,.5)',
                    fontFamily: 'var(--display)', fontWeight: 300, fontSize: 14, lineHeight: 1.5,
                    color: 'var(--ink)', resize: 'vertical', outline: 'none',
                  }} />
                <input type="text" name="contact" value={form.contact} onChange={e => setForm(f => ({ ...f, contact: e.target.value }))}
                  placeholder="your email or twitter / instagram"
                  required
                  style={{
                    width: '100%', padding: '13px 15px', borderRadius: 6,
                    border: '1px solid rgba(26,24,18,.18)', background: 'rgba(255,255,255,.5)',
                    fontFamily: 'var(--display)', fontWeight: 300, fontSize: 14,
                    color: 'var(--ink)', outline: 'none',
                  }} />
                <button type="submit" data-hover style={{
                  alignSelf: 'flex-start', padding: '13px 26px', borderRadius: 999,
                  background: sent ? 'rgba(26,24,18,.7)' : 'var(--ink)', color: 'var(--paper)',
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
                  fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 10, transition: 'background .3s',
                }}>
                  <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--vermilion)' }}></span>
                  {sent ? 'opening mail client...' : 'send request ↗'}
                </button>
                <div className="mono-meta" style={{ opacity: .35, fontSize: 9 }}>opens your mail app · petravoice.art@gmail.com</div>
              </form>
            </div>

            {/* Right — vinyl player */}
            <div className="reveal delay-2" style={{ position: 'relative', minHeight: 390 }}>
              <div style={{
                position: 'absolute', inset: '-12% -10% -8% -10%',
                borderRadius: '48% 52% 55% 45% / 48% 44% 56% 52%',
                background: 'radial-gradient(ellipse 58% 54% at 48% 46%, rgba(215,188,118,.42), rgba(150,126,104,.30) 42%, rgba(92,88,82,.22) 62%, transparent 78%)',
                filter: 'blur(70px)', opacity: .95, pointerEvents: 'none',
              }}></div>
              <div style={{ position: 'relative' }}>
                <VinylPlayer />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CommissionV3 = CommissionV3;