'use client'

import { useState } from 'react'
import JourneyForm from './components/JourneyForm'
import DataPreview from './components/DataPreview'

export default function Home() {
  const [calculatedData, setCalculatedData] = useState(null)
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState(null)

  return (
    <main className="min-h-screen p-4 md:p-8 flex flex-col items-center justify-center">
      <div className="max-w-7xl w-full my-auto">
        <div className="text-center mb-10">
          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-full shadow-2xl mb-6">
            <svg className="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
          </div>
          <h1 className="text-5xl md:text-6xl font-bold text-white mb-4 drop-shadow-2xl">
            Kniha Jízd
          </h1>
          <p className="text-xl md:text-2xl text-white/95 font-medium drop-shadow-lg">
            Automatizovaný systém pro správu knihy jízd
          </p>
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
          <JourneyForm
            onDataCalculated={setCalculatedData}
            setLoading={setLoading}
            onFormDataChange={setFormData}
          />
          <DataPreview data={calculatedData} loading={loading} formData={formData} />
        </div>
      </div>
    </main>
  )
}
