<!-- ============================================================
  WHOISANDREX — Landing Block
  Paste this WHOLE file into a WordPress "Custom HTML" block
  (or Elementor > HTML widget). It's self-contained: no plugins,
  no theme dependency.

  ⚠️ READ THIS FIRST — "live listens/views" reality check:
  Spotify, Apple Music, etc. don't give static pages a public
  play-count API. What's wired up for real, live numbers:
    • YouTube videos = real YouTube player + real YouTube view count
  Everything else (Spotify plays, IG followers, etc.) uses the
  STATS object below, which you update by hand. If you later want
  those numbers pulled automatically, that needs a small backend
  script — ask me and I'll build it.

  TO UPDATE CONTENT: scroll to "EDIT ZONE" below and edit the
  DATA arrays. Nothing else needs to change.
============================================================ -->

<!-- ============================================================
  🎨 THEME CONTROLS — change colors & fonts here, nothing else
============================================================ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Your uploaded WordPress fonts go here.
  To add another one later: copy this whole @font-face block, change the
  font-family name and the url(), then use that new name in --ax-font-heading
  or --ax-font-body below.
-->
<style>
  @font-face{
    font-family: 'AliensAmongUs';
    src: url('https://www.whoisandrex.com/wp-content/uploads/fonts/Aliens-Among-Us.woff2') format('woff2');
    font-display: swap;
  }
</style>

<style>
  :root{
    /* --- COLORS: swap any hex code below --- */
    --ax-bg:        #0a0a0a;   /* page background */
    --ax-fg:        #f5f5f5;   /* body text */
    --ax-accent:    #00f0ff;   /* buttons, highlights, links on hover */
    --ax-muted:     #9a9a9a;   /* secondary/gray text */
    --ax-card:      #141414;   /* card/panel background */
    --ax-border:    #222222;   /* dividing lines */

    /* --- BACKGROUND IMAGE: how see-through the sections are over it ---
       0 = fully see-through (image totally visible), 1 = fully solid (image hidden) */
    --ax-bg-opacity: 0.78;
    --ax-bg-rgb:     10,10,10;   /* must match --ax-bg above, written as R,G,B numbers */

    /* --- PRE-ORDER BUTTON: how see-through just this button is ---
       0 = fully see-through (image visible through it), 1 = fully solid */
    --ax-preorder-btn-opacity:0.50;
    --ax-accent-rgb: 0,240,255;  /* must match --ax-accent above, written as R,G,B numbers */

    /* --- FONTS: use a Google Font name (update the <link> above to match)
       OR use a name from an @font-face block above, like 'AliensAmongUs' --- */
    --ax-font-heading: 'AliensAmongUs', Impact, sans-serif;
    --ax-font-body:    'Poppins', Arial, sans-serif;
  }
</style>
<!-- ============================================================ -->

