Spanglish/frontend/src/app/(public)/faq/layout.tsx

import type { Metadata } from 'next';

const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';

async function getFaqForSchema(): Promise<{ question: string; answer: string }[]> {
  try {
    const res = await fetch(`${apiUrl}/api/faq`, { next: { revalidate: 60 } });
    if (!res.ok) return [];
    const data = await res.json();
    const faqs = data.faqs || [];
    return faqs.map((f: { question: string; questionEs?: string | null; answer: string; answerEs?: string | null }) => ({
      question: f.question,
      answer: f.answer || '',
    }));
  } catch {
    return [];
  }
}

export const metadata: Metadata = {
  title: 'Frequently Asked Questions',
  description: 'Find answers to common questions about Spanglish language exchange events in Asunción. Learn about how events work, who can attend, and more.',
  openGraph: {
    title: 'Frequently Asked Questions – Spanglish',
    description: 'Find answers to common questions about Spanglish language exchange events in Asunción.',
  },
};

export default async function FAQLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const faqList = await getFaqForSchema();
  const faqSchema = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: faqList.map(({ question, answer }) => ({
      '@type': 'Question',
      name: question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: answer,
      },
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      {children}
    </>
  );
}