// Walkthrough (3 steps showing actual product screens) + Pricing
// uses globals: Icon

const Walkthrough = () => (
  <section className="section pain" id="flow">
    <div className="container">
      <div className="walk__intro reveal">
        <div className="eyebrow" style={{ marginBottom: 16, justifyContent: "center", display: "inline-flex" }}>HOW IT WORKS</div>
        <h2 className="h-section">三步驟，從<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="walk__steps">
        {/* Step 1 — Admin */}
        <div className="walk-step reveal">
          <div className="walk-step__head">
            <span className="walk-step__num">STEP 01</span>
            <span className="pill pill--mint" style={{ fontSize: 12 }}>後台</span>
          </div>
          <h3 className="walk-step__title">設定服務、人員、提醒</h3>
          <p className="walk-step__desc">服務項目、價格、時長、可預約時段、自動提醒規則——後台一次設好。</p>
          <div className="walk-step__visual">
            <AdminMock />
          </div>
        </div>

        {/* Step 2 — Customer booking */}
        <div className="walk-step reveal reveal--d1">
          <div className="walk-step__head">
            <span className="walk-step__num">STEP 02</span>
            <span className="pill pill--accent" style={{ fontSize: 12 }}>客人</span>
          </div>
          <h3 className="walk-step__title">客人從 LINE 點開預約</h3>
          <p className="walk-step__desc">日期、時段、服務、人員、加購——LINE 內 5 個步驟完成，付款也在裡面。</p>
          <div className="walk-step__visual">
            <CalendarMock />
          </div>
        </div>

        {/* Step 3 — LINE confirm */}
        <div className="walk-step reveal reveal--d2">
          <div className="walk-step__head">
            <span className="walk-step__num">STEP 03</span>
            <span className="pill pill--dark" style={{ fontSize: 12 }}>LINE 通知</span>
          </div>
          <h3 className="walk-step__title">自動寄出預約確認</h3>
          <p className="walk-step__desc">完成預約後立刻發 LINE。服務前自動可設定再提醒一次。</p>
          <div className="walk-step__visual">
            <LineConfirmMock />
          </div>
        </div>
      </div>
    </div>
  </section>
);

// Admin dashboard mock
const AdminMock = () => (
  <div className="admin-mock">
    <div className="admin-mock__title">
      自動化提醒訊息
      <span className="admin-mock__badge">已啟用 3</span>
    </div>
    <div className="admin-mock__row">
      <div className="admin-mock__cell admin-mock__cell--head">啟用</div>
      <div className="admin-mock__cell admin-mock__cell--head">服務</div>
      <div className="admin-mock__cell admin-mock__cell--head">時機</div>
      <div className="admin-mock__cell admin-mock__cell--head">操作</div>
    </div>
    <div className="admin-mock__row">
      <div><div className="admin-mock__toggle"></div></div>
      <div className="admin-mock__cell">所有服務</div>
      <div className="admin-mock__cell"><span className="admin-mock__tag">預約後</span></div>
      <div className="admin-mock__cell" style={{ color: "var(--astra-accent-press)", fontWeight: 600 }}>編輯</div>
    </div>
    <div className="admin-mock__row">
      <div><div className="admin-mock__toggle"></div></div>
      <div className="admin-mock__cell">凝膠美甲</div>
      <div className="admin-mock__cell"><span className="admin-mock__tag">前 24h</span></div>
      <div className="admin-mock__cell" style={{ color: "var(--astra-accent-press)", fontWeight: 600 }}>編輯</div>
    </div>
    <div className="admin-mock__row">
      <div><div className="admin-mock__toggle"></div></div>
      <div className="admin-mock__cell">所有服務</div>
      <div className="admin-mock__cell"><span className="admin-mock__tag">前 2h</span></div>
      <div className="admin-mock__cell" style={{ color: "var(--astra-accent-press)", fontWeight: 600 }}>編輯</div>
    </div>

    <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--astra-border-light)", fontSize: 10, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>
      訊息預覽
    </div>
    <div style={{ marginTop: 8, background: "var(--astra-light)", borderRadius: 6, padding: 10, fontSize: 11, color: "var(--fg-2)", lineHeight: 1.55 }}>
      {`〈姓名〉您好，提醒您預約了〈服務〉，時間為〈日期〉〈時間〉，服務人員：〈提供者〉。`}
    </div>
  </div>
);

