// app.jsx — BRRR v3 (minimal, Vercel/AssetShare style)

const { useState, useEffect, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ticker": "BRRR",
  "feePercent": 3,
  "buybackSplit": 80,
  "cycleMin": 30,
  "liveTicker": true
}/*EDITMODE-END*/;

const fmtUSD = (n, dp = 0) =>
  "$" + n.toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });
const fmtNum = (n, dp = 0) =>
  n.toLocaleString("en-US", { minimumFractionDigits: dp, maximumFractionDigits: dp });

const rand = (seed) => { let s = seed; return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; }; };

// ---------- NAV ----------
function Nav({ t }) {
  return (
    <nav className="nav">
      <div className="container">
        <div className="nav-inner">
          <a className="brand" href="#top">
            <span className="brand-mark">B</span>
            <span>{t.ticker}</span>
          </a>
          <div className="nav-links">
            <a href="#how">How</a>
            <a href="#cycle">Cycle</a>
            <a href="#ledger">Buybacks</a>
            <a href="#roadmap">Roadmap</a>
            <a href="#faq">FAQ</a>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <a className="btn btn-ghost" href="#">Connect wallet</a>
            <a className="btn btn-primary" href="#buy">Buy {t.ticker}</a>
          </div>
        </div>
      </div>
    </nav>
  );
}

