"use client";
import React from "react";
import { useRouter } from "next/navigation";
import "../app/globals.css";
import "../app/landing.css";

export default function Home() {
  const router = useRouter();

  const goToLogin = () => {
    router.push("/sign-in"); // Redirect to /sign-in
  };

  return (
    <div className="page bg-gradient">
      <div className="left">
        <div className="inner">
          <div className="overlay"></div>
          <header className="header">
            <h1 className="text-5xl">EstudiFlash</h1>
            <h3>Revolutionizing learning with AI-powered flashcards</h3>
            <button className="button mt-5" onClick={goToLogin}>
              Get Started
            </button>
          </header>
        </div>
      </div>
      <div className="right">

        <section className="mb-12 mt-5">
        <h2 className="text-3xl font-bold text-black-600 mb-6 text-center">How it works</h2>
          <div className="flex flex-col gap-4 mt-4">
            <div className="border border-gray-300 p-4 rounded-lg bg-gray-100">
              <h3 className="text-xl font-bold">1. Input Your Content</h3>
              <p>Upload your study materials to create custom flashcards.</p>
            </div>
            <div className="border border-gray-300 p-4 rounded-lg bg-gray-100 mt-4">
              <h3 className="text-xl font-bold">2. AI-Generated Flashcards</h3>
              <p>Our AI analyzes the content and generates flashcards tailored to your needs.</p>
            </div>
            <div className="border border-gray-300 p-4 rounded-lg bg-gray-100 mt-4">
              <h3 className="text-xl font-bold">3. Start Learning</h3>
              <p>Use the flashcards to study and track your progress through our app.</p>
            </div>
          </div>
        </section>
        <section className="text-center mb-12 mt-5">
          <h2 className="text-3xl font-bold text-black-600 mb-6">Gallery</h2>
          <div className="flex gap-4 overflow-x-auto">
            <img src="/images/gal2.png" alt="Flashcard example 1" className="w-80 h-auto rounded-lg shadow-lg"/>
            <img src="/images/gal.png" alt="Flashcard example 2" className="w-80 h-auto rounded-lg shadow-lg"/>
            <img src="/images/gal1.png" alt="Flashcard example 3" className="w-80 h-auto rounded-lg shadow-lg"/>
          </div>
        </section>
        <section>
          <h2 className="text-2xl font-bold text-black mt-8 text-center">Testimonials</h2>
          <div className="flex flex-col gap-4 mt-4">
            <blockquote className="border-l-4 border-blue-500 pl-4 italic">
              <p>"EstudiFlash transformed the way I study. The AI-powered flashcards are a game-changer!"</p>
              <footer>- Jane Doe</footer>
            </blockquote>
            <blockquote className="border-l-4 border-blue-500 pl-4 italic">
              <p>"An incredibly intuitive and effective tool for learning. Highly recommended!"</p>
              <footer>- John Smith</footer>
            </blockquote>
          </div>
        </section>
      </div>
    </div>
  );
}