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

function HomePage() {
  return (
    <section className={styles.homeBanner}>
      <div className={styles.mainCard}>
        {/* Lado Esquerdo: Textos e Botões */}
        <div>
          <h1 className={styles.title}>
            Documentação do{" "}
            <span className={styles.titleHighlight}>Decoda</span>
          </h1>
          <p className={styles.description}>
            Encontre tudo que você precisa para usar, desenvolver e ensinar
            com o Decoda. Guias completos para desenvolvedores e educadores.
          </p>
          <div className={styles.actionButtons}>
            <Link to="/edu/intro" className={styles.button}>
              <i className="fas fa-graduation-cap"></i>
              <span>Guia do Educador</span>
            </Link>
            <Link to="/docs/docs/intro" className={styles.button}>
              <i className="fas fa-code"></i>
              <span>Guia do Desenvolvedor</span>
            </Link>
          </div>
        </div>
        
        {/* Lado Direito: Imagem */}
        <div>
          <img
            src="/docs/img/home.png"
            alt="Decoda"
            className={styles.homeImage}
          />
        </div>
      </div>
    </section>
  );
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <HomePage />
  );
}