import React from "react";
import {
  Button,
  Card,
  Col,
  Divider,
  Dropdown,
  Layout,
  Menu,
  Row,
  Space,
  Statistic,
  Table,
  Typography
} from "antd";
import { DownOutlined } from "@ant-design/icons";
import logoWhite from "../assets/images/logo-white2.png";
import adsItemImage from "../assets/images/f89fdab0.webp";
import "../css/home.css";

const { Header, Content } = Layout;
const { Title, Paragraph, Text } = Typography;

const navItems = ["探索", "类目", "店铺", "达人", "商品", "视频与广告", "直播"];
const stats = [
  { value: "3亿+", label: "商品数据" },
  { value: "3.5亿+", label: "电商达人数据" },
  { value: "5亿+", label: "直播与短视频数据" },
  { value: "1000天", label: "历史数据" }
];
const logos = Array.from({ length: 20 }, (_, index) => ({
  id: `logo-${index + 1}`,
  src: logoWhite,
  alt: `Partner ${index + 1}`
}));

const langItems = [
  { key: "zh", label: "中文(简体)" },
  { key: "en", label: "English(US)" }
];

const tableColumns = [
  { title: "排名", dataIndex: "rank", key: "rank" },
  {
    title: "商品",
    dataIndex: "product",
    key: "product",
    render: () => <span className="home-section-product" />
  },
  { title: "价格", dataIndex: "price", key: "price" },
  { title: "销量", dataIndex: "sales", key: "sales" },
  {
    title: "趋势",
    dataIndex: "trend",
    key: "trend",
    render: () => <span className="home-section-chart" />
  }
];

const tableData = [1, 2, 3].map((item) => ({
  key: item,
  rank: `Top${item}`,
  price: "¥99.20",
  sales: "9276"
}));

export default function Home() {
  return (
    <Layout className="home">
      <Header className="home-header">
        <div className="home-brand">
          <span className="home-logo-wrap">
            <img className="home-logo" src={logoWhite} alt="Kalodata" />
          </span>
        </div>
        <Menu
          className="home-nav-menu"
          mode="horizontal"
          items={navItems.map((item) => ({
            key: item,
            label: item
          }))}
          selectable={false}
        />
        <div className="home-actions">
          <Dropdown
            menu={{ items: langItems }}
            trigger={["hover"]}
            placement="bottomRight"
          >
            <Button className="home-lang-trigger" type="text">
              <Space size={6}>
                中文(简体)
                <DownOutlined />
              </Space>
            </Button>
          </Dropdown>
          <Divider type="vertical" className="home-divider" />
          <Text className="home-user">Spark</Text>
        </div>
      </Header>

      <Content>
        <div className="home-hero">
          <div className="home-hero-content">
            <Title level={1} className="home-hero-title">
              深耕<span>TikTok</span>电商
              <br />
              全球用户<span>优选</span>
              <br />
              数据洞察平台
            </Title>
            <div className="home-hero-stats">
              {stats.map((stat) => (
                <div key={stat.label} className="home-hero-stat">
                  <Statistic value={stat.value} title={stat.label} />
                </div>
              ))}
            </div>
            <Paragraph className="home-hero-desc">
              爆品挖掘、达人建联、视频创意、直播设计、广告优化、竞对分析
              <br />
              我们助您抓住TikTok的每一次机会！
            </Paragraph>
            <Button className="home-cta" type="primary" size="large">
              7天免费试用
            </Button>
          </div>
        </div>

        <section className="home-logos">
          <div className="home-logos-track">
            {[...logos, ...logos].map((logo, index) => (
              <div key={`${logo.id}-${index}`} className="home-logo-item">
                <img src={logo.src} alt={logo.alt} />
              </div>
            ))}
          </div>
        </section>

        <section className="home-section">
          <div className="home-section-inner">
            <div className="home-section-header">
              <span className="home-section-number">01</span>
              <span>爆品追踪</span>
            </div>
            <img
              className="home-section-header-image"
              src={adsItemImage}
              alt="ads item preview"
            />
          </div>
        </section>
      </Content>
    </Layout>
  );
}