const Models = () => {
  return (
    <section id="models" className="relative bg-wedar-primary text-wedar-bone py-24 lg:py-32 grain">
      {/* Giant bg type */}
      <div className="absolute left-4 top-10 font-black-display text-[18vw] leading-none text-white/[0.03] tracking-hyper pointer-events-none select-none">
        GROW
      </div>

      <div className="relative max-w-[1440px] mx-auto px-6 lg:px-10">
        <div className="max-w-3xl reveal">
          <SectionLabel tone="light">更簡化的合作流程</SectionLabel>
          <h2 className="mt-6 font-black-display text-[clamp(40px,5.6vw,88px)] leading-[0.95] tracking-hyper">
            彈性獲利模式：<br />為您的場館量身打造。
          </h2>
          <p className="mt-6 text-[17px] leading-[1.8] text-wedar-bone/70 max-w-xl">
            我們提供兩套互補的方案，您可以根據場館的人力與空間狀況靈活選擇或同時進行。
          </p>
        </div>

        <div className="mt-16 grid lg:grid-cols-2 gap-6 reveal">
          {/* Model A */}
          <div className="relative bg-wedar-bone text-wedar-primary rounded-[32px] p-10 overflow-hidden">
            <div className="absolute -top-8 -right-8 h-40 w-40 rounded-full bg-wedar-green/15" />
            <div className="relative">
              <div className="flex items-baseline justify-between">
                <Pill variant="dark">專業零售方案</Pill>
                <span className="font-black-display text-7xl text-wedar-primary/[0.06] tracking-ultra">A</span>
              </div>
              <h3 className="mt-8 font-black-display text-4xl tracking-ultra">實體進貨</h3>
              <p className="mt-3 text-wedar-primary/65 text-[15px] leading-relaxed">
                適合設有櫃檯、會員回流率高的場館，提供即時體驗並掌握高獲利空間。
              </p>
              <ul className="mt-8 space-y-4">
                {[
                ['低門檻起步', '首筆採購滿 $3,000 元即享免運送達'],
                ['高獲利空間', '提供具競爭力的夥伴進貨價，適合設有櫃檯、會員回流率高的場館'],
                ['即時體驗', '會員課後可立即購買飲用，滿足訓練後的黃金補充期']].
                map(([k, v], i) =>
                <li key={i} className="flex gap-4 pb-4 border-b border-wedar-primary/10 last:border-0 last:pb-0">
                    <span className="shrink-0 mt-1 h-6 w-6 rounded-full bg-wedar-primary text-wedar-lime font-black flex items-center justify-center text-xs">{i + 1}</span>
                    <div>
                      <div className="font-black text-[15px]">{k}</div>
                      <div className="text-wedar-primary/60 text-[13.5px] leading-relaxed mt-1">{v}</div>
                    </div>
                  </li>
                )}
              </ul>
            </div>
          </div>

          {/* Model B */}
          <div className="relative bg-wedar-bone text-wedar-primary rounded-[32px] p-10 overflow-hidden">
            <div className="absolute -top-8 -right-8 h-40 w-40 rounded-full bg-wedar-green/15" />
            <div className="relative">
              <div className="flex items-baseline justify-between">
                <Pill variant="dark">零風險推薦方案</Pill>
                <span className="font-black-display text-7xl text-wedar-primary/[0.06] tracking-ultra">B</span>
              </div>
              <h3 className="mt-8 font-black-display text-4xl tracking-ultra">QR Code 雲端銷售</h3>
              <p className="mt-3 text-wedar-primary/65 text-[15px] leading-relaxed">
                場館只需張貼專屬 QR Code，會員掃碼後直接在 WEDAR 官網完成購買。
              </p>
              <ul className="mt-8 space-y-4">
                {[['零庫存壓力', '場館只需張貼專屬 QR Code，會員掃碼後直接在 WEDAR 官網完成購買'], ['全自動營運', '商品寄送、售後諮詢均由 WEDAR 負責，場館不需處理物流'],
                ['長期被動收入', '凡透過您的代碼首購的會員將與場館綁定，您可獲得穩定的推薦分潤'],
                ['會員獨享誘因', '會員享有專屬折扣（如滿千折百），增加您的專業推薦信度']].
                map(([k, v], i) =>
                <li key={i} className="flex gap-4 pb-4 border-b border-wedar-primary/10 last:border-0 last:pb-0">
                    <span className="shrink-0 mt-1 h-6 w-6 rounded-full bg-wedar-primary text-wedar-lime font-black flex items-center justify-center text-xs">{i + 1}</span>
                    <div>
                      <div className="font-black text-[15px]">{k}</div>
                      <div className="text-wedar-primary/60 text-[13.5px] leading-relaxed mt-1">{v}</div>
                    </div>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>

        {/* Note */}
        <div className="mt-10 text-xs text-wedar-bone/50 tracking-wide reveal">
          * 實際分潤級距依合作深度調整，簽約時由專員詳細說明。
        </div>
      </div>
    </section>);};

Object.assign(window, { Models });