"use client";
import React, { useEffect, useRef, useState, useCallback } from "react";
import { useDispatch } from "react-redux";
import { setDemo } from "@/store/slices/uiSlice";
import HomeTrusted from "@/components/sections/home/HomeTrusted";
import HomeTryItOut from "@/components/sections/home/HomeTryItOut";
import HomeTestimonials from "@/components/sections/home/HomeTestimonials";
import HomeAskAi from "@/components/sections/home/HomeAskAi";
import HomeFaq from "@/components/sections/home/HomeFaq";

import WhatsappPricing from "@/components/sections/whatsapp/WhatsappPricing";
import Image from "next/image";
import Link from "next/link";

/* ========== DATA ========== */
const CHAT_SEQ = [
  {
    t: "in",
    h: "Hi! I saw your ad — I need a WhatsApp chatbot for my business.",
  },
  { t: "typing" },
  {
    t: "out",
    bot: true,
    h: (
      <>
        Hi there! 👋 Welcome to <b>Textspeed</b>. I can set that up for you.
        What would you like to automate first?
      </>
    ),
  },
  { t: "chips", c: ["Lead capture", "Customer support", "Sales & follow-ups"] },
  { t: "in", h: "Lead capture" },
  { t: "typing" },
  {
    t: "out",
    bot: true,
    h: "Great choice. How many enquiries do you get each month?",
  },
  { t: "in", h: "Around 5,000" },
  { t: "typing" },
  {
    t: "out",
    bot: true,
    h: (
      <>
        Perfect — our <b>AI chatbot</b> qualifies leads instantly and pushes
        them to your CRM. Shall I show you a live demo?
      </>
    ),
  },
  { t: "cta", h: "Book a Demo" },
];

const AI_FEATURES = [
  {
    t: "Business-Trained AI Conversations",
    d: "The AI uses your approved business information to give relevant, natural, consistent answers.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Traine_Section_1.webp",
  },
  {
    t: "No-Code Chatbot Builder",
    d: "Build flows, conditions, questions and automated actions visually — no developer needed.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Traine_Section_2.png",
  },
  {
    t: "Automated Sequences & Follow-Ups",
    d: "Schedule welcome messages, nurturing, reminders, follow-ups and re-engagement automatically.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Traine_Section_3.png",
  },
  {
    t: "Smart Lead Routing & Auto-Assignment",
    d: "Conversations are categorised by intent and routed to the right sales, support or department team.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Traine_Section_4.png",
  },
  {
    t: "Business Integrations",
    d: "Connect CRM, ERP, HRM, websites, forms, calendars and payment tools from one workflow.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Traine_Section_5.png",
  },
];

