"use client";

import { Card, Col, Flex, Row, Space, Statistic, Tag, Typography } from "antd";
import {
  AimOutlined,
  BugOutlined,
  CodeOutlined,
  ExperimentOutlined,
  TeamOutlined
} from "@ant-design/icons";

const { Paragraph, Title } = Typography;

const directions = [
  "WEB安全研究",
  "渗透测试",
  "漏洞挖掘",
  "代码审计",
  "二进制安全",
  "移动安全",
  "数据安全",
  "密码安全"
];

const stats = [
  { title: "成立时间", value: "2020年3月" },
  { title: "研究方向", value: "8+" },
  { title: "CNVD上报", value: "20+" }
];

const cultureItems = [
  { icon: <AimOutlined />, title: "生生不息", text: "Green_Datura 寓意生生不息的希望，俱乐部希望在至诚延续、代代传承。" },
  { icon: <ExperimentOutlined />, title: "实战实践", text: "参与国家级、省级攻防演练、CTF 赛事与漏洞响应平台，把学习转化为真实安全能力。" },
  { icon: <TeamOutlined />, title: "校园守护", text: "在学院网信办老师协作下，参与维护学校网络安全。" }
];

export function TeamIntro() {
  return (
    <section id="intro" className="section intro-section">
      <div className="section-inner">
        <div className="section-heading">
          <Space className="section-kicker" size={8}>
            <BugOutlined />
            俱乐部简介
          </Space>
          <Title level={2}>富有活力的年轻安全团队</Title>
          <Paragraph>
            Green_Datura 团队于 2020 年成立，由福州大学至诚学院的网络安全爱好者组成，在计算机工程系支持下发展，并由黄巧云老师担任指导。
            团队长期参与攻防演练、CTF 赛事与校园网络安全维护。
          </Paragraph>
        </div>

        <Row gutter={[24, 24]} align="stretch">
          <Col xs={24} lg={14}>
            <Card className="intro-copy" variant="borderless" styles={{ body: { padding: 0 } }}>
              <Title level={3}>研究方向</Title>
              <Flex wrap="wrap" gap={10} className="tag-grid">
                {directions.map((item) => (
                  <Tag key={item} color="blue">
                    {item}
                  </Tag>
                ))}
              </Flex>
              <Paragraph>
                目前俱乐部成员研究方向包括但不限于 WEB 安全、渗透测试、漏洞挖掘、代码审计、二进制安全、移动安全、数据安全和密码安全等。团队曾向腾讯、美团、华为、
                微博、BOSS直聘、京东、58同城、百卓网络、星网锐捷、嘀嗒出行和厦门航空等平台报告漏洞，并在国家信息安全漏洞库（CNVD）上报超过 20 项。
              </Paragraph>
              <Flex vertical gap={14} className="culture-grid">
                {cultureItems.map((item) => (
                  <Card
                    className="culture-item"
                    key={item.title}
                    size="small"
                    variant="borderless"
                    styles={{ body: { padding: 0 } }}
                  >
                    <Flex gap={14} align="flex-start" className="culture-item-content">
                      <span className="culture-icon">{item.icon}</span>
                      <div>
                        <strong>{item.title}</strong>
                        <p>{item.text}</p>
                      </div>
                    </Flex>
                  </Card>
                ))}
              </Flex>
            </Card>
          </Col>
          <Col xs={24} lg={10}>
            <Card className="stats-panel" variant="borderless" styles={{ body: { padding: 0 } }}>
              <Flex vertical gap={16}>
                <Space className="stats-kicker" size={8}>
                  <CodeOutlined />
                  Club Profile
                </Space>
                {stats.map((item) => (
                  <Card
                    className="stat-tile"
                    key={item.title}
                    size="small"
                    variant="borderless"
                    styles={{ body: { padding: 0 } }}
                  >
                    <Flex align="center" className="stat-tile-content">
                      <Statistic title={item.title} value={item.value} />
                    </Flex>
                  </Card>
                ))}
              </Flex>
            </Card>
          </Col>
        </Row>
      </div>
    </section>
  );
}
