import type { Metadata } from "next";
import Link from "next/link";
import { DownloadButton } from "@/components/DownloadButton";
import { DownloadCta } from "@/components/DownloadCta";
import { FaqAccordion } from "@/components/FaqAccordion";
import { EngineOrbit } from "@/components/home/EngineOrbit";
import { HeroScanFeed } from "@/components/home/HeroScanFeed";
import {
  IconAlert,
  IconArrow,
  IconBan,
  IconBell,
  IconBolt,
  IconCheck,
  IconEye,
  IconGrid,
  IconList,
  IconNetwork,
  IconShield,
  IconTerminal,
  IconWindows,
} from "@/components/icons";
import type { Faq } from "@/lib/content";
import { plans as PLANS } from "@/lib/content";
import { site } from "@/lib/site";
import { ProtectionTabs } from "@/components/home/ProtectionTabs";

const homeDescription = `${site.name} is AI-assisted antivirus for Windows, built to explain what needs attention and what to do next.`;

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

const THREATS = [
  "Viruses",
  "Ransomware",
  "Trojans",
  "Spyware",
  "Malicious macros",
  "PowerShell attacks",
  "Fileless malware",
  "Worms",
  "Keyloggers",
  "Rootkit droppers",
] as const;

const ENGINE_ICONS = {
  list: IconList,
  grid: IconGrid,
  network: IconNetwork,
  alert: IconAlert,
} as const;

const CORE_POINTS = [
  {
    icon: "list" as const,
    title: "Known threat signals",
    body: "Recognizes security signals associated with previously identified threats.",
  },
  {
    icon: "grid" as const,
    title: "Behavioral signals",
    body: "Smart enough to consider activity and behavior alongside individual files.",
  },
  {
    icon: "network" as const,
    title: "AI-assisted analysis",
    body: "AI analysis that adds context to the security signals.",
  },
  {
    icon: "alert" as const,
    title: "Connected signals",
    body: "Brings multiple signals together instead of relying on a single indicator.",
  },
] as const;

const UPDATE_STEPS = [
  {
    n: "01",
    title: "Built for reliability",
    body: `${site.name} is developed with a security experience that stays dependable as the product evolves.`,
  },
  {
    n: "02",
    title: "Know what changed",
    body: `Updates should bring clarity, not confusion. ${site.name} keeps product changes easy to understand.`,
  },
  {
    n: "03",
    title: "Evolving with threats",
    body: "As security challenges change, it can continue developing to address new risks and improve protection.",
  },
  {
    n: "04",
    title: "Progress without the noise",
    body: `Improvements should make the product better - not make security feel more complicated. That's what ${site.name} ensures.`,
  },
] as const;

const HOME_FAQS: readonly Faq[] = [
  {
    q: `Can ${site.name} work alongside Windows Security?`,
    a: `Yes. ${site.name} is designed for Windows 11 and can complement the security features already built into your PC.`,
  },
  {
    q: `What happens when ${site.name} detects something?`,
    a: "Detected items can be surfaced with relevant security context, helping make the alert easier for you to understand and review.",
  },
  {
    q: `Will ${site.name} impact PC performance?`,
    a: `${site.name} is oriented toward a user-friendly security experience that is easy to integrate into daily usage of Windows. The program operates silently and ensures smooth PC operation regardless of any updates occurring.`,
  },
  {
    q: `How will ${site.name} perform security updates?`,
    a: `Security tools should be improved over time due to constantly changing threats. ${site.name} is developed with future improvements in mind and guarantees that the updates will not ruin your experience, but will rather improve it.`,
  },
  {
    q: "What can I do with a flagged item?",
    a: "The product concept includes isolation and item-management controls, giving you a clear place to review flagged items and available actions.",
  },
];

