// Pain points + Features (with multi-select highlight)
// uses globals: Icon

const PAIN_POINTS = [
  {
    bad: "「在嗎？想預約 6/2」「老師我約幾號？」",
    solve: "LINE 內直接點選日期、時段、服務人員，不用打字喬時間。",
  },
  {
    bad: "兩位客人同時段、不同老師，撞單漏接。",
    solve: "後台自動鎖檔，同時段「兩位老師、兩種服務」直接複選並排。",
  },
  {
    bad: "服務名稱一長串，客人不知道怎麼選。",
    solve: "圖文清單分類，加上推薦標籤，客人 30 秒選好項目。",
  },
  {
    bad: "套組、加購要打字推薦，常忘記。",
    solve: "預約最後一步自動跳「加購建議」，提升客單價。",
  },
];

const Pain = () => (
  <section className="section pain" id="pain">
    <div className="container">
      <div className="pain__intro reveal">
        <div>
          <div className="eyebrow">PAIN POINTS・你是不是也這樣</div>
          <h2 className="h-section">
            別讓流程<em style={{ background: "linear-gradient(180deg, transparent 64%, var(--astra-accent) 64%)", fontStyle: "normal", padding: "0 4px" }}>困住了你</em>
          </h2>
        </div>
      </div>
      <div className="pain__grid">
        {PAIN_POINTS.map((p, i) => (
          <div className={`pain-card reveal${['',' reveal--d1',' reveal--d2',' reveal--d3'][i]}`} key={i}>
            <div className="pain-card__before">Before</div>
            <p className="pain-card__quote pain-card__quote--bad">{p.bad}</p>
            <div className="pain-card__divider"></div>
            <div className="pain-card__after">After</div>
            <div className="pain-card__solve">
              <Icon name="check-circle" size={20} />
              <span>{p.solve}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FEATURES = [
  { icon: "line",        title: "LINE 內完成預約",  desc: "不用下載 App、不用記網址。客人在你的 LINE 官方帳號裡，三分鐘搞定。" },
  { icon: "users",       title: "選擇服務人員",      desc: "指定 Sasha、Mia 或不指定。每位老師獨立班表，自動避開排休。" },
  { icon: "list",        title: "選擇服務項目",      desc: "凝膠、卸甲、手部保養⋯分類清單＋價格＋時長，客人一眼看懂。" },
  { icon: "gift",        title: "加購項目／套組",    desc: "預約最後一步跳出推薦：「加購延甲＋$300」、「升級香氛保養」。" },
  { icon: "bell",        title: "自動提醒・防爽約",  desc: "預約前 24 小時、2 小時自動發 LINE。也支援收訂金鎖檔。" },
  { icon: "credit-card", title: "後台查看付款狀況",  desc: "一頁看所有訂單：誰付了訂金、誰當天結、誰退款，全部清清楚楚。" },
];

const Features = () => (
  <section className="section" id="features">
    <div className="container">
      <div className="features__intro reveal">
        <div className="eyebrow" style={{ marginBottom: 16 }}>FEATURES・你需要的都在這</div>
        <h2 className="h-section">預約到收款，<br /><em style={{ background: "linear-gradient(180deg, transparent 64%, var(--astra-accent) 64%)", fontStyle: "normal", padding: "0 4px" }}>一次搞定</em></h2>
        <p className="lead">從預約、選人、選項目，到加購、提醒、收款——所有美業老闆每天卡關的事，都在這頁面裡完成。</p>
      </div>

      <div className="features__grid">
        {FEATURES.map((f, i) => (
          <div className={`fcard reveal${['',' reveal--d1',' reveal--d2'][i % 3]}`} key={i}>
            <div className="fcard__icon"><Icon name={f.icon} size={22} /></div>
            <h3 className="h-card">{f.title}</h3>
            <p className="fcard__desc">{f.desc}</p>
          </div>
        ))}

        {/* Highlight: multi-select same time slot */}
        <div className="features__highlight reveal">
          <div>
            <div className="eyebrow" style={{ color: "var(--astra-accent)", marginBottom: 16 }}>SIGNATURE</div>
            <h3 className="h-section" style={{ marginBottom: 20 }}>
              同時段，<br />
              <em style={{ background: "linear-gradient(180deg, transparent 64%, var(--astra-accent) 64%)", fontStyle: "normal", padding: "0 4px", whiteSpace: "nowrap" }}>兩位老師兩種服務</em>
            </h3>
            <p className="lead" style={{ color: "var(--fg-2-on-dark)", marginBottom: 24 }}>
              客人想做凝膠＋睫毛，可以同時段「複選」兩種服務，系統自動配對兩位有空的老師，並排服務省一半時間。
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {[
                "多服務同時段、多人員平行進行",
                "每位老師獨立時段，不會誤抓同一個人",
                "加購服務直接接在原預約後面，不用再開單",
              ].map((t, i) => (
                <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 15, color: "var(--fg-1-on-dark)" }}>
                  <span style={{ width: 24, height: 24, borderRadius: 999, background: "var(--astra-accent)", color: "var(--astra-dark)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name="check" size={14} stroke={2.5} />
                  </span>
                  <span>{t}</span>
                </div>
              ))}
            </div>
          </div>

          {/* The visual demo */}
          <div className="multi-demo">
            <div className="multi-demo__head">
              <span>陳小姐 · 5/30（六）</span>
              <span className="multi-demo__time">總時長 90 min</span>
            </div>

            <div className="multi-demo__slot">
              <div className="multi-demo__time-label">11:00</div>
              <div className="multi-demo__overlap">
                <div className="multi-demo__service multi-demo__service--accent">
                  <span className="multi-demo__check"><Icon name="check" size={12} stroke={3} /></span>
                  <span>凝膠美甲</span>
                  <span className="multi-demo__service-staff">Sasha</span>
                </div>
                <div className="multi-demo__service">
                  <span className="multi-demo__check"><Icon name="check" size={12} stroke={3} /></span>
                  <span>美睫嫁接</span>
                  <span className="multi-demo__service-staff">Mia</span>
                </div>
              </div>
            </div>

            <div className="multi-demo__slot">
              <div className="multi-demo__time-label">12:00</div>
              <div className="multi-demo__service" style={{ background: "var(--astra-light)" }}>
                <span style={{ width: 18, height: 18, borderRadius: 4, background: "var(--astra-mint)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="sparkles" size={11} />
                </span>
                <span>手部保養（延伸服務）</span>
                <span className="multi-demo__service-staff">Sasha</span>
              </div>
            </div>

            <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px dashed var(--astra-border-light)", fontSize: 12, color: "var(--fg-3)", marginBottom: 10, letterSpacing: 0.04 + "em" }}>
              加購建議 · 完美收尾
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <div className="multi-demo__addon">
                <Icon name="plus" size={14} />
                <span>香氛精油按摩</span>
                <span style={{ marginLeft: "auto", fontWeight: 600 }} className="num">+NT$ 300</span>
              </div>
              <div className="multi-demo__addon">
                <Icon name="plus" size={14} />
                <span>升級延甲款式</span>
                <span style={{ marginLeft: "auto", fontWeight: 600 }} className="num">+NT$ 500</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Pain, Features });