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

export default function SupportPage() {
  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">Support & Documentation</h1>
        <p className="text-xl text-gray-600 mb-10 leading-relaxed">
          Learn how to get the most out of the CK-QR platform.
        </p>
        
        <div className="space-y-12">
          
          <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">1. What is a Dynamic QR Code?</h2>
            <p className="text-gray-600 leading-relaxed">
              Standard QR codes encode the destination URL directly into the black-and-white square pattern. If you need to change the URL, you must generate a completely new square pattern and reprint all your materials.
              <br/><br/>
              A <strong>Dynamic QR code</strong> encodes a short-link (e.g. ckqr.com/r/xyz) instead. This short-link sits on our servers and instantly redirects users to your real destination. This allows you to change the final destination at any time without ever changing the physical printed code!
            </p>
          </div>

          <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">2. Creating your first QR Code</h2>
            <ul className="list-decimal list-inside space-y-3 text-gray-600">
              <li>Log into your dashboard and click <strong>"Create New QR"</strong>.</li>
              <li>Enter a title (for your own tracking) and the destination URL where you want users to go.</li>
              <li>Click <strong>Generate</strong>. The system will create your unique short-link and construct the QR pattern.</li>
              <li>Download the resulting image and print it on your flyers, menus, or packaging!</li>
            </ul>
          </div>

          <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">3. Updating a Destination URL</h2>
            <p className="text-gray-600 leading-relaxed">
              Made a mistake or launching a new campaign? You don't need to reprint!
            </p>
            <ul className="list-disc list-inside space-y-3 text-gray-600 mt-4">
              <li>Go to your dashboard and find the specific QR code in the list.</li>
              <li>Click the <strong>Edit</strong> button next to the destination URL.</li>
              <li>Type in the new URL and hit save.</li>
              <li>The redirect is updated instantly globally. Anyone who scans the printed code will now be routed to the new URL.</li>
            </ul>
          </div>

        </div>
      </main>
    </div>
  );
}
