import type { Metadata } from "next";
import Link from "next/link";
import { DownloadButton } from "@/components/DownloadButton";
import { FaqAccordion } from "@/components/FaqAccordion";
import { IconArrow, IconCheck, IconDownload } from "@/components/icons";
import { PageHero } from "@/components/PageHero";
import type { Faq } from "@/lib/content";
import { plans } from "@/lib/content";
import { site } from "@/lib/site";

const description = `Clear pricing and straightforward plans for ${site.name}.`;

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

const pricingFaqs: readonly Faq[] = [
  {
    q: `How many plans does ${site.name} offer?`,
    a: `${site.name} comes with three protection packages, offering users several options to choose from according to their requirements. The beta version is free.`,
  },
  {
    q: `What is included in each ${site.name} plan?`,
    a: "Each package comprises a selection of security features, catering to various protection needs. You may go through the list of available features and select the package that is right for you.",
  },
  {
    q: "Does every plan include antivirus protection?",
    a: `Absolutely. Every ${site.name} plan includes core antivirus protection without any compromise. It's just that you get additional security features and functionalities with different plans. Even if you choose the most basic plan, you are protected.`,
  },
  {
    q: `Can I change my ${site.name} plan?`,
    a: "Plan options and management vary according to the subscription conditions related to your chosen plan. Review your plan details to see what options you have.",
  },
  {
    q: `Which ${site.name} plan should I choose?`,
    a: "Think about what kind of protection you require and what options you will get from each of them. A comparison of all the plans could be helpful for you in choosing the right one.",
  },
];

export default function PricingPage() {
  return (
    <>
      <PageHero
        title="Simple Pricing"
        accent="Plans"
        lead="Clear pricing, straightforward plans, and protection to fit everyone without unnecessary extras."
      />

      {/* ================= Plans ================= */}
      <section className="section pt-5" id="plans">
        <div className="container">
          <div className="split-head mb-5">
            <p className="kicker">
              <span className="num">01</span>Plans
            </p>
            <h2>
              Your Protection, <em>Your Plan</em>
            </h2>
            <p className="split-lead">
              Select a protection package that suits your requirements without
              any unnecessary complications. {site.name} offers clear pricing
              plans for every need and preference.
            </p>
          </div>

          <div className="plans">
            {plans.map((p) => (
              <article
                className={`plan${p.hot ? " plan-hot" : ""}`}
                data-reveal
                key={p.name}
              >
                <div className="plan-top">
                  <span className="plan-name">
                    {site.name} {p.name}
                  </span>
                  {p.hot ? <span className="plan-flag">Recommended</span> : null}
                </div>
                <div className="plan-meta">
                  <p className="plan-for">{p.for}</p>
                  <span className="plan-dev min-w-fit-content">{p.devices}</span>
                </div>
                <div className="plan-price">
                  {p.price}
                  <span>/ {p.period}</span>
                </div>
                <a
                  className={`btn-av ${p.hot ? "btn-lime" : "btn-ink"} btn-lg w-100`}
                  href="#download"
                >
                  Get {p.name}{" "}
                  <span className="btn-arrow">
                    <IconArrow />
                  </span>
                </a>
                <ul className="ticks">
                  {p.features.map((feature) => (
                    <li key={feature}>
                      <IconCheck />
                      {feature}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ================= FAQ ================= */}
      <section className="section pt-0" id="faq">
        <div className="container">
          <div className="row g-4 g-lg-5">
            <div className="col-12 col-lg-4">
              <div className="sticky-head">
                <p className="kicker">
                  <span className="num">02</span>FAQs
                </p>
                <h2>
                  Pricing Questions, <em>Answered</em>
                </h2>
                <p className="split-lead">
                  Still unsure? <Link href="/support">Talk to our team</Link>.
                </p>
              </div>
            </div>
            <div className="col-12 col-lg-8">
              <FaqAccordion id="faqAcc" items={pricingFaqs} />
            </div>
          </div>
        </div>
      </section>

      {/* ================= CTA ================= */}
      <section className="section-inset pt-0" id="download">
        <div className="container">
          <div className="cta">
            <div className="cta-copy">
              <h2>
                Get protected in <em>one click.</em>
              </h2>
              <p>
                Start your protection journey now in just a few simple steps.
              </p>
            </div>
            <div className="cta-action">
              <DownloadButton className="btn-av btn-ink btn-xl">
                <IconDownload /> Join early access
              </DownloadButton>
              {/* <span className="cta-meta">Windows 10 &amp; 11 · 64-bit · ~40 MB</span> */}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}