import React from "react";
import { Button, Card, Col, Row, Tabs, Typography } from "antd";
import baopinzhuizongImg from "../../assets/images/baopinzhuizong.png";
import jinduijiankongImg from "../../assets/images/jinduijiankong.png";
import darenshaixuanImg from "../../assets/images/darenshaixuan.png";
import qianlileimuImg from "../../assets/images/qianlileimu.png";
import baokuanshipinImg from "../../assets/images/baokuanshipin.png";
import remenzhiboImg from "../../assets/images/remenzhibo.png";
import hotTopImg from "../../assets/images/hottop1.png";

const { Title, Text } = Typography;

const featureCards = [
  {
    title: "爆品追踪",
    desc: "最近有什么商品有机会爆单？",
    image: baopinzhuizongImg
  },
  {
    title: "竞对监控",
    desc: "竞争对手新品和策略变化随时掌握",
    image: jinduijiankongImg
  },
  { title: "达人筛选", desc: "寻找最适合的联盟达人合作", image: darenshaixuanImg },
  { title: "潜力类目", desc: "竞争小、机会大的类目是什么？", image: qianlileimuImg },
  { title: "爆款视频", desc: "最近哪些视频带货效果好？", image: baokuanshipinImg },
  { title: "热门直播", desc: "识别爆单直播间，找到有效打法", image: remenzhiboImg }
];

const products = Array.from({ length: 5 }, (_, index) => ({
  id: `product-${index}`,
  title: "热卖商品标题",
  price: "$59.90",
  sales: "成交金额 $348.87万",
  volume: "销量 58243"
}));

const focusStats = [
  { label: "商品数量", value: "0" },
  { label: "成交金额", value: "$0.00", sub: "$0.00 单品平均" },
  { label: "直播成交", value: "$0.00", sub: "$0.00 单品平均" },
  { label: "视频成交", value: "$0.00", sub: "$0.00 单品平均" },
  { label: "商品卡成交", value: "$0.00", sub: "$0.00 单品平均" }
];