// Calendar mock
const CalendarMock = () => {
  const days = Array.from({ length: 31 }, (_, i) => i + 1);
  const dows = ["一", "二", "三", "四", "五", "六", "日"];
  const full = new Set([4, 5, 11, 18, 19]);
  const avail = new Set([1, 2, 3, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 31]);
  const selected = 30;
  // Calendar start padding — 5/1 2026 is Friday → 4 blanks
  const leading = 4;
  return (
    <div className="cal-mock">
      <div className="cal-mock__head">
        <div className="cal-mock__title">線上預約</div>
        <span className="pill pill--mint" style={{ fontSize: 10, padding: "3px 8px" }}>會員專區</span>
      </div>
      <div style={{ fontSize: 11, color: "var(--fg-2)", marginBottom: 12 }}>選擇日期</div>
      <div className="cal-mock__head">
        <span className="num" style={{ fontWeight: 700, fontSize: 13 }}>2026 年 5 月</span>
        <span className="cal-mock__nav">
          <Icon name="chevron-left" size={14} />
          <Icon name="chevron-right" size={14} />
        </span>
      </div>
      <div className="cal-mock__grid">
        {dows.map((d) => <div className="cal-mock__dow" key={d}>{d}</div>)}
        {Array.from({ length: leading }).map((_, i) => <div key={"b" + i}></div>)}
        {days.map((d) => {
          let cls = "cal-mock__day";
          if (d === selected) cls += " cal-mock__day--selected";
          else if (full.has(d)) cls += " cal-mock__day--full";
          else if (avail.has(d)) cls += " cal-mock__day--avail";
          return <div className={cls} key={d}>{d}</div>;
        })}
      </div>
      <div className="cal-mock__legend">
        <span><span className="dot" style={{ background: "var(--astra-mint)" }}></span>可預約</span>
        <span><span className="dot" style={{ background: "var(--astra-accent-press)" }}></span>已選</span>
        <span><span className="dot" style={{ background: "#C75B5B" }}></span>額滿</span>
      </div>
      <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--astra-border-light)", fontSize: 12, color: "var(--fg-2)" }}>
        已選 <strong className="num" style={{ color: "var(--fg-1)" }}>5/30（六）</strong> · 接著選時段
      </div>
    </div>
  );
};

