import { Button } from "@arco-design/web-react";
import Checkmark12Filled from "@ricons/fluent/Checkmark12Filled";
import { Icon } from "@ricons/utils";
import "./index.less";

function Subscribe() {
  return (
    <div className="subscribe">
      <div className="container">
        <h2>支持一下</h2>
        <h4>
          您可以手工通过“支付宝/微信”打赏
          Backset，在收到你的打赏之后，我们会尽快 (5 - 30分钟)
          为您解锁全部学习内容权限
        </h4>
        <h4>
          PS：转账请附上“用户名/手机号”，如果忘记了，请联系微信：x-arctanx
        </h4>
        <div className="options overlay">
          <section>
            <div className="original">￥1,299</div>
            <div className="price">199</div>
            <h3>季度</h3>
            <p>
              三个月内，在线学习 backset.cn
              上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
            </p>
            <Button type="outline">订阅</Button>
            <ul>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>
                  全部视频免费<span>看看看看</span>
                </div>
              </li>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>
                  全部视频免费<span>看看看看</span>
                </div>
              </li>
            </ul>
          </section>
          <section>
            <div className="original">￥1,299</div>
            <div className="price">299</div>
            <h3>季度</h3>
            <p>
              三个月内，在线学习 backset.cn
              上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
            </p>
            <Button type="outline">订阅</Button>
            <ul>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>
                  全部视频免费<span>看看看看</span>
                </div>
              </li>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>
                  全部视频免费<span>看看看看</span>
                </div>
              </li>
            </ul>
          </section>
          {/* popular */}
          <section className="popular">
            <div className="original">￥1,299</div>
            <div className="price">399</div>
            <h3>季度</h3>
            <p>
              三个月内，在线学习 backset.cn
              上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
            </p>
            <Button type="primary" size="large" long>
              订阅
            </Button>
            <ul>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>
                  全部视频免费<span>看看看看</span>
                </div>
              </li>
              <li>
                <Icon size={20}>
                  <Checkmark12Filled />
                </Icon>
                <div>
                  全部视频免费<span>看看看看</span>
                </div>
              </li>
            </ul>
          </section>
        </div>
      </div>
    </div>
  );
}

export default Subscribe;