/* ============================================================
   ChadCoin — landing sections
   ============================================================ */

/* ---------- PRICE TICKER ---------- */
function PriceTicker({ btcPrice, solPrice }) {
  if (!btcPrice || !solPrice) return null;
  return (
    <div style={{ display:"flex", gap:10, flexWrap:"wrap", marginTop:20, marginBottom:4 }}>
      <span style={{ display:"flex", alignItems:"center", gap:7, fontSize:13, color:"var(--muted)",
                     background:"var(--bg-2)", border:"1px solid var(--line)", borderRadius:20, padding:"5px 13px" }}>
        <BtcCoin size={15}/>
        <span>BTC</span>
        <b style={{ color:"var(--ink)", fontVariantNumeric:"tabular-nums" }}>${fmt(btcPrice,0)}</b>
      </span>
      <span style={{ display:"flex", alignItems:"center", gap:7, fontSize:13, color:"var(--muted)",
                     background:"var(--bg-2)", border:"1px solid var(--line)", borderRadius:20, padding:"5px 13px" }}>
        <SolMark size={15}/>
        <span>SOL</span>
        <b style={{ color:"var(--ink)", fontVariantNumeric:"tabular-nums" }}>${fmt(solPrice,2)}</b>
      </span>
    </div>
  );
}

