Data4Autos-Shopify-Frontend/app/routes/app.help.jsx

import { Page, Layout, Card, Text, BlockStack, Link } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import { useState, useCallback } from "react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  await authenticate.admin(request);
  return null;
};

const faqs = [
  {
    title: "How do I connect my Turn14 account?",
    icon: "🔌",
    content: "Go to the Settings page, enter your Turn14 Client ID and Secret, then click 'Connect Turn14'. A green success indicator will confirm the connection. Your credentials are stored securely in Shopify's encrypted metafields.",
  },
  {
    title: "Where can I import brands from?",
    icon: "🏷️",
    content: "Use the 'Brands' tab in the left sidebar to browse all available Turn14 brands. Check the brands you want to sync, then click 'Save Collections' to create Shopify collections for each selected brand.",
  },
  {
    title: "How do I sync brand collections and products?",
    icon: "🔄",
    content: "In the 'Manage Brands' section, select a brand and click 'Show Products' to load its catalog. Apply fitment filters (Make, stock type, LTL, etc.) then click 'Add Products to Store' to start an import. Watch live progress on the Dashboard page.",
  },
  {
    title: "Is my Turn14 API key secure?",
    icon: "🔐",
    content: "Yes. Credentials are stored using Shopify's encrypted metafield storage, not in plain text or local files. Only your store's Shopify admin can access them.",
  },
  {
    title: "How do I monitor import progress?",
    icon: "📊",
    content: "After starting an import from Manage Brands, head to the Dashboard page in the sidebar. It shows real-time progress: products created, skipped, failed, elapsed time, current product being processed, and a live activity log.",
  },
  {
    title: "What do the product filters do?",
    icon: "🔎",
    content: "Fitment filters let you narrow products by vehicle Make. Additional toggles control Zero Stock (include/exclude), LTL Freight Required, Clearance items, Air Freight Prohibited items, and products with no images — giving you precise control over what gets imported.",
  },
];

export default function HelpPage() {
  const [openIndex, setOpenIndex] = useState(null);
  const toggle = useCallback((i) => setOpenIndex((p) => (p === i ? null : i)), []);

  return (
    <Page>
      <TitleBar title="Help & Documentation" />

      {/* Dark header */}
      <div style={{ background: "linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%)", borderRadius: 16, padding: "28px 32px", marginBottom: 28, color: "#fff" }}>
        <div style={{ fontSize: 22, fontWeight: 800, marginBottom: 6 }}>❓ Help & Documentation</div>
        <div style={{ fontSize: 14, opacity: 0.8 }}>Everything you need to get up and running with Data4Autos × Turn14</div>
      </div>

      <Layout>
        <Layout.Section>
          <BlockStack gap="300">

            {/* FAQ cards */}
            {faqs.map((faq, index) => {
              const isOpen = openIndex === index;
              return (
                <div
                  key={index}
                  style={{
                    border: `1px solid ${isOpen ? "#bfdbfe" : "#e5e7eb"}`,
                    borderRadius: 12,
                    overflow: "hidden",
                    boxShadow: isOpen ? "0 4px 12px rgba(37,99,235,0.08)" : "0 1px 3px rgba(0,0,0,0.04)",
                    transition: "box-shadow 0.2s, border-color 0.2s",
                  }}
                >
                  <div
                    onClick={() => toggle(index)}
                    style={{
                      background: isOpen ? "#eff6ff" : "#ffffff",
                      padding: "16px 20px",
                      cursor: "pointer",
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      transition: "background 0.2s",
                    }}
                  >
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <div style={{ width: 36, height: 36, background: isOpen ? "#2563eb" : "#f1f5f9", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, flexShrink: 0 }}>
                        {faq.icon}
                      </div>
                      <span style={{ fontWeight: 700, fontSize: 15, color: isOpen ? "#1d4ed8" : "#111827" }}>{faq.title}</span>
                    </div>
                    <div style={{ width: 24, height: 24, background: isOpen ? "#2563eb" : "#e5e7eb", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", transition: "all 0.2s", flexShrink: 0 }}>
                      <span style={{ color: isOpen ? "#fff" : "#6b7280", fontSize: 12, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", display: "block", transition: "transform 0.2s" }}>▼</span>
                    </div>
                  </div>

                  {isOpen && (
                    <div style={{ padding: "16px 20px 20px", background: "#fafcff", borderTop: "1px solid #dbeafe" }}>
                      <div style={{ fontSize: 14, color: "#374151", lineHeight: 1.7 }}>{faq.content}</div>
                    </div>
                  )}
                </div>
              );
            })}

          </BlockStack>
        </Layout.Section>

        {/* Contact card */}
        <Layout.Section>
          <div style={{ background: "linear-gradient(135deg, #f0f9ff, #e0f2fe)", border: "1px solid #bae6fd", borderRadius: 12, padding: "24px 28px", textAlign: "center" }}>
            <div style={{ fontSize: 32, marginBottom: 10 }}>📬</div>
            <div style={{ fontSize: 17, fontWeight: 700, color: "#0c4a6e", marginBottom: 6 }}>Still need help?</div>
            <div style={{ fontSize: 14, color: "#0369a1", marginBottom: 14 }}>Our support team is ready to assist you with any questions about your integration.</div>
            <a
              href="mailto:support@data4autos.com"
              style={{ display: "inline-block", background: "#2563eb", color: "#fff", borderRadius: 8, padding: "10px 24px", fontWeight: 700, fontSize: 14, textDecoration: "none" }}
            >
              support@data4autos.com
            </a>
          </div>
        </Layout.Section>
      </Layout>
    </Page>
  );
}