import { __ } from "@wordpress/i18n";
import DefaultPageLayout from "@/components/DefaultPageLayout";

const Help = () => {
  return (
    <DefaultPageLayout
      title={__("Help & Documentation", "arraysubs")}
      subtitle={__("Get help and learn about ArraySubs features", "arraysubs")}
    >
      <section
        className="arraysubs-help"
        aria-label={__("Support information", "arraysubs")}
      >
        <div className="arraysubs-help__card">
          <p className="arraysubs-help__eyebrow">
            {__("Documentation & Resources", "arraysubs")}
          </p>

          <h2 className="arraysubs-help__title">
            {__("User Guides & Documentation", "arraysubs")}
          </h2>

          <p className="arraysubs-help__description">
            {__(
              "Find step-by-step guides, feature walkthroughs, and detailed documentation in our user manual.",
              "arraysubs",
            )}
          </p>

          <div className="arraysubs-help__links">
            <a
              className="arraysubs-help__link arraysubs-help__link--button"
              href="https://support.arrayhash.com/arraysubs/"
              target="_blank"
              rel="noopener noreferrer"
            >
              {__("User Documentation", "arraysubs")}
            </a>
            <a
              className="arraysubs-help__link arraysubs-help__link--button"
              href="https://arrayhash.com/deals/arraysubs"
              target="_blank"
              rel="noopener noreferrer"
            >
              {__("Plugin Website", "arraysubs")}
            </a>
          </div>
        </div>

        <div className="arraysubs-help__card">
          <p className="arraysubs-help__eyebrow">
            {__("Need assistance?", "arraysubs")}
          </p>

          <h2 className="arraysubs-help__title">
            {__("I'm here to help", "arraysubs")}
          </h2>

          <p className="arraysubs-help__description">
            {__(
              "Please contact for any assistance including bug reports, troubleshooting or new feature requests at",
              "arraysubs",
            )}{" "}
            <a
              className="arraysubs-help__link"
              href="mailto:emran@arrayhash.com"
            >
              emran@arrayhash.com
            </a>
          </p>
          <p className="arraysubs-help__description">
            {__(
              "🥰 I will get back to you as soon as possible, I always do.",
              "arraysubs",
            )}
          </p>
        </div>
      </section>
    </DefaultPageLayout>
  );
};

export default Help;