// $PNZI — simple landing page
const { useState, useEffect } = React;

const CA = "9hXCPbWZQ4pxFxgh55Ejz1iLZ6g6E1cT61u8urUvpump";

function useCountUp(target, duration = 1800) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    const t0 = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return val;
}

function fmt(n, d = 0) {
  if (n >= 1e9) return (n / 1e9).toFixed(d) + "B";
  if (n >= 1e6) return (n / 1e6).toFixed(d) + "M";
  if (n >= 1e3) return (n / 1e3).toFixed(d) + "K";
  return n.toFixed(d);
}

// ============================================================
// MARQUEE
// ============================================================
function Marquee({ items, speed = 45 }) {
  const content = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track" style={{ animationDuration: `${speed}s` }}>
        {content.map((it, i) => (
          <span key={i} className="marquee__item">
            {it} <span className="marquee__dot">◆</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// NAV
// ============================================================
function Nav({ bg, onToggleBg }) {
  const isNoir = bg === "noir";
  return (
    <header className="nav">
      <div className="nav__inner">
        <a className="nav__logo" href="#top">
          <img src="assets/pnzi-icon.png" alt="$PNZI" />
          <span>$PNZI</span>
        </a>
        <nav className="nav__links">
          <a href="#lore">Lore</a>
          <a href="#buy">How to buy</a>
        </nav>
        <button
          className={`theme-toggle ${isNoir ? "is-noir" : ""}`}
          onClick={onToggleBg}
          aria-label={isNoir ? "Switch to light" : "Switch to dark"}
          title={isNoir ? "Switch to light" : "Switch to dark"}
        >
          <img src="assets/pnzi-icon.png" alt="" className="theme-toggle__sun" />
          <svg className="theme-toggle__moon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M20 14.5A8 8 0 0 1 9.5 4a1 1 0 0 0-1.3-1.3A10 10 0 1 0 21.3 15.8a1 1 0 0 0-1.3-1.3z"/>
          </svg>
        </button>
        <a className="btn btn--primary btn--sm nav__cta" href="#buy">BUY NOW</a>
      </div>
    </header>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero() {
  const [copied, setCopied] = useState(false);

  const copyCA = () => {
    navigator.clipboard?.writeText(CA);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <section className="hero" id="top">
      <div className="hero__grid">
        <div className="hero__left">
          <div className="hero__eyebrow">
            Reposted by Adam Back
          </div>
          <h1 className="hero__title">
            <span className="hero__line">Ponzi</span>
            <span className="hero__line hero__line--alt">
              Strategy<sup className="hero__btc">₿</sup>
            </span>
          </h1>
          <p className="hero__sub">
            Alistair Milne boiled the "ponzi or genius?" argument around $STRC down
            to one ticker. Adam Back reposted it. We put it on-chain.
          </p>
          <div className="hero__cta">
            <button className="btn btn--primary btn--lg" onClick={copyCA}>
              {copied ? "✓ COPIED" : "COPY CONTRACT"}
            </button>
            <a className="btn btn--ghost btn--lg" href="#lore">
              READ THE LORE ↓
            </a>
          </div>
          <div className="hero__ca" onClick={copyCA} role="button">
            <span className="hero__ca-label">CA</span>
            <code>{CA}</code>
            <span className="hero__ca-copy">{copied ? "copied" : "copy"}</span>
          </div>
        </div>

        <div className="hero__right">
          <div className="coin-stage">
            <div className="coin-halo" />
            <div className="coin-halo coin-halo--2" />
            <img src="assets/pnzi-icon.png" className="coin" alt="$PNZI" />
            <div className="coin-orbit coin-orbit--1"><span>₿</span></div>
            <div className="coin-orbit coin-orbit--2"><span>₿</span></div>
            <div className="coin-orbit coin-orbit--3"><span>₿</span></div>
          </div>
        </div>
      </div>

      <div className="hero__stats">
        <Stat label="CHAIN" value="SOLANA" />
        <Stat label="LAUNCHED ON" value="PUMP.FUN" />
        <Stat label="TICKER" value="$PNZI" />
      </div>
    </section>
  );
}

function Stat({ label, value }) {
  return (
    <div className="stat">
      <div className="stat__v">{value}</div>
      <div className="stat__l">{label}</div>
    </div>
  );
}

// ============================================================
// LORE (the narrative)
// ============================================================
function Lore() {
  return (
    <section className="section" id="lore">
      <div className="section__head">
        <span className="kicker">§ THE LORE</span>
        <h2>Born from a real argument,<br/>not a vibe.</h2>
      </div>

      <div className="lore">
        <div className="lore__quote">
          <div className="lore__repost">↻ Adam Back reposted</div>
          <div className="lore__author">
            <img className="lore__avatar" src="assets/alistair-pfp.png" alt="Alistair Milne" />
            <div>
              <div className="lore__name">
                Alistair Milne <span className="check">✓</span>
              </div>
              <div className="lore__handle">@alistairmilne</div>
            </div>
          </div>
          <div className="lore__chips">
            <span className="lore__chip"><span className="lore__chip-dot lore__chip-dot--btc">₿</span>STRC× <b>$102.72</b> ↗</span>
            <span className="lore__chip"><span className="lore__chip-dot lore__chip-dot--m">M</span>MSTR× <b>$173.66</b> ↗</span>
          </div>
          <p className="lore__text">
            Dear <span className="mention">@saylor</span>, I am not sure there's
            enough people screaming <em>'ponzi'</em>.
          </p>
          <p className="lore__text">
            My idea: a *cumulative* version of <span className="mention">$STRC</span> which
            reinvests dividends into buying more <span className="mention">$STRC</span>
          </p>
          <p className="lore__text">
            (v2: a cumulative version of <span className="mention">$STRC</span> which
            reinvests dividends into buying <span className="mention">$MSTR</span>)
          </p>
          <p className="lore__text lore__text--ticker">
            Ticker idea: <b>PNZI</b>
          </p>
          <div className="lore__meta">
            <span>11:46 AM · Apr 21, 2026</span>
            <span>·</span>
            <span><b>10.1K</b> Views</span>
          </div>
        </div>

        <div className="lore__gloss">
          <p className="lore__lead">
            It didn't come from nowhere.
          </p>
          <p>
            $STRC had quietly become the center of a live argument in Bitcoin
            culture — "ponzi or genius?" — with Saylor at the middle of it.
            Alistair compressed the whole debate down to four letters: <b>PNZI</b>.
          </p>
          <p>
            Adam Back reposting it was the part that mattered. A quiet cosign from
            someone who actually carries weight in Bitcoin. We took the hint and
            shipped the ticker before anyone could talk us out of it.
          </p>
          <p className="lore__small">
            Not financial advice. Not a security. A memecoin about recursion,
            financial engineering, and how far the joke can be pushed.
          </p>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HOW TO BUY
// ============================================================
function HowToBuy() {
  const steps = [
    { n: "01", t: "Get a wallet", b: "Phantom, Solflare, whatever. You probably already have one." },
    { n: "02", t: "Fund it with SOL", b: "Send SOL to your wallet. Don't lose the seed phrase." },
    { n: "03", t: "Buy on pump.fun", b: "Paste the contract. Hit buy. Welcome aboard the joke." },
  ];
  return (
    <section className="section" id="buy">
      <div className="section__head">
        <span className="kicker">§ HOW TO APE</span>
        <h2>Three steps.<br/>None of them are hard.</h2>
      </div>
      <div className="steps">
        {steps.map(s => (
          <div className="step" key={s.n}>
            <div className="step__n">{s.n}</div>
            <h3>{s.t}</h3>
            <p>{s.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="footer__big">
        Ponzi Strategy<span className="footer__btc">₿</span>
      </div>
      <div className="footer__links">
        <a href="https://x.com/i/communities/2023797173696016433" target="_blank" rel="noopener noreferrer">X / Twitter</a>
        <span>·</span>
        <a href={`https://dexscreener.com/solana/${CA}`} target="_blank" rel="noopener noreferrer">Dexscreener</a>
        <span>·</span>
        <a href={`https://jup.ag/tokens/${CA}`} target="_blank" rel="noopener noreferrer">Jupiter</a>
      </div>
      <p className="footer__fine">
        $PNZI is a parody token. If you lose money, you were warned by the name.
        © 2026 — not affiliated with any company whose balance sheet vaguely resembles ours.
      </p>
    </footer>
  );
}

// ============================================================
// TWEAKS
// ============================================================
function Tweaks({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const set = (k, v) => setTweaks({ ...tweaks, [k]: v });
  return (
    <div className="tweaks">
      <div className="tweaks__head">Tweaks</div>
      <div className="tweaks__body">
        <label className="tweaks__row">
          <span>Brand hue</span>
          <input type="range" min="10" max="60" value={tweaks.hue} onChange={e => set("hue", +e.target.value)} />
          <output>{tweaks.hue}°</output>
        </label>
        <label className="tweaks__row">
          <span>Background</span>
          <select value={tweaks.bg} onChange={e => set("bg", e.target.value)}>
            <option value="cream">Cream</option>
            <option value="noir">Noir</option>
          </select>
        </label>
        <label className="tweaks__row tweaks__row--check">
          <span>Grain</span>
          <input type="checkbox" checked={tweaks.grain} onChange={e => set("grain", e.target.checked)} />
        </label>
        <label className="tweaks__row tweaks__row--check">
          <span>Marquee</span>
          <input type="checkbox" checked={tweaks.marquee} onChange={e => set("marquee", e.target.checked)} />
        </label>
      </div>
    </div>
  );
}

// ============================================================
// APP
// ============================================================
function App() {
  const [tweaksOn, setTweaksOn] = useState(false);
  const DEFAULTS = /*EDITMODE-BEGIN*/{
    "hue": 35,
    "bg": "cream",
    "grain": true,
    "marquee": true
  }/*EDITMODE-END*/;
  const [tweaks, setTweaks] = useState(DEFAULTS);

  useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === "__activate_edit_mode") setTweaksOn(true);
      if (e.data.type === "__deactivate_edit_mode") setTweaksOn(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  useEffect(() => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: tweaks }, "*");
  }, [tweaks]);

  const rootStyle = { "--hue": tweaks.hue };
  const bgClass = `bg-${tweaks.bg}`;

  const [transitioning, setTransitioning] = useState(false);
  const toggleBg = () => {
    if (transitioning) return;
    const goingNoir = tweaks.bg !== "noir";
    setTransitioning(true);
    setTweaks({ ...tweaks, bg: goingNoir ? "noir" : "cream" });
    setTimeout(() => setTransitioning(false), 320);
  };

  return (
    <div
      className={`app ${bgClass} ${tweaks.grain ? "has-grain" : ""} ${transitioning ? "is-celestial" : ""}`}
      style={rootStyle}
    >
      <div className="sky-overlay" aria-hidden="true" />
      <Nav bg={tweaks.bg} onToggleBg={toggleBg} />
      {tweaks.marquee && (
        <Marquee items={[
          "REPOSTED BY ADAM BACK",
          "TICKER IDEA: PNZI",
          "NOT FINANCIAL ADVICE",
          "LIVE ON PUMP.FUN",
          "DEAR SAYLOR",
          "PONZI STRATEGY ₿",
        ]} />
      )}
      <Hero />
      <Lore />
      <HowToBuy />
      <Footer />
      <Tweaks tweaks={tweaks} setTweaks={setTweaks} visible={tweaksOn} />
    </div>
  );
}

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