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 [jieshao, $jieshao] = React.useState({});
  const [yiliaozhichi, $yiliaozhichi] = React.useState({});
  const [jianzhongzhilvs, $jianzhongzhilvs] = React.useState({});
  const [shiyongliucheng, $shiyongliucheng] = React.useState({});
  const [hexingongneng, $hexingongneng] = React.useState([]);
  const [yongzhiyuninengshouhuoshime, $yongzhiyuninengshouhuoshime] = React.useState([]);


  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 ? 'shuziliaofa' : 'shuziliaofaen' }));

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

    GetSinglePage({ menuAlias: lang ? 'jieshao' : 'jieshaoen' }).then(res => { $jieshao(res?.Result?.DataList || {}); })
    GetSinglePage({ menuAlias: lang ? 'yiliaozhichi' : 'yiliaozhichien' }).then(res => {
      $yiliaozhichi(res?.Result?.DataList || {});
    })
    GetSinglePage({ menuAlias: lang ? 'shiyongliucheng' : 'shiyongliuchengen' }).then(res => {
      $shiyongliucheng(res?.Result?.DataList || {});
    })
    GetSinglePage({ menuAlias: lang ? 'jianzhongzhilv' : 'jianzhongzhilven' }).then(res => {
      $jianzhongzhilvs(res?.Result?.DataList || {});
    })
    GetPictureArticleList({ menuAlias: lang ? 'hexingongneng' : 'hexingongnengen' }).then(res => {
      $hexingongneng(res?.Result?.DataList || []);
    })
    GetArticleiteList({ menuAlias: lang ? 'yongzhiyuninengshouhuoshime' : 'yongzhiyuninengshouhuoshimeen' }).then(res => {
      $yongzhiyuninengshouhuoshime(res?.Result?.DataList || []);
    })

  }, []);

  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: 'shuziliaofa' });
    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 GetSinglePage = async (params = {}) => {
    const obj = new URLSearchParams({ ...params });
    return getJSON(`${API_BASE}/api/v1/Systen.WebApi/SinglePageApi/GetSinglePage?${obj}`);
  }

  const GetPictureArticleList = async (params = {}) => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 99, ...params });
    return getJSON(`${API_BASE}/api/v1/Systen.WebApi/PictureArticleApi/GetPictureArticleList?${obj}`);
  }

  const GetArticleiteList = async (params = {}) => {
    const obj = new URLSearchParams({ pageNumber: 1, pageSize: 99, ...params });
    return getJSON(`${API_BASE}/api/v1/Systen.WebApi/ArticleApi/GetArticleiteList?${obj}`);
  }

  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/" class="active">{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');
              }}>中文</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 */}
      <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 class="hero-buttons dt-hero-btns">
                    <a href="#experience" class="btn btn-primary">{t('立即体验')}</a>
                    <a href="#features" class="btn btn-outline">{t('了解核心功能')}</a>
                  </div>
                </div>
              </section>
            </div>
          ))}
        </div>
      </div>

      <section class="section">
        <div class="container">

          {/* 板块一：什么是旨域减重版数字疗法 */}
          <div dangerouslySetInnerHTML={{ __html: jieshao.Content }}></div>

          {/* 板块二：核心功能 */}
          <div class="section-header reveal dt-gap" id="features">
            <div class="section-label">{t('CORE FEATURES')}</div>
            <h2 class="section-title">{t('核心功能')}</h2>
          </div>
          <div class="dt-feature-grid reveal">
            {hexingongneng.map(v => (
              <div class="culture-card" key={v.Id}>
                <div class="culture-icon">
                  <img style={{ width: '100%', height: '100%', objectFit: 'contain' }} src={FILE_URL + v.CoverPath} alt="" />
                </div>
                <h4>{v.Title}</h4>
                <p dangerouslySetInnerHTML={{ __html: v.Content }}></p>
              </div>
            ))}
          </div>

          {/* 板块三：用户价值 */}
          <div class="section-header reveal dt-gap">
            <div class="section-label">{t('WHY CHOOSE US')}</div>
            <h2 class="section-title">{yongzhiyuninengshouhuoshime[0]?.MenuName}</h2>
          </div>
          <div class="dt-benefit-grid reveal">
            {yongzhiyuninengshouhuoshime.map((v, index) => (
              <div class="dt-benefit-item" key={v.Id}>
                <div class="dt-benefit-num">{(index + 1) > 9 ? '' : 0}{index + 1}</div>
                <h4>{v.Title}</h4>
                <p dangerouslySetInnerHTML={{ __html: v.Content }}></p>
              </div>
            ))}
          </div>

          {/* 板块四：医疗护航（原互联网医院背书） */}
          <div class="section-header reveal dt-gap">
            <div class="section-label">{t('MEDICAL BACKING')}</div>
            <h2 class="section-title">{yiliaozhichi.Title}</h2>
          </div>
          <div class="reveal" dangerouslySetInnerHTML={{ __html: yiliaozhichi.Content }}>
          </div>

          {/* 板块五：使用流程 */}
          <div class="section-header reveal dt-gap">
            <div class="section-label">{t('HOW IT WORKS')}</div>
            <h2 class="section-title">{shiyongliucheng.Title}</h2>
          </div>
          <div className="reveal" dangerouslySetInnerHTML={{ __html: shiyongliucheng.Content }}>

          </div>
        </div>
      </section>

      {/* 板块六：扫码体验 CTA */}
      <div className="reveal" dangerouslySetInnerHTML={{ __html: jianzhongzhilvs.Content }}></div>

      {/* 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 />);