// ai-chatbot-page.jsx — front-end marketing page for the AI Chatbot feature
const { useState: useStateAi, useEffect: useEffectAi, useRef: useRefAi } = React;

/* path when served normally, inlined blob/data URL when bundled standalone */
const aurl = (p) => (typeof window !== "undefined" && window.__resources && window.__resources[p]) || p;

/* ---- exact copy from kvb.gg/ai-chatbot.html ---- */
const AI_FEATURES = [
  ["assets/chatbox-feature-1.svg", "Real-Time Stream Listening", "The chatbot hears what the streamer says live and responds naturally"],
  ["assets/chatbox-feature-2.svg", "Humanlike, Stream-Aware Replies", "Tailored for live streaming, the AI adapts to your stream\u2019s tone and topic"],
  ["assets/chatbox-feature-3.svg", "Dynamic Chatter Rotation", "Auto-rotating chatter accounts keep your chat looking active, fresh, and full"],
  ["assets/chatbox-feature-4.svg", "Custom Delay Settings", "Fine-tune response timing to match your pacing\u2014choose faster replies for hype moments"],
];

const AI_EXPECT = [
  ["cpu", "Powered by Advanced AI", "Our system uses cutting-edge AI technology to deliver smart, engaging, and context-aware chat interactions for your Kick streams."],
  ["spark", "Adapts as You Stream", "The longer the AI is in your stream, the smarter it gets. It actively listens to your voice and context in real-time, learning your tone, topics, and viewer patterns."],
  ["chart", "Scales with Your Audience", "Whether you're a small creator with 20 viewers or hosting thousands during a feature event, the system scales effortlessly."],
];

const AI_PLAN_FEATURES = ["Real-Time AI Chat", "Dynamic Chatter Rotation", "Kick-Specific AI Model", "Weekly Updates", "24/7 Support"];

/* static, non-interactive sample conversation for the "in action" showcase */
const STATIC_CHAT = [
  { u: "ronnie_tv", t: "yo what time do you go live tomorrow?" },
  { ai: true, t: "We\u2019re live at 7PM EST tomorrow 🔥 set a reminder so you don\u2019t miss the ranked grind!" },
  { u: "kayslays", t: "first time here, this is sick" },
  { ai: true, t: "welcome in! 💚 glad you found us — drop a follow and stick around for the clutch plays" },
  { u: "biggdmoney", t: "GG that 1v3 was actually insane" },
];

