import React from 'react';
import Link from 'next/link';

export default function DynamicQRPage() {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-sans">
      <nav className="bg-gray-900 border-b border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            <Link href="/" className="flex items-center gap-3">
              <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
                <span className="text-white font-black text-xl tracking-tighter">CQ</span>
              </div>
              <span className="font-extrabold text-2xl tracking-tight text-white">CK-QR</span>
            </Link>
          </div>
        </div>
      </nav>
      <main className="flex-1 max-w-4xl mx-auto w-full px-6 py-16">
        <h1 className="text-5xl font-black text-gray-900 mb-6">Dynamic QR Codes</h1>
        <p className="text-xl text-gray-600 mb-10 leading-relaxed">
          Never reprint a QR code again. With our dynamic routing engine, you can change the destination URL of your physical QR codes instantly from our dashboard.
        </p>
        <div className="prose prose-lg prose-indigo max-w-none text-gray-700">
          <h2>How it works</h2>
          <p>
            When you create a dynamic QR code, we generate a unique short-link (e.g., ckqr.com/r/xyz). Your physical QR code points to this short-link. When a user scans the code, our globally distributed edge network intercepts the request, logs the analytics data, and instantly redirects the user to your final destination URL.
          </p>
          <h2>Benefits</h2>
          <ul>
            <li><strong>Fix mistakes instantly:</strong> Did you print 10,000 flyers with a typo in the URL? No problem. Update the destination in our dashboard and the printed codes will automatically route correctly.</li>
            <li><strong>A/B Testing:</strong> Route 50% of traffic to one landing page and 50% to another to test conversion rates.</li>
            <li><strong>Time-based routing:</strong> Send users to a breakfast menu in the morning, and a dinner menu at night—all from the exact same QR code on the table.</li>
          </ul>
        </div>
      </main>
    </div>
  );
}
