import Link from "@docusaurus/Link"
import Layout from "@theme/Layout"
import clsx from "clsx"
import type { ReactNode } from "react"

import styles from "./index.module.css"

export default function Home(): ReactNode {
  return (
    <Layout
      title="effect-fc"
      description="Write React function components with Effect"
    >
      <main className={styles.page}>
        <section className={clsx("container", styles.hero)}>
          <p className={styles.eyebrow}>Effect for React function components</p>
          <h1>Write components as Effect programs.</h1>
          <p className={styles.lede}>
            effect-fc gives React 19 components access to Effect services,
            scopes, subscriptions, and async workflows without giving up normal
            React boundaries.
          </p>
          <div className={styles.actions}>
            <Link className="button button--primary button--lg" to="/docs/getting-started">
              Get Started
            </Link>
            <Link
              className="button button--secondary button--lg"
              to="https://github.com/Thiladev/effect-fc"
            >
              GitHub
            </Link>
          </div>
        </section>

        <section className={clsx("container", styles.cards)}>
          <article>
            <h2>Generator components</h2>
            <p>
              Use <code>Component.make</code> to yield Effects and return JSX
              from the same component body.
            </p>
          </article>
          <article>
            <h2>Runtime at the edge</h2>
            <p>
              Provide your app layer once with <code>ReactRuntime.Provider</code>
              and convert Effect-FC components at React boundaries.
            </p>
          </article>
          <article>
            <h2>Scoped lifecycles</h2>
            <p>
              Tie subscriptions and resources to component scopes so finalizers
              run when React unmounts.
            </p>
          </article>
        </section>
      </main>
    </Layout>
  )
}