import type { MetaFunction } from "react-router";
import { useState } from "react";
import { FAIcon } from "../components/FAIcon";

export const meta: MetaFunction = () => [
  { title: "Merchant Documentation – ShopPilot AI Assistant" },
  {
    name: "description",
    content: "Official merchant documentation and setup guide for ShopPilot AI Shopping Assistant & Customer Support Chatbot for Shopify stores.",
  },
];

interface DocSection {
  id: string;
  title: string;
  icon: string;
  badge?: string;
}

const SECTIONS: DocSection[] = [
  { id: "overview", title: "1. Overview & Key Benefits", icon: "sparkles" },
  { id: "quickstart", title: "2. 3-Minute Quick Setup", icon: "rocket", badge: "Essential" },
  { id: "theme-embed", title: "3. Enabling Theme App Embed", icon: "paintbrush", badge: "Required" },
  { id: "storefront-widget", title: "4. Storefront Widget Features", icon: "comments" },
  { id: "branding", title: "5. Branding & Color Styling", icon: "palette" },
  { id: "ai-configuration", title: "6. AI Engine & Personality", icon: "robot" },
  { id: "knowledge-base", title: "7. Knowledge Base & Catalog Sync", icon: "book" },
  { id: "orders-auth", title: "8. Order Tracking & Customer Auth", icon: "box-open" },
  { id: "helpline-shipping", title: "9. Helpline & Shipping Policies", icon: "truck-fast" },
  { id: "live-preview", title: "10. Real-Time Admin Preview", icon: "desktop" },
  { id: "plans-billing", title: "11. Plans & Billing Guide", icon: "credit-card" },
  { id: "troubleshooting", title: "12. Troubleshooting & FAQs", icon: "wrench" },
  { id: "support", title: "13. Merchant Help & Support", icon: "headset" },
];

