import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { DownloadButton } from "@/components/DownloadButton";
import { IconArrow, IconGuide, IconKey, IconShield, IconWindows } from "@/components/icons";
import { site } from "@/lib/site";

const description = `Help topics and support guidance for ${site.name}.`;

export const metadata: Metadata = {
  title: "Support",
  description,
  openGraph: { title: `Support | ${site.name}`, description },
  twitter: { title: `Support | ${site.name}`, description },
};

const topics = [
  {
    icon: IconGuide,
    title: `About ${site.name}`,
    body: `Learn what ${site.name} is and how its AI-assisted approach works.`,
    href: "/about",
    variant: "",
  },
  {
    icon: IconShield,
    title: "Common Questions, Answered",
    body: `Get quick answers to the most common questions about GPTDefend’s AI-powered protection.`,
    href: "/faq",
    variant: "t-lilac-soft",
  },
  {
    icon: IconKey,
    title: "Security & Privacy",
    body: `Learn how ${site.name} approaches your information, privacy, and everyday security.`,
    href: "/privacy-policy",
    variant: "",
  },
] as const;

export default function SupportPage() {
  return (
    <>
      {/* ================= Hero ================= */}
      <section className="hero-wrap">
        <div className="hero hero-gradient">
          <div className="hero-grid-bg" aria-hidden="true" />
          <div className="container position-relative">
            <div className="row justify-content-center align-items-center g-4 g-xl-5">
              <div className="col-12 col-lg-6">
                <h1 className="hero-title hero-position">
                  How can we <em>help?</em>
                </h1>
                <div className="hero-cta hero-position mb-4">
                  <DownloadButton className="btn-av btn-lime btn-lg">
                    <IconWindows /> Join early access{" "}
                    <span className="btn-arrow">
                      <IconArrow />
                    </span>
                  </DownloadButton>
                  <a className="btn-av btn-ghost-light btn-lg" href="#features">
                    Explore more
                  </a>
                </div>
              </div>
              <div className="col-12 col-lg-6">
                <Image
                  src="/assets/img/placeholder.svg"
                  alt=""
                  width={800}
                  height={500}
                  className="w-100 h-auto"
                  priority
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ================= Help topics ================= */}
      <section className="support-section-area">
        <div className="section" id="features">
          <div className="container">
            <div className="split-head">
              <p className="kicker">
                <span className="num">01</span>Support
              </p>
              <h2>
                Browse <em>Help Topics</em>
              </h2>
            </div>
            <div className="tiles support-tiles">
              {topics.map((topic) => {
                const Icon = topic.icon;
                return (
                  <Link href={topic.href} key={topic.title}>
                    <article
                      className={`tile tile-card ${topic.variant}`}
                      data-reveal
                    >
                      <span className="tile-ic">
                        <Icon />
                      </span>
                      <div className="tile-content row align-items-center">
                        <div className="col-sm-9 col-12 d-flex flex-column g-2">
                          <h3>{topic.title}</h3>
                          <p className="text-sm">{topic.body}</p>
                        </div>
                        <div className="col-sm-3 col-12 d-flex justify-content-sm-end">
                          <span className="btn-arrow">
                            <IconArrow />
                          </span>
                        </div>
                      </div>
                    </article>
                  </Link>
                );
              })}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}