import React from "react";

export default function Info() {
  return (
    <section className="flex flex-1 flex-col justify-center container">
      <div className="flex flex-row justify-center items-center p-4 gap-8">
        <div className="mockup-phone m-0">
          <div className="camera"></div>
          <div className="display">
            <div className="carousel w-64">
              <div id="slide1" className="carousel-item relative w-full">
                <img
                  src="./images/info_dongtai.png"
                  className="w-full object-contain"
                />
                <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                  <a href="#slide4" className="btn btn-circle bg-[#FFFFFF1A]">
                    ❮
                  </a>
                  <a href="#slide2" className="btn btn-circle bg-[#FFFFFF1A]">
                    ❯
                  </a>
                </div>
              </div>
              <div id="slide2" className="carousel-item relative w-full">
                <img
                  src="./images/info_faxian.png"
                  className="w-full object-contain"
                />
                <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                  <a href="#slide1" className="btn btn-circle bg-[#FFFFFF1A]">
                    ❮
                  </a>
                  <a href="#slide3" className="btn btn-circle bg-[#FFFFFF1A]">
                    ❯
                  </a>
                </div>
              </div>
              <div id="slide3" className="carousel-item relative w-full">
                <img
                  src="./images/info_xiangqin.png"
                  className="w-full object-contain"
                />
                <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                  <a href="#slide2" className="btn btn-circle bg-[#FFFFFF1A]">
                    ❮
                  </a>
                  <a href="#slide4" className="btn btn-circle bg-[#FFFFFF1A]">
                    ❯
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col">
          <img className="w-80" src="./images/slogan.png" priority alt="" />
          <div className="flex flex-col mt-12">
            <p className="text-base text-primary font-medium">
              欢迎使用铁粉空间，您的画师信息检索利器！
            </p>
            <p className="text-base text-white font-medium mt-2">亮点功能：</p>
            <p className="text-sm text-secondary mt-1">
              1、搜索作品：
              <span className="text-secondary">发现您喜欢的画师及其作品。</span>
            </p>
            <p className="text-sm text-secondary mt-1">
              2、微信添加：
              <span className="text-secondary">
                轻松关注画师，了解创作背后的故事。
              </span>
            </p>
            <p className="text-sm text-secondary mt-1">
              3、个性化推荐：
              <span className="text-secondary">
                智能推荐符合您口味的画师和作品。
              </span>
            </p>
            <p className="text-base text-white font-medium mt-4">
              为何选择我们？
            </p>
            <p className="text-sm text-secondary mt-1">
              1、全面覆盖：
              <span className="text-secondary">
                汇聚多领域优秀画师，满足您的多样需求。
              </span>
            </p>
            <p className="text-sm text-secondary mt-1">
              2、简单易用：
              <span className="text-secondary">直观设计，让您轻松畅享。</span>
            </p>
            <p className="text-sm text-secondary mt-1">
              3、隐私安全：
              <span className="text-secondary">
                严格保护用户隐私，使用放心。
              </span>
            </p>
            <p className="text-sm text-secondary mt-1">
              4、持续更新：
              <span className="text-secondary">
                新功能不断推出，让您的体验更上一层楼。
              </span>
            </p>
            <p className="text-base text-primary font-medium mt-4">
              下载铁粉空间APP，发现更多艺术之美！
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}