// Telegram "Need Hands-On Help" section with chat mockup
function TelegramCTA() {
  return (
    <section className="relative py-20 md:py-24">
      <div className="max-w-[1240px] mx-auto px-5 lg:px-8">
        <div
          className="relative grad-border rounded-3xl overflow-hidden p-8 md:p-12"
          style={{ background: "radial-gradient(ellipse at 30% 20%, rgba(38,165,228,0.08), transparent 60%), linear-gradient(180deg, #101521, #0C0E15)" }}
        >
          <div className="grid lg:grid-cols-2 gap-10 md:gap-14 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-tg/25 bg-tg/10 text-tg text-[12px] font-medium mb-6">
                <Icon.Telegram className="w-3.5 h-3.5" /> Live support
              </div>
              <h2 className="font-display text-3xl md:text-[42px] font-semibold tracking-tight leading-[1.1]">
                Some things are easier with an expert.
              </h2>
              <p className="mt-5 text-[16px] text-fg-muted leading-relaxed max-w-[540px]">
                Whether you need help with verification, account setup, or access from a restricted country — our team of Stake specialists is available 24/7. No bots, no waiting, just real experts.
              </p>

              <div className="mt-8 flex flex-col sm:flex-row sm:items-center gap-4">
                <a
                  href={SW_DATA.TG_LINK} target="_blank" rel="noopener"
                  className="group inline-flex items-center gap-2.5 px-5 py-3.5 rounded-xl font-semibold text-[14.5px] text-white transition-all"
                  style={{
                    background: "linear-gradient(135deg, #2AB0F1, #1F8BC7)",
                    boxShadow: "0 10px 40px -10px rgba(38,165,228,0.6)"
                  }}
                >
                  <Icon.Telegram className="w-5 h-5" />
                  Chat With an Expert on Telegram
                  <Icon.ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5" />
                </a>
                <div className="flex items-center gap-2 text-[13px] text-fg-muted">
                  <span className="live-dot" />
                  Average response time: under 5 minutes
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-ink-600/70 grid grid-cols-3 gap-4 max-w-[460px]">
                {[
                  { k: "24/7", v: "Live team" },
                  { k: "100%", v: "Human replies" },
                  { k: "Free", v: "No obligation" },
                ].map(s => (
                  <div key={s.k}>
                    <div className="font-display text-[20px] font-semibold text-fg">{s.k}</div>
                    <div className="text-[12px] text-fg-dim mt-0.5">{s.v}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Chat mockup */}
            <div className="relative">
              <div className="rounded-3xl border border-ink-600 bg-ink-900/90 overflow-hidden shadow-2xl">
                {/* Chat header */}
                <div className="flex items-center gap-3 px-5 py-3.5 border-b border-ink-600 bg-ink-800/80">
                  <div className="w-10 h-10 rounded-full grid place-items-center text-white font-semibold" style={{ background: "linear-gradient(135deg, #26A5E4, #1F8BC7)" }}>
                    <Icon.Telegram className="w-5 h-5" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-[14px] font-semibold text-fg">StakeWorldwide Support</div>
                    <div className="flex items-center gap-1.5 text-[11.5px] text-fg-dim">
                      <span className="w-1.5 h-1.5 rounded-full bg-teal" /> online · typically replies in 5 min
                    </div>
                  </div>
                </div>

                <div className="p-5 space-y-3 min-h-[320px]" style={{ background: "repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0, rgba(255,255,255,0.015) 8px, transparent 8px, transparent 16px)" }}>
                  <div className="flex justify-end">
                    <div className="bubble-out text-white text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[78%] leading-relaxed">
                      Hi — I'm in Australia, can you help me get set up on Stake?
                    </div>
                  </div>
                  <div className="flex justify-start">
                    <div className="bubble-in text-fg text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[82%] leading-relaxed">
                      Of course 👋 I'll walk you through the whole process. Takes about 10 minutes.
                    </div>
                  </div>
                  <div className="flex justify-start">
                    <div className="bubble-in text-fg text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[82%] leading-relaxed">
                      First — are you planning to deposit in BTC, ETH, or a stablecoin?
                    </div>
                  </div>
                  <div className="flex justify-end">
                    <div className="bubble-out text-white text-[13.5px] px-4 py-2.5 rounded-2xl max-w-[78%] leading-relaxed">
                      USDT probably. Lower fees.
                    </div>
                  </div>
                  <div className="flex justify-start">
                    <div className="bubble-in flex items-center gap-1.5 px-4 py-3 rounded-2xl">
                      <span className="w-1.5 h-1.5 rounded-full bg-fg-dim animate-pulse" />
                      <span className="w-1.5 h-1.5 rounded-full bg-fg-dim animate-pulse" style={{ animationDelay: ".2s" }} />
                      <span className="w-1.5 h-1.5 rounded-full bg-fg-dim animate-pulse" style={{ animationDelay: ".4s" }} />
                    </div>
                  </div>
                </div>

                <div className="px-5 py-3 border-t border-ink-600 flex items-center gap-3 bg-ink-800/40">
                  <div className="flex-1 text-[13px] text-fg-dim">Message StakeWorldwide Support…</div>
                  <Icon.ArrowRight className="w-4 h-4 text-tg" />
                </div>
              </div>

              {/* Floating info cards */}
              <div className="hidden md:flex absolute -left-6 top-8 items-center gap-2.5 rounded-xl border border-ink-600 bg-ink-900 px-3.5 py-2.5 shadow-xl">
                <div className="w-8 h-8 rounded-lg bg-teal/15 text-teal grid place-items-center"><Icon.ShieldCheck className="w-4 h-4" /></div>
                <div>
                  <div className="text-[11px] text-fg-dim">End-to-end</div>
                  <div className="text-[12.5px] font-semibold text-fg">Encrypted chat</div>
                </div>
              </div>
              <div className="hidden md:flex absolute -right-4 bottom-10 items-center gap-2.5 rounded-xl border border-ink-600 bg-ink-900 px-3.5 py-2.5 shadow-xl">
                <div className="w-8 h-8 rounded-lg bg-tg/15 text-tg grid place-items-center font-mono text-[11px]">4m</div>
                <div>
                  <div className="text-[11px] text-fg-dim">Avg reply</div>
                  <div className="text-[12.5px] font-semibold text-fg">This week</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TelegramCTA = TelegramCTA;