const FAQ = () => {
  const qa = [
  { q: '加入要收錢嗎？有隱藏費用嗎？', a: '完全沒有，你只需要承擔進貨成本（實體零售方案）或免成本（QR 推薦方案）。' },
  { q: '我是單人工作室，空間很小，也能加入嗎？', a: '非常適合你。QR Code 推薦方案完全零庫存、零空間需求，只要分享訂購 QR Code，剩下出貨、客服都由 WEDAR 負責。' },
  { q: '分潤怎麼計算？什麼時候入帳？', a: '分潤比例依方案不同，每月結算，次月匯款到你指定帳戶。' },
  { q: '合作有綁約期嗎？中途想退出怎麼辦？', a: '沒有強制綁約。合約採年度制，雙方皆可於到期前通知終止。' },
  { q: '教練需要考什麼證照才能推薦產品嗎？', a: '不需要額外證照。WEDAR 提供完整的產品手冊，讓你的教練可以基於訓練情境給予正確的營養建議。' },
  { q: '試飲組真的免費嗎？有什麼隱藏條件？', a: '真的完全免費，不收運費、不要求回填問卷或後續消費。蛋白飲試飲組是讓你和會員先體驗，沒有任何附帶條件。' }];


  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" className="relative bg-wedar-bone py-24 lg:py-32">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-4 reveal">
            <SectionLabel>FAQ</SectionLabel>
            <h2 className="mt-6 font-black-display text-[clamp(40px,4.4vw,64px)] leading-[0.95] text-wedar-primary tracking-hyper">
              還有問題？<br />直接問吧。
            </h2>
            <p className="mt-6 text-[15px] leading-[1.85] text-wedar-primary/70 max-w-sm">
              這裡是老闆們最常問的 8 題。沒看到你想問的？
            </p>
            <BtnGhost href="#apply" className="mt-8">直接申請試飲組</BtnGhost>
          </div>

          <div className="lg:col-span-7 lg:col-start-6 reveal">
            <div className="border-t border-wedar-primary/15">
              {qa.map((item, i) =>
              <div key={i} className={`border-b border-wedar-primary/15`}>
                  <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  className="w-full flex items-start justify-between gap-6 py-6 text-left group">
                  
                    <div className="flex items-start gap-4 flex-1">
                      <span className="font-black-display text-sm text-wedar-primary/40 mt-1 tracking-ultra">{String(i + 1).padStart(2, '0')}</span>
                      <span className="font-black text-[16px] md:text-[17px] text-wedar-primary group-hover:text-wedar-green transition-colors">
                        {item.q}
                      </span>
                    </div>
                    <span className={`shrink-0 h-8 w-8 rounded-full border border-wedar-primary/20 flex items-center justify-center transition-transform duration-500 ${open === i ? 'rotate-45 bg-wedar-primary text-wedar-lime border-wedar-primary' : 'text-wedar-primary'}`}>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" /></svg>
                    </span>
                  </button>
                  <div className={`grid transition-all duration-500 ease-out ${open === i ? 'grid-rows-[1fr] opacity-100 pb-6' : 'grid-rows-[0fr] opacity-0'}`}>
                    <div className="overflow-hidden">
                      <div className="pl-10 text-[15px] leading-[1.9] text-wedar-primary/70 max-w-2xl">
                        {item.a}
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

};

Object.assign(window, { FAQ });