"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useDispatch } from "react-redux";
import { setDemo } from "@/store/slices/uiSlice";
import "./white-label-panel.css";
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";

const BRANDS = [
  { n: "YourBrand", d: "yourbrand.com", c: "#1868FB" },
  { n: "AcmeComms", d: "acmecomms.in", c: "#7c3aed" },
  { n: "NovaMsg", d: "novamsg.io", c: "#0d9488" },
  { n: "SwiftReach", d: "swiftreach.co", c: "#ea580c" },
];

const FEED = [
  ["WA", "Order update campaign", "Delivered"],
  ["SMS", "OTP burst · 4,200 msgs", "Delivered"],
  ["RCS", "Product carousel", "Delivered"],
  ["VOICE", "Press-1 reminder", "Connected"],
  ["EMAIL", "Invoice batch", "Sent"],
];

export default function WhiteLabelPanelPage() {
  const dispatch = useDispatch();
  const [brandIdx, setBrandIdx] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setBrandIdx((prev) => (prev + 1) % BRANDS.length);
    }, 2600);
    return () => clearInterval(timer);
  }, []);

  const activeBrand = BRANDS[brandIdx];

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Service",
            serviceType: "White Label CPaaS & Reseller Platform",
            name: "White Label Panel",
            description:
              "Sell WhatsApp Business API, Bulk SMS, RCS, Voice, and Email under your own brand name, domain, and pricing. Textspeed runs the platform, delivery, and compliance invisibly.",
            provider: {
              "@type": "Organization",
              name: "Textspeed Technology Private Limited",
              url: "https://textspeed.in",
            },
            areaServed: "IN",
            url: "https://textspeed.in/platform/reseller/white-label-panel",
          }),
        }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            itemListElement: [
              {
                "@type": "ListItem",
                position: 1,
                name: "Home",
                item: "https://www.textspeed.in/",
              },
              {
                "@type": "ListItem",
                position: 2,
                name: "Platform",
                item: "https://www.textspeed.in/platform",
              },
              {
                "@type": "ListItem",
                position: 3,
                name: "White Label Panel",
                item: "https://www.textspeed.in/platform/reseller/white-label-panel",
              },
            ],
          }),
        }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "FAQPage",
            mainEntity: [
              {
                "@type": "Question",
                name: "What is a White Label CPaaS Platform?",
                acceptedAnswer: {
                  "@type": "Answer",
                  text: "A White Label CPaaS platform allows you to resell communications services (WhatsApp Business API, Bulk SMS, RCS, Voice, and Email) using your own brand name, logo, domain, and pricing while a technology provider handles backend delivery.",
                },
              },
              {
                "@type": "Question",
                name: "Does Textspeed's branding appear anywhere?",
                acceptedAnswer: {
                  "@type": "Answer",
                  text: "No. The system is designed to be completely white-label. Your clients log in through your custom domain, see your brand colors and logo, and use your developer APIs.",
                },
              },
              {
                "@type": "Question",
                name: "How does pricing and margin management work?",
                acceptedAnswer: {
                  "@type": "Answer",
                  text: "You purchase credits and API usage at discounted reseller partner rates, and set your own retail prices. You manage customer credit allocations and billing structures directly inside your admin panel.",
                },
              },
              {
                "@type": "Question",
                name: "Which channels can I resell?",
                acceptedAnswer: {
                  "@type": "Answer",
                  text: "You can resell all five core Textspeed communication channels: WhatsApp Business API, Bulk SMS (Promotional & Transactional), RCS Messaging, Outbound Dialing (Voice & IVR), and Email Marketing.",
                },
              },
              {
                "@type": "Question",
                name: "How long does it take to launch my branded reseller platform?",
                acceptedAnswer: {
                  "@type": "Answer",
                  text: "Most reseller partners configure their white-label domain, upload their brand assets, set their pricing structures, and go live within a few days.",
                },
              },
            ],
          }),
        }}
      />
      {/* ============ LAYER 1 · HERO ============ */}
      <section className="wlhero" id="top">
        <span className="wl-orb o1"></span>
        <span className="wl-orb o2"></span>
        <div className="wrap wlh-grid">
          <div className="wlh-copy">
            <span className="eyebrow">White Label CPaaS Partnership</span>
            <h1>
              Launch Your Own CPaaS Brand.{" "}
              <span className="grad">We Power Everything Behind It.</span>
            </h1>
            <span className="text-slate-300 mb-5">
              Sell WhatsApp Business API, Bulk SMS, RCS, Voice and Email under
              your own brand name, your own domain and your own pricing.
              Textspeed runs the platform, the delivery and the compliance —
              your customers only ever see you.
            </span>
            <div className="wlh-cta mt-5">
              <button
                className="btn btn-primary"
                onClick={() => dispatch(setDemo(true))}
              >
                Become a White Label Partner{" "}
                <svg
                  viewBox="0 0 24 24"
                  width="16"
                  height="16"
                  fill="none"
                  style={{ marginLeft: "4px" }}
                >
                  <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="#how"
                style={{
                  borderColor: "rgba(255,255,255,.25)",
                  color: "#fff",
                  background: "transparent",
                }}
              >
                See How It Works
              </a>
            </div>
            <div className="wlh-chips">
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="13"
                  height="13"
                  style={{ marginRight: "6px", color: "#7fffb0" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Your brand &amp; domain
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="13"
                  height="13"
                  style={{ marginRight: "6px", color: "#7fffb0" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Your pricing &amp; margin
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="13"
                  height="13"
                  style={{ marginRight: "6px", color: "#7fffb0" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                All 5 channels
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="13"
                  height="13"
                  style={{ marginRight: "6px", color: "#7fffb0" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                We stay invisible
              </span>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <span className="wl-tag t1">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                width="15"
                height="15"
                style={{ color: "var(--blue)" }}
              >
                <path
                  d="M12 3l1.9 5.8H20l-5 3.6 1.9 5.8-4.9-3.6-4.9 3.6L9 12.4 4 8.8h6.1z"
                  stroke="currentColor"
                  strokeWidth="1.8"
                  strokeLinejoin="round"
                />
              </svg>
              Watch the brand change — that's white label
            </span>
            <span className="wl-tag t2">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                width="15"
                height="15"
                style={{ color: "var(--blue)" }}
              >
                <path
                  d="M4 19V5M4 19h16M8 15V9M12 15V7M16 15v-4"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              </svg>
              Your customers · your revenue
            </span>

            {/* Dashboard Rebranding Mockup Widget */}
            <div className="wl-dash">
              <div className="wl-bar">
                <i></i>
                <i></i>
                <i></i>
                <span className="url">
                  https://panel.
                  <b
                    id="wlDomain"
                    style={{ color: activeBrand.c, transition: "color 0.5s" }}
                  >
                    {activeBrand.d}
                  </b>
                </span>
              </div>
              <div className="wl-app">
                <div className="wl-side">
                  <div className="wl-logo">
                    <span
                      className="lg"
                      style={{
                        background: activeBrand.c,
                        transition: "background 0.5s",
                      }}
                    >
                      {activeBrand.n.charAt(0)}
                    </span>
                    <b id="wlName">{activeBrand.n}</b>
                  </div>
                  <span className="wl-nav on">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      width="13"
                      height="13"
                      style={{ marginRight: "8px" }}
                    >
                      <rect
                        x="3"
                        y="3"
                        width="7"
                        height="7"
                        rx="2"
                        stroke="currentColor"
                        strokeWidth="2"
                      />
                      <rect
                        x="14"
                        y="3"
                        width="7"
                        height="7"
                        rx="2"
                        stroke="currentColor"
                        strokeWidth="2"
                      />
                      <rect
                        x="3"
                        y="14"
                        width="7"
                        height="7"
                        rx="2"
                        stroke="currentColor"
                        strokeWidth="2"
                      />
                      <rect
                        x="14"
                        y="14"
                        width="7"
                        height="7"
                        rx="2"
                        stroke="currentColor"
                        strokeWidth="2"
                      />
                    </svg>
                    Dashboard
                  </span>
                  <span className="wl-nav">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      width="13"
                      height="13"
                      style={{ marginRight: "8px" }}
                    >
                      <path
                        d="M12 2a10 10 0 00-8.6 15l-1.3 4.9 5-1.3A10 10 0 1012 2z"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinejoin="round"
                      />
                    </svg>
                    WhatsApp API
                  </span>
                  <span className="wl-nav">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      width="13"
                      height="13"
                      style={{ marginRight: "8px" }}
                    >
                      <path
                        d="M4 5h16v10H8l-4 4z"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinejoin="round"
                      />
                    </svg>
                    SMS
                  </span>
                  <span className="wl-nav">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      width="13"
                      height="13"
                      style={{ marginRight: "8px" }}
                    >
                      <rect
                        x="3"
                        y="3"
                        width="18"
                        height="18"
                        rx="4"
                        stroke="currentColor"
                        strokeWidth="2"
                      />
                      <path
                        d="M8 10h8M8 14h5"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                      />
                    </svg>
                    RCS
                  </span>
                  <span className="wl-nav">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      width="13"
                      height="13"
                      style={{ marginRight: "8px" }}
                    >
                      <path
                        d="M4 5c0 8 7 15 15 15l1-4-5-2-2 2a12 12 0 01-5-5l2-2-2-5z"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinejoin="round"
                      />
                    </svg>
                    Voice
                  </span>
                  <span className="wl-nav">
                    <svg
                      viewBox="0 0 24 24"
                      fill="none"
                      width="13"
                      height="13"
                      style={{ marginRight: "8px" }}
                    >
                      <path
                        d="M4 6h16v12H4z"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinejoin="round"
                      />
                      <path
                        d="M4 7l8 6 8-6"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinejoin="round"
                      />
                    </svg>
                    Email
                  </span>
                </div>
                <div className="wl-main">
                  <div className="mh">
                    <b>Reseller Dashboard</b>
                    <span className="live">
                      <i></i>Live
                    </span>
                  </div>
                  <div className="wl-stats">
                    <div className="wl-st">
                      <b
                        className="wlAccent"
                        style={{
                          color: activeBrand.c,
                          transition: "color 0.5s",
                        }}
                      >
                        2,48,900
                      </b>
                      <span>Msgs today</span>
                    </div>
                    <div className="wl-st">
                      <b
                        className="wlAccent"
                        style={{
                          color: activeBrand.c,
                          transition: "color 0.5s",
                        }}
                      >
                        312
                      </b>
                      <span>Your customers</span>
                    </div>
                    <div className="wl-st">
                      <b
                        className="wlAccent"
                        style={{
                          color: activeBrand.c,
                          transition: "color 0.5s",
                        }}
                      >
                        99.2%
                      </b>
                      <span>Delivery</span>
                    </div>
                  </div>
                  <div className="wl-rows" id="wlRows">
                    {FEED.map((r, idx) => (
                      <div className="wl-row" key={idx}>
                        <span
                          className="ch"
                          style={{
                            background: activeBrand.c,
                            transition: "background 0.5s",
                          }}
                        >
                          {r[0]}
                        </span>
                        {r[1]}
                        <span className="st">{r[2]} ✓</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUSTED BANNER SECTION */}
      <HomeTryItOut />
      <HomeTrusted pageKey="white-label-panel" />

      {/* ============ LAYER 2 · WHAT YOU WHITE-LABEL ============ */}
      <section className="section">
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow">
              The full stack — not just one channel
            </span>
            <h2>Every CPaaS service, under your brand</h2>
            <p>
              Most providers white-label one product. With Textspeed you resell
              the complete communication platform — all five channels plus
              automation — as if you built it yourself.
            </p>
          </div>
          <div className="wl-stack">
            <div className="wl-s reveal">
              <div className="ic">
                <svg viewBox="0 0 24 24" fill="none">
                  <path
                    d="M12 2a10 10 0 00-8.6 15l-1.3 4.9 5-1.3A10 10 0 1012 2z"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              <h3>WhatsApp API</h3>
              <p>
                Official WhatsApp Business API — onboarding, templates, chatbots
                &amp; broadcasts.
              </p>
            </div>
            <div className="wl-s reveal d1">
              <div className="ic">
                <svg viewBox="0 0 24 24" fill="none">
                  <path
                    d="M4 5h16v10H8l-4 4z"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              <h3>Bulk SMS</h3>
              <p>
                Transactional, promotional &amp; OTP routes with DLT support for
                your customers.
              </p>
            </div>
            <div className="wl-s reveal d2">
              <div className="ic">
                <svg viewBox="0 0 24 24" fill="none">
                  <rect
                    x="3"
                    y="3"
                    width="18"
                    height="18"
                    rx="4"
                    stroke="currentColor"
                    strokeWidth="2"
                  />
                  <path
                    d="M8 10h8M8 14h5"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                </svg>
              </div>
              <h3>RCS Messaging</h3>
              <p>
                Rich, verified branded messaging with automatic SMS fallback.
              </p>
            </div>
            <div className="wl-s reveal d3">
              <div className="ic">
                <svg viewBox="0 0 24 24" fill="none">
                  <path
                    d="M4 5c0 8 7 15 15 15l1-4-5-2-2 2a12 12 0 01-5-5l2-2-2-5z"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              <h3>Voice &amp; IVR</h3>
              <p>
                Bulk voice, IVR, missed-call, voice OTP and virtual numbers.
              </p>
            </div>
            <div className="wl-s reveal">
              <div className="ic">
                <svg viewBox="0 0 24 24" fill="none">
                  <path
                    d="M4 6h16v12H4z"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M4 7l8 6 8-6"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              <h3>Email</h3>
              <p>
                Marketing &amp; transactional email with your customers' own
                domains.
              </p>
            </div>
            <div className="wl-s reveal d1">
              <div className="ic">
                <svg viewBox="0 0 24 24" fill="none">
                  <path
                    d="M4 7h11l-3-3M20 17H9l3 3"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              <h3>Automation</h3>
              <p>
                Chatbots, journeys and smart fallback across all five channels.
              </p>
            </div>
          </div>

          <div className="wl-brandbar reveal">
            <div className="lead">
              <h3>And everything carries your identity</h3>
              <p>
                Your customers sign in to your panel, on your domain, and see
                your name everywhere — Textspeed stays completely invisible.
              </p>
            </div>
            <div className="items">
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="14"
                  height="14"
                  style={{ marginRight: "6px" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Your logo &amp; brand colours
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="14"
                  height="14"
                  style={{ marginRight: "6px" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Your domain &amp; login page
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="14"
                  height="14"
                  style={{ marginRight: "6px" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Your pricing &amp; invoices
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="14"
                  height="14"
                  style={{ marginRight: "6px" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                Your customer accounts
              </span>
              <span>
                <svg
                  viewBox="0 0 24 24"
                  fill="none"
                  width="14"
                  height="14"
                  style={{ marginRight: "6px" }}
                >
                  <path
                    d="M6 12l4 4 8-9"
                    stroke="currentColor"
                    strokeWidth="2.6"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                APIs under your name
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* ============ LAYER 3 · HOW IT WORKS ============ */}
      <section
        className="section"
        style={{ background: "var(--bg-tint)" }}
        id="how"
      >
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow">Simple by design</span>
            <h2>From partner to platform owner in 4 steps</h2>
            <p>
              No infrastructure to build, no operator agreements to chase, no
              compliance maze. You bring the customers — we bring everything
              else.
            </p>
          </div>
          <div className="wl-how">
            <div className="wl-hstep reveal">
              <div className="n">1</div>
              <h3>Partner with us</h3>
              <p>
                Tell us your market and volumes. We agree partner rates and set
                up your white label reseller account.
              </p>
            </div>
            <div className="wl-hstep reveal d1">
              <div className="n">2</div>
              <h3>Brand your platform</h3>
              <p>
                Your logo, colours, domain and login page go onto the panel.
                Your customers will never see Textspeed.
              </p>
            </div>
            <div className="wl-hstep reveal d2">
              <div className="n">3</div>
              <h3>Set your prices</h3>
              <p>
                You buy at partner rates and sell at yours. Create plans, manage
                credits and invoice customers under your brand.
              </p>
            </div>
            <div className="wl-hstep reveal d3">
              <div className="n">4</div>
              <h3>Sell &amp; grow</h3>
              <p>
                Onboard customers on all five channels while we run delivery,
                uptime, compliance and platform upgrades behind you.
              </p>
            </div>
          </div>
          <p className="wl-time reveal">
            Most partners launch their branded platform{" "}
            <b>within days — not months</b>.
          </p>
        </div>
      </section>

      {/* ============ LAYER 4 · WHY / REVENUE ============ */}
      <section className="section">
        <div className="wrap">
          <div className="wl-rev reveal">
            <div>
              <span className="eyebrow">Why partners choose Textspeed</span>
              <h2>A CPaaS business without the CPaaS burden</h2>
              <span className="text-slate-300 mb-5">
                Building a messaging platform means operator routes, DLT
                processes, Meta partnerships, RCS approvals, uptime engineering
                and a support bench. As a Textspeed white label partner you skip
                all of it — and go straight to selling, with 1B+ messages a year
                of delivery muscle already behind your brand.
              </span>
              <div className="wlh-cta mt-5" >
                <button
                  className="btn btn-white"
                  onClick={() => dispatch(setDemo(true))}
                >
                  Discuss Partner Pricing
                </button>
                <Link className="btn btn-outline-white" href="/company/contact">
                  Contact the Partner Team
                </Link>
              </div>
            </div>
            <div className="wl-points">
              <div className="wl-p">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" width="19" height="19">
                    <path
                      d="M4 19V5M4 19h16M8 15V9M12 15V7M16 15v-4"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
                <div>
                  <b>Recurring revenue, your margin</b>
                  <span>
                    Messaging is monthly, repeat business. You control the
                    markup on every channel.
                  </span>
                </div>
              </div>
              <div className="wl-p">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" width="19" height="19">
                    <circle
                      cx="9"
                      cy="8"
                      r="3"
                      stroke="currentColor"
                      strokeWidth="2"
                    />
                    <path
                      d="M3 20a6 6 0 0112 0M16 6a3 3 0 010 6"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
                <div>
                  <b>Your customers stay yours</b>
                  <span>
                    Accounts, relationships and billing belong to you — we never
                    contact your customers.
                  </span>
                </div>
              </div>
              <div className="wl-p">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" width="19" height="19">
                    <path
                      d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M9 12l2 2 4-4"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinejoin="round"
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
                <div>
                  <b>99.9% uptime &amp; compliance handled</b>
                  <span>
                    Monitored routes, DLT and template support, and platform
                    upgrades — invisible to your customers.
                  </span>
                </div>
              </div>
              <div className="wl-p">
                <div className="ic">
                  <svg viewBox="0 0 24 24" fill="none" width="19" height="19">
                    <circle
                      cx="9"
                      cy="8"
                      r="3"
                      stroke="currentColor"
                      strokeWidth="2"
                    />
                    <path
                      d="M3 20a6 6 0 0112 0M19 8h3M19 12h3"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                    />
                  </svg>
                </div>
                <div>
                  <b>A partner team behind you</b>
                  <span>
                    50+ specialists for escalations, integrations and pre-sales
                    help — under NDA, behind your brand.
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ LAYER 5 · PRICING + FAQ ============ */}
      <WhatsappPricing pageKey="white-label-panel" />

      {/* FAQ SECTION */}
      <HomeFaq pageKey="white-label-panel" />

      {/* TESTIMONIALS SECTION */}
      <HomeTestimonials pageKey="white-label-panel" />

      {/* ASK AI SECTION */}
      <HomeAskAi pageKey="white-label-panel" />

      {/* BOTTOM CTA SECTION */}

    </>
  );
}