Merge pull request 'dev' (#3) from dev into main

Reviewed-on: #3

backend/.env.example

@@ -21,6 +21,10 @@ PORT=3001
 API_URL=http://localhost:3001
 FRONTEND_URL=http://localhost:3002
 
+# Revalidation secret (shared with frontend for on-demand cache revalidation)
+# Must match the REVALIDATE_SECRET in frontend/.env
+REVALIDATE_SECRET=change-me-to-a-random-secret
+
 # Payment Providers (optional)
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=

backend/src/db/migrate.ts

@@ -421,6 +421,22 @@ async function migrate() {
         created_at TEXT NOT NULL
       )
     `);
+
+    // FAQ questions table
+    await (db as any).run(sql`
+      CREATE TABLE IF NOT EXISTS faq_questions (
+        id TEXT PRIMARY KEY,
+        question TEXT NOT NULL,
+        question_es TEXT,
+        answer TEXT NOT NULL,
+        answer_es TEXT,
+        enabled INTEGER NOT NULL DEFAULT 1,
+        show_on_homepage INTEGER NOT NULL DEFAULT 0,
+        rank INTEGER NOT NULL DEFAULT 0,
+        created_at TEXT NOT NULL,
+        updated_at TEXT NOT NULL
+      )
+    `);
   } else {
     // PostgreSQL migrations
     await (db as any).execute(sql`
@@ -790,6 +806,22 @@ async function migrate() {
         created_at TIMESTAMP NOT NULL
       )
     `);
+
+    // FAQ questions table
+    await (db as any).execute(sql`
+      CREATE TABLE IF NOT EXISTS faq_questions (
+        id UUID PRIMARY KEY,
+        question TEXT NOT NULL,
+        question_es TEXT,
+        answer TEXT NOT NULL,
+        answer_es TEXT,
+        enabled INTEGER NOT NULL DEFAULT 1,
+        show_on_homepage INTEGER NOT NULL DEFAULT 0,
+        rank INTEGER NOT NULL DEFAULT 0,
+        created_at TIMESTAMP NOT NULL,
+        updated_at TIMESTAMP NOT NULL
+      )
+    `);
   }
 
   console.log('Migrations completed successfully!');

backend/src/db/schema.ts

@@ -267,6 +267,20 @@ export const sqliteLegalPages = sqliteTable('legal_pages', {
   createdAt: text('created_at').notNull(),
 });
 
+// FAQ questions table (admin-managed, shown on /faq and optionally on homepage)
+export const sqliteFaqQuestions = sqliteTable('faq_questions', {
+  id: text('id').primaryKey(),
+  question: text('question').notNull(),
+  questionEs: text('question_es'),
+  answer: text('answer').notNull(),
+  answerEs: text('answer_es'),
+  enabled: integer('enabled', { mode: 'boolean' }).notNull().default(true),
+  showOnHomepage: integer('show_on_homepage', { mode: 'boolean' }).notNull().default(false),
+  rank: integer('rank').notNull().default(0),
+  createdAt: text('created_at').notNull(),
+  updatedAt: text('updated_at').notNull(),
+});
+
 // Site Settings table for global website configuration
 export const sqliteSiteSettings = sqliteTable('site_settings', {
   id: text('id').primaryKey(),
@@ -550,6 +564,20 @@ export const pgLegalPages = pgTable('legal_pages', {
   createdAt: timestamp('created_at').notNull(),
 });
 
+// FAQ questions table (admin-managed)
+export const pgFaqQuestions = pgTable('faq_questions', {
+  id: uuid('id').primaryKey(),
+  question: pgText('question').notNull(),
+  questionEs: pgText('question_es'),
+  answer: pgText('answer').notNull(),
+  answerEs: pgText('answer_es'),
+  enabled: pgInteger('enabled').notNull().default(1),
+  showOnHomepage: pgInteger('show_on_homepage').notNull().default(0),
+  rank: pgInteger('rank').notNull().default(0),
+  createdAt: timestamp('created_at').notNull(),
+  updatedAt: timestamp('updated_at').notNull(),
+});
+
 // Site Settings table for global website configuration
 export const pgSiteSettings = pgTable('site_settings', {
   id: uuid('id').primaryKey(),
@@ -597,6 +625,7 @@ export const userSessions = dbType === 'postgres' ? pgUserSessions : sqliteUserS
 export const invoices = dbType === 'postgres' ? pgInvoices : sqliteInvoices;
 export const siteSettings = dbType === 'postgres' ? pgSiteSettings : sqliteSiteSettings;
 export const legalPages = dbType === 'postgres' ? pgLegalPages : sqliteLegalPages;
+export const faqQuestions = dbType === 'postgres' ? pgFaqQuestions : sqliteFaqQuestions;
 
 // Type exports
 export type User = typeof sqliteUsers.$inferSelect;
@@ -627,3 +656,5 @@ export type SiteSettings = typeof sqliteSiteSettings.$inferSelect;
 export type NewSiteSettings = typeof sqliteSiteSettings.$inferInsert;
 export type LegalPage = typeof sqliteLegalPages.$inferSelect;
 export type NewLegalPage = typeof sqliteLegalPages.$inferInsert;
+export type FaqQuestion = typeof sqliteFaqQuestions.$inferSelect;
+export type NewFaqQuestion = typeof sqliteFaqQuestions.$inferInsert;

backend/src/index.ts

@@ -21,6 +21,7 @@ import paymentOptionsRoutes from './routes/payment-options.js';
 import dashboardRoutes from './routes/dashboard.js';
 import siteSettingsRoutes from './routes/site-settings.js';
 import legalPagesRoutes from './routes/legal-pages.js';
+import faqRoutes from './routes/faq.js';
 import emailService from './lib/email.js';
 
 const app = new Hono();
@@ -84,6 +85,7 @@ const openApiSpec = {
     { name: 'Media', description: 'File uploads and media management' },
     { name: 'Lightning', description: 'Lightning/Bitcoin payments via LNBits' },
     { name: 'Admin', description: 'Admin dashboard and analytics' },
+    { name: 'FAQ', description: 'FAQ questions (public and admin)' },
   ],
   paths: {
     // ==================== Auth Endpoints ====================
@@ -1587,6 +1589,144 @@ const openApiSpec = {
         },
       },
     },
+
+    // ==================== FAQ Endpoints ====================
+    '/api/faq': {
+      get: {
+        tags: ['FAQ'],
+        summary: 'Get FAQ list (public)',
+        description: 'Returns enabled FAQ questions, ordered by rank. Use ?homepage=true to get only questions enabled for homepage.',
+        parameters: [
+          { name: 'homepage', in: 'query', schema: { type: 'boolean' }, description: 'If true, only return questions with showOnHomepage' },
+        ],
+        responses: {
+          200: { description: 'List of FAQ items (id, question, questionEs, answer, answerEs, rank)' },
+        },
+      },
+    },
+    '/api/faq/admin/list': {
+      get: {
+        tags: ['FAQ'],
+        summary: 'Get all FAQ questions (admin)',
+        description: 'Returns all FAQ questions for management, ordered by rank.',
+        security: [{ bearerAuth: [] }],
+        responses: {
+          200: { description: 'List of all FAQ questions' },
+          401: { description: 'Unauthorized' },
+        },
+      },
+    },
+    '/api/faq/admin/:id': {
+      get: {
+        tags: ['FAQ'],
+        summary: 'Get FAQ by ID (admin)',
+        security: [{ bearerAuth: [] }],
+        parameters: [
+          { name: 'id', in: 'path', required: true, schema: { type: 'string' } },
+        ],
+        responses: {
+          200: { description: 'FAQ details' },
+          404: { description: 'FAQ not found' },
+        },
+      },
+      put: {
+        tags: ['FAQ'],
+        summary: 'Update FAQ (admin)',
+        security: [{ bearerAuth: [] }],
+        parameters: [
+          { name: 'id', in: 'path', required: true, schema: { type: 'string' } },
+        ],
+        requestBody: {
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                properties: {
+                  question: { type: 'string' },
+                  questionEs: { type: 'string' },
+                  answer: { type: 'string' },
+                  answerEs: { type: 'string' },
+                  enabled: { type: 'boolean' },
+                  showOnHomepage: { type: 'boolean' },
+                },
+              },
+            },
+          },
+        },
+        responses: {
+          200: { description: 'FAQ updated' },
+          404: { description: 'FAQ not found' },
+        },
+      },
+      delete: {
+        tags: ['FAQ'],
+        summary: 'Delete FAQ (admin)',
+        security: [{ bearerAuth: [] }],
+        parameters: [
+          { name: 'id', in: 'path', required: true, schema: { type: 'string' } },
+        ],
+        responses: {
+          200: { description: 'FAQ deleted' },
+          404: { description: 'FAQ not found' },
+        },
+      },
+    },
+    '/api/faq/admin': {
+      post: {
+        tags: ['FAQ'],
+        summary: 'Create FAQ (admin)',
+        security: [{ bearerAuth: [] }],
+        requestBody: {
+          required: true,
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                required: ['question', 'answer'],
+                properties: {
+                  question: { type: 'string' },
+                  questionEs: { type: 'string' },
+                  answer: { type: 'string' },
+                  answerEs: { type: 'string' },
+                  enabled: { type: 'boolean', default: true },
+                  showOnHomepage: { type: 'boolean', default: false },
+                },
+              },
+            },
+          },
+        },
+        responses: {
+          201: { description: 'FAQ created' },
+          400: { description: 'Validation error' },
+        },
+      },
+    },
+    '/api/faq/admin/reorder': {
+      post: {
+        tags: ['FAQ'],
+        summary: 'Reorder FAQ questions (admin)',
+        description: 'Set order by sending an ordered array of FAQ ids.',
+        security: [{ bearerAuth: [] }],
+        requestBody: {
+          required: true,
+          content: {
+            'application/json': {
+              schema: {
+                type: 'object',
+                required: ['ids'],
+                properties: {
+                  ids: { type: 'array', items: { type: 'string' } },
+                },
+              },
+            },
+          },
+        },
+        responses: {
+          200: { description: 'Order updated, returns full FAQ list' },
+          400: { description: 'ids array required' },
+        },
+      },
+    },
   },
   components: {
     securitySchemes: {
@@ -1716,6 +1856,7 @@ app.route('/api/payment-options', paymentOptionsRoutes);
 app.route('/api/dashboard', dashboardRoutes);
 app.route('/api/site-settings', siteSettingsRoutes);
 app.route('/api/legal-pages', legalPagesRoutes);
+app.route('/api/faq', faqRoutes);
 
 // 404 handler
 app.notFound((c) => {

backend/src/routes/events.ts

@@ -15,6 +15,29 @@ interface UserContext {
 
 const eventsRouter = new Hono<{ Variables: { user: UserContext } }>();
 
+// Trigger frontend cache revalidation (fire-and-forget)
+// Revalidates both the sitemap and the next-event data (homepage, llms.txt)
+function revalidateFrontendCache() {
+  const frontendUrl = process.env.FRONTEND_URL || 'http://localhost:3002';
+  const secret = process.env.REVALIDATE_SECRET;
+  if (!secret) {
+    console.warn('REVALIDATE_SECRET not set, skipping frontend revalidation');
+    return;
+  }
+  fetch(`${frontendUrl}/api/revalidate`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ secret, tag: ['events-sitemap', 'next-event'] }),
+  })
+    .then((res) => {
+      if (!res.ok) console.error('Frontend revalidation failed:', res.status);
+      else console.log('Frontend revalidation triggered (sitemap + next-event)');
+    })
+    .catch((err) => {
+      console.error('Frontend revalidation error:', err.message);
+    });
+}
+
 // Helper to normalize event data for API response
 // PostgreSQL decimal returns strings, booleans are stored as integers
 function normalizeEvent(event: any) {
@@ -337,6 +360,9 @@ eventsRouter.post('/', requireAuth(['admin', 'organizer']), zValidator('json', c
   
   await (db as any).insert(events).values(newEvent);
   
+  // Revalidate sitemap when a new event is created
+  revalidateFrontendCache();
+  
   // Return normalized event data
   return c.json({ event: normalizeEvent(newEvent) }, 201);
 });
@@ -373,6 +399,9 @@ eventsRouter.put('/:id', requireAuth(['admin', 'organizer']), zValidator('json',
     (db as any).select().from(events).where(eq((events as any).id, id))
   );
   
+  // Revalidate sitemap when an event is updated (status/dates may have changed)
+  revalidateFrontendCache();
+  
   return c.json({ event: normalizeEvent(updated) });
 });
 
@@ -429,6 +458,9 @@ eventsRouter.delete('/:id', requireAuth(['admin']), async (c) => {
   // Finally delete the event
   await (db as any).delete(events).where(eq((events as any).id, id));
   
+  // Revalidate sitemap when an event is deleted
+  revalidateFrontendCache();
+  
   return c.json({ message: 'Event deleted successfully' });
 });
 

backend/src/routes/faq.ts

@@ -0,0 +1,242 @@
+import { Hono } from 'hono';
+import { db, dbGet, dbAll, faqQuestions } from '../db/index.js';
+import { eq, asc } from 'drizzle-orm';
+import { requireAuth } from '../lib/auth.js';
+import { getNow, generateId } from '../lib/utils.js';
+
+const faqRouter = new Hono();
+
+// ==================== Public Routes ====================
+
+// Get FAQ list for public (only enabled; optional filter for homepage)
+faqRouter.get('/', async (c) => {
+  const homepage = c.req.query('homepage') === 'true';
+
+  let query = (db as any)
+    .select()
+    .from(faqQuestions)
+    .where(eq((faqQuestions as any).enabled, 1))
+    .orderBy(asc((faqQuestions as any).rank), asc((faqQuestions as any).createdAt));
+
+  const rows = await dbAll<any>(query);
+
+  let items = rows;
+  if (homepage) {
+    items = rows.filter((r: any) => r.showOnHomepage === true || r.showOnHomepage === 1 || r.show_on_homepage === true || r.show_on_homepage === 1);
+  }
+
+  return c.json({
+    faqs: items.map((r: any) => ({
+      id: r.id,
+      question: r.question,
+      questionEs: r.questionEs ?? r.question_es ?? null,
+      answer: r.answer,
+      answerEs: r.answerEs ?? r.answer_es ?? null,
+      rank: r.rank ?? 0,
+    })),
+  });
+});
+
+// ==================== Admin Routes ====================
+
+// Get all FAQ questions for admin (all, ordered by rank)
+faqRouter.get('/admin/list', requireAuth(['admin']), async (c) => {
+  const rows = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(faqQuestions)
+      .orderBy(asc((faqQuestions as any).rank), asc((faqQuestions as any).createdAt))
+  );
+
+  const list = rows.map((r: any) => ({
+    id: r.id,
+    question: r.question,
+    questionEs: r.questionEs ?? r.question_es ?? null,
+    answer: r.answer,
+    answerEs: r.answerEs ?? r.answer_es ?? null,
+    enabled: r.enabled === true || r.enabled === 1,
+    showOnHomepage: r.showOnHomepage === true || r.showOnHomepage === 1 || r.show_on_homepage === true || r.show_on_homepage === 1,
+    rank: r.rank ?? 0,
+    createdAt: r.createdAt,
+    updatedAt: r.updatedAt,
+  }));
+
+  return c.json({ faqs: list });
+});
+
+// Get one FAQ by id (admin)
+faqRouter.get('/admin/:id', requireAuth(['admin']), async (c) => {
+  const { id } = c.req.param();
+  const row = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  if (!row) {
+    return c.json({ error: 'FAQ not found' }, 404);
+  }
+  return c.json({
+    faq: {
+      id: row.id,
+      question: row.question,
+      questionEs: row.questionEs ?? row.question_es ?? null,
+      answer: row.answer,
+      answerEs: row.answerEs ?? row.answer_es ?? null,
+      enabled: row.enabled === true || row.enabled === 1,
+      showOnHomepage: row.showOnHomepage === true || row.showOnHomepage === 1 || row.show_on_homepage === true || row.show_on_homepage === 1,
+      rank: row.rank ?? 0,
+      createdAt: row.createdAt,
+      updatedAt: row.updatedAt,
+    },
+  });
+});
+
+// Create FAQ (admin)
+faqRouter.post('/admin', requireAuth(['admin']), async (c) => {
+  const body = await c.req.json();
+  const { question, questionEs, answer, answerEs, enabled, showOnHomepage } = body;
+
+  if (!question || typeof question !== 'string' || !answer || typeof answer !== 'string') {
+    return c.json({ error: 'Question and answer (EN) are required' }, 400);
+  }
+
+  const now = getNow();
+  const id = generateId();
+
+  const allForRank = await dbAll<any>(
+    (db as any).select({ rank: (faqQuestions as any).rank }).from(faqQuestions)
+  );
+  const maxRank = allForRank.length
+    ? Math.max(...allForRank.map((r: any) => Number(r.rank ?? 0)))
+    : 0;
+  const nextRank = maxRank + 1;
+
+  await (db as any).insert(faqQuestions).values({
+    id,
+    question: String(question).trim(),
+    questionEs: questionEs != null ? String(questionEs).trim() : null,
+    answer: String(answer).trim(),
+    answerEs: answerEs != null ? String(answerEs).trim() : null,
+    enabled: enabled !== false ? 1 : 0,
+    showOnHomepage: showOnHomepage === true ? 1 : 0,
+    rank: nextRank,
+    createdAt: now,
+    updatedAt: now,
+  });
+
+  const created = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  return c.json(
+    {
+      faq: {
+        id: created.id,
+        question: created.question,
+        questionEs: created.questionEs ?? created.question_es ?? null,
+        answer: created.answer,
+        answerEs: created.answerEs ?? created.answer_es ?? null,
+        enabled: created.enabled === true || created.enabled === 1,
+        showOnHomepage: created.showOnHomepage === true || created.showOnHomepage === 1 || created.show_on_homepage === true || created.show_on_homepage === 1,
+        rank: created.rank ?? 0,
+        createdAt: created.createdAt,
+        updatedAt: created.updatedAt,
+      },
+    },
+    201
+  );
+});
+
+// Update FAQ (admin)
+faqRouter.put('/admin/:id', requireAuth(['admin']), async (c) => {
+  const { id } = c.req.param();
+  const body = await c.req.json();
+  const { question, questionEs, answer, answerEs, enabled, showOnHomepage } = body;
+
+  const existing = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  if (!existing) {
+    return c.json({ error: 'FAQ not found' }, 404);
+  }
+
+  const updateData: Record<string, unknown> = {
+    updatedAt: getNow(),
+  };
+  if (question !== undefined) updateData.question = String(question).trim();
+  if (questionEs !== undefined) updateData.questionEs = questionEs == null ? null : String(questionEs).trim();
+  if (answer !== undefined) updateData.answer = String(answer).trim();
+  if (answerEs !== undefined) updateData.answerEs = answerEs == null ? null : String(answerEs).trim();
+  if (typeof enabled === 'boolean') updateData.enabled = enabled ? 1 : 0;
+  if (typeof showOnHomepage === 'boolean') updateData.showOnHomepage = showOnHomepage ? 1 : 0;
+
+  await (db as any).update(faqQuestions).set(updateData).where(eq((faqQuestions as any).id, id));
+
+  const updated = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  return c.json({
+    faq: {
+      id: updated.id,
+      question: updated.question,
+      questionEs: updated.questionEs ?? updated.question_es ?? null,
+      answer: updated.answer,
+      answerEs: updated.answerEs ?? updated.answer_es ?? null,
+      enabled: updated.enabled === true || updated.enabled === 1,
+      showOnHomepage: updated.showOnHomepage === true || updated.showOnHomepage === 1 || updated.show_on_homepage === true || updated.show_on_homepage === 1,
+      rank: updated.rank ?? 0,
+      createdAt: updated.createdAt,
+      updatedAt: updated.updatedAt,
+    },
+  });
+});
+
+// Delete FAQ (admin)
+faqRouter.delete('/admin/:id', requireAuth(['admin']), async (c) => {
+  const { id } = c.req.param();
+  const existing = await dbGet<any>(
+    (db as any).select().from(faqQuestions).where(eq((faqQuestions as any).id, id))
+  );
+  if (!existing) {
+    return c.json({ error: 'FAQ not found' }, 404);
+  }
+  await (db as any).delete(faqQuestions).where(eq((faqQuestions as any).id, id));
+  return c.json({ message: 'FAQ deleted' });
+});
+
+// Reorder FAQs (admin) – body: { ids: string[] } (ordered list of ids)
+faqRouter.post('/admin/reorder', requireAuth(['admin']), async (c) => {
+  const body = await c.req.json();
+  const { ids } = body;
+  if (!Array.isArray(ids) || ids.length === 0) {
+    return c.json({ error: 'ids array is required' }, 400);
+  }
+
+  const now = getNow();
+  for (let i = 0; i < ids.length; i++) {
+    await (db as any)
+      .update(faqQuestions)
+      .set({ rank: i, updatedAt: now })
+      .where(eq((faqQuestions as any).id, ids[i]));
+  }
+
+  const rows = await dbAll<any>(
+    (db as any)
+      .select()
+      .from(faqQuestions)
+      .orderBy(asc((faqQuestions as any).rank), asc((faqQuestions as any).createdAt))
+  );
+  const list = rows.map((r: any) => ({
+    id: r.id,
+    question: r.question,
+    questionEs: r.questionEs ?? r.question_es ?? null,
+    answer: r.answer,
+    answerEs: r.answerEs ?? r.answer_es ?? null,
+    enabled: r.enabled === true || r.enabled === 1,
+    showOnHomepage: r.showOnHomepage === true || r.showOnHomepage === 1 || r.show_on_homepage === true || r.show_on_homepage === 1,
+    rank: r.rank ?? 0,
+    createdAt: r.createdAt,
+    updatedAt: r.updatedAt,
+  }));
+
+  return c.json({ faqs: list });
+});
+
+export default faqRouter;

frontend/.env.example

@@ -21,6 +21,10 @@ NEXT_PUBLIC_EMAIL=hola@spanglish.com.py
 NEXT_PUBLIC_TELEGRAM=spanglish_py
 NEXT_PUBLIC_TIKTOK=spanglishsocialpy
 
+# Revalidation secret (shared between frontend and backend for on-demand cache revalidation)
+# Must match the REVALIDATE_SECRET in backend/.env
+REVALIDATE_SECRET=change-me-to-a-random-secret
+
 # Plausible Analytics (optional - leave empty to disable tracking)
 NEXT_PUBLIC_PLAUSIBLE_URL=https://analytics.azzamo.net
 NEXT_PUBLIC_PLAUSIBLE_DOMAIN=spanglishcommunity.com

frontend/src/app/(public)/components/HomepageFaqSection.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { faqApi, FaqItem } from '@/lib/api';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+export default function HomepageFaqSection() {
+  const { t, locale } = useLanguage();
+  const [faqs, setFaqs] = useState<FaqItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    faqApi.getList(true).then((res) => {
+      if (!cancelled) setFaqs(res.faqs);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => { cancelled = true; };
+  }, []);
+
+  if (loading || faqs.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="section-padding bg-secondary-gray" aria-labelledby="homepage-faq-title">
+      <div className="container-page">
+        <div className="max-w-2xl mx-auto">
+          <h2 id="homepage-faq-title" className="text-2xl md:text-3xl font-bold text-primary-dark text-center mb-8">
+            {t('home.faq.title')}
+          </h2>
+          <div className="space-y-3">
+            {faqs.map((faq, index) => (
+              <div
+                key={faq.id}
+                className="bg-white rounded-btn border border-gray-200 overflow-hidden"
+              >
+                <button
+                  onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                  className="w-full px-5 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
+                >
+                  <span className="font-semibold text-primary-dark pr-4 text-sm md:text-base">
+                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
+                  </span>
+                  <ChevronDownIcon
+                    className={clsx(
+                      'w-5 h-5 text-gray-500 flex-shrink-0 transition-transform duration-200',
+                      openIndex === index && 'transform rotate-180'
+                    )}
+                  />
+                </button>
+                <div
+                  className={clsx(
+                    'overflow-hidden transition-all duration-200',
+                    openIndex === index ? 'max-h-80' : 'max-h-0'
+                  )}
+                >
+                  <div className="px-5 pb-4 text-gray-600 text-sm md:text-base">
+                    {locale === 'es' && faq.answerEs ? faq.answerEs : faq.answer}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="mt-8 text-center">
+            <Link
+              href="/faq"
+              className="inline-flex items-center justify-center px-6 py-3 bg-primary-yellow text-primary-dark font-semibold rounded-btn hover:bg-primary-yellow/90 transition-colors"
+            >
+              {t('home.faq.seeFull')}
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

frontend/src/app/(public)/components/NextEventSection.tsx

@@ -9,17 +9,23 @@ import Button from '@/components/ui/Button';
 import Card from '@/components/ui/Card';
 import { CalendarIcon, MapPinIcon } from '@heroicons/react/24/outline';
 
-export default function NextEventSection() {
+interface NextEventSectionProps {
+  initialEvent?: Event | null;
+}
+
+export default function NextEventSection({ initialEvent }: NextEventSectionProps) {
   const { t, locale } = useLanguage();
-  const [nextEvent, setNextEvent] = useState<Event | null>(null);
+  const [nextEvent, setNextEvent] = useState<Event | null>(initialEvent ?? null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!initialEvent);
 
   useEffect(() => {
+    // Skip fetch if we already have server-provided data
+    if (initialEvent !== undefined) return;
     eventsApi.getNextUpcoming()
       .then(({ event }) => setNextEvent(event))
       .catch(console.error)
       .finally(() => setLoading(false));
-  }, []);
+  }, [initialEvent]);
 
   const formatDate = (dateStr: string) => {
     return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {

frontend/src/app/(public)/components/NextEventSectionWrapper.tsx

@@ -2,8 +2,13 @@
 
 import { useLanguage } from '@/context/LanguageContext';
 import NextEventSection from './NextEventSection';
+import { Event } from '@/lib/api';
 
-export default function NextEventSectionWrapper() {
+interface NextEventSectionWrapperProps {
+  initialEvent?: Event | null;
+}
+
+export default function NextEventSectionWrapper({ initialEvent }: NextEventSectionWrapperProps) {
   const { t } = useLanguage();
 
   return (
@@ -13,7 +18,7 @@ export default function NextEventSectionWrapper() {
           {t('home.nextEvent.title')}
         </h2>
         <div className="mt-12 max-w-3xl mx-auto">
-          <NextEventSection />
+          <NextEventSection initialEvent={initialEvent} />
         </div>
       </div>
     </section>

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

@@ -1,44 +1,21 @@
 import type { Metadata } from 'next';
 
-// FAQ Page structured data
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
-const faqSchema = {
+
-  '@context': 'https://schema.org',
+async function getFaqForSchema(): Promise<{ question: string; answer: string }[]> {
-  '@type': 'FAQPage',
+  try {
-  mainEntity: [
+    const res = await fetch(`${apiUrl}/api/faq`, { next: { revalidate: 60 } });
-    {
+    if (!res.ok) return [];
-      '@type': 'Question',
+    const data = await res.json();
-      name: 'What is Spanglish?',
+    const faqs = data.faqs || [];
-      acceptedAnswer: {
+    return faqs.map((f: { question: string; questionEs?: string | null; answer: string; answerEs?: string | null }) => ({
-        '@type': 'Answer',
+      question: f.question,
-        text: 'Spanglish is a language exchange community in Asunción, Paraguay. We organize monthly events where Spanish and English speakers come together to practice languages, meet new people, and have fun in a relaxed social environment.',
+      answer: f.answer || '',
-      },
+    }));
-    },
+  } catch {
-    {
+    return [];
-      '@type': 'Question',
+  }
-      name: 'Who can attend Spanglish events?',
+}
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: 'Anyone interested in practicing English or Spanish is welcome! We accept all levels - from complete beginners to native speakers. Our events are designed to be inclusive and welcoming to everyone.',
-      },
-    },
-    {
-      '@type': 'Question',
-      name: 'How do language exchange events work?',
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: 'Our events typically last 2-3 hours. You will be paired with people who speak the language you want to practice. We rotate partners throughout the evening so you can meet multiple people. There are also group activities and free conversation time.',
-      },
-    },
-    {
-      '@type': 'Question',
-      name: 'Do I need to speak the language already?',
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: 'Not at all! We welcome complete beginners. Our events are structured to support all levels. Native speakers are patient and happy to help beginners practice.',
-      },
-    },
-  ],
-};
 
 export const metadata: Metadata = {
   title: 'Frequently Asked Questions',
@@ -49,11 +26,25 @@ export const metadata: Metadata = {
   },
 };
 
-export default function FAQLayout({
+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

frontend/src/app/(public)/faq/page.tsx

@@ -1,89 +1,44 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
+import { faqApi, FaqItem } from '@/lib/api';
 import Card from '@/components/ui/Card';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 
-interface FAQItem {
-  question: string;
-  questionEs: string;
-  answer: string;
-  answerEs: string;
-}
-
-const faqs: FAQItem[] = [
-  {
-    question: "What is Spanglish?",
-    questionEs: "¿Qué es Spanglish?",
-    answer: "Spanglish is a language exchange community in Asunción, Paraguay. We organize monthly events where Spanish and English speakers come together to practice languages, meet new people, and have fun in a relaxed social environment.",
-    answerEs: "Spanglish es una comunidad de intercambio de idiomas en Asunción, Paraguay. Organizamos eventos mensuales donde hablantes de español e inglés se reúnen para practicar idiomas, conocer gente nueva y divertirse en un ambiente social relajado."
-  },
-  {
-    question: "Who can attend Spanglish events?",
-    questionEs: "¿Quién puede asistir a los eventos de Spanglish?",
-    answer: "Anyone interested in practicing English or Spanish is welcome! We accept all levels - from complete beginners to native speakers. Our events are designed to be inclusive and welcoming to everyone.",
-    answerEs: "¡Cualquier persona interesada en practicar inglés o español es bienvenida! Aceptamos todos los niveles - desde principiantes hasta hablantes nativos. Nuestros eventos están diseñados para ser inclusivos y acogedores para todos."
-  },
-  {
-    question: "How do events work?",
-    questionEs: "¿Cómo funcionan los eventos?",
-    answer: "Our events typically last 2-3 hours. You'll be paired with people who speak the language you want to practice. We rotate partners throughout the evening so you can meet multiple people. There are also group activities and free conversation time.",
-    answerEs: "Nuestros eventos suelen durar 2-3 horas. Serás emparejado con personas que hablan el idioma que quieres practicar. Rotamos parejas durante la noche para que puedas conocer a varias personas. También hay actividades grupales y tiempo de conversación libre."
-  },
-  {
-    question: "How much does it cost to attend?",
-    questionEs: "¿Cuánto cuesta asistir?",
-    answer: "Event prices vary but are always kept affordable. The price covers venue costs and event organization. Check each event page for specific pricing. Some special events may be free!",
-    answerEs: "Los precios de los eventos varían pero siempre se mantienen accesibles. El precio cubre los costos del local y la organización del evento. Consulta la página de cada evento para precios específicos. ¡Algunos eventos especiales pueden ser gratis!"
-  },
-  {
-    question: "What payment methods do you accept?",
-    questionEs: "¿Qué métodos de pago aceptan?",
-    answer: "We accept multiple payment methods: credit/debit cards through Bancard, Bitcoin Lightning for crypto enthusiasts, and cash payment at the event. You can choose your preferred method when booking.",
-    answerEs: "Aceptamos múltiples métodos de pago: tarjetas de crédito/débito a través de Bancard, Bitcoin Lightning para entusiastas de cripto, y pago en efectivo en el evento. Puedes elegir tu método preferido al reservar."
-  },
-  {
-    question: "Do I need to speak the language already?",
-    questionEs: "¿Necesito ya hablar el idioma?",
-    answer: "Not at all! We welcome complete beginners. Our events are structured to support all levels. Native speakers are patient and happy to help beginners practice. It's a judgment-free zone for learning.",
-    answerEs: "¡Para nada! Damos la bienvenida a principiantes absolutos. Nuestros eventos están estructurados para apoyar todos los niveles. Los hablantes nativos son pacientes y felices de ayudar a los principiantes a practicar. Es una zona libre de juicios para aprender."
-  },
-  {
-    question: "Can I come alone?",
-    questionEs: "¿Puedo ir solo/a?",
-    answer: "Absolutely! Most people come alone and that's totally fine. In fact, it's a great way to meet new people. Our events are designed to be social, so you'll quickly find conversation partners.",
-    answerEs: "¡Absolutamente! La mayoría de las personas vienen solas y eso está totalmente bien. De hecho, es una excelente manera de conocer gente nueva. Nuestros eventos están diseñados para ser sociales, así que encontrarás compañeros de conversación rápidamente."
-  },
-  {
-    question: "What if I can't make it after booking?",
-    questionEs: "¿Qué pasa si no puedo asistir después de reservar?",
-    answer: "If you can't attend, please let us know as soon as possible so we can offer your spot to someone on the waitlist. Contact us through the website or WhatsApp group to cancel your booking.",
-    answerEs: "Si no puedes asistir, por favor avísanos lo antes posible para poder ofrecer tu lugar a alguien en la lista de espera. Contáctanos a través del sitio web o el grupo de WhatsApp para cancelar tu reserva."
-  },
-  {
-    question: "How can I stay updated about events?",
-    questionEs: "¿Cómo puedo mantenerme actualizado sobre los eventos?",
-    answer: "Join our WhatsApp group for instant updates, follow us on Instagram for announcements and photos, or subscribe to our newsletter on the website. We typically announce events 2-3 weeks in advance.",
-    answerEs: "Únete a nuestro grupo de WhatsApp para actualizaciones instantáneas, síguenos en Instagram para anuncios y fotos, o suscríbete a nuestro boletín en el sitio web. Normalmente anunciamos eventos con 2-3 semanas de anticipación."
-  },
-  {
-    question: "Can I volunteer or help organize events?",
-    questionEs: "¿Puedo ser voluntario o ayudar a organizar eventos?",
-    answer: "Yes! We're always looking for enthusiastic volunteers. Volunteers help with setup, greeting newcomers, facilitating activities, and more. Contact us through the website if you're interested in getting involved.",
-    answerEs: "¡Sí! Siempre estamos buscando voluntarios entusiastas. Los voluntarios ayudan con la preparación, saludar a los recién llegados, facilitar actividades y más. Contáctanos a través del sitio web si estás interesado en participar."
-  }
-];
-
 export default function FAQPage() {
-  const { t, locale } = useLanguage();
+  const { locale } = useLanguage();
+  const [faqs, setFaqs] = useState<FaqItem[]>([]);
+  const [loading, setLoading] = useState(true);
   const [openIndex, setOpenIndex] = useState<number | null>(null);
 
+  useEffect(() => {
+    let cancelled = false;
+    faqApi.getList().then((res) => {
+      if (!cancelled) {
+        setFaqs(res.faqs);
+      }
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => { cancelled = true; };
+  }, []);
+
   const toggleFAQ = (index: number) => {
     setOpenIndex(openIndex === index ? null : index);
   };
 
+  if (loading) {
+    return (
+      <div className="section-padding">
+        <div className="container-page max-w-3xl flex justify-center py-20">
+          <div className="animate-spin w-10 h-10 border-4 border-primary-yellow border-t-transparent rounded-full" />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="section-padding">
       <div className="container-page max-w-3xl">
@@ -98,15 +53,24 @@ export default function FAQPage() {
           </p>
         </div>
 
+        {faqs.length === 0 ? (
+          <Card className="p-8 text-center">
+            <p className="text-gray-600">
+              {locale === 'es'
+                ? 'No hay preguntas frecuentes publicadas en este momento.'
+                : 'No FAQ questions are published at the moment.'}
+            </p>
+          </Card>
+        ) : (
           <div className="space-y-4">
             {faqs.map((faq, index) => (
-            <Card key={index} className="overflow-hidden">
+              <Card key={faq.id} className="overflow-hidden">
                 <button
                   onClick={() => toggleFAQ(index)}
                   className="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-gray-50 transition-colors"
                 >
                   <span className="font-semibold text-primary-dark pr-4">
-                  {locale === 'es' ? faq.questionEs : faq.question}
+                    {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
                   </span>
                   <ChevronDownIcon
                     className={clsx(
@@ -122,12 +86,13 @@ export default function FAQPage() {
                   )}
                 >
                   <div className="px-6 pb-4 text-gray-600">
-                  {locale === 'es' ? faq.answerEs : faq.answer}
+                    {locale === 'es' && faq.answerEs ? faq.answerEs : faq.answer}
                   </div>
                 </div>
               </Card>
             ))}
           </div>
+        )}
 
         <Card className="mt-12 p-8 text-center bg-primary-yellow/10">
           <h2 className="text-xl font-semibold text-primary-dark mb-2">

frontend/src/app/(public)/page.tsx

@@ -1,20 +1,167 @@
+import type { Metadata } from 'next';
 import HeroSection from './components/HeroSection';
 import NextEventSectionWrapper from './components/NextEventSectionWrapper';
 import AboutSection from './components/AboutSection';
 import MediaCarouselSection from './components/MediaCarouselSection';
 import NewsletterSection from './components/NewsletterSection';
+import HomepageFaqSection from './components/HomepageFaqSection';
 import { getCarouselImages } from '@/lib/carouselImages';
 
-export default function HomePage() {
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface NextEvent {
+  id: string;
+  title: string;
+  titleEs?: string;
+  description: string;
+  descriptionEs?: string;
+  shortDescription?: string;
+  shortDescriptionEs?: string;
+  startDatetime: string;
+  endDatetime?: string;
+  location: string;
+  locationUrl?: string;
+  price: number;
+  currency: string;
+  capacity: number;
+  status: 'draft' | 'published' | 'cancelled' | 'completed' | 'archived';
+  bannerUrl?: string;
+  externalBookingEnabled?: boolean;
+  externalBookingUrl?: string;
+  availableSeats?: number;
+  bookedCount?: number;
+  isFeatured?: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+async function getNextUpcomingEvent(): Promise<NextEvent | null> {
+  try {
+    const response = await fetch(`${apiUrl}/api/events/next/upcoming`, {
+      next: { tags: ['next-event'] },
+    });
+    if (!response.ok) return null;
+    const data = await response.json();
+    return data.event || null;
+  } catch {
+    return null;
+  }
+}
+
+// Dynamic metadata with next event date for AI crawlers and SEO
+export async function generateMetadata(): Promise<Metadata> {
+  const event = await getNextUpcomingEvent();
+
+  if (!event) {
+    return {
+      title: 'Spanglish – Language Exchange Events in Asunción',
+      description:
+        'Practice English and Spanish at relaxed social events in Asunción. Meet locals and internationals. Join the next Spanglish meetup.',
+    };
+  }
+
+  const eventDate = new Date(event.startDatetime).toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  const description = `Next event: ${eventDate} – ${event.title}. Practice English and Spanish at relaxed social events in Asunción. Meet locals and internationals.`;
+
+  return {
+    title: 'Spanglish – Language Exchange Events in Asunción',
+    description,
+    openGraph: {
+      title: 'Spanglish – Language Exchange Events in Asunción',
+      description,
+      url: siteUrl,
+      siteName: 'Spanglish',
+      type: 'website',
+      images: [
+        {
+          url: event.bannerUrl
+            ? event.bannerUrl.startsWith('http')
+              ? event.bannerUrl
+              : `${siteUrl}${event.bannerUrl}`
+            : `${siteUrl}/images/og-image.jpg`,
+          width: 1200,
+          height: 630,
+          alt: `Spanglish – ${event.title}`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: 'Spanglish – Language Exchange Events in Asunción',
+      description,
+    },
+  };
+}
+
+function generateNextEventJsonLd(event: NextEvent) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Event',
+    name: event.title,
+    description: event.shortDescription || event.description,
+    startDate: event.startDatetime,
+    endDate: event.endDatetime || event.startDatetime,
+    eventAttendanceMode: 'https://schema.org/OfflineEventAttendanceMode',
+    eventStatus:
+      event.status === 'cancelled'
+        ? 'https://schema.org/EventCancelled'
+        : 'https://schema.org/EventScheduled',
+    location: {
+      '@type': 'Place',
+      name: event.location,
+      address: {
+        '@type': 'PostalAddress',
+        addressLocality: 'Asunción',
+        addressCountry: 'PY',
+      },
+    },
+    organizer: {
+      '@type': 'Organization',
+      name: 'Spanglish',
+      url: siteUrl,
+    },
+    offers: {
+      '@type': 'Offer',
+      price: event.price,
+      priceCurrency: event.currency,
+      availability:
+        (event.availableSeats ?? 0) > 0
+          ? 'https://schema.org/InStock'
+          : 'https://schema.org/SoldOut',
+      url: `${siteUrl}/events/${event.id}`,
+    },
+    image: event.bannerUrl || `${siteUrl}/images/og-image.jpg`,
+    url: `${siteUrl}/events/${event.id}`,
+  };
+}
+
+export default async function HomePage() {
   const carouselImages = getCarouselImages();
+  const nextEvent = await getNextUpcomingEvent();
 
   return (
     <>
+      {nextEvent && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify(generateNextEventJsonLd(nextEvent)),
+          }}
+        />
+      )}
       <HeroSection />
-      <NextEventSectionWrapper />
+      <NextEventSectionWrapper initialEvent={nextEvent} />
       <AboutSection />
       <MediaCarouselSection images={carouselImages} />
       <NewsletterSection />
+      <HomepageFaqSection />
     </>
   );
 }

frontend/src/app/admin/faq/page.tsx

@@ -0,0 +1,395 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { faqApi, FaqItemAdmin } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import toast from 'react-hot-toast';
+import clsx from 'clsx';
+import {
+  PlusIcon,
+  PencilSquareIcon,
+  TrashIcon,
+  Bars3Icon,
+  XMarkIcon,
+  CheckIcon,
+  ArrowLeftIcon,
+} from '@heroicons/react/24/outline';
+
+type FormState = { id: string | null; question: string; questionEs: string; answer: string; answerEs: string; enabled: boolean; showOnHomepage: boolean };
+
+const emptyForm: FormState = {
+  id: null,
+  question: '',
+  questionEs: '',
+  answer: '',
+  answerEs: '',
+  enabled: true,
+  showOnHomepage: false,
+};
+
+export default function AdminFaqPage() {
+  const { locale } = useLanguage();
+  const [faqs, setFaqs] = useState<FaqItemAdmin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [form, setForm] = useState<FormState>(emptyForm);
+  const [showForm, setShowForm] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadFaqs();
+  }, []);
+
+  const loadFaqs = async () => {
+    try {
+      setLoading(true);
+      const res = await faqApi.getAdminList();
+      setFaqs(res.faqs);
+    } catch (e) {
+      console.error(e);
+      toast.error(locale === 'es' ? 'Error al cargar FAQs' : 'Failed to load FAQs');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCreate = () => {
+    setForm(emptyForm);
+    setShowForm(true);
+  };
+
+  const handleEdit = (faq: FaqItemAdmin) => {
+    setForm({
+      id: faq.id,
+      question: faq.question,
+      questionEs: faq.questionEs ?? '',
+      answer: faq.answer,
+      answerEs: faq.answerEs ?? '',
+      enabled: faq.enabled,
+      showOnHomepage: faq.showOnHomepage,
+    });
+    setShowForm(true);
+  };
+
+  const handleSave = async () => {
+    if (!form.question.trim() || !form.answer.trim()) {
+      toast.error(locale === 'es' ? 'Pregunta y respuesta (EN) son obligatorios' : 'Question and answer (EN) are required');
+      return;
+    }
+    try {
+      setSaving(true);
+      if (form.id) {
+        await faqApi.update(form.id, {
+          question: form.question.trim(),
+          questionEs: form.questionEs.trim() || null,
+          answer: form.answer.trim(),
+          answerEs: form.answerEs.trim() || null,
+          enabled: form.enabled,
+          showOnHomepage: form.showOnHomepage,
+        });
+        toast.success(locale === 'es' ? 'FAQ actualizado' : 'FAQ updated');
+      } else {
+        await faqApi.create({
+          question: form.question.trim(),
+          questionEs: form.questionEs.trim() || undefined,
+          answer: form.answer.trim(),
+          answerEs: form.answerEs.trim() || undefined,
+          enabled: form.enabled,
+          showOnHomepage: form.showOnHomepage,
+        });
+        toast.success(locale === 'es' ? 'FAQ creado' : 'FAQ created');
+      }
+      setForm(emptyForm);
+      setShowForm(false);
+      await loadFaqs();
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al guardar' : 'Failed to save'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm(locale === 'es' ? '¿Eliminar esta pregunta?' : 'Delete this question?')) return;
+    try {
+      await faqApi.delete(id);
+      toast.success(locale === 'es' ? 'FAQ eliminado' : 'FAQ deleted');
+      if (form.id === id) { setForm(emptyForm); setShowForm(false); }
+      await loadFaqs();
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al eliminar' : 'Failed to delete'));
+    }
+  };
+
+  const handleToggleEnabled = async (faq: FaqItemAdmin) => {
+    try {
+      await faqApi.update(faq.id, { enabled: !faq.enabled });
+      setFaqs(prev => prev.map(f => f.id === faq.id ? { ...f, enabled: !f.enabled } : f));
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al actualizar' : 'Failed to update'));
+    }
+  };
+
+  const handleToggleShowOnHomepage = async (faq: FaqItemAdmin) => {
+    try {
+      await faqApi.update(faq.id, { showOnHomepage: !faq.showOnHomepage });
+      setFaqs(prev => prev.map(f => f.id === faq.id ? { ...f, showOnHomepage: !f.showOnHomepage } : f));
+    } catch (e: any) {
+      toast.error(e.message || (locale === 'es' ? 'Error al actualizar' : 'Failed to update'));
+    }
+  };
+
+  const handleDragStart = (e: React.DragEvent, id: string) => {
+    setDraggedId(id);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', id);
+  };
+
+  const handleDragOver = (e: React.DragEvent, id: string) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverId(id);
+  };
+
+  const handleDragLeave = () => {
+    setDragOverId(null);
+  };
+
+  const handleDrop = async (e: React.DragEvent, targetId: string) => {
+    e.preventDefault();
+    setDragOverId(null);
+    setDraggedId(null);
+    const sourceId = e.dataTransfer.getData('text/plain');
+    if (!sourceId || sourceId === targetId) return;
+    const idx = faqs.findIndex(f => f.id === sourceId);
+    const targetIdx = faqs.findIndex(f => f.id === targetId);
+    if (idx === -1 || targetIdx === -1) return;
+    const newOrder = [...faqs];
+    const [removed] = newOrder.splice(idx, 1);
+    newOrder.splice(targetIdx, 0, removed);
+    const ids = newOrder.map(f => f.id);
+    try {
+      const res = await faqApi.reorder(ids);
+      setFaqs(res.faqs);
+      toast.success(locale === 'es' ? 'Orden actualizado' : 'Order updated');
+    } catch (err: any) {
+      toast.error(err.message || (locale === 'es' ? 'Error al reordenar' : 'Failed to reorder'));
+    }
+  };
+
+  const handleDragEnd = () => {
+    setDraggedId(null);
+    setDragOverId(null);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <div>
+          <h1 className="text-2xl font-bold font-heading">
+            {locale === 'es' ? 'FAQ' : 'FAQ'}
+          </h1>
+          <p className="text-gray-500 text-sm mt-1">
+            {locale === 'es'
+              ? 'Crear y editar preguntas frecuentes. Arrastra para cambiar el orden.'
+              : 'Create and edit FAQ questions. Drag to change order.'}
+          </p>
+        </div>
+        <Button onClick={handleCreate}>
+          <PlusIcon className="w-4 h-4 mr-2" />
+          {locale === 'es' ? 'Nueva pregunta' : 'Add question'}
+        </Button>
+      </div>
+
+      {showForm && (
+        <Card>
+          <div className="p-6 space-y-4">
+            <div className="flex justify-between items-center">
+              <h2 className="text-lg font-semibold">
+                {form.id ? (locale === 'es' ? 'Editar pregunta' : 'Edit question') : (locale === 'es' ? 'Nueva pregunta' : 'New question')}
+              </h2>
+              <button
+                onClick={() => { setForm(emptyForm); setShowForm(false); }}
+                className="p-2 hover:bg-gray-100 rounded-full"
+              >
+                <XMarkIcon className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label className="block text-sm font-medium mb-1">Question (EN) *</label>
+                <Input
+                  value={form.question}
+                  onChange={e => setForm(f => ({ ...f, question: e.target.value }))}
+                  placeholder="Question in English"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Pregunta (ES)</label>
+                <Input
+                  value={form.questionEs}
+                  onChange={e => setForm(f => ({ ...f, questionEs: e.target.value }))}
+                  placeholder="Pregunta en español"
+                />
+              </div>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <label className="block text-sm font-medium mb-1">Answer (EN) *</label>
+                <textarea
+                  className="w-full border border-gray-300 rounded-btn px-3 py-2 min-h-[100px]"
+                  value={form.answer}
+                  onChange={e => setForm(f => ({ ...f, answer: e.target.value }))}
+                  placeholder="Answer in English"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Respuesta (ES)</label>
+                <textarea
+                  className="w-full border border-gray-300 rounded-btn px-3 py-2 min-h-[100px]"
+                  value={form.answerEs}
+                  onChange={e => setForm(f => ({ ...f, answerEs: e.target.value }))}
+                  placeholder="Respuesta en español"
+                />
+              </div>
+            </div>
+            <div className="flex flex-wrap gap-6">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={form.enabled}
+                  onChange={e => setForm(f => ({ ...f, enabled: e.target.checked }))}
+                  className="rounded border-gray-300"
+                />
+                <span className="text-sm">{locale === 'es' ? 'Mostrar en el sitio' : 'Show on site'}</span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={form.showOnHomepage}
+                  onChange={e => setForm(f => ({ ...f, showOnHomepage: e.target.checked }))}
+                  className="rounded border-gray-300"
+                />
+                <span className="text-sm">{locale === 'es' ? 'Mostrar en inicio' : 'Show on homepage'}</span>
+              </label>
+            </div>
+            <div className="flex gap-2">
+              <Button onClick={handleSave} isLoading={saving}>
+                <CheckIcon className="w-4 h-4 mr-1" />
+                {locale === 'es' ? 'Guardar' : 'Save'}
+              </Button>
+              <Button variant="outline" onClick={() => { setForm(emptyForm); setShowForm(false); }} disabled={saving}>
+                {locale === 'es' ? 'Cancelar' : 'Cancel'}
+              </Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      <Card>
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="w-10 px-4 py-3" />
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
+                  {locale === 'es' ? 'Pregunta' : 'Question'}
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase w-24">
+                  {locale === 'es' ? 'En sitio' : 'On site'}
+                </th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase w-28">
+                  {locale === 'es' ? 'En inicio' : 'Homepage'}
+                </th>
+                <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase w-32">
+                  {locale === 'es' ? 'Acciones' : 'Actions'}
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {faqs.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-6 py-12 text-center text-gray-500">
+                    {locale === 'es' ? 'No hay preguntas. Añade la primera.' : 'No questions yet. Add the first one.'}
+                  </td>
+                </tr>
+              ) : (
+                faqs.map((faq) => (
+                  <tr
+                    key={faq.id}
+                    draggable
+                    onDragStart={e => handleDragStart(e, faq.id)}
+                    onDragOver={e => handleDragOver(e, faq.id)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={e => handleDrop(e, faq.id)}
+                    onDragEnd={handleDragEnd}
+                    className={clsx(
+                      'hover:bg-gray-50',
+                      draggedId === faq.id && 'opacity-50',
+                      dragOverId === faq.id && 'bg-primary-yellow/10'
+                    )}
+                  >
+                    <td className="px-4 py-3">
+                      <span className="cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600" title={locale === 'es' ? 'Arrastrar para reordenar' : 'Drag to reorder'}>
+                        <Bars3Icon className="w-5 h-5" />
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <p className="font-medium text-primary-dark line-clamp-1">
+                        {locale === 'es' && faq.questionEs ? faq.questionEs : faq.question}
+                      </p>
+                    </td>
+                    <td className="px-4 py-3">
+                      <button
+                        onClick={() => handleToggleEnabled(faq)}
+                        className={clsx(
+                          'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium',
+                          faq.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500'
+                        )}
+                      >
+                        {faq.enabled ? (locale === 'es' ? 'Sí' : 'Yes') : (locale === 'es' ? 'No' : 'No')}
+                      </button>
+                    </td>
+                    <td className="px-4 py-3">
+                      <button
+                        onClick={() => handleToggleShowOnHomepage(faq)}
+                        className={clsx(
+                          'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium',
+                          faq.showOnHomepage ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-500'
+                        )}
+                      >
+                        {faq.showOnHomepage ? (locale === 'es' ? 'Sí' : 'Yes') : (locale === 'es' ? 'No' : 'No')}
+                      </button>
+                    </td>
+                    <td className="px-4 py-3 text-right">
+                      <div className="flex justify-end gap-1">
+                        <Button size="sm" variant="outline" onClick={() => handleEdit(faq)}>
+                          <PencilSquareIcon className="w-4 h-4" />
+                        </Button>
+                        <Button size="sm" variant="outline" onClick={() => handleDelete(faq.id)} className="text-red-600 hover:bg-red-50">
+                          <TrashIcon className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/app/admin/layout.tsx

@@ -24,6 +24,7 @@ import {
   BanknotesIcon,
   QrCodeIcon,
   DocumentTextIcon,
+  QuestionMarkCircleIcon,
 } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { useState } from 'react';
@@ -69,6 +70,7 @@ export default function AdminLayout({
     { name: t('admin.nav.emails'), href: '/admin/emails', icon: InboxIcon },
     { name: t('admin.nav.gallery'), href: '/admin/gallery', icon: PhotoIcon },
     { name: locale === 'es' ? 'Páginas Legales' : 'Legal Pages', href: '/admin/legal-pages', icon: DocumentTextIcon },
+    { name: 'FAQ', href: '/admin/faq', icon: QuestionMarkCircleIcon },
     { name: locale === 'es' ? 'Configuración' : 'Settings', href: '/admin/settings', icon: Cog6ToothIcon },
   ];
 

frontend/src/app/api/revalidate/route.ts

@@ -0,0 +1,31 @@
+import { revalidateTag } from 'next/cache';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { secret, tag } = body;
+
+    // Validate the revalidation secret
+    const revalidateSecret = process.env.REVALIDATE_SECRET;
+    if (!revalidateSecret || secret !== revalidateSecret) {
+      return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
+    }
+
+    // Validate tag(s) - supports single tag or array of tags
+    const allowedTags = ['events-sitemap', 'next-event'];
+    const tags: string[] = Array.isArray(tag) ? tag : [tag];
+    const invalidTags = tags.filter((t: string) => !allowedTags.includes(t));
+    if (tags.length === 0 || invalidTags.length > 0) {
+      return NextResponse.json({ error: 'Invalid tag' }, { status: 400 });
+    }
+
+    for (const t of tags) {
+      revalidateTag(t);
+    }
+
+    return NextResponse.json({ revalidated: true, tags, now: Date.now() });
+  } catch {
+    return NextResponse.json({ error: 'Failed to revalidate' }, { status: 500 });
+  }
+}

frontend/src/app/linktree/page.tsx

@@ -80,7 +80,7 @@ export default function LinktreePage() {
               <div className="animate-spin w-6 h-6 border-2 border-primary-yellow border-t-transparent rounded-full mx-auto" />
             </div>
           ) : nextEvent ? (
-            <Link href={`/book/${nextEvent.id}`} className="block group">
+            <Link href={`/events/${nextEvent.id}`} className="block group">
               <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-5 border border-white/10 transition-all duration-300 hover:bg-white/15 hover:scale-[1.02] hover:shadow-xl">
                 <h3 className="font-bold text-lg text-white group-hover:text-primary-yellow transition-colors">
                   {locale === 'es' && nextEvent.titleEs ? nextEvent.titleEs : nextEvent.title}
@@ -111,7 +111,7 @@ export default function LinktreePage() {
                 </div>
 
                 <div className="mt-4 bg-primary-yellow text-primary-dark font-semibold py-3 px-4 rounded-xl text-center transition-all duration-200 group-hover:bg-yellow-400">
-                  {t('linktree.bookNow')}
+                  {t('linktree.moreInfo')}
                 </div>
               </div>
             </Link>

frontend/src/app/llms.txt/route.ts

@@ -0,0 +1,190 @@
+import { NextResponse } from 'next/server';
+
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://spanglish.com.py';
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
+
+interface LlmsFaq {
+  question: string;
+  answer: string;
+}
+
+interface LlmsEvent {
+  id: string;
+  title: string;
+  titleEs?: string;
+  shortDescription?: string;
+  shortDescriptionEs?: string;
+  description: string;
+  descriptionEs?: string;
+  startDatetime: string;
+  endDatetime?: string;
+  location: string;
+  price: number;
+  currency: string;
+  availableSeats?: number;
+  status: string;
+}
+
+async function getNextUpcomingEvent(): Promise<LlmsEvent | null> {
+  try {
+    const response = await fetch(`${apiUrl}/api/events/next/upcoming`, {
+      next: { tags: ['next-event'] },
+    });
+    if (!response.ok) return null;
+    const data = await response.json();
+    return data.event || null;
+  } catch {
+    return null;
+  }
+}
+
+async function getUpcomingEvents(): Promise<LlmsEvent[]> {
+  try {
+    const response = await fetch(`${apiUrl}/api/events?status=published&upcoming=true`, {
+      next: { tags: ['next-event'] },
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.events || [];
+  } catch {
+    return [];
+  }
+}
+
+function formatEventDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function formatEventTime(dateStr: string): string {
+  return new Date(dateStr).toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  });
+}
+
+function formatPrice(price: number, currency: string): string {
+  if (price === 0) return 'Free';
+  return `${price.toLocaleString()} ${currency}`;
+}
+
+async function getHomepageFaqs(): Promise<LlmsFaq[]> {
+  try {
+    const response = await fetch(`${apiUrl}/api/faq?homepage=true`, {
+      next: { revalidate: 3600 },
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return (data.faqs || []).map((f: any) => ({
+      question: f.question,
+      answer: f.answer,
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export async function GET() {
+  const [nextEvent, upcomingEvents, faqs] = await Promise.all([
+    getNextUpcomingEvent(),
+    getUpcomingEvents(),
+    getHomepageFaqs(),
+  ]);
+
+  const lines: string[] = [];
+
+  // Header
+  lines.push('# Spanglish Community');
+  lines.push('');
+  lines.push('> English-Spanish language exchange community organizing social events and meetups in Asunción, Paraguay.');
+  lines.push('');
+  lines.push(`- Website: ${siteUrl}`);
+  lines.push(`- Events page: ${siteUrl}/events`);
+
+  // Social links
+  const instagram = process.env.NEXT_PUBLIC_INSTAGRAM;
+  const whatsapp = process.env.NEXT_PUBLIC_WHATSAPP;
+  const telegram = process.env.NEXT_PUBLIC_TELEGRAM;
+  const email = process.env.NEXT_PUBLIC_EMAIL;
+
+  if (instagram) lines.push(`- Instagram: https://instagram.com/${instagram}`);
+  if (telegram) lines.push(`- Telegram: https://t.me/${telegram}`);
+  if (email) lines.push(`- Email: ${email}`);
+  if (whatsapp) lines.push(`- WhatsApp: ${whatsapp}`);
+
+  lines.push('');
+
+  // Next Event (most important section for AI)
+  lines.push('## Next Event');
+  lines.push('');
+
+  if (nextEvent) {
+    lines.push(`- Event: ${nextEvent.title}`);
+    lines.push(`- Date: ${formatEventDate(nextEvent.startDatetime)}`);
+    lines.push(`- Time: ${formatEventTime(nextEvent.startDatetime)}`);
+    if (nextEvent.endDatetime) {
+      lines.push(`- End time: ${formatEventTime(nextEvent.endDatetime)}`);
+    }
+    lines.push(`- Location: ${nextEvent.location}, Asunción, Paraguay`);
+    lines.push(`- Price: ${formatPrice(nextEvent.price, nextEvent.currency)}`);
+    if (nextEvent.availableSeats !== undefined) {
+      lines.push(`- Available spots: ${nextEvent.availableSeats}`);
+    }
+    lines.push(`- Details and tickets: ${siteUrl}/events/${nextEvent.id}`);
+    if (nextEvent.shortDescription) {
+      lines.push(`- Description: ${nextEvent.shortDescription}`);
+    }
+  } else {
+    lines.push('No upcoming events currently scheduled. Check back soon or follow us on social media for announcements.');
+  }
+
+  lines.push('');
+
+  // All upcoming events
+  if (upcomingEvents.length > 1) {
+    lines.push('## All Upcoming Events');
+    lines.push('');
+    for (const event of upcomingEvents) {
+      lines.push(`### ${event.title}`);
+      lines.push(`- Date: ${formatEventDate(event.startDatetime)}`);
+      lines.push(`- Time: ${formatEventTime(event.startDatetime)}`);
+      lines.push(`- Location: ${event.location}, Asunción, Paraguay`);
+      lines.push(`- Price: ${formatPrice(event.price, event.currency)}`);
+      lines.push(`- Details: ${siteUrl}/events/${event.id}`);
+      lines.push('');
+    }
+  }
+
+  // About section
+  lines.push('## About Spanglish');
+  lines.push('');
+  lines.push('Spanglish is a language exchange community based in Asunción, Paraguay. We organize regular social events where people can practice English and Spanish in a relaxed, friendly environment. Our events bring together locals and internationals for conversation, cultural exchange, and fun.');
+  lines.push('');
+  lines.push('## Frequently Asked Questions');
+  lines.push('');
+  if (faqs.length > 0) {
+    for (const faq of faqs) {
+      lines.push(`- **${faq.question}** ${faq.answer}`);
+    }
+  } else {
+    lines.push('- **What is Spanglish?** A language exchange community that hosts social events to practice English and Spanish.');
+    lines.push('- **Where are events held?** In Asunción, Paraguay. Specific venues are listed on each event page.');
+    lines.push('- **How do I attend an event?** Visit the events page to see upcoming events and book tickets.');
+  }
+  lines.push(`- More FAQ: ${siteUrl}/faq`);
+  lines.push('');
+
+  const content = lines.join('\n');
+
+  return new NextResponse(content, {
+    headers: {
+      'Content-Type': 'text/plain; charset=utf-8',
+      'Cache-Control': 'public, max-age=3600, s-maxage=3600, stale-while-revalidate=86400',
+    },
+  });
+}

