import React from 'react';
import type { Metadata } from 'next';
import { Hero } from '@/components/marketing/Hero'; // Re-use simplified version or dedicated FeaturesHero
import { Features } from '@/components/marketing/Features';
import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
import { Pricing } from '@/components/marketing/Pricing';
import en from '@/i18n/en.json';

export const metadata: Metadata = {
    title: 'QR Master Features | Tracking, Analytics & Bulk Generation',
    description: 'Explore QR Master features: Dynamic QR codes, real-time analytics, bulk generation, custom branding, and API access.',
    alternates: {
        canonical: 'https://www.qrmaster.net/features',
    },
};

export default function FeaturesPage() {
    const t = en;

    return (
        <div className="pt-20">
            <section className="bg-gradient-to-b from-slate-50 to-white py-20 px-4">
                <div className="container mx-auto text-center max-w-4xl">
                    <h1 className="text-4xl md:text-5xl font-bold mb-6 text-slate-900">
                        Everything You Need <br /> to Run Successful QR Campaigns
                    </h1>
                    <p className="text-xl text-slate-600 mb-8">
                        From basic static codes to enterprise-grade dynamic tracking.
                    </p>
                </div>
            </section>

            <StaticVsDynamic t={t} />
            <Features t={t} />

            {/* Additional Detail Sections could go here */}

            <div className="py-20 bg-slate-50">
                <Pricing t={t} />
            </div>
        </div>
    );
}