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

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',
            },
        ],
    },
};

export default function ReprintCalculatorPage() {
    return (
        <>
            {/* 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 update instantly—keeping your print materials alive forever.
                    </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>
        </>
    );
}