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

export default function SupportPage() {
  const faqs = [
    { q: "How do dynamic QR codes work?", a: "Dynamic QR codes link to a short URL managed by CK-QR. When scanned, the short URL redirects the user to your final destination URL. Because the QR graphic only contains the short URL, you can change the final destination at any time without reprinting the code." },
    { q: "Can I change the short link later?", a: "Yes! You can edit the custom slug of your short link directly from your dashboard by clicking the 'Edit Link' button on any QR code card." },
    { q: "Are scans tracked accurately?", a: "We log every scan instantly, capturing the operating system, device type, and timestamp. You can view these metrics on the Statistics page." },
  ];

  return (
    <div className="p-8 max-w-4xl mx-auto font-sans h-full">
      <div className="mb-8 bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
        <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight">Support & FAQ</h1>
        <p className="text-gray-500 mt-1">Get help and learn how to use CK-QR.</p>
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-8">
        <div className="p-8 bg-indigo-50 border-b border-indigo-100 flex flex-col md:flex-row items-center justify-between gap-6">
           <div>
              <h2 className="text-xl font-bold text-indigo-900 mb-2">Need direct assistance?</h2>
              <p className="text-indigo-700 text-sm">Our support team is available Monday through Friday to help you with any technical issues or billing inquiries.</p>
           </div>
           <button className="whitespace-nowrap bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-xl transition-colors shadow-sm">
              Contact Support
           </button>
        </div>
        
        <div className="p-8">
           <h3 className="text-lg font-bold text-gray-900 mb-6 flex items-center gap-2">
              <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
              Frequently Asked Questions
           </h3>
           <div className="space-y-6">
              {faqs.map((faq, i) => (
                 <div key={i} className="border-b border-gray-100 pb-6 last:border-0 last:pb-0">
                    <h4 className="font-bold text-gray-900 mb-2">{faq.q}</h4>
                    <p className="text-gray-600 text-sm leading-relaxed">{faq.a}</p>
                 </div>
              ))}
           </div>
        </div>
      </div>
      
      <div className="text-center">
         <Link href="/support/how-to-use" className="text-indigo-600 hover:underline font-medium text-sm">
            View full documentation
         </Link>
      </div>
    </div>
  );
}
