import { Link } from '@tanstack/react-router'
import { Menu } from 'lucide-react'
import { useState, type ReactNode } from 'react'
import { Brand } from './brand'
import { Button } from '@/components/ui/button'
const links=[['Platform','/platform'],['Solutions','/solutions'],['Intelligence','/ai-intelligence'],['Pricing','/pricing'],['Resources','/resources'],['Roadmap','/roadmap'],['Company','/company']] as const
export function PublicLayout({children}:{children:ReactNode}){
 const [open,setOpen]=useState(false)
 return <div className="min-h-screen bg-background text-foreground"><header className="sticky top-0 z-40 border-b border-border/80 bg-background/95 backdrop-blur"><div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-5 lg:px-8"><Brand/><nav className="hidden items-center gap-7 lg:flex">{links.map(([l,to])=><Link key={to} to={to} className="text-[13px] font-medium text-muted-foreground hover:text-foreground">{l}</Link>)}</nav><div className="hidden items-center gap-2 sm:flex"><Button variant="ghost" size="sm" asChild><Link to="/auth" search={{mode:'signin'}}>Sign In</Link></Button><Button variant="outline" size="sm" asChild><Link to="/request-demo">Request Demo</Link></Button><Button size="sm" asChild><Link to="/auth" search={{mode:'signup'}}>Create Account</Link></Button></div><Button variant="ghost" size="icon" className="sm:hidden" aria-label="Open menu" onClick={()=>setOpen(!open)}><Menu className="size-5"/></Button></div>{open&&<nav className="border-t border-border px-5 py-4 sm:hidden">{links.map(([l,to])=><Link key={to} to={to} onClick={()=>setOpen(false)} className="block py-2.5 text-sm">{l}</Link>)}<div className="mt-3 grid grid-cols-2 gap-2"><Button variant="outline" asChild><Link to="/auth" search={{mode:'signin'}}>Sign In</Link></Button><Button asChild><Link to="/auth" search={{mode:'signup'}}>Create Account</Link></Button></div></nav>}</header>{children}<Footer/></div>
}
function Footer(){return <footer className="border-t border-border bg-panel"><div className="mx-auto grid max-w-7xl gap-10 px-5 py-12 md:grid-cols-[1.4fr_repeat(3,1fr)] lg:px-8"><div><Brand compact/><p className="mt-4 max-w-xs text-sm leading-6 text-muted-foreground">Financial intelligence for businesses that need a clearer view of what they are owed.</p><p className="mt-5 font-mono text-[11px] uppercase tracking-[0.12em] text-muted-foreground">Enugu, Nigeria</p></div><FooterCol title="Product" links={[['Platform','/platform'],['Solutions','/solutions'],['Intelligence','/ai-intelligence'],['Pricing','/pricing'],['Roadmap','/roadmap'],['Request Demo','/request-demo']]}/><FooterCol title="Company" links={[['Company','/company'],['Resources','/resources'],['Security','/security'],['Contact','/contact']]}/><FooterCol title="Legal" links={[['Privacy','/privacy'],['Terms','/terms'],['Sign In','/auth'],['Create Account','/auth']]}/></div><div className="border-t border-border"><div className="mx-auto flex max-w-7xl justify-between px-5 py-5 font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground lg:px-8"><span>© 2026 DueWise</span><span>Built in Enugu</span></div></div></footer>}
function FooterCol({title,links}:{title:string,links:readonly (readonly [string,string])[]}){return <div><h3 className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">{title}</h3><div className="mt-4 space-y-3">{links.map(([l,to])=><Link key={`${l}-${to}`} to={to as '/'} className="block text-sm hover:text-primary">{l}</Link>)}</div></div>}