export default function MerchantDocumentation() {
  const [activeSection, setActiveSection] = useState("overview");
  const [searchQuery, setSearchQuery] = useState("");
  const [copiedKey, setCopiedKey] = useState<string | null>(null);

  const handleCopy = (text: string, key: string) => {
    if (typeof navigator !== "undefined" && navigator.clipboard) {
      navigator.clipboard.writeText(text);
      setCopiedKey(key);
      setTimeout(() => setCopiedKey(null), 2000);
    }
  };

  const filteredSections = SECTIONS.filter((sec) =>
    sec.title.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div style={{ fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", color: "#1e293b", backgroundColor: "#f8fafc", minHeight: "100vh" }}>
      
      {/* TOP NAVBAR */}
      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 50,
          backgroundColor: "#ffffff",
          borderBottom: "1px solid #e2e8f0",
          boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
        }}
      >
        <div
          style={{
            maxWidth: 1200,
            margin: "0 auto",
            padding: "16px 24px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 16,
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div
              style={{
                width: 42,
                height: 42,
                borderRadius: 10,
                background: "linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#ffffff",
                fontSize: 20,
                boxShadow: "0 4px 6px -1px rgba(79, 70, 229, 0.3)",
              }}
            >
              <FAIcon name="robot" />
            </div>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <h1 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: "#0f172a" }}>
                  ShopPilot AI
                </h1>
                <span
                  style={{
                    backgroundColor: "#e0e7ff",
                    color: "#4338ca",
                    fontSize: 11,
                    fontWeight: 600,
                    padding: "2px 8px",
                    borderRadius: 9999,
                  }}
                >
                  Merchant Docs
                </span>
              </div>
              <p style={{ margin: 0, fontSize: 13, color: "#64748b" }}>
                Conversational Sales &amp; Support Assistant for Shopify
              </p>
            </div>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <a
              href="/help"
              style={{
                fontSize: 14,
                color: "#475569",
                textDecoration: "none",
                fontWeight: 500,
                padding: "8px 12px",
                borderRadius: 6,
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              <FAIcon name="circle-question" /> FAQ &amp; Help
            </a>
            <a
              href="/privacy"
              style={{
                fontSize: 14,
                color: "#475569",
                textDecoration: "none",
                fontWeight: 500,
                padding: "8px 12px",
                borderRadius: 6,
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
              }}
            >
              <FAIcon name="shield-halved" /> Privacy Policy
            </a>
            <a
              href="mailto:ashvin@digihorizon.in"
              style={{
                backgroundColor: "#4f46e5",
                color: "#ffffff",
                fontSize: 13,
                fontWeight: 600,
                padding: "8px 16px",
                borderRadius: 8,
                textDecoration: "none",
                display: "inline-flex",
                alignItems: "center",
                gap: 6,
                boxShadow: "0 1px 2px 0 rgba(79, 70, 229, 0.2)",
              }}
            >
              <FAIcon name="envelope" /> Contact Support
            </a>
          </div>
        </div>
      </header>

      {/* HERO BANNER */}
      <section
        style={{
          background: "linear-gradient(135deg, #312E81 0%, #4338CA 50%, #4F46E5 100%)",
          color: "#ffffff",
          padding: "52px 24px",
          textAlign: "center",
        }}
      >
        <div style={{ maxWidth: 840, margin: "0 auto" }}>
          <span
            style={{
              display: "inline-block",
              backgroundColor: "rgba(255, 255, 255, 0.15)",
              backdropFilter: "blur(4px)",
              color: "#ffffff",
              padding: "4px 14px",
              borderRadius: 20,
              fontSize: 12,
              fontWeight: 600,
              letterSpacing: 0.5,
              textTransform: "uppercase",
              marginBottom: 16,
            }}
          >
            Official Merchant Guide
          </span>
          <h2 style={{ fontSize: 34, fontWeight: 800, margin: "0 0 16px 0", lineHeight: 1.25 }}>
            Everything You Need to Set Up &amp; Grow with ShopPilot AI
          </h2>
          <p style={{ fontSize: 16, color: "#e0e7ff", margin: "0 auto 28px", maxWidth: 650, lineHeight: 1.6 }}>
            Step-by-step guidance for configuring your AI sales assistant, customizing branding to match your store, enabling order tracking, and boosting storefront conversions.
          </p>

          {/* Quick Search */}
          <div style={{ maxWidth: 460, margin: "0 auto", position: "relative" }}>
            <span
              style={{
                position: "absolute",
                left: 16,
                top: "50%",
                transform: "translateY(-50%)",
                color: "#94a3b8",
                fontSize: 15,
              }}
            >
              <FAIcon name="magnifying-glass" />
            </span>
            <input
              type="text"
              placeholder="Search guides, setup steps, features..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              style={{
                width: "100%",
                padding: "12px 16px 12px 44px",
                borderRadius: 10,
                border: "none",
                fontSize: 14,
                boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.2)",
                outline: "none",
                color: "#1e293b",
                backgroundColor: "#ffffff",
                boxSizing: "border-box",
              }}
            />
          </div>
        </div>
      </section>

      {/* MAIN DOCUMENTATION LAYOUT */}
      <div
        style={{
          maxWidth: 1200,
          margin: "0 auto",
          padding: "40px 24px 80px",
          display: "grid",
          gridTemplateColumns: "280px 1fr",
          gap: 36,
          alignItems: "start",
        }}
      >
        {/* SIDEBAR NAVIGATION */}
        <aside
          style={{
            position: "sticky",
            top: 90,
            backgroundColor: "#ffffff",
            borderRadius: 12,
            border: "1px solid #e2e8f0",
            padding: "18px 14px",
            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            maxHeight: "calc(100vh - 120px)",
            overflowY: "auto",
          }}
        >
          <div style={{ padding: "0 8px 12px", borderBottom: "1px solid #f1f5f9", marginBottom: 10 }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: 0.6 }}>
              Documentation Index
            </span>
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {filteredSections.map((sec) => (
              <a
                key={sec.id}
                href={`#${sec.id}`}
                onClick={() => setActiveSection(sec.id)}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  padding: "9px 12px",
                  borderRadius: 8,
                  fontSize: 13,
                  fontWeight: activeSection === sec.id ? 600 : 500,
                  color: activeSection === sec.id ? "#4338ca" : "#475569",
                  backgroundColor: activeSection === sec.id ? "#eef2ff" : "transparent",
                  textDecoration: "none",
                  transition: "all 0.15s ease",
                }}
              >
                <span style={{ display: "flex", alignItems: "center", gap: 10, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  <FAIcon name={sec.icon} style={{ color: activeSection === sec.id ? "#4f46e5" : "#94a3b8", fontSize: 13 }} />
                  {sec.title}
                </span>
                {sec.badge && (
                  <span
                    style={{
                      fontSize: 10,
                      fontWeight: 700,
                      backgroundColor: sec.badge === "Essential" ? "#fef3c7" : "#ecfdf5",
                      color: sec.badge === "Essential" ? "#92400e" : "#065f46",
                      padding: "1px 6px",
                      borderRadius: 4,
                    }}
                  >
                    {sec.badge}
                  </span>
                )}
              </a>
            ))}
          </nav>

          <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid #f1f5f9", paddingLeft: 8, paddingRight: 8 }}>
            <div style={{ fontSize: 12, color: "#64748b", marginBottom: 8 }}>Need instant assistance?</div>
            <a
              href="mailto:ashvin@digihorizon.in"
              style={{
                display: "block",
                textAlign: "center",
                backgroundColor: "#f1f5f9",
                color: "#334155",
                fontSize: 12,
                fontWeight: 600,
                padding: "8px 12px",
                borderRadius: 6,
                textDecoration: "none",
              }}
            >
              ashvin@digihorizon.in
            </a>
          </div>
        </aside>

        {/* CONTENT AREA */}
        <main style={{ minWidth: 0, display: "flex", flexDirection: "column", gap: 40 }}>
          
          {/* SECTION 1: OVERVIEW */}
          <article
            id="overview"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#eef2ff", color: "#4f46e5", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="sparkles" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                1. Overview &amp; Key Benefits
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              <strong>ShopPilot AI</strong> is an intelligent, conversational sales and customer support assistant built specifically for Shopify merchants. Unlike traditional static chatbots that rely on rigid decision trees, ShopPilot AI understands natural customer inquiries, automatically indexes your product catalog, and actively guides shoppers toward completing purchases.
            </p>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
                gap: 16,
                marginTop: 24,
              }}
            >
              <div style={{ padding: 18, borderRadius: 10, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <div style={{ color: "#4f46e5", fontSize: 18, marginBottom: 8 }}>
                  <FAIcon name="cart-shopping" />
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "#0f172a", marginBottom: 4 }}>
                  Assisted Sales &amp; Recommendations
                </div>
                <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
                  Recommends matching items based on customer budget, style, and intent with direct <em>Add to Cart</em> buttons.
                </div>
              </div>

              <div style={{ padding: 18, borderRadius: 10, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <div style={{ color: "#059669", fontSize: 18, marginBottom: 8 }}>
                  <FAIcon name="truck" />
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "#0f172a", marginBottom: 4 }}>
                  Automated Order Tracking
                </div>
                <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
                  Instantly answers "Where is my order?" inquiries using safe, authenticated Shopify customer lookups.
                </div>
              </div>

              <div style={{ padding: 18, borderRadius: 10, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <div style={{ color: "#d97706", fontSize: 18, marginBottom: 8 }}>
                  <FAIcon name="book-open" />
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "#0f172a", marginBottom: 4 }}>
                  Dynamic Knowledge Base
                </div>
                <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
                  Syncs your store's blog posts, shipping policies, return guidelines, and FAQs to answer questions 24/7.
                </div>
              </div>

              <div style={{ padding: 18, borderRadius: 10, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <div style={{ color: "#dc2626", fontSize: 18, marginBottom: 8 }}>
                  <FAIcon name="bolt" />
                </div>
                <div style={{ fontWeight: 600, fontSize: 14, color: "#0f172a", marginBottom: 4 }}>
                  Zero-Code Setup
                </div>
                <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
                  1-click theme app embed integration. No manual theme code editing or Liquid template modifications.
                </div>
              </div>
            </div>
          </article>

          {/* SECTION 2: QUICK START */}
          <article
            id="quickstart"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#fef3c7", color: "#d97706", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="rocket" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                2. 3-Minute Quick Setup Guide
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 24px" }}>
              Getting ShopPilot AI active on your Shopify store takes less than three minutes:
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "flex", gap: 16 }}>
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: "50%",
                    backgroundColor: "#4f46e5",
                    color: "#ffffff",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontWeight: 700,
                    fontSize: 14,
                    flexShrink: 0,
                  }}
                >
                  1
                </div>
                <div>
                  <h4 style={{ margin: "0 0 6px", fontSize: 16, fontWeight: 600, color: "#0f172a" }}>
                    Install ShopPilot AI from the Shopify App Store
                  </h4>
                  <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                    Click <strong>Install</strong> on the Shopify App Store listing and approve the necessary read scopes (products, content, orders). Your catalog immediately starts synchronizing in the background.
                  </p>
                </div>
              </div>

              <div style={{ display: "flex", gap: 16 }}>
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: "50%",
                    backgroundColor: "#4f46e5",
                    color: "#ffffff",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontWeight: 700,
                    fontSize: 14,
                    flexShrink: 0,
                  }}
                >
                  2
                </div>
                <div>
                  <h4 style={{ margin: "0 0 6px", fontSize: 16, fontWeight: 600, color: "#0f172a" }}>
                    Enable the Theme App Extension (One-Click)
                  </h4>
                  <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                    In your Shopify Admin, navigate to <strong>Online Store → Themes → Customize</strong>. Open <strong>App embeds</strong> on the left sidebar, switch on <strong>ConverseCart AI Chatbot</strong>, and click <strong>Save</strong>.
                  </p>
                </div>
              </div>

              <div style={{ display: "flex", gap: 16 }}>
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: "50%",
                    backgroundColor: "#4f46e5",
                    color: "#ffffff",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontWeight: 700,
                    fontSize: 14,
                    flexShrink: 0,
                  }}
                >
                  3
                </div>
                <div>
                  <h4 style={{ margin: "0 0 6px", fontSize: 16, fontWeight: 600, color: "#0f172a" }}>
                    Personalize Colors &amp; Welcome Message
                  </h4>
                  <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                    Open the ShopPilot AI app dashboard inside your Shopify Admin. Adjust your brand primary color, give your bot a name (e.g., <em>"Aura Concierge"</em> or <em>"Store Assistant"</em>), and review the live preview. Click <strong>Save Changes</strong>.
                  </p>
                </div>
              </div>
            </div>

            <div
              style={{
                marginTop: 24,
                padding: "16px 20px",
                borderRadius: 8,
                backgroundColor: "#ecfdf5",
                border: "1px solid #a7f3d0",
                display: "flex",
                alignItems: "center",
                gap: 12,
              }}
            >
              <FAIcon name="circle-check" style={{ color: "#059669", fontSize: 20 }} />
              <span style={{ fontSize: 14, color: "#065f46", lineHeight: 1.5 }}>
                <strong>That's it!</strong> The AI chatbot is now active on your store, ready to assist your visitors, suggest products, and answer questions.
              </span>
            </div>
          </article>

          {/* SECTION 3: THEME EMBED */}
          <article
            id="theme-embed"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#ede9fe", color: "#7c3aed", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="paintbrush" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                3. Enabling Theme App Embed
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              ShopPilot AI utilizes Shopify's modern <strong>Theme App Extension</strong> architecture. This provides isolated CSS styling inside a native Web Component Shadow DOM, guaranteeing that the chat widget will never conflict with your theme fonts, buttons, or JavaScript.
            </p>

            <div style={{ backgroundColor: "#f8fafc", border: "1px solid #e2e8f0", borderRadius: 10, padding: 20, marginBottom: 20 }}>
              <h4 style={{ margin: "0 0 12px", fontSize: 15, fontWeight: 600, color: "#1e293b" }}>
                Step-by-Step Instructions:
              </h4>
              <ol style={{ margin: 0, paddingLeft: 20, fontSize: 14, color: "#475569", lineHeight: 1.8 }}>
                <li>From your Shopify Admin, click <strong>Online Store</strong> in the left sidebar menu.</li>
                <li>Under <strong>Themes</strong>, locate your current active live theme and click <strong>Customize</strong>.</li>
                <li>In the left vertical sidebar of the Theme Editor, click the third icon from the top: <strong>App embeds</strong> (<FAIcon name="layer-group" />).</li>
                <li>Look for <strong>ConverseCart AI Chatbot</strong> (or ShopPilot AI) in the list.</li>
                <li>Toggle the switch next to it to <strong>ON</strong> (blue/active).</li>
                <li>Click the green <strong>Save</strong> button in the top right corner of the Shopify Theme Editor.</li>
              </ol>
            </div>

            <div
              style={{
                padding: "14px 18px",
                borderRadius: 8,
                backgroundColor: "#eff6ff",
                border: "1px solid #bfdbfe",
                display: "flex",
                alignItems: "flex-start",
                gap: 12,
              }}
            >
              <FAIcon name="lightbulb" style={{ color: "#2563eb", marginTop: 2 }} />
              <div style={{ fontSize: 13, color: "#1e40af", lineHeight: 1.6 }}>
                <strong>Tip for Testing:</strong> If you want to test the widget before making it visible to public shoppers, you can enable the App embed on an <em>unpublished duplicate theme draft</em> first.
              </div>
            </div>
          </article>

          {/* SECTION 4: STOREFRONT WIDGET */}
          <article
            id="storefront-widget"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#e0e7ff", color: "#4f46e5", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="comments" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                4. Storefront Widget Features &amp; Customer Experience
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              The storefront chat widget is engineered to maximize customer engagement without distracting from the primary browsing experience:
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
                <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a", display: "flex", alignItems: "center", gap: 8 }}>
                  <FAIcon name="door-open" style={{ color: "#4f46e5" }} />
                  Welcome Screen &amp; Prompts
                </h4>
                <p style={{ margin: 0, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  Greets customers with your custom bot name, store tagline, and up to four interactive <strong>Quick Action Starter Buttons</strong> (e.g. <em>"Show trending items"</em>, <em>"What's your return policy?"</em>, <em>"Help me pick a gift"</em>).
                </p>
              </div>

              <div style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
                <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a", display: "flex", alignItems: "center", gap: 8 }}>
                  <FAIcon name="bag-shopping" style={{ color: "#059669" }} />
                  Direct "Add to Cart"
                </h4>
                <p style={{ margin: 0, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  Product recommendation cards feature product thumbnail, price, availability, and an instant <strong>Add to Cart</strong> button that adds the item directly to the customer's Shopify cart without leaving the chat.
                </p>
              </div>

              <div style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
                <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a", display: "flex", alignItems: "center", gap: 8 }}>
                  <FAIcon name="mobile-screen" style={{ color: "#d97706" }} />
                  Full Mobile Responsiveness
                </h4>
                <p style={{ margin: 0, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  Seamlessly adjusts to any screen size. On mobile smartphones, expands smoothly with ergonomic touch targets and easy-to-tap close buttons.
                </p>
              </div>

              <div style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
                <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a", display: "flex", alignItems: "center", gap: 8 }}>
                  <FAIcon name="ellipsis-vertical" style={{ color: "#64748b" }} />
                  Options Menu &amp; Clear History
                </h4>
                <p style={{ margin: 0, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  Customers can access the top-right menu anytime to view store helpline details or start a fresh conversation session with a single click.
                </p>
              </div>
            </div>
          </article>

          {/* SECTION 5: BRANDING */}
          <article
            id="branding"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#fce7f3", color: "#db2777", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="palette" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                5. Branding &amp; Color Styling
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              Tailor every element of the chat widget to match your store's brand guidelines directly from the <strong>Control Panel</strong>:
            </p>

            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14, color: "#334155" }}>
              <thead>
                <tr style={{ backgroundColor: "#f8fafc", borderBottom: "2px solid #e2e8f0", textAlign: "left" }}>
                  <th style={{ padding: "12px 14px", fontWeight: 600 }}>Setting Name</th>
                  <th style={{ padding: "12px 14px", fontWeight: 600 }}>Description</th>
                  <th style={{ padding: "12px 14px", fontWeight: 600 }}>Default Value</th>
                </tr>
              </thead>
              <tbody>
                <tr style={{ borderBottom: "1px solid #f1f5f9" }}>
                  <td style={{ padding: "12px 14px", fontWeight: 600 }}>Bot Display Name</td>
                  <td style={{ padding: "12px 14px" }}>The name displayed on the header bar and chat messages.</td>
                  <td style={{ padding: "12px 14px" }}><code>ShopPilot AI Assistant</code></td>
                </tr>
                <tr style={{ borderBottom: "1px solid #f1f5f9" }}>
                  <td style={{ padding: "12px 14px", fontWeight: 600 }}>Primary Brand Color</td>
                  <td style={{ padding: "12px 14px" }}>Used for the launcher bubble, send button, header gradient, and active pills.</td>
                  <td style={{ padding: "12px 14px" }}><code>#4F46E5</code> (Indigo)</td>
                </tr>
                <tr style={{ borderBottom: "1px solid #f1f5f9" }}>
                  <td style={{ padding: "12px 14px", fontWeight: 600 }}>Secondary Accent Color</td>
                  <td style={{ padding: "12px 14px" }}>Used for secondary action buttons, card borders, and hover states.</td>
                  <td style={{ padding: "12px 14px" }}><code>#4338CA</code></td>
                </tr>
                <tr style={{ borderBottom: "1px solid #f1f5f9" }}>
                  <td style={{ padding: "12px 14px", fontWeight: 600 }}>Widget Screen Position</td>
                  <td style={{ padding: "12px 14px" }}>Placement on the storefront: Bottom-Right, Bottom-Left, or Center.</td>
                  <td style={{ padding: "12px 14px" }}><code>Bottom-Right</code></td>
                </tr>
                <tr style={{ borderBottom: "1px solid #f1f5f9" }}>
                  <td style={{ padding: "12px 14px", fontWeight: 600 }}>Show Powered By</td>
                  <td style={{ padding: "12px 14px" }}>Option to hide the footer watermark badge (Starter and Pro plans).</td>
                  <td style={{ padding: "12px 14px" }}><code>Enabled</code></td>
                </tr>
                <tr>
                  <td style={{ padding: "12px 14px", fontWeight: 600 }}>Starter Prompts (1–4)</td>
                  <td style={{ padding: "12px 14px" }}>Configurable quick-action suggestion chips on the welcome screen.</td>
                  <td style={{ padding: "12px 14px" }}>Customizable text</td>
                </tr>
              </tbody>
            </table>
          </article>

          {/* SECTION 6: AI ENGINE & PERSONALITY */}
          <article
            id="ai-configuration"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#ecfdf5", color: "#059669", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="robot" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                6. AI Engine &amp; Personality Customization
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              ShopPilot AI allows you to shape how the AI interacts with your customers. You can customize tone, sales priorities, and even bring your own AI engine keys.
            </p>

            <h4 style={{ fontSize: 16, fontWeight: 600, color: "#0f172a", margin: "20px 0 10px" }}>
              Customizing the System Prompt (Tone &amp; Rules)
            </h4>
            <p style={{ fontSize: 14, color: "#64748b", lineHeight: 1.6, margin: "0 0 14px" }}>
              In the <strong>AI Settings</strong> card, the <em>System Prompt</em> field gives you complete control over your bot's personality. Here are sample prompts you can copy and paste:
            </p>

            <div style={{ backgroundColor: "#0f172a", borderRadius: 10, padding: 18, color: "#e2e8f0", fontSize: 13, lineHeight: 1.6, position: "relative", marginBottom: 20 }}>
              <button
                type="button"
                onClick={() => handleCopy("You are Sophie, a luxury fashion stylist for our boutique. Greet shoppers warmly, suggest matching accessories whenever a dress is viewed, and mention our complimentary gift packaging on orders over $100. Always keep answers concise and elegant.", "prompt1")}
                style={{
                  position: "absolute",
                  top: 12,
                  right: 12,
                  backgroundColor: "rgba(255, 255, 255, 0.15)",
                  color: "#ffffff",
                  border: "none",
                  padding: "6px 12px",
                  borderRadius: 6,
                  fontSize: 12,
                  cursor: "pointer",
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                }}
              >
                <FAIcon name={copiedKey === "prompt1" ? "check" : "copy"} />
                {copiedKey === "prompt1" ? "Copied!" : "Copy Prompt"}
              </button>
              <span style={{ color: "#94a3b8" }}># Example: Luxury Boutique Stylist</span>
              <div style={{ marginTop: 6, color: "#f8fafc" }}>
                You are Sophie, a luxury fashion stylist for our boutique. Greet shoppers warmly, suggest matching accessories whenever a dress is viewed, and mention our complimentary gift packaging on orders over $100. Always keep answers concise and elegant.
              </div>
            </div>

            <div style={{ backgroundColor: "#f8fafc", border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
              <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                Bring Your Own Key (BYOK) — Pro Plan
              </h4>
              <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                Merchants on the <strong>Pro Plan</strong> can connect their own <strong>OpenAI</strong> (GPT-4o, GPT-4o-mini) or <strong>Google Gemini</strong> (Gemini 1.5 Pro, Flash) API keys. All keys are encrypted at rest with AES-256-GCM and never exposed in browser code.
              </p>
            </div>
          </article>

          {/* SECTION 7: KNOWLEDGE BASE */}
          <article
            id="knowledge-base"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#fef3c7", color: "#d97706", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="book" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                7. Knowledge Base &amp; Catalog Sync
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              ShopPilot AI automatically learns about your products and policies so it can provide accurate answers to customer questions.
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ padding: 18, borderRadius: 10, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <h4 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Automatic Shopify Catalog &amp; Blog Sync
                </h4>
                <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                  Upon installation, ShopPilot AI indexes your active products, variants, descriptions, prices, inventory availability, and published blog articles. Whenever you update or add new products, you can click <strong>Sync Catalog</strong> in the dashboard to immediately refresh the index.
                </p>
              </div>

              <div style={{ padding: 18, borderRadius: 10, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <h4 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Custom Knowledge Items &amp; Policies
                </h4>
                <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                  Under the <strong>Knowledge Base</strong> section, you can add custom Q&amp;As, sizing guides, return policies, warranty terms, or frequently asked questions. The AI references these entries to answer specific inquiries accurately.
                </p>
              </div>
            </div>
          </article>

          {/* SECTION 8: ORDER TRACKING & AUTH */}
          <article
            id="orders-auth"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#e0f2fe", color: "#0284c7", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="box-open" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                8. Order Tracking &amp; Customer Authentication
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              Enable your shoppers to check order fulfillment status, delivery carriers, and tracking numbers in seconds:
            </p>

            <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14, color: "#475569", lineHeight: 1.8 }}>
              <li>
                <strong>Logged-In Customers:</strong> If a customer is logged into their Shopify store account, ShopPilot AI automatically identifies them and displays their recent orders with one tap.
              </li>
              <li>
                <strong>Guest Customers:</strong> Guests can easily look up orders by providing their order number (e.g. <code>#1024</code>) and the email address used during checkout.
              </li>
              <li>
                <strong>Privacy &amp; Security:</strong> Order lookups use Shopify's official customer session tokens and read-only endpoints, keeping sensitive customer billing details completely private.
              </li>
            </ul>
          </article>

          {/* SECTION 9: HELPLINE & SHIPPING */}
          <article
            id="helpline-shipping"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#fef2f2", color: "#dc2626", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="truck-fast" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                9. Store Helpline &amp; Shipping Policies
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              Provide instant transparency on shipping rates, delivery timelines, and support channels:
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div style={{ backgroundColor: "#f8fafc", padding: 18, borderRadius: 10, border: "1px solid #e2e8f0" }}>
                <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Helpline Contact Details
                </h4>
                <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  <li>Support Email Address (e.g., support@yourstore.com)</li>
                  <li>Phone Helpline / WhatsApp number</li>
                  <li>Customer Service Operating Hours</li>
                  <li>Physical Store / Warehouse Address</li>
                </ul>
              </div>

              <div style={{ backgroundColor: "#f8fafc", padding: 18, borderRadius: 10, border: "1px solid #e2e8f0" }}>
                <h4 style={{ margin: "0 0 8px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Shipping &amp; Delivery Rules
                </h4>
                <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  <li>Free Shipping Threshold (e.g., $50.00)</li>
                  <li>Standard Domestic Shipping Rate</li>
                  <li>Estimated Delivery Window (e.g., 2–4 business days)</li>
                  <li>Link to full store Shipping Policy page</li>
                </ul>
              </div>
            </div>
          </article>

          {/* SECTION 10: REAL-TIME PREVIEW */}
          <article
            id="live-preview"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#f3e8ff", color: "#9333ea", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="desktop" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                10. Real-Time Admin Live Preview
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              Test and verify your customizations right in the Shopify Admin before publishing:
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ padding: 16, borderRadius: 8, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <strong>Interactive Mode Switcher:</strong> Switch between the <em>Welcome Screen</em> view (header, subtitle, quick starter buttons) and the <em>Active Chat</em> view (messages, product cards, Add to Cart flow).
              </div>
              <div style={{ padding: 16, borderRadius: 8, backgroundColor: "#f8fafc", border: "1px solid #e2e8f0" }}>
                <strong>Instant Color Updates:</strong> Changes to your primary color, bot name, or welcome greetings immediately reflect in the preview window without needing a page refresh.
              </div>
            </div>
          </article>

          {/* SECTION 11: PLANS & BILLING */}
          <article
            id="plans-billing"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#ecfdf5", color: "#059669", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="credit-card" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                11. Plans &amp; Billing Guide
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              All subscriptions are handled securely through Shopify's official Billing API. Subscription charges appear directly on your regular Shopify monthly invoice:
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }}>
              <div style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: "#64748b", textTransform: "uppercase" }}>Free Plan</span>
                <div style={{ fontSize: 24, fontWeight: 800, color: "#0f172a", margin: "6px 0 12px" }}>$0 <span style={{ fontSize: 13, fontWeight: 400, color: "#64748b" }}>/ mo</span></div>
                <ul style={{ margin: 0, paddingLeft: 16, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  <li>100 conversations per month</li>
                  <li>Automatic catalog sync</li>
                  <li>Standard AI responses</li>
                  <li>Community email support</li>
                </ul>
              </div>

              <div style={{ border: "2px solid #4f46e5", borderRadius: 10, padding: 20, position: "relative" }}>
                <span style={{ position: "absolute", top: -10, right: 16, backgroundColor: "#4f46e5", color: "#ffffff", fontSize: 10, fontWeight: 700, padding: "2px 8px", borderRadius: 4 }}>POPULAR</span>
                <span style={{ fontSize: 12, fontWeight: 700, color: "#4f46e5", textTransform: "uppercase" }}>Starter Plan</span>
                <div style={{ fontSize: 24, fontWeight: 800, color: "#0f172a", margin: "6px 0 12px" }}>$29 <span style={{ fontSize: 13, fontWeight: 400, color: "#64748b" }}>/ mo</span></div>
                <ul style={{ margin: 0, paddingLeft: 16, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  <li>1,000 conversations per month</li>
                  <li>Remove "Powered by" branding</li>
                  <li>Faster AI response speeds</li>
                  <li>Priority email support</li>
                </ul>
              </div>

              <div style={{ border: "1px solid #e2e8f0", borderRadius: 10, padding: 20 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: "#64748b", textTransform: "uppercase" }}>Pro Plan</span>
                <div style={{ fontSize: 24, fontWeight: 800, color: "#0f172a", margin: "6px 0 12px" }}>$79 <span style={{ fontSize: 13, fontWeight: 400, color: "#64748b" }}>/ mo</span></div>
                <ul style={{ margin: 0, paddingLeft: 16, fontSize: 13, color: "#64748b", lineHeight: 1.6 }}>
                  <li>Unlimited / high-volume chat</li>
                  <li>BYOK (OpenAI &amp; Google Gemini)</li>
                  <li>Custom AI models (GPT-4o)</li>
                  <li>Dedicated account assistance</li>
                </ul>
              </div>
            </div>
          </article>

          {/* SECTION 12: TROUBLESHOOTING */}
          <article
            id="troubleshooting"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#fef3c7", color: "#d97706", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="wrench" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                12. Troubleshooting &amp; Merchant FAQs
              </h3>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
              <div>
                <h4 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Q: Why is the chat widget not visible on my live storefront?
                </h4>
                <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                  <strong>Check 1:</strong> Confirm that the <strong>ConverseCart AI Chatbot</strong> app embed is toggled ON under <em>Online Store → Themes → Customize → App embeds</em>, and that you clicked <strong>Save</strong>.<br />
                  <strong>Check 2:</strong> Ensure that the <em>Enable Chatbot</em> toggle in your app control panel is turned ON.<br />
                  <strong>Check 3:</strong> Clear your browser cache or open your store in an incognito window.
                </p>
              </div>

              <div style={{ borderTop: "1px solid #f1f5f9", paddingTop: 16 }}>
                <h4 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Q: I just added new products to Shopify. When will the chatbot know about them?
                </h4>
                <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                  Product updates are synced automatically via Shopify webhooks. To sync changes immediately, click <strong>Sync Catalog</strong> from your ShopPilot AI dashboard.
                </p>
              </div>

              <div style={{ borderTop: "1px solid #f1f5f9", paddingTop: 16 }}>
                <h4 style={{ margin: "0 0 6px", fontSize: 15, fontWeight: 600, color: "#0f172a" }}>
                  Q: Will the chat widget slow down my website load time?
                </h4>
                <p style={{ margin: 0, fontSize: 14, color: "#64748b", lineHeight: 1.6 }}>
                  No. The widget script is loaded asynchronously with <code>defer</code>, meaning it never blocks your page rendering or Core Web Vitals (LCP/FID). The widget assets are cached and served via high-speed global CDN.
                </p>
              </div>
            </div>
          </article>

          {/* SECTION 13: SUPPORT */}
          <article
            id="support"
            style={{
              backgroundColor: "#ffffff",
              borderRadius: 14,
              border: "1px solid #e2e8f0",
              padding: "36px 32px",
              boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.05)",
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div style={{ width: 36, height: 36, borderRadius: 8, backgroundColor: "#eef2ff", color: "#4f46e5", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <FAIcon name="headset" />
              </div>
              <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: "#0f172a" }}>
                13. Merchant Support &amp; Contact
              </h3>
            </div>
            <p style={{ fontSize: 15, color: "#475569", lineHeight: 1.7, margin: "0 0 20px" }}>
              Our dedicated engineering and merchant success team is here to assist with setup, customization, or inquiries:
            </p>

            <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
              <a
                href="mailto:ashvin@digihorizon.in"
                style={{
                  backgroundColor: "#4f46e5",
                  color: "#ffffff",
                  padding: "12px 24px",
                  borderRadius: 8,
                  textDecoration: "none",
                  fontWeight: 600,
                  fontSize: 14,
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                <FAIcon name="envelope" /> Email: ashvin@digihorizon.in
              </a>
              <a
                href="https://www.digihorizon.in"
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  backgroundColor: "#ffffff",
                  color: "#4f46e5",
                  border: "1px solid #c7d2fe",
                  padding: "12px 24px",
                  borderRadius: 8,
                  textDecoration: "none",
                  fontWeight: 600,
                  fontSize: 14,
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 8,
                }}
              >
                <FAIcon name="globe" /> Visit Developer Website
              </a>
            </div>

            <p style={{ margin: "20px 0 0", fontSize: 13, color: "#94a3b8" }}>
              Support hours: Monday to Friday, 9:00 AM – 6:00 PM IST. Typical email response time is under 24 hours.
            </p>
          </article>

        </main>
      </div>

      {/* FOOTER */}
      <footer style={{ borderTop: "1px solid #e2e8f0", backgroundColor: "#ffffff", padding: "28px 24px", textAlign: "center" }}>
        <p style={{ margin: "0 0 8px", fontSize: 14, color: "#64748b" }}>
          © {new Date().getFullYear()} Digi Horizon Technologies. All rights reserved.
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: 16, fontSize: 13 }}>
          <a href="/docs" style={{ color: "#4f46e5", textDecoration: "none" }}>Documentation</a>
          <span style={{ color: "#cbd5e1" }}>•</span>
          <a href="/help" style={{ color: "#4f46e5", textDecoration: "none" }}>Help Center &amp; FAQs</a>
          <span style={{ color: "#cbd5e1" }}>•</span>
          <a href="/privacy" style={{ color: "#4f46e5", textDecoration: "none" }}>Privacy Policy</a>
        </div>
      </footer>

    </div>
  );
}