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

const areas = [
  ['User Tutorial', '/tutorial/', 'Navigate the first 3D architecture model.'],
  ['Scope', '/scope/overview/', 'Review the approved Epic catalogue and governed product state.'],
  ['Architecture', '/architecture/', 'See the browser POC shape and responsibilities.'],
  ['Kanban', '/kanban/', 'Open the Board, then review current Focus.'],
  ['Ways Of Working', '/ways-of-working/', 'Follow team and delivery practices.'],
  ['Engineering', '/engineering/', 'Prepare the implementation path.'],
  ['Glossary', '/glossary/', 'Start with shared Terms and project language.'],
] as const;
const marker = '3DARCH-PORTAL-KICKOFF-2026-08-31';

export default function Home(): ReactNode {
  return <Layout title="Home" description="3D Architecture Wizzard project documentation portal">
    <main data-deployment-marker={marker}>
      <section className={styles.hero}>
        <div className="container">
          <p className={styles.eyebrow}>KICKOFF · {marker}</p>
          <Heading as="h1">Architecture you can walk through.</Heading>
          <p className={styles.lede}>3D Architecture Wizzard is an interactive 3D application for exploring, designing, and communicating software and system architecture.</p>
          <div className={styles.actions}><Link className="button button--primary button--lg" to="/tutorial/">Start the tutorial</Link><Link className="button button--secondary button--lg" to="/architecture/">Explore architecture</Link></div>
        </div>
      </section>
      <section className={styles.snapshot} aria-labelledby="delivery-heading"><div className="container">
        <Heading as="h2" id="delivery-heading">Initial delivery snapshot</Heading>
        <div className={styles.facts}>
          <article><span>Status</span><strong>Kickoff</strong><p>Foundation portal and browser POC definition.</p></article>
          <article><span>Initial deliverable</span><strong>Navigable browser POC</strong><p>Visualize one architecture model in interactive 3D.</p></article>
          <article><span>Lead / team</span><strong>Linas · 3darch team</strong><p>Product direction, architecture, and delivery.</p></article>
        </div>
      </div></section>
      <section className={styles.areas} aria-labelledby="areas-heading"><div className="container">
        <Heading as="h2" id="areas-heading">Project documentation</Heading>
        <div className={styles.grid}>{areas.map(([label,to,description], index)=><Link className={styles.card} to={to} key={to}><span>{String(index+1).padStart(2,'0')}</span><Heading as="h3">{label}</Heading><p>{description}</p><b>Open area →</b></Link>)}</div>
      </div></section>
      <section className={styles.links} aria-labelledby="links-heading"><div className="container">
        <Heading as="h2" id="links-heading">Work with the project</Heading>
        <div className={styles.linkRow}>
          <a href="https://gitea.lego-cloud.eu/corp-v1-3darch/corp-v1-3darch">Application repository ↗</a>
          <a href="https://pages.apps.lego-cloud.eu/corp-v1/portal/projects/3darch/">Board record ↗</a>
          <a href="https://gitea.lego-cloud.eu/corp-v1-3darch/corp-v1-3darch-documentation/src/branch/test/README.md">README ↗</a>
          <a href="https://gitea.lego-cloud.eu/corp-v1-3darch-skills-code-agent/documentation-docusaurus--3darch">Project skill ↗</a>
        </div>
      </div></section>
    </main>
  </Layout>;
}