citycards-partnerweb/src/components/SupportPage.tsx

import { useState } from "react";
import { motion } from "motion/react";
import { Upload, Mail, Phone } from "lucide-react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";

export default function SupportPage() {
  const [subject, setSubject] = useState("");
  const [description, setDescription] = useState("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Handle form submission logic here
    console.log("Support ticket submitted:", { subject, description, file: selectedFile });
  };

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.4, ease: "easeInOut" }}
        >
          {/* Header */}
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-gray-900 mb-2">Support</h1>
            <p className="text-base text-gray-600">
              Need help? We're here for you. Raise a ticket and our support team will get back to you shortly
            </p>
          </div>

          {/* Support Form */}
          <form onSubmit={handleSubmit} className="space-y-6">
              {/* Subject Field */}
              <div className="space-y-2">
                <Label htmlFor="subject" className="text-base font-medium text-gray-900">
                  Subject
                </Label>
                <Input
                  id="subject"
                  type="text"
                  placeholder="Enter subject"
                  value={subject}
                  onChange={(e) => setSubject(e.target.value)}
                  className="w-full h-12 bg-white border border-gray-200 rounded-lg px-4"
                />
              </div>

              {/* Description Field */}
              <div className="space-y-2">
                <Label htmlFor="description" className="text-base font-medium text-gray-900">
                  Description
                </Label>
                <Textarea
                  id="description"
                  placeholder="Please describe your issue in detail..."
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  className="w-full min-h-[120px] bg-white border border-gray-200 rounded-lg px-4 py-3 resize-none"
                  rows={5}
                />
              </div>

              {/* File Upload */}
              <div className="space-y-2">
                <Label className="text-base font-medium text-gray-900">
                  File Upload
                </Label>
                <div className="border-2 border-dashed border-gray-200 rounded-lg p-6 bg-white">
                  <div className="text-center">
                    <input
                      type="file"
                      id="file-upload"
                      className="hidden"
                      onChange={handleFileUpload}
                      accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.txt"
                    />
                    <label htmlFor="file-upload" className="cursor-pointer">
                      <div className="flex flex-col items-center space-y-2">
                        <Upload className="h-8 w-8 text-gray-400" />
                        <div className="text-sm text-gray-600">
                          {selectedFile ? (
                            <span className="font-medium">{selectedFile.name}</span>
                          ) : (
                            <>
                              <span className="font-medium text-[#F95F62] hover:text-[#E54B4E]">
                                Upload file
                              </span>
                              <span> or drag and drop</span>
                            </>
                          )}
                        </div>
                        {!selectedFile && (
                          <div className="text-xs text-gray-500">
                            PNG, JPG, GIF, PDF up to 10MB
                          </div>
                        )}
                      </div>
                    </label>
                  </div>
                </div>
              </div>

              {/* Contact Details */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium text-gray-900">Contact Details</h3>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Email */}
                  <div className="space-y-2">
                    <Label htmlFor="email" className="text-base font-medium text-gray-900">
                      Email
                    </Label>
                    <div className="relative">
                      <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                      <Input
                        id="email"
                        type="email"
                        value="support@cityads.com"
                        readOnly
                        className="pl-10 h-12 bg-gray-50 border border-gray-200 rounded-lg text-gray-600"
                      />
                    </div>
                  </div>

                  {/* Phone */}
                  <div className="space-y-2">
                    <Label htmlFor="phone" className="text-base font-medium text-gray-900">
                      Phone
                    </Label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
                      <Input
                        id="phone"
                        type="tel"
                        value="(437) 040 260 6843"
                        readOnly
                        className="pl-10 h-12 bg-gray-50 border border-gray-200 rounded-lg text-gray-600"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* Submit Button */}
              <div className="pt-4">
                <Button
                  type="submit"
                  className="w-full h-12 bg-[#F95F62] hover:bg-[#E54B4E] text-white rounded-lg font-medium"
                >
                  Submit Ticket
                </Button>
              </div>
          </form>
        </motion.div>
      </div>
    </div>
  );
}