import { Button } from './ui/button';
import { Calendar } from './ui/calendar';
import { Input } from './ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import foglalas from '@/public/foglalas.png';

function Foglalas() {
  return (
    <section id="foglalas" className="bg-slate-900 py-24 sm:py-32">
      <div className="container mx-auto grid grid-cols-1 items-center gap-12 px-6 lg:grid-cols-2">
        <div className="text-center lg:text-left">
          <h2 className="text-4xl font-bold tracking-tight text-amber-400">Foglaljon Asztalt</h2>
          <p className="mt-4 text-lg text-slate-300">
            Biztosítsa helyét egy felejthetetlen gasztronómiai élményhez. Örömmel látjuk vendégül!
          </p>
          <img
            src={foglalas}
            alt="Étterem belső"
            className="mt-8 rounded-lg shadow-2xl"
          />
        </div>
        <div className="rounded-lg bg-slate-950 p-8 shadow-2xl">
          <form className="space-y-6">
            <Input placeholder="Teljes Név" />
            <Input type="email" placeholder="Email Cím" />
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
              <Select>
                <SelectTrigger><SelectValue placeholder="Vendégek száma" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">1 fő</SelectItem>
                  <SelectItem value="2">2 fő</SelectItem>
                  <SelectItem value="3">3 fő</SelectItem>
                  <SelectItem value="4">4 fő</SelectItem>
                  <SelectItem value="5">5+ fő</SelectItem>
                </SelectContent>
              </Select>
              <Select>
                <SelectTrigger><SelectValue placeholder="Időpont" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="18:00">18:00</SelectItem>
                  <SelectItem value="19:00">19:00</SelectItem>
                  <SelectItem value="20:00">20:00</SelectItem>
                  <SelectItem value="21:00">21:00</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Calendar mode="single" className="rounded-md border border-slate-800" />
            <Button type="submit" size="lg" className="w-full bg-amber-500 text-slate-900 hover:bg-amber-400">
              Foglalás
            </Button>
          </form>
        </div>
      </div>
    </section>
  );
}

export default Foglalas;
