import { ChevronDown } from "lucide-react";

import FAQAssistantVisual, { type FAQVariant } from "@/components/common/FAQAssistantVisual";
import type { Locale } from "@/lib/locales";

type PremiumFAQProps = {
  eyebrow?: string;
  faqs: readonly (readonly string[])[];
  id?: string;
  locale: Locale;
  subtitle?: string;
  title: string;
  variant: FAQVariant;
};

const themeMap = {
  brand: {
    accent: "#6268DD",
    border: "#E3E1FB",
    glowOne: "#EEF0FF",
    glowTwo: "#E8FBFF",
  },
  pureestate: {
    accent: "#3678DC",
    border: "#D9E8FB",
    glowOne: "#EAF3FF",
    glowTwo: "#E8FBFF",
  },
  buildpro: {
    accent: "#14B88A",
    border: "#D9E8FB",
    glowOne: "#ECFEFF",
    glowTwo: "#EEF2FF",
  },
  societypro: {
    accent: "#278D61",
    border: "#D8ECE2",
    glowOne: "#E8F8EF",
    glowTwo: "#ECFEFF",
  },
} satisfies Record<FAQVariant, Record<string, string>>;

export default function PremiumFAQ({
  eyebrow,
  faqs,
  id,
  locale,
  subtitle,
  title,
  variant,
}: PremiumFAQProps) {
  const theme = themeMap[variant];

  return (
    <section id={id} className="relative scroll-mt-24 overflow-hidden border-y border-[#edf0f6] bg-[#fbfdff] py-16 sm:py-20">
      <div className="pointer-events-none absolute -left-20 top-10 h-56 w-56 rounded-full blur-3xl" style={{ backgroundColor: theme.glowOne }} />
      <div className="pointer-events-none absolute -right-20 bottom-10 h-56 w-56 rounded-full blur-3xl" style={{ backgroundColor: theme.glowTwo }} />
      <div className="relative mx-auto grid max-w-[1180px] items-center gap-10 px-6 lg:grid-cols-[0.92fr_1.08fr] xl:px-8">
        <FAQAssistantVisual locale={locale} variant={variant} />

        <div className="min-w-0">
          <div className="max-w-2xl">
            {eyebrow ? (
              <p className="text-[11px] font-extrabold uppercase tracking-[0.18em]" style={{ color: theme.accent }}>
                {eyebrow}
              </p>
            ) : null}
            <h2 className="mt-3 text-3xl font-extrabold tracking-[-0.055em] text-[#111a35] sm:text-4xl">{title}</h2>
            {subtitle ? <p className="mt-3 text-[15px] leading-7 text-[#657694]">{subtitle}</p> : null}
          </div>

          <div className="mt-7 space-y-3">
            {faqs.map((faq, index) => {
              const question = faq[0] ?? "";
              const answer = faq[1] ?? "";
              return (
                <details
                  key={question}
                  open={index === 0}
                  className="group rounded-2xl border bg-white p-5 shadow-[0_8px_20px_rgba(45,61,108,0.045)] transition duration-300 hover:-translate-y-0.5 hover:shadow-[0_16px_34px_rgba(45,61,108,0.09)]"
                  style={{ borderColor: theme.border }}
                >
                  <summary className="flex cursor-pointer list-none items-center justify-between gap-4 text-left text-[14px] font-extrabold text-[#303b59] outline-none focus-visible:ring-4 focus-visible:ring-[#dbe6ff]">
                    <span>{question}</span>
                    <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full transition group-open:rotate-180" style={{ backgroundColor: `${theme.accent}14`, color: theme.accent }}>
                      <ChevronDown size={17} />
                    </span>
                  </summary>
                  <p className="mt-3 text-[13px] leading-7 text-[#748097]">{answer}</p>
                </details>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}