import { useState } from "react";
import { Link } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import { ContactUsModal, GetPriceModal } from "@/components/ContactModals";
import {
  Check,
  MessageCircle,
  Zap,
  Users,
  Infinity as InfinityIcon,
  Package,
  Download,
  BookOpen,
  ArrowRight,
  Send,
  Bot,
  Calendar,
  List,
  Smartphone,
  ShieldCheck,
  Sparkles,
  Plug,
} from "lucide-react";

// Feature cards shown in the "Put Messaging To Work For Your Business" section.
// Content mirrors the source page (Quick Setup / At The Same Time / Unlimited).
const messagingFeatures = [
  {
    icon: Zap,
    title: "Quick Setup",
    desc: "Activate your WhatsApp API in less than 3 minutes. No complex configuration, no long waiting queues — just connect, verify and start messaging.",
  },
  {
    icon: Users,
    title: "At The Same Time",
    desc: "Broadcast to thousands of customers simultaneously through a single unified API — perfect for notifications, OTPs and marketing campaigns.",
  },
  {
    icon: InfinityIcon,
    title: "Unlimited",
    desc: "No per-message caps on paid tiers. Send rich media, templates, buttons and interactive flows without hidden fees or surprise throttles.",
  },
];

// Plugins / modules available for quick integration with third-party software.
const plugins = [
  {
    title: "WHMCS Module",
    desc: "Send invoices, service suspension, renewal reminders and ticket updates directly through WhatsApp from your WHMCS billing system.",
    tag: "Billing",
  },
  {
    title: "WordPress Plugin",
    desc: "One-click install for WordPress / WooCommerce — order confirmations, shipment tracking and abandoned-cart recovery over WhatsApp.",
    tag: "CMS",
  },
  {
    title: "n8n / Zapier Connector",
    desc: "Hook the Doiteasy WA API into any automation flow — trigger messages from CRMs, forms, sheets or any webhook source.",
    tag: "Automation",
  },
];

// Pricing plans — values taken from the reference page (Free / Starter / Standard).
const plans = [
  {
    name: "Free Plan",
    price: "$0.00",
    cadence: "/month",
    highlight: false,
    cta: "Sign Up Now",
    features: [
      "Messages limit (50)",
      "Contact limit (50)",
      "Device limit (1)",
      "Template limit (0)",
      "Apps limit (1)",
    ],
  },
  {
    name: "Starter Plan",
    price: "$10.00",
    cadence: "/month",
    highlight: true,
    cta: "Free 5 Days Trial",
    features: [
      "Messages limit (unlimited)",
      "Contact limit (100)",
      "Device limit (2)",
      "Template limit (10)",
      "Apps limit (2)",
      "Chatbot",
      "Schedule message",
      "Access chat list",
    ],
  },
  {
    name: "Standard Plan",
    price: "$20.00",
    cadence: "/month",
    highlight: false,
    cta: "Check All Plans",
    features: [
      "Messages limit (unlimited)",
      "Contact limit (unlimited)",
      "Device limit (3)",
      "Template limit (20)",
      "Apps limit (20)",
      "Chatbot",
      "Bulk message",
      "Schedule message",
      "Access chat list",
      "Access group list",
    ],
  },
];

// Core capabilities highlighted next to the chat mockup.
const capabilities = [
  { icon: Bot, label: "Smart Chatbot Flows" },
  { icon: Calendar, label: "Schedule Messages" },
  { icon: List, label: "Contact & Group Lists" },
  { icon: Send, label: "Bulk Broadcast" },
  { icon: ShieldCheck, label: "End-to-End Encryption" },
  { icon: Smartphone, label: "Multi-Device Support" },
];

// Use cases for the “Who benefits” block.
const useCases = [
  {
    icon: "🛒",
    title: "E-commerce",
    desc: "Order confirmations, delivery updates and recover abandoned carts automatically.",
  },
  {
    icon: "🏦",
    title: "Banking & Fintech",
    desc: "OTP verification, transaction alerts and customer service over a secure channel.",
  },
  {
    icon: "📅",
    title: "Clinics & Salons",
    desc: "Appointment reminders, booking confirmations and review requests.",
  },
  {
    icon: "🎓",
    title: "Education",
    desc: "Class schedules, fee reminders and parent-teacher notifications.",
  },
  {
    icon: "📞",
    title: "Customer Support",
    desc: "Turn WhatsApp into a full helpdesk with tickets, queues and agent handoff.",
  },
  {
    icon: "📢",
    title: "Marketing",
    desc: "Segmented broadcasts, promo campaigns and rich-media templates approved by Meta.",
  },
];

