import type { Metadata } from 'next'
import Link from 'next/link'
import { Header, Footer } from '@/components/navigation'
import { Layout, Download, Eye, ArrowRight } from 'lucide-react'

export const metadata: Metadata = {
  title: 'Templates',
  description: 'Pre-built templates and configurations to help you get started quickly with ReforgeData.',
}

const templateCategories = [
  'All Templates',
  'Sales Pipelines',
  'Email Templates',
  'Reports',
  'Workflows',
  'Industry-Specific',
]

const templates = [
  {
    title: 'B2B Sales Pipeline',
    description: 'A complete sales pipeline for B2B companies with customizable stages.',
    category: 'Sales Pipelines',
    downloads: 2340,
    href: '/resources/templates/b2b-sales-pipeline',
    featured: true,
  },
  {
    title: 'Insurance Client Onboarding',
    description: 'Automated workflow for onboarding new insurance clients.',
    category: 'Industry-Specific',
    downloads: 1890,
    href: '/resources/templates/insurance-onboarding',
    featured: true,
  },
  {
    title: 'Follow-up Email Sequence',
    description: '5-email sequence for following up with leads who went cold.',
    category: 'Email Templates',
    downloads: 3120,
    href: '/resources/templates/followup-sequence',
    featured: false,
  },
  {
    title: 'Monthly Sales Report',
    description: 'Comprehensive monthly sales report with key metrics.',
    category: 'Reports',
    downloads: 1560,
    href: '/resources/templates/monthly-sales-report',
    featured: false,
  },
  {
    title: 'Real Estate Pipeline',
    description: 'Property listing pipeline with buyer qualification stages.',
    category: 'Industry-Specific',
    downloads: 980,
    href: '/resources/templates/real-estate-pipeline',
    featured: false,
  },
  {
    title: 'Lead Nurturing Workflow',
    description: 'Automated workflow to nurture leads over 30 days.',
    category: 'Workflows',
    downloads: 2100,
    href: '/resources/templates/lead-nurturing',
    featured: false,
  },
  {
    title: 'E-commerce Customer Journey',
    description: 'Map customer touchpoints from first visit to repeat purchase.',
    category: 'Industry-Specific',
    downloads: 1200,
    href: '/resources/templates/ecommerce-journey',
    featured: false,
  },
  {
    title: 'Meeting Confirmation Email',
    description: 'Professional email template for confirming client meetings.',
    category: 'Email Templates',
    downloads: 890,
    href: '/resources/templates/meeting-confirmation',
    featured: false,
  },
]

export default function TemplatesPage() {
  return (
    <>
      <Header siteName="ReforgeData" />
      <main>
        {/* Hero */}
        <section className="pt-32 pb-16 lg:pt-40 lg:pb-20 bg-gradient-to-b from-green-50/50 to-white">
          <div className="container-custom">
            <div className="max-w-3xl mx-auto text-center">
              <div className="w-16 h-16 rounded-2xl bg-green-100 flex items-center justify-center mx-auto mb-6">
                <Layout className="w-8 h-8 text-green-600" />
              </div>
              <span className="badge-primary mb-4">Templates</span>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-neutral-900 mb-6">
                Ready-to-use
                <span className="text-gradient"> templates</span>
              </h1>
              <p className="text-lg text-neutral-600">
                Get started quickly with pre-built templates for pipelines, emails,
                workflows, and more.
              </p>
            </div>
          </div>
        </section>

        {/* Categories */}
        <section className="py-6 bg-white border-b border-neutral-100">
          <div className="container-custom">
            <div className="flex flex-wrap justify-center gap-2">
              {templateCategories.map((category, index) => (
                <button
                  key={category}
                  className={`px-4 py-2 text-sm font-medium rounded-full transition-colors ${
                    index === 0
                      ? 'bg-primary-50 text-primary-600'
                      : 'text-neutral-600 hover:bg-neutral-100'
                  }`}
                >
                  {category}
                </button>
              ))}
            </div>
          </div>
        </section>

        {/* Featured templates */}
        <section className="section-padding bg-white">
          <div className="container-custom">
            <h2 className="text-2xl font-bold text-neutral-900 mb-8">
              Featured Templates
            </h2>
            <div className="grid md:grid-cols-2 gap-6 mb-12">
              {templates.filter(t => t.featured).map((template) => (
                <Link
                  key={template.title}
                  href={template.href}
                  className="group card card-hover flex flex-col lg:flex-row items-start gap-6"
                >
                  <div className="w-full lg:w-48 aspect-video lg:aspect-square rounded-xl bg-gradient-to-br from-green-100 to-green-50 flex items-center justify-center flex-shrink-0">
                    <Layout className="w-12 h-12 text-green-500" />
                  </div>
                  <div className="flex-grow">
                    <span className="text-xs font-semibold text-green-600 uppercase tracking-wider">
                      {template.category}
                    </span>
                    <h3 className="text-xl font-semibold text-neutral-900 mt-1 mb-2 group-hover:text-primary-600 transition-colors">
                      {template.title}
                    </h3>
                    <p className="text-neutral-600 mb-4">
                      {template.description}
                    </p>
                    <div className="flex items-center gap-4">
                      <span className="flex items-center gap-1 text-sm text-neutral-500">
                        <Download className="w-4 h-4" />
                        {template.downloads.toLocaleString()} uses
                      </span>
                      <span className="flex items-center gap-1 text-sm text-primary-600 font-medium">
                        Preview
                        <Eye className="w-4 h-4" />
                      </span>
                    </div>
                  </div>
                </Link>
              ))}
            </div>

            {/* All templates grid */}
            <h2 className="text-2xl font-bold text-neutral-900 mb-8">
              All Templates
            </h2>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {templates.filter(t => !t.featured).map((template) => (
                <Link
                  key={template.title}
                  href={template.href}
                  className="group card card-hover"
                >
                  <div className="aspect-video rounded-xl bg-gradient-to-br from-neutral-100 to-neutral-50 flex items-center justify-center mb-4">
                    <Layout className="w-8 h-8 text-neutral-400" />
                  </div>
                  <span className="text-xs font-semibold text-primary-600 uppercase tracking-wider">
                    {template.category}
                  </span>
                  <h3 className="text-lg font-semibold text-neutral-900 mt-1 mb-2 group-hover:text-primary-600 transition-colors">
                    {template.title}
                  </h3>
                  <p className="text-neutral-600 text-sm mb-4">
                    {template.description}
                  </p>
                  <div className="flex items-center gap-1 text-sm text-neutral-500">
                    <Download className="w-4 h-4" />
                    {template.downloads.toLocaleString()} uses
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* Create your own */}
        <section className="section-padding bg-neutral-50">
          <div className="container-custom">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl font-bold text-neutral-900 mb-4">
                Have a template to share?
              </h2>
              <p className="text-neutral-600 mb-8">
                Submit your templates to our community and help others succeed.
              </p>
              <Link href="/support/contact?type=template-submission" className="btn-primary">
                Submit a template
                <ArrowRight className="w-4 h-4 ml-2" />
              </Link>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}