"use client";

import { useState } from "react";
import Image from "next/image";
import { PiMinus, PiPlus } from "react-icons/pi";

import SectionTitle from "./SectionTitle";
import Button from "../../components/ui/Button";

const trustItems: string[] = [
  "Advanced AI Detection Models",
  "Confidence-Based Scoring",
  "Continuous Model Updates",
  "Fast Results in Seconds",
];

interface FaqItem {
  question: string;
  answer: string;
}

const faq: FaqItem[] = [
  {
    question: "How do I analyze an image?",
    answer: "Click the Analyse AI button that appears on supported images.",
  },
  {
    question: "Do I need a Chrome extension?",
    answer: "Yes, KleboAI works through a browser extension.",
  },
  {
    question: "How do I activate the extension?",
    answer:
      "Subscribe, receive your unique license key, and activate the extension.",
  },
  {
    question: "Can I cancel my subscription?",
    answer: "Yes, you can cancel your subscription anytime from your account.",
  },
];

interface CreditPack {
  name: string;
  price: string;
  credits: string;
  active: boolean;
}

const creditPacks: CreditPack[] = [
  { name: "Starter", price: "$10", credits: "100", active: true },
  { name: "Standard", price: "$20", credits: "210", active: false },
  { name: "Pro", price: "$30", credits: "320", active: false },
];

export default function TrustPricingFaq() {
  const [openIndex, setOpenIndex] = useState<number>(0);

  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}
                  className="
                    flex items-center 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="/images/trust-icon.svg"
                    alt={item}
                    width={30}
                    height={30}
                    className="h-6 w-6 shrink-0 sm:h-7 sm:w-7 md:h-7.5 md:w-7.5"
                  />

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

      <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <div className="grid items-start gap-10 md:grid-cols-12 md:gap-6 xl:gap-12">
            <div className="md:col-span-6">
              <SectionTitle
                badge="PACKAGES"
                title={'Choose A <span class="text-gradient">Credit Pack</span>'}
                headingClassName="mt-6 text-center md:text-left"
                className="mx-auto max-w-xl text-center md:mx-0 md:text-left"
              />

              <div className="glass-card mx-auto mt-6 max-w-155 rounded-[10px] p-5 md:mx-0">
                <h3 className="font-body text-base font-medium text-heading lg:text-xl">
                  How it works?
                </h3>

                <ul className="mt-5 space-y-3">
                  {[
                    "Choose a credit package that fits your needs",
                    "Complete the secure payment",
                    "Credits will be added to your account instantly",
                    "Use credits anytime. No expiry. No limits",
                  ].map((item) => (
                    <li
                      key={item}
                      className="flex items-center gap-2.5 text-base leading-none text-heading lg:text-xl"
                    >
                      <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-[#EFE6FF] text-sm font-semibold text-link-1">
                        ✓
                      </span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="md:col-span-6">
              <div className="mx-auto max-w-155 overflow-hidden lg:ms-auto">
                <div className="glass-card shadow-table-head mb-2.5 grid grid-cols-[1fr_1fr_auto] items-center gap-4 rounded-xl border-2 px-5 py-5 text-base text-text sm:px-6 lg:text-xl">
                  <span>Pack</span>
                  <span>Credits</span>
                  <span className="w-24" />
                </div>

                <div className="glass-card rounded-xl border-2 shadow-none">
                  {creditPacks.map((pack) => (
                    <div
                      key={pack.name}
                      className="grid grid-cols-[1fr_1fr_auto] items-center gap-4 border-b-2 border-white px-5 py-5 shadow-table-body last:border-b-0 sm:px-6"
                    >
                      <div>
                        <p className="mb-0.5 text-sm leading-6 text-text lg:text-lg">
                          {pack.name}
                        </p>
                        <p className="font-heading text-base font-semibold leading-8.5 text-heading lg:text-2xl">
                          {pack.price}
                        </p>
                      </div>

                      <p className="font-heading text-base font-semibold leading-8.5 text-heading lg:text-2xl">
                        {pack.credits}
                      </p>

                      <Button
                        variant={pack.active ? "primary" : "white"}
                        buttonClassName={pack.active ? "" : "!shadow-none"}
                        BtnInnerclassName=" lg:text-lg"
                      >
                        Buy Now
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <SectionTitle
            badge="FAQ"
            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>

          <div className="mt-8 space-y-4 sm:mt-10 sm:space-y-5 md:mt-12 md:space-y-6 lg:mt-15 lg:space-y-8">
            {faq.map((item, index) => {
              const isOpen = openIndex === index;

              return (
                <div
                  key={item.question}
                  className={`
                    group rounded-xl glass-card glass-card-hover p-4 transition-all duration-300
                    sm:p-5 md:p-6
                    ${isOpen ? "header-shadow" : ""}
                  `}
                >
                  <button
                    type="button"
                    onClick={() => setOpenIndex(index)}
                    className="
                      flex w-full cursor-pointer items-center gap-4
                      text-left font-heading text-lg font-normal text-heading
                      sm:gap-5 sm:text-xl
                      md:gap-6 md:text-2xl
                    "
                  >
                    <span className="flex h-7.5 w-7.5 min-w-7.5 items-center justify-center">
                      {isOpen ? (
                        <PiMinus className="text-link-1" />
                      ) : (
                        <PiPlus className="text-heading" />
                      )}
                    </span>

                    {item.question}
                  </button>

                  <div
                    className={`
                      grid overflow-hidden transition-all duration-500 ease-in-out
                      ${
                        isOpen
                          ? "mt-2.5 grid-rows-[1fr] opacity-100"
                          : "grid-rows-[0fr] opacity-0"
                      }
                    `}
                  >
                    <div className="overflow-hidden">
                      <p className="pl-11 font-body text-base leading-7 text-text sm:pl-12 sm:text-lg md:pl-13.5 md:text-xl">
                        {item.answer}
                      </p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </>
  );
}