const { useEffect, useMemo, useState } = React;

const socials = {
  telegram: "https://t.me/Biqcoineth",
  x: "https://x.com/biqcoineth",
};

const CONTRACT_ADDRESS = "0x000000000000000000000000";
const CONTRACT_PLACEHOLDER = "CONTRACT ADDRESS COMING SOON";

const windows = [
  {
    id: "manifesto",
    icon: "🧠",
    title: "manifesto.txt",
    content:
      "BIQcoin = Billion IQ. A Billion IQ is far better than a Million one. That is why nobody whispers about millionaires when billionaires are busy stealing the spotlight. Join the Cult.",
  },
  {
    id: "tokenomics",
    icon: "📊",
    title: "tokenomics.xls",
    content:
      "Total Supply: 1,000,000,000 BIQ tokens. Ticker: $BIQ. Chain: Ethereum. Utility: billionaire brain posture. Million IQ was the tutorial. Billion IQ is the boss level.",
  },
  {
    id: "terminal",
    icon: "💾",
    title: "biq_terminal.exe",
    content:
      "C:\\BIQ> run giga_brain.bat\nloading billion_iq.dll...\nchecking ETH community vibes...\nresult: cult formation probable\nstatus: exceptionally unserious",
  },
];

const memes = [
  {
    name: "galaxy_brain.bmp",
    caption: "IQ so large etherscan asks for pagination.",
    image: "/assets/biq-meme-galaxy-brain-elonish.png",
  },
  {
    name: "chad_allocation.bmp",
    caption: "Distribution desk opens when the cult stops blinking.",
    image: "/assets/biq-meme-drop-desk-elonish.png",
  },
  {
    name: "midcurve_deleted.bmp",
    caption: "A Million IQ? Cute. A Billion IQ? Spotlight behavior.",
    image: "/assets/biq-meme-1b-vs-1m-elonish.png",
  },
  {
    name: "spotlight_rocket.bmp",
    caption: "Billionaires do not walk. They launch poorly drawn rockets.",
    image: "/assets/biq-meme-rocket-elonish.png",
  },
  {
    name: "biq_exe.bmp",
    caption: "Ancient computer. Modern delusion. Billion IQ loaded.",
    image: "/assets/biq-meme-exe-elonish.png",
  },
  {
    name: "cult_meeting.bmp",
    caption: "Tonight's agenda: buy high, think higher.",
    image: "/assets/biq-meme-cult-elonish.png",
  },
];

const phases = [
  {
    label: "Phase 1",
    title: "Boot",
    items: ["Website.exe launches", "BIQ propaganda spreads", "Telegram starts sounding like a math class"],
  },
  {
    label: "Phase 2",
    title: "Distribute",
    items: ["A billion BIQ tokens enter the arena", "Ethereum chads inspect the artifact", "Millionaire mindset gets uninstalled"],
  },
  {
    label: "Phase 3",
    title: "Ascend",
    items: ["Charts become abstract art", "Cult lore becomes unavoidable", "Billion IQ becomes a lifestyle choice"],
  },
];