<style>
  #ax-root{--bg:var(--ax-bg);--fg:var(--ax-fg);--accent:var(--ax-accent);--muted:var(--ax-muted);--card:var(--ax-card);--bdr:var(--ax-border);
    font-family:var(--ax-font-body);background:var(--bg);color:var(--fg);position:relative;
    padding:0;margin:0;width:100%;box-sizing:border-box;}
  #ax-root *{box-sizing:border-box;}
  #ax-root a{color:inherit;text-decoration:none;}
  #ax-root h1,#ax-root h2{font-family:var(--ax-font-heading);font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin:0 0 6px;}
  /* Fixed image layer — stays put behind everything while the page scrolls over it */
  #ax-bg-fixed{position:fixed;inset:0;z-index:0;
    background-image:url('https://www.whoisandrex.com/wp-content/uploads/2024/05/top-.png');
    background-size:cover;background-position:center;background-repeat:no-repeat;}
  /* FIX: also exclude the pre-order modal from this catch-all, so its own
     position:fixed / z-index:9999 rule below doesn't get overridden by the
     higher-specificity #ax-root > *:not(...) selector. */
  #ax-root > *:not(#ax-bg-fixed):not(#ax-preorder-modal){position:relative;z-index:1;}
  #ax-root section{padding:48px 20px;max-width:1100px;margin:0 auto;
    background:rgba(var(--ax-bg-rgb), var(--ax-bg-opacity));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  #ax-root .eyebrow{color:var(--accent);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
  #ax-hero{position:relative;text-align:center;min-height:80vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:40px 20px;border-bottom:1px solid var(--bdr);
    background-image:linear-gradient(to bottom, rgba(0,0,0,.2), rgba(var(--ax-bg-rgb), .55) 92%);}
  #ax-hero h1{font-size:clamp(32px,7vw,60px);}
  #ax-hero p{color:var(--muted);max-width:520px;margin:10px auto 24px;}
  .ax-btnrow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
  .ax-btn{background:var(--accent);color:#000;padding:12px 22px;border-radius:6px;font-weight:700;
    font-size:14px;text-transform:uppercase;letter-spacing:.5px;border:none;cursor:pointer;transition:transform .15s;}
  .ax-btn:hover{transform:translateY(-2px);}
  .ax-btn.ax-ghost{background:transparent;color:var(--fg);border:1px solid #444;}
  /* Pre-order button — own opacity control, independent of every other button */
  #ax-preorder-btn{background:rgba(var(--ax-accent-rgb), var(--ax-preorder-btn-opacity));
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
  .ax-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px;}
  .ax-card{background:var(--card);border:1px solid #222;border-radius:10px;padding:18px;}
  .ax-card h3{margin:0 0 6px;font-size:16px;}
  .ax-card p{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.4;}
  .ax-stat{font-size:12px;color:var(--accent);margin-top:8px;}
  /* Music platform icons */
  #ax-music-grid{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;margin-top:28px;}
  .ax-platform{display:flex;flex-direction:column;align-items:center;gap:10px;width:96px;}
  .ax-platform-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:28px;color:#fff;background:var(--platform-color, var(--accent));border:1px solid var(--bdr);
    transition:transform .15s, box-shadow .15s;}
  .ax-platform:hover .ax-platform-icon{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.4);}
  .ax-platform-name{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:center;}
  .ax-platform:hover .ax-platform-name{color:var(--fg);}
  #ax-events .ax-ev{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #222;
    padding:14px 0;gap:12px;flex-wrap:wrap;}
  #ax-events .ax-ev-date{color:var(--accent);font-weight:700;min-width:90px;}
  /* Revolving 3D Video Carousel */
  #ax-video-stage{position:relative;height:320px;display:flex;align-items:center;justify-content:center;
    perspective:1200px;margin-top:24px;}
  #ax-video-ring{position:relative;width:300px;height:220px;transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.25,.8,.3,1);}
  #ax-video-ring .ax-vslide{position:absolute;top:0;left:0;width:300px;height:220px;border-radius:10px;
    overflow:hidden;border:1px solid var(--bdr);background:var(--card);backface-visibility:hidden;transition:opacity .4s;}
  #ax-video-ring .ax-vslide-media{position:relative;width:100%;height:169px;background:#000;}
  #ax-video-ring .ax-vslide-media iframe{width:100%;height:100%;border:0;display:block;}
  #ax-video-ring .ax-vslide-overlay{position:absolute;inset:0;cursor:pointer;}
  #ax-video-ring .ax-slide-body{padding:8px 10px;}
  #ax-video-ring .ax-slide-body h3{margin:0;font-size:13px;font-family:var(--ax-font-body);
    text-transform:none;letter-spacing:0;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* Revolving 3D Carousel */
  #ax-carousel-stage{position:relative;height:340px;display:flex;align-items:center;justify-content:center;
    perspective:1200px;margin-top:24px;}
  #ax-carousel-ring{position:relative;width:220px;height:280px;transform-style:preserve-3d;
    transition:transform .6s cubic-bezier(.25,.8,.3,1);}
  #ax-carousel-ring .ax-slide{position:absolute;top:0;left:0;width:220px;height:280px;border-radius:10px;
    overflow:hidden;border:1px solid var(--bdr);background:var(--card);cursor:pointer;
    backface-visibility:hidden;transition:opacity .4s;}
  #ax-carousel-ring .ax-slide img{width:100%;height:100%;object-fit:cover;display:block;}
  #ax-carousel-ring .ax-slide .ax-slide-body{position:absolute;bottom:0;left:0;right:0;
    background:linear-gradient(to top, rgba(0,0,0,.85), transparent);padding:14px 12px 10px;}
  #ax-carousel-ring .ax-slide .ax-slide-body h3{margin:0;font-size:14px;font-family:var(--ax-font-body);
    text-transform:none;letter-spacing:0;}
  .ax-carousel-arrows{display:flex;gap:8px;justify-content:center;margin-top:16px;}
  .ax-carousel-arrows button{background:var(--card);border:1px solid #333;color:var(--fg);width:40px;height:40px;
    border-radius:50%;cursor:pointer;font-size:18px;}
  .ax-carousel-arrows button:hover{border-color:var(--accent);color:var(--accent);}
  #ax-social{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:36px 20px;border-top:1px solid #222;
    background:rgba(var(--ax-bg-rgb), var(--ax-bg-opacity));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
  #ax-social a{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border:1px solid #333;
    padding:8px 16px;border-radius:20px;}
  #ax-social a:hover{color:var(--accent);border-color:var(--accent);}
  /* Pre-order modal */
  #ax-preorder-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;
    align-items:center;justify-content:center;padding:20px;}
  #ax-preorder-modal.ax-open{display:flex;}
  #ax-preorder-modal .ax-modal-box{position:relative;width:100%;max-width:640px;background:var(--card);
    border:1px solid var(--bdr);border-radius:10px;overflow:hidden;}
  #ax-preorder-modal iframe{width:100%;height:80vh;max-height:900px;border:0;display:block;background:var(--card);}
  #ax-preorder-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--fg);
    font-size:26px;line-height:1;cursor:pointer;z-index:2;}
  #ax-preorder-close:hover{color:var(--accent);}
