"use client";

import { useEffect, useState, useCallback } from "react";
import { useParams } from "next/navigation";
import { Copy, Check, Globe, MessageCircle, Save, Code2, ExternalLink, Layers } from "lucide-react";

type Tab = "script" | "wordpress" | "shopify" | "wix" | "react" | "iframe" | "link" | "whatsapp";

const tabs: { id: Tab; label: string; icon?: string }[] = [
  { id: "script", label: "Script HTML" },
  { id: "wordpress", label: "WordPress" },
  { id: "shopify", label: "Shopify" },
  { id: "wix", label: "Wix / Squarespace" },
  { id: "react", label: "React / Next.js" },
  { id: "iframe", label: "iFrame" },
  { id: "link", label: "Link direct" },
  { id: "whatsapp", label: "WhatsApp" },
];

function CopyBox({ code, lang = "html" }: { code: string; lang?: string }) {
  const [copied, setCopied] = useState(false);
  function copy() { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); }
  return (
    <div className="relative group">
      <pre className="bg-[#080c14] border border-white/[0.08] text-emerald-400 text-xs font-mono px-5 py-4 rounded-xl overflow-x-auto leading-relaxed whitespace-pre-wrap break-all">
        {code}
      </pre>
      <button onClick={copy}
        className="absolute top-2.5 right-2.5 flex items-center gap-1.5 bg-white/[0.08] hover:bg-white/[0.15] text-white text-xs px-3 py-1.5 rounded-lg transition-all">
        {copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
        {copied ? "Copiat!" : "Copiaza"}
      </button>
    </div>
  );
}

function Step({ n, title, children }: { n: number; title: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-4">
      <div className="w-7 h-7 rounded-full bg-indigo-500/10 border border-indigo-500/30 flex items-center justify-center text-xs font-bold text-indigo-400 shrink-0 mt-0.5">{n}</div>
      <div className="flex-1">
        <p className="text-sm font-semibold text-white mb-2">{title}</p>
        {children}
      </div>
    </div>
  );
}

const cardCls = "bg-white/[0.03] border border-white/[0.07] rounded-2xl p-6";
const infoCls = "bg-indigo-500/8 border border-indigo-500/15 rounded-xl p-4 text-sm text-indigo-300";

