// Reusable article page component. Call renderArticle(POST_DATA, BODY_SECTIONS).
function Breadcrumb({ items }) {
  return (
    <nav className="flex items-center gap-2 text-[12.5px] text-fg-dim flex-wrap">
      {items.map((b, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="text-fg-dim/50">/</span>}
          {i < items.length - 1
            ? <a href={b.href} className="hover:text-teal transition">{b.label}</a>
            : <span className="text-fg-muted">{b.label}</span>}
        </React.Fragment>
      ))}
    </nav>
  );
}

function PostHeader({ post }) {
  return (
    <header className="max-w-[760px] mx-auto">
      <Breadcrumb items={post.breadcrumb} />
      <div className="mt-5">
        <span className="inline-block text-[10.5px] uppercase tracking-[0.08em] font-semibold px-2 py-1 rounded border bg-teal/10 text-teal border-teal/20">
          {post.category}
        </span>
      </div>
      <h1 className="mt-4 font-display text-[34px] md:text-[46px] font-semibold tracking-tight leading-[1.1]">{post.title}</h1>
      <p className="mt-5 text-[17px] text-fg-muted leading-relaxed max-w-[640px]">{post.excerpt}</p>
      <div className="mt-8 flex flex-wrap items-center gap-5 pt-6 border-t border-ink-600/70">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full grid place-items-center font-semibold text-[12px] text-ink-950" style={{background:"linear-gradient(135deg,#B8E8D2,#7FD7BF)"}}>
            {post.author.initials}
          </div>
          <div>
            <div className="text-[13.5px] font-semibold text-fg">{post.author.name}</div>
            <div className="text-[11.5px] text-fg-dim">{post.author.role}</div>
          </div>
        </div>
        <div className="h-8 w-px bg-ink-600"/>
        <div className="flex items-center gap-2 text-[12.5px] text-fg-muted"><Icon.Calendar className="w-3.5 h-3.5"/> Updated {post.updated}</div>
        <div className="flex items-center gap-2 text-[12.5px] text-fg-muted"><Icon.Clock className="w-3.5 h-3.5"/> {post.readTime}</div>
      </div>
    </header>
  );
}

function InlineTelegram({ data }) {
  const TG = (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet";
  if (data.variant === "card") {
    return (
      <div className="my-8 rounded-2xl overflow-hidden border border-tg/25"
           style={{background:"radial-gradient(ellipse at 0% 0%, rgba(38,165,228,.14), transparent 65%), linear-gradient(180deg,#101521,#0C0E15)"}}>
        <div className="flex flex-col sm:flex-row sm:items-center gap-4 p-5 md:p-6">
          <div className="w-12 h-12 rounded-2xl grid place-items-center text-white shrink-0" style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)",boxShadow:"0 10px 30px -10px rgba(38,165,228,.5)"}}>
            <Icon.Telegram className="w-5 h-5"/>
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 text-[11px] text-tg font-mono uppercase tracking-widest mb-1">
              <span className="live-dot" style={{background:"#26A5E4"}}/> Live support
            </div>
            <div className="font-display text-[17px] font-semibold text-fg leading-snug">{data.title}</div>
            <div className="mt-1.5 text-[14px] text-fg-muted leading-relaxed">{data.text}</div>
          </div>
          <a href={TG} target="_blank" rel="noopener"
             className="shrink-0 inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-[13.5px] text-white transition"
             style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)"}}>
            <Icon.Telegram className="w-4 h-4"/> {data.cta}
          </a>
        </div>
      </div>
    );
  }
  return (
    <a href={TG} target="_blank" rel="noopener" className="group my-7 flex items-center gap-3 rounded-xl border border-tg/30 bg-tg/5 hover:bg-tg/10 px-4 py-3 transition">
      <span className="w-8 h-8 rounded-lg grid place-items-center text-white shrink-0" style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)"}}>
        <Icon.Telegram className="w-4 h-4"/>
      </span>
      <span className="flex-1 text-[14px] text-fg leading-snug">{data.text}</span>
      <span className="hidden sm:inline-flex items-center gap-1.5 text-[13px] font-semibold text-tg">{data.cta} <Icon.ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5"/></span>
    </a>
  );
}

