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

const categories = [
  {
    title: 'Getting Started',
    icon: '🚀',
    description: 'Set up your development environment and get ready to contribute to TrizTech projects.',
    link: '/docs/getting-started/environment-setup',
  },
  {
    title: 'Workflow & Processes',
    icon: '🔄',
    description: 'Our standard development workflow — from task assignment through branching, rebasing, and merging.',
    link: '/docs/workflow/task-workflow',
  },
];

function CategoryCard({title, icon, description, link}) {
  return (
    <Link to={link} className={styles.card}>
      <div className={styles.cardIcon}>{icon}</div>
      <Heading as="h3" className={styles.cardTitle}>{title}</Heading>
      <p className={styles.cardDescription}>{description}</p>
      <span className={styles.cardArrow}>Explore →</span>
    </Link>
  );
}

function HeroSection() {
  return (
    <div className={styles.hero}>
      <div className={styles.heroGlow} />
      <div className={styles.heroContent}>
        <span className={styles.heroBadge}>Internal Documentation</span>
        <Heading as="h1" className={styles.heroTitle}>
          TrizTech<br />
          <span className={styles.heroTitleAccent}>Engineering Docs</span>
        </Heading>
        <p className={styles.heroSubtitle}>
          The single source of truth for onboarding, workflows, standards, and
          everything the engineering team needs — all in one place.
        </p>
        <div className={styles.heroActions}>
          <Link className={styles.heroPrimary} to="/docs/getting-started/environment-setup">
            Browse Documentation
          </Link>
        </div>
      </div>
    </div>
  );
}

function CategoriesSection() {
  return (
    <section className={styles.categories}>
      <div className="container">
        <div className={styles.categoriesHeader}>
          <Heading as="h2" className={styles.categoriesTitle}>
            Documentation
          </Heading>
          <p className={styles.categoriesSubtitle}>
            Quick access to every section of our knowledge base.
          </p>
        </div>
        <div className={styles.categoriesGrid}>
          {categories.map((cat) => (
            <CategoryCard key={cat.title} {...cat} />
          ))}
        </div>
      </div>
    </section>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title="Home"
      description="TrizTech internal engineering documentation — onboarding, workflows, standards, and reference.">
      <HeroSection />
      <main>
        <CategoriesSection />
      </main>
    </Layout>
  );
}