const INDUSTRIES = [
  {
    t: "E-commerce",
    h: "WhatsApp Chatbot for E-commerce",
    d: "Turn browsers into buyers — the bot shares your catalogue, recovers abandoned carts, sends order updates and collects payments inside the chat.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Industry_image_1.png",
    route: "/solutions/industry/e-commerce",
    f: [
      "Product discovery & catalogue sharing",
      "Abandoned-cart recovery",
      "Order & delivery updates",
      "Payment links in chat",
      "Personalised offers",
      "Instant customer support",
    ],
  },
  {
    t: "Real Estate",
    h: "WhatsApp Chatbot for Real Estate",
    d: "Qualify every enquiry automatically — the bot captures budget and location, recommends projects, shares brochures and books site visits.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Industry_image_2.webp",
    route: "/solutions/industry/real-estate",
    f: [
      "Project enquiry handling",
      "Location & budget qualification",
      "Property recommendations",
      "Site-visit booking",
      "Brochure & floor-plan sharing",
      "Sales-agent assignment",
      "Automated follow-ups",
    ],
  },
  {
    t: "Education",
    h: "WhatsApp Chatbot for Education",
    d: "Handle admissions at scale — the bot answers course questions, qualifies applicants, books counselling and chases fees automatically.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Industry_image_3.png",
    route: "/solutions/industry/education",
    f: [
      "Course enquiries",
      "Admission qualification",
      "Brochure sharing",
      "Counselling session booking",
      "Fee reminders",
      "Application status updates",
      "Student support",
    ],
  },
  {
    t: "HR & Recruitment",
    h: "WhatsApp Chatbot for HR & Recruitment",
    d: "Screen candidates around the clock — collect resumes, qualify experience, schedule interviews and keep applicants informed.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Industry_image_4.webp",
    route: null,
    f: [
      "Candidate screening",
      "Experience & role qualification",
      "Resume collection",
      "Interview scheduling",
      "Application status updates",
      "Onboarding communication",
      "Recruiter assignment",
    ],
  },
  {
    t: "Healthcare",
    h: "WhatsApp Chatbot for Healthcare",
    d: "Give patients instant service — book appointments, send reminders, deliver reports and answer common questions securely.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Industry_image_5.png",
    route: "/solutions/industry/healthcare",
    f: [
      "Appointment booking",
      "Doctor selection",
      "Appointment reminders",
      "Report notifications",
      "Common patient enquiries",
      "Feedback collection",
      "Support escalation",
    ],
  },
  {
    t: "Financial Services",
    h: "WhatsApp Chatbot for Financial Services",
    d: "Onboard and serve customers compliantly — check eligibility, collect documents, send payment reminders and hand over to agents securely.",
    img: "/image/platform/whatsapp-whatsapp-chatbot/Industry_image_6.png",
    route: "/solutions/industry/bfsi",
    f: [
      "Customer onboarding",
      "Product enquiries",
      "Eligibility checks",
      "Document collection",
      "Payment reminders",
      "Service requests",
      "Secure agent handover",
    ],
  },
];

/* ========== SUB-COMPONENTS ========== */

/* Chat animation for hero banner */
function ChatDemo({ id }) {
  const ref = useRef(null);
  const started = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let cancelled = false;
    function run() {
      if (cancelled) return;
      el.innerHTML = "";
      let i = 0;
      function step() {
        if (cancelled || i >= CHAT_SEQ.length) {
          if (!cancelled) setTimeout(run, 3600);
          return;
        }
        const s = CHAT_SEQ[i];
        i++;
        if (s.t === "typing") {
          const tp = document.createElement("div");
          tp.className = "cb-typing show";
          tp.innerHTML = "<i></i><i></i><i></i>";
          el.appendChild(tp);
          setTimeout(() => {
            tp.remove();
            step();
          }, 900);
          return;
        }
        const d = document.createElement("div");
        if (s.t === "chips") {
          d.className = "cb-chips";
          d.innerHTML = s.c
            .map((c) => `<span class="cb-chip">${c}</span>`)
            .join("");
        } else if (s.t === "cta") {
          d.className = "cb-cta-b";
          d.textContent = s.h;
        } else {
          d.className = "cb-b " + (s.t === "in" ? "in" : "out");
          d.innerHTML =
            (s.bot ? '<span class="bot">Textspeed Bot</span>' : "") +
            (typeof s.h === "string" ? s.h : "");
          if (s.bot && typeof s.h !== "string") {
            // For JSX content, use a simpler text version
            const wrapper = document.createElement("span");
            wrapper.innerHTML = s.bot
              ? '<span class="bot">Textspeed Bot</span>'
              : "";
            if (s.h && s.h.props) {
              // Render the JSX content as HTML
              const temp = document.createElement("span");
              // Fallback: construct HTML manually for known patterns
              if (i === 3)
                temp.innerHTML =
                  "Hi there! 👋 Welcome to <b>Textspeed</b>. I can set that up for you. What would you like to automate first?";
              else if (i === 10)
                temp.innerHTML =
                  "Perfect — our <b>AI chatbot</b> qualifies leads instantly and pushes them to your CRM. Shall I show you a live demo?";
              d.innerHTML =
                (s.bot ? '<span class="bot">Textspeed Bot</span>' : "") +
                temp.innerHTML;
            }
          }
        }
        el.appendChild(d);
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            d.classList.add("show");
          });
        });
        setTimeout(step, s.t === "chips" ? 1100 : 1250);
      }
      setTimeout(step, 700);
    }
    if ("IntersectionObserver" in window) {
      const io = new IntersectionObserver(
        (entries) => {
          entries.forEach((e) => {
            if (e.isIntersecting && !started.current) {
              started.current = true;
              run();
            }
          });
        },
        { threshold: 0.2 },
      );
      io.observe(el);
      return () => {
        cancelled = true;
        io.disconnect();
      };
    } else {
      run();
    }
    return () => {
      cancelled = true;
    };
  }, []);

  return <div className="cb-body" id={id} ref={ref}></div>;
}

