import type { ReactNode } from 'react'
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
import Heading from '@theme/Heading'
import Layout from '@theme/Layout'
import styles from './index.module.css'

const topics = ['Clean', 'Focused', 'Reusable', 'Long-term']

export default function Home(): ReactNode {
  const { siteConfig } = useDocusaurusContext()

  return (
    <Layout
      title={siteConfig.title}
      description="oneao 的个人技术笔记和资料整理。"
    >
      <main className={styles.page}>
        <section className={styles.hero}>
          <div className="container">
            <div className={styles.heroInner}>
              <div className={styles.copy}>
                <div className={styles.brandLine}>
                  <img src="/img/logo.png" alt="" className={styles.logo} />
                  <span>oneao notes</span>
                </div>
                <Heading as="h1" className={styles.title}>
                  {siteConfig.title}
                </Heading>
                <p className={styles.subtitle}>
                  技术 · 笔记 · 记录
                </p>
                <p className={styles.description}>
                  一个保持简洁、方便回看的个人站点，用来沉淀日常记录、长期维护的资料和可复用的信息。
                </p>
                <div className={styles.topicRow} aria-label="笔记主题">
                  {topics.map(topic => (
                    <span key={topic}>{topic}</span>
                  ))}
                </div>
                <div className={styles.statusLine}>
                  <span />
                  <p>保持内容克制、结构清晰，方便之后快速回看。</p>
                </div>
              </div>

              <div className={styles.previewWrap}>
                <div className={styles.previewShadow} />
                <div className={styles.preview} aria-label="笔记预览">
                  <div className={styles.previewHeader}>
                    <span />
                    <span />
                    <span />
                    <strong>oneao.cn</strong>
                  </div>
                  <div className={styles.previewBody}>
                    <span className={styles.kicker}>Personal Archive</span>
                    <h2>整理、沉淀、回看</h2>
                    <p>
                      把零散信息收束成清晰页面，让每次查找都更直接。
                    </p>
                    <div className={styles.codeBlock}>
                      <span>clear structure</span>
                      <span>quiet interface</span>
                      <span>steady updates</span>
                    </div>
                    <div className={styles.noteLines}>
                      <span />
                      <span />
                      <span />
                      <span />
                    </div>
                    <div className={styles.noteFooter}>
                      <span>Notes</span>
                      <span>Archive</span>
                      <span>Review</span>
                    </div>
                  </div>
                </div>
                <div className={styles.miniCard}>
                  <strong>Simple Index</strong>
                  <div>
                    <span />
                    <span />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </Layout>
  )
}