import type { ReactNode } from "react";
import { Link } from "@tanstack/react-router";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PublicFooter } from "@/components/public-footer";
import { PublicSiteHeader } from "@/components/public-site-header";

export function PublicPageLayout({
  activePath,
  eyebrow,
  title,
  description,
  children,
}: {
  activePath: string;
  eyebrow: string;
  title: string;
  description: string;
  children: ReactNode;
}) {
  return (
    <div className="min-h-screen bg-background">
      <PublicSiteHeader activePath={activePath} />
      <main>
        <section className="relative isolate overflow-hidden border-b border-border bg-muted/50">
          <div className="pointer-events-none absolute -right-16 -top-28 -z-10 h-80 w-80 rounded-full bg-primary/10 blur-3xl" aria-hidden="true" />
          <div className="container mx-auto max-w-7xl px-5 py-16 sm:px-8 sm:py-20 lg:py-24">
            <div className="max-w-3xl">
              <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-primary">
                <span className="h-1.5 w-1.5 rounded-full bg-accent" aria-hidden="true" />
                {eyebrow}
              </p>
              <h1 className="mt-4 font-display text-4xl font-bold leading-tight tracking-tight sm:text-5xl lg:text-6xl">{title}</h1>
              <p className="mt-5 max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">{description}</p>
            </div>
          </div>
        </section>
        {children}
      </main>
      <section className="border-t border-border bg-secondary/50">
        <div className="container mx-auto flex max-w-7xl flex-col gap-5 px-5 py-9 sm:flex-row sm:items-center sm:justify-between sm:px-8">
          <div>
            <h2 className="font-display text-xl font-semibold">Ready to reach your customers?</h2>
            <p className="mt-1 text-sm text-muted-foreground">Start with Gatavase Bulky SMS or talk to our Kampala support team.</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Button asChild><Link to="/auth">Get started <ArrowRight className="h-4 w-4" /></Link></Button>
            <Button asChild variant="outline"><Link to="/contact">Talk to us</Link></Button>
          </div>
        </div>
      </section>
      <PublicFooter />
    </div>
  );
}