import React from 'react';
import type { Metadata } from 'next';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';

export const metadata: Metadata = {
    title: 'Free QR Code Tools | URL, vCard, WiFi & More | QR Master',
    description: 'Access our complete collection of free QR code generators. Create codes for URLs, WiFi, plain text, vCards, and more. No signup required for static codes.',
    alternates: {
        canonical: 'https://www.qrmaster.net/tools',
    },
    openGraph: {
        title: 'Free QR Code Tools Collection',
        description: 'All your QR code needs in one place. Free forever static codes.',
        url: 'https://www.qrmaster.net/tools',
        siteName: 'QR Master',
        type: 'website',
    },
};

export default function ToolsHubPage() {
    return (
        <div className="min-h-screen bg-slate-50 pt-20">
            <section className="bg-white py-20 px-4 border-b border-slate-200">
                <div className="container mx-auto text-center max-w-4xl">
                    <span className="inline-block px-4 py-1.5 rounded-full bg-indigo-50 text-indigo-700 font-semibold text-sm mb-6">
                        100% Free Forever
                    </span>
                    <h1 className="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 tracking-tight">
                        Free QR Code Tools
                    </h1>
                    <p className="text-xl text-slate-600 mb-8 leading-relaxed max-w-2xl mx-auto">
                        Generate static QR codes for any purpose. No credit card, no expiration, no hidden fees.
                    </p>
                </div>
            </section>

            <div className="py-12">
                <FreeToolsGrid />
            </div>

            <section className="py-20 px-4">
                <div className="container mx-auto max-w-3xl text-center">
                    <h2 className="text-2xl font-bold text-slate-900 mb-4">Why are these tools free?</h2>
                    <p className="text-slate-600 mb-8">
                        We believe basic QR codes should be accessible to everyone. Our static QR codes encode your data directly into the image,
                        meaning we don't need to host tracking servers for them. That's why they are free forever.
                        If you need tracking and editability, check out our Dynamic QR Codes.
                    </p>
                </div>
            </section>
        </div>
    );
}