function AiChatbotPage({ onNav }) {
  const [expectActive, setExpectActive] = useStateAi(0);
  return (
    <PageShell route="ai-chatbot" onNav={onNav}>
      {/* HERO */}
      <section className="section" style={{ padding: "20px 0 20px", position: "relative", overflow: "hidden" }}>
        <div className="wrap" style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
          <Reveal style={{ maxWidth: 820, margin: "0 auto" }}>
            <div className="chip" style={{ margin: "0 auto 24px" }}><Icon name="spark" size={14} /> Let Your Stream Talk Back. Smarter.</div>
            <h1 className="h-display" style={{ fontSize: "clamp(40px,6.4vw,82px)", margin: "0 auto" }}>Next-Gen AI Chatbot <span className="accent-text">for Kick Streams</span></h1>
            <p className="body-lg" style={{ maxWidth: 540, margin: "22px auto 0" }}>
              Enhance your livestreams with real-time, humanlike AI chat interaction.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 30, justifyContent: "center", flexWrap: "wrap" }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get Started <Icon name="arrow" size={17} /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => document.getElementById("ai-pricing")?.scrollIntoView({ behavior: "smooth", block: "start" })}>See pricing</button>
            </div>
            <div style={{ display: "flex", gap: 40, marginTop: 44, justifyContent: "center", flexWrap: "wrap" }}>
              {[["Real-time", "Live stream-aware replies"], ["Humanlike", "Sounds like a real fan"], ["$5", "Per 1,000 messages"]].map(([v, l]) => (
                <div key={l} style={{ textAlign: "center" }}>
                  <div style={{ fontSize: 30, fontWeight: 720, letterSpacing: "-0.03em", color: "var(--ink)" }}>{v}</div>
                  <div className="cap" style={{ marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* IN ACTION — static, non-interactive chat showcase */}
      <section className="section" style={{ padding: "30px 0 10px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 48, alignItems: "center" }} className="disc-grid">
            <Reveal>
              <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="play" size={13} fill /> See it in action</div>
              <h2 className="h1" style={{ fontSize: "clamp(28px,3.8vw,46px)", margin: "14px 0 16px" }}>Reads the room. <span className="accent-text">Talks like a regular.</span></h2>
              <p className="body-lg" style={{ maxWidth: 440 }}>
                KVB AI follows your stream in real time and jumps into chat with replies that sound like a genuine fan — welcoming newcomers, hyping big plays, and answering the questions you get every day.
              </p>
              <div className="stack" style={{ gap: 14, marginTop: 24 }}>
                {[["chat", "Greets and engages every viewer"], ["spark", "Matches your stream\u2019s tone and topic"], ["shield", "Stays clean, on-brand and on-message"]].map(([ic, t]) => (
                  <div key={t} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <span style={{ width: 34, height: 34, borderRadius: 10, flexShrink: 0, display: "grid", placeItems: "center", color: "var(--accent)", background: "color-mix(in oklch, var(--accent) 12%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 28%, transparent)" }}><Icon name={ic} size={17} /></span>
                    <span className="body" style={{ fontSize: 15, color: "var(--ink-2)" }}>{t}</span>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal delay={0.1}>
              <div className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: 18, boxShadow: "var(--shadow-float), 0 0 80px -32px var(--accent-glow)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "4px 6px 14px", borderBottom: "1px solid var(--glass-border-soft)" }}>
                  <div style={{ width: 40, height: 40, borderRadius: 12, background: "linear-gradient(150deg, var(--accent), var(--accent-deep))", display: "grid", placeItems: "center", color: "var(--accent-ink)", flexShrink: 0 }}>
                    <Icon name="spark" size={20} stroke={2.2} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 640, fontSize: 15 }}>KVB AI</div>
                    <div className="cap" style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5 }}><span className="dot" /> Live on stream · replying in real time</div>
                  </div>
                  <span className="status ok" style={{ flexShrink: 0 }}><span className="sd live-dot" /> Online</span>
                </div>
                <div style={{ padding: "16px 6px 6px", display: "flex", flexDirection: "column", gap: 12 }}>
                  {STATIC_CHAT.map((m, i) => m.ai ? (
                    <div key={i} style={{ display: "flex", gap: 9, alignItems: "flex-start", maxWidth: "90%" }}>
                      <div style={{ width: 26, height: 26, borderRadius: 8, flexShrink: 0, background: "linear-gradient(150deg, var(--accent), var(--accent-deep))", display: "grid", placeItems: "center", color: "var(--accent-ink)" }}><Icon name="spark" size={14} stroke={2.4} /></div>
                      <div style={{ background: "color-mix(in oklch, var(--accent) 14%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 26%, transparent)", borderRadius: "4px 14px 14px 14px", padding: "10px 14px", fontSize: 14.5, lineHeight: 1.45, color: "var(--ink)" }}>{m.t}</div>
                    </div>
                  ) : (
                    <div key={i} style={{ display: "flex", gap: 9, alignItems: "flex-start", alignSelf: "flex-end", maxWidth: "90%", flexDirection: "row-reverse" }}>
                      <div style={{ width: 26, height: 26, borderRadius: 8, flexShrink: 0, background: "var(--glass-fill-strong)", border: "1px solid var(--glass-border)", display: "grid", placeItems: "center", color: "var(--ink-2)", fontSize: 11.5, fontWeight: 600 }}>{m.u[0].toUpperCase()}</div>
                      <div>
                        <div className="cap" style={{ fontSize: 10.5, textAlign: "right", marginBottom: 3, marginRight: 4 }}>{m.u}</div>
                        <div style={{ background: "var(--glass-fill-strong)", border: "1px solid var(--glass-border)", borderRadius: "14px 4px 14px 14px", padding: "10px 14px", fontSize: 14.5, lineHeight: 1.45, color: "var(--ink)" }}>{m.t}</div>
                      </div>
                    </div>
                  ))}
                  <div style={{ display: "flex", gap: 9, alignItems: "center" }}>
                    <div style={{ width: 26, height: 26, borderRadius: 8, flexShrink: 0, background: "linear-gradient(150deg, var(--accent), var(--accent-deep))", display: "grid", placeItems: "center", color: "var(--accent-ink)" }}><Icon name="spark" size={14} stroke={2.4} /></div>
                    <div style={{ background: "color-mix(in oklch, var(--accent) 12%, transparent)", border: "1px solid color-mix(in oklch, var(--accent) 24%, transparent)", borderRadius: 12, padding: "12px 16px", display: "flex", gap: 5 }}>
                      {[0, 1, 2].map(d => <span key={d} className="ai-typing-dot" style={{ animationDelay: `${d * 0.18}s` }} />)}
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`
          .ai-typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; animation: ai-bounce 1s ease-in-out infinite; }
          @keyframes ai-bounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
          @media (prefers-reduced-motion: reduce) { .ai-typing-dot { animation: none; } }
        `}</style>
      </section>

      {/* FEATURES — What Makes Our AI Chatbot Different */}
      <section className="section" style={{ padding: "70px 0 30px" }}>
        <div className="wrap">
          <Reveal style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 40px" }}>
            <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="grid" size={14} /> Our Features</div>
            <h2 className="h1" style={{ fontSize: "clamp(28px,4vw,44px)", margin: "14px 0 12px" }}>What Makes Our AI Chatbot Different</h2>
            <p className="body-lg">From smarter conversations to stream-aware replies—this isn’t your average chatbot.</p>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }} className="feat-grid">
            {AI_FEATURES.map(([ic, t, d], i) => (
              <Reveal key={t} delay={(i % 4) * 0.05} className="glass tile" style={{ borderRadius: "var(--radius)", padding: 26 }}>
                <img src={aurl(ic)} alt="" style={{ width: 56, height: 56, display: "block", marginBottom: 16 }} />
                <h3 className="h3" style={{ marginBottom: 8 }}>{t}</h3>
                <p className="body" style={{ fontSize: 14 }}>{d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CUSTOM TRAINING & SCALABILITY — What We Expect */}
      <section className="section" style={{ padding: "40px 0 30px" }}>
        <div className="wrap">
          <Reveal style={{ textAlign: "center", maxWidth: 640, margin: "0 auto 44px" }}>
            <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="spark" size={14} /> What We Expect</div>
            <h2 className="h1" style={{ fontSize: "clamp(28px,4vw,44px)", margin: "14px 0 12px" }}>Custom Training &amp; Scalability</h2>
            <p className="body-lg">Built on real data. Designed to grow with you.</p>
          </Reveal>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, alignItems: "center" }} className="disc-grid">
            <Reveal className="stack" style={{ gap: 12 }}>
              {AI_EXPECT.map(([ic, t, d], i) => {
                const on = expectActive === i;
                return (
                  <div key={t} onMouseEnter={() => setExpectActive(i)}
                    className={on ? "glass-strong" : "glass"} style={{
                      borderRadius: "var(--radius)", padding: 22, display: "flex", gap: 16, cursor: "default",
                      borderColor: on ? "color-mix(in oklch, var(--accent) 45%, transparent)" : "var(--glass-border)",
                      transition: "border-color .25s, background .25s",
                    }}>
                    <div style={{ width: 46, height: 46, borderRadius: 13, flexShrink: 0, display: "grid", placeItems: "center", color: on ? "var(--accent)" : "var(--ink-2)", background: on ? "color-mix(in oklch, var(--accent) 14%, transparent)" : "var(--glass-fill)", border: on ? "1px solid color-mix(in oklch, var(--accent) 32%, transparent)" : "1px solid var(--glass-border)", transition: "all .25s" }}>
                      <Icon name={ic} size={22} />
                    </div>
                    <div>
                      <h4 className="h3" style={{ fontSize: 17, marginBottom: 6 }}>{t}</h4>
                      <p className="body" style={{ fontSize: 14, margin: 0 }}>{d}</p>
                    </div>
                  </div>
                );
              })}
            </Reveal>
            <Reveal delay={0.1}>
              <div style={{ position: "relative", paddingBottom: 70, paddingRight: 0 }}>
                <div className="glass-strong" style={{ borderRadius: "var(--radius)", padding: 8, boxShadow: "var(--shadow-float), 0 0 70px -32px var(--accent-glow)" }}>
                  <img src={aurl("assets/ai-expect-2.png")} alt="KVB AI dashboard" style={{ display: "block", width: "100%", height: "auto", borderRadius: 16 }} />
                </div>
                <div className="glass-strong ai-mobile-mock" style={{ position: "absolute", left: 0, bottom: 0, width: "34%", maxWidth: 180, padding: 6, borderRadius: 18, boxShadow: "var(--shadow-float)" }}>
                  <img src={aurl("assets/ai-expect-1.png")} alt="KVB AI mobile" style={{ display: "block", width: "100%", height: "auto", borderRadius: 13 }} />
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PRICING — Our Pricing */}
      <section id="ai-pricing" className="section" style={{ padding: "50px 0 30px" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 40, alignItems: "center" }} className="disc-grid">
            <Reveal>
              <div className="eyebrow" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="card" size={14} /> Our Pricing</div>
              <h2 className="h1" style={{ fontSize: "clamp(28px,3.6vw,44px)", margin: "14px 0 14px" }}>Unlock Game-Changing Chat AI at a Fraction of the Cost</h2>
              <p className="body-lg" style={{ maxWidth: 460 }}>
                Packed with features like real-time responses, dynamic chatters, and custom settings—our pricing is designed for streamers who want more, not more bills.
              </p>
              <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")} style={{ marginTop: 26 }}>Get Started for Free <Icon name="arrow" size={17} /></button>
            </Reveal>
            <Reveal delay={0.1}>
              <div className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(26px,3vw,36px)", boxShadow: "var(--shadow-2), 0 0 50px -20px var(--accent-glow)" }}>
                <h4 className="h3" style={{ fontSize: 19 }}>Pay-as-You-Go Plan</h4>
                <p className="body" style={{ fontSize: 14, marginTop: 6 }}>Only pay for what you use — and get more than your money’s worth.</p>
                <div style={{ display: "flex", alignItems: "baseline", gap: 6, margin: "20px 0 4px" }}>
                  <span style={{ fontSize: 46, fontWeight: 720, letterSpacing: "-0.04em" }}>$5</span>
                  <span className="cap">/ 1000 messages</span>
                </div>
                <button className="btn btn-primary" onClick={() => onNav("signup")} style={{ width: "100%", justifyContent: "center", margin: "18px 0 22px" }}>Get Started <Icon name="arrow" size={15} /></button>
                <hr className="divider" style={{ marginBottom: 18 }} />
                <div className="stack" style={{ gap: 13 }}>
                  {AI_PLAN_FEATURES.map(f => (
                    <div key={f} style={{ display: "flex", gap: 11, alignItems: "center" }}>
                      <span style={{ color: "var(--accent)", flexShrink: 0 }}><Icon name="check" size={18} stroke={2.4} /></span>
                      <span className="body" style={{ fontSize: 14.5, color: "var(--ink-2)" }}>{f}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* CTA — Ready to Activate Your AI Chatbot? */}
      <section className="section" style={{ padding: "30px 0 30px" }}>
        <div className="wrap">
          <Reveal className="glass-strong" style={{ borderRadius: "var(--radius-lg)", padding: "clamp(40px,6vw,72px)", textAlign: "center", position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(60% 120% at 50% 0%, var(--accent-glow), transparent 60%)", opacity: 0.45 }} />
            <div style={{ position: "relative" }}>
              <h2 className="h-display" style={{ fontSize: "clamp(32px,4.6vw,56px)", marginBottom: 14 }}>Ready to Activate Your AI Chatbot?</h2>
              <p className="body-lg" style={{ maxWidth: 480, margin: "0 auto 28px" }}>Pay-as-you-go AI with real-time results — only $5 to start.</p>
              <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-lg" onClick={() => onNav("signup")}>Get Started Now <Icon name="arrow" size={17} /></button>
                <button className="btn btn-ghost btn-lg" onClick={() => onNav("discord")}>Live Chat Support</button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </PageShell>
  );
}

Object.assign(window, { AiChatbotPage });