import type {ReactNode} from 'react';
import clsx from 'clsx';
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';

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className="container">
        <Heading as="h1" className="hero__title">
          {siteConfig.title}
        </Heading>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/unterlagen/intro">
            Zu den Unterlagen
          </Link>
          <Link
            className="button button--primary button--lg"
            to="/berichte"
            style={{marginLeft: '1rem'}}>
            Berichte lesen
          </Link>
        </div>
      </div>
    </header>
  );
}

function FeatureCard({title, description, icon}: {title: string; description: string; icon: string}) {
  return (
    <div className="col col--4">
      <div className="card shadow--md margin-bottom--lg padding--lg" style={{height: '100%'}}>
        <div className="text--center">
          <div style={{fontSize: '3rem'}}>{icon}</div>
        </div>
        <div className="text--center margin-top--md">
          <h3>{title}</h3>
          <p>{description}</p>
        </div>
      </div>
    </div>
  );
}

function HomepageContent() {
  return (
    <>
      <section className="padding-vert--xl" style={{backgroundColor: 'var(--ifm-color-emphasis-100)'}}>
        <div className="container">
          <div className="row">
            <div className="col col--8 col--offset-2 text--center">
              <Heading as="h2" className="margin-bottom--md">
                Willkommen im digitalen Dorfarchiv Rössing
              </Heading>
              <p className="hero__subtitle">
                Rössing ist ein Dorf in der Gemeinde Nordstemmen im Landkreis Hildesheim.
                Dieses digitale Archiv bewahrt die Geschichte und Geschichten unseres Dorfes
                für kommende Generationen.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="padding-vert--xl">
        <div className="container">
          <div className="row">
            <FeatureCard
              icon="📚"
              title="Unterlagen durchstöbern"
              description="Historische Dokumente, Fotografien und Materialien zur Dorfgeschichte digital aufbereitet und leicht zugänglich."
            />
            <FeatureCard
              icon="📝"
              title="Berichte lesen"
              description="Geschichten, Chroniken und Berichte über das Leben im Dorf – von historischen Ereignissen bis zu aktuellen Entwicklungen."
            />
            <FeatureCard
              icon="🤝"
              title="Erinnerungen teilen"
              description="Tragen Sie eigene Beiträge zur Dorfgeschichte bei und helfen Sie mit, unser kollektives Gedächtnis zu bewahren."
            />
          </div>
        </div>
      </section>

      <section className="padding-vert--xl" style={{backgroundColor: 'var(--ifm-color-emphasis-100)'}}>
        <div className="container">
          <div className="row">
            <div className="col col--10 col--offset-1 text--center">
              <Heading as="h2" className="margin-bottom--lg">
                Ziel des Archivs
              </Heading>
              <div className="avatar avatar--vertical margin-bottom--lg">
                <div className="avatar__intro">
                  <p className="hero__subtitle">
                    Unser Ziel ist es, die reichhaltige Geschichte Rössings zu dokumentieren und
                    zugänglich zu machen. Von alten Fotografien über Zeitungsartikel bis hin zu
                    persönlichen Erinnerungen – jedes Dokument trägt dazu bei, das kollektive
                    Gedächtnis unseres Dorfes zu bewahren.
                  </p>
                </div>
              </div>
              <div className="margin-top--lg">
                <Link
                  className="button button--primary button--lg"
                  to="/unterlagen/intro">
                  Mehr erfahren
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default function Home(): ReactNode {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Willkommen`}
      description="Digitales Dorfarchiv Rössing - Geschichte und Geschichten aus Rössing bewahren">
      <HomepageHeader />
      <main>
        <HomepageContent />
      </main>
    </Layout>
  );
}