import React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import SeoJsonLd from '@/components/SeoJsonLd';
import { websiteSchema, breadcrumbSchema } from '@/lib/schema';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import Breadcrumbs, { BreadcrumbItem } from '@/components/Breadcrumbs';

function truncateAtWord(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text;
  const truncated = text.slice(0, maxLength);
  const lastSpace = truncated.lastIndexOf(' ');
  return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}

export async function generateMetadata(): Promise<Metadata> {
  const title = truncateAtWord('QR Insights: Latest QR Strategies', 60);
  const description = truncateAtWord(
    'Expert guides on QR analytics, dynamic codes & smart marketing uses.',
    160
  );

  return {
    title,
    description,
    alternates: {
      canonical: 'https://www.qrmaster.net/blog',
      languages: {
        'x-default': 'https://www.qrmaster.net/blog',
        en: 'https://www.qrmaster.net/blog',
      },
    },
    openGraph: {
      title,
      description,
      url: 'https://www.qrmaster.net/blog',
      type: 'website',
    },
    twitter: {
      title,
      description,
    },
  };
}

const blogPosts = [
  // NEW POSTS (January 2026)
  {
    slug: 'qr-code-restaurant-menu',
    title: 'How to Create a QR Code for Restaurant Menu',
    excerpt: 'Step-by-step guide to creating digital menu QR codes for your restaurant. Learn best practices for touchless menus, placement tips, and tracking.',
    date: 'January 5, 2026',
    readTime: '12 Min',
    category: 'Restaurant',
    image: '/blog/restaurant-qr-menu.png',
  },
  {
    slug: 'vcard-qr-code-generator',
    title: 'Free vCard QR Code Generator: Digital Business Cards',
    excerpt: 'Create professional vCard QR codes for digital business cards. Share contact info instantly with a scan—includes templates and best practices.',
    date: 'January 5, 2026',
    readTime: '10 Min',
    category: 'Business Cards',
    image: '/blog/vcard-qr-code.png',
  },
  {
    slug: 'qr-code-small-business',
    title: 'Best QR Code Generator for Small Business: 2025 Guide',
    excerpt: 'Find the best QR code solution for your small business. Compare features, pricing, and use cases for marketing, payments, and operations.',
    date: 'January 5, 2026',
    readTime: '14 Min',
    category: 'Business',
    image: '/blog/small-business-qr.png',
  },
  {
    slug: 'qr-code-print-size-guide',
    title: 'QR Code Print Size Guide: Minimum Sizes for Every Use Case',
    excerpt: 'Complete guide to QR code print sizes. Learn minimum dimensions for business cards, posters, banners, and more to ensure reliable scanning.',
    date: 'January 5, 2026',
    readTime: '8 Min',
    category: 'Printing',
    image: '/blog/qr-print-sizes.png',
  },
  // EXISTING POSTS
  {
    slug: 'qr-code-tracking-guide-2025',
    title: 'QR Code Tracking: Complete Guide 2025',
    excerpt: 'Learn how to track QR code scans with real-time analytics. Compare free vs paid tracking tools, setup Google Analytics, and measure ROI.',
    date: 'October 18, 2025',
    readTime: '12 Min',
    category: 'Tracking & Analytics',
    image: '/blog/1-hero.png',
  },
  {
    slug: 'dynamic-vs-static-qr-codes',
    title: 'Dynamic vs Static QR Codes: Which Should You Use?',
    excerpt: 'Understand the difference between static and dynamic QR codes. Learn when to use each type, pros/cons, and how dynamic QR codes save money.',
    date: 'October 17, 2025',
    readTime: '10 Min',
    category: 'QR Code Basics',
    image: '/blog/2-hero.png',
  },
  {
    slug: 'bulk-qr-code-generator-excel',
    title: 'How to Generate Bulk QR Codes from Excel',
    excerpt: 'Generate hundreds of QR codes from Excel or CSV files in minutes. Step-by-step guide with templates, best practices, and free tools.',
    date: 'October 16, 2025',
    readTime: '13 Min',
    category: 'Bulk Generation',
    image: '/blog/3-hero.png',
  },
  {
    slug: 'qr-code-analytics',
    title: 'QR Code Analytics: Track, Measure & Optimize Campaigns',
    excerpt: 'Learn how to leverage scan analytics, campaign tracking, and dashboard insights to maximize QR code ROI.',
    date: 'October 16, 2025',
    readTime: '15 Min',
    category: 'Analytics',
    image: '/blog/4-hero.png',
  },
];

export default function BlogPage() {
  const breadcrumbItems: BreadcrumbItem[] = [
    { name: 'Home', url: '/' },
    { name: 'Blog', url: '/blog' },
  ];

  return (
    <>
      <SeoJsonLd data={[websiteSchema(), breadcrumbSchema(breadcrumbItems)]} />
      <div className="py-20 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <Breadcrumbs items={breadcrumbItems} />
          <div className="text-center mb-16">
            <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
              QR Code Insights
            </h1>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Expert guides on dynamic QR codes, campaign tracking, UTM analytics, and smart marketing use cases.
              Discover how-to tutorials and best practices for QR code analytics.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {blogPosts.map((post) => (
              <Link key={post.slug} href={`/blog/${post.slug}`}>
                <Card hover className="h-full overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
                  <div className="relative h-56 overflow-hidden">
                    <Image
                      src={post.image}
                      alt={`${post.title} - QR code guide showing ${post.category.toLowerCase()} strategies`}
                      width={800}
                      height={600}
                      className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                    />
                  </div>
                  <CardHeader className="pb-3">
                    <div className="flex items-center justify-between mb-3">
                      <Badge variant="info">{post.category}</Badge>
                      <span className="text-sm text-gray-500 font-medium">{post.readTime} read</span>
                    </div>
                    <CardTitle className="text-xl leading-tight mb-3">{post.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <p className="text-gray-600 mb-4 leading-relaxed">{post.excerpt}</p>
                    <div className="flex items-center justify-between pt-4 border-t border-gray-100">
                      <p className="text-sm text-gray-500">{post.date}</p>
                      <span className="text-primary-600 text-sm font-medium">Read more →</span>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}