import { createFileRoute } from '@tanstack/react-router'
import { PublicLayout } from '@/components/duewise/public-layout'
import { PageHero } from '@/components/duewise/page-hero'
import { Circle } from 'lucide-react'

const items = [
  { title: 'Passwordless workspace access', status: 'Available', description: 'Email verification, persistent sessions, protected workspaces, and owner onboarding.' },
  { title: 'Receivables workspace', status: 'Available', description: 'Company-scoped customer, invoice, and payment records with workspace access controls.' },
  { title: 'Payment Issue Advisor', status: 'In Pilot', description: 'AI-assisted explanations and next-action guidance for issues entered by finance teams.' },
  { title: 'Payment and cash indicators', status: 'In Pilot', description: 'Transparent payment-risk, late-payment, and 7/30/90-day calculations from workspace records.' },
  { title: 'Assisted reconciliation', status: 'In Development', description: 'Suggested payment-to-invoice matches with a focused human review queue.' },
  { title: 'Reports and team administration', status: 'In Development', description: 'Exportable finance reports, invitations, and tested role-management controls.' },
  { title: 'Financial system integrations', status: 'Planned', description: 'Accounting, banking, payment-provider, statement-import, and business-system connections.' },
  { title: 'Production predictive models', status: 'Planned', description: 'Trained late-payment, payment-risk, forecasting, and anomaly models after validation.' },
]

export const Route = createFileRoute('/roadmap')({
  head: () => ({ meta: [
    { title: 'Roadmap — DueWise' },
    { name: 'description', content: 'The product journey and planned features for the DueWise financial intelligence platform.' },
    { property: 'og:title', content: 'Product Roadmap — DueWise' },
    { property: 'og:description', content: 'Available, pilot, in-development, and planned DueWise capabilities.' },
    { property: 'og:type', content: 'website' },
    { name: 'twitter:card', content: 'summary_large_image' },
  ] }),
  component: Roadmap,
})

function Roadmap() {
  return <PublicLayout><main>
    <PageHero eyebrow="Product Roadmap" title="Where we’re heading." body="DueWise is being developed with a focus on reliability, clear financial context, and useful intelligence for finance teams." />
    <section className="mx-auto max-w-3xl px-5 py-16 lg:px-8">
      <div className="space-y-10">
        {items.map(item => (
          <div key={item.title} className="flex gap-6">
            <div className="mt-1">
              <Circle className={item.status === 'Available' ? 'size-5 fill-forest text-forest' : item.status === 'In Pilot' ? 'size-5 fill-primary text-primary' : 'size-5 text-muted-foreground'} />
            </div>
            <div>
              <div className="flex items-center gap-3">
                <h2 className="font-serif text-2xl">{item.title}</h2>
                <span className="rounded-sm bg-panel border border-border px-2 py-0.5 text-[10px] font-mono uppercase tracking-wider text-muted-foreground">{item.status}</span>
              </div>
              <p className="mt-3 text-sm leading-7 text-muted-foreground">{item.description}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  </main></PublicLayout>
}