import React, { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Calendar } from "@/components/ui/calendar"; import { Globe, Instagram, MapPin } from "lucide-react";

const LANGUAGES = { ru: { greeting: "Привет! Меня интересует тур:", language: "Русский", direction: "Направления", city: "Город", food: "Тип питания", nights: "Сколько ночей", date: "Дата вылета", adults: "Количество взрослых", children: "Количество детей", ages: "Возраст детей", agesNote: "Некоторые отели считают детей после 12 лет взрослыми.", included: "Что входит в стоимость тура:", flight: "Авиаперелёт", hotel: "Проживание в отеле", meal: "Тип питания", transfer: "Трансфер: аэропорт – отель – аэропорт", insurance: "Медицинская страховка", agencyTransfer: "Трансфер от вашего дома до вокзала или до аэропорта", gift: "Подарок от нашего агентства", confirm: "Подтвердить" }, kz: { greeting: "Сәлем! Мені тур қызықтырады:", language: "Қазақша", direction: "Бағыттар", city: "Қала", food: "Тамақтану түрі", nights: "Неше түн", date: "Ұшу күні", adults: "Ересектер саны", children: "Балалар саны", ages: "Балалардың жасы", agesNote: "Кейбір қонақ үйлер 12 жастан асқан балаларды ересек деп санайды.", included: "Тур бағасына кіретіндер:", flight: "Ұшақ билеті", hotel: "Қонақ үйде тұру", meal: "Тамақтану түрі", transfer: "Трансфер: әуежай – қонақ үй – әуежай", insurance: "Медициналық сақтандыру", agencyTransfer: "Үйден вокзалға немесе әуежайға трансфер", gift: "Біздің агенттіктен сыйлық", confirm: "Растау" } };

export default function TravelForm() { const [lang, setLang] = useState("ru"); const t = LANGUAGES[lang];

const [formData, setFormData] = useState({ direction: "", city: "", food: "", nights: "", date: new Date(), adults: 1, children: 0, ages: "" });

const handleChange = (field, value) => { setFormData({ ...formData, [field]: value }); };

const handleSubmit = () => { const message = https://wa.me/77066770010?text=${encodeURIComponent( ${t.greeting} ${t.direction}: ${formData.direction} ${t.city}: ${formData.city} ${t.food}: ${formData.food} ${t.nights}: ${formData.nights} ночей ${t.date}: ${formData.date.toLocaleDateString()}\n${t.adults}: ${formData.adults}\n${t.children}: ${formData.children}\n${t.ages}: ${formData.ages} )}; window.open(message, "_blank"); };

return ( <div className="min-h-screen bg-cover bg-center flex flex-col items-center justify-start p-4" style={{ backgroundImage: "url('/hawaii-background.jpg')" }}> <h1 className="text-4xl font-bold text-white mt-6 mb-4" style={{ fontFamily: "Times New Roman" }}>FUN&SUN QYZYLORDA</h1>

<Card className="bg-white/70 backdrop-blur-md p-6 w-full max-w-xl space-y-4">
    <CardContent className="grid grid-cols-2 gap-2">
      <Button onClick={() => setLang("ru")}>Русский</Button>
      <Button onClick={() => setLang("kz")}>Қазақша</Button>
    </CardContent>
    <Input placeholder={t.direction} value={formData.direction} onChange={(e) => handleChange("direction", e.target.value)} />
    <Input placeholder={t.city} value={formData.city} onChange={(e) => handleChange("city", e.target.value)} />
    <Input placeholder={t.food} value={formData.food} onChange={(e) => handleChange("food", e.target.value)} />
    <Input placeholder={t.nights} type="number" value={formData.nights} onChange={(e) => handleChange("nights", e.target.value)} />
    <Calendar mode="single" selected={formData.date} onSelect={(date) => handleChange("date", date)} />
    <Input placeholder={t.adults} type="number" value={formData.adults} onChange={(e) => handleChange("adults", e.target.value)} />
    <Input placeholder={t.children} type="number" value={formData.children} onChange={(e) => handleChange("children", e.target.value)} />
    <label className="text-sm text-gray-700">{t.agesNote}</label>
    <Input placeholder={t.ages} value={formData.ages} onChange={(e) => handleChange("ages", e.target.value)} />

    <div className="text-sm mt-2">
      <p>{t.included}</p>
      <ul className="list-disc list-inside">
        <li>{t.flight}</li>
        <li>{t.hotel}</li>
        <li>{t.meal}</li>
        <li>{t.transfer}</li>
        <li>{t.insurance}</li>
        <li>{t.agencyTransfer}</li>
        <li>{t.gift}</li>
      </ul>
    </div>

    <div className="flex justify-between mt-4">
      <a href="https://www.instagram.com/funsun_turan?igsh=NTc4MTIwNjQ2YQ==" target="_blank" rel="noopener noreferrer">
        <Instagram className="text-pink-600 w-6 h-6" />
      </a>
      <a href="https://2gis.kz/kyzylorda/geo/70000001069290680" target="_blank" rel="noopener noreferrer">
        <MapPin className="text-green-600 w-6 h-6" />
      </a>
    </div>

    <Button className="w-full mt-4" onClick={handleSubmit}>{t.confirm}</Button>
  </Card>
</div>

); }