function renderSection(s, i) {
  switch (s.type) {
    case "h2": return <h2 key={i} id={s.id} className="font-display text-[26px] md:text-[30px] font-semibold tracking-tight mt-12 mb-4 scroll-mt-24">{s.text}</h2>;
    case "h3": return <h3 key={i} id={s.id} className="font-display text-[19px] font-semibold mt-8 mb-3 scroll-mt-24">{s.text}</h3>;
    case "p":  return <p key={i} className="text-[16px] text-fg-muted leading-[1.75] mb-4" dangerouslySetInnerHTML={{__html:s.text}}/>;
    case "list": return (
      <ul key={i} className="space-y-2.5 my-5 list-none">
        {s.items.map((it,j)=>(
          <li key={j} className="flex gap-3 text-[15.5px] text-fg-muted leading-relaxed">
            <span className="mt-2 w-1.5 h-1.5 rounded-full bg-teal shrink-0"/>
            <span dangerouslySetInnerHTML={{__html:it}}/>
          </li>
        ))}
      </ul>
    );
    case "callout": return (
      <div key={i} className="my-6 rounded-2xl border border-teal/25 p-5 flex gap-4" style={{background:"linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.02))"}}>
        <div className="w-9 h-9 rounded-lg bg-teal/15 text-teal border border-teal/30 grid place-items-center shrink-0"><Icon.Sparkles className="w-4 h-4"/></div>
        <div>
          <div className="text-[13px] font-semibold text-teal uppercase tracking-wider mb-1">{s.title}</div>
          <div className="text-[14.5px] text-fg-muted leading-relaxed" dangerouslySetInnerHTML={{__html:s.text}}/>
        </div>
      </div>
    );
    case "quote": return <blockquote key={i} className="my-8 pl-6 border-l-2 border-teal/50 font-display text-[20px] text-fg italic leading-snug">{s.text}</blockquote>;
    case "table": return (
      <div key={i} className="my-7 overflow-x-auto rounded-xl border border-ink-600">
        <table className="w-full text-[13.5px] border-collapse">
          <thead>
            <tr className="bg-ink-800">{s.headers.map((h,j)=><th key={j} className="text-left px-4 py-3 text-[12px] uppercase tracking-wider font-semibold text-fg border-b border-ink-600">{h}</th>)}</tr>
          </thead>
          <tbody>
            {s.rows.map((r,ri)=>(
              <tr key={ri} className="border-b border-ink-700 last:border-0">
                {r.map((c,ci)=><td key={ci} className="px-4 py-3 text-fg-muted" dangerouslySetInnerHTML={{__html:c}}/>)}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
    case "tg-inline": return <InlineTelegram key={i} data={s}/>;
    default: return null;
  }
}

function TOC({ sections }) {
  const items = sections.filter(s=>s.type==="h2");
  const [active,setActive] = React.useState(items[0]?.id);
  React.useEffect(()=>{
    const obs = items.map(it=>{
      const el = document.getElementById(it.id);
      if(!el) return null;
      const io = new IntersectionObserver(([e])=>{ if(e.isIntersecting) setActive(it.id); },{rootMargin:"-30% 0px -60% 0px"});
      io.observe(el); return io;
    });
    return ()=>obs.forEach(o=>o&&o.disconnect());
  },[]);
  const TG = (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet";
  return (
    <aside className="hidden lg:block sticky top-24 self-start">
      <div className="text-[11px] uppercase tracking-[0.18em] text-fg-dim font-mono mb-4">On this page</div>
      <ul className="space-y-1 border-l border-ink-600">
        {items.map(it=>(
          <li key={it.id}>
            <a href={"#"+it.id} className={`block pl-4 -ml-px py-1.5 text-[13px] border-l transition ${active===it.id?"text-teal border-teal":"text-fg-muted border-transparent hover:text-fg"}`}>{it.text}</a>
          </li>
        ))}
      </ul>
      <div className="mt-8 rounded-xl border border-ink-600 bg-ink-800/60 p-4">
        <div className="flex items-center gap-2 text-[11.5px] text-fg-dim mb-2"><span className="live-dot"/> Experts online</div>
        <div className="text-[13.5px] text-fg mb-3">Stuck on this guide?</div>
        <a href={TG} target="_blank" rel="noopener" className="inline-flex items-center gap-1.5 text-[12.5px] text-tg hover:underline">
          <Icon.Telegram className="w-3.5 h-3.5"/> Ask on Telegram →
        </a>
      </div>
    </aside>
  );
}

function FinalTelegramCallout() {
  const TG = (window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet";
  return (
    <div className="mt-16 rounded-3xl grad-border p-8 md:p-10" style={{background:"radial-gradient(ellipse at 20% 20%, rgba(38,165,228,.10), transparent 60%), linear-gradient(180deg,#101521,#0C0E15)"}}>
      <div className="flex flex-col md:flex-row md:items-center gap-6">
        <div className="w-14 h-14 rounded-2xl grid place-items-center text-white shrink-0" style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)"}}><Icon.Telegram className="w-6 h-6"/></div>
        <div className="flex-1">
          <div className="font-display text-[22px] font-semibold text-fg leading-tight">Still have questions about this guide?</div>
          <p className="mt-2 text-[14.5px] text-fg-muted leading-relaxed max-w-[540px]">Our team is live on Telegram 24/7. Real humans, average 5-minute replies, no bots.</p>
        </div>
        <a href={TG} target="_blank" rel="noopener" className="inline-flex items-center gap-2 px-5 py-3 rounded-xl font-semibold text-[14px] text-white transition" style={{background:"linear-gradient(135deg,#2AB0F1,#1F8BC7)",boxShadow:"0 10px 40px -10px rgba(38,165,228,.6)"}}>
          <Icon.Telegram className="w-4 h-4"/> Chat With an Expert <Icon.ArrowRight className="w-4 h-4"/>
        </a>
      </div>
    </div>
  );
}

function renderArticle(POST_DATA, BODY_SECTIONS) {
  function App() {
    return (
      <div>
        <Navbar/>
        <main className="pt-28 pb-20">
          <div className="max-w-[1240px] mx-auto px-5 lg:px-8"><PostHeader post={POST_DATA}/></div>
          <div className="max-w-[1240px] mx-auto px-5 lg:px-8 mt-14 grid lg:grid-cols-[220px_1fr] gap-12">
            <TOC sections={BODY_SECTIONS}/>
            <article className="max-w-[760px] min-w-0">
              {BODY_SECTIONS.map(renderSection)}
              <FinalTelegramCallout/>
            </article>
          </div>
        </main>
        <Footer/>
        <FloatingTelegram/>
      </div>
    );
  }
  ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
}

window.renderArticle = renderArticle;