export default function ExploreContent() {
  return (
    <div className="explore-content">
      <section className="explore-how">
        <div className="explore-how-inner">
          <div className="explore-how-title">
            <span className="explore-how-icon" aria-hidden="true">
              <svg
                width="26"
                height="26"
                viewBox="0 0 26 26"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                xmlnsXlink="http://www.w3.org/1999/xlink"
              >
                <rect width="26" height="26" fill="url(#pattern0_12165_45591)" />
                <defs>
                  <pattern id="pattern0_12165_45591" patternContentUnits="objectBoundingBox" width="1" height="1">
                    <use xlinkHref="#image0_12165_45591" transform="scale(0.0138889)" />
                  </pattern>
                  <image
                    id="image0_12165_45591"
                    width="72"
                    height="72"
                    preserveAspectRatio="none"
                    xlinkHref="data:image/png;base64,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"
                  />
                </defs>
              </svg>
            </span>
            如何使用Hoyidata
          </div>
          <div className="explore-how-card">
            <Row gutter={[20, 20]}>
              {featureCards.map((item) => (
                <Col key={item.title} xs={24} md={12} lg={8}>
                  <div className="explore-feature-card">
                    <div className="explore-feature-content">
                      <div className="explore-feature-title">
                        <span>{item.title}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="w-5 h-5 relative top-[-1px]"><path d="M7.0835 16.4584L13.3335 10.2084L7.0835 3.95837" stroke="#222222" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                      </div>
                      <div className="explore-feature-desc">{item.desc}</div>
                    </div>
                    <div className="explore-feature-visual">
                      {item.image && <img src={item.image} alt={item.title} />}
                    </div>
                  </div>
                </Col>
              ))}
            </Row>
          </div>
        </div>
      </section>

      <section className="explore-hot">
        <div className="explore-hot-inner">
          <Tabs
            className="explore-hot-tabs"
            defaultActiveKey="hot"
            items={[
              {
                key: "hot",
                label: "🔥 热卖榜单",
                children: (
                  <Card className="explore-hot-card">
                    <div className="explore-hot-header">
                      <div className="explore-hot-header-left">
                        <Text className="explore-hot-title">热卖商品</Text>
                        <Text className="explore-hot-range">(01/02 ~ 01/31)</Text>
                      </div>
                      <div className="explore-hot-more">
                        更多
                        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.66669 13.1667L10.6667 8.16666L5.66669 3.16666" stroke="#BBBBBB" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                      </div>
                    </div>
                    <Row className="explore-product-row">
                      {products.map((item, index) => (
                        <Col key={item.id} className="explore-product-col">
                          <Card className="explore-product-card">
                            {index === 0 && (
                              <div className="explore-product-flag">
                                <svg
                                  width="62"
                                  height="24"
                                  viewBox="0 0 62 24"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                  className="explore-product-flag-svg"
                                >
                                  <path
                                    d="M0 4C0 1.79086 1.79086 0 4 0H62V20C62 22.2091 60.2091 24 58 24H0V4Z"
                                    fill="url(#paint0_linear_234_6080)"
                                  />
                                  <g opacity="0.5">
                                    <path
                                      d="M5.32138 9.13305C5.21204 8.52073 5.92662 8.10551 6.40445 8.50371L8.42041 10.1837C8.72827 10.4402 9.19128 10.3691 9.40798 10.032L11.4392 6.87233C11.7016 6.46412 12.2984 6.46412 12.5608 6.87233L14.592 10.032C14.8087 10.3691 15.2717 10.4402 15.5796 10.1837L17.5955 8.50371C18.0734 8.10551 18.788 8.52073 18.6786 9.13305L17.4315 16.1172C17.3747 16.4351 17.0982 16.6667 16.7752 16.6667H7.22483C6.90185 16.6667 6.62532 16.4351 6.56855 16.1172L5.32138 9.13305Z"
                                      fill="#A77933"
                                    />
                                  </g>
                                  <path
                                    d="M28.4766 7.46875V16H26.8711V7.46875H28.4766ZM31.125 7.46875V8.74023H24.252V7.46875H31.125ZM38.9414 11.5176V11.957C38.9414 12.6016 38.8555 13.1816 38.6836 13.6973C38.5117 14.209 38.2676 14.6445 37.9512 15.0039C37.6348 15.3633 37.2578 15.6387 36.8203 15.8301C36.3828 16.0215 35.8965 16.1172 35.3613 16.1172C34.834 16.1172 34.3496 16.0215 33.9082 15.8301C33.4707 15.6387 33.0918 15.3633 32.7715 15.0039C32.4512 14.6445 32.2031 14.209 32.0273 13.6973C31.8516 13.1816 31.7637 12.6016 31.7637 11.957V11.5176C31.7637 10.8691 31.8516 10.2891 32.0273 9.77734C32.2031 9.26562 32.4492 8.83008 32.7656 8.4707C33.082 8.10742 33.459 7.83008 33.8965 7.63867C34.3379 7.44727 34.8223 7.35156 35.3496 7.35156C35.8848 7.35156 36.3711 7.44727 36.8086 7.63867C37.2461 7.83008 37.623 8.10742 37.9395 8.4707C38.2598 8.83008 38.5059 9.26562 38.6777 9.77734C38.8535 10.2891 38.9414 10.8691 38.9414 11.5176ZM37.3125 11.957V11.5059C37.3125 11.041 37.2695 10.6328 37.1836 10.2812C37.0977 9.92578 36.9707 9.62695 36.8027 9.38477C36.6348 9.14258 36.4277 8.96094 36.1816 8.83984C35.9355 8.71484 35.6582 8.65234 35.3496 8.65234C35.0371 8.65234 34.7598 8.71484 34.5176 8.83984C34.2793 8.96094 34.0762 9.14258 33.9082 9.38477C33.7402 9.62695 33.6113 9.92578 33.5215 10.2812C33.4355 10.6328 33.3926 11.041 33.3926 11.5059V11.957C33.3926 12.418 33.4355 12.8262 33.5215 13.1816C33.6113 13.5371 33.7402 13.8379 33.9082 14.084C34.0801 14.3262 34.2871 14.5098 34.5293 14.6348C34.7715 14.7598 35.0488 14.8223 35.3613 14.8223C35.6738 14.8223 35.9512 14.7598 36.1934 14.6348C36.4355 14.5098 36.6387 14.3262 36.8027 14.084C36.9707 13.8379 37.0977 13.5371 37.1836 13.1816C37.2695 12.8262 37.3125 12.418 37.3125 11.957ZM43.5879 12.8887H41.3906V11.623H43.5879C43.9473 11.623 44.2383 11.5645 44.4609 11.4473C44.6875 11.3262 44.8535 11.1621 44.959 10.9551C45.0645 10.7441 45.1172 10.5039 45.1172 10.2344C45.1172 9.97266 45.0645 9.72852 44.959 9.50195C44.8535 9.27539 44.6875 9.0918 44.4609 8.95117C44.2383 8.81055 43.9473 8.74023 43.5879 8.74023H41.918V16H40.3066V7.46875H43.5879C44.252 7.46875 44.8184 7.58789 45.2871 7.82617C45.7598 8.06055 46.1191 8.38672 46.3652 8.80469C46.6152 9.21875 46.7402 9.69141 46.7402 10.2227C46.7402 10.7734 46.6152 11.248 46.3652 11.6465C46.1191 12.0449 45.7598 12.3516 45.2871 12.5664C44.8184 12.7812 44.252 12.8887 43.5879 12.8887ZM54.7793 7.44531V16H53.2266V9.25586L51.1699 9.93555V8.68164L54.6035 7.44531H54.7793Z"
                                    fill="#A77933"
                                  />
                                  <defs>
                                    <linearGradient
                                      id="paint0_linear_234_6080"
                                      x1="0"
                                      y1="12"
                                      x2="62"
                                      y2="12"
                                      gradientUnits="userSpaceOnUse"
                                    >
                                      <stop stopColor="#FBF1E1" />
                                      <stop offset="1" stopColor="#FEF8F0" />
                                    </linearGradient>
                                  </defs>
                                </svg>
                              </div>
                            )}
                            {index === 1 && (
                              <div className="explore-product-flag">
                                <svg
                                  width="62"
                                  height="24"
                                  viewBox="0 0 62 24"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                  className="explore-product-flag-svg"
                                >
                                  <path
                                    d="M0 8C0 3.58172 3.58172 0 8 0H62V16C62 20.4183 58.4183 24 54 24H0V8Z"
                                    fill="url(#paint0_linear_234_6533)"
                                  />
                                  <g opacity="0.5">
                                    <path
                                      d="M5.32138 9.13305C5.21204 8.52073 5.92662 8.10551 6.40445 8.50371L8.42041 10.1837C8.72827 10.4402 9.19128 10.3691 9.40798 10.032L11.4392 6.87233C11.7016 6.46412 12.2984 6.46412 12.5608 6.87233L14.592 10.032C14.8087 10.3691 15.2717 10.4402 15.5796 10.1837L17.5955 8.50371C18.0734 8.10551 18.788 8.52073 18.6786 9.13305L17.4315 16.1172C17.3747 16.4351 17.0982 16.6667 16.7752 16.6667H7.22483C6.90185 16.6667 6.62532 16.4351 6.56855 16.1172L5.32138 9.13305Z"
                                      fill="#577FAC"
                                    />
                                  </g>
                                  <path
                                    d="M28.4766 7.46875V16H26.8711V7.46875H28.4766ZM31.125 7.46875V8.74023H24.252V7.46875H31.125ZM38.9414 11.5176V11.957C38.9414 12.6016 38.8555 13.1816 38.6836 13.6973C38.5117 14.209 38.2676 14.6445 37.9512 15.0039C37.6348 15.3633 37.2578 15.6387 36.8203 15.8301C36.3828 16.0215 35.8965 16.1172 35.3613 16.1172C34.834 16.1172 34.3496 16.0215 33.9082 15.8301C33.4707 15.6387 33.0918 15.3633 32.7715 15.0039C32.4512 14.6445 32.2031 14.209 32.0273 13.6973C31.8516 13.1816 31.7637 12.6016 31.7637 11.957V11.5176C31.7637 10.8691 31.8516 10.2891 32.0273 9.77734C32.2031 9.26562 32.4492 8.83008 32.7656 8.4707C33.082 8.10742 33.459 7.83008 33.8965 7.63867C34.3379 7.44727 34.8223 7.35156 35.3496 7.35156C35.8848 7.35156 36.3711 7.44727 36.8086 7.63867C37.2461 7.83008 37.623 8.10742 37.9395 8.4707C38.2598 8.83008 38.5059 9.26562 38.6777 9.77734C38.8535 10.2891 38.9414 10.8691 38.9414 11.5176ZM37.3125 11.957V11.5059C37.3125 11.041 37.2695 10.6328 37.1836 10.2812C37.0977 9.92578 36.9707 9.62695 36.8027 9.38477C36.6348 9.14258 36.4277 8.96094 36.1816 8.83984C35.9355 8.71484 35.6582 8.65234 35.3496 8.65234C35.0371 8.65234 34.7598 8.71484 34.5176 8.83984C34.2793 8.96094 34.0762 9.14258 33.9082 9.38477C33.7402 9.62695 33.6113 9.92578 33.5215 10.2812C33.4355 10.6328 33.3926 11.041 33.3926 11.5059V11.957C33.3926 12.418 33.4355 12.8262 33.5215 13.1816C33.6113 13.5371 33.7402 13.8379 33.9082 14.084C34.0801 14.3262 34.2871 14.5098 34.5293 14.6348C34.7715 14.7598 35.0488 14.8223 35.3613 14.8223C35.6738 14.8223 35.9512 14.7598 36.1934 14.6348C36.4355 14.5098 36.6387 14.3262 36.8027 14.084C36.9707 13.8379 37.0977 13.5371 37.1836 13.1816C37.2695 12.8262 37.3125 12.418 37.3125 11.957ZM43.5879 12.8887H41.3906V11.623H43.5879C43.9473 11.623 44.2383 11.5645 44.4609 11.4473C44.6875 11.3262 44.8535 11.1621 44.959 10.9551C45.0645 10.7441 45.1172 10.5039 45.1172 10.2344C45.1172 9.97266 45.0645 9.72852 44.959 9.50195C44.8535 9.27539 44.6875 9.0918 44.4609 8.95117C44.2383 8.81055 43.9473 8.74023 43.5879 8.74023H41.918V16H40.3066V7.46875H43.5879C44.252 7.46875 44.8184 7.58789 45.2871 7.82617C45.7598 8.06055 46.1191 8.38672 46.3652 8.80469C46.6152 9.21875 46.7402 9.69141 46.7402 10.2227C46.7402 10.7734 46.6152 11.248 46.3652 11.6465C46.1191 12.0449 45.7598 12.3516 45.2871 12.5664C44.8184 12.7812 44.252 12.8887 43.5879 12.8887ZM56.5723 14.7812V16H50.7949V14.957L53.5664 11.9629C53.8555 11.6348 54.084 11.3496 54.252 11.1074C54.4199 10.8652 54.5391 10.6465 54.6094 10.4512C54.6836 10.252 54.7207 10.0625 54.7207 9.88281C54.7207 9.62109 54.6738 9.39258 54.5801 9.19727C54.4863 8.99805 54.3496 8.84375 54.1699 8.73438C53.9941 8.625 53.7773 8.57031 53.5195 8.57031C53.2344 8.57031 52.9902 8.63672 52.7871 8.76953C52.5879 8.89844 52.4355 9.07812 52.3301 9.30859C52.2285 9.53906 52.1777 9.80273 52.1777 10.0996H50.625C50.625 9.5957 50.7422 9.13672 50.9766 8.72266C51.2109 8.30469 51.5469 7.9707 51.9844 7.7207C52.4219 7.4707 52.9414 7.3457 53.543 7.3457C54.1289 7.3457 54.625 7.44336 55.0312 7.63867C55.4375 7.83008 55.7461 8.10352 55.957 8.45898C56.168 8.81445 56.2734 9.23828 56.2734 9.73047C56.2734 10.0039 56.2285 10.2734 56.1387 10.5391C56.0488 10.8047 55.9219 11.0684 55.7578 11.3301C55.5977 11.5879 55.4062 11.8496 55.1836 12.1152C54.9609 12.3809 54.7129 12.6523 54.4395 12.9297L52.7754 14.7812H56.5723Z"
                                    fill="#577FAC"
                                  />
                                  <defs>
                                    <linearGradient
                                      id="paint0_linear_234_6533"
                                      x1="0"
                                      y1="12"
                                      x2="62"
                                      y2="12"
                                      gradientUnits="userSpaceOnUse"
                                    >
                                      <stop stopColor="#E1EBF4" />
                                      <stop offset="1" stopColor="#F1F8FB" />
                                    </linearGradient>
                                  </defs>
                                </svg>
                              </div>
                            )}
                            {index === 2 && (
                              <div className="explore-product-flag">
                                <svg
                                  width="62"
                                  height="24"
                                  viewBox="0 0 62 24"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                  className="explore-product-flag-svg"
                                >
                                  <path
                                    d="M0 8C0 3.58172 3.58172 0 8 0H62V16C62 20.4183 58.4183 24 54 24H0V8Z"
                                    fill="url(#paint0_linear_234_6539)"
                                  />
                                  <g opacity="0.5">
                                    <path
                                      d="M5.32138 9.13305C5.21204 8.52073 5.92662 8.10551 6.40445 8.50371L8.42041 10.1837C8.72827 10.4402 9.19128 10.3691 9.40798 10.032L11.4392 6.87233C11.7016 6.46412 12.2984 6.46412 12.5608 6.87233L14.592 10.032C14.8087 10.3691 15.2717 10.4402 15.5796 10.1837L17.5955 8.50371C18.0734 8.10551 18.788 8.52073 18.6786 9.13305L17.4315 16.1172C17.3747 16.4351 17.0982 16.6667 16.7752 16.6667H7.22483C6.90185 16.6667 6.62532 16.4351 6.56855 16.1172L5.32138 9.13305Z"
                                      fill="#8A4926"
                                    />
                                  </g>
                                  <path
                                    d="M28.4766 7.46875V16H26.8711V7.46875H28.4766ZM31.125 7.46875V8.74023H24.252V7.46875H31.125ZM38.9414 11.5176V11.957C38.9414 12.6016 38.8555 13.1816 38.6836 13.6973C38.5117 14.209 38.2676 14.6445 37.9512 15.0039C37.6348 15.3633 37.2578 15.6387 36.8203 15.8301C36.3828 16.0215 35.8965 16.1172 35.3613 16.1172C34.834 16.1172 34.3496 16.0215 33.9082 15.8301C33.4707 15.6387 33.0918 15.3633 32.7715 15.0039C32.4512 14.6445 32.2031 14.209 32.0273 13.6973C31.8516 13.1816 31.7637 12.6016 31.7637 11.957V11.5176C31.7637 10.8691 31.8516 10.2891 32.0273 9.77734C32.2031 9.26562 32.4492 8.83008 32.7656 8.4707C33.082 8.10742 33.459 7.83008 33.8965 7.63867C34.3379 7.44727 34.8223 7.35156 35.3496 7.35156C35.8848 7.35156 36.3711 7.44727 36.8086 7.63867C37.2461 7.83008 37.623 8.10742 37.9395 8.4707C38.2598 8.83008 38.5059 9.26562 38.6777 9.77734C38.8535 10.2891 38.9414 10.8691 38.9414 11.5176ZM37.3125 11.957V11.5059C37.3125 11.041 37.2695 10.6328 37.1836 10.2812C37.0977 9.92578 36.9707 9.62695 36.8027 9.38477C36.6348 9.14258 36.4277 8.96094 36.1816 8.83984C35.9355 8.71484 35.6582 8.65234 35.3496 8.65234C35.0371 8.65234 34.7598 8.71484 34.5176 8.83984C34.2793 8.96094 34.0762 9.14258 33.9082 9.38477C33.7402 9.62695 33.6113 9.92578 33.5215 10.2812C33.4355 10.6328 33.3926 11.041 33.3926 11.5059V11.957C33.3926 12.418 33.4355 12.8262 33.5215 13.1816C33.6113 13.5371 33.7402 13.8379 33.9082 14.084C34.0801 14.3262 34.2871 14.5098 34.5293 14.6348C34.7715 14.7598 35.0488 14.8223 35.3613 14.8223C35.6738 14.8223 35.9512 14.7598 36.1934 14.6348C36.4355 14.5098 36.6387 14.3262 36.8027 14.084C36.9707 13.8379 37.0977 13.5371 37.1836 13.1816C37.2695 12.8262 37.3125 12.418 37.3125 11.957ZM43.5879 12.8887H41.3906V11.623H43.5879C43.9473 11.623 44.2383 11.5645 44.4609 11.4473C44.6875 11.3262 44.8535 11.1621 44.959 10.9551C45.0645 10.7441 45.1172 10.5039 45.1172 10.2344C45.1172 9.97266 45.0645 9.72852 44.959 9.50195C44.8535 9.27539 44.6875 9.0918 44.4609 8.95117C44.2383 8.81055 43.9473 8.74023 43.5879 8.74023H41.918V16H40.3066V7.46875H43.5879C44.252 7.46875 44.8184 7.58789 45.2871 7.82617C45.7598 8.06055 46.1191 8.38672 46.3652 8.80469C46.6152 9.21875 46.7402 9.69141 46.7402 10.2227C46.7402 10.7734 46.6152 11.248 46.3652 11.6465C46.1191 12.0449 45.7598 12.3516 45.2871 12.5664C44.8184 12.7812 44.252 12.8887 43.5879 12.8887ZM52.4883 11.0488H53.3613C53.6699 11.0488 53.9238 10.9961 54.123 10.8906C54.3262 10.7812 54.4766 10.6328 54.5742 10.4453C54.6758 10.2539 54.7266 10.0332 54.7266 9.7832C54.7266 9.53711 54.6816 9.32422 54.5918 9.14453C54.502 8.96094 54.3652 8.82031 54.1816 8.72266C54.002 8.62109 53.7715 8.57031 53.4902 8.57031C53.2637 8.57031 53.0547 8.61523 52.8633 8.70508C52.6758 8.79492 52.5254 8.92383 52.4121 9.0918C52.3027 9.25586 52.248 9.45312 52.248 9.68359H50.6953C50.6953 9.22266 50.8164 8.81836 51.0586 8.4707C51.3047 8.11914 51.6367 7.84375 52.0547 7.64453C52.4727 7.44531 52.9395 7.3457 53.4551 7.3457C54.0176 7.3457 54.5098 7.43945 54.9316 7.62695C55.3574 7.81055 55.6875 8.08203 55.9219 8.44141C56.1602 8.80078 56.2793 9.24609 56.2793 9.77734C56.2793 10.0312 56.2188 10.2852 56.0977 10.5391C55.9805 10.7891 55.8066 11.0156 55.5762 11.2188C55.3496 11.418 55.0703 11.5801 54.7383 11.7051C54.4102 11.8262 54.0332 11.8867 53.6074 11.8867H52.4883V11.0488ZM52.4883 12.2441V11.418H53.6074C54.0879 11.418 54.5039 11.4746 54.8555 11.5879C55.2109 11.6973 55.5039 11.8535 55.7344 12.0566C55.9648 12.2559 56.1348 12.4883 56.2441 12.7539C56.3574 13.0195 56.4141 13.3047 56.4141 13.6094C56.4141 14.0078 56.3398 14.3633 56.1914 14.6758C56.043 14.9844 55.834 15.2461 55.5645 15.4609C55.2988 15.6758 54.9863 15.8398 54.627 15.9531C54.2676 16.0625 53.8789 16.1172 53.4609 16.1172C53.0977 16.1172 52.7441 16.0684 52.4004 15.9707C52.0605 15.8691 51.7539 15.7188 51.4805 15.5195C51.207 15.3164 50.9902 15.0625 50.8301 14.7578C50.6699 14.4492 50.5898 14.0918 50.5898 13.6855H52.1426C52.1426 13.9199 52.1992 14.1289 52.3125 14.3125C52.4297 14.4961 52.5898 14.6406 52.793 14.7461C53 14.8477 53.2324 14.8984 53.4902 14.8984C53.7754 14.8984 54.0195 14.8477 54.2227 14.7461C54.4297 14.6406 54.5879 14.4922 54.6973 14.3008C54.8066 14.1055 54.8613 13.873 54.8613 13.6035C54.8613 13.2832 54.8008 13.0234 54.6797 12.8242C54.5586 12.625 54.3848 12.4785 54.1582 12.3848C53.9355 12.291 53.6699 12.2441 53.3613 12.2441H52.4883Z"
                                    fill="#8A4926"
                                  />
                                  <defs>
                                    <linearGradient
                                      id="paint0_linear_234_6539"
                                      x1="0"
                                      y1="12"
                                      x2="62"
                                      y2="12"
                                      gradientUnits="userSpaceOnUse"
                                    >
                                      <stop stopColor="#E9D7C6" />
                                      <stop offset="1" stopColor="#FCF5F2" />
                                    </linearGradient>
                                  </defs>
                                </svg>
                              </div>
                            )}
                            <div className="explore-product-image">
                              <img src={hotTopImg} alt={item.title} />
                            </div>
                            <div className="explore-product-title">{item.title}</div>
                            <div className="explore-product-price">{item.price}</div>
                            <div className="explore-product-meta">{item.sales}</div>
                            <div className="explore-product-meta">{item.volume}</div>
                          </Card>
                        </Col>
                      ))}
                    </Row>
                    <div className="explore-hot-footer">
                      <Button type="link">更多榜单</Button>
                    </div>
                  </Card>
                )
              },
              {
                key: "follow",
                label: "📌 我的关注",
                children: (
                  <Card className="explore-follow-card" bordered={false}>
                    <div className="explore-follow-tabs">
                      {["商品", "达人", "小店", "视频", "脚本工具"].map((tab) => (
                        <button key={tab} className="explore-follow-tab">
                          {tab}
                        </button>
                      ))}
                      <div className="explore-follow-actions">
                        <Button type="primary" size="small">
                          添加商品
                        </Button>
                      </div>
                    </div>
                    <div className="explore-follow-toolbar">
                      <div className="explore-follow-date">
                        <span>2026/01/31</span>
                        <span className="explore-follow-divider">—</span>
                        <span>2026/01/31</span>
                      </div>
                      <div className="explore-follow-filters">
                        {["昨日", "过去7天", "过去30天", "过去90天", "过去180天", "过去365天"].map(
                          (filter) => (
                            <button key={filter} className="explore-follow-filter">
                              {filter}
                            </button>
                          )
                        )}
                        <button className="explore-follow-filter">分组</button>
                      </div>
                    </div>
                    <div className="explore-follow-stats">
                      {focusStats.map((stat) => (
                        <div key={stat.label} className="explore-follow-stat">
                          <div className="explore-follow-stat-label">{stat.label}</div>
                          <div className="explore-follow-stat-value">{stat.value}</div>
                          {stat.sub && <div className="explore-follow-stat-sub">{stat.sub}</div>}
                        </div>
                      ))}
                    </div>
                    <div className="explore-follow-search">
                      <input type="text" placeholder="搜索已关注商品" />
                      <div className="explore-follow-tools">
                        <Button size="small">列表设置</Button>
                        <Button size="small" type="primary">
                          数据导出
                        </Button>
                      </div>
                    </div>
                    <div className="explore-follow-table">
                      <div className="explore-follow-table-head">
                        <span>商品信息</span>
                        <span>成交金额</span>
                        <span>销量</span>
                        <span>平均销售价</span>
                        <span>达人</span>
                        <span>视频</span>
                        <span>操作</span>
                      </div>
                      <div className="explore-follow-empty">
                        <div className="explore-follow-empty-icon" />
                        <div className="explore-follow-empty-text">
                          添加关注商品，实时监控数据走势
                        </div>
                        <Button type="primary" size="small">
                          添加商品
                        </Button>
                      </div>
                    </div>
                  </Card>
                )
              }
            ]}
          />
        </div>
      </section>
    </div>
  );
}
