---
/**
 * MOREMINIMORE - FAQ (from v6-faq · Q+A list)
 * Extracted from Desktop/moreminomore-mockup-v7-5.html lines 1381-1409
 *
 * Q+A list with <em> on keywords in question + answer.
 * Bound to src/content/faq/*.md (20 items, 5 categories).
 *
 * Props:
 *   - limit?: number (default: 4 — matches v7-5 hardcoded count)
 *   - category?: string (filter by faq.data.category)
 *   - id?: string (default: 'faq')
 *   - showHeader?: boolean (default: true)
 */
import { getCollection } from 'astro:content';

interface Props {
  limit?: number;
  category?: string;
  id?: string;
  showHeader?: boolean;
}

const {
  limit = 4,
  category,
  id = 'faq',
  showHeader = true,
} = Astro.props;

const all = await getCollection('faq');
const filtered = category
  ? all.filter((f) => f.data.category === category)
  : all;
const items = filtered.slice(0, limit);

// Hardcoded "em" highlights for the 4 default items (matches v7-5 demo)
// For items from collection, we apply a simple heuristic: bold common keywords
const defaultHighlights: Record<string, { q: string[]; a: string[] }> = {
  'มอร์มินิมอร์ทำอะไรบ้าง?': { q: ['เอง'], a: ['AI'] },
  'ราคาเริ่มต้นเท่าไหร่?': { q: ['เห็นผล'], a: ['14-30 วัน', '3 เดือน'] },
  'ใช้เวลาเห็นผลนานไหม?': { q: ['เห็นผล'], a: ['14-30 วัน', '3 เดือน'] },
  'AI จะแทนที่พนักงานไหม?': { q: ['พนักงาน'], a: ['ผู้ช่วย'] },
  'มีบริการหลังขายไหม?': { q: ['หลังขาย'], a: ['Server + SSL + อัพเดท'] },
};

function highlight(text: string, words: string[] = []): string {
  let result = text;
  for (const w of words) {
    result = result.replace(w, `<em>${w}</em>`);
  }
  return result;
}
---

<div id={id} class="fx-faq fx-reveal">
  {showHeader && (
    <div class="fx-section-header">
      <span class="fx-section-eyebrow">// faq</span>
      <h2 class="fx-section-title">คำถามที่ถามบ่อย</h2>
      <p class="fx-section-lede">คำตอบสั้น ๆ ตรง ๆ — ไม่มีน้ำ</p>
    </div>
  )}

  <div class="fx-faq-list fx-stagger">
    {items.map((item, i) => {
      const highlights = defaultHighlights[item.data.question] ?? { q: [], a: [] };
      const qHtml = highlight(item.data.question, highlights.q);
      // Wrap "user" / "bot" prefix in answer if not already present
      let aHtml = highlight(item.data.answer, highlights.a);
      if (!aHtml.includes('<em>user</em>')) {
        aHtml = `<em>user</em> ถาม / <em>bot</em> ตอบ — ${aHtml}`;
      }
      return (
        <div class="fx-faq-item" data-coord={`Q.${i + 1}`}>
          <div class="fx-faq-q" set:html={qHtml} />
          <div class="fx-faq-a" set:html={aHtml} />
        </div>
      );
    })}
  </div>

  {items.length >= limit && (
    <div class="fx-faq-more">
      <a href="/faq" class="fx-btn ghost">ดูคำถามทั้งหมด ({all.length} ข้อ) →</a>
    </div>
  )}
</div>