import { type ReactNode } from "react";
import { Link } from "@tanstack/react-router";
import { BrandLogo } from "./brand-logo";
import { ShieldCheck, Sparkles, BarChart3 } from "lucide-react";

export function AuthLayout({
  title,
  subtitle,
  children,
  footer,
}: {
  title: string;
  subtitle?: string;
  children: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <div className="min-h-dvh grid lg:grid-cols-2 bg-background">
      <div className="flex flex-col px-6 sm:px-10 py-8">
        <div className="flex items-center justify-between">
          <BrandLogo />
          <Link to="/login" className="text-xs text-muted-foreground hover:text-foreground">
            Need help?
          </Link>
        </div>
        <div className="flex-1 flex items-center justify-center">
          <div className="w-full max-w-sm">
            <div className="mb-7">
              <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
              {subtitle && <p className="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>}
            </div>
            {children}
            {footer && (
              <div className="mt-6 text-center text-sm text-muted-foreground">{footer}</div>
            )}
          </div>
        </div>
        <div className="text-[11px] text-muted-foreground text-center">
          © {new Date().getFullYear()} VotersAlert · Verified Political Advertising Platform
        </div>
      </div>

      <div className="hidden lg:flex relative overflow-hidden bg-gradient-to-br from-primary via-primary/80 to-accent/60 text-primary-foreground p-12">
        <div className="absolute inset-0 bg-grid opacity-20" />
        <div className="absolute -top-24 -right-24 h-72 w-72 rounded-full bg-accent/40 blur-3xl" />
        <div className="absolute -bottom-24 -left-24 h-72 w-72 rounded-full bg-primary/60 blur-3xl" />
        <div className="relative flex flex-col justify-between w-full">
          <div className="inline-flex items-center gap-2 self-start rounded-full border border-white/20 bg-white/10 backdrop-blur px-3 py-1 text-[11px]">
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-300 animate-pulse" />
            AI-Powered Political Ad Booking
          </div>
          <div>
            <h2 className="text-4xl font-semibold leading-tight tracking-tight">
              Reach voters with precision.
              <br />
              Stay compliant by default.
            </h2>
            <p className="mt-4 text-sm text-primary-foreground/80 max-w-md">
              Launch multi-channel outreach to consent-based supporters segmented by State, LGA, and
              Ward — with built-in AI content and approval workflows.
            </p>
            <div className="mt-8 grid gap-3 max-w-md">
              {[
                {
                  icon: Sparkles,
                  t: "AI Content Studio",
                  d: "Draft, translate, and optimize political messages in seconds.",
                },
                {
                  icon: ShieldCheck,
                  t: "Compliance built-in",
                  d: "Automated INEC & platform policy review on every campaign.",
                },
                {
                  icon: BarChart3,
                  t: "Real-time analytics",
                  d: "Track reach, sentiment, and conversion across every channel.",
                },
              ].map((f) => (
                <div
                  key={f.t}
                  className="flex gap-3 rounded-xl bg-white/10 backdrop-blur border border-white/15 p-3"
                >
                  <div className="h-9 w-9 rounded-lg bg-white/15 grid place-items-center shrink-0">
                    <f.icon className="h-4 w-4" />
                  </div>
                  <div>
                    <div className="text-sm font-medium">{f.t}</div>
                    <div className="text-[12px] text-primary-foreground/75">{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="text-[11px] text-primary-foreground/70">
            Trusted by verified advertisers across 36 states.
          </div>
        </div>
      </div>
    </div>
  );
}