import type { Metadata } from "next";
import Image from "next/image";
import { DownloadCta } from "@/components/DownloadCta";
import { PageHero } from "@/components/PageHero";
import {
  IconChip,
  IconEye,
  IconList,
  IconLock,
  IconNetwork,
  IconWindows,
} from "@/components/icons";
import { site } from "@/lib/site";

const description = `${site.name} was created around a simple idea: antivirus should simplify security management.`;

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

const REIMAGINED_POINTS = [
  {
    icon: IconChip,
    title: "AI-assisted intelligence",
    body: `${site.name} brings an AI-assisted layer to security, helping add context to complex detection signals and make them easier to understand.`,
  },
  {
    icon: IconNetwork,
    title: "Context-rich detection",
    body: `Security events don't necessarily tell you everything about what's going on. That's why ${site.name} helps link relevant signals together.`,
  },
  {
    icon: IconEye,
    title: "Focused protection",
    body: "It ensures the security experience remains focused on what matters by avoiding distracting elements in terms of additional events.",
  },
  {
    icon: IconList,
    title: "Clear next steps",
    body: `When something is flagged, ${site.name} makes it easy to review available information and actions through a user-friendly interface.`,
  },
  {
    icon: IconLock,
    title: "Thoughtful control",
    body: "It's easy to review suspicious files, handle quarantined items, and make important decisions with security.",
  },
  {
    icon: IconWindows,
    title: "Built for Windows 11",
    body: `${site.name} is being developed specifically for the Windows 11 experience and provides everyday protection for PC users.`,
  },
] as const;

export default function AboutPage() {
  return (
    <>
      <PageHero
        title="About"
        accent="Us"
        lead={`${site.name} was created around a simple idea: an antivirus tool shouldn't only inform a user about a problem. It should simplify security management.`}
      />

      {/* ================= About ================= */}
      <section className="section">
        <div className="container">
          <div className="row g-4 g-lg-5">
            <div className="col-12 col-lg-6 order-lg-2">
              <Image
                src="/assets/img/placeholder.svg"
                alt=""
                width={800}
                height={560}
                className="w-100 h-auto rounded-4"
                priority
              />
            </div>
            <div className="col-12 col-lg-6 order-lg-1">
              <div className="sticky-head">
                <p className="kicker">
                  <span className="num">01</span>About {site.name}
                </p>
                <h2>
                  Making security <em>easier to understand.</em>
                </h2>
                <p className="split-lead max-w-100 mb-3">
                  While digital security is now a part of everyday life, using
                  antivirus was not always as simple as it is now with{" "}
                  {site.name}. Technical warnings, unknown notifications, and
                  excess information have always led to confusion.
                </p>
                <p className="split-lead max-w-100 mb-3">
                  This is where {site.name} comes into play. This AI-assisted
                  antivirus is designed in a way that makes use of both
                  AI-driven intelligence and a concentrated security experience
                  to make it easier to comprehend what is going on.
                </p>
                <p className="split-lead max-w-100">
                  The idea is that protecting yourself does not have to be
                  confusing.
                </p>
              </div>
            </div>

            <div className="col-12 col-lg-6 order-lg-3">
              <Image
                src="/assets/img/placeholder.svg"
                alt=""
                width={800}
                height={560}
                className="w-100 h-auto rounded-4"
              />
            </div>
            <div className="col-12 col-lg-6 order-lg-4">
              <div className="sticky-head">
                <p className="kicker">
                  <span className="num">02</span>Built on Trust
                </p>
                <h2>
                  Security starts <em>with trust.</em>
                </h2>
                <p className="split-lead max-w-100 mb-3">
                  Trust isn&apos;t something an antivirus can simply ask for.
                  Trust has to be earned through clarity of purpose and a secure
                  experience that users can easily understand.
                </p>
                <p className="split-lead max-w-100 mb-3">
                  That is exactly what {site.name} was designed to do. Whether
                  it is through more informative notifications or simple
                  controls, all aspects of the experience are carefully crafted
                  to become more understandable and less overwhelming.
                </p>
                <p className="split-lead max-w-100">
                  After all, when your security software is protecting something
                  valuable, you have to be able to understand what it does.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ================= Features list ================= */}
      <section className="section pt-0">
        <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">03</span>Security, Reimagined
                </p>
                <h2>
                  Where Security Meets <em>Simplicity</em>
                </h2>
                <p className="split-lead">
                  {site.name} brings intelligent security in a more streamlined
                  format. Threats don&apos;t need to complicate your solution;
                  your protection solution should be clean, practical, and easy
                  to understand.
                </p>
              </div>
            </div>
            <div className="col-12 col-lg-8">
              <ul className="flist">
                {REIMAGINED_POINTS.map((point) => {
                  const Icon = point.icon;
                  return (
                    <li className="frow" data-reveal key={point.title}>
                      <span className="frow-ic">
                        <Icon />
                      </span>
                      <h3>{point.title}</h3>
                      <p>{point.body}</p>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <DownloadCta />
    </>
  );
}