import SectionCard from "./SectionCard";

const config = typeof AI_IMAGE_AdminConfig !== "undefined" ? AI_IMAGE_AdminConfig : {};
const version = config.version || "1.0.0";
const supportUrl = config.support_url || "#";
const docsUrl = config.docs_url || "#";

export default function SupportSection() {
  return (
    <SectionCard
      title="Help & Support"
      description="Resources and information about the plugin."
    >
      <div className="space-y-6">
        <div className="p-3.5 bg-gray-50 rounded-md border border-gray-100">
          <h3 className="text-sm font-medium text-gray-800 mb-1.5">About Instant Image Generator</h3>
          <p className="text-xs text-gray-600 leading-relaxed">
            <span className="font-medium text-gray-700">Instant Image Generator v{version}</span> — Generate and import images from multiple AI and stock photo sources directly into your WordPress media library.
          </p>
        </div>
        <div className="pt-5 border-t border-gray-100">
          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">Quick Links</p>
          <div className="divide-y divide-gray-100">
            <a
              href={supportUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-3 py-3 text-sm text-gray-700 hover:text-gray-900 font-medium transition-colors"
            >
              <span className="flex items-center justify-center w-8 h-8 rounded-md bg-gray-100 text-gray-500">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </span>
              <span>Help &amp; Support</span>
            </a>
            {docsUrl && (
              <a
                href={docsUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-3 py-3 text-sm text-gray-700 hover:text-gray-900 font-medium transition-colors"
              >
                <span className="flex items-center justify-center w-8 h-8 rounded-md bg-gray-100 text-gray-500">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                  </svg>
                </span>
                <span>Documentation</span>
              </a>
            )}
          </div>
        </div>
      </div>
    </SectionCard>
  );
}