import React from 'react';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import styles from './index.module.css';
import recentPosts from '../data/recent-posts.json';

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

function RecentTech() {
  const posts = recentPosts.tech;

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>// Tech</h2>
      <p className={styles.sectionDesc}>技術記事・検証レポート</p>
      <div className={styles.posts}>
        {posts.length > 0 ? 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>
        )) : <p>記事がまだありません。</p>}
      </div>
      <Link to="/tech" className={styles.moreLink}>
        すべて見る →
      </Link>
    </section>
  );
}

function RecentBlog() {
  const posts = recentPosts.blog;

  return (
    <section className={styles.section}>
      <h2 className={styles.sectionTitle}>// Blog</h2>
      <p className={styles.sectionDesc}>日常の思考・情報収集</p>
      <div className={styles.posts}>
        {posts.length > 0 ? 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>
        )) : <p>記事がまだありません。</p>}
      </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} ${styles.sectionWorks}`}>
      <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}>
          <div className={styles.twoCol}>
            <RecentTech />
            <RecentBlog />
          </div>
          <Works />
        </div>
      </main>
    </Layout>
  );
}