/* Bento features with dissolve-on-scroll */
function BentoFeatures() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const cards = el.querySelectorAll(".bn");
    if (!("IntersectionObserver" in window)) {
      cards.forEach((c) => c.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (!e.isIntersecting) return;
          const idx = Array.from(cards).indexOf(e.target);
          setTimeout(() => e.target.classList.add("in"), idx * 140);
          io.unobserve(e.target);
        });
      },
      { threshold: 0.2 },
    );
    cards.forEach((c) => io.observe(c));
    return () => io.disconnect();
  }, []);

  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">WhatsApp bot features</span>
          <h2>What your WhatsApp business bot does every day</h2>
          <p>
            From first hello to qualified lead — the chatbot handles engagement,
            replies, nurturing and support on autopilot.
          </p>
        </div>
        <div className="cb-bento" id="cbBento" ref={ref}>
          {/* Card 1 — Customer Engagement */}
          <div className="bn">
            <div
              className="relative w-full overflow-hidden rounded-xl mb-4"
              style={{ aspectRatio: "16/9" }}
            >
              <Image
                src="/image/platform/whatsapp-whatsapp-chatbot/image_1-compressed (1).webp"
                alt="Customer Engagement"
                fill
                className="object-cover"
                sizes="(max-width:768px) 100vw, 40vw"
              />
            </div>
            <h4>Customer Engagement</h4>
            <p>
              Guided conversations, quick replies and personalised interaction
              keep customers actively involved instead of dropping off.
            </p>
          </div>

          {/* Card 2 — Instant Automated Replies */}
          <div className="bn">
            <div
              className="relative w-full overflow-hidden rounded-xl mb-4"
              style={{ aspectRatio: "16/9" }}
            >
              <Image
                src="/image/platform/whatsapp-whatsapp-chatbot/image_2-compressed.webp"
                alt="Instant Automated Replies"
                fill
                className="object-cover"
                sizes="(max-width:768px) 100vw, 60vw"
              />
            </div>
            <h4>Instant Automated Replies</h4>
            <p>
              Every question is answered immediately, 24/7 — no waiting for a
              human agent, no lost enquiries after office hours.
            </p>
          </div>

          {/* Card 3 — Automated Lead Nurturing */}
          <div className="bn">
            <div
              className="relative w-full overflow-hidden rounded-xl mb-4"
              style={{ aspectRatio: "16/9" }}
            >
              <Image
                src="/image/platform/whatsapp-whatsapp-chatbot/image_3-compressed.webp"
                alt="Automated Lead Nurturing"
                fill
                className="object-cover"
                sizes="(max-width:768px) 100vw, 60vw"
              />
            </div>
            <h4>Automated Lead Nurturing</h4>
            <p>
              The bot captures, qualifies and follows up automatically — moving
              every lead closer to a demo booking or purchase.
            </p>
          </div>

          {/* Card 4 — Smart Customer Support */}
          <div className="bn">
            <div
              className="relative w-full overflow-hidden rounded-xl mb-4"
              style={{ aspectRatio: "16/9" }}
            >
              <Image
                src="/image/platform/whatsapp-whatsapp-chatbot/image_4-compressed.webp"
                alt="Smart Customer Support"
                fill
                className="object-cover"
                sizes="(max-width:768px) 100vw, 40vw"
              />
            </div>
            <h4>Smart Customer Support</h4>
            <p>
              Common questions are resolved instantly, complex chats route to
              the right team, and service never stops.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* AI Capabilities navigator */