// ---------- HERO ----------
function Hero({ t }) {
  const [live, setLive] = useState({ block: 8_421_904, totalBought: 2_418_902 });
  useEffect(() => {
    if (!t.liveTicker) return;
    const id = setInterval(() => {
      setLive((p) => ({ block: p.block + 1, totalBought: p.totalBought + Math.round(Math.random() * 60) }));
    }, 1400);
    return () => clearInterval(id);
  }, [t.liveTicker]);
  return (
    <section id="top" className="hero">
      <div className="container">
        <span className="eyebrow">
          <span className="live-dot"></span>
          Buyback active · block #{fmtNum(live.block)}
        </span>
        <h1>
          Hold the token.<br/>
          <span className="mute">Buy back the float.</span>
        </h1>
        <p className="lede">
          Every buy and sell of ${t.ticker} generates a fee. Those fees auto-route on-chain to buy back and burn supply — every {t.cycleMin} minutes, on Solana. No claim, no signature, no admin key.
        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="#buy">Buy ${t.ticker}</a>
          <a className="btn" href="#how">How it works</a>
        </div>

        <div className="hero-meta">
          <div className="hmc">
            <div className="k">Cycle</div>
            <div className="v tnum">{t.cycleMin}<span style={{ fontSize: 14, color: "var(--text-3)", marginLeft: 4 }}>MIN</span></div>
            <div className="d">Fully automatic</div>
          </div>
          <div className="hmc">
            <div className="k">Next buyback</div>
            <div className="v tnum">00:47</div>
            <div className="d"><span className="live">● LIVE</span></div>
          </div>
          <div className="hmc">
            <div className="k">30d bought back</div>
            <div className="v tnum">{fmtUSD(live.totalBought)}</div>
            <div className="d">↑ from on-chain fees</div>
          </div>
          <div className="hmc">
            <div className="k">Network</div>
            <div className="v" style={{ fontSize: 20 }}>Solana</div>
            <div className="d">SPL · no custody</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- MECHANISM ----------
function Mechanism({ t }) {
  const steps = [
    { n: "01", h: "Hold", d: `Acquire $${t.ticker} with any Solana wallet.` },
    { n: "02", h: "Accrue", d: `Each trade contributes a ${t.feePercent}% fee to the treasury.` },
    { n: "03", h: "Buyback", d: `The treasury market-buys $${t.ticker} on-chain — ${t.buybackSplit}% of every fee.` },
    { n: "04", h: "Burn", d: "Bought tokens are routed to a dead address. Float shrinks, every cycle." },
  ];
  return (
    <section id="how" className="wrap">
      <div className="container">
        <div className="section-head">
          <span className="bracket">Mechanism</span>
          <h2>Fees in. <span style={{ color: "var(--text-3)" }}>Supply out.</span></h2>
          <p>
            A Solana program collects protocol fees, market-buys ${t.ticker}, and burns the bought
            supply on a {t.cycleMin}-minute cycle. Fully on-chain. No claims. No gatekeeper.
          </p>
        </div>

        <div className="flow">
          {steps.map((s) => (
            <div key={s.n} className="step">
              <div className="step-n">{s.n}</div>
              <div>
                <h3>{s.h}</h3>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- COUNTDOWN ----------
function Countdown({ t }) {
  const [seconds, setSeconds] = useState(27 * 60 + 14);
  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => (s > 0 ? s - 1 : t.cycleMin * 60)), 1000);
    return () => clearInterval(id);
  }, [t.cycleMin]);
  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
  const ss = String(seconds % 60).padStart(2, "0");
  return (
    <section id="cycle" className="wrap" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="countdown-wrap">
          <div>
            <span className="bracket">Next cycle</span>
            <h2>Every {t.cycleMin} minutes.</h2>
            <p>
              The buyback is continuous. The contract computes the next amount to spend from
              the fee vault, market-buys ${t.ticker}, and burns it — no claim, no signature.
            </p>
            <div className="countdown-meta">
              <div>Last · <b>2m 14s ago</b></div>
              <div>Spent · <b className="tnum">$12,480</b></div>
              <div>Burned · <b className="tnum">291,428 {t.ticker}</b></div>
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="countdown-big">{mm}<span style={{ color: "var(--text-4)" }}>:</span>{ss}</div>
            <div style={{ marginTop: 10, fontFamily: "'JetBrains Mono'", fontSize: 11, letterSpacing: ".06em", color: "var(--text-3)", textTransform: "uppercase" }}>
              TIME · UNTIL · NEXT · BUYBACK
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- STATS + LEDGER ----------
function StatsAndLedger({ t }) {
  const stats = [
    { k: "Fees collected · all-time", v: fmtUSD(3_124_820), d: "+$8,240 today" },
    { k: `${t.ticker} bought back`, v: fmtNum(58_204_910), d: "73.2% of fee pool" },
    { k: `${t.ticker} burned`, v: fmtNum(58_204_910), d: "100% of buybacks" },
    { k: "Buyback events", v: fmtNum(1842), d: `every ${t.cycleMin}m` },
  ];
  const rows = useMemo(() => {
    const r = rand(11);
    const out = [];
    for (let i = 0; i < 8; i++) {
      const amt = Math.round((120 + r() * 24_000));
      const tokens = Math.round(amt / 0.0428);
      const mins = Math.round(r() * 600);
      out.push({
        id: `BB-${String(8421904 - i * 200).slice(-6)}`,
        time: mins < 60 ? `${mins}m ago` : `${Math.floor(mins / 60)}h ${mins % 60}m ago`,
        amt, tokens,
      });
    }
    return out;
  }, []);
  return (
    <section id="ledger" className="wrap">
      <div className="container">
        <div className="section-head">
          <span className="bracket">Ledger</span>
          <h2>Proof, not promises.</h2>
          <p>Every fee collected, every token bought, every burn — printed to the ledger. Updated block-by-block.</p>
        </div>

        <div className="stats">
          {stats.map((s) => (
            <div className="stat" key={s.k}>
              <div className="k">{s.k}</div>
              <div className="v">{s.v}</div>
              <div className="d">{s.d}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 48, marginBottom: 12 }}>
          <span className="bracket">Recent buybacks</span>
          <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>
            <span style={{ color: "var(--live)" }}>●</span> LIVE
          </span>
        </div>

        <div className="ledger">
          <div className="ledger-head">
            <span>ID</span><span>Time</span><span>Tokens bought</span><span>USD routed</span><span>Status</span>
          </div>
          {rows.map((r) => (
            <div className="ledger-row" key={r.id}>
              <span style={{ color: "var(--text-2)" }}>{r.id}</span>
              <span style={{ color: "var(--text-2)" }}>{r.time}</span>
              <span className="tnum">{fmtNum(r.tokens)} {t.ticker}</span>
              <span className="tnum amt">{fmtUSD(r.amt)}</span>
              <span><span className="status-pill"><span className="d"></span>BURN</span></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- ROADMAP ----------
function Roadmap({ t }) {
  const phases = [
    { n: "Phase 01", title: "Press start", done: true,
      items: ["Deployed on Solana", "Buyback contract audited", "LP locked · 24 months", "10k holders"] },
    { n: "Phase 02", title: "Distribute", done: true,
      items: ["3 CEX listings", "Ledger explorer v1", "Auto-burn live", "Community grants"] },
    { n: "Phase 03", title: "Print loop", done: false,
      items: ["Cross-chain buybacks", "On-chain receipts API", "Partner integrations", "Dashboard v2"] },
    { n: "Phase 04", title: "Endgame", done: false,
      items: ["Buyback-as-a-service SDK", "Public BB index", "Sub-second settlement", "Float approaches zero"] },
  ];
  return (
    <section id="roadmap" className="wrap">
      <div className="container">
        <div className="section-head">
          <span className="bracket">Roadmap</span>
          <h2>From fee loop to infrastructure.</h2>
          <p>${t.ticker} starts as a memecoin with a working mechanism. The goal is to make that mechanism the default.</p>
        </div>
        <div className="roadmap">
          {phases.map((p) => (
            <div key={p.n} className={"phase" + (p.done ? " done" : "")}>
              <div className="phase-h">{p.n} · {p.done ? "shipped" : "in flight"}</div>
              <div className="phase-title">{p.title}</div>
              <ul>{p.items.map((it) => <li key={it}>{it}</li>)}</ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- BUY ----------
function Buy({ t }) {
  const [copied, setCopied] = useState(false);
  const addr = "BrRRfeeP1nTrXm0n3yP0w3rM1ntF33dL00pS0l";
  const copy = () => { navigator.clipboard?.writeText(addr); setCopied(true); setTimeout(() => setCopied(false), 1500); };
  return (
    <section id="buy" className="wrap">
      <div className="container">
        <div className="section-head">
          <span className="bracket">Buy</span>
          <h2>Four steps. No permission slip.</h2>
        </div>
        <div className="buy-grid">
          <div>
            {[
              ["Get a Solana wallet", "Phantom, Solflare, Backpack — any SPL-compatible wallet works. Fund it with SOL from your exchange of choice."],
              [`Copy the $${t.ticker} contract`, "Use the official contract address on the right. Always verify the first and last 6 characters — impostors are inevitable."],
              ["Swap on Jupiter or Raydium", "Paste the contract into your DEX of choice. Set slippage to 2%. Confirm. Your trade itself contributes to the next buyback."],
              ["Hold. Watch the ledger.", `Every ${t.cycleMin} minutes you'll see a new entry. That's your fee — coming home as a buyback.`],
            ].map(([h, d], i) => (
              <div className="buy-step" key={h}>
                <div className="n">0{i + 1}</div>
                <div><h4>{h}</h4><p>{d}</p></div>
              </div>
            ))}
          </div>
          <div className="addr-box">
            <div>
              <div className="lbl">Contract · Solana</div>
              <div className="addr-row">
                <code>{addr}</code>
                <button className="copy-btn" onClick={copy}>{copied ? "✓ COPIED" : "COPY"}</button>
              </div>
            </div>
            <div className="addr-divider"></div>
            <div>
              <div className="minirow"><span>Chain</span><b>Solana · SPL</b></div>
              <div className="minirow"><span>Supply</span><b className="tnum">1,000,000,000</b></div>
              <div className="minirow"><span>Fee</span><b>{t.feePercent}%</b></div>
              <div className="minirow"><span>Buyback split</span><b>{t.buybackSplit}%</b></div>
              <div className="minirow"><span>Cycle</span><b>{t.cycleMin} min</b></div>
              <div className="minirow"><span>LP lock</span><b>24 months</b></div>
              <div className="minirow"><span>Taxes</span><b>Immutable</b></div>
            </div>
            <div className="addr-divider"></div>
            <div style={{ display: "flex", gap: 8 }}>
              <a className="btn" style={{ flex: 1, justifyContent: "center" }} href="#">Jupiter ↗</a>
              <a className="btn btn-primary" style={{ flex: 1, justifyContent: "center" }} href="#">Raydium ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  const qs = [
    [`Is $${t.ticker} a memecoin or a utility token?`, `Both. The meme is the mechanism. $${t.ticker} is transparently a memecoin, but it carries a working buyback loop that behaves more like protocol infrastructure.`],
    ["Where does the fee go if it's not buying back?", `The ${100 - t.buybackSplit}% that doesn't go to buybacks refills the liquidity pool. Nothing is sent to a team wallet. There is no team wallet.`],
    ["Can the buyback be paused or rug-pulled?", "No. The buyback logic lives inside the token itself, not a separate admin-controlled contract. No pause, no upgrade proxy, no admin key."],
    ["How often does the buyback execute?", `Every ${t.cycleMin} minutes. Each execution prints a receipt to the on-chain ledger, mirrored above.`],
    ["What happens to the bought tokens?", "They're sent to a provably-unspendable address. Float only shrinks."],
    ["Who pays for the buyback tx gas?", "The buyback tx is paid from the fee vault itself — never from users. On Solana, the cost is under a cent per execution."],
  ];
  return (
    <section id="faq" className="wrap">
      <div className="container-sm">
        <div className="section-head">
          <span className="bracket">FAQ</span>
          <h2>Questions, on the record.</h2>
        </div>
        <div className="faq">
          {qs.map(([q, a], i) => (
            <div key={q} className={"q" + (open === i ? " open" : "")} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q-h">
                <h4>{q}</h4>
                <div className="q-toggle">+</div>
              </div>
              <div className="q-a">{a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CTA BAND ----------
function CTABand({ t }) {
  return (
    <section className="wrap" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="cta-band">
          <span className="bracket">Begin</span>
          <h2>Hold. Burn. Repeat.</h2>
          <p>Buy ${t.ticker} once. Every trade after that — yours or anyone else's — shrinks the remaining float.</p>
          <a className="btn btn-primary" href="#buy">Buy ${t.ticker}</a>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer({ t }) {
  return (
    <footer>
      <div className="container">
        <div className="ft-rows">
          <div className="ft-col">
            <b>{t.ticker}</b>
            <a href="#how">How it works</a>
            <a href="#ledger">Ledger</a>
            <a href="#roadmap">Roadmap</a>
            <a href="#buy">Buy</a>
          </div>
          <div className="ft-col">
            <b>Resources</b>
            <a href="#">Whitepaper</a>
            <a href="#">Audit</a>
            <a href="#">Contract</a>
            <a href="#">Explorer</a>
          </div>
          <div className="ft-col">
            <b>Community</b>
            <a href="#">Twitter</a>
            <a href="#">Telegram</a>
            <a href="#">Discord</a>
            <a href="#">Farcaster</a>
          </div>
          <div className="ft-col" style={{ maxWidth: 300 }}>
            <b>Status</b>
            <span style={{ color: "var(--live)" }}>● Buyback engine nominal</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>BLOCK 8,421,904</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--text-3)" }}>UPTIME 100.00%</span>
          </div>
        </div>
        <div className="ft-bottom">
          <div>© {t.ticker} · 2026</div>
          <div className="chain">Solana · Mainnet</div>
        </div>
      </div>
    </footer>
  );
}

// ---------- APP ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Nav t={t} />
      <Hero t={t} />
      <Mechanism t={t} />
      <Countdown t={t} />
      <StatsAndLedger t={t} />
      <Roadmap t={t} />
      <Buy t={t} />
      <FAQ t={t} />
      <CTABand t={t} />
      <Footer t={t} />

      <TweaksPanel>
        <TweakSection label="Token" />
        <TweakText label="Ticker" value={t.ticker} onChange={(v) => setTweak("ticker", v.toUpperCase().slice(0, 6))} />
        <TweakSlider label="Trade fee" value={t.feePercent} min={1} max={10} step={0.5} unit="%"
          onChange={(v) => setTweak("feePercent", v)} />
        <TweakSlider label="→ Buyback split" value={t.buybackSplit} min={30} max={100} step={5} unit="%"
          onChange={(v) => setTweak("buybackSplit", v)} />
        <TweakSlider label="Cycle" value={t.cycleMin} min={5} max={120} step={5} unit=" min"
          onChange={(v) => setTweak("cycleMin", v)} />

        <TweakSection label="Motion" />
        <TweakToggle label="Live counters" value={t.liveTicker}
          onChange={(v) => setTweak("liveTicker", v)} />
      </TweaksPanel>
    </>
  );
}

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