import { createFileRoute, Link } from '@tanstack/react-router'
import { Check } from 'lucide-react'
import { PublicLayout } from '@/components/duewise/public-layout'
import { PageHero } from '@/components/duewise/page-hero'
import { Button } from '@/components/ui/button'

const plans = [
  { name: 'Essentials', price: '$39', unit: 'per month', body: 'For teams bringing structure to invoicing and collections.', features: ['Invoices and customer records', 'Payment tracking', 'Receivables ageing reports', '30-day cash-flow view', 'Email support'], cta: 'Create Account', to: '/auth' as const },
  { name: 'Professional', price: '$129', unit: 'per month', body: 'For finance teams reviewing payments and planning cash every week.', features: ['Everything in Essentials', 'Transaction review queue in development', 'Early Intelligence indicators', '7/30/90-day cash-flow views', 'Role-based permissions', 'Priority support'], cta: 'Request Demo', to: '/request-demo' as const, featured: true },
  { name: 'Enterprise', price: 'Custom', unit: 'contact us', body: 'For organisations with multiple entities, higher volumes, and review requirements.', features: ['Everything in Professional', 'Workspace planning', 'Export planning', 'Integration readiness review', 'Dedicated account contact'], cta: 'Talk to us', to: '/contact' as const },
]
const faqs = [
  ['Is there a setup fee?', 'No. Plans are billed monthly in USD, with annual billing available on request.'],
  ['Can we change plans later?', 'Yes. Move between plans as your team grows; changes apply from the next billing period.'],
  ['What counts as a user?', 'Anyone with a login to your workspace, regardless of role.'],
]

export const Route = createFileRoute('/pricing')({
  head: () => ({ meta: [
    { title: 'Pricing — DueWise' },
    { name: 'description', content: 'Clear USD pricing for DueWise receivables, payment review and cash-flow tools.' },
    { property: 'og:title', content: 'Pricing — DueWise' },
    { property: 'og:description', content: 'USD plans for modern finance teams.' },
    { property: 'og:type', content: 'website' }, { name: 'twitter:card', content: 'summary_large_image' },
  ] }),
  component: Pricing,
})

function Pricing() {
  return <PublicLayout><main>
    <PageHero eyebrow="Pricing" title="Straightforward plans, billed in USD." body="Choose the level of control your finance team needs. Every plan includes secure access, role-based workspaces, and company-scoped records." />
    <section className="mx-auto max-w-7xl px-5 py-14 md:py-20 lg:px-8"><div className="grid gap-6 lg:grid-cols-3">{plans.map(p => <article key={p.name} className={`flex flex-col rounded-lg border p-7 ${p.featured ? 'border-foreground bg-panel shadow-sm' : 'border-border bg-background'}`}>
      <div className="flex items-center justify-between"><h2 className="font-serif text-2xl">{p.name}</h2>{p.featured && <span className="rounded-sm bg-foreground px-2 py-1 font-mono text-[10px] uppercase tracking-[.12em] text-background">Recommended</span>}</div>
      <p className="mt-3 text-sm leading-6 text-muted-foreground">{p.body}</p>
      <p className="mt-7 font-mono text-4xl">{p.price}</p><p className="mt-1 text-xs text-muted-foreground">{p.unit}</p>
      <ul className="mt-7 flex-1 space-y-3 border-t border-border pt-6">{p.features.map(f => <li key={f} className="flex gap-3 text-sm"><Check className="mt-0.5 size-4 shrink-0 text-forest" />{f}</li>)}</ul>
      <Button className="mt-8" variant={p.featured ? 'default' : 'outline'} asChild>{p.to === '/auth' ? <Link to="/auth" search={{ mode: 'signup' }}>{p.cta}</Link> : <Link to={p.to}>{p.cta}</Link>}</Button>
    </article>)}</div>
      <p className="mt-6 text-center text-xs text-muted-foreground">Prices are in USD and exclude applicable taxes. Annual billing is available on request.</p></section>
    <section className="border-t border-border"><div className="mx-auto max-w-3xl px-5 py-16">{faqs.map(([q, a]) => <div key={q} className="border-b border-border py-6"><h3 className="font-serif text-xl">{q}</h3><p className="mt-2 text-sm leading-6 text-muted-foreground">{a}</p></div>)}</div></section>
  </main></PublicLayout>
}