import React from 'react';
import { TbBulb } from 'react-icons/tb';
import { FaBook } from 'react-icons/fa';
import { FaCircleQuestion } from 'react-icons/fa6';

import Button from '../components/widgets/Button';
import OnBoardingPopupToolTip from '../components/modals/OnboardingPopupToolTip';

const Page = (): JSX.Element => {
  return (
    <div className="mx-auto w-full max-w-5xl bg-white p-6 md:p-10">
      <OnBoardingPopupToolTip />

      <header className="mb-10">
        <h1 className="text-xl font-medium tracking-tight text-gray-900 md:text-2xl">
          Recomaze Support
        </h1>
        <p className="mt-2 text-sm text-gray-500">
          Setup is straightforward and largely automated. If you need help, use
          the resources below.
        </p>
      </header>

      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <article className="flex flex-col justify-center space-y-2 pr-4">
          <h2 className="text-base font-medium text-gray-900">
            Support Information
          </h2>
          <p className="text-sm leading-relaxed text-gray-500">
            Thanks for choosing Recomaze. If you run into any issues, we’re here
            to help—fast. Browse our guides or reach out directly.
          </p>
        </article>

        <article className="rounded-lg border border-gray-200 bg-white p-6">
          <div className="flex items-start gap-4">
            <div className="shrink-0 rounded-md bg-gray-50 p-2.5 text-gray-700">
              <FaBook className="h-4 w-4" aria-hidden="true" />
            </div>
            <div className="space-y-2">
              <h3 className="text-sm font-medium text-gray-900">
                Installation Guide
              </h3>
              <p className="text-sm leading-relaxed text-gray-500">
                Step-by-step instructions to connect your store and start using
                Recomaze.
              </p>
              <a
                href="https://recomaze.ai/integration-guides/woocommerce-integration"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block text-sm font-medium text-gray-900 underline underline-offset-4 transition-colors hover:text-gray-600"
              >
                Open the guide
              </a>
            </div>
          </div>
        </article>

        <article className="rounded-lg border border-gray-200 bg-white p-6">
          <div className="flex items-start gap-4">
            <div className="shrink-0 rounded-md bg-gray-50 p-2.5 text-gray-700">
              <FaCircleQuestion className="h-4 w-4" aria-hidden="true" />
            </div>
            <div className="space-y-2">
              <h3 className="text-sm font-medium text-gray-900">
                Troubleshooting
              </h3>
              <p className="text-sm leading-relaxed text-gray-500">
                Find quick answers to common questions and configuration tips.
              </p>
              <a
                href="https://recomaze.ai/faq/"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block text-sm font-medium text-gray-900 underline underline-offset-4 transition-colors hover:text-gray-600"
              >
                Browse FAQs
              </a>
            </div>
          </div>
        </article>

        <article className="mt-2 rounded-lg border border-gray-200 bg-white p-6 md:col-span-2 md:p-8 lg:col-span-3">
          <div className="flex flex-col gap-6 md:flex-row md:items-start md:gap-8">
            <div className="shrink-0 rounded-md bg-gray-50 p-2.5 text-gray-700 hidden md:block">
              <FaCircleQuestion className="h-5 w-5" aria-hidden="true" />
            </div>

            <div className="flex-1 space-y-6">
              <div>
                <h3 className="text-base font-medium text-gray-900 mb-2">
                  Direct Support
                </h3>
                <p className="text-sm text-gray-500 leading-relaxed">
                  Email our team at{' '}
                  <a
                    href="mailto:better@recomaze.com?subject=Support%20request%20from%20dashboard"
                    className="font-medium text-gray-900 underline underline-offset-4 transition-colors hover:text-gray-600"
                  >
                    better@recomaze.com
                  </a>{' '}
                  or use the chat widget in your dashboard for real-time help.
                </p>
              </div>

              <div className="rounded-lg bg-gray-50 p-5 md:p-6">
                <div className="mb-3 flex items-center gap-2 text-sm font-medium text-gray-900">
                  <TbBulb
                    className="h-5 w-5 text-gray-600"
                    aria-hidden="true"
                  />
                  Pro Tips for Faster Support
                </div>
                <ul className="ml-5 list-disc space-y-2 text-sm text-gray-500">
                  <li>
                    Include screenshots and your store URL for faster
                    troubleshooting.
                  </li>
                  <li>
                    Tell us the steps to reproduce the issue and any recent
                    config changes.
                  </li>
                  <li>Check the FAQ first—many fixes are one click away.</li>
                </ul>
              </div>

              <div className="flex justify-start md:justify-end">
                <a
                  href="https://recomaze.ai/integration-guides/woocommerce-integration"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Button className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-gray-800">
                    Visit Support Website
                  </Button>
                </a>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  );
};

export default Page;