export default function Home() {
  return (
    <>
      {/* ================= Hero ================= */}
      <section className="hero-wrap">
        <div className="hero">
          <div className="hero-grid-bg" aria-hidden="true"></div>
          <div className="container position-relative">
            <div className="row align-items-center g-4 g-xl-5">
              <div className="col-12 col-lg-6">
                <p className="kicker kicker-dark">
                  <span className="kicker-dot"></span>AI-ASSISTED ANTIVIRUS
                </p>
                <h1 className="hero-title">
                  Protection with a little more <em>intelligence.</em>
                </h1>
                <p className="hero-lead">
                  A new approach to antivirus that brings AI-assisted explanations
              of what needs attention and what to do next.
                </p>
                <div className="hero-cta">
                  <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="#protection">
                    Explore the concept
                  </a>
                </div>
                <dl className="hero-facts">
                  <div>
                    <dt>~2 ms</dt>
                    <dd>per file scan</dd>
                  </div>
                  <div>
                    <dt>0</dt>
                    <dd>false alarms in testing</dd>
                  </div>
                  <div>
                    <dt>Free</dt>
                    <dd>during beta</dd>
                  </div>
                </dl>
              </div>

              <div className="col-12 col-lg-6">
                <div className="console" aria-hidden="true">
                  <div className="console-bar">
                    <span className="console-brand">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        className="w-auto h-28"
                        src="/assets/img/logo-white.svg"
                        alt=""
                      />
                    </span>
                    <span className="console-live">
                      <i></i>Protected
                    </span>
                  </div>
                  <div className="console-body">
                    <div className="console-status">
                      <div className="shield-ring">
                        <svg viewBox="0 0 120 120">
                          <circle cx="60" cy="60" r="52" className="sr-track" />
                          <circle cx="60" cy="60" r="52" className="sr-fill" />
                        </svg>
                        <span>
                          <IconShield />
                        </span>
                      </div>
                      <div>
                        <strong>Your PC is safe</strong>
                        <small>4 engines active - updated today</small>
                      </div>
                    </div>
                    <div className="console-grid">
                      <div className="cg">
                        <small>Scanned today</small>
                        <strong>12,480</strong>
                      </div>
                      <div className="cg">
                        <small>Blocked</small>
                        <strong className="lime-text">3</strong>
                      </div>
                      <div className="cg">
                        <small>Avg. scan</small>
                        <strong>2 ms</strong>
                      </div>
                    </div>
                    <HeroScanFeed />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            className="ticker"
            aria-label={`Threats ${site.name} protects against`}
          >
            <div className="ticker-track">
              {[0, 1].map((r) =>
                THREATS.map((t) => (
                  <span key={`${r}-${t}`}>
                    <IconBan />
                    {t}
                  </span>
                )),
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ================= Protection ================= */}
      <section className="section" id="protection">
        <div className="container">
          {/* <div className="split-head">
            <p className="kicker">
              <span className="num">01</span>AI-assisted antivirus
            </p>
            <h2>
              Protection with a little more <em>intelligence.</em>
            </h2>
            <p className="split-lead">
              A new approach to antivirus that brings AI-assisted explanations
              of what needs attention and what to do next.
            </p>
          </div> */}

          {/* <div className="d-flex flex-column align-items-start gap-2 mb-5">
            <DownloadButton className="btn-av btn-ink">
              Join early access <IconArrow />
            </DownloadButton>
            <a className="text-decoration-underline fw-600" href="#protection-tabs">
              Explore the concept
            </a>
          </div> */}

          <div className="mb-4">
            <p className="kicker mb-3">
              <span className="num">01</span>Protection
            </p>
            <h3 className="largeHeading mb-3">
              Something looks off? Now you&apos;ll know why.
            </h3>
            <p className="split-lead max-w-100">
              When something looks suspicious, you shouldn&apos;t need a security
              degree to know why. {site.name} is being designed to bring context
              to the signals that matter.
            </p>
          </div>

          <div id="protection-tabs">
            <ProtectionTabs />
          </div>
        </div>
      </section>

      {/* ================= Engines (bento) ================= */}
      <section className="section section-cream" id="engines">
        <div className="container">
          <div className="split-head">
            <p className="kicker">
              <span className="num">02</span>AI detection core
            </p>
            <h2>
              Security got <em>smarter.</em>
            </h2>
            <p className="split-lead">
              Security data can be complex. {site.name} brings AI-assisted
              analysis into the security experience, helping turn complex
              detection signals into clearer, more understandable information.
            </p>
          </div>

          <div className="bento">
            <div className="bento-main" aria-hidden="true">
              <EngineOrbit />
              <p className="bento-caption">
                Every file - four opinions - one decision
              </p>
            </div>
            {CORE_POINTS.map((en, i) => {
              const Icon = ENGINE_ICONS[en.icon];
              return (
                <article className="bento-card" data-reveal key={en.title}>
                  <div className="bc-top">
                    <span className="bc-ic">
                      <Icon />
                    </span>
                    <span className="bc-n">0{i + 1}</span>
                  </div>
                  <h3>{en.title}</h3>
                  <p>{en.body}</p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* ================= Performance ================= */}
      <section className="perf" id="performance">
        <div className="container">
          <div className="row align-items-end g-4">
            <div className="col-12 col-lg-7">
              <p className="kicker kicker-ink">
                <span className="num">03</span>Performance
              </p>
              <div className="perf-big">
                <span data-count-to="2">2</span>
                <small>ms</small>
              </div>
            </div>
            <div className="col-12 col-lg-5">
              <h2>
                Protection shouldn&apos;t slow you <em>down.</em>
              </h2>
              <p>
                Security should fit around your work - not interrupt it. {site.name} is being designed for a protection
                experience that feels natural alongside the things you already
                do on Windows 11.
              </p>
              <DownloadButton className="btn-av btn-ink">
                Try it now{" "}
                <span className="btn-arrow">
                  <IconArrow />
                </span>
              </DownloadButton>
            </div>
          </div>
        </div>
      </section>

      {/* ================= Features list ================= */}
      <section className="features-section-area">
        <div className="section" id="features">
          <div className="container">
            <div className="split-head">
              <p className="kicker">
                <span className="num">04</span>Essentials, Built-In
              </p>
              <h2>
                Everything you need. <em>Nothing you don&apos;t.</em>
              </h2>
              <p className="split-lead max-w-100">
                {site.name} is built around a simple idea: security should feel
                useful, understandable, and easy to manage - not overloaded with
                things you never asked for.
              </p>
            </div>
            <div className="tiles">
              <article className="tile tile-wide t-apricot-soft" data-reveal>
                <div>
                  <span className="tile-ic">
                    <IconBolt />
                  </span>
                  <h3>Quiet when things are fine</h3>
                  <p>
                    {site.name} is designed to keep security in the background
                    until something deserves your attention.
                  </p>
                </div>
                <div className="speed" aria-hidden="true">
                  <span className="speed-num">
                    2<small>ms</small>
                  </span>
                  <div className="speed-bar">
                    <i></i>
                  </div>
                </div>
              </article>
              <article className="tile" data-reveal>
                <span className="tile-ic">
                  <IconBell />
                </span>
                <h3>Alerts with answers</h3>
                <p>
                  Understand what happened, why it matters, and what the alert
                  means.
                </p>
              </article>
              <article className="tile" data-reveal>
                <span className="tile-ic">
                  <IconEye />
                </span>
                <h3>Your security, at a glance</h3>
                <p>
                  A focused experience for checking protection status and
                  keeping track of what needs attention.
                </p>
              </article>
              <article className="tile t-lilac-soft" data-reveal>
                <span className="tile-ic">
                  <IconTerminal />
                </span>
                <h3>Simple control</h3>
                <p>
                  Review flagged items and manage security events without
                  unnecessary complexity.
                </p>
              </article>
              <article className="tile tile-wide t-plum-solid" data-reveal>
                <div>
                  <span className="tile-ic">
                    <IconCheck />
                  </span>
                  <h3>Built for everyday use</h3>
                  <p>
                    From everyday browsing to important work, {site.name} is
                    being shaped around a practical security experience that
                    fits into the way you use your PC.
                  </p>
                </div>
                <div className="checks-vis" aria-hidden="true">
                  {Array.from({ length: 24 }).map((_, i) => (
                    <i key={i}></i>
                  ))}
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>

      {/* ================= Safe updates ================= */}
      <section className="section-inset pb-0" id="updates">
        <div className="container">
          <div className="dark-card">
            <div className="row g-4 g-lg-5 align-items-end">
              <div className="col-12 col-lg-6">
                <p className="kicker kicker-dark">
                  <span className="num">05</span>Safe updates
                </p>
                <h2>
                  Better protection. <em>Fewer interruptions.</em>
                </h2>
              </div>
              <div className="col-12 col-lg-6">
                <p className="dark-lead">
                  Security needs to evolve, but your day shouldn&apos;t stop every
                  time it does. {site.name} is built to make updates part of
                  the experience - not the whole experience.
                </p>
              </div>
            </div>
            <ol className="steps">
              {UPDATE_STEPS.map((s) => (
                <li data-reveal key={s.n}>
                  <span className="step-n">{s.n}</span>
                  <h3>{s.title}</h3>
                  <p>{s.body}</p>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* ================= Plans ================= */}
      <section className="section" id="plans">
        <div className="container">
          <div className="split-head">
            <p className="kicker">
              <span className="num">06</span>Pricing Plans
            </p>
            <h2>
              Choose the protection that <em>fits.</em>
            </h2>
            <p className="split-lead">
              Straightforward plans built around the essentials, so choosing
              your protection doesn&apos;t have to be complicated. Free in beta.
            </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>
                <DownloadButton
                  className={`btn-av ${p.hot ? "btn-lime" : "btn-ink"} btn-lg w-100`}
                >
                  Get {p.name}{" "}
                  <span className="btn-arrow">
                    <IconArrow />
                  </span>
                </DownloadButton>
                <ul className="ticks">
                  {p.features.map((li) => (
                    <li key={li}>
                      <IconCheck />
                      {li}
                    </li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ================= Experience ================= */}
      <section className="section section-cream" id="experience">
        <div className="container">
          <div className="row g-4 justify-content-between align-items-center">
            <div className="col-md-5 col-lg-5 col-12">
              <p className="kicker">
                <span className="num">07</span>The Experience
              </p>
              <h2>
                Protection built around what <em>matters</em>
              </h2>
              <p className="split-lead">
                {site.name} provides key security features in a single
                protection package for Windows 11.
              </p>
            </div>
            <div className="col-md-7 col-lg-6 col-12">
              <div className="road-body mt-xl-2">
                <ul className="ticks">
                  <li className="text-lg align-items-center">
                    <IconCheck />
                    Detection and analysis with the power of AI
                  </li>
                  <li className="text-lg align-items-center">
                    <IconCheck />
                    Protection from suspicious files and behavior
                  </li>
                  <li className="text-lg align-items-center">
                    <IconCheck />
                    Item isolation and management
                  </li>
                  <li className="text-lg align-items-center">
                    <IconCheck />
                    Alerts with helpful security information
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ================= FAQ ================= */}
      <section className="section" 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">08</span>FAQs
                </p>
                <h2>
                  Got <em>Questions?</em>
                </h2>
                <p className="split-lead">
                  Let&apos;s clear things up.{" "}
                  <Link className="text-decoration-underline fw-600" href="/faq">
                    See all FAQs
                  </Link>
                </p>
              </div>
            </div>
            <div className="col-12 col-lg-8">
              <FaqAccordion items={HOME_FAQS} />
            </div>
          </div>
        </div>
      </section>

      {/* ================= CTA ================= */}
      <DownloadCta />

      {/* <section className="section-inset pt-0" id="protection-journey">
        <div className="container">
          <h2 className="text-xxl fw-600 mb-3">Get protected in one click.</h2>
          <p className="text-lg fw-400 mb-3" style={{ color: "var(--ink-2)" }}>
            Start your protection journey now in just a few simple steps. Free in
            beta. No card required.
          </p>
          <DownloadButton className="text-decoration-underline fw-700">
            Download {site.name}
          </DownloadButton>
        </div>
      </section> */}
    </>
  );
}