// FAQ + Final CTA + Footer
// uses globals: Icon

const FAQS = [
  {
    q: "我已經有 LINE 官方帳號了，可以直接接嗎？",
    a: "可以。預約系統是「掛在你現有官方帳號上」，不影響原本的 LINE。",
  },
  {
    q: "客人真的可以同時段預約兩位老師、兩種服務嗎？",
    a: "可以。客人在選服務的步驟可以「複選」，系統會自動找出同時段有空的老師並配對。例如客人選了凝膠＋美睫，11:00 Sasha 做凝膠，同一個 11:00 Mia 做美睫，省一半時間。",
  },
  {
    q: "加購／套組要怎麼設定？",
    a: "後台可以針對每個服務設定「推薦加購」。客人預約完主項目後，會跳出建議：例如預約凝膠美甲後跳「+NT$300 香氛保養」。也支援整套組合定價。",
  },
  {
    q: "可以收訂金嗎？怕客人爽約。",
    a: "可以。每個服務可以獨立設定訂金金額或比例，串接 LINE Pay、信用卡、街口。沒付訂金的預約不會鎖檔，自動釋出。",
  },
  {
    q: "怎麼操作後台？",
    a: "後台中文介面、欄位都有提示，我們也有專屬教學文件與客服協助。",
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="faq__wrap">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 16 }}>FAQ</div>
            <h2 className="h-section">還有疑問？<br />這邊先回答幾個。</h2>
            <p className="lead" style={{ marginTop: 20 }}>
              找不到答案的話，直接加 LINE 問我們吧。
            </p>
            <a href="https://line.me/R/ti/p/@656tlwkn" target="_blank" rel="noopener" className="btn btn--primary" style={{ marginTop: 24 }}>
              <Icon name="line" size={16} /> 加 LINE 問問看
            </a>
          </div>
          <div className="faq__list reveal reveal--d1">
            {FAQS.map((f, i) => (
              <div className={`faq-item ${open === i ? "is-open" : ""}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-item__q">
                  <span>{f.q}</span>
                  <span className="faq-item__icon"><Icon name="plus" size={16} /></span>
                </div>
                <div className="faq-item__a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="section final-cta" id="cta">
    <div className="final-cta__orb final-cta__orb--l"></div>
    <div className="final-cta__orb final-cta__orb--r"></div>
    <div className="container">
      <div className="final-cta__inner reveal">
        <div className="final-cta__accent-line"></div>
        <div className="eyebrow" style={{ color: "var(--astra-accent)", marginBottom: 20, justifyContent: "center", display: "inline-flex" }}>GET STARTED</div>
        <h2 className="h-section" style={{ color: "var(--fg-1-on-dark)", fontSize: "clamp(36px, 4.4vw, 56px)", whiteSpace: "nowrap" }}>
          LINE 上<em style={{ background: "linear-gradient(180deg, transparent 64%, var(--astra-accent) 64%)", fontStyle: "normal", padding: "0 4px", color: "var(--fg-1-on-dark)" }}>一次搞定</em>
        </h2>
        <p className="lead final-cta__lead">
          加我們 LINE，30 分鐘內專人帶你了解方案。免費試用 14 天，隨時可停不收取費用。
        </p>
        <div className="final-cta__cta">
          <a href="https://line.me/R/ti/p/@656tlwkn" target="_blank" rel="noopener" className="btn btn--primary btn--lg">
            <Icon name="line" size={18} /> 加 LINE 了解方案
          </a>
        </div>
        <div style={{ display: "flex", gap: 24, justifyContent: "center", marginTop: 32, fontSize: 13, color: "var(--fg-3-on-dark)", flexWrap: "wrap" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="shield" size={14} /> 14 天免費試用</span>
<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check-circle" size={14} /> 隨時取消</span>
        </div>
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer__top">
        <div className="footer__brand">
          <img src="design-system/logo-white.svg" alt="AstraYo" />
          <p>我們是 AstraYo數位科技，一個專注於行銷導向的網站設計團隊。我們相信，網站上線不只「好看」，更要「實用」，真正協助品牌解決工具營運問題；打造兼顧美感與效能的網站，AstraYo 專業、用心的設計，陪你一起把想法變成現實。</p>
          <div className="footer__contact">
            <span>hi@astrayo.com</span>
            <span>週一～週五 10:00-18:00</span>
            <span>台北市中山區民生東路二段127巷6號2樓-3</span>
            <span>統編 60561515</span>
          </div>
        </div>
        <div className="footer__cols">
          <div className="footer__col">
            <h4>服務項目</h4>
            <ul>
              <li><a href="https://astrayo.com/ecommerce-webstie-design/" target="_blank" rel="noopener">電商網站設計</a></li>
              <li><a href="https://astrayo.com/brand-design/" target="_blank" rel="noopener">形象網站設計</a></li>
              <li><a href="https://astrayo.com/ec-website/" target="_blank" rel="noopener">極速開站方案</a></li>
              <li><a href="https://astrayo.com/product/graphic-design/" target="_blank" rel="noopener">設計訂閱制</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>關於我們</h4>
            <ul>
              <li><a href="https://astrayo.com/portfolio/" target="_blank" rel="noopener">精選案例</a></li>
              <li><a href="https://astrayo.com/blog/" target="_blank" rel="noopener">網頁知識</a></li>
              <li><a href="https://astrayo.com/contact/" target="_blank" rel="noopener">聯絡我們</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>快速聯繫</h4>
            <ul>
              <li><a href="https://line.me/R/ti/p/@656tlwkn" target="_blank" rel="noopener">Line 預約諮詢</a></li>
              <li><a href="https://www.facebook.com/astrayo.offical/" target="_blank" rel="noopener">Facebook</a></li>
              <li><a href="https://www.instagram.com/astrayo_office/" target="_blank" rel="noopener">Instagram</a></li>
            </ul>
            <a href="https://line.me/R/ti/p/@656tlwkn" target="_blank" rel="noopener" className="btn btn--primary" style={{ marginTop: 20, fontSize: 14, display: "inline-flex", color: "var(--astra-dark)" }}>加入官方LINE</a>
          </div>
        </div>
      </div>
      <div className="footer__base">
        <span>AstraYo ©2026 由白科技有限公司</span>
        <div style={{ display: "flex", gap: 20 }}>
          <a href="https://astrayo.com/privacy-policy" target="_blank" rel="noopener">隱私權政策</a>
          <a href="https://astrayo.com/terms" target="_blank" rel="noopener">服務條款</a>
          <a href="https://astrayo.com/refund/" target="_blank" rel="noopener">退換貨條款</a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { FAQ, FinalCTA, Footer });
