import type { Metadata } from "next";
import { JsonLd } from "@/components/json-ld";
import {
  ServiceLanding,
  type ServiceCapability,
  type ServiceStep,
  type ServiceUseCase,
} from "@/components/service-landing";
import { IndustryWhatsAppMockup } from "@/components/industries/industry-whatsapp-mockup";
import type { FAQ } from "@/content/solutions";
import { site, ogBase, twitterBase } from "@/content/site";

const DESCRIPTION =
  "Automate WhatsApp support, sales and reminders with an AI agent on the official WhatsApp Business API. Qualify leads, book slots and reply 24/7.";

export const metadata: Metadata = {
  title: "WhatsApp Automation for Business — AI Chatbot & API",
  description: DESCRIPTION,
  keywords: [
    "WhatsApp automation",
    "WhatsApp AI agent",
    "official WhatsApp Business API",
    "WhatsApp lead qualification bot",
    "top customer support chat providers with knowledge base search",
    "conversational AI assistant",
    "WhatsApp appointment booking",
    "AI customer service automation",
    "custom website chatbot",
  ],
  alternates: { canonical: "/whatsapp-ai" },
  openGraph: {
    ...ogBase,
    title: "WhatsApp Automation for Business",
    description: DESCRIPTION,
    url: "/whatsapp-ai",
  },
  twitter: {
    ...twitterBase,
    title: "WhatsApp Automation for Business",
    description: DESCRIPTION,
  },
};

const CAPABILITIES: ServiceCapability[] = [
  {
    icon: "MessageCircle",
    title: "Reply instantly, 24/7",
    body: "Answer product, order and support questions in seconds on WhatsApp — no queues, no waiting for business hours.",
  },
  {
    icon: "Users",
    title: "Qualify and capture leads",
    body: "Greet new enquiries, ask qualifying questions and push clean lead data into your CRM automatically.",
  },
  {
    icon: "Calendar",
    title: "Book slots & send reminders",
    body: "Schedule appointments and send automated reminders and nudges that cut no-shows — all inside the chat.",
  },
  {
    icon: "Workflow",
    title: "Interactive flows & buttons",
    body: "Guide customers with buttons, lists and quick replies for catalogues, bookings and FAQs on the official API.",
  },
  {
    icon: "Send",
    title: "Broadcasts & re-engagement",
    body: "Send approved template messages for updates, offers and abandoned-enquiry recovery — compliant with WhatsApp policy.",
  },
  {
    icon: "Repeat",
    title: "Human handoff",
    body: "Escalate to your team with the full conversation history whenever a chat needs a person.",
  },
];

const STEPS: ServiceStep[] = [
  {
    title: "Customer messages",
    body: "A customer messages your WhatsApp — a new enquiry, an order question or a booking request.",
  },
  {
    title: "Understands & replies",
    body: "The agent understands the request and replies instantly on the official WhatsApp Business API.",
  },
  {
    title: "Collects & triggers",
    body: "It qualifies, collects the details you need and triggers the right workflow — booking, CRM or order update.",
  },
  {
    title: "Follows up & converts",
    body: "It sends reminders, re-engages drop-offs and hands off to your team whenever a person is needed.",
  },
];

const USE_CASES: ServiceUseCase[] = [
  {
    tag: "Support",
    title: "Customer support automation",
    body: "Resolve the repetitive questions — order status, hours, policies — and route the rest to your team.",
  },
  {
    tag: "Sales",
    title: "Sales & lead qualification",
    body: "Turn ad clicks and enquiries into qualified leads with instant, on-brand WhatsApp conversations.",
  },
  {
    tag: "Bookings",
    title: "Appointments & reminders",
    body: "Book slots and send automated reminders that cut no-shows, all inside WhatsApp.",
  },
  {
    tag: "Recovery",
    title: "Cart & enquiry recovery",
    body: "Re-engage drop-offs and abandoned enquiries with timely, compliant follow-up messages.",
  },
];

const FAQS: FAQ[] = [
  {
    q: "What is WhatsApp automation?",
    a: "WhatsApp automation uses an AI agent on the WhatsApp Business API to reply to customers, qualify leads, book appointments and send reminders automatically — 24/7, in natural conversation, with a human a tap away.",
  },
  {
    q: "How much does WhatsApp automation cost?",
    a: "There are two parts: WhatsApp's own conversation-based pricing (set by Meta and billed per conversation) and Quto's done-for-you build and management. We show you both up front — share your expected volumes and we'll give you a clear breakdown.",
  },
  {
    q: "Is this the official WhatsApp Business API?",
    a: "Yes. Quto runs on the official WhatsApp Business Platform (Cloud API), so your messaging is compliant and your number can be verified — no unofficial or grey-market workarounds.",
  },
  {
    q: "Can the agent qualify leads and book appointments?",
    a: "Yes. It greets enquiries, asks qualifying questions, books slots against your calendar and syncs everything to your CRM.",
  },
  {
    q: "Does it work in Hindi and other languages?",
    a: "Yes. The agent handles English, Hindi and other major languages with natural, real-time code-switching.",
  },
  {
    q: "Can it send broadcasts and reminders?",
    a: "Yes — using WhatsApp-approved template messages, so updates, offers and reminders stay compliant with WhatsApp's policies.",
  },
  {
    q: "Can a human take over a chat?",
    a: "Any conversation can be escalated to your team with the full history attached, so customers never feel stuck with a bot.",
  },
];

