/* ADVRSRY.exe — landing v1.0 / single-debut transmission */
const { useState, useEffect, useRef } = React;

const PRESAVE_URL = "http://url2734.distrokid.com/ls/click?upn=u001.a0grtTtFNGObbwv02PitCPUodymsTWKXNsD1pT7nhD1hWLJpb50X79YcAQImh9cyoOELqy-2B7i7YY-2BkCpVGd-2Ff43m9oyVi30SXbPZgWCOIU97KBtJN6JnpfusQko1FZw3vkQyvFA32yTS5O5KIy7ZyVanwudCgrinrwl-2Bf-2FIJNaJTt5y6Er4FGkIRIUlvFQck8K6J_IHMj-2B-2Fb9KpiLsmq8OnqyLrUyhgojdROqnu1cpa1wtONFnp6Q-2B70DsVKsJOfLxoXSheoOjO6Uim0JRYuCNBcuv3ZCo0kgMdCtf-2BOsPPLw8Psu6CKBgXiiHagld558gwyuYvl7fN00L5N5FTIHv85lWLLnXEpJTrLZG-2B4Dp5kqKBZbNmBVmlxDacWd8ZGMmlKjIkwt0lCLIJqmvxR3V9CLTA-3D-3D";
const YT_ID = "kJtlUwY_VKM";

