import Link from "next/link";

import { Globe } from "lucide-react";

import { APP_CONFIG } from "@/config/app-config";

import { RegisterForm } from "../_components/register-form";
import { GoogleButton, GitHubButton, MetaButton } from "../_components/social-buttons";

export default function RegisterV2() {
  return (
    <>

      <div className="mx-auto flex w-full flex-col justify-center space-y-8 sm:w-[400px] md:w-[450px] lg:w-[500px]">
        <div className="space-y-3 text-center">
          <div className="mb-2">
            <div className="mb-4 inline-flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
              <svg className="h-8 w-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
                />
              </svg>
            </div>
          </div>
          {/* <h1 className="text-3xl font-bold text-foreground">Créer votre compte</h1> */}
          <p className="text-muted-foreground text-base leading-relaxed">Rejoignez la coopérative COOP-CA AMIFOND</p>
        </div>

        <div className="space-y-4">
          {/* <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
            <span className="bg-background text-muted-foreground relative z-10 px-2">Or continue with</span>
          </div> */}
          <RegisterForm />

          <div className="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
            <span className="bg-background text-muted-foreground relative z-10 px-3 font-medium">
              Ou continuer avec
            </span>
          </div>
          <div className="grid grid-cols-3 gap-3">
            <GoogleButton className="h-11" />
            <GitHubButton className="h-11" />
            <MetaButton className="h-11" />
          </div>
        </div>

        {/* Navigation text moved here for better positioning */}
        <div className="text-center">
          <div className="text-muted-foreground text-sm">
            Already have an account?{" "}
            <Link className="text-foreground hover:underline" href="login">
              Login
            </Link>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="absolute bottom-5 flex w-full justify-between px-10">
        <div className="text-sm">{APP_CONFIG.copyright}</div>
        <div className="flex items-center gap-1 text-sm">
          <Globe className="text-muted-foreground size-4" />
          ENG
        </div>
      </div>
    </>
  );
}