import type { Metadata } from "next";
import FarmerProviders from "@/components/farmer/FarmerProviders";

export const metadata: Metadata = {
  title: "Farmer Onboarding | AGNET Global",
  description:
    "Complete your AGNET farmer onboarding to access credit scoring, GIS mapping, and formal finance in Uzbekistan.",
  manifest: "/manifest.json",
};

export default function OnboardingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <FarmerProviders>
      <main className="min-h-screen relative" style={{ backgroundColor: "var(--page)" }}>
        <div className="relative z-10 max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16 lg:pt-24 lg:pb-20">
          <div className="mb-8 text-center">
            <a href="/">
              <img
                src="/agnet-global-logo.png"
                alt="AgNet Global"
                className="h-10 mx-auto mb-4"
              />
            </a>
          </div>
          {children}
        </div>

        <div
          className="absolute inset-0 -z-10 pointer-events-none"
          style={{ background: "linear-gradient(to bottom, var(--muted), var(--page))" }}
          aria-hidden
        >
          <div className="absolute inset-0 opacity-30 overflow-hidden">
            <div className="absolute top-0 left-1/3 w-[500px] h-[500px] rounded-full bg-green-deep/10 blur-[120px]" />
          </div>
        </div>
      </main>
    </FarmerProviders>
  );
}