const { ConfigProvider, Pagination } = antd;

function App() {
  const swiperRef = React.useRef(null);
  const lang = localStorage.getItem('aili_lang') ? localStorage.getItem('aili_lang') == 'zh' : true;
  const [yuyan, $yuyan] = React.useState(localStorage.getItem('aili_lang')||'zh');
  const [slideList, $slideList] = React.useState([]);
  // footer 
  const [linkes, $linkes] = React.useState([]);
  const [inquiry, $inquiry] = React.useState({});
  const [products, $products] = React.useState([]);

  const [ppxwList, $ppxwList] = React.useState([]);
  const [total, $total] = React.useState(0);

  const t = (key) => {
    const langData = i18n[lang ? 'zh' : 'en'];
    return langData[key] || key;
  };

  React.useEffect(() => {
    
    ALanimation();

     // window.GetMenuInfo(new URLSearchParams({ siteId: lang ? 1 : 2, menuAlias: lang ? 'dynamic' : 'dynamicen' }));

    // 轮播图
    getSlideList()
    // footer
    getFooter()

    GetArticleiteList()
  }, []);

  React.useEffect(() => {
    if (slideList.length) {
      const swiper = new Swiper('.swiper', {
      loop: true,               // 循环模式
      autoplay: {
        delay: 3000,          // 3秒切换一次
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    }
  }, [slideList])

  const getSlideList = async () => {
    const obj = new URLSearchParams({ siteId: lang ? 1 : 2, count: 999, slideAlias: 'gongsidongtai' });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/SlideListApi/GetSlideList?${obj}`);
    if (res.StatusCode == 1) {
      $slideList(res.Result || []);
    }
  }

  const getFooter = () => {
    // 相关产品
    getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${new URLSearchParams({ pageNumber: 1, pageSize: 10, menuAlias: lang ? 'product' : 'producten', contentType: 'hot' }
    )}`).then(res => $products(res?.Result?.DataList || []));
    // 相关链接
    getJSON(`${API_BASE}/api/v1/Systen.WebApi/MenuApi/GetMenuList?${new URLSearchParams({ siteAlias: lang ? 'cn' : 'en', menuGroupName: 'foot' }
    )}`).then(res => $linkes(res?.Result || []));
    // 购买咨询
    getJSON(`${API_BASE}/api/v1/Systen.WebApi/WebSiteApi/GetSiteByAlias?${new URLSearchParams({ alias: lang ? 'cn' : 'en' }
    )}`).then(res => {
      const inquiry = res?.Result || {};
      if (!inquiry.Address) inquiry.Address = '重庆市高新区金凤镇新州大道5号1-5幢';
      $inquiry(inquiry);
    });
  }

  const GetArticleiteList = async (params={}) => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 10, menuAlias: lang ? 'ppxw' : 'ppxwen', ...params });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/ArticleApi/GetArticleiteList?${obj}`);
    $ppxwList(res?.Result?.DataList || []);
    $total(res?.TotalCount || 0);
  }

  return (
    <div className="app">
      {/* 导航栏 */}
      <nav class="navbar" id="navbar">
        <div class="nav-container">
          <a href="/" class="nav-logo">
            <img src="/Theme/prototype/images/logo.png" alt={t('艾丽')} />
          </a>
          <button class="nav-toggle" id="navToggle" type="button" aria-label={t('打开菜单')} aria-expanded="false">
            <span></span><span></span><span></span>
          </button>
          <ul class="nav-menu">
            <li><a href="/">{t('首页')}</a></li>
            <li><a href="/About/">{t('关于艾丽')}</a></li>
            {/* <li><a href="/cysl/">{t('产研实力')}</a></li> */}
            <li><a href="/product/">{t('产品中心')}</a></li>
            <li><a href="/shuziliaofa/">{t('数字疗法')}</a></li>
            <li><a href="/jkkp/">{t('健康科普')}</a></li>
            <li><a href="/dynamic/" class="active">{t('公司动态')}</a></li>
            <li><a href="/goumaizixun/" class="nav-cta">{t('购买咨询')}</a></li>
            <li class="lang-switch">
              <button type="button" class={`lang-btn ${yuyan == 'zh' ? 'active' : ''}`} onClick={() => {
                if (yuyan == 'zh') return;
                window.location.href = '/';
                $yuyan('zh');
                localStorage.setItem('aili_lang', 'zh');
              }}>{t('中文')}</button>
              <button type="button" class={`lang-btn ${yuyan == 'en' ? 'active' : ''}`} onClick={() => {
                if (yuyan == 'en') return;
                window.location.href = '/en/';
                $yuyan('en');
                localStorage.setItem('aili_lang', 'en');
              }}>EN</button>
            </li>
          </ul>
        </div>
      </nav>

      {/* Hero Banner */}
      <div class="swiper page-hero">
        <div class="swiper-wrapper">
          {slideList.map(v => (
            <div class="swiper-slide" key={v.Id}>
              <section class="page-hero" id="hero-about" style={{ backgroundImage: `linear-gradient(160deg, rgba(225, 247, 244, 0.8) 0%, rgba(168, 230, 224, 0.8) 100%),url("${FILE_URL}${v.ImagePath}")`}}>
                <div class="container">
                  <div class="breadcrumb">
                    <a href="/">{t('首页')}</a> &gt; <span>{v.Title}</span>
                  </div>
                  <h1>{v.Title}</h1>
                  <p class="page-hero-subtitle">{v.Note}</p>
                </div>
              </section>
            </div>
          ))}
        </div>
      </div>

      {/* <div class="qt">
        <div class="qtItem">
          <div class="qti qtImg1"></div>
          <div class="qtContent">
            <img className="qtcImg" src={FILE_URL + inquiry?.QRCodeThree} alt="" />
            <div className="qtline" />
            <div class="qtlabel">
              <img class="qtlamg" src="../images/qw.png" alt="" />
              <span>{t('企业微信')}</span>
            </div>
          </div>
        </div>
        <div class="qtItem">
          <div class="qti qtImg2"></div>
          <div class="qtContent">
            <div class="qtlabel">
              <img class="qtlamg" src="../images/gudingdianhua.png" alt="" />
              <span>{t('固定电话')}</span>
            </div>
            <div className="qtline" />
            <p style={{margin: 0, textAlign: 'center'}}>023-68889003</p>
          </div>
        </div>
        <div class="qtItem">
          <div class="qti qtImg3"></div>
          <div class="qtContent">
            <div class="qtlabel">
              <img class="qtlamg" src="../images/shouji.png" alt="" />
              <span>{t('移动电话')}</span>
            </div>
            <div className="qtline" />
            <p style={{margin: 0, textAlign: 'center'}}>023-68889003</p>
          </div>
        </div>
        <div class="qtItem">
          <div class="qti qtImg4"></div>
          <div class="qtContent">
            <div class="qtlabel">
              <img class="qtlamg" src="../images/xingxi.png" alt="" />
              <span>{t('在线咨询')}</span>
            </div>
          </div>
        </div>
      </div> */}

      <section class="section">
        <div class="container">
          <div class="news-list-grid reveal" id="newsGrid">
            {ppxwList.map(v => (
              <a href={`${v.Id}.html?id=${v.Id}`} class="news-card" key={v.Id}>
                <div class="news-image" style={{height: 240}}>
                  <img src={FILE_URL + v.CoverPath} style={{maxWidth: '100%', height: '100%', objectFit: 'contain'}} alt="" />
                </div>

                <div class="news-content">
                  <h3 class="news-title">{v.Title}</h3>
                  <p class="news-excerpt">{v.Outline}</p>
                  <span class="news-detail-btn">{t('查看详情')}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 50 }}>
            <ConfigProvider theme={{
              token: {
                colorPrimary: "#81D8D0",
              },
            }}>
              <Pagination defaultCurrent={1} total={total} onChange={(pageNumber, pageSize) => {
                GetArticleiteList({ pageNumber, pageSize });
              }} />
            </ConfigProvider>
          </div>
      </section>

      {/* Footer - 5列布局：品牌 + 快速导航 + 服务支持 + 联系我们 + 二维码 */}
      <footer class="footer">
        <div class="container">
          <div class="footer-grid">
            {/* 第1列：品牌 */}
            <div class="footer-brand">
              <div class="footer-logo">
                <img src="/Theme/prototype/images/logo.png" alt={t('艾丽')} />
              </div>
              <p class="footer-brand-text">{t('植恩生物旗下女性健康管理品牌，围绕体重管理、营养补充、私密健康、情绪与睡眠等领域，为女性提供科学、安心的产品与服务。')}</p>
            </div>

            {/* 第2列：相关产品 */}
            <div class="footer-links-section">
              <h4 class="footer-title">{t('相关产品')}</h4>
              <ul class="footer-links">
                {products.map(v => (
                  <li key={v.Id}><a href={`/product/cpxq/?id=${v.Id}`}>{v.Title}</a></li>
                ))}
              </ul>
            </div>

            {/* 第3列：相关链接 */}
            <div class="footer-links-section">
              <h4 class="footer-title">{t('相关链接')}</h4>
              <ul class="footer-links">
                  {linkes.map(v => (
                  <li key={v.Id}><a href={v.LinkUrl}>{v.Name}</a></li>
                ))}
              </ul>
            </div>

            {/* 第4列：联系我们 */}
            <div class="footer-contact-section">
              <h4 class="footer-title">{t('联系我们')}</h4>
              <div class="footer-contact-item">
                <i class="fas fa-phone footer-contact-icon"></i>
                <span>{inquiry.Tel}</span>
              </div>
              <div class="footer-contact-item">
                <i class="fas fa-envelope footer-contact-icon"></i>
                <span>{inquiry.Email}</span>
              </div>
              <div class="footer-contact-item">
                <i class="fas fa-map-marker-alt footer-contact-icon"></i>
                <span>{t(inquiry.Address)}</span>
              </div>
            </div>

            {/* 第5列：二维码 */}
            <div class="footer-qrcode-section">
              <h4 class="footer-title">{t('关注我们')}</h4>
              <div class="footer-qrcodes">
                <div class="footer-qrcode-item">
                  <div style={{ width: 100, height: 100, background: '#fff', borderRadius: 'var(--radius-md)', padding: 5, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img style={{ width: '100%', height: '100%' }} src={FILE_URL + inquiry.QRCode} alt="" />
                  </div>
                  <span class="footer-qrcode-label">{t('微信公众号')}</span>
                </div>
                <div class="footer-qrcode-item">
                  <div style={{ width: '100px', height: '100px', background: '#fff', borderRadius: 'var(--radius-md)', padding: 5, marginBottom: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img style={{ width: '100%', height: '100%' }} src={FILE_URL + inquiry.QRCodeOne} alt="" />
                  </div>
                  <span class="footer-qrcode-label">{t('微信视频号')}</span>
                </div>
              </div>
            </div>
          </div>

          <div dangerouslySetInnerHTML={{__html: inquiry.Copyright}}></div>
        </div>
      </footer>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);