// Main app — page router + state
const App = () => {
  const [tweaks, setTweak] = useTweaks(ENG_TWEAKS);
  const [page, setPage] = React.useState("home");
  const [lang, setLang] = React.useState("tr");
  const [ccy, setCcy] = React.useState("TRY");

  const today = new Date();
  const tomorrow = new Date(today.getTime() + 86400000);
  const tmwISO = tomorrow.toISOString().slice(0, 10);
  const ret = new Date(today.getTime() + 86400000 * 8);
  const retISO = ret.toISOString().slice(0, 10);

  const [query, setQuery] = React.useState({
    trip: "oneway",
    from: ANTALYA_LOCATIONS[0],
    to: ANTALYA_LOCATIONS[1],
    pickupDate: tmwISO,
    pickupTime: "14:30",
    returnDate: retISO,
    returnTime: "10:00",
    adults: 2,
    children: 0,
  });

  const [selectedVehicle, setSelectedVehicle] = React.useState(null);
  const [reservationResult, setReservationResult] = React.useState(null);

  const nav = (p) => { setPage(p); window.scrollTo(0, 0); };
  const onSearch = () => nav("results");
  const onSelect = v => { setSelectedVehicle(v); nav("booking"); };
  const onContinueToPay = (result) => { setReservationResult(result); nav("payment"); };
  const onConfirmPay = () => nav("success");
  const onHome = () => nav("home");

  const styleOverrides = `
    :root {
      --navy-900: ${tweaks.navy};
      --blue: ${tweaks.blueAccent};
      --red: ${tweaks.red};
    }
  `;
  const radiusKey = tweaks.radius < 8 ? "0" : tweaks.radius > 18 ? "2" : "1";

  return (
    <div className="eng-app" data-radius={radiusKey}>
      <style>{styleOverrides}</style>
      <Header lang={lang} setLang={setLang} ccy={ccy} setCcy={setCcy} page={page} setPage={nav}/>

      {page === "home" && (
        <HomePage lang={lang} ccy={ccy} query={query} setQuery={setQuery} onSearch={onSearch}
                  heroVariant={tweaks.heroVariant} onNav={nav}/>
      )}
      {page === "results" && (
        <ResultsPage lang={lang} ccy={ccy} query={query} setQuery={setQuery} onSearch={onSearch} onSelect={onSelect}/>
      )}
      {page === "booking" && (
        <BookingPage lang={lang} ccy={ccy} query={query} vehicle={selectedVehicle}
                     onContinue={onContinueToPay} onBack={() => nav("results")}/>
      )}
      {page === "payment" && (
        <PaymentPage lang={lang} ccy={ccy} query={query} vehicle={selectedVehicle}
                     onConfirm={onConfirmPay} onBack={() => nav("booking")}/>
      )}
      {page === "success" && (
        <SuccessPage lang={lang} ccy={ccy} query={query} vehicle={selectedVehicle}
                     reservationResult={reservationResult} onHome={onHome}/>
      )}
      {page === "about" && (
        <AboutPage lang={lang} ccy={ccy} onSearch={onSearch} onContact={() => nav("contact")}/>
      )}
      {page === "contact" && (
        <ContactPage lang={lang} ccy={ccy} onSearch={onSearch}/>
      )}
      {page === "privacy" && (
        <PrivacyPage onNav={nav}/>
      )}
      {page === "terms" && (
        <TermsPage onNav={nav}/>
      )}
      {page === "cancellation" && (
        <CancellationPage onNav={nav}/>
      )}
      {page === "kvkk" && (
        <KvkkPage onNav={nav}/>
      )}

      <Footer lang={lang} setPage={nav}/>
      <WhatsAppFab/>
      <MobileBottomNav page={page} setPage={nav}/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Sayfa Geçişi">
          <TweakSelect label="Aktif sayfa" value={page} onChange={v => nav(v)}
            options={[
              { value: "home",    label: "Ana Sayfa" },
              { value: "results", label: "Araç Listeleme" },
              { value: "booking", label: "Rezervasyon" },
              { value: "payment", label: "Ödeme" },
              { value: "success", label: "Onay" },
              { value: "about",        label: "Hakkımızda" },
              { value: "contact",      label: "İletişim" },
              { value: "privacy",      label: "Gizlilik Politikası" },
              { value: "terms",        label: "Kullanım Şartları" },
              { value: "cancellation", label: "İptal Politikası" },
              { value: "kvkk",         label: "KVKK" },
            ]}/>
          <TweakButton onClick={() => {
            setSelectedVehicle({ id: "vip", cat: "vip", catLabel: "VIP CAR", name: "VIP Premium Transfer",
              model: "Mercedes E-Class W213", pax: 3, bag: 3, doors: 4, priceTry: 2400,
              apiId: null, features: ["Premium Deri","Wi-Fi","Su & Atıştırmalık","Karşılama"] });
          }}>Test aracı seç (VIP)</TweakButton>
        </TweakSection>
        <TweakSection title="Hero Stili">
          <TweakRadio value={tweaks.heroVariant} onChange={v => setTweak("heroVariant", v)}
            options={[{value:"split",label:"Split"},{value:"full",label:"Centered"},{value:"photo",label:"Photo"}]}/>
        </TweakSection>
        <TweakSection title="Renk Paleti">
          <TweakColor label="Navy / Header" value={tweaks.navy} onChange={v => setTweak("navy", v)}/>
          <TweakColor label="Blue Accent" value={tweaks.blueAccent} onChange={v => setTweak("blueAccent", v)}/>
          <TweakColor label="Kırmızı (CTA)" value={tweaks.red} onChange={v => setTweak("red", v)}/>
        </TweakSection>
        <TweakSection title="Düzen">
          <TweakSlider label="Köşe yuvarlaklığı" min={0} max={28} step={2} value={tweaks.radius}
                       onChange={v => setTweak("radius", v)} unit="px"/>
        </TweakSection>
        <TweakSection title="Dil & Para">
          <TweakRadio value={lang} onChange={v => setLang(v)}
            options={[{value:"tr",label:"TR"},{value:"en",label:"EN"},{value:"de",label:"DE"},{value:"ru",label:"RU"}]}/>
          <TweakRadio value={ccy} onChange={v => setCcy(v)}
            options={[{value:"TRY",label:"₺ TRY"},{value:"EUR",label:"€ EUR"},{value:"USD",label:"$ USD"},{value:"GBP",label:"£ GBP"}]}/>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);