"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";
import { InstallSetupPanel } from "./install-setup-panel";
import { BrandLogo } from "./brand-logo";

export function InstallSetupShell() {
  const [client] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            retry: 1,
            staleTime: 20_000,
          },
        },
      })
  );

  return (
    <QueryClientProvider client={client}>
      <main className="min-h-screen bg-[radial-gradient(circle_at_top_left,rgba(240,253,244,0.95),rgba(255,255,255,0.96)_34%,rgba(239,246,255,0.98)_100%)] px-4 py-6 md:px-6 md:py-8">
        <div className="mx-auto grid max-w-7xl gap-6">
          <header className="grid gap-4 rounded-xl border border-slate-200/80 bg-white/90 p-6 shadow-soft md:grid-cols-[1fr_auto] md:items-center">
            <div>
              <BrandLogo subtitle="Install guide" />
              <h1 className="mt-4 text-3xl font-black text-slate-950">Installable webmail setup</h1>
              <p className="mt-2 max-w-3xl text-sm leading-7 text-slate-600">
                Pick one edition, fill the webmail host and Mail Server connection, then deploy the packaged build on the customer server.
              </p>
            </div>
            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-600">
              White-label webmail for existing mail-server installations.
            </div>
          </header>

          <InstallSetupPanel />
        </div>
      </main>
    </QueryClientProvider>
  );
}