export default function WhatsAppAiPage() {
  const serviceSchema = {
    "@context": "https://schema.org",
    "@type": "Service",
    name: "WhatsApp AI Automation",
    serviceType: "WhatsApp Business API automation and AI chatbot",
    description: DESCRIPTION,
    provider: { "@type": "Organization", name: site.name, url: site.url },
    areaServed: ["IN", "AE", "GB", "US"],
    audience: { "@type": "Audience", audienceType: "Businesses" },
    url: `${site.url}/whatsapp-ai`,
  };

  const breadcrumbSchema = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: site.url },
      { "@type": "ListItem", position: 2, name: "WhatsApp AI Automation", item: `${site.url}/whatsapp-ai` },
    ],
  };

  const faqSchema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: FAQS.map((faq) => ({
      "@type": "Question",
      name: faq.q,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.a,
      },
    })),
  };

  return (
    <>
      <JsonLd data={[serviceSchema, breadcrumbSchema, faqSchema]} />
      <ServiceLanding
        breadcrumbLabel="WhatsApp AI"
        eyebrow="WhatsApp AI Automation"
        h1={
          <>
            WhatsApp automation that replies, qualifies and{" "}
            <span className="font-extrabold text-gradient-brand">books — 24/7</span>
          </>
        }
        sub="Quto builds and runs an AI agent on the official WhatsApp Business API — automating support, sales, bookings and reminders where your customers already chat."
        primaryCtaLabel="Book a demo"
        heroVisual={
          <IndustryWhatsAppMockup
            chatTitle="Quto WhatsApp Agent"
            chatSubtitle="online"
            messages={[
              { from: "user", text: "Hi, is my order shipped yet?", time: "10:12" },
              { from: "agent", text: "Hi! Yes — order #4821 shipped today and arrives tomorrow. Want the tracking link?", time: "10:12" },
              { from: "user", text: "Yes please. Can I also add one more item?", time: "10:13" },
              { from: "agent", text: "Sure — here's your tracking link, and I've started a new order. Tap below to confirm. 🛒", time: "10:13" },
            ]}
          />
        }
        capabilitiesTitle={
          <>
            What WhatsApp <span className="text-gradient-brand font-extrabold">AI automation</span> does
          </>
        }
        capabilitiesLead="One agent for the whole conversation — reply, qualify, book and follow up, with a clean handoff whenever a human is needed."
        capabilities={CAPABILITIES}
        stepsTitle={
          <>
            How a <span className="text-gradient-brand font-extrabold">WhatsApp chat</span> flows
          </>
        }
        steps={STEPS}
        useCasesTitle={
          <>
            Built for real <span className="text-gradient-brand font-extrabold">WhatsApp</span> workflows
          </>
        }
        useCases={USE_CASES}
        pricingTitle={
          <>
            How WhatsApp automation <span className="text-gradient-brand font-extrabold">pricing</span> works
          </>
        }
        pricingBody="Two things drive cost: WhatsApp's own conversation-based pricing (set by Meta and billed per conversation) and Quto's done-for-you build and management. We keep it transparent — you'll know what the platform charges and what we charge before you commit. Tell us your volumes and we'll break it down."
        faqsTitle={
          <>
            WhatsApp automation, <span className="text-gradient-brand font-extrabold">answered</span>
          </>
        }
        faqs={FAQS}
        relatedLinks={[
          { label: "Voice AI agents", href: "/voice-ai" },
          { label: "AI agents for healthcare", href: "/industries/healthcare" },
          { label: "AI agents for automobile", href: "/industries/automobile" },
          { label: "AI agents for real estate", href: "/industries/real-estate" },
          { label: "All industries", href: "/industries" },
        ]}
        ctaTitle={
          <>
            Ready to automate your <span className="font-extrabold text-gradient-brand">WhatsApp</span>?
          </>
        }
        ctaDescription="Book a 20-minute demo — we'll map your WhatsApp support, sales and reminders and show you exactly how an AI agent would handle them."
      />
    </>
  );
}