// LINE confirm
const LineConfirmMock = () => (
  <div className="line-confirm">
    <div style={{ display: "flex", alignItems: "flex-start", gap: 8 }}>
      <div style={{ width: 28, height: 28, borderRadius: 999, background: "rgba(255,255,255,0.4)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <Icon name="user" size={14} stroke={2} />
      </div>
      <div style={{ flex: 1 }}>
        <div className="line-bubble" style={{ marginTop: 0, maxWidth: "100%" }}>
          <div className="line-bubble__title">✓ 預約確認</div>
          <div className="line-bubble__row"><span className="line-bubble__label">服務</span><span>凝膠美甲 ＋ 美睫嫁接</span></div>
          <div className="line-bubble__row"><span className="line-bubble__label">日期</span><span className="num">2026-05-30（六）</span></div>
          <div className="line-bubble__row"><span className="line-bubble__label">時間</span><span className="num">11:00 – 12:30</span></div>
          <div className="line-bubble__row"><span className="line-bubble__label">老師</span><span>Sasha ・ Mia</span></div>
          <div className="line-bubble__row"><span className="line-bubble__label">付款</span><span style={{ color: "#06C755", fontWeight: 600 }}>✓ 訂金 NT$ 500 已收</span></div>
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px dashed rgba(0,0,0,0.08)", fontSize: 11, color: "var(--fg-3)" }}>
            如需取消或更改，請於 24 小時前回覆。
          </div>
        </div>
        <div style={{ fontSize: 10, color: "rgba(255,255,255,0.7)", marginTop: 4, paddingLeft: 4 }} className="num">09:46</div>
      </div>
    </div>
  </div>
);

// Pricing
const PLANS = [
  {
    name: "新店試水",
    tag: "剛起步，1 人 LINE 預約服務",
    price: "499",
    per: "/ 月",
    note: "14 天免費試用，不滿意不收費",
    cta: "加 LINE 諮詢",
    features: [
      "LINE 內預約・付款",
      "1 位服務人員",
      "同時段複選服務",
      "加購／套組推薦",
      "Email 客服支援",
    ],
  },
  {
    name: "一頁式網頁＋一人工作室",
    tag: "想要一個專屬網站的單人工作室",
    price: "999",
    per: "/ 月",
    note: "最多人選・含一頁式網站設計＋上線",
    badge: "最多人選",
    featured: true,
    cta: "加 LINE 諮詢",
    features: [
      "包含「新店試水」全部功能",
      "專屬一頁式網站（含網域）",
      "工作室空間照・服務價位・作品集",
      "作品集隨時上傳更新",
      "1 對 1 上線協助",
    ],
  },
  {
    name: "成長中工作室",
    tag: "2 – 5 人 LINE 預約服務",
    price: "1,480",
    per: "/ 月",
    note: "多老師排班・後台訂單管理",
    cta: "加 LINE 諮詢",
    features: [
      "LINE 內預約・付款",
      "2 – 5 位服務人員",
      "同時段複選服務",
      "加購／套組推薦",
      "Email 客服支援",
    ],
  },
  {
    name: "一頁式網頁＋LINE 預約服務",
    tag: "多人工作室＋專屬一頁式網站",
    price: "1,980",
    per: "/ 月",
    note: "完整方案・網站＋多人排班全包",
    cta: "加 LINE 諮詢",
    features: [
      "包含「成長中工作室」全部功能",
      "專屬一頁式網站（含網域）",
      "工作室空間照・服務價位・作品集",
      "作品集隨時上傳更新",
      "1 對 1 上線協助",
    ],
  },
];

const Pricing = () => (
  <section className="section" id="pricing">
    <div className="container">
      <div className="pricing__intro reveal">
        <div className="eyebrow" style={{ marginBottom: 16, justifyContent: "center", display: "inline-flex" }}>PRICING</div>
        <h2 className="h-section">服務方案</h2>
        <p className="lead">4種方案，依人數選擇</p>
      </div>

      <div className="pricing__grid">
        {PLANS.map((p, i) => (
          <div className={`price ${p.featured ? "price--featured" : ""} reveal${['',' reveal--d1',' reveal--d2',' reveal--d3'][i]}`} key={i}>
            {p.badge && <span className="price__badge">{p.badge}</span>}
            <div className="price__name">{p.name}</div>
            <div className="price__tag">{p.tag}</div>
            <div className="price__amount">
              <span className="price__currency">NT$</span>
              <span className="price__num num">{p.price}</span>
              <span className="price__per">{p.per}</span>
            </div>
            <div className="price__note">{p.note}</div>
            <a href="#cta" className={`btn price__cta ${p.featured ? "btn--primary" : "btn--dark"}`}>
              {p.cta} <Icon name="arrow-right" size={16} />
            </a>
            <ul className="price__features">
              {p.features.map((f, j) => (
                <li key={j}>
                  <Icon name="check" size={16} stroke={2.5} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

    </div>
  </section>
);

Object.assign(window, { Walkthrough, Pricing });