// P6 — FAQ

const FAQS = [
  // 預約
  { cat: '預約', q: '如何完成預約？', a: '此頁為作品集概念稿，付款與訂金流程僅為示意，不代表實際交易條款。本網站表單為詢問單示意，非即時訂房系統。提交後，由華語管家於 2 個工作天內以 email 回覆，包含可入住的房型、報價與付款方式。（此為作品集表單示意，不會送出真實預約。）' },
  { cat: '預約', q: '可以幫朋友一起訂房嗎？', a: '可以，多房預訂沒有上限。如為 3 房以上的團體，可額外安排私廚晚餐與包車接送，請在訊息備注一併告知。' },
  { cat: '預約', q: '取消政策？', a: '取消政策區塊為旅宿網站資訊架構示意，實際商業網站需依正式營運條款填寫。本網站為作品集提案，不涉及實際交易。' },
  // 住宿
  { cat: '住宿', q: '幾點 check-in？', a: '標準 check-in 為下午 3 點，check-out 為上午 11 點。若您搭乘較晚抵達的新幹線，可提前告知，我們會留下熱茶與簡餐。' },
  { cat: '住宿', q: '館內可以攜帶寵物嗎？', a: '寵物友善政策需依實際營運規範另行確認。本網站為作品集概念稿，不提供實際入住服務。' },
  { cat: '住宿', q: '房間有 Wi-Fi 與工作桌嗎？', a: '三館全館 Wi-Fi 覆蓋，速度 100 Mbps 以上。湯澤館與藏王館客房內配備工作桌；苗場館以親子套房為主，工作空間集中在二樓共用區。' },
  // 滑雪
  { cat: '滑雪', q: '一定要自己帶雪具嗎？', a: '不用。三館皆有完整的租借服務，包含雪衣、雪褲、雪靴、雪具、護目鏡與安全帽。建議自備保暖手套與貼身衣物。' },
  { cat: '滑雪', q: '不滑雪可以入住嗎？', a: '完全可以。我們有不少旅客是衝著溫泉、攝影、雪景、料理而來。三館都規劃了非滑雪日的行程建議，例如藏王的樹冰夜間點燈、湯澤的酒藏巡禮。' },
  { cat: '滑雪', q: '雪場離旅館遠嗎？', a: '苗場館步行 4 分鐘即可抵達 Naeba Ski Resort；湯澤館步行 8 分鐘抵達湯澤高原雪場；藏王館門口即有藏王溫泉巴士站，5 分鐘車程到中央纜車站。' },
  // 交通
  { cat: '交通', q: '從機場怎麼到旅館？', a: '建議從成田／羽田機場搭乘新幹線。苗場、湯澤皆從越後湯澤站轉接駁；藏王從山形站轉接駁。我們提供「機場→旅館」一條龍包車服務，需提前 7 天預訂。' },
  { cat: '交通', q: '冬天的雪會影響交通嗎？', a: '大雪期間交通可能受天候影響，建議預留彈性時間。在地接駁巴士可能因暴風雪短暫停駛，這時我們會啟動旅館包車或安排當地計程車。' },
  { cat: '交通', q: '可以租車自駕嗎？', a: '可以，但雪地駕駛需要經驗，建議第一次來雪國的旅客不要自駕。三館皆有停車場，免費供住宿客使用。' },
];

const CATS = ['全部', '預約', '住宿', '滑雪', '交通'];

function PageFaq({ setPage }) {
  const [cat, setCat] = React.useState('全部');
  const [open, setOpen] = React.useState(0);

  const filtered = FAQS.filter(f => cat === '全部' || f.cat === cat);

  return (
    <main key="faq">
      {/* dark minimal header */}
      <section className="faq-head" data-screen-label="06 FAQ">
        <div className="faq-head__eyebrow">— FREQUENTLY ASKED / 06</div>
        <h1 className="faq-head__title">常見問題</h1>
      </section>

      {/* categories */}
      <div className="faq-categories">
        {CATS.map(c => (
          <button
            key={c}
            className={`faq-cat ${cat === c ? 'faq-cat--active' : ''}`}
            onClick={() => { setCat(c); setOpen(-1); }}
          >
            {c}
          </button>
        ))}
      </div>

      {/* list */}
      <section className="faq-list" style={{ paddingTop: 0, paddingBottom: 'var(--section-y)' }}>
        {filtered.map((f, i) => (
          <div
            key={`${cat}-${i}`}
            className={`faq-row ${open === i ? 'faq-row--open' : ''}`}
            onClick={() => setOpen(open === i ? -1 : i)}
          >
            <div className="faq-row__head">
              <div className="faq-row__num">{String(i + 1).padStart(2, '0')}</div>
              <div className="faq-row__q">{f.q}</div>
              <div className="faq-row__icon" />
            </div>
            <div className="faq-row__a">
              <div className="faq-row__a-inner">{f.a}</div>
            </div>
          </div>
        ))}
      </section>

      {/* bottom CTA */}
      <section style={{ background: 'var(--snow)', borderTop: '1px solid var(--line)', padding: 'clamp(80px,10vw,140px) var(--gutter)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>— STILL HAVE QUESTIONS</div>
            <h2 className="h1" style={{ maxWidth: 640 }}>找不到答案？<br />直接寫信給我們。</h2>
          </div>
          <button className="btn" onClick={() => setPage('contact')}>
            <BtnLabel>聯絡雪境</BtnLabel><Arrow />
          </button>
        </div>
      </section>
    </main>
  );
}

window.PageFaq = PageFaq;