function AiCapabilities() {
  const [cur, setCur] = useState(0);
  const [paused, setPaused] = useState(false);
  const timerRef = useRef(null);
  const boxRef = useRef(null);

  const show = useCallback((n) => {
    setCur((n + AI_FEATURES.length) % AI_FEATURES.length);
  }, []);

  useEffect(() => {
    if (paused) return;
    timerRef.current = setInterval(() => show(cur + 1), 7000);
    return () => clearInterval(timerRef.current);
  }, [cur, paused, show]);

  const pick = (i) => {
    show(i);
    setPaused(true);
    setTimeout(() => setPaused(false), 2500);
  };

  return (
    <section className="section cbai">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">AI WhatsApp chatbot</span>
          <h2>
            Human-Like Conversations Powered By
            <br />
            WhatsApp Conversational AI
          </h2>
          <p>
            <b>Trained on Your Business.</b>
            <br />
            Textspeed&#39;s WhatsApp AI chatbot learns from your business
            information, understands customer intent and automates conversations
            — nurturing leads and connecting with your existing tools from one
            WhatsApp automation platform.
          </p>
        </div>
        <div
          className="cbai-box reveal d1"
          ref={boxRef}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div className="cbai-content">
            {/* Mobile tabs */}
            <div className="cbai-tabs">
              {AI_FEATURES.map((f, i) => (
                <button
                  key={i}
                  className={`cbai-tab${i === cur ? " on" : ""}`}
                  onClick={() => pick(i)}
                >
                  {f.t.split(" &")[0]}
                </button>
              ))}
            </div>
            {/* Desktop list */}
            <div className="cbai-list">
              {AI_FEATURES.map((f, i) => (
                <button
                  key={i}
                  className={`cbai-i${i === cur ? " on" : ""}${i === cur && paused ? " paused" : ""}`}
                  onClick={() => pick(i)}
                >
                  <span className="ic">
                    <span className="cbai-num">{i + 1}</span>
                  </span>
                  <b>{f.t}</b>
                  <p>{f.d}</p>
                  <span className="prog"></span>
                </button>
              ))}
            </div>
            {/* Mobile description */}
            <p className="cbai-mp">{AI_FEATURES[cur].d}</p>
          </div>
          <div className="cbai-screen">
            {AI_FEATURES.map((f, i) => (
              <div key={i} className={`cbai-f${i === cur ? " on" : ""}`}>
                <div className="relative w-full h-full overflow-hidden rounded-2xl">
                  <Image
                    src={f.img}
                    alt={f.t}
                    fill
                    className="object-contain"
                    sizes="(max-width:768px) 100vw, 50vw"
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Banner Carousel */
function BannerCarousel() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Bot Architecture</span>
          <h2>WhatsApp AI chatbot workflow</h2>
          <p>
            Build natural conversational flows, trigger conditional actions,
            integrate your business through WhatsApp Chatbot backend with our
            visual builder.
          </p>
        </div>
        <div className="cbcar reveal overflow-hidden">
          <Image
            src="/image/platform/whatsapp-whatsapp-chatbot/Chatbot_node.png"
            alt="WhatsApp AI chatbot workflow diagram"
            width={1774}
            height={887}
            className="w-full h-auto rounded-[22px]"
            priority
          />
        </div>
      </div>
    </section>
  );
}
/* Industries tab navigator */
function IndustriesNav() {
  const [cur, setCur] = useState(0);
  const [paused, setPaused] = useState(false);
  const [swKey, setSwKey] = useState(0);
  const timerRef = useRef(null);

  const show = useCallback((n) => {
    const next = (n + INDUSTRIES.length) % INDUSTRIES.length;
    setCur(next);
    setSwKey((k) => k + 1);
  }, []);

  useEffect(() => {
    if (paused) return;
    timerRef.current = setInterval(() => show(cur + 1), 6500);
    return () => clearInterval(timerRef.current);
  }, [cur, paused, show]);

  const pick = (i) => {
    show(i);
    setPaused(true);
    setTimeout(() => setPaused(false), 2500);
  };

  const ind = INDUSTRIES[cur];

  return (
    <section className="section" style={{ background: "var(--bg-tint)" }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Industry use cases</span>
          <h2>Smart WhatsApp Chatbot Automation <br />For Every Industry</h2>
          <p>
            Textspeed builds industry-specific chatbot journeys for lead
            capture, customer support, automation, qualification, follow-ups and
            conversion — not one generic bot for everyone.
          </p>
        </div>
        <div className="cbind-tabs reveal">
          {INDUSTRIES.map((x, i) => (
            <button
              key={i}
              className={`cbind-t${i === cur ? " on" : ""}${i === cur && paused ? " paused" : ""}`}
              onClick={() => pick(i)}
            >
              {x.t}
              <span className="prog"></span>
            </button>
          ))}
        </div>
        <div
          className="cbind-panel reveal d1"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          <div className="cbind-l sw" key={`l-${swKey}`}>
            <h3>{ind.h}</h3>
            <p>{ind.d}</p>
            <div
              className="relative w-full overflow-hidden rounded-xl border border-gray-100"
              style={{ aspectRatio: "16/9" }}
            >
              <Image
                src={ind.img}
                alt={ind.h}
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 40vw"
              />
            </div>
          </div>
          <div className="cbind-r sw" key={`r-${swKey}`}>
            {ind.f.map((feat, fi) => (
              <div key={fi} className="cbind-c">
                <span className="tk">
                  <svg viewBox="0 0 24 24" fill="none">
                    <path
                      d="M6 12l4 4 8-9"
                      stroke="currentColor"
                      strokeWidth="3"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </span>
                {feat}
              </div>
            ))}
            <div className="mt-6 flex">
              {ind.route ? (
                <Link href={ind.route} className="btn btn-primary">
                  Explore Features
                </Link>
              ) : (
                <button
                  className="btn btn-ghost opacity-50 cursor-not-allowed"
                  disabled
                >
                  Explore Features
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* WA Chat Head shared component */
function WaChatHead() {
  return (
    <div className="wa-head">
      <span className="back">
        <svg viewBox="0 0 24 24" fill="none">
          <path
            d="M15 6l-6 6 6 6"
            stroke="currentColor"
            strokeWidth="2.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </span>
      <span
        className=""
        style={{
          position: "relative",
          overflow: "hidden",
          borderRadius: "50%",
          display: "inline-flex",
          width: "36px",
          height: "36px",
          flex: "0 0 auto",
          border: "1px solid rgba(255, 255, 255, 0.2)"
        }}
      >
        <Image
          src="/image/Textspeed_logo/textspeed-icon.png"
          alt="Textspeed Profile"
          width={36}
          height={36}
          style={{ objectFit: "cover" }}
          unoptimized
        />
      </span>
      <span className="wn" style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-start", textAlign: "left" }}>
        <b style={{ display: "flex", alignItems: "center", gap: "5px", lineHeight: "1.2" }}>
          Textspeed Bot
          <svg
            viewBox="0 0 24 24"
            width="14"
            height="14"
          >
            <path
              fill="#25D366"
              d="M12 2L14.71 4.22L18.17 4.09L19.26 7.42L22 9L20.8 12.35L22 15L19.26 16.58L18.17 19.91L14.71 19.78L12 22L9.29 19.78L5.83 19.91L4.74 16.58L2 15L3.2 12.35L2 9L4.74 7.42L5.83 4.09L9.29 4.22L12 2Z"
            />
            <path
              fill="#FFFFFF"
              d="M10.7 15.6L7.4 12.3L8.8 10.9L10.7 12.8L15.9 7.6L17.3 9L10.7 15.6Z"
            />
          </svg>
        </b>
        <span style={{ fontSize: "0.65rem", opacity: 0.85, marginTop: "2px" }}>online · replies instantly</span>
      </span>
      <span
        style={{
          marginLeft: "auto",
          display: "flex",
          alignItems: "center",
          gap: "18px",
          color: "#fff",
          opacity: 0.9
        }}
      >
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
          <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
        </svg>
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
          <path d="M12 7a2 2 0 10-.001-4.001A2 2 0 0012 7zm0 2a2 2 0 10-.001 3.999A2 2 0 0012 9zm0 6a2 2 0 10-.001 3.999A2 2 0 0012 15z"/>
        </svg>
      </span>
    </div>
  );
}

/* ========== MAIN PAGE COMPONENT ========== */
export default function WhatsappChatbotClient() {
  const dispatch = useDispatch();
  const openDemo = () => dispatch(setDemo(true));

  /* Reveal observer */
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
          }
        });
      },
      { threshold: 0.18 },
    );
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      {/* ============ HERO ============ */}
      <section className="cbhero" id="top">
        <div className="hero-mesh">
          <span className="blob h1b"></span>
          <span className="blob h2b"></span>
        </div>
        <div className="hero-gridbg"></div>
        <div className="wrap">
          <div className="cbh-copy reveal">
            <span className="eyebrow">
              WhatsApp Chatbot · AI Chatbot for Business
            </span>
            <h1>
              Automate Every Customer Conversation
              <br />
              with a Powerful <span className="grad">WhatsApp Chatbot</span>
            </h1>
            <p className="sub">
              Capture leads, answer questions instantly, qualify prospects,
              share product details, book appointments and support customers
              24/7 with an intelligent WhatsApp chatbot from Textspeed —
              WhatsApp automation and sales automation that runs without
              continuous human support.
            </p>
            <div className="cbh-cta">
              <button className="btn btn-primary" onClick={openDemo}>
                Book a Demo{" "}
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none">
                  <path
                    d="M5 12h14M13 6l6 6-6 6"
                    stroke="currentColor"
                    strokeWidth="2.2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </button>
              <a className="btn btn-ghost" href="#features">
                Explore Features
              </a>
            </div>
          </div>

          {/* BANNER: 3-part journey */}
          <div className="cbbanner reveal d1">
            {/* Desktop 3-part grid */}
            <div className="cbb-grid">
              <div className="cbb-col">
                <span className="lbl">1 · Meta Ad Click</span>
                <div className="img-frame">
                  <Image
                    src="/image/platform/whatsapp-whatsapp-chatbot/Meta_Ad.png.webp"
                    alt="Meta Ad"
                    width={400}
                    height={400}
                  />
                </div>
              </div>
              <div className="cbb-arrow a1">
                <svg viewBox="0 0 56 34">
                  <path className="ln" d="M2 17h52" fill="none" />
                  <circle className="dot" cx="4" cy="17" />
                </svg>
              </div>
              <div className="cbb-col mid">
                <span className="lbl">2 · Customer</span>
                <div>
                  <div>
                    <Image
                      src="/image/platform/whatsapp-whatsapp-chatbot/chatbot_customer.webp"
                      alt="Meta Ad"
                      width={400}
                      height={400}
                    />
                  </div>
                </div>
              </div>
              <div className="cbb-arrow a2">
                <svg viewBox="0 0 56 34">
                  <path className="ln" d="M2 17h52" fill="none" />
                  <circle className="dot" cx="4" cy="17" />
                </svg>
              </div>
              <div className="cbb-col">
                <span className="lbl">3 · Chatbot Replies</span>
                <div className="cb-chat">
                  <WaChatHead />
                  <ChatDemo id="cbBody" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ TRUSTED ============ */}
      <HomeTryItOut />
      <HomeTrusted pageKey="whatsapp-chatbot" />

      {/* ============ BENTO FEATURES ============ */}
      <BentoFeatures />

      {/* ============ AI CAPABILITIES ============ */}
      <AiCapabilities />

      {/* ============ BANNER CAROUSEL ============ */}
      <BannerCarousel />

      {/* ============ INDUSTRIES ============ */}
      <IndustriesNav />

      <WhatsappPricing
        badge="Demo pricing — final quote shared by sales"
        title={
          <>
            Flexible WhatsApp Chatbot Pricing
            <br />
            for Every Business
          </>
        }
        desc="Any pricing shown is for demo and reference only. Your final rate depends on conversation volume, chatbot complexity, AI usage, integrations and support level — we'll share an accurate quote after understanding your requirement."
        primaryBtnText="Talk to Sales"
        ghostBtnText="Learn More"
        ghostBtnHref="/pricing"
      />

      {/* ============ TESTIMONIALS ============ */}
      <HomeTestimonials pageKey="whatsapp-chatbot" />

      {/* ============ ASK AI ============ */}
      <HomeAskAi pageKey="whatsapp-chatbot" />

      {/* ============ FAQ ============ */}
      <HomeFaq pageKey="whatsapp-chatbot" />

      {/* ============ BOTTOM CTA ============ */}

    </>
  );
}