const TOTAL_SLIDES = 1;

function Slide01_DemoHub() {
  const agents = [
    {
      modality: "VOICE",
      accent: "orange",
      title: "Real-time Voice Agent",
      text: "Voice listens, understands intent, responds instantly with natural voice.",
      action: "Add test link",
      qr: "QR placeholder"
    },
    {
      modality: "AVATAR",
      accent: "cyan",
      title: "Real-time Avatar Agent",
      text: "Avatar is a 3D character that speaks, looks and smiles.",
      action: "Coming soon",
      qr: "QR placeholder"
    },
    {
      modality: "TEXT",
      accent: "green",
      title: "Text Agent",
      text: "Text agent understands, reasons and executes actions in business tools.",
      action: "Add test link",
      qr: "QR placeholder"
    },
    {
      modality: "WHATSAPP",
      accent: "green",
      title: "WhatsApp Agent",
      text: "WhatsApp agent works where customers already are with media, voice and files.",
      action: "Add WhatsApp link",
      qr: "QR placeholder"
    },
    {
      modality: "GUIDED FLOW",
      accent: "orange",
      title: "Guided Flow Agent",
      text: "Guided flow combines steps, smart forms and automated actions.",
      action: "Coming soon",
      qr: "QR placeholder"
    }
  ];

  const kpis = [
    { label: "Languages", value: "140+", accent: "orange" },
    { label: "Availability", value: "24/7", accent: "green" },
    { label: "Simultaneous conversations", value: "∞", accent: "cyan" },
    { label: "Tailor-made", value: "100%", accent: "orange" }
  ];

  const accentColor = (accent) => {
    if (accent === "green") return "var(--red-green)";
    if (accent === "cyan") return "var(--waka-cyan)";
    return "var(--waka-orange)";
  };

  return (
    <>
      <ChromeTop section="DEMO HUB" slideNum={1} total={TOTAL_SLIDES} />
      <div className="slide-body" style={{ position: "relative", overflow: "hidden" }}>
        <div className="grid-bg" style={{ opacity: 0.18 }}></div>

        <div style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", gap: 22, height: "100%" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.35fr 0.65fr", gap: 28, alignItems: "end" }}>
            <div>
              <div className="eyebrow">Waka × Telco & MoMo Industry</div>
              <div className="title-l" style={{ marginTop: 14, maxWidth: 1180 }}>
                Test AI agents. Experience the potential.
              </div>
              <div className="subtitle" style={{ marginTop: 14, maxWidth: 1160 }}>
                Demo slots are ready. Agent links, QR codes and WhatsApp access will be added once provided.
              </div>
            </div>

            <div className="card" style={{ padding: 24 }}>
              <div className="label" style={{ marginBottom: 14 }}>DEMO STATUS</div>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <span className="tag orange">5 AI agents</span>
                <span className="tag cyan">Links pending</span>
                <span className="tag green">QR pending</span>
              </div>
              <div className="body-s" style={{ marginTop: 18, color: "var(--orbit-text-2)" }}>
                Placeholders are ready for agent numbers, test links and WhatsApp access.
              </div>
            </div>
          </div>

          <div className="bento" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 18 }}>
            {agents.map((agent, index) => (
              <div key={agent.title} className="card" style={{ padding: 22, minHeight: 292, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
                    <span className={`tag ${agent.accent}`}>{agent.modality}</span>
                    <span className="label" style={{ color: "var(--orbit-text-3)" }}>0{index + 1}</span>
                  </div>

                  <div className="title-m" style={{ fontSize: 32, lineHeight: 1.02, marginTop: 18, letterSpacing: -1 }}>
                    {agent.title}
                  </div>

                  <div className="body-s" style={{ marginTop: 14, color: "var(--orbit-text-2)", lineHeight: 1.35 }}>
                    {agent.text}
                  </div>
                </div>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 88px", gap: 14, alignItems: "end", marginTop: 18 }}>
                  <div>
                    <div className={`tag ${agent.accent}`} style={{ display: "inline-flex" }}>
                      {agent.action}
                    </div>
                    <div className="label" style={{ marginTop: 12, color: "var(--orbit-text-3)" }}>
                      Test access pending
                    </div>
                  </div>

                  <div className="card" style={{ width: 88, height: 88, padding: 10, display: "flex", alignItems: "center", justifyContent: "center", borderColor: accentColor(agent.accent) }}>
                    <div className="label" style={{ textAlign: "center", lineHeight: 1.25, color: "var(--orbit-text-2)" }}>
                      {agent.qr}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
            {kpis.map((kpi) => (
              <div key={kpi.label} className="card kpi" style={{ padding: 18, minHeight: 120 }}>
                <div className="label">{kpi.label}</div>
                <div className="title-m" style={{ marginTop: 8, color: accentColor(kpi.accent), lineHeight: 1 }}>
                  {kpi.value}
                </div>
              </div>
            ))}
          </div>

          <div className="strip" style={{ padding: "22px 28px", display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: 28, alignItems: "center" }}>
            <div className="title-m" style={{ fontSize: 40, lineHeight: 1 }}>
              One platform. <span style={{ color: "var(--waka-orange)" }}>All channels.</span>
            </div>
            <div className="body-m" style={{ color: "var(--orbit-text-2)", lineHeight: 1.35 }}>
              Waka Orbit connects to CRM, ERP and databases, uses your data, and deploys across customer channels.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="AI Agents Demo" />
    </>
  );
}

Object.assign(window, {
  Slide01_DemoHub
});