import React from 'react';
import type { Metadata } from 'next';
import ReprintSavingsCalculator from '@/components/marketing/ReprintSavingsCalculator';
import { ArrowDown, Check, ShieldCheck, Zap } from 'lucide-react';
import SeoJsonLd from '@/components/SeoJsonLd';
import { GrowthLinksSection } from '@/components/marketing/GrowthLinksSection';
import { breadcrumbSchema } from '@/lib/schema';

export const metadata: Metadata = {
    title: 'Reprint Cost Calculator | QR Master',
    description:
        'Calculate how much you are wasting on QR code reprints. See your potential savings with dynamic QR codes that never need to be reprinted.',
    alternates: {
        canonical: 'https://www.qrmaster.net/reprint-calculator',
    },
    robots: {
        index: true,
        follow: true,
    },
    openGraph: {
        title: 'Reprint Cost Calculator | QR Master',
        description: 'Stop wasting money on reprints. Calculate your savings now.',
        url: 'https://www.qrmaster.net/reprint-calculator',
        type: 'website',
        images: [
            {
                url: 'https://www.qrmaster.net/og-image.png',
                width: 1200,
                height: 630,
                alt: 'QR Master Reprint Cost Calculator',
            },
        ],
    },
};

const softwareSchema = {
    '@context': 'https://schema.org',
    '@type': 'WebApplication',
    '@id': 'https://www.qrmaster.net/reprint-calculator#app',
    name: 'QR Code Reprint Cost Calculator',
    applicationCategory: 'BusinessApplication',
    operatingSystem: 'Web Browser',
    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
    description: 'Calculate the cost of reprinting static QR codes vs switching to dynamic QR codes that never need reprinting.',
};

const howToSchema = {
    '@context': 'https://schema.org',
    '@type': 'HowTo',
    name: 'How to calculate QR code reprint costs',
    step: [
        { '@type': 'HowToStep', position: 1, name: 'Enter print run size', text: 'Enter how many QR codes you print per campaign.' },
        { '@type': 'HowToStep', position: 2, name: 'Enter reprint cost', text: 'Enter your cost per reprint campaign.' },
        { '@type': 'HowToStep', position: 3, name: 'See annual savings', text: 'The calculator shows how much dynamic QR codes save annually.' },
    ],
};

const breadcrumbs = [
    { name: 'Home', url: '/' },
    { name: 'Reprint Calculator', url: '/reprint-calculator' },
];

const growthLinks = [
    {
        href: '/dynamic-qr-code-generator',
        title: 'Dynamic QR Code Generator',
        description: 'Create QR codes you can update after printing. Change the destination without reprinting a single flyer.',
        ctaLabel: 'Create dynamic QR code',
    },
    {
        href: '/qr-code-tracking',
        title: 'QR Code Tracking',
        description: 'See device, time, and location context for every scan. Know which placements drive real activity.',
        ctaLabel: 'Track your QR scans',
    },
    {
        href: '/pricing',
        title: 'Compare Plans',
        description: 'One dynamic QR subscription costs less than a single batch of reprints. See the plan that fits your volume.',
        ctaLabel: 'Compare plans',
    },
];

export default function ReprintCalculatorPage() {
    return (
        <>
            <SeoJsonLd data={[softwareSchema, howToSchema, breadcrumbSchema(breadcrumbs)]} />
            {/* Hero Section */}
            <section className="pt-24 pb-12 bg-white relative overflow-hidden">
                <div className="container mx-auto px-4 text-center max-w-3xl relative z-10">
                    <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100/80 backdrop-blur-sm border border-slate-200 text-slate-600 text-sm font-medium mb-8">
                        <span className="relative flex h-2 w-2">
                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
                        </span>
                        Static QR codes are costing you money
                    </div>

                    <h1 className="text-4xl lg:text-6xl font-black text-slate-900 mb-6 tracking-tight leading-[1.1]">
                        Stop Burning Budget on <br className="hidden md:block" />
                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-orange-600">Avoidable Reprints</span>
                    </h1>

                    <p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
                        Every time a URL changes, static QR codes become useless trash.
                        Dynamic QR codes let you update the destination URL at any time — your printed materials stay usable even when links change.
                    </p>

                    <div className="flex justify-center">
                        <ArrowDown className="w-6 h-6 text-slate-400 animate-bounce" />
                    </div>
                </div>
            </section>

            {/* Calculator Component */}
            <ReprintSavingsCalculator />

            {/* Value Props */}
            <section className="py-24 bg-white border-t border-slate-100">
                <div className="container mx-auto px-4 max-w-6xl">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl font-bold text-slate-900 mb-4">
                            Why Smart Companies Switched Years Ago
                        </h2>
                        <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                            The math is simple. One dynamic subscription costs less than a single batch of reprints.
                        </p>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
                        {[
                            {
                                icon: Zap,
                                color: "text-amber-500",
                                bg: "bg-amber-50",
                                title: "Update Instantly",
                                desc: "Changed your menu? New promo link? Update the destination in seconds. Your printed codes keep working perfectly."
                            },
                            {
                                icon: ShieldCheck,
                                color: "text-blue-500",
                                bg: "bg-blue-50",
                                title: "Error Proofing",
                                desc: "Printed the wrong link? With static codes, that's a disaster. With dynamic codes, it's a 5-second fix in the dashboard."
                            },
                            {
                                icon: Check,
                                color: "text-green-500",
                                bg: "bg-green-50",
                                title: "Real ROI Tracking",
                                desc: "Stop guessing if your print ads work. Track every scan, location, and device to measure exactly what's driving value."
                            }
                        ].map((feature, i) => (
                            <div key={i} className="group p-8 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-xl hover:shadow-slate-200/50 hover:border-slate-200 transition-all duration-300">
                                <div className={`w-14 h-14 ${feature.bg} rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                                    <feature.icon className={`w-7 h-7 ${feature.color}`} />
                                </div>
                                <h3 className="text-xl font-bold text-slate-900 mb-3">{feature.title}</h3>
                                <p className="text-slate-600 leading-relaxed">
                                    {feature.desc}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <GrowthLinksSection
                eyebrow="Next steps"
                title="Stop reprinting. Start updating."
                description="Dynamic QR codes let you change the destination after printing. One code, unlimited campaigns."
                links={growthLinks}
                pageType="commercial"
                cluster="reprint-calculator"
            />
        </>
    );
}