function useScrolled(threshold = 30) {
  const [s, setS] = useState(false);
  useEffect(() => {
    const f = () => setS(window.scrollY > threshold);
    f(); window.addEventListener("scroll", f, { passive:true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return s;
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold:0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- NAV ---------- */
function Nav({ connected, wallet, address, onConnect, onAccount }) {
  const scrolled = useScrolled();
  return (
    <nav className={"nav"+(scrolled?" scrolled":"")}>
      <div className="wrap nav-inner">
        <a href="#top" className="brand"><ChdLogo size={32} radius={9}/> ChadCoin</a>
        <div className="nav-links">
          <a href="#comment">Comment ça marche</a>
          <a href="#avantages">Avantages</a>
          <a href="#tokenomics">Tokenomics</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-right">
          {connected ? (
            <button className="addr-chip" onClick={onAccount}>
              <WalletTile w={wallet} size={22}/>
              <span className="mono">{shortAddr(address)}</span>
              <span className="addr-dot"/>
            </button>
          ) : (
            <button className="btn btn-primary" onClick={onConnect}><Ic.wallet/> Connecter le wallet</button>
          )}
        </div>
      </div>
    </nav>
  );
}

/* ---------- HERO ---------- */
function Hero({ connected, solBalance, chdBalance, solPrice, btcPrice, swapLoading, onConnect, onSwap, onBurn }) {
  return (
    <header className="hero" id="top">
      <div className="hero-grid-bg"/>
      <div className="hero-glow"/>
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="eyebrow"><span style={{width:7,height:7,borderRadius:"50%",background:"var(--success)",boxShadow:"0 0 8px var(--success)"}}/> Live sur Solana Mainnet</span>
          <h1 className="h-display">
            Le <span className="text-btc">Bitcoin</span> dans ton wallet <span className="italic-em">Solana.</span>
          </h1>
          <p className="lead">
            ChadCoin (CHD) est adossé 1:1 au Bitcoin. Chaque CHD représente exactement
            <b style={{color:"var(--ink)"}}> 1 satoshi</b> — vérifiable on-chain, sans banque, sans KYC.
          </p>
          <div className="hero-ctas">
            <a href="#swap" className="btn btn-primary btn-lg"><Ic.bolt/> Acheter des CHD</a>
            <a href="#comment" className="btn btn-ghost btn-lg">Comment ça marche</a>
          </div>
          <PriceTicker btcPrice={btcPrice} solPrice={solPrice}/>
          <div className="hero-trust">
            <span className="ht"><Ic.check style={{width:15,height:15,color:"var(--btc)"}}/> <b>1 CHD = 1 satoshi</b></span>
            <span className="ht"><Ic.check style={{width:15,height:15,color:"var(--btc)"}}/> <b>100 % collatéralisé</b></span>
            <span className="ht"><Ic.check style={{width:15,height:15,color:"var(--btc)"}}/> <b>Sans inscription</b></span>
          </div>
        </div>
        <div id="swap" style={{ scrollMarginTop:90 }}>
          <SwapCard connected={connected} solBalance={solBalance} chdBalance={chdBalance}
            solPrice={solPrice} btcPrice={btcPrice} swapLoading={swapLoading}
            onConnect={onConnect} onSwap={onSwap} onBurn={onBurn}/>
        </div>
      </div>
    </header>
  );
}

/* ---------- STATS ---------- */
function StatsStrip({ chainStats }) {
  const stats = [
    { v: chainStats?.supply != null ? fmt(chainStats.supply, 0) : "—", l:"CHD en circulation" },
    { v:"100 %", l:"tBTC en réserve" },
    { v:"1:1", l:"Ratio Bitcoin" },
    { v:"< 1 s", l:"Temps de règlement" },
  ];
  return (
    <div className="wrap"><div className="section-tight"><div className="stats reveal">
      {stats.map((s,i) => (
        <div className="stat" key={i}>
          <div className="stat-v">{s.v}</div>
          <div className="stat-l">{s.l}</div>
        </div>
      ))}
    </div></div></div>
  );
}

/* ---------- MARQUEE ---------- */
function Marquee() {
  const items = ["1 CHD = 1 satoshi BTC","Smart contract audité","Peg garanti par le protocole","Swap instantané via Jupiter","Supply max = 21M BTC","Brûlable contre du tBTC","Sans KYC, sans banque"];
  const row = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((t,i) => <span className="marquee-item" key={i}><span className="d">◆</span> {t}</span>)}
      </div>
    </div>
  );
}

/* ---------- STEPS ---------- */
function Steps() {
  return (
    <section className="section" id="comment">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow neutral">Protocole</span>
          <h2 className="h-sec" style={{marginTop:16}}>Comment ça marche</h2>
          <p className="lead">Un mécanisme simple et transparent — tout est vérifiable on-chain, à tout moment.</p>
        </div>
        <div className="steps">
          {STEPS.map((s,i) => (
            <div className="step card reveal" key={i} style={{ transitionDelay:`${i*70}ms` }}>
              <div className="step-num">{s.n}</div>
              {i < STEPS.length-1 && <div className="step-line hide-mobile"><Ic.arrow/></div>}
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FEATURES ---------- */
function Features() {
  return (
    <section className="section" id="avantages" style={{ background:"var(--bg-2)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Avantages</span>
          <h2 className="h-sec" style={{marginTop:16}}>Pourquoi ChadCoin ?</h2>
          <p className="lead">Le moyen le plus simple et le plus sûr de détenir du Bitcoin sur Solana.</p>
        </div>
        <div className="features">
          {FEATURES.map((f,i) => {
            const Icon = Ic[f.ic];
            return (
              <div className="feature card reveal" key={i} style={{ transitionDelay:`${(i%3)*70}ms` }}>
                <div className="feature-ic"><Icon/></div>
                <h3>{f.t}</h3>
                <p>{f.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------- REASSURANCE BAND ---------- */
function Band({ connected, onConnect }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="band reveal">
          <div>
            <span className="eyebrow">Acquérir</span>
            <h2 className="h-sec" style={{ marginTop:16, fontSize:"clamp(26px,3.4vw,40px)" }}>
              Tes premiers CHD en moins d'une minute
            </h2>
            <p className="lead" style={{ marginTop:14 }}>
              Connecte ton wallet, échange du SOL contre des CHD, et commence à accumuler des satoshis Bitcoin sur Solana. Tout se passe dans ton wallet.
            </p>
            <div style={{ marginTop:26, display:"flex", gap:12, flexWrap:"wrap" }}>
              <a href="#swap" className="btn btn-primary btn-lg"><Ic.bolt/> Acheter des CHD</a>
            </div>
          </div>
          <div className="checks">
            {CHECKS.map((c,i) => (
              <div className="check" key={i}><span className="check-ic"><Ic.check/></span> {c}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- TOKENOMICS ---------- */
function Tokenomics({ chainStats, prices }) {
  const chdUsd   = prices?.btc > 0 ? prices.btc / 1e8 : CHD_USD;
  const supply   = chainStats?.supply;
  const vaultBtc = chainStats?.vault;
  const vaultSats= chainStats?.vaultSats;

  const liveStats = [
    {
      v: supply != null ? fmt(supply, 0) + " CHD" : "—",
      l: "En circulation • live",
      live: true,
    },
    {
      v: vaultBtc != null ? vaultBtc.toFixed(6) + " tBTC" : "—",
      l: "Dans le vault • live",
      live: true,
    },
    {
      v: supply && vaultSats ? Math.round(vaultSats / supply * 100) + " %" : "100 %",
      l: "Collatéral tBTC",
      live: !!supply,
    },
    {
      v: prices?.btc ? "$" + (prices.btc / 1e8).toFixed(6) : "—",
      l: "Prix 1 CHD • live",
      live: true,
    },
  ];

  return (
    <section className="section" id="tokenomics" style={{ background:"var(--bg-2)", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow neutral">Tokenomics</span>
          <h2 className="h-sec" style={{marginTop:16}}>Transparent par design</h2>
          <p className="lead">Toutes les données sont récupérées en temps réel depuis la blockchain Solana.</p>
        </div>
        <div className="tk-grid">
          {liveStats.map((t,i) => (
            <div className="tk card reveal" key={i} style={{ transitionDelay:`${(i%4)*60}ms`, position:"relative" }}>
              {t.live && (
                <span style={{ position:"absolute", top:12, right:12, width:7, height:7,
                               borderRadius:"50%", background:"var(--success)",
                               boxShadow:"0 0 6px var(--success)" }}/>
              )}
              <div className="tk-v">{t.v}</div>
              <div className="tk-l">{t.l}</div>
            </div>
          ))}
        </div>
        <div className="onchain reveal">
          {CHAIN_LINKS.map((l,i) => (
            <a className="chain-link" key={i} href={l.href} target="_blank" rel="noopener">{l.t} <Ic.ext className="ext"/></a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head reveal" style={{ textAlign:"center", marginLeft:"auto", marginRight:"auto" }}>
          <span className="eyebrow neutral">FAQ</span>
          <h2 className="h-sec" style={{marginTop:16}}>Questions fréquentes</h2>
        </div>
        <div className="faq">
          {FAQS.map((f,i) => (
            <div className={"faq-item"+(open===i?" open":"")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open===i?-1:i)}>
                {f.q} <span className="faq-plus"><Ic.plus/></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open===i ? 260 : 0 }}>
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FINAL CTA ---------- */
function Final() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="final reveal">
          <div className="final-glow"/>
          <span className="eyebrow" style={{ position:"relative" }}>Commencer</span>
          <h2 className="h-sec" style={{ margin:"18px auto 16px", maxWidth:680 }}>
            Commence à accumuler des satoshis aujourd'hui
          </h2>
          <p className="lead" style={{ margin:"0 auto 30px", textAlign:"center" }}>
            Rejoins les premiers holders de ChadCoin et accumule du Bitcoin sur Solana.
          </p>
          <div style={{ position:"relative", display:"flex", gap:12, justifyContent:"center", flexWrap:"wrap" }}>
            <a href="#swap" className="btn btn-primary btn-lg"><Ic.bolt/> Acheter des CHD maintenant</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div style={{ maxWidth:300 }}>
            <a href="#top" className="brand"><ChdLogo size={32} radius={9}/> ChadCoin</a>
            <p style={{ color:"var(--faint)", fontSize:14, marginTop:14, lineHeight:1.6 }}>
              Le Bitcoin, accessible à tous sur Solana. 1 CHD = 1 satoshi, garanti par le code.
            </p>
          </div>
          <div className="footer-links">
            <div className="footer-col">
              <h4>Produit</h4>
              <a href="#swap">Acheter des CHD</a>
              <a href="#comment">Comment ça marche</a>
              <a href="#avantages">Avantages</a>
            </div>
            <div className="footer-col">
              <h4>On-chain</h4>
              <a href="https://solscan.io/token/CktvyfZ4V9fyRzrFQfmnNX4UTpT4PDnrDZXNXsBsiQV9" target="_blank" rel="noopener">Solscan</a>
              <a href="https://dexscreener.com/solana/6x48wPfsLrZPF7q9hi2XoqBnoJjgoyXERGgoBGBGq2CZ" target="_blank" rel="noopener">DEXScreener</a>
              <a href="https://birdeye.so/token/CktvyfZ4V9fyRzrFQfmnNX4UTpT4PDnrDZXNXsBsiQV9" target="_blank" rel="noopener">Birdeye</a>
            </div>
            <div className="footer-col">
              <h4>Ressources</h4>
              <a href="#faq">FAQ</a>
              <a href="https://meteora.ag/dammv2/6x48wPfsLrZPF7q9hi2XoqBnoJjgoyXERGgoBGBGq2CZ" target="_blank" rel="noopener">Pool de liquidité</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ChadCoin. Non-custodial. Décentralisé sur Solana.</span>
          <span className="mono" style={{ fontSize:12 }}>CHD · Cktv…iQV9</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, StatsStrip, Marquee, Steps, Features, Band, Tokenomics, Faq, Final, Footer, PriceTicker, useReveal });