"use client";

import { ArrowRightOutlined } from "@ant-design/icons";
import { Anchor, Button, Card, Flex, Layout, Space, Typography } from "antd";
import type { AnchorProps } from "antd";
import { Honors } from "@/components/Honors";
import { TeamIntro } from "@/components/TeamIntro";
import { WeChatSection } from "@/components/WeChatSection";

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

const navItems: AnchorProps["items"] = [
  { key: "home", href: "#home", title: "首页" },
  { key: "intro", href: "#intro", title: "俱乐部简介" },
  { key: "honors", href: "#honors", title: "荣誉成果" },
  { key: "wechat", href: "#wechat", title: "微信公众号" }
];

export default function Home() {
  return (
    <Layout className="site-shell">
      <Header className="site-header">
        <a className="brand" href="#home" aria-label="Green_Datura 首页">
          <img className="brand-logo" src="/assets/green-datura-logo-mark.png" alt="" />
          <span>Green_Datura</span>
        </a>
        <Anchor
          affix={false}
          direction="horizontal"
          targetOffset={76}
          items={navItems}
          className="site-anchor"
        />
      </Header>

      <Content>
        <section id="home" className="hero-section">
          <div className="hero-inner">
            <Card className="hero-copy" variant="borderless" styles={{ body: { padding: 0 } }}>
              <Space className="hero-kicker" size={8}>
                <img className="kicker-logo" src="/assets/green-datura-logo-mark.png" alt="" />
                福州大学至诚学院
              </Space>
              <Title className="hero-title">Green_Datura</Title>
              <Paragraph className="hero-text">
                成立于 2020 年 3 月的至诚学院网络安全俱乐部，寓意生生不息的希望，面向 CTF、漏洞挖掘与校园安全实践持续成长。
              </Paragraph>
              <Flex gap={12} wrap="wrap" className="hero-actions">
                <Button type="primary" size="large" href="#intro" icon={<ArrowRightOutlined />}>
                  了解俱乐部
                </Button>
                <Button size="large" href="#honors" className="hero-secondary-button">
                  查看荣誉
                </Button>
              </Flex>
            </Card>
          </div>
        </section>

        <TeamIntro />
        <Honors />
        <WeChatSection />
      </Content>

      <Footer className="site-footer">Green_Datura · 生生不息，代代传承</Footer>
    </Layout>
  );
}