frontend/src/app/robots.ts

@@ -15,6 +15,7 @@ export default function robots(): MetadataRoute.Robots {
           '/contact',
           '/faq',
           '/legal/*',
+          '/llms.txt',
         ],
         disallow: [
           '/admin',

frontend/src/app/sitemap.ts

@@ -12,7 +12,7 @@ interface Event {
 async function getPublishedEvents(): Promise<Event[]> {
   try {
     const response = await fetch(`${apiUrl}/api/events?status=published`, {
-      next: { revalidate: 3600 }, // Cache for 1 hour
+      next: { tags: ['events-sitemap'] },
     });
     if (!response.ok) return [];
     const data = await response.json();

frontend/src/components/ui/RichTextEditor.tsx

@@ -342,6 +342,7 @@ export default function RichTextEditor({
   const lastContentRef = useRef(content);
   
   const editor = useEditor({
+    immediatelyRender: false,
     extensions: [
       StarterKit.configure({
         heading: {
@@ -393,6 +394,7 @@ export function RichTextPreview({
   className?: string;
 }) {
   const editor = useEditor({
+    immediatelyRender: false,
     extensions: [StarterKit],
     content: markdownToHtml(content),
     editable: false,

frontend/src/i18n/locales/en.json

@@ -67,6 +67,10 @@
       "button": "Subscribe",
       "success": "Thanks for subscribing!",
       "error": "Subscription failed. Please try again."
+    },
+    "faq": {
+      "title": "Frequently Asked Questions",
+      "seeFull": "See full FAQ"
     }
   },
   "events": {
@@ -317,7 +321,7 @@
     "tagline": "Language Exchange Community",
     "nextEvent": "Next Event",
     "noEvents": "No upcoming events",
-    "bookNow": "Book Now",
+    "moreInfo": "More info",
     "joinCommunity": "Join Our Community",
     "visitWebsite": "Visit Our Website",
     "whatsapp": {

frontend/src/i18n/locales/es.json

@@ -67,6 +67,10 @@
       "button": "Suscribirse",
       "success": "¡Gracias por suscribirte!",
       "error": "Error al suscribirse. Por favor intenta de nuevo."
+    },
+    "faq": {
+      "title": "Preguntas Frecuentes",
+      "seeFull": "Ver FAQ completo"
     }
   },
   "events": {
@@ -317,7 +321,7 @@
     "tagline": "Comunidad de Intercambio de Idiomas",
     "nextEvent": "Próximo Evento",
     "noEvents": "No hay eventos próximos",
-    "bookNow": "Reservar Ahora",
+    "moreInfo": "Más información",
     "joinCommunity": "Únete a Nuestra Comunidad",
     "visitWebsite": "Visitar Nuestro Sitio",
     "whatsapp": {

frontend/src/lib/api.ts

@@ -1078,3 +1078,71 @@ export const legalPagesApi = {
       method: 'POST',
     }),
 };
+
+// ==================== FAQ Types ====================
+
+export interface FaqItem {
+  id: string;
+  question: string;
+  questionEs?: string | null;
+  answer: string;
+  answerEs?: string | null;
+  rank?: number;
+}
+
+export interface FaqItemAdmin extends FaqItem {
+  enabled: boolean;
+  showOnHomepage: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ==================== FAQ API ====================
+
+export const faqApi = {
+  // Public
+  getList: (homepageOnly?: boolean) =>
+    fetchApi<{ faqs: FaqItem[] }>(`/api/faq${homepageOnly ? '?homepage=true' : ''}`),
+
+  // Admin
+  getAdminList: () =>
+    fetchApi<{ faqs: FaqItemAdmin[] }>('/api/faq/admin/list'),
+
+  getById: (id: string) =>
+    fetchApi<{ faq: FaqItemAdmin }>(`/api/faq/admin/${id}`),
+
+  create: (data: {
+    question: string;
+    questionEs?: string;
+    answer: string;
+    answerEs?: string;
+    enabled?: boolean;
+    showOnHomepage?: boolean;
+  }) =>
+    fetchApi<{ faq: FaqItemAdmin }>('/api/faq/admin', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    }),
+
+  update: (id: string, data: {
+    question?: string;
+    questionEs?: string | null;
+    answer?: string;
+    answerEs?: string | null;
+    enabled?: boolean;
+    showOnHomepage?: boolean;
+  }) =>
+    fetchApi<{ faq: FaqItemAdmin }>(`/api/faq/admin/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    }),
+
+  delete: (id: string) =>
+    fetchApi<{ message: string }>(`/api/faq/admin/${id}`, { method: 'DELETE' }),
+
+  reorder: (ids: string[]) =>
+    fetchApi<{ faqs: FaqItemAdmin[] }>('/api/faq/admin/reorder', {
+      method: 'POST',
+      body: JSON.stringify({ ids }),
+    }),
+};