export default function DeployPage() {
  const { botId } = useParams<{ botId: string }>();
  const [tab, setTab] = useState<Tab>("script");
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [allowedDomains, setAllowedDomains] = useState("");
  const [widgetPosition, setWidgetPosition] = useState("bottom-right");

  const [baseUrl, setBaseUrl] = useState("https://dialpilot.com");
  const [waPhone, setWaPhone] = useState("");
  const [waToken, setWaToken] = useState("");
  const [waVerify, setWaVerify] = useState("");
  const [waSaving, setWaSaving] = useState(false);
  const [waSaved, setWaSaved] = useState(false);
  const [canWhatsApp, setCanWhatsApp] = useState(false);
  const [userPlan, setUserPlan] = useState("FREE");
  const [hasExistingToken, setHasExistingToken] = useState(false);

  useEffect(() => { setBaseUrl(window.location.origin); }, []);
  useEffect(() => {
    fetch("/api/user/plan").then(r => r.json()).then(d => {
      setUserPlan(d.plan ?? "FREE");
      setCanWhatsApp(d.limits?.whatsapp ?? false);
    });
  }, []);
  const scriptCode = `<script src="${baseUrl}/widget/embed.js" data-bot-id="${botId}"></script>`;
  const iframeCode = `<iframe\n  src="${baseUrl}/embed/${botId}"\n  width="400"\n  height="600"\n  frameborder="0"\n  allow="clipboard-write"\n  style="border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.3);"\n></iframe>`;
  const reactCode = `import { useEffect } from 'react';\n\nexport function DialpilotChat() {\n  useEffect(() => {\n    const s = document.createElement('script');\n    s.src = '${baseUrl}/widget/embed.js';\n    s.setAttribute('data-bot-id', '${botId}');\n    document.body.appendChild(s);\n    return () => document.body.removeChild(s);\n  }, []);\n  return null;\n}`;
  const directLink = `${baseUrl}/embed/${botId}`;
  const waWebhookUrl = `${baseUrl}/api/webhooks/whatsapp/${botId}`;

  useEffect(() => {
    fetch(`/api/bots/${botId}`).then(r => r.json()).then(bot => {
      setAllowedDomains(bot.deployment?.allowedDomains ?? "");
      setWidgetPosition(bot.deployment?.widgetPosition ?? "bottom-right");
      setWaPhone(bot.deployment?.whatsappPhone ?? "");
      setWaToken(""); // Token is never returned from API for security
      setHasExistingToken(bot.deployment?.hasWhatsapp ?? false);
      setWaVerify(bot.deployment?.whatsappVerify ?? "");
    });
  }, [botId]);

  async function saveWhatsApp() {
    setWaSaving(true);
    await fetch(`/api/bots/${botId}`, { method: "PUT", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ deployment: { allowedDomains, widgetPosition, whatsappPhone: waPhone, whatsappToken: waToken, whatsappVerify: waVerify } }) });
    setWaSaving(false); setWaSaved(true); setTimeout(() => setWaSaved(false), 2000);
  }

  async function saveDeployment() {
    setSaving(true);
    await fetch(`/api/bots/${botId}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ deployment: { allowedDomains, widgetPosition } }) });
    setSaving(false); setSaved(true); setTimeout(() => setSaved(false), 2000);
  }

  return (
    <div className="p-8 max-w-3xl mx-auto">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-white">Instalare chatbot</h1>
        <p className="text-slate-500 mt-1 text-sm">Alege metoda de instalare potrivita platformei tale.</p>
      </div>

      {/* Tab buttons */}
      <div className="flex flex-wrap gap-1.5 mb-6">
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)}
            className={`px-3.5 py-2 rounded-xl text-xs font-semibold transition-all ${tab === t.id ? "bg-indigo-600 text-white shadow-lg shadow-indigo-500/20" : "bg-white/[0.04] border border-white/[0.08] text-slate-400 hover:text-white hover:border-white/[0.15]"}`}>
            {t.label}
          </button>
        ))}
      </div>

      {/* ── Script HTML ── */}
      {tab === "script" && (
        <div className="space-y-5">
          <div className={cardCls}>
            <h2 className="font-semibold text-white mb-1">Instalare universala prin script</h2>
            <p className="text-sm text-slate-500 mb-4">Functioneaza pe orice site HTML. Lipeste codul inainte de <code className="text-indigo-400">&lt;/body&gt;</code>.</p>
            <CopyBox code={scriptCode} />
          </div>
          <div className={cardCls}>
            <h2 className="font-semibold text-white mb-4">Setari widget</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Pozitia pe ecran</label>
                <select value={widgetPosition} onChange={e => setWidgetPosition(e.target.value)}
                  className="w-full bg-white/[0.04] border border-white/[0.1] rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50">
                  <option value="bottom-right">Dreapta-jos (recomandat)</option>
                  <option value="bottom-left">Stanga-jos</option>
                </select>
              </div>
              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Domenii permise (securitate)</label>
                <input value={allowedDomains} onChange={e => setAllowedDomains(e.target.value)}
                  className="w-full bg-white/[0.04] border border-white/[0.1] rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
                  placeholder="exemplu.ro, shop.exemplu.com" />
                <p className="text-xs text-slate-600 mt-1.5">Lasa gol pentru orice domeniu. Specificarea domeniului previne utilizarea neautorizata.</p>
              </div>
              <button onClick={saveDeployment} disabled={saving}
                className="flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-500 hover:to-violet-500 text-white px-5 py-2.5 rounded-xl text-sm font-bold transition-all shadow-lg shadow-indigo-500/20 disabled:opacity-50">
                <Save className="w-4 h-4" />
                {saving ? "Se salveaza..." : saved ? "✓ Salvat!" : "Salveaza setarile"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── WordPress ── */}
      {tab === "wordpress" && (
        <div className={`${cardCls} space-y-6`}>
          <div>
            <h2 className="font-semibold text-white mb-1">Instalare WordPress</h2>
            <p className="text-sm text-slate-500 mb-5">2 metode disponibile — alege-o pe cea mai simpla pentru tine.</p>
          </div>

          <div className="space-y-5">
            <div className="bg-emerald-500/8 border border-emerald-500/20 rounded-xl px-4 py-3">
              <p className="text-xs font-bold text-emerald-400 uppercase tracking-wide mb-1">Metoda 1 — Plugin (recomandat, 2 minute)</p>
              <p className="text-sm text-emerald-300/80">Nu necesita cunostinte tehnice.</p>
            </div>
            <Step n={1} title='Instaleaza pluginul "Insert Headers and Footers"'>
              <p className="text-xs text-slate-400">In WordPress Dashboard → Plugins → Add New → cauta <strong className="text-white">"Insert Headers and Footers"</strong> → Install → Activate</p>
            </Step>
            <Step n={2} title="Mergi la Settings → Insert Headers and Footers">
              <p className="text-xs text-slate-400">In sectiunea <strong className="text-white">Scripts in Footer</strong>, lipeste codul de mai jos:</p>
            </Step>
            <Step n={3} title="Copiaza si lipeste codul">
              <CopyBox code={scriptCode} />
            </Step>
            <Step n={4} title="Salveaza si verifica">
              <p className="text-xs text-slate-400">Click <strong className="text-white">Save</strong>. Deschide site-ul tau intr-o fereastra noua — chatbotul apare in coltul din dreapta-jos. ✅</p>
            </Step>
          </div>

          <div className="border-t border-white/[0.06] pt-5 space-y-4">
            <div className="bg-slate-500/8 border border-slate-500/20 rounded-xl px-4 py-3">
              <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-1">Metoda 2 — Editare directa tema (avansat)</p>
            </div>
            <Step n={1} title="Mergi la Aspect → Editor Teme">
              <p className="text-xs text-slate-400">In stanga, selecteaza fisierul <strong className="text-white">footer.php</strong></p>
            </Step>
            <Step n={2} title="Adauga codul inainte de </body>">
              <CopyBox code={scriptCode} />
            </Step>
          </div>
        </div>
      )}

      {/* ── Shopify ── */}
      {tab === "shopify" && (
        <div className={`${cardCls} space-y-6`}>
          <div>
            <h2 className="font-semibold text-white mb-1">Instalare Shopify</h2>
            <p className="text-sm text-slate-500">Adauga chatbotul in magazinul tau online in 3 pasi.</p>
          </div>
          <Step n={1} title="Mergi la Online Store → Themes">
            <p className="text-xs text-slate-400">In Shopify Admin, click <strong className="text-white">Online Store</strong> → <strong className="text-white">Themes</strong></p>
          </Step>
          <Step n={2} title='Click "Actions" → "Edit Code"'>
            <p className="text-xs text-slate-400">Langa tema ta activa, click butonul <strong className="text-white">Actions</strong> si selecteaza <strong className="text-white">Edit code</strong></p>
          </Step>
          <Step n={3} title="Deschide fisierul theme.liquid">
            <p className="text-xs text-slate-400 mb-2">In lista de fisiere din stanga, gaseste si deschide <strong className="text-white">theme.liquid</strong></p>
            <p className="text-xs text-slate-400 mb-2">Gaseste tagul <code className="text-indigo-400">&lt;/body&gt;</code> (spre finalul fisierului) si lipeste codul inainte de el:</p>
            <CopyBox code={scriptCode} />
          </Step>
          <Step n={4} title='Click "Save" si verifica'>
            <p className="text-xs text-slate-400">Viziteaza magazinul tau — chatbotul apare automat pe toate paginile. ✅</p>
          </Step>
          <div className={infoCls}>
            💡 <strong>Sfat:</strong> Chatbotul poate raspunde automat la intrebari despre produse, livrare, retur si statusul comenzilor — reducand volumul de suport cu pana la 60%.
          </div>
        </div>
      )}

      {/* ── Wix / Squarespace ── */}
      {tab === "wix" && (
        <div className={`${cardCls} space-y-6`}>
          <div>
            <h2 className="font-semibold text-white mb-1">Instalare Wix / Squarespace</h2>
            <p className="text-sm text-slate-500">Foloseste sectiunea de cod personalizat sau HTML embed.</p>
          </div>

          <div className="space-y-5">
            <div className="bg-indigo-500/8 border border-indigo-500/20 rounded-xl px-4 py-3">
              <p className="text-xs font-bold text-indigo-400 uppercase tracking-wide mb-0.5">Wix</p>
            </div>
            <Step n={1} title="Mergi la Settings → Custom Code">
              <p className="text-xs text-slate-400">In Wix Dashboard: <strong className="text-white">Settings → Custom Code → + Add Custom Code</strong></p>
            </Step>
            <Step n={2} title="Configureaza si lipeste codul">
              <p className="text-xs text-slate-400 mb-2">Selecteaza <strong className="text-white">Body - end</strong>, aplica pe <strong className="text-white">All Pages</strong>, si lipeste:</p>
              <CopyBox code={scriptCode} />
            </Step>
            <Step n={3} title="Click Apply si publica site-ul">
              <p className="text-xs text-slate-400">Apasa <strong className="text-white">Apply</strong>, apoi <strong className="text-white">Publish</strong> site-ul. Gata! ✅</p>
            </Step>
          </div>

          <div className="border-t border-white/[0.06] pt-5 space-y-4">
            <div className="bg-slate-500/8 border border-slate-500/20 rounded-xl px-4 py-3">
              <p className="text-xs font-bold text-slate-400 uppercase tracking-wide mb-0.5">Squarespace</p>
            </div>
            <Step n={1} title="Mergi la Settings → Advanced → Code Injection">
              <p className="text-xs text-slate-400">In Squarespace, <strong className="text-white">Settings → Advanced → Code Injection</strong></p>
            </Step>
            <Step n={2} title="Lipeste in sectiunea Footer">
              <CopyBox code={scriptCode} />
            </Step>
          </div>
        </div>
      )}

      {/* ── React / Next.js ── */}
      {tab === "react" && (
        <div className={`${cardCls} space-y-5`}>
          <div>
            <h2 className="font-semibold text-white mb-1">Instalare React / Next.js</h2>
            <p className="text-sm text-slate-500">Importa ca un component React si foloseste oriunde in aplicatie.</p>
          </div>
          <Step n={1} title="Creeaza un component nou DialpilotChat.tsx">
            <CopyBox code={reactCode} lang="tsx" />
          </Step>
          <Step n={2} title="Importa in layout-ul principal">
            <CopyBox code={`// app/layout.tsx sau _app.tsx\nimport { DialpilotChat } from '@/components/DialpilotChat';\n\nexport default function Layout({ children }) {\n  return (\n    <html>\n      <body>\n        {children}\n        <DialpilotChat />\n      </body>\n    </html>\n  );\n}`} lang="tsx" />
          </Step>
          <div className={infoCls}>
            💡 In Next.js, asigura-te ca folosesti <code className="text-white">"use client"</code> sau un layout client-side pentru a putea folosi <code className="text-white">useEffect</code>.
          </div>
        </div>
      )}

      {/* ── iFrame ── */}
      {tab === "iframe" && (
        <div className={`${cardCls} space-y-5`}>
          <div>
            <h2 className="font-semibold text-white mb-1">Embed prin iFrame</h2>
            <p className="text-sm text-slate-500">Integreaza chatbotul ca un element inline in pagina — ideal pentru pagini de suport dedicate sau sectiuni specifice.</p>
          </div>
          <CopyBox code={iframeCode} />
          <div className="bg-amber-500/8 border border-amber-500/20 rounded-xl p-4 text-sm text-amber-300">
            ⚠️ <strong>Diferenta fata de script:</strong> iFrame-ul afiseaza chatbotul static in pagina (nu ca buton flotant). Potrivit pentru o pagina de suport dedicata sau o sectiune "Chat cu noi".
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Personalizeaza dimensiunile</label>
            <p className="text-xs text-slate-500">Modifica <code className="text-indigo-400">width</code> si <code className="text-indigo-400">height</code> dupa nevoie. Recomandat: min 350×500px.</p>
          </div>
        </div>
      )}

      {/* ── Link direct ── */}
      {tab === "link" && (
        <div className={`${cardCls} space-y-5`}>
          <div>
            <h2 className="font-semibold text-white mb-1">Link direct catre chatbot</h2>
            <p className="text-sm text-slate-500">Trimite clientilor un link direct catre chatbot — ideal pentru email, SMS, sau un buton pe site.</p>
          </div>
          <CopyBox code={directLink} />
          <div className="space-y-4">
            <div>
              <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">Buton HTML pentru site</p>
              <CopyBox code={`<a href="${directLink}" target="_blank" rel="noopener"\n   style="display:inline-flex;align-items:center;gap:8px;background:#6366f1;color:#fff;padding:12px 20px;border-radius:12px;text-decoration:none;font-family:system-ui,sans-serif;font-weight:600;font-size:14px;">\n  💬 Chateaza cu noi\n</a>`} />
            </div>
            <div>
              <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">Link pentru email / newsletter</p>
              <CopyBox code={`Ai intrebari? Chateaza cu asistentul nostru AI:\n${directLink}`} />
            </div>
            <div>
              <p className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">QR Code</p>
              <p className="text-xs text-slate-500">Genereaza un QR code cu link-ul de mai sus pe <a href="https://qr.io" target="_blank" className="text-indigo-400 hover:text-indigo-300">qr.io</a> sau <a href="https://www.qrcode-monkey.com" target="_blank" className="text-indigo-400 hover:text-indigo-300">qrcode-monkey.com</a> — ideal pentru print, meniu, afisaj.</p>
            </div>
          </div>
        </div>
      )}

      {/* ── WhatsApp ── */}
      {tab === "whatsapp" && !canWhatsApp && (
        <div className="rounded-2xl border border-green-500/20 p-10 text-center" style={{ background: "linear-gradient(135deg, rgba(34,197,94,0.05), rgba(99,102,241,0.05))" }}>
          <div className="w-14 h-14 rounded-2xl bg-green-500/10 border border-green-500/20 flex items-center justify-center text-2xl mx-auto mb-4">
            <MessageCircle className="w-7 h-7 text-green-400" />
          </div>
          <h3 className="text-lg font-bold text-white mb-2">WhatsApp Business</h3>
          <p className="text-slate-400 text-sm mb-1">Integrarea WhatsApp este disponibila doar pe planul <strong className="text-violet-400">PRO</strong> sau superior.</p>
          <p className="text-slate-500 text-xs mb-6">Planul tau curent: <span className="text-white font-semibold">{userPlan}</span></p>
          <a href="/billing"
            className="inline-flex items-center gap-2 bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white px-6 py-3 rounded-xl text-sm font-bold transition-all shadow-lg shadow-violet-500/20">
            Upgrade la PRO →
          </a>
        </div>
      )}
      {tab === "whatsapp" && canWhatsApp && (
        <div className="space-y-5">
          <div className={cardCls}>
            <div className="flex items-start gap-3 mb-5">
              <div className="w-10 h-10 bg-green-500/10 border border-green-500/20 rounded-xl flex items-center justify-center shrink-0">
                <MessageCircle className="w-5 h-5 text-green-400" />
              </div>
              <div>
                <h2 className="font-semibold text-white mb-1">WhatsApp Business Cloud API</h2>
                <p className="text-sm text-slate-500">Conecteaza numarul de WhatsApp Business — botul raspunde automat la mesaje.</p>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Phone Number ID</label>
                <input value={waPhone} onChange={e => setWaPhone(e.target.value)}
                  className="w-full bg-white/[0.04] border border-white/[0.1] rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-green-500/40"
                  placeholder="ex: 123456789012345" />
                <p className="text-xs text-slate-600 mt-1">Meta Developer Console → WhatsApp → Phone Numbers → Phone number ID</p>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Access Token (Permanent)</label>
                <input value={waToken} onChange={e => { setWaToken(e.target.value); setHasExistingToken(false); }} type="password"
                  className="w-full bg-white/[0.04] border border-white/[0.1] rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-green-500/40"
                  placeholder={hasExistingToken ? "Token configurat — introdu din nou pentru a-l schimba" : "EAAxxxxx..."} />
                {hasExistingToken && !waToken && (
                  <p className="text-xs text-emerald-500 mt-1 flex items-center gap-1">
                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
                    Token activ configurat. Lasa gol pentru a-l pastra.
                  </p>
                )}
                <p className="text-xs text-slate-600 mt-1">Meta Developer Console → System User → Generate Token. Foloseste un <strong className="text-slate-400">System User Token permanent</strong>, nu cel temporar.</p>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Verify Token (alege tu)</label>
                <input value={waVerify} onChange={e => setWaVerify(e.target.value)}
                  className="w-full bg-white/[0.04] border border-white/[0.1] rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-green-500/40"
                  placeholder="ex: dialpilot_verify_abc123" />
                <p className="text-xs text-slate-600 mt-1">Orice string secret ales de tine — il vei folosi la configurarea webhook-ului in Meta.</p>
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">Webhook URL (copiaza in Meta)</label>
                <div className="relative">
                  <code className="block bg-[#080c14] border border-green-500/20 text-green-400 text-xs font-mono px-4 py-3 rounded-xl pr-24 break-all">
                    {waWebhookUrl}
                  </code>
                  <button onClick={() => navigator.clipboard.writeText(waWebhookUrl)}
                    className="absolute right-2 top-2 text-xs bg-white/[0.08] hover:bg-white/[0.15] text-white px-3 py-1.5 rounded-lg transition-all">
                    Copiaza
                  </button>
                </div>
              </div>

              <button onClick={saveWhatsApp} disabled={waSaving}
                className="flex items-center gap-2 bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500 text-white px-5 py-2.5 rounded-xl text-sm font-bold transition-all shadow-lg shadow-green-500/20 disabled:opacity-50">
                <Save className="w-4 h-4" />
                {waSaving ? "Se salveaza..." : waSaved ? "✓ Salvat!" : "Salveaza configuratia"}
              </button>
            </div>
          </div>

          <div className={`${cardCls} space-y-4`}>
            <h3 className="font-semibold text-white text-sm">Ghid de configurare Meta</h3>
            <Step n={1} title="Creeaza o aplicatie Meta for Developers">
              <p className="text-xs text-slate-400">Mergi la <a href="https://developers.facebook.com" target="_blank" className="text-green-400 hover:text-green-300">developers.facebook.com</a> → My Apps → Create App → Business</p>
            </Step>
            <Step n={2} title="Adauga produsul WhatsApp">
              <p className="text-xs text-slate-400">In dashboard-ul aplicatiei, click <strong className="text-white">Add Product</strong> → <strong className="text-white">WhatsApp</strong> → Set Up</p>
            </Step>
            <Step n={3} title="Configureaza webhook-ul">
              <p className="text-xs text-slate-400">WhatsApp → Configuration → Webhook → Edit. Lipeste URL-ul de mai sus si Verify Token-ul ales. Subscrie la evenimentul <strong className="text-white">messages</strong>.</p>
            </Step>
            <Step n={4} title="Salveaza si testeaza">
              <p className="text-xs text-slate-400">Trimite un mesaj pe numarul tau de WhatsApp Business — botul va raspunde automat! ✅</p>
            </Step>
            <div className={infoCls}>
              💡 <strong>Sfat:</strong> Foloseste un <strong>System User</strong> cu un token permanent (nu expira). Gasesti optiunea in Business Settings → System Users.
            </div>
          </div>
        </div>
      )}
    </div>
  );
}