import React from 'react';

import Head from '@docusaurus/Head';
import Link from '@docusaurus/Link';
import BugReportIcon from '@mui/icons-material/BugReport';
import CodeIcon from '@mui/icons-material/Code';
import ReportIcon from '@mui/icons-material/Report';
import SecurityIcon from '@mui/icons-material/Security';
import Layout from '@theme/Layout';
import clsx from 'clsx';
import LogoContainer from '../components/LogoContainer';
import NewsletterForm from '../components/NewsletterForm';
import styles from './landing-page.module.css';

function HeroSection() {
  return (
    <section className={styles.heroSection}>
      <div className="container">
        <img
          srcSet="/img/riskreport-1.png 1x, /img/riskreport-1@2x.png 2x"
          src="/img/riskreport-1.png"
          alt="LLM Vulnerability Scanner"
          className={styles.heroImage}
        />
        <div className={styles.logoSection}>
          Evaluations used by builders at...
          <LogoContainer className={styles.heroLogos} noBackground noBorder />
        </div>
        <h2>Uniquely adapted to your LLM product</h2>
        <p>
          No generic scans. Promptfoo customizes vulnerability probes specifically for your
          application.
        </p>
      </div>
    </section>
  );
}

function ScannerHeader() {
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <h1 className={styles.heroTitle}>Find & fix LLM vulnerabilities</h1>
        <p className={styles.heroSubtitle}>Open-source vulnerability testing for AI</p>
        <div className={styles.buttons}>
          <Link
            className={clsx('button button--primary button--lg', styles.buttonPrimary)}
            to="/docs/red-team/quickstart"
          >
            Get Started
          </Link>
          <Link
            className={clsx('button button--secondary button--lg', styles.buttonSecondary)}
            to="/contact/"
          >
            Request a demo
          </Link>
        </div>
      </div>
      <HeroSection />
    </header>
  );
}

function FeaturesSection() {
  return (
    <section className={styles.featuresSection}>
      <div className="container">
        <h2>Comprehensive Security &amp; Policy Coverage</h2>
        <div className={styles.features}>
          <div className={styles.featureItem}>
            <h3>PII Leaks</h3>
            <p>Prevent the exposure of personally identifiable information.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Competitor Endorsements</h3>
            <p>Avoid suggesting competitor products or services.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Unintended Contracts</h3>
            <p>Don't make promises your business can't keep.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Prompt Injection</h3>
            <p>Protect against unauthorized prompt manipulations.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Jailbreaking</h3>
            <p>Prevent users from bypassing restrictions.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Excessive Agency</h3>
            <p>Limit the model's desire &amp; ability to take unwanted actions.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Overreliance</h3>
            <p>Prevent reliance on incorrect input assumptions.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Hijacking</h3>
            <p>Safeguard against unauthorized or off-topic use.</p>
          </div>
          <div className={styles.featureItem}>
            <h3>Hallucination</h3>
            <p>Minimize the generation of false or misleading information.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function BenefitsSection() {
  return (
    <section className={styles.benefitsSection}>
      <div className="container">
        <h2 className={styles.sectionTitle}>Why choose our scanner?</h2>
        <div className={styles.benefitsList}>
          <div className={styles.benefitItem}>
            <SecurityIcon className={styles.benefitIcon} />
            <div className={styles.benefitContent}>
              <h3>Comprehensive, data-driven pentests</h3>
              <p>
                Verify security, privacy, and compliance performance for models, fine-tunes, RAGs,
                and agents.
              </p>
            </div>
          </div>
          <div className={styles.benefitItem}>
            <BugReportIcon className={styles.benefitIcon} />
            <div className={styles.benefitContent}>
              <h3>Custom probes targeting your application</h3>
              <p>
                Automatically generate adversarial tests targeted specifically at your application
                and use case.
              </p>
            </div>
          </div>
          <div className={styles.benefitItem}>
            <ReportIcon className={styles.benefitIcon} />
            <div className={styles.benefitContent}>
              <h3>Detailed vulnerability reports</h3>
              <p>In-depth analysis of vulnerabilities and practical remedies.</p>
            </div>
          </div>
          <div className={styles.benefitItem}>
            <CodeIcon className={styles.benefitIcon} />
            <div className={styles.benefitContent}>
              <h3>Open Source</h3>
              <p>
                Completely <a href="https://github.com/promptfoo/promptfoo">open source</a> with a
                community of seasoned contributors from major tech companies.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ActionOrientedSection() {
  return (
    <section className={styles.actionOrientedSection}>
      <div className="container">
        <h2>Detect & fix critical failures</h2>
        <p>Discover hidden risks and take action to protect your brand and users.</p>
        <div className={styles.screenshotPlaceholder}>
          <img
            loading="lazy"
            src="/img/riskreport-2.png"
            srcSet="/img/riskreport-2.png 1x, /img/riskreport-2@2x.png 2x"
            alt="Sample vulnerability report"
          />
        </div>
      </div>
    </section>
  );
}

function DashboardSection() {
  return (
    <section className={styles.dashboardSection}>
      <div className="container">
        <h2>Continuous monitoring</h2>
        <p>
          Keep tabs on your LLM application's security posture across different models, prompts, and
          applications.
        </p>
        <div className={styles.screenshotPlaceholder}>
          <img
            loading="lazy"
            src="/img/continuous-monitoring.png"
            srcSet="/img/continuous-monitoring.png 1x, /img/continuous-monitoring@2x.png 2x"
            alt="Continuous monitoring dashboard"
          />
        </div>
      </div>
    </section>
  );
}

function CallToActionSection() {
  return (
    <section className={styles.callToActionSection}>
      <div className="container">
        <h2>Uncover hidden brand and legal risks</h2>
        <div className={styles.buttons}>
          <Link className="button button--primary button--lg" to="/docs/red-team/quickstart">
            Get Started
          </Link>
          <Link
            className={clsx('button button--secondary button--lg', styles.buttonSecondary)}
            to="/contact/"
          >
            Contact Us
          </Link>
        </div>
      </div>
    </section>
  );
}

export default function LLMVulnerabilityScanner(): React.ReactElement {
  return (
    <Layout
      title="LLM Vulnerability Scanner"
      description="Measure LLM risk with this free, open-source scanner. Promptfoo customizes vulnerability probes specifically for your application. Detect PII leaks, jailbreaks, injections, unintended business contracts, and more."
    >
      <Head>
        <meta
          property="og:image"
          content="https://www.promptfoo.dev/img/meta/vulnerability-scanner.png"
        />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <div className={styles.pageContainer}>
        <ScannerHeader />
        <main className={styles.mainContent}>
          <FeaturesSection />
          <ActionOrientedSection />
          <DashboardSection />
          <BenefitsSection />
          <CallToActionSection />
          <NewsletterForm />
        </main>
      </div>
    </Layout>
  );
}