import type { NextPage } from 'next'
import Head from 'next/head'
import Link from 'next/link'

const Home: NextPage = () => {
  return (
    <div>
      <Head>
        <title>Infohliadka - Ochrana pred problematickými zdrojmi</title>
        <meta name="description" content="Platforma na identifikáciu a monitorovanie problematických webových zdrojov" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main style={{ padding: '40px 20px', maxWidth: '800px', margin: '0 auto', textAlign: 'center' }}>
        <h1 style={{ fontSize: '2.5rem', marginBottom: '20px' }}>Infohliadka</h1>
        <p style={{ fontSize: '1.2rem', color: '#6b7280', marginBottom: '40px' }}>
          Platforma na ochranu pred hoaxmi, nenávistným prejavmi a dezinformáciami
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginTop: '40px' }}>
          <div style={{ padding: '30px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
            <h3>Nahlásiť obsah</h3>
            <p style={{ color: '#6b7280', margin: '15px 0' }}>
              Pomôžte nám identifikovať problematické stránky a obsah
            </p>
            <Link href="/report" style={{ 
              padding: '10px 20px', 
              backgroundColor: '#3b82f6', 
              color: 'white', 
              textDecoration: 'none', 
              borderRadius: '6px',
              display: 'inline-block'
            }}>
              Nahlásiť
            </Link>
          </div>

          <div style={{ padding: '30px', border: '1px solid #e5e7eb', borderRadius: '8px' }}>
            <h3>Admin panel</h3>
            <p style={{ color: '#6b7280', margin: '15px 0' }}>
              Správa hlásení a moderovanie obsahu
            </p>
            <Link href="/admin" style={{ 
              padding: '10px 20px', 
              backgroundColor: '#10b981', 
              color: 'white', 
              textDecoration: 'none', 
              borderRadius: '6px',
              display: 'inline-block'
            }}>
              Admin
            </Link>
          </div>
        </div>
      </main>
    </div>
  )
}

export default Home