export default function WhatsAppAPI() {
  const [priceOpen, setPriceOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);

  return (
    <SiteLayout>
      {/* HERO — Doiteasy WA WhatsApp API.
          Dark gradient background with WhatsApp-green accents, plus the small
          "anchor nav" (Messaging / WhatsApp API / Pricing) found on the live
          reference page. */}
      <section className="relative overflow-hidden bg-[#03120a] text-white">
        {/* Background decoration */}
        <div className="absolute inset-0 -z-0">
          <div className="absolute inset-0 bg-gradient-to-br from-[#03120a] via-[#063019] to-[#0b6e3e]" />
          <div className="absolute -top-32 -right-32 w-[40rem] h-[40rem] rounded-full bg-[#25D366]/20 blur-3xl" />
          <div className="absolute -bottom-40 -left-24 w-[36rem] h-[36rem] rounded-full bg-[#0b6e3e]/40 blur-3xl" />
          <div
            className="absolute inset-0 opacity-20"
            style={{
              backgroundImage:
                "radial-gradient(rgba(255,255,255,0.3) 1px, transparent 1px)",
              backgroundSize: "24px 24px",
            }}
          />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* LEFT: headline + CTAs */}
            <AnimateIn direction="right">
              <div className="inline-flex items-center gap-2 bg-[#25D366]/15 border border-[#25D366]/40 backdrop-blur-sm rounded-full px-4 py-1.5 text-xs md:text-sm mb-5">
                <span className="w-2 h-2 rounded-full bg-[#25D366] animate-pulse" />
                Official WhatsApp Business API partner
              </div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-4">
                Doiteasy WA{" "}
                <span className="text-[#25D366]">WhatsApp API</span>
              </h1>
              <p className="text-xl md:text-2xl text-slate-200 mb-3 font-semibold">
                Your Business WhatsApp API Way
              </p>
              <p className="text-slate-300 mb-8 leading-relaxed max-w-xl">
                Now fully integrated with dynamic monitoring dashboards. Send
                transactional messages, OTPs and rich media to your customers
                from any site or application — without being online.
              </p>

              <div className="flex flex-wrap gap-3 mb-5">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-7 py-3.5 rounded-md bg-[#25D366] text-[#03120a] font-bold hover:bg-[#1fbf5a] transition shadow-2xl shadow-[#25D366]/30 inline-flex items-center gap-2"
                >
                  <MessageCircle className="w-5 h-5" /> Try for Free
                </button>
                <a
                  href="https://whatsapp.doiteasy.net/register/4"
                  target="_blank"
                  rel="noreferrer"
                  className="px-7 py-3.5 rounded-md bg-white/10 border border-white/20 text-white font-bold hover:bg-white/20 transition backdrop-blur-sm inline-flex items-center gap-2"
                >
                  Subscribe Now <ArrowRight className="w-4 h-4" />
                </a>
              </div>
              <p className="text-xs text-slate-400">
                No credit card required for the trial period
              </p>
            </AnimateIn>

            {/* RIGHT: phone / chat mockup */}
            <AnimateIn direction="left" delay={150} className="relative">
              <div className="relative mx-auto w-full max-w-md">
                {/* Floating badge */}
                <div className="absolute -top-4 -left-4 z-10 bg-white text-slate-900 rounded-2xl shadow-xl px-4 py-2.5 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-[#25D366] animate-pulse" />
                  <span className="text-xs font-bold">
                    Live Delivery Rate · 99.4%
                  </span>
                </div>

                {/* Phone frame */}
                <div className="relative rounded-[2.5rem] border-[8px] border-slate-900 bg-slate-900 shadow-2xl overflow-hidden">
                  {/* WhatsApp header */}
                  <div className="bg-[#075E54] text-white px-4 py-3 flex items-center gap-3">
                    <div className="w-9 h-9 rounded-full bg-[#25D366] text-[#03120a] flex items-center justify-center font-bold">
                      DE
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-bold leading-tight">
                        Doiteasy WA
                      </div>
                      <div className="text-[11px] text-emerald-200">
                        online
                      </div>
                    </div>
                    <MessageCircle className="w-4 h-4 opacity-80" />
                  </div>

                  {/* Chat body */}
                  <div
                    className="px-4 py-5 space-y-3 min-h-[340px]"
                    style={{
                      backgroundColor: "#ECE5DD",
                      backgroundImage:
                        "radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px)",
                      backgroundSize: "14px 14px",
                    }}
                  >
                    {/* Incoming */}
                    <div className="flex">
                      <div className="bg-white text-slate-800 rounded-2xl rounded-tl-md px-3 py-2 max-w-[80%] shadow-sm">
                        <p className="text-xs">
                          Hi 👋 Welcome to <b>Doiteasy WA</b>. How can I help
                          you today?
                        </p>
                        <p className="text-[9px] text-slate-400 mt-1 text-right">
                          09:41
                        </p>
                      </div>
                    </div>

                    {/* Outgoing */}
                    <div className="flex justify-end">
                      <div className="bg-[#DCF8C6] text-slate-800 rounded-2xl rounded-tr-md px-3 py-2 max-w-[80%] shadow-sm">
                        <p className="text-xs">I want to try the API 🚀</p>
                        <p className="text-[9px] text-slate-500 mt-1 text-right">
                          09:41 ✓✓
                        </p>
                      </div>
                    </div>

                    {/* Incoming with template */}
                    <div className="flex">
                      <div className="bg-white text-slate-800 rounded-2xl rounded-tl-md px-3 py-2 max-w-[85%] shadow-sm">
                        <p className="text-xs font-semibold mb-1">
                          🎁 Free 7-day trial
                        </p>
                        <p className="text-xs text-slate-600">
                          Unlimited messages · Chatbot · Schedules · Plugins
                        </p>
                        <div className="mt-2 pt-2 border-t border-slate-100 grid grid-cols-1 gap-1">
                          <button
                            type="button"
                            className="text-[11px] font-semibold text-[#0b6e3e] hover:underline text-left"
                          >
                            ▶ Start my free trial
                          </button>
                        </div>
                        <p className="text-[9px] text-slate-400 mt-1 text-right">
                          09:42
                        </p>
                      </div>
                    </div>

                    {/* Typing */}
                    <div className="flex">
                      <div className="bg-white rounded-2xl rounded-tl-md px-3 py-2 shadow-sm inline-flex items-center gap-1">
                        <span className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-bounce [animation-delay:-0.3s]" />
                        <span className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-bounce [animation-delay:-0.15s]" />
                        <span className="w-1.5 h-1.5 rounded-full bg-slate-400 animate-bounce" />
                      </div>
                    </div>
                  </div>

                  {/* Input bar */}
                  <div className="bg-[#F0F0F0] px-3 py-2 flex items-center gap-2">
                    <div className="flex-1 bg-white rounded-full px-3 py-1.5 text-xs text-slate-400">
                      Type a message…
                    </div>
                    <div className="w-8 h-8 rounded-full bg-[#25D366] text-white flex items-center justify-center">
                      <Send className="w-4 h-4" />
                    </div>
                  </div>
                </div>

                {/* Floating stats cards */}
                <div className="absolute -bottom-4 -right-4 bg-white text-slate-900 rounded-2xl shadow-xl px-4 py-2.5">
                  <div className="text-[11px] text-slate-500">
                    Messages sent today
                  </div>
                  <div className="text-lg font-extrabold text-[#0b6e3e]">
                    148,392
                  </div>
                </div>
              </div>
            </AnimateIn>
          </div>

          {/* Anchor nav */}
          <div className="mt-16 flex flex-wrap justify-center gap-4 text-sm">
            {[
              { href: "#messaging", label: "Messaging" },
              { href: "#whatsapp-api", label: "WhatsApp API" },
              { href: "#pricing", label: "Pricing" },
            ].map((a) => (
              <a
                key={a.href}
                href={a.href}
                className="px-5 py-2 rounded-full bg-white/10 border border-white/20 text-white font-semibold hover:bg-white/20 transition backdrop-blur-sm"
              >
                {a.label}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* MESSAGING — Put Messaging To Work For Your Business */}
      <section id="messaging" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-14 max-w-3xl mx-auto">
            <span className="text-[#25D366] font-bold uppercase tracking-widest text-sm">
              Messaging
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-4">
              Put Messaging To Work For Your Business
            </h2>
            <p className="text-slate-600 leading-relaxed">
              Connect your WhatsApp with{" "}
              <span className="font-bold text-[#0b6e3e]">
                Doiteasy WA Messenger
              </span>{" "}
              and message your customers from your site or application — without
              being online.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-3 gap-6">
            {messagingFeatures.map((f, idx) => (
              <AnimateIn
                key={f.title}
                direction="up"
                delay={idx * 150}
                className="group relative rounded-3xl p-8 bg-gradient-to-br from-white to-slate-50 border border-slate-200 hover:border-[#25D366] hover:shadow-2xl transition"
              >
                <div className="w-16 h-16 rounded-2xl bg-[#25D366]/15 text-[#0b6e3e] flex items-center justify-center mb-5 group-hover:bg-[#25D366] group-hover:text-white transition">
                  <f.icon className="w-7 h-7" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-2">
                  {f.title}
                </h3>
                <p className="text-slate-600 leading-relaxed">{f.desc}</p>
                <span className="absolute top-6 right-6 text-5xl font-extrabold text-slate-100 group-hover:text-[#25D366]/20 transition">
                  0{idx + 1}
                </span>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* PLUGINS — Send Messages To Customer's WhatsApp With Plugins */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-14 max-w-3xl mx-auto">
            <span className="text-[#25D366] font-bold uppercase tracking-widest text-sm">
              Plugins &amp; Modules
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-4">
              Send Messages To Customer&apos;s WhatsApp With Plugins
            </h2>
            <p className="text-slate-600 leading-relaxed">
              Easily send messages to customers by connecting WhatsApp to{" "}
              <span className="font-bold text-[#0b6e3e]">
                Doiteasy WA Messenger
              </span>{" "}
              and installing the plugin that matches your stack.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-3 gap-6">
            {plugins.map((p, idx) => (
              <AnimateIn
                key={p.title}
                delay={idx * 120}
                className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-sm hover:shadow-xl transition hover:-translate-y-1"
              >
                <div className="h-32 bg-gradient-to-br from-[#0b6e3e] to-[#063019] relative flex items-center justify-center">
                  <div className="w-16 h-16 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center">
                    <Plug className="w-8 h-8 text-white" />
                  </div>
                  <span className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-widest text-[#25D366] bg-[#25D366]/15 px-2.5 py-1 rounded-full border border-[#25D366]/30">
                    {p.tag}
                  </span>
                </div>
                <div className="p-6">
                  <h3 className="text-lg font-bold text-slate-900 mb-2">
                    {p.title}
                  </h3>
                  <p className="text-sm text-slate-600 leading-relaxed mb-5">
                    {p.desc}
                  </p>
                  <button
                    type="button"
                    className="inline-flex items-center gap-2 px-4 py-2 bg-[#0b6e3e] text-white text-sm font-bold rounded-md hover:bg-[#0a8048] transition"
                  >
                    <Download className="w-4 h-4" /> Download
                  </button>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* DEVELOPER HUB + capabilities */}
      <section id="whatsapp-api" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center">
          <AnimateIn direction="right">
            <span className="text-[#25D366] font-bold uppercase tracking-widest text-sm">
              Developer Hub
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-5 leading-tight">
              WhatsApp API Developer Hub
            </h2>
            <p className="text-slate-600 mb-6 leading-relaxed">
              Documentation, training, and resources to help you get more out of
              the WhatsApp Business Platform — templates, webhooks, chatbots,
              broadcast, scheduling and multi-device.
            </p>

            <ul className="space-y-3 mb-8">
              {[
                "REST API with OpenAPI spec + code samples (cURL / Node / PHP / Python)",
                "Webhook delivery for status, replies and media",
                "Rich templates: buttons, list pickers, carousels, location",
                "Opt-in / opt-out, contact lists and broadcast segments",
                "24/7 developer support via ticketing and WhatsApp",
              ].map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="w-5 h-5 rounded-full bg-[#25D366] flex items-center justify-center shrink-0 mt-0.5">
                    <Check className="w-3 h-3 text-white" strokeWidth={3} />
                  </span>
                  <span className="text-slate-700">{t}</span>
                </li>
              ))}
            </ul>

            <div className="flex flex-wrap gap-3">
              <button
                type="button"
                onClick={() => setContactOpen(true)}
                className="px-6 py-3 bg-[#25D366] text-[#03120a] font-bold rounded-md hover:bg-[#1fbf5a] transition shadow-md inline-flex items-center gap-2"
              >
                <BookOpen className="w-4 h-4" /> More Info
              </button>
              <button
                type="button"
                onClick={() => setPriceOpen(true)}
                className="px-6 py-3 !bg-transparent !hover:bg-transparent border-2 border-[#0b6e3e] text-[#0b6e3e] font-bold rounded-md hover:!bg-[#0b6e3e] hover:!text-white transition"
              >
                Get Prices
              </button>
            </div>
          </AnimateIn>

          <AnimateIn direction="left" delay={150}>
            <div className="grid grid-cols-2 gap-4">
              {capabilities.map((c, idx) => (
                <div
                  key={c.label}
                  className="group bg-gradient-to-br from-white to-slate-50 border border-slate-200 rounded-2xl p-5 hover:border-[#25D366] hover:shadow-lg transition"
                  style={{ animationDelay: `${idx * 80}ms` }}
                >
                  <div className="w-11 h-11 rounded-xl bg-[#0b6e3e] text-white flex items-center justify-center mb-3 group-hover:bg-[#25D366] group-hover:text-[#03120a] transition">
                    <c.icon className="w-5 h-5" />
                  </div>
                  <div className="text-sm font-bold text-slate-900">
                    {c.label}
                  </div>
                </div>
              ))}
            </div>

            {/* Code preview card */}
            <div className="mt-6 rounded-2xl bg-slate-900 text-slate-100 p-5 shadow-2xl border border-slate-800">
              <div className="flex items-center gap-1.5 mb-3">
                <span className="w-2.5 h-2.5 rounded-full bg-red-500" />
                <span className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
                <span className="w-2.5 h-2.5 rounded-full bg-green-500" />
                <span className="ml-3 text-[11px] font-mono text-slate-500">
                  POST /v1/messages
                </span>
              </div>
              <pre className="text-[11px] font-mono leading-relaxed overflow-x-auto">
                <code>
                  <span className="text-slate-500">{'// Send a WhatsApp template message'}</span>
                  {"\n"}
                  <span className="text-[#25D366]">curl</span> -X POST{" "}
                  <span className="text-amber-300">
                    https://whatsapp.doiteasy.net/api/v1/messages
                  </span>
                  {"\n  "}-H <span className="text-amber-300">&quot;Authorization: Bearer $TOKEN&quot;</span>
                  {"\n  "}-d <span className="text-amber-300">&apos;{"{"}&quot;to&quot;:&quot;+966500000000&quot;,&quot;template&quot;:&quot;welcome&quot;{"}"}&apos;</span>
                </code>
              </pre>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* USE CASES */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-14 max-w-2xl mx-auto">
            <span className="text-[#25D366] font-bold uppercase tracking-widest text-sm">
              Use Cases
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">
              Who benefits from Doiteasy WA?
            </h2>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {useCases.map((u, idx) => (
              <AnimateIn
                key={u.title}
                delay={idx * 80}
                className="bg-white rounded-2xl border border-slate-200 p-6 hover:border-[#25D366] hover:shadow-xl transition"
              >
                <div className="text-3xl mb-3">{u.icon}</div>
                <h3 className="text-lg font-bold text-slate-900 mb-1.5">
                  {u.title}
                </h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  {u.desc}
                </p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="pricing" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-14 max-w-2xl mx-auto">
            <span className="text-[#25D366] font-bold uppercase tracking-widest text-sm">
              Pricing
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-3">
              Enjoy Interacting With Customers
            </h2>
            <p className="text-slate-600 flex items-center justify-center gap-2">
              <Sparkles className="w-4 h-4 text-[#25D366]" />
              Use &quot;doiteasy&quot; service free for 7 days.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-3 gap-6">
            {plans.map((p, idx) => (
              <AnimateIn
                key={p.name}
                delay={idx * 150}
                className={`relative rounded-3xl p-8 border flex flex-col transition hover:-translate-y-1 hover:shadow-2xl ${
                  p.highlight
                    ? "bg-gradient-to-br from-[#0b6e3e] to-[#063019] text-white border-[#0b6e3e] shadow-2xl scale-[1.03]"
                    : "bg-white text-slate-900 border-slate-200 shadow"
                }`}
              >
                {p.highlight && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#25D366] text-[#03120a] text-xs font-bold px-4 py-1 rounded-full">
                    MOST POPULAR
                  </div>
                )}
                <div className="mb-4">
                  <h3 className="text-xl font-extrabold mb-2">{p.name}</h3>
                  <div>
                    <span
                      className={`text-4xl font-extrabold ${
                        p.highlight ? "text-[#25D366]" : "text-[#0b6e3e]"
                      }`}
                    >
                      {p.price}
                    </span>
                    <span
                      className={`ml-1 text-sm ${
                        p.highlight ? "text-slate-300" : "text-slate-500"
                      }`}
                    >
                      {p.cadence}
                    </span>
                  </div>
                </div>

                <ul
                  className={`space-y-2.5 mb-7 text-sm flex-1 ${
                    p.highlight ? "text-slate-200" : "text-slate-700"
                  }`}
                >
                  {p.features.map((f) => (
                    <li key={f} className="flex items-center gap-2">
                      <Check
                        className={`w-4 h-4 shrink-0 ${
                          p.highlight ? "text-[#25D366]" : "text-[#0b6e3e]"
                        }`}
                        strokeWidth={3}
                      />
                      {f}
                    </li>
                  ))}
                </ul>

                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className={`block text-center py-3 rounded-md font-bold transition ${
                    p.highlight
                      ? "bg-[#25D366] text-[#03120a] hover:bg-[#1fbf5a]"
                      : "bg-[#0b6e3e] text-white hover:bg-[#0a8048]"
                  }`}
                >
                  {p.cta}
                </button>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ — short, matching tone of rest of site */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#25D366] font-bold uppercase tracking-widest text-sm">
              FAQ
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">
              Frequently Asked Questions
            </h2>
          </AnimateIn>

          <div className="space-y-3">
            {[
              {
                q: "Is the Doiteasy WA API an official WhatsApp Business API?",
                a: "Yes. We are an authorized partner and our messages are routed through Meta's official Cloud / On-Premises WhatsApp Business API — fully compliant with WhatsApp Business Policy.",
              },
              {
                q: "How fast can I start sending messages?",
                a: "Once your number is verified (usually within minutes for existing business numbers), you can send your first template message within 3 minutes using our quick-start guide.",
              },
              {
                q: "Do you support chatbots and auto-replies?",
                a: "Yes — both Starter and Standard plans include our visual chatbot builder with triggers, conditions, handoff to live agents and webhook steps.",
              },
              {
                q: "Can I integrate with my website or CRM?",
                a: "Absolutely. We offer official WHMCS, WordPress and n8n/Zapier connectors plus a REST API with code samples in Node / PHP / Python / cURL.",
              },
              {
                q: "Is there a free trial?",
                a: "Yes — enjoy a 7-day free trial with full features. No credit card is required for the trial period.",
              },
            ].map((f, i) => (
              <AnimateIn
                key={i}
                delay={i * 70}
                className="bg-white rounded-2xl border border-slate-200 p-5 hover:border-[#25D366] transition"
              >
                <h4 className="font-bold text-slate-900 mb-2">{f.q}</h4>
                <p className="text-slate-600 leading-relaxed text-sm">{f.a}</p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="py-20 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="rounded-3xl bg-gradient-to-br from-[#0b6e3e] via-[#0a8048] to-[#25D366] text-white p-10 md:p-14 shadow-2xl text-center relative overflow-hidden">
            <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
            <div className="absolute -bottom-20 -left-20 w-72 h-72 rounded-full bg-[#03120a]/30 blur-3xl" />
            <div className="relative">
              <Package className="w-12 h-12 mx-auto mb-5 text-white/90" />
              <h2 className="text-3xl md:text-5xl font-extrabold mb-4">
                Ready to launch your WhatsApp channel?
              </h2>
              <p className="text-slate-100 max-w-2xl mx-auto mb-8">
                Start your 7-day free trial in minutes. Our team will guide you
                through number verification, template approval and your first
                broadcast — at no cost.
              </p>
              <div className="flex flex-wrap justify-center gap-3">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-8 py-3.5 bg-[#f5c400] text-slate-900 font-bold rounded-md hover:bg-yellow-400 transition inline-flex items-center gap-2"
                >
                  <MessageCircle className="w-4 h-4" /> Get Prices
                </button>
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="px-8 py-3.5 bg-white/10 border border-white/30 text-white font-bold rounded-md hover:bg-white/20 transition inline-flex items-center gap-2"
                >
                  Talk to Sales <ArrowRight className="w-4 h-4" />
                </button>
                <Link
                  to="/tickets"
                  className="px-8 py-3.5 !bg-transparent border-2 border-white text-white font-bold rounded-md hover:!bg-white hover:!text-[#0b6e3e] transition"
                >
                  Open a Ticket
                </Link>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* Shared contact modals */}
      <ContactUsModal open={contactOpen} onClose={() => setContactOpen(false)} />
      <GetPriceModal open={priceOpen} onClose={() => setPriceOpen(false)} />
    </SiteLayout>
  );
}