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([]);
  const [products, $products] = React.useState([]);
  const [linkes, $linkes] = React.useState([]);
  const [inquiry, $inquiry] = React.useState({});
  const [produc, $produc] = React.useState({});
  const [homeIntro, $homeIntro] = React.useState({});
  const [certificationList, $certificationList] = React.useState([]);
  const [jkkpList, $jkkpList] = React.useState([]);
  const [productTabs, $productTabs] = React.useState([
    { icon: 'fa-weight-scale', i18n: 'products.tab_weight', text: '体重管理', dataTab: 'weight', state: true, Alias: 'tzgl', },
    { icon: 'fa-apple-whole', i18n: 'products.tab_nutrition', text: '营养补充', dataTab: 'nutrition', Alias: 'yybc', },
    { icon: 'fa-heart-pulse', i18n: 'products.tab_intimate', text: '私密健康', dataTab: 'intimate', Alias: 'smjk', },
    { icon: 'fa-moon', i18n: 'products.tab_emotion', text: '情绪与睡眠', dataTab: 'emotion', Alias: 'qxysm', },
  ]);
  const [item, $item] = React.useState({ img: 'tizhong2.png', aimg: 'tizhong.png', text: '体重管理', Alias: 'tzgl', state: true });

  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 ? 'shouye' : 'shouyeen' }));

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

    // 公司简介
    GetPartialContent()
    // 产品列表
    getProductList({ menuAlias: lang ? 'tzgl' : 'tzglen' })
    // 企业资质
    GetZIzi({ menuAlias: lang ? 'certification' : 'certificationen' })
    // 健康科普
    getArticleiteList()
  }, []);

  React.useEffect(() => {
    if (slideList.length) {
      const swiper = new Swiper('.swiper', {
        loop: true,               // 循环模式

        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: 'index_banner' });
    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 getProductList = async (params = {}) => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 10, contentType: 'recommend', ...params });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${obj}`);
    if (res?.Result?.DataList) {
      $produc(res.Result.DataList[0] || {})
    }
  }

  const GetPartialContent = async (params = {}) => {
    const obj = new URLSearchParams({ siteId: lang ? 1 : 2, partAlias: lang ? 'index_about' : 'index_abouten', ...params });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/PartialContentApi/GetPartialContent?${obj}`);
    $homeIntro(res?.Result || {});
  }

  const GetZIzi = async (params = {}) => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 10, contentType: 'recommend', ...params, ...params });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${obj}`);
    $certificationList(res?.Result?.DataList || []);
  }

  const getArticleiteList = async () => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 10, menuAlias: lang ? 'jkkp' : 'jkkpen', contentType: 'recommend' });
    const res = await getJSON(`${API_BASE}/api/v1/Systen.WebApi/ArticleApi/GetArticleiteList?${obj}`);
    $jkkpList(res?.Result?.DataList || []);
  }

  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="/" class="active">{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/">{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 hero">
        <div class="swiper-wrapper">
          {slideList.map(v => (
            <div class="swiper-slide" key={v.Id}>
              <section class="hero">
                {/* <div class="hero-bg" 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> */}
                <div class="hero-bg" style={{ backgroundImage: `url("${FILE_URL}${v.ImagePath}")` }}></div>
                <div class="container">
                  <div class="hero-content">
                    <div class="hero-label animate-fade-in">{t('植恩生物旗下女性健康管理品牌')}</div>
                    <h1 class="animate-fade-in-up">{v.Title}</h1>
                    <p class="hero-subtitle animate-fade-in-up" dangerouslySetInnerHTML={{__html: v.Note ? v.Note.replace(/@br/g, '<br/>'):''}}></p>
                    <div class="hero-buttons animate-fade-in-up">
                      <a href="/product/" class="btn btn-dark">{t('了解产品')}</a>
                      <a href="/About/" class="btn btn-outline-dark">{t('品牌故事')}</a>
                    </div>
                  </div>
                </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/1@3x.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> */}

      {/* 产品中心板块 - Tab切换 */}
      <section class="section products-preview" id="products-preview">
        <div class="container">
          <div class="section-header reveal">
            <div class="section-label section-label-lined">{t('产品中心')}</div>
            <h2 class="section-title">{t('科学为本，品质可见')}</h2>
            <p class="section-subtitle">{t('每一款产品，都是对品质的一份认真回答')}</p>
          </div>

          {/* 类别 Tab 切换 */}
          <div class="product-tabs reveal" style={{flexWrap: 'wrap'}}>
            {productTabs.map(v => (
              <button key={v.icon} class={`product-tab ${v.state ? "active" : ''}`} data-tab={v.dataTab} onClick={() => {
                if (v.state) return;
                productTabs.forEach(v => delete v.state);
                v.state = true;
                $productTabs([...productTabs]);
                $item(v);
                getProductList({ menuAlias: lang ? v.Alias : v.Alias + 'en' });
              }}>
                <i class={`fas ${v.icon}`}></i>
                <span>{t(v.text)}</span>
              </button>
            ))}
          </div>

          {produc.Title ? (
            <div class="product-tab-panel active" id="tab-weight">
              <div class="product-showcase">
                <div class="product-showcase-info">
                  <div class="product-showcase-badge">{produc?.ExtendData?.Extend_Pic_identification}</div>
                  <h3 class="product-showcase-name">{produc.Title}</h3>
                  <p class="product-showcase-desc">{produc.Outline}</p>
                  <ul class="product-showcase-tags">
                    {(produc?.ExtendData?.TextExtend_Pic_attestation || '').split(',').map((v) => (
                      <li><i class="fas fa-check-circle" key={v}></i> <span>{v}</span></li>
                    ))}
                  </ul>
                  <div class="product-showcase-actions">
                    <a href={`/product/${produc.Id}.html?id=${produc.Id}`} class="btn btn-primary">{t('使用说明')}</a>
                    <a href="/goumaizixun/" class="btn btn-outline">{t('购买咨询')}</a>
                  </div>
                </div>
                <div class="product-showcase-image">
                  <div class="product-showcase-img-wrap">
                    <img src={FILE_URL + produc.CoverPath} alt={t('艾丽奥利司他胶囊')} class="product-showcase-img" />
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div class="" id="tab-emotion">
              <div class="product-tab-empty">
                <div class="product-tab-empty-icon">
                  <i class="fas fa-moon"></i>
                </div>
                <h3>{t(item.text)}</h3>
                <p>{t('情绪与睡眠系列产品正在研发中，将于近期上线，敬请关注')}</p>
                <a href="/goumaizixun/" class="btn btn-primary" style={{ marginTop: 'var(--spacing-md)' }}>{t('咨询更多信息')}</a>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* 公司简介板块 */}
      <section class="section about-preview">
        <div class="container">
          <div class="section-header reveal">
            <div class="section-label section-label-lined">{t('公司简介')}</div>
          </div>
          <div className="reveal" dangerouslySetInnerHTML={{ __html: homeIntro.Content }}></div>
        </div>
      </section>

      {/* 企业资质板块 - 8个证书 */}
      <section class="section certificates-preview">
        <div class="container">
          <div class="section-header reveal">
            <div class="section-label section-label-lined">{t('企业资质')}</div>
            <h2 class="section-title">{t('每一项认证，都是实力的勋章')}</h2>
            <p class="section-subtitle">{t('从原料到成品，每一步都有标准可循、有资质可鉴、有记录可查')}</p>
          </div>

          <div class="cert-grid reveal">
            {certificationList.map(v => (
              <div class="cert-card" key={v.CoverPath}>
                <img src={`${FILE_URL}${v.CoverPath}`} alt={v.Title} class="cert-img" />
                <h3 class="cert-name">{v.Title}</h3>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 健康科普板块 */}
      <section class="section news-preview">
        <div class="container">
          <div class="section-header reveal">
            <div class="section-label section-label-lined">{t('健康科普')}</div>
            <h2 class="section-title">{t('用专业知识做底，把女性健康讲得温暖易懂')}</h2>
            <p class="section-subtitle">{t('集结药学与营养学专业人士，把健康知识讲得清楚、说得温暖')}</p>
          </div>
          <div class="news-grid" id="homeHealthGrid">
            {jkkpList.map(v => (
              <a href={`jkkp/${v.Id}.html?id=${v.Id}`} class="news-card" key={v.Id}>
                <div class="health-card-img">
                  <img style={{ width: '100%', height: '100%', objectFit: 'cover' }} src={FILE_URL + v.CoverPath} alt="" />
                </div>
                <div class="news-content">
                  <h3 class="news-title">{v.Title}</h3>
                  <p class="news-excerpt">{v.Outline}</p>
                  <div class="news-meta">
                    <span><i class="far fa-calendar"></i> {v.ReleaseTimeStr}</span>
                    <span><i class="far fa-eye"></i> {(Number(v.BrowseNumber) || 0).toLocaleString()}</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
          <div class="text-center reveal" style={{ marginTop: 'var(--spacing-xl)' }}>
            <a href="/jkkp/" class="btn btn-primary">{t('查看更多文章')}</a>
          </div>
        </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/${v.Id}.html?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 />);