FAQ with Contact FallbackFAQ template

<section class="faq-fallback" style="max-width: 48rem; margin: 0 auto; padding: 3rem 1rem; font-family: sans-serif;">
  <div style="text-align: center; margin-bottom: 3rem;">
    <h2 style="font-size: 2rem; font-weight: 800; color: #111827;">Frequently Asked Questions</h2>
    <p style="color: #4b5563; margin-top: 1rem;">Quick answers to common questions about our platform.</p>
  </div>

  <div style="border-top: 1px solid #e5e7eb; margin-bottom: 3rem;">
    <details style="padding: 1.5rem 0; border-bottom: 1px solid #e5e7eb;" open>
      <summary style="font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between;">
        Where is my data stored?
        <span>+</span>
      </summary>
      <p style="margin-top: 1rem; color: #4b5563;">Review the provider's security and data-region documentation for current storage details.</p>
    </details>
    <details style="padding: 1.5rem 0; border-bottom: 1px solid #e5e7eb;">
      <summary style="font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between;">
        How do I update my billing info?
        <span>+</span>
      </summary>
      <p style="margin-top: 1rem; color: #4b5563;">Navigate to Settings > Billing to update your credit card or billing address.</p>
    </details>
  </div>

  <div style="background-color: #f3f4f6; padding: 2rem; border-radius: 1rem; text-align: center;">
    <h3 style="font-size: 1.25rem; font-weight: 700; color: #111827;">Still have questions?</h3>
    <p style="color: #4b5563; margin-top: 0.5rem; margin-bottom: 1.5rem;">Can't find the answer you're looking for? Please chat to our friendly team.</p>
    <a href="/contact" style="background-color: #2563eb; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600;">Get in touch</a>
  </div>
</section>

<section class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
  <div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
    <h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently Asked Questions</h2>
    <div class="mt-10 divide-y divide-gray-900/10">
      <details class="group py-6" open>
        <summary class="flex cursor-pointer items-start justify-between text-left text-gray-900">
          <span class="text-base font-semibold leading-7">Where is my data stored?</span>
          <svg aria-hidden="true" class="ml-6 h-6 w-6 transition-transform group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
          </svg>
        </summary>
        <p class="mt-2 pr-12 text-base leading-7 text-gray-600">Review the provider's security and data-region documentation for current storage details.</p>
      </details>
      <details class="group py-6">
        <summary class="flex cursor-pointer items-start justify-between text-left text-gray-900">
          <span class="text-base font-semibold leading-7">How do I update my billing info?</span>
          <svg aria-hidden="true" class="ml-6 h-6 w-6 transition-transform group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
          </svg>
        </summary>
        <p class="mt-2 pr-12 text-base leading-7 text-gray-600">Navigate to Settings > Billing to update your credit card or billing address.</p>
      </details>
    </div>
  </div>

  <div class="mt-16 rounded-2xl bg-blue-50 p-8 sm:p-12">
    <div class="flex flex-col items-center gap-6 sm:flex-row sm:justify-between sm:gap-0">
      <div>
        <h3 class="text-xl font-bold text-gray-900">Still have questions?</h3>
        <p class="mt-2 text-gray-600">We're here to help you get the most out of our platform.</p>
      </div>
      <a href="/contact" class="rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
        Contact Support
      </a>
    </div>
  </div>
</section>

import React, { useState } from 'react';
import { Mail, MessageCircle, ChevronDown } from 'lucide-react';

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

const defaultItems = [
  { id: '1', question: 'Where is my data stored?', answer: "Review the provider's security and data-region documentation for current storage details." },
  { id: '2', question: 'How do I update my billing info?', answer: 'Navigate to Settings > Billing to update your credit card or billing address.' }
];

export function ContactFallbackFaq({ items = defaultItems }: { items?: FaqItem[] }) {
  const [openId, setOpenId] = useState<string | null>('1');

  return (
    <section className="mx-auto max-w-4xl px-4 py-16">
      <div className="text-center mb-12">
        <h2 className="text-3xl font-bold text-gray-900">FAQ</h2>
        <p className="mt-4 text-gray-600">Everything you need to know about the product and billing.</p>
      </div>

      <div className="space-y-4 mb-16">
        {items.map((item) => (
          <div key={item.id} className="border-b border-gray-200">
            <button
              onClick={() => setOpenId(openId === item.id ? null : item.id)}
              className="flex w-full items-center justify-between py-6 text-left"
            >
              <span className="text-lg font-semibold text-gray-900">{item.question}</span>
              <ChevronDown className={`h-5 w-5 text-gray-500 transition-transform ${openId === item.id ? 'rotate-180' : ''}`} />
            </button>
            {openId === item.id && (
              <p className="pb-6 text-gray-600 leading-relaxed">{item.answer}</p>
            )}
          </div>
        ))}
      </div>

      <div className="rounded-2xl border border-gray-200 bg-gray-50 p-8 text-center">
        <div className="flex justify-center -space-x-2 mb-4">
          <div className="h-10 w-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600"><Mail aria-hidden="true" size={20} /></div>
          <div className="h-10 w-10 rounded-full border-2 border-white bg-green-100 flex items-center justify-center text-green-600"><MessageCircle aria-hidden="true" size={20} /></div>
        </div>
        <h3 className="text-lg font-bold text-gray-900">Still have questions?</h3>
        <p className="mt-2 text-gray-600">Can't find the answer you're looking for? Please chat to our friendly team.</p>
        <a href="/contact" className="mt-6 inline-flex rounded-xl bg-gray-900 px-8 py-3 font-semibold text-white hover:bg-gray-800 transition-colors">
          Get in Touch
        </a>
      </div>
    </section>
  );
}