import { ArrowRight } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Input } from './ui/input';
import { Button } from './ui/button';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';

export function UserForm() {
    return (
        <div id="contact" className="container mx-auto max-w-2xl flex-1 rounded-2xl bg-[#1a1a1a] p-8">
            <h2 className="mb-2 text-3xl text-gray-50">Request A Free Consultation</h2>
            <p className="mb-8 text-sm text-gray-50">
                Get in touch with Financy to see what we can achieve to add some value on the team and business of Officely, which takes over platform
                management and systems.
            </p>

            <form className="space-y-6">
                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                        <Label className="text-gray-400" htmlFor="name">
                            Your Name
                        </Label>
                        <Input id="name" placeholder="William Brenson" className="text-white placeholder-gray-400" />
                    </div>
                    <div className="space-y-2">
                        <Label className="text-gray-400" htmlFor="email">
                            Email Address
                        </Label>
                        <Input id="email" type="email" placeholder="william@mail.com" className="text-white placeholder-gray-400" />
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                        <Label className="text-gray-400" htmlFor="phone">
                            Phone Number
                        </Label>
                        <Input id="phone" placeholder="+1" className="text-white placeholder-gray-400" />
                    </div>
                    <div className="space-y-2">
                        <Label className="text-gray-400" htmlFor="industry">
                            Industry
                        </Label>
                        <Select>
                            <SelectTrigger className="text-white" id="industry">
                                <SelectValue placeholder="Working At Finance" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="finance">Working At Finance</SelectItem>
                                <SelectItem value="tech">Technology</SelectItem>
                                <SelectItem value="healthcare">Healthcare</SelectItem>
                                <SelectItem value="retail">Retail</SelectItem>
                                <SelectItem value="other">Other</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                        <Label className="text-gray-400" htmlFor="expertise">
                            Expertise
                        </Label>
                        <Select>
                            <SelectTrigger className="text-white" id="expertise">
                                <SelectValue placeholder="Financial Planning" />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="planning">Financial Planning</SelectItem>
                                <SelectItem value="consulting">Business Consulting</SelectItem>
                                <SelectItem value="marketing">Marketing</SelectItem>
                                <SelectItem value="development">Development</SelectItem>
                                <SelectItem value="no-exprience">No Exprience</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>

                <div className="space-y-2">
                    <Label className="text-gray-400" htmlFor="description">
                        Business Description
                    </Label>
                    <Textarea
                        id="description"
                        placeholder="Kindly go through information about your business..."
                        className="min-h-[80px] resize-none bg-[#1a1a1a] text-white"
                    />
                </div>

                <Button type="submit" className="h-12 w-full rounded-full bg-black text-base text-white hover:bg-black/90">
                    Submit Request
                    <div className="ml-2 flex h-8 w-8 items-center justify-center rounded-full bg-red-600">
                        <ArrowRight className="h-4 w-4" />
                    </div>
                </Button>
            </form>
        </div>
    );
}