function App() {
  const [time, setTime] = useState("");
  const [alertOpen, setAlertOpen] = useState(true);
  const [startOpen, setStartOpen] = useState(false);
  const [visitors, setVisitors] = useState(42069);
  const [copyStatus, setCopyStatus] = useState("Copy CA");
  const hasContractAddress = Boolean(CONTRACT_ADDRESS);
  const contractDisplay = CONTRACT_ADDRESS || CONTRACT_PLACEHOLDER;

  const marquee = useMemo(
    () =>
      Array.from({ length: 2 }, () =>
        "$BIQ.EXE ONLINE • BILLION IQ LOADING • ETHEREUM CHADS DETECTED • JOIN THE CULT • "
      ).join(""),
    []
  );

  useEffect(() => {
    function tick() {
      const date = new Date();
      setTime(
        date.toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
        })
      );
    }

    tick();
    const clock = window.setInterval(tick, 30000);
    const counter = window.setInterval(() => {
      setVisitors((value) => value + Math.floor(Math.random() * 9) + 1);
    }, 900);

    return () => {
      window.clearInterval(clock);
      window.clearInterval(counter);
    };
  }, []);

  function jumpTo(id) {
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
    setStartOpen(false);
  }

  async function copyContractAddress() {
    if (!hasContractAddress) return;

    try {
      await navigator.clipboard.writeText(CONTRACT_ADDRESS);
      setCopyStatus("Copied");
    } catch {
      const fallback = document.createElement("textarea");
      fallback.value = CONTRACT_ADDRESS;
      document.body.appendChild(fallback);
      fallback.select();
      document.execCommand("copy");
      fallback.remove();
      setCopyStatus("Copied");
    }

    window.setTimeout(() => setCopyStatus("Copy CA"), 1400);
  }

  return (
    <main className="desktop">
      <div className="wallpaper" aria-hidden="true" />

      <aside className="desktop-icons" aria-label="Desktop shortcuts">
        <button type="button" onClick={() => jumpTo("hero")}>
          <span>🧠</span>
          <em>BIQ.exe</em>
        </button>
        <button type="button" onClick={() => jumpTo("memes")}>
          <span>📁</span>
          <em>Memes</em>
        </button>
        <button type="button" onClick={() => jumpTo("buy")}>
          <span>💸</span>
          <em>Buy_BIQ</em>
        </button>
        <a href={socials.x} target="_blank" rel="noreferrer">
          <span>𝕏</span>
          <em>X.com</em>
        </a>
      </aside>

      {alertOpen && (
        <section className="win alert" role="dialog" aria-label="BIQ system alert">
          <div className="titlebar">
            <span>⚠ system_message.dll</span>
            <button type="button" aria-label="Close alert" onClick={() => setAlertOpen(false)}>
              ×
            </button>
          </div>
          <div className="window-body alert-body">
            <strong>BIQ ALERT</strong>
            <p>A Billion IQ has been detected on Ethereum. Million IQ has been demoted to intern.</p>
            <button type="button" className="win-button" onClick={() => setAlertOpen(false)}>
              I understand nothing
            </button>
          </div>
        </section>
      )}

      <section className="win marquee-window">
        <div className="titlebar">
          <span>📢 brain_broadcast.marquee</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="marquee">
          <span>{marquee}</span>
        </div>
      </section>

      <section className="win hero-window" id="hero">
        <div className="titlebar">
          <span>🧠 BIQcoin.exe — Billion IQ Coin</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <nav className="menu" aria-label="Primary">
          <button type="button" onClick={() => jumpTo("lore")}>
            Lore
          </button>
          <button type="button" onClick={() => jumpTo("memes")}>
            Memes
          </button>
          <button type="button" onClick={() => jumpTo("buy")}>
            Buy
          </button>
          <button type="button" onClick={() => jumpTo("roadmap")}>
            Roadmap
          </button>
        </nav>
        <div className="window-body hero-grid">
          <div className="hero-copy">
            <p className="kicker">Ethereum mainframe detected</p>
            <h1>
              BIQcoin <span>$BIQ</span>
            </h1>
            <p className="tagline">Billion IQ, zero chill.</p>
            <p className="intro">
              A Billion IQ is far better than a Million one. This is why we do not speak much about
              Millionaires while the Billionaires are the real deal in spotlight. Total Supply: A Billion
              BIQ tokens. Join the Cult.
            </p>
            <div className="contract-row" aria-label="BIQcoin contract address">
              <span>CA:</span>
              <code>{contractDisplay}</code>
              <button type="button" className="win-button" disabled={!hasContractAddress} onClick={copyContractAddress}>
                {hasContractAddress ? copyStatus : "Copy soon"}
              </button>
            </div>
            <div className="cta-row">
              <a className="win-button hot" href={socials.telegram} target="_blank" rel="noreferrer">
                Telegram
              </a>
              <a className="win-button" href={socials.x} target="_blank" rel="noreferrer">
                X / Twitter
              </a>
              <button type="button" className="win-button green" onClick={() => jumpTo("buy")}>
                Buy $BIQ
              </button>
            </div>
          </div>
          <div className="hero-art">
            <img src="/assets/biq-brain-chad-elonish-transparent.png" alt="BIQ big-brain tech billionaire meme mascot holding a giant brain" />
            <span className="sticker sticker-a">BILLION IQ</span>
            <span className="sticker sticker-b">CULT MODE</span>
            <span className="sticker sticker-c">ETH ONLY</span>
          </div>
        </div>
      </section>

      <section className="split" id="lore">
        {windows.map((item) => (
          <article className="win mini-window" key={item.id}>
            <div className="titlebar">
              <span>
                {item.icon} {item.title}
              </span>
              <div className="chrome-buttons" aria-hidden="true">
                <i>_</i>
                <i>□</i>
                <i>×</i>
              </div>
            </div>
            <div className="window-body">
              <p>{item.content}</p>
            </div>
          </article>
        ))}
      </section>

      <section className="win receipts">
        <div className="titlebar">
          <span>🧮 billion_iq_whiteboard.jpg</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="banner-art" role="img" aria-label="BIQcoin math whiteboard artwork" />
      </section>

      <section className="win" id="memes">
        <div className="titlebar">
          <span>📁 C:\BIQ\cult_assets\</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="window-body">
          <div className="file-status">
            <strong>{memes.length} object(s)</strong>
            <span>sorted by: maximum brain damage ↓</span>
          </div>
          <div className="meme-grid">
            {memes.map((meme) => (
              <article className="meme-card" key={meme.name}>
                <img src={meme.image} alt={`${meme.name} BIQcoin meme art`} />
                <strong>{meme.name}</strong>
                <p>{meme.caption}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="win stonks">
        <div className="titlebar">
          <span>📈 iq_chart.exe</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="window-body stonks-body">
          <div>
            <p>BIQ / ETH</p>
            <strong>+1,000,000,000 IQ</strong>
            <span>Past performance: invented in the future.</span>
          </div>
          <svg viewBox="0 0 720 190" aria-hidden="true">
            <polyline points="8,162 80,150 140,156 210,118 280,130 350,78 420,91 510,42 600,55 710,18" />
            <g>
              <circle cx="710" cy="18" r="8" />
              <text x="545" y="30">cult candle</text>
            </g>
          </svg>
        </div>
      </section>

      <section className="win" id="buy">
        <div className="titlebar">
          <span>❓ how_to_buy.hlp</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="warning">APING IN PROGRESS</div>
        <div className="window-body steps">
          <article>
            <span>1</span>
            <h2>Get ETH</h2>
            <p>Acquire the sacred gas rock. Do not ask why it costs $38 to press a button.</p>
          </article>
          <article>
            <span>2</span>
            <h2>Find $BIQ</h2>
            <p>Paste the official contract when available. Until then, join socials and keep both eyes open.</p>
          </article>
          <article>
            <span>3</span>
            <h2>Join Cult</h2>
            <p>Post brain memes. Hold with unnecessary confidence. Explain it to no one.</p>
          </article>
        </div>
      </section>

      <section className="win" id="roadmap">
        <div className="titlebar">
          <span>🗺 roadmap.bat</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="window-body roadmap">
          {phases.map((phase) => (
            <article key={phase.label}>
              <p>{phase.label}</p>
              <h2>{phase.title}</h2>
              <ul>
                {phase.items.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </section>

      <section className="win socials">
        <div className="titlebar">
          <span>🌐 connect.dll</span>
          <div className="chrome-buttons" aria-hidden="true">
            <i>_</i>
            <i>□</i>
            <i>×</i>
          </div>
        </div>
        <div className="window-body social-body">
          <h2>stay BIQ.<br />stay unreasonably early.</h2>
          <div>
            <a className="win-button hot" href={socials.telegram} target="_blank" rel="noreferrer">
              Telegram
            </a>
            <a className="win-button" href={socials.x} target="_blank" rel="noreferrer">
              X / Twitter
            </a>
          </div>
          <p>visitors: {visitors.toLocaleString("en-US").padStart(9, "0")}</p>
        </div>
      </section>

      <footer>
        $BIQ is a meme coin with no promise of profit, enlightenment, or basic arithmetic improvement. DYOR.
      </footer>

      <section className={`start-menu win ${startOpen ? "open" : ""}`}>
        <div className="start-strip">$BIQ 98</div>
        <div>
          <button type="button" onClick={() => jumpTo("hero")}>
            🧠 Open BIQcoin.exe
          </button>
          <button type="button" onClick={() => jumpTo("memes")}>
            📁 Meme Folder
          </button>
          <button type="button" onClick={() => jumpTo("buy")}>
            💸 Buy_BIQ.exe
          </button>
          <a href={socials.telegram} target="_blank" rel="noreferrer">
            📨 Telegram
          </a>
        </div>
      </section>

      <div className="taskbar">
        <button type="button" className="start-button" onClick={() => setStartOpen((value) => !value)}>
          <span>🧠</span>
          Start
        </button>
        <div className="task active">BIQcoin.exe</div>
        <div className="task">cult_assets</div>
        <div className="task">billion_iq.xls</div>
        <time>{time}</time>
      </div>
    </main>
  );
}

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