</style>

<div id="ax-root">
  <div id="ax-bg-fixed"></div>

  <!-- HERO (parallax image from whoisandrex.com) -->
  <div id="ax-hero">
    <div class="eyebrow">WHOISANDREX</div>
    <h1>Music. Merch. Movement.</h1>
    <p>Stream the new music, cop the merch, watch the videos, catch the next show.</p>
    <div class="ax-btnrow">
      <a class="ax-btn" href="#" id="ax-preorder-btn">Pre-Order Merch</a>
      <a class="ax-btn ax-ghost" href="#ax-music">Listen Now</a>
      <a class="ax-btn ax-ghost" href="#ax-videos">Watch Videos</a>
    </div>
  </div>

  <!-- MUSIC -->
  <section id="ax-music">
    <div class="eyebrow">Music</div>
    <h2>Stream Everywhere</h2>
    <div class="ax-grid" id="ax-music-grid"></div>
  </section>

  <!-- VIDEOS (revolving 3D ring) -->
  <section id="ax-videos">
    <div class="eyebrow">Watch</div>
    <h2>Latest Videos</h2>
    <div id="ax-video-stage">
      <div id="ax-video-ring"></div>
    </div>
    <div class="ax-carousel-arrows">
      <button id="ax-vid-prev" aria-label="Previous">←</button>
      <button id="ax-vid-next" aria-label="Next">→</button>
    </div>
  </section>

  <!-- EVENTS -->
  <section id="ax-events">
    <div class="eyebrow">Live</div>
    <h2>Upcoming Events</h2>
    <div id="ax-events-list"></div>
  </section>

  <!-- CAROUSEL (revolving 3D ring) -->
  <section id="ax-carousel">
    <div class="eyebrow">Explore</div>
    <h2>More From Andre X</h2>
    <div id="ax-carousel-stage">
      <div id="ax-carousel-ring"></div>
    </div>
    <div class="ax-carousel-arrows">
      <button id="ax-car-prev" aria-label="Previous">←</button>
      <button id="ax-car-next" aria-label="Next">→</button>
    </div>
  </section>

  <!-- SOCIAL -->
  <div id="ax-social"></div>

  <!-- PRE-ORDER MODAL (opens when "Pre-Order Merch" is clicked) -->
  <div id="ax-preorder-modal">
    <div class="ax-modal-box">
      <button id="ax-preorder-close" aria-label="Close">&times;</button>
      <!-- To swap the form later, just replace the src URL below -->
      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSevmsTSYUqaUqGs7JDnCjEF4IskMojOjfV4XWxS8AVdQxbQhw/viewform?embedded=true">Loading…</iframe>
    </div>
  </div>
</div>

