"use client";

import { Button, Card, Flex, Image, Space, Typography } from "antd";
import { LinkOutlined, WechatOutlined } from "@ant-design/icons";

const { Paragraph, Title } = Typography;

const WECHAT_URL =
  "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg4NDY5NjIyNw==#wechat_redirect";

export function WeChatSection() {
  return (
    <section id="wechat" className="section wechat-section">
      <Flex className="section-inner wechat-inner" align="center" gap={54}>
        <div className="wechat-copy">
          <Space className="section-kicker" size={8}>
            <WechatOutlined />
            微信公众号
          </Space>
          <Title level={2}>关注招新通知与技术分享</Title>
          <Paragraph>
            欢迎关注 Green_Datura 微信公众号，获取比赛资讯、技术分享、招新通知以及团队动态。俱乐部每年面向大一、大二招新，欢迎对网络安全感兴趣并愿意投入时间精力的同学加入。
          </Paragraph>
          <Button
            type="primary"
            size="large"
            href={WECHAT_URL}
            target="_blank"
            rel="noopener noreferrer"
            icon={<LinkOutlined />}
          >
            关注公众号
          </Button>
        </div>

        <Card
          className="wechat-card"
          aria-label="微信公众号二维码"
          variant="borderless"
          styles={{ body: { padding: 0 } }}
        >
          <Flex vertical align="center" gap={16}>
            <Image
              src="/assets/green-datura-wechat-qrcode.png"
              alt="Green_Datura 微信公众号二维码"
              width={238}
              preview={false}
              className="wechat-qrcode-image"
            />
            <span>扫码访问公众号入口</span>
          </Flex>
        </Card>
      </Flex>
    </section>
  );
}