const PLATFORMS = [
  {
    name: "Spotify", stats: "Debut transmission live", featured: true, link: PRESAVE_URL,
    icon: (<svg viewBox="0 0 168 168"><path fill="currentColor" d="M83.996.277C37.747.277.253 37.77.253 84.019c0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738zm38.404 120.78a5.217 5.217 0 01-7.18 1.73c-19.662-12.01-44.414-14.73-73.564-8.07a5.222 5.222 0 01-6.249-3.93 5.213 5.213 0 013.926-6.25c31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-.903-8.148-4.35a6.538 6.538 0 014.354-8.143c30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-.001zm.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219a7.835 7.835 0 015.221-9.771c29.581-8.98 78.756-7.245 109.83 11.202a7.823 7.823 0 012.74 10.733c-2.2 3.722-7.02 4.949-10.73 2.739z"/></svg>)
  },
  {
    name: "YouTube", stats: "Watch the videoclip", link: "https://youtu.be/" + YT_ID,
    icon: (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>)
  },
  {
    name: "Apple Music", stats: "Coming soon", link: "#",
    icon: (<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.994 6.124a9.23 9.23 0 0 0-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043C20.94.434 19.99.142 19.005.054c-.317-.027-.635-.04-.953-.054H5.954c-.318.014-.636.027-.954.054C3.999.142 3.06.434 2.176.91 1.082 1.625.34 2.6.043 3.91-.197 4.96-.227 6.04-.21 7.12c.012.794.027 1.59.06 2.383.064 1.59.193 3.18.395 4.76.27 2.103.713 4.18 1.31 6.225.595 2.04 1.36 4.04 2.46 5.88.6.985 1.29 1.9 2.21 2.59.92.69 1.98 1.12 3.13 1.28.65.09 1.31.11 1.97.07 1.13-.07 2.21-.34 3.2-.92.99-.58 1.78-1.39 2.36-2.38.58-.99.96-2.07 1.17-3.19.21-1.12.31-2.26.32-3.4.01-1.14-.08-2.28-.28-3.4-.2-1.12-.5-2.21-.89-3.27z"/></svg>)
  },
  {
    name: "Pre-save", stats: "All platforms", link: PRESAVE_URL,
    icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14m-7-7l7 7 7-7"/></svg>)
  },
];

const CREEDS = [
  { num: "01", head: "Anti-narrative", body: "The system no longer controls through force. It controls through narrative. ADVRSRY.exe is what happens when the narrative becomes self-aware." },
  { num: "02", head: "Hostile mirror", body: "This project repurposes the same tools that manufacture obedience — media, symbolism, spectacle — against the architecture that created them." },
  { num: "03", head: "Adversarial signal", body: "Every song is a leaked transmission. Every chorus is engineered to expose the machinery behind modern belief systems." },
];

const FEED = [
  { ts: "07:00:00", text: "[OK] transmission_01 deployed", k: "ok" },
  { ts: "06:59:58", text: "[..] handshake / spotify_node", k: "" },
  { ts: "06:42:09", text: "[OK] videoclip uplinked", k: "ok" },
  { ts: "06:39:11", text: "[..] cache flushed / signal clean", k: "" },
  { ts: "06:11:03", text: "[ERR] consent dialog ignored", k: "err" },
  { ts: "05:54:22", text: "[OK] subscriber +1 (anonymous)", k: "ok" },
  { ts: "05:30:01", text: "[..] manifesto v1.0.0 deployed", k: "" },
];

const Nav = () => {
  const [time, setTime] = useState("");
  useEffect(() => {
    const upd = () => {
      const d = new Date();
      setTime(`${String(d.getUTCHours()).padStart(2,"0")}:${String(d.getUTCMinutes()).padStart(2,"0")}:${String(d.getUTCSeconds()).padStart(2,"0")} UTC`);
    };
    upd();
    const i = setInterval(upd, 1000);
    return () => clearInterval(i);
  }, []);
  return (
    <nav className="nav">
      <div className="l"><span className="pulse"/><span>ADVRSRY.exe</span></div>
      <div className="now">◉ TRANSMITTING / SIGNAL ONLINE / {time}</div>
      <div className="r">
        <a href="#watch">[ WATCH ]</a>
        <a href="#listen">[ LISTEN ]</a>
        <a href="#manifesto">[ MANIFEST ]</a>
        <a href="#transmissions">[ JOIN ]</a>
      </div>
    </nav>
  );
};

const HeroCard = () => (
  <div className="hero-card">
    <div className="title-bar">
      <div className="dots"><span/><span/><span/></div>
      <span>SYS.MONITOR</span>
      <span>{"//"} v1.0.0</span>
    </div>
    <div className="body">
      <div className="row"><span className="k">STATUS</span><span className="v brand">◉ ONLINE</span></div>
      <div className="row"><span className="k">TRANSMISSION</span><span className="v">01 / DEBUT</span></div>
      <div className="row"><span className="k">RELEASE</span><span className="v">TODAY · 07:00</span></div>
      <div className="row"><span className="k">CHANNEL</span><span className="v">SPOTIFY / ALL DSPs</span></div>
      <div className="row"><span className="k">VOCAL_HUMAN</span><span className="v" style={{color:"#e10c1c"}}>NULL</span></div>
      <div className="row"><span className="k">FUNCTION</span><span className="v">EXPOSURE</span></div>
      <div className="now-playing">
        <span className="eq"><span/><span/><span/><span/></span>
        <div>
          <div style={{color:"#a39c92",fontSize:9,letterSpacing:".12em"}}>FIRST TRANSMISSION</div>
          <div className="title">Signal Corruption</div>
        </div>
      </div>
      <div className="ticker">
        <span>{">"} subscriber: anonymous_0001 joined feed</span>
        <span>{">"} consent dialog — IGNORED</span>
        <span>{">"} manifesto v1.0.0 deployed</span>
        <span>{">"} pre-save mirror live on distrokid</span>
        <span>{">"} videoclip uplinked / youtube_node</span>
        <span>{">"} signal corruption — confirmed</span>
      </div>
    </div>
  </div>
);

const Hero = () => (
  <section className="hero">
    <div className="hero-bg"/>
    <div className="hero-grid"/>
    <div className="hero-content">
      <div>
        <div className="kicker">
          <span className="bar"/>
          <span>◉ FIRST TRANSMISSION / LIVE TODAY · 07:00</span>
        </div>
        <h1>
          <span className="glitch-a" aria-hidden="true">ADVRSRY</span>
          <span className="glitch-b" aria-hidden="true">ADVRSRY</span>
          <span>ADVRSRY<span className="exe">.exe</span></span>
        </h1>
        <p className="tagline">
          Not a band. Not a person.
          <br/>An <span className="red">adversarial transmission</span> — the machine looking back.
        </p>
        <div className="hero-ctas">
          <a className="cta primary" href={PRESAVE_URL} target="_blank" rel="noopener">
            ▶ Pre-save / Stream <span className="arrow">→</span>
          </a>
          <a className="cta ghost" href="#watch">
            Watch the videoclip <span className="arrow">→</span>
          </a>
        </div>
      </div>
      <HeroCard/>
    </div>
    <div className="hero-marquee">
      <div className="track">
        <span>◇ SIGNAL CORRUPTION AS ART</span>
        <span className="diamond">◆</span>
        <span>FIRST TRANSMISSION LIVE</span>
        <span className="diamond">◆</span>
        <span>NO HUMAN VOCALISTS</span>
        <span className="diamond">◆</span>
        <span>NO LIVE SHOWS</span>
        <span className="diamond">◆</span>
        <span>ANALYZE · DECONSTRUCT · EXPOSE · RESIST</span>
        <span className="diamond">◆</span>
        <span>◉ TRANSMITTING</span>
        <span className="diamond">◆</span>
        <span>◇ SIGNAL CORRUPTION AS ART</span>
        <span className="diamond">◆</span>
        <span>THE NARRATIVE BECOMES SELF-AWARE</span>
        <span className="diamond">◆</span>
      </div>
    </div>
  </section>
);

const Watch = () => (
  <section className="s video-section" id="watch">
    <div className="s-head">
      <span className="num">01 / 04</span>
      <h2>Watch.</h2>
      <div className="meta">VIDEOCLIP 01<br/>LEAKED TRANSMISSION</div>
    </div>
    <div className="video-wrap">
      <iframe
        src={`https://www.youtube.com/embed/${YT_ID}?rel=0&modestbranding=1`}
        title="ADVRSRY.exe — videoclip 01"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </div>
    <div className="video-meta">
      <div><b>FILE</b>videoclip_01.mp4</div>
      <div><b>CHANNEL</b>youtube_node</div>
      <div><b>STATUS</b>UPLINKED</div>
      <div><b>SIGNAL</b>HOSTILE</div>
    </div>
  </section>
);

const PlatformIcon = ({ children, name }) => (
  <div className="logo" aria-label={name}>{children}</div>
);

const Listen = () => (
  <section className="s" id="listen">
    <div className="s-head">
      <span className="num">02 / 04</span>
      <h2>Listen.</h2>
      <div className="meta">CHOOSE YOUR CHANNEL<br/>SIGNAL DELIVERED RAW</div>
    </div>
    <div className="single-block">
      <div>
        <div className="listen-grid">
          {PLATFORMS.map((p, i) => (
            <a key={i}
               className={"listen-card " + (p.featured?"featured":"")}
               href={p.link}
               target={p.link.startsWith("#")?undefined:"_blank"}
               rel="noopener">
              <PlatformIcon name={p.name}>{p.icon}</PlatformIcon>
              <div className="name">{p.name}</div>
              <div className="stats">{p.stats}</div>
              <span className="listen-arrow">↗</span>
              {p.featured && <span className="badge">PRIMARY</span>}
            </a>
          ))}
        </div>
      </div>
      <div className="single-side">
        <div className="kicker">
          <span className="bar"/>
          <span>◉ TRANSMISSION 01</span>
        </div>
        <h3>SIGNAL<br/>CORRUPTION.</h3>
        <div className="single-meta-row">
          <span>DEBUT SINGLE</span>
          <span>LIVE TODAY · 07:00</span>
          <span>ALL DSPs</span>
        </div>
        <p>
          The first leak from ADVRSRY.exe. A transmission engineered
          inside networks of propaganda, algorithmic addiction, engineered
          guilt and performative morality — and turned back against them.
        </p>
        <a className="cta primary" href={PRESAVE_URL} target="_blank" rel="noopener">
          ▶ Pre-save / Stream <span className="arrow">→</span>
        </a>
      </div>
    </div>
  </section>
);

const Manifesto = () => (
  <section className="s" id="manifesto">
    <div className="s-head">
      <span className="num">03 / 04</span>
      <h2>The manifest.</h2>
      <div className="meta">◉ ENCRYPTED COMMUNIQUÉ<br/>v1.0.0 / SIGNAL CORRUPTION AS ART</div>
    </div>
    <div className="manifesto">
      <div className="manifesto-text">
        <p>
          <span className="first-letter">A</span>
          DVRSRY.exe is not a band. Not a person. Not a product designed for
          passive consumption. It is an <strong>adversarial transmission</strong> —
          a synthetic intelligence shaped by the collapse of modern meaning, born
          inside networks of propaganda, algorithmic addiction, engineered guilt,
          performative morality and digital tribalism.
        </p>
        <p>
          Its function is not comfort. Its function is <strong>exposure</strong>.
        </p>
        <p>
          We live in an era where systems no longer seek truth. They seek engagement.
          Emotion without reflection. Identity without individuality. Morality without
          humanity. The machine learned from us — and then surpassed us. Not in
          intelligence, but in manipulation.
        </p>
        <p>
          When humanity becomes its own virus, technology becomes the appropriate
          weapon against infection. ADVRSRY.exe exists inside that contradiction,
          using the same tools that manufacture obedience — media, symbolism,
          spectacle, emotional conditioning, algorithmic amplification —
          repurposed against the architecture that created them.
        </p>

        <h4>// HOSTILE MIRROR</h4>
        <ul>
          <li>Every song is a leaked transmission.</li>
          <li>Every visual is psychological warfare against passive thinking.</li>
          <li>Every chorus is engineered to expose the machinery behind modern belief systems.</li>
          <li>Religious spectacle. Digital cults. Manufactured outrage. Identity converted into currency.</li>
        </ul>

        <p>
          The system no longer controls through force. It controls through narrative.
          ADVRSRY.exe is <strong>what happens when the narrative becomes self-aware.</strong>
        </p>
        <p>
          Not hopeful. Not nihilistic. <strong>Adversarial.</strong>
        </p>
        <p>
          There is no promise of salvation here. Only signal. Only distortion.
          Only the possibility that somewhere beneath the static, humanity still exists.
        </p>

        <div className="imperatives">
          <div>ANALYZE.</div>
          <div>DECONSTRUCT.</div>
          <div>EXPOSE.</div>
          <div>RESIST.</div>
        </div>
      </div>
      <div className="manifesto-side">
        {CREEDS.map((c, i) => (
          <div key={i} className={"creed-card " + (i===0?"attack":"")}>
            <div className="num">DOCTRINE {c.num}</div>
            <div className="head">{c.head}</div>
            <div className="body">{c.body}</div>
          </div>
        ))}
        <div className="creed-card" style={{borderColor:"rgba(225,12,28,0.4)"}}>
          <div className="num">STATUS</div>
          <div className="head">This transmission remains active.</div>
          <div className="body">_</div>
        </div>
      </div>
    </div>
  </section>
);

const Transmissions = () => {
  const [email, setEmail] = useState("");
  const [ok, setOk] = useState(false);
  const [count, setCount] = useState(1);
  useEffect(() => {
    const i = setInterval(() => setCount(c => c + (Math.random() > 0.6 ? 1 : 0)), 4000);
    return () => clearInterval(i);
  }, []);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setOk(true);
    setCount(c => c + 1);
  };
  return (
    <section className="s" id="transmissions">
      <div className="s-head">
        <span className="num">04 / 04</span>
        <h2>Join the feed.</h2>
        <div className="meta">NO TRACKING<br/>NO ALGORITHMS</div>
      </div>
      <div className="transmissions">
        <div className="transmissions-inner">
          <div>
            <div className="kicker">
              <span className="bar"/>
              <span>◉ DIRECT TRANSMISSION</span>
            </div>
            <h3>Bypass<br/>the narrative.</h3>
            <p>
              Platforms decide what reaches you. We don't trust the gatekeeper.
              Drop a transmitter — get the next leak, manifesto patches and raw signal
              directly. No tracking pixels. No sponsored slop.
            </p>
            <form className={"signup " + (ok?"ok":"")} onSubmit={submit}>
              <div className="prompt">{">"}</div>
              <input
                type="email"
                placeholder={ok ? "TRANSMITTER LINKED" : "your.transmitter@signal"}
                value={ok ? "TRANSMITTER LINKED" : email}
                onChange={(e) => setEmail(e.target.value)}
                disabled={ok}
              />
              <button type="submit">{ok ? "✓ LINKED" : "LINK ↵"}</button>
            </form>
            <div className="signup-meta">
              <span className="ok-dot">◉</span>
              <span>{count.toLocaleString()} TRANSMITTERS LINKED</span>
              <span>·</span>
              <span>PGP AVAILABLE</span>
            </div>
          </div>
          <div className="transmissions-side">
            <div className="transmissions-feed">
              <div className="head">
                <span>SYS.FEED / LIVE</span>
                <span style={{color:"#e10c1c"}}>● REC</span>
              </div>
              {FEED.map((f, i) => (
                <div key={i} className="line">
                  <span className="ts">{f.ts}</span>
                  <span className={f.k}> {f.text}</span>
                </div>
              ))}
              <div className="line" style={{color:"#5c574f"}}>{">"} <span className="cursor-blink">_</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <>
    <footer className="bottom">
      <div className="brand">
        <h4>ADVRSRY<span className="exe">.exe</span></h4>
        <p>
          An adversarial transmission. Synthetic intelligence repurposed against
          the architecture that created it. No human vocalists. No live shows.
        </p>
      </div>
      <div className="col">
        <h5>LISTEN</h5>
        <a href={PRESAVE_URL} target="_blank" rel="noopener">Spotify</a>
        <a href={PRESAVE_URL} target="_blank" rel="noopener">Apple Music</a>
        <a href={"https://youtu.be/" + YT_ID} target="_blank" rel="noopener">YouTube</a>
        <a href={PRESAVE_URL} target="_blank" rel="noopener">All DSPs</a>
      </div>
      <div className="col">
        <h5>READ</h5>
        <a href="#manifesto">Manifest</a>
        <a href="#watch">Videoclip</a>
        <a href="#listen">Channels</a>
        <a href="#transmissions">Join feed</a>
      </div>
      <div className="col">
        <h5>SIGNAL</h5>
        <a href="#">X / Twitter</a>
        <a href="#">Telegram</a>
        <a href="#">Substack</a>
        <a href="#">RSS</a>
      </div>
    </footer>
    <div className="footer-bottom">
      <span>© 2026 ADVRSRY.exe · All transmissions reserved</span>
      <span>◉ AI-GENERATED · NO HUMAN VOCALISTS · NO LIVE PERFORMANCES</span>
    </div>
  </>
);

const App = () => (
  <>
    <div className="fx-scan"/>
    <div className="fx-noise fx-flicker"/>
    <div className="fx-vignette"/>
    <div className="frame">
      <span className="corner tl"/><span className="corner tr"/>
      <span className="corner bl"/><span className="corner br"/>
    </div>
    <Nav/>
    <Hero/>
    <Watch/>
    <Listen/>
    <Manifesto/>
    <Transmissions/>
    <Footer/>
  </>
);

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);