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

// 季度：三个月内，在线学习 ninghao.net 上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。

function Subscribe() {
  return (
    <div className="subscribe">
      <div className="container">
        <h2>订阅选项</h2>
        <h4>我也不知道该如何劝你们花钱点钱？但是学一点可能就少亏一点</h4>
        <div className="options overlay">
          <section>
            <div className="original">￥1,299</div>
            <div className="price">199</div>
            <h3>季度</h3>
            <p>
              三个月内，在线学习 ninghao.net
              上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
            </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>
              三个月内，在线学习 ninghao.net
              上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
            </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>
              三个月内，在线学习 ninghao.net
              上的所有课程，通过高效的内容，快速掌握各种软件应用开发技术。
            </p>
            <Button type="primary">订阅</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;