// Them v3 — blue dreamworld. Cards clear of text. More visible clouds.
const THEM_CHARS = [
  // Top strip — below nav, above "on-chain" text (~y:40%)
  { x: 10, y: 18, s: 12, z: 1.0,  src: 'collections/them/them-01.jpg' },
  { x: 32, y: 19, s:  8, z: 0.45, src: 'collections/them/them-02.jpg' },
  { x: 50, y: 20, s:  8, z: 0.45, src: 'collections/them/them-03.jpg' },
  { x: 68, y: 19, s:  8, z: 0.45, src: 'collections/them/them-04.jpg' },
  { x: 84, y: 20, s: 11, z: 0.78, src: 'collections/them/them-05.jpg' },
  // Left free zone — text block is ~x:35–65%, so fill x:12–28%
  { x: 22, y: 38, s: 11, z: 0.75, src: 'collections/them/them-06.jpg' },
  { x: 16, y: 60, s:  9, z: 0.50, src: 'collections/them/them-07.jpg' },
  { x: 22, y: 87, s: 10, z: 0.60, src: 'collections/them/them-08.jpg' },
  // Right free zone — fill x:72–86%
  { x: 78, y: 38, s: 11, z: 0.90, src: 'collections/them/them-09.jpg' },
  { x: 82, y: 60, s:  9, z: 0.62, src: 'collections/them/them-10.jpg' },
  { x: 76, y: 87, s: 11, z: 0.92, src: 'collections/them/them-11.jpg' },
  // Extra distant floaters, still outside the center copy
  { x:  8, y: 45, s:  7, z: 0.38, src: 'collections/them/them-12.jpg' },
  { x: 30, y: 70, s:  7, z: 0.42, src: 'collections/them/them-13.jpg' },
  { x: 70, y: 70, s:  7, z: 0.42, src: 'collections/them/them-14.jpg' },
  { x: 92, y: 46, s:  7, z: 0.38, src: 'collections/them/them-15.jpg' },
  { x: 50, y: 92, s:  7, z: 0.36, src: 'collections/them/them-16.jpg' },
];

const CLOUDS = [
  { x:  2, y:-18, w: 68, h: 34, blur: 36, opacity: .88, z: 0.3, dur: 18, delay: 0 },
  { x: 46, y:-20, w: 62, h: 30, blur: 40, opacity: .82, z: 0.5, dur: 22, delay: 3 },
  { x:-12, y: 36, w: 56, h: 28, blur: 44, opacity: .76, z: 0.2, dur: 25, delay: 7 },
  { x: 52, y: 48, w: 58, h: 26, blur: 36, opacity: .78, z: 0.4, dur: 20, delay: 2 },
  { x: 18, y: 66, w: 52, h: 22, blur: 50, opacity: .62, z: 0.15,dur: 28, delay:10 },
  { x: 70, y: 10, w: 46, h: 24, blur: 32, opacity: .74, z: 0.25,dur: 16, delay: 5 },
  // removed: { x: 30, y: 20 } — was overlapping center text block
];

// Static soft blobs at user-requested positions (don't drift over text)
const STATIC_BLOBS = [
  { x:  5, y: 40, w: 28, h: 22, blur: 60, opacity: .55 }, // left side
  { x: 36, y: 63, w: 24, h: 20, blur: 55, opacity: .50 }, // center-bottom
  { x: 72, y: 62, w: 34, h: 28, blur: 65, opacity: .52 }, // right-bottom
];

function ThemV3() {
  const ref = React.useRef(null);
  const [mouse, setMouse] = React.useState({ x: 0.5, y: 0.5 });

  React.useEffect(() => {
    const onMove = (e) => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      setMouse({
        x: (e.clientX - r.left) / r.width,
        y: (e.clientY - r.top) / r.height,
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <section
      id="them"
      ref={ref}
      data-screen-label="02 Them"
      style={{
        position: 'relative',
        minHeight: '100vh',
        overflow: 'hidden',
        marginTop: '-8px',
        padding: '320px 0 0',
        background: 'linear-gradient(180deg, #bdd0f2 0%, #a8c0ee 30%, #c4d4f5 55%, #dce8f8 72%, #eaf0fb 84%, var(--paper) 100%)',
      }}
    >
      {/* Top color bridge — sits above all orbs, guarantees seamless Hero→Them join */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: '28vh',
        background: 'linear-gradient(to bottom, #bdd0f2 0%, transparent 100%)',
        pointerEvents: 'none', zIndex: 4,
      }}></div>

      {/* Large background orbs (parallax) */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {[
          { w:55, h:55, top:'-18%', left:'38%', c:'rgba(120,160,245,.85)', tx:-55, ty:-30 },
          { w:45, h:45, bottom:'-12%', left:'-5%', c:'rgba(145,180,250,.72)', tx:65, ty:25 },
          { w:38, h:38, top:'18%', right:'-6%', c:'rgba(180,200,255,.65)', tx:-40, ty:40 },
        ].map((o, i) => (
          <div key={i} style={{
            position: 'absolute',
            width: `${o.w}vw`, height: `${o.h}vw`,
            top: o.top, bottom: o.bottom, left: o.left, right: o.right,
            borderRadius: '50%',
            background: `radial-gradient(circle, ${o.c}, transparent 65%)`,
            filter: 'blur(80px)',
            transform: `translate(${(mouse.x - 0.5) * o.tx}px, ${(mouse.y - 0.5) * o.ty}px)`,
            transition: 'transform 1.8s var(--e-out)',
          }}></div>
        ))}
      </div>

      {/* Static blobs at user-chosen positions */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {STATIC_BLOBS.map((b, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${b.x}%`, top: `${b.y}%`,
            width: `${b.w}vw`, height: `${b.h}vw`,
            borderRadius: '55% 45% 50% 60% / 50% 55% 45% 50%',
            background: `radial-gradient(ellipse 65% 55% at 40% 42%, rgba(252,255,255,${b.opacity}), rgba(210,228,255,${b.opacity * .6}) 55%, transparent 78%)`,
            filter: `blur(${b.blur}px)`,
          }}></div>
        ))}
      </div>

      {/* Animated clouds */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {CLOUDS.map((c, i) => {
          const px = (mouse.x - 0.5) * c.z * 90;
          const py = (mouse.y - 0.5) * c.z * 55;
          return (
            <div key={i} style={{
              position: 'absolute',
              left: `${c.x}%`, top: `${c.y}%`,
              width: `${c.w}vw`, height: `${c.h}vw`,
              animation: `cloudDrift ${c.dur}s ease-in-out ${c.delay}s infinite`,
            }}>
              <div style={{
                width: '100%', height: '100%',
                borderRadius: '55% 45% 50% 60% / 50% 55% 45% 50%',
                background: `radial-gradient(ellipse 65% 55% at 38% 40%, rgba(252,255,255,${c.opacity}), rgba(210,228,255,${c.opacity * .65}) 55%, transparent 80%)`,
                filter: `blur(${c.blur}px)`,
                transform: `translate(${px}px, ${py}px)`,
                transition: 'transform 2.2s var(--e-out)',
              }}></div>
            </div>
          );
        })}
      </div>

      {/* Floating character cards — positioned clear of center text */}
      <div className="them-cards-wrap" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        {THEM_CHARS.map((c, i) => {
          const px = (mouse.x - 0.5) * c.z * 60;
          const py = (mouse.y - 0.5) * c.z * 40;
          const rot = (i % 3 - 1) * 2;
          const floatDur = 5.5 + i * 0.6;
          const floatDelay = i * 0.45;
          return (
            <div key={i} style={{
              position: 'absolute',
              left: `${c.x}%`, top: `${c.y}%`,
              zIndex: Math.round(c.z * 10),
              animation: `cardFloat ${floatDur}s ease-in-out ${floatDelay}s infinite`,
            }}>
              <div
                className="them-card"
                data-hover
                style={{
                  width: `${c.s}vw`, height: `${c.s}vw`,
                  transform: `translate(-50%, -50%) translate(${px}px, ${py}px) rotate(${rot}deg)`,
                  transition: 'transform 1.4s var(--e-out)',
                  pointerEvents: 'all',
                  opacity: 0.9,
                }}>
                <img src={c.src} alt={`them ${i}`} style={{ objectFit: 'cover', width: '100%', height: '100%' }} />
              </div>
            </div>
          );
        })}
      </div>

      {/* Japanese decorative phrases */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 5 }}>
        <div style={{
          position: 'absolute', left: 28, bottom: '18%',
          writingMode: 'vertical-rl', textOrientation: 'mixed',
          opacity: .28, userSelect: 'none',
        }}>
          <div style={{ fontFamily: 'var(--jp)', fontSize: 13, letterSpacing: '.28em', color: '#0b1a42', marginBottom: 6 }}>微睡み</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '.18em', textTransform: 'uppercase', color: '#0b1a42', opacity: .7 }}>madoromi</div>
        </div>
        <div style={{
          position: 'absolute', right: 28, top: '22%',
          writingMode: 'vertical-rl', textOrientation: 'mixed',
          opacity: .28, userSelect: 'none', direction: 'rtl',
        }}>
          <div style={{ fontFamily: 'var(--jp)', fontSize: 13, letterSpacing: '.28em', color: '#0b1a42', marginBottom: 6 }}>儚い</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 7, letterSpacing: '.18em', textTransform: 'uppercase', color: '#0b1a42', opacity: .7 }}>hakanai</div>
        </div>
      </div>

      {/* Center content — text above cards via z-index */}
      <div className="reveal" style={{
        position: 'relative', zIndex: 30,
        maxWidth: 860, margin: '0 auto', textAlign: 'center',
        padding: '60px 40px 160px',
      }}>
        <div className="mono-meta" style={{ color: '#2240a0', marginBottom: 18 }}>
          on-chain · may 2026 · 3,333 pieces
        </div>
        <h2 style={{
          fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
          fontSize: 'clamp(80px, 13vw, 210px)',
          lineHeight: .85, letterSpacing: '-.05em',
          color: '#0b1a42', marginBottom: 24,
          textShadow: '0 4px 40px rgba(80,120,230,.55), 0 0 80px rgba(140,170,255,.3)',
          position: 'relative',
        }}>
          <span style={{ position: 'absolute', inset: 0, filter: 'blur(30px)', opacity: .38, color: '#2a50c0' }}>them</span>
          <span style={{ position: 'relative', display: 'inline-block', filter: 'blur(3px)', opacity: 0.82 }}>them</span>
        </h2>

        <p style={{
          fontFamily: 'var(--display)', fontWeight: 300, fontSize: 16, lineHeight: 1.55,
          color: '#0b1a42', maxWidth: 500, margin: '0 auto 12px',
          textShadow: '0 2px 16px rgba(255,255,255,.65)',
        }}>
          small enough to fit in your pocket,<br/>
          loud enough to haunt your feed.
        </p>

        <p className="mono-meta" style={{ color: '#334488', marginBottom: 36, fontSize: 10 }}>
          3,333 unique characters · ethereum · mint opens may 2026
        </p>

        {/* CTA buttons */}
        <div style={{
          display: 'inline-flex', flexWrap: 'wrap', gap: 10, padding: 8,
          borderRadius: 999,
          background: 'rgba(255,255,255,.48)',
          backdropFilter: 'blur(24px) saturate(150%)',
          WebkitBackdropFilter: 'blur(24px) saturate(150%)',
          border: '1px solid rgba(255,255,255,.68)',
          boxShadow: '0 16px 50px rgba(40,80,200,.15)',
          justifyContent: 'center',
        }}>
          <a href="https://them.petravoice.art/" target="_blank" data-hover style={{
            padding: '14px 26px', borderRadius: 999,
            background: '#0b1a42', color: '#c0d0ff',
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.22em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 10, fontWeight: 500,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#7aa0ff' }}></span>
            them website
          </a>
          <a href="https://x.com/thembypetra" target="_blank" data-hover style={{
            padding: '14px 22px', borderRadius: 999,
            color: '#0b1a42', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.22em',
            textTransform: 'uppercase', fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            twitter / x ↗
          </a>
          <a href="https://discord.gg/bQwCNPZBYF" target="_blank" data-hover style={{
            padding: '14px 22px', borderRadius: 999,
            color: '#0b1a42', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.22em',
            textTransform: 'uppercase', fontWeight: 500,
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            discord ↗
          </a>
        </div>
      </div>

      {/* Bottom fade into Works/paper */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        height: '38vh', pointerEvents: 'none',
        background: 'linear-gradient(to bottom, transparent 0%, rgba(239,233,221,.35) 45%, rgba(239,233,221,.78) 70%, var(--paper) 100%)',
      }}></div>
    </section>
  );
}

window.ThemV3 = ThemV3;