Dark Mode AccordionFAQ template

<section class="bg-gray-950 px-6 py-24 sm:py-32">
  <div class="mx-auto max-w-2xl">
    <h2 class="text-2xl font-bold tracking-tight text-white sm:text-3xl">Technical FAQ</h2>
    <div class="mt-10 space-y-4">
      <details class="group rounded-2xl bg-gray-900 p-6 transition-all hover:bg-gray-800/50" open>
        <summary class="flex cursor-pointer items-center justify-between font-semibold text-gray-100 list-none">
          <span>Is TypeScript supported?</span>
          <span class="text-blue-400 group-open:rotate-180 transition-transform">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-gray-400 leading-relaxed">
          Check the SDK documentation for current TypeScript setup and type coverage.
        </p>
      </details>
      <details class="group rounded-2xl bg-gray-900 p-6 transition-all hover:bg-gray-800/50">
        <summary class="flex cursor-pointer items-center justify-between font-semibold text-gray-100 list-none">
          <span>Where is the API reference?</span>
          <span class="text-blue-400 group-open:rotate-180 transition-transform">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
          </span>
        </summary>
        <p class="mt-4 text-gray-400 leading-relaxed">
          Open the developer documentation and choose the API Reference section.
        </p>
      </details>
    </div>
  </div>
</section>

import React, { useId, useState } from 'react';
import { Plus, Minus } from 'lucide-react';

const AccordionItem = ({ question, answer, defaultOpen = false }: { question: string, answer: string, defaultOpen?: boolean }) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  const baseId = useId();
  const triggerId = `${baseId}-trigger`;
  const panelId = `${baseId}-panel`;

  return (
    <div className="mb-4 overflow-hidden rounded-2xl bg-[#121212] border border-white/5 transition-all hover:border-white/10">
      <button
        id={triggerId}
        onClick={() => setIsOpen(!isOpen)}
        className="flex w-full items-center justify-between p-6 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
        aria-expanded={isOpen}
        aria-controls={panelId}
      >
        <span className="text-lg font-medium text-gray-100">{question}</span>
        {isOpen ? (
          <Minus aria-hidden="true" className="h-5 w-5 text-blue-500" />
        ) : (
          <Plus aria-hidden="true" className="h-5 w-5 text-gray-400" />
        )}
      </button>
      <div
        id={panelId}
        role="region"
        aria-labelledby={triggerId}
        hidden={!isOpen}
        className={`overflow-hidden transition-all duration-300 ${
          isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
        }`}
      >
        <div className="p-6 pt-0 text-gray-400 leading-relaxed border-t border-white/5">
          {answer}
        </div>
      </div>
    </div>
  );
};

export function DarkModeAccordion() {
  return (
    <div className="min-h-screen bg-black px-4 py-20">
      <div className="mx-auto max-w-2xl">
        <h2 className="mb-12 text-center text-3xl font-bold tracking-tighter text-white sm:text-4xl">
          Questions? We've got answers.
        </h2>
        <AccordionItem 
          defaultOpen={true}
          question="Is TypeScript supported?"
          answer="Check the SDK documentation for current TypeScript setup and type coverage."
        />
        <AccordionItem 
          question="Where is the API reference?"
          answer="Open the developer documentation and choose the API Reference section."
        />
      </div>
    </div>
  );
}