import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { faqPageSchema } from '@/lib/schema';
import { Card, CardContent } from '@/components/ui/Card';
import { ContactSupport } from './ContactSupport';

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 Master FAQ: Dynamic & Bulk QR', 60);
  const description = truncateAtWord(
    'Find answers about dynamic QR codes, scan tracking, security, bulk generation, and event QR codes. Everything you need to know about QR Master features.',
    160
  );

  return {
    title,
    description,
    alternates: {
      canonical: 'https://www.qrmaster.net/faq',
      languages: {
        'x-default': 'https://www.qrmaster.net/faq',
        en: 'https://www.qrmaster.net/faq',
      },
    },
    openGraph: {
      title,
      description,
      url: 'https://www.qrmaster.net/faq',
      type: 'website',
      images: [
        {
          url: 'https://www.qrmaster.net/og-image.png',
          width: 1200,
          height: 630,
          alt: 'QR Master FAQ',
        },
      ],
    },
    twitter: {
      title,
      description,
    },
  };
}

const faqs = [
  {
    question: 'What is a dynamic QR code?',
    answer: 'A dynamic QR code allows you to change the destination URL after the code has been created and printed. Unlike static QR codes, dynamic codes redirect through a short URL that you control, enabling real-time updates, scan analytics, and campaign tracking without reprinting the code.',
  },
  {
    question: 'How do I track QR scans?',
    answer: 'QR Master provides a comprehensive analytics dashboard that tracks every scan in real-time. You can monitor scan rates, geographic locations, device types, timestamps, and user behavior. Enable UTM parameters to integrate with Google Analytics for advanced campaign tracking and conversion attribution.',
  },
  {
    question: 'What security features does QR Master offer?',
    answer: 'QR Master employs enterprise-grade security including SSL encryption, link validation to prevent malicious redirects, fraud detection, and GDPR-compliant data handling. All scan analytics are stored securely and access is protected with multi-factor authentication for business accounts.',
  },
  {
    question: 'Can I generate bulk QR codes for print?',
    answer: 'Yes. Our bulk QR generation tool allows you to create thousands of QR codes at once by uploading a CSV file. Each code can be customized with unique URLs, UTM parameters, and branding. Download print-ready files in SVG, PNG, or PDF formats optimized for high-resolution printing.',
  },
  {
    question: 'How do I brand my QR codes?',
    answer: 'QR Master offers customization options including custom colors, corner styles, and pattern designs. Branded QR codes maintain scannability while matching your brand identity. Choose your color palette and preview designs before downloading.',
  },
  {
    question: 'Is scan analytics GDPR compliant?',
    answer: 'Yes. All QR Master analytics are fully GDPR compliant. We collect only necessary data, provide transparent privacy policies, allow users to opt out, and store data securely in EU-compliant data centers. You maintain full control over data retention and deletion.',
  },
  {
    question: 'Can QR Master track campaigns with UTM?',
    answer: 'Absolutely. QR Master supports UTM parameter integration for all dynamic QR codes. Automatically append source, medium, campaign, term, and content parameters to track QR performance in Google Analytics, Adobe Analytics, and other marketing platforms. UTM tracking enables multi-channel attribution and ROI measurement.',
  },
  {
    question: 'Difference between static and dynamic QR codes?',
    answer: 'Static QR codes encode the destination URL directly in the code pattern and cannot be changed after creation. Dynamic QR codes use a short redirect URL, allowing you to update destinations, track scans, enable/disable codes, and gather analytics—all without reprinting. Dynamic codes are essential for professional marketing campaigns.',
  },
  {
    question: 'How are QR codes used for events?',
    answer: 'QR codes streamline event check-ins, ticket validation, attendee tracking, and engagement measurement. Generate unique codes for each ticket, track scan times and locations, enable contactless entry, and analyze attendee behavior. Event organizers use QR analytics to measure session popularity and optimize future events.',
  },
  {
    question: 'Can I make QR codes for business cards?',
    answer: 'Yes. QR codes on business cards provide instant contact sharing via vCard format, link to your portfolio or LinkedIn profile, and track networking effectiveness. Use branded QR codes that match your card design, and leverage scan analytics to see how many contacts engage and when they follow up.',
  },
  {
    question: 'How do I use QR codes for bulk marketing?',
    answer: 'Bulk QR codes enable scalable campaigns across print ads, packaging, direct mail, and retail displays. Generate thousands of codes with unique tracking URLs, distribute them across channels, and use analytics to measure which placements drive the highest engagement. Bulk generation supports CSV upload, API integration, and automated workflows.',
  },
  {
    question: 'Is API access available for bulk QR generation?',
    answer: 'Yes. QR Master offers a developer-friendly REST API for programmatic QR code generation, URL management, and analytics retrieval. Integrate QR creation into your CRM, marketing automation platform, or e-commerce system. API access is included in Business plans and supports bulk operations, webhooks, and real-time updates.',
  },
];

export default function FAQPage() {
  return (
    <>
      <SeoJsonLd data={faqPageSchema(faqs)} />
      <div className="py-20 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
                Frequently Asked Questions
              </h1>
              <p className="text-xl text-gray-600">
                Everything you need to know about dynamic QR codes, security, analytics, bulk generation, events, and print quality.
              </p>
            </div>

            <div className="space-y-6">
              {faqs.map((faq, index) => (
                <Card key={index} className="border-l-4 border-blue-500">
                  <CardContent className="p-8">
                    <h2 className="text-2xl font-semibold mb-4 text-gray-900">
                      {faq.question}
                    </h2>
                    <p className="text-lg text-gray-700 leading-relaxed">
                      {faq.answer}
                    </p>
                  </CardContent>
                </Card>
              ))}
            </div>

            <ContactSupport />
          </div>
        </div>
      </div>
    </>
  );
}
