import React from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import styles from './index.module.css';

function HomepageHeader() {
  return (
    <header className={styles.hero}>
      <div className={styles.heroInner}>
        <h1 className={styles.heroTitle}>👋 swallow</h1>
        <p className={styles.heroSubtitle}>
          AI・インフラ・開発が好きなエンジニア
        </p>
      </div>
    </header>
  );
}

function RecentTech() {
  const posts = [
    {
      title: "DGX SparkにAnythingLLMでローカルLLMエージェント構築",
      date: "2026-02-20",
      tag: "DGX Spark",
      url: "/tech/dgx-spark-anythingllm",
    },
    {
      title: 'DGX Spark デュアル構成ガイド',
      date: '2026-02-19',
      tag: 'DGX Spark',
      url: '/tech/dgx-spark-dual',
    },
    {
      title: 'DGX SparkでMiniMax-M2.5-REAP-172Bを動かす',
      date: '2026-02-18',
      tag: 'DGX Spark',
      url: '/tech/dgx-spark-minimax',
    },
  ];

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>💻 Tech</h2>
      <p className={styles.sectionDesc}>技術記事・検証レポート</p>
      <div className={styles.posts}>
        {posts.map((post, idx) => (
          <Link key={idx} to={post.url} className={styles.postCard}>
            <h3 className={styles.postTitle}>{post.title}</h3>
            <div className={styles.postMeta}>
              <span className={styles.postDate}>{post.date}</span>
              <span className={styles.postTag}>{post.tag}</span>
            </div>
          </Link>
        ))}
      </div>
      <Link to="/tech" className={styles.moreLink}>
        すべて見る →
      </Link>
    </section>
  );
}

function RecentBlog() {
  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>📝 Blog</h2>
      <p className={styles.sectionDesc}>日常の思考・情報収集</p>
      <div className={styles.posts}>
        <Link to="/blog/2026-02-19-headline" className={styles.postCard}><h3 className={styles.postTitle}>02/19 AIヘッドライン</h3><div className={styles.postMeta}><span className={styles.postDate}>2026-02-19</span><span className={styles.postTag}>AI</span></div></Link>
      </div>
      <Link to="/blog" className={styles.moreLink}>
        すべて見る →
      </Link>
    </section>
  );
}

function Works() {
  const works = [
    {
      name: 'Tundoc',
      description: 'ドキュメント管理ツール',
      url: 'https://tundoc.techswan.online/',
    },
  ];

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>🛠 Works</h2>
      <p className={styles.sectionDesc}>作ったもの</p>
      <div className={styles.works}>
        {works.map((work, idx) => (
          <a
            key={idx}
            href={work.url}
            target="_blank"
            rel="noopener noreferrer"
            className={styles.workCard}
          >
            <h3 className={styles.workName}>{work.name}</h3>
            <p className={styles.workDescription}>{work.description}</p>
          </a>
        ))}
      </div>
      <Link to="/works" className={styles.moreLink}>
        もっと見る →
      </Link>
    </section>
  );
}

export default function Home(): React.JSX.Element {
  return (
    <Layout
      title="ホーム"
      description="swallowの雑記。技術・思考・作ったもの。"
    >
      <main className={styles.main}>
        <HomepageHeader />
        <div className={styles.content}>
          <RecentTech />
          <RecentBlog />
          <Works />
        </div>
      </main>
    </Layout>
  );
}