<script>
(function(){

/* ============================================================
   EDIT ZONE — everything below this line is the stuff you touch
============================================================ */

// Streaming platforms — add/remove entries freely.
// icon: any Font Awesome brand class (see fontawesome.com/icons?f=brands)
// color: the circle's background color for that platform
const MUSIC_LINKS = [
  {name:"Bandcamp", url:"https://whoisandrex.bandcamp.com/album/12-for-12-project", icon:"fa-bandcamp", color:"#1DA0C3"},
  {name:"Apple Music", url:"https://music.apple.com/us/album/sex-drugs-other-things-ep/1570299696", icon:"fa-itunes-note", color:"#FA57C1"},
  {name:"Spotify", url:"https://open.spotify.com/search/whoisandrex", icon:"fa-spotify", color:"#1DB954"},
  {name:"The Push EP", url:"https://music.apple.com/us/album/the-push-single/1587920688", icon:"fa-itunes-note", color:"#FA57C1"}
];

// YouTube video IDs — swap these for your latest uploads
const VIDEOS = [
  {id:"bK1420fHOA0?si=m3GXnUu7N9f2Ok5x", title:"Latest Music Video"},
  {id:"wS-Cw2V9eac?si=AZsyqXaDx83_rRZk", title:"REELS"},
  {id:"hOnROr8ttFQ?si=ayH_O70PVfvAPiBV", title:"REELS"},
  {id:"ugkUxLDfcNA?si=vQU4vkXINUKm5Ur7", title:"REELS"}
];

// Upcoming events — add/remove freely, delete all for "no events" state
const EVENTS = [
  {date:"TBA", title:"New show dates coming soon", loc:"Boston, MA"}
];

// Carousel — plug/play any mix of releases, merch drops, BTS content
const CAROUSEL = [
  {img:"https://www.whoisandrex.com/wp-content/uploads/2024/05/12-project-copy-1.png", title:"The 12/12 Project", link:"https://whoisandrex.bandcamp.com/album/12-for-12-project"},
  {img:"https://www.whoisandrex.com/wp-content/uploads/2024/05/Screen-Shot-2024-05-30-at-7.05.32-PM.png", title:"S.D.O.T. with Big Blizz", link:"https://music.apple.com/us/album/sex-drugs-other-things-ep/1570299696"},
  {img:"https://www.whoisandrex.com/wp-content/uploads/2024/05/screen-shot-2024-05-30-at-4.53.19-pm-1.png", title:"The Push EP", link:"https://music.apple.com/us/album/the-push-single/1587920688"},
  {img:"https://images.squarespace-cdn.com/content/63bc948f97593d37b5b29952/127bfd57-49be-4caa-b1ae-b8bc2c909a42/DSC04368.jpg?content-type=image%2Fjpeg", title:"Keep It 100 Shoot", link:"https://www.whoisandrex.com/store/"}
];

// Social links
const SOCIAL = [
  {name:"Instagram", url:"http://www.instagram.com/whoisandrex"},
  {name:"YouTube", url:"https://www.youtube.com/@whoisandrex"},
  {name:"Facebook", url:"https://www.facebook.com/WhoIsAndreX/"},
  {name:"X / Twitter", url:"https://twitter.com/whoisandrex"}
];

/* ============================================================
   RENDER — no need to edit below this line
============================================================ */

// --- Pre-order modal ---
const poModal = document.getElementById('ax-preorder-modal');
document.getElementById('ax-preorder-btn').addEventListener('click', (e) => {
  e.preventDefault();
  poModal.classList.add('ax-open');
});
document.getElementById('ax-preorder-close').addEventListener('click', () => {
  poModal.classList.remove('ax-open');
});
poModal.addEventListener('click', (e) => {
  if(e.target === poModal) poModal.classList.remove('ax-open'); // click outside box closes it
});
document.addEventListener('keydown', (e) => {
  if(e.key === 'Escape') poModal.classList.remove('ax-open');
});

document.getElementById('ax-music-grid').innerHTML = MUSIC_LINKS.map(m => `
  <a class="ax-platform" href="${m.url}" target="_blank" rel="noopener" title="${m.name}">
    <div class="ax-platform-icon" style="--platform-color:${m.color}">
      <i class="fa-brands ${m.icon}"></i>
    </div>
    <div class="ax-platform-name">${m.name}</div>
  </a>`).join('');

const vRing = document.getElementById('ax-video-ring');
const vAngleStep = 360 / VIDEOS.length;
const vRadius = Math.round(300 / (2 * Math.tan(Math.PI / VIDEOS.length))) + 60;
vRing.innerHTML = VIDEOS.map((v, i) => `
  <div class="ax-vslide" style="transform: rotateY(${i * vAngleStep}deg) translateZ(${vRadius}px);">
    <div class="ax-vslide-media">
      <iframe src="https://www.youtube.com/embed/${v.id}" title="${v.title}" allowfullscreen loading="lazy"></iframe>
      <div class="ax-vslide-overlay"></div>
    </div>
    <div class="ax-slide-body"><h3>${v.title}</h3></div>
  </div>`).join('');

document.getElementById('ax-events-list').innerHTML = EVENTS.length ? EVENTS.map(e => `
  <div class="ax-ev">
    <div class="ax-ev-date">${e.date}</div>
    <div style="flex:1"><strong>${e.title}</strong><br><span style="color:var(--muted);font-size:13px">${e.loc}</span></div>
  </div>`).join('') : `<p style="color:var(--muted)">No events booked right now — check back soon.</p>`;

// --- Revolving 3D Carousel ---
const ring = document.getElementById('ax-carousel-ring');
const stage = document.getElementById('ax-carousel-stage');
const n = CAROUSEL.length;
const angleStep = 360 / n;
const radius = Math.round(220 / (2 * Math.tan(Math.PI / n))) + 40; // spacing based on card width

ring.innerHTML = CAROUSEL.map((c, i) => `
  <a class="ax-slide" href="${c.link}" target="_blank" rel="noopener"
     style="transform: rotateY(${i * angleStep}deg) translateZ(${radius}px);"
     data-index="${i}">
    <img src="${c.img}" alt="${c.title}" loading="lazy">
    <div class="ax-slide-body"><h3>${c.title}</h3></div>
  </a>`).join('');

// --- Shared "revolving 3D ring" engine, used by both Explore and Videos ---
function setupRevolvingRing({ring, stage, prevBtn, nextBtn, slideSelector, mode}){
  const slides = Array.from(ring.querySelectorAll(slideSelector));
  const n = slides.length;
  const angleStep = 360 / n;
  let current = 0;

  function update(){
    ring.style.transform = `rotateY(${-current * angleStep}deg)`;
    slides.forEach((el, i) => {
      el.style.opacity = (i === current) ? '1' : '.45';
      if(mode === 'video'){
        const overlay = el.querySelector('.ax-vslide-overlay');
        if(overlay) overlay.style.pointerEvents = (i === current) ? 'none' : 'auto';
      }
    });
  }
  function rotate(dir){ current = (current + dir + n) % n; update(); }
  function resetAutoplay(){ clearInterval(timer); timer = setInterval(() => rotate(1), 4000); }

  nextBtn.addEventListener('click', () => { rotate(1); resetAutoplay(); });
  prevBtn.addEventListener('click', () => { rotate(-1); resetAutoplay(); });

  slides.forEach((el, i) => {
    const clickTarget = mode === 'video' ? el.querySelector('.ax-vslide-overlay') : el;
    if(!clickTarget) return;
    clickTarget.addEventListener('click', (e) => {
      if(i !== current){
        if(mode === 'link') e.preventDefault();
        current = i; update(); resetAutoplay();
      }
    });
  });

  let timer = setInterval(() => rotate(1), 4000);
  stage.addEventListener('mouseenter', () => clearInterval(timer));
  stage.addEventListener('mouseleave', resetAutoplay);
  update();
}

setupRevolvingRing({
  ring: ring, stage: stage,
  prevBtn: document.getElementById('ax-car-prev'),
  nextBtn: document.getElementById('ax-car-next'),
  slideSelector: '.ax-slide', mode: 'link'
});

setupRevolvingRing({
  ring: vRing, stage: document.getElementById('ax-video-stage'),
  prevBtn: document.getElementById('ax-vid-prev'),
  nextBtn: document.getElementById('ax-vid-next'),
  slideSelector: '.ax-vslide', mode: 'video'
});

document.getElementById('ax-social').innerHTML = SOCIAL.map(s => `
  <a href="${s.url}" target="_blank" rel="noopener">${s.name}</a>`).join('');

})();
</script>