"use client";

import Image from "next/image";

import SectionTitle from "./SectionTitle";
import PackagesSection from "./PackagesSection";
import FaqSection, { FaqItem } from "../FaqSection";
import BrowserCompatibility from "./Browsercompatibility";

interface TrustItem {
  title: string;
  icon: string;
}

const trustItems: TrustItem[] = [
  {
    title: "Advanced AI Detection Models",
    icon: "/images/trust-icon-1.svg",
  },
  {
    title: "Confidence-Based Scoring",
    icon: "/images/trust-icon-2.svg",
  },
  {
    title: "Continuous Model Updates",
    icon: "/images/trust-icon-3.svg",
  },
  {
    title: "Fast Results in Seconds",
    icon: "/images/trust-icon-4.svg",
  },
];

const faq: FaqItem[] = [
  {
    question: "How do I analyze an image or video?",
    answer:
      "Simply click the 'Analyze AI' button displayed on supported images or videos to view the detection results instantly.",
  },
  {
    question: "Do I need the Chrome extension to use KleboAI?",
    answer:
      "Yes. KleboAI runs as a Chrome extension and analyzes visual content directly on supported websites.",
  },
  {
    question: "How do I activate the extension?",
    answer:
      "After subscribing, enter your license key in the extension to activate your account and start analyzing content.",
  },
  {
    question: "Can I cancel my subscription at any time?",
    answer:
      "Yes. You can manage or cancel your subscription anytime from your account settings.",
  },
  {
    question: "What does the AI-generated percentage mean?",
    answer:
      "The percentage represents the estimated likelihood that the content was generated by AI. Higher values indicate a greater probability of synthetic content.",
  },
];

export default function TrustPricingFaq() {
  return (
    <>
      <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <SectionTitle
            badge="Why Us"
            title={'Why Trust <span class="text-gradient">Our Analysis?</span>'}
          >
            Advanced AI detection. Transparent results. Instant insights.
          </SectionTitle>

          <div className="glass-card mt-8 rounded-3xl p-4 sm:mt-10 sm:p-6 md:p-8 lg:p-10 2xl:p-12.5">
            <div
              className="
                grid grid-cols-1
                divide-y divide-[rgba(137,169,255,0.3)]
                sm:grid-cols-2
                sm:divide-x sm:divide-y
                lg:grid-cols-4
                lg:divide-x lg:divide-y-0
              "
            >
              {trustItems.map((item) => (
                <div
                  key={item.title}
                  className="
                    flex items-center gap-2 lg:gap-4 px-0 py-5
                    sm:px-5 sm:py-6
                    lg:px-6 lg:py-0
                    lg:first:pl-0
                    lg:last:pr-0
                  "
                >
                  <Image
                    src={item.icon}
                    alt={item.title}
                    width={32}
                    height={32}
                    className="h-6 w-6 shrink-0 md:h-7 md:w-7 lg:h-10 lg:w-10"
                  />

                  <h3 className="font-body text-base font-medium leading-6 text-heading sm:text-lg">
                    {item.title}
                  </h3>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <PackagesSection />
      <div className="relative overflow-hidden">
       
        <BrowserCompatibility />
        <section className="py-8 sm:py-10 md:py-12 2xl:py-section bg-purple-100/50" >
          <div className="container-k">
            <SectionTitle
              badge="FAQ"
              className="max-w-2xl!"
              title={
                'Start Detecting AI Images <span class="text-gradient">We’ve Got Answers</span>'
              }
            >
              Learn how the extension works, how subscriptions are managed, and
              how to get started in minutes.
            </SectionTitle>

            <FaqSection />
          </div>
        </section>
      </div>
    </>
  );
}