"use client"; import { useState } from "react"; import { AlertTriangle, Briefcase, Calendar, Clock, FileText, Lock, Phone, Scale, Shield } from "lucide-react"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; const PRACTICE_AREAS = [ { value: "family", label: "Family Law", examples: "Divorce, Custody, Support" }, { value: "injury", label: "Personal Injury", examples: "Accidents, Medical Malpractice" }, { value: "criminal", label: "Criminal Defense", examples: "DUI, Felonies, Misdemeanors" }, { value: "business", label: "Business Law", examples: "Contracts, Disputes, Formation" }, { value: "estate", label: "Estate Planning", examples: "Wills, Trusts, Probate" }, { value: "immigration", label: "Immigration", examples: "Visas, Green Cards, Citizenship" }, { value: "employment", label: "Employment Law", examples: "Wrongful Termination, Discrimination" }, { value: "realestate", label: "Real Estate", examples: "Transactions, Disputes, Landlord-Tenant" }, { value: "other", label: "Other", examples: "Not listed above" }, ]; const URGENCY_LEVELS = [ { value: "emergency", label: "Emergency", description: "Arrest, restraining order, immediate threat", time: "Same day", color: "text-destructive" }, { value: "urgent", label: "Urgent", description: "Court deadline within 1-2 weeks", time: "Within 24hrs", color: "text-primary" }, { value: "standard", label: "Standard", description: "Matter needs attention but no immediate deadline", time: "2-3 days", color: "text-muted-foreground" }, { value: "planning", label: "Planning", description: "Proactive legal planning, no current issue", time: "This week", color: "text-muted-foreground" }, ]; const CONTACT_PREFERENCES = [ { id: "phone", label: "Phone call", icon: Phone }, { id: "email", label: "Email", icon: FileText }, { id: "video", label: "Video consultation", icon: Briefcase }, ]; export const title = "React Contact Block Legal"; export default function ContactLegal() { const [urgency, setUrgency] = useState("standard"); const [practiceArea, setPracticeArea] = useState(""); const selectedUrgency = URGENCY_LEVELS.find((u) => u.value === urgency); return (

Confidential Consultation

Speak With an Attorney

Experienced legal counsel for life's most important matters. Your first consultation is free.

{/* Urgency Selection - Top Alert Section */}

How Urgent Is Your Matter?

{URGENCY_LEVELS.map((level) => (

{level.label} {level.time}

{level.description} ))} {urgency === "emergency" && ( For immediate emergencies, call our 24/7 hotline: (555) 911-HELP )}

{/* Left: Case Information */}

About Your Case

Practice Area

Brief Description of Your Matter

<p className="text-xs text-muted-foreground">
                      Don't include sensitive details like SSN or account numbers
                    </p>
                  </div>

<div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="incident-date">When Did This Arise?</Label>
                      <Select>
                        <SelectTrigger id="incident-date">
                          <SelectValue placeholder="Select timeframe" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="today">Today / This week</SelectItem>
                          <SelectItem value="month">Within the past month</SelectItem>
                          <SelectItem value="3months">1-3 months ago</SelectItem>
                          <SelectItem value="6months">3-6 months ago</SelectItem>
                          <SelectItem value="year">6-12 months ago</SelectItem>
                          <SelectItem value="over-year">Over a year ago</SelectItem>
                          <SelectItem value="ongoing">Ongoing situation</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="deadline">Any Upcoming Deadlines?</Label>
                      <Input id="deadline" type="date" />
                    </div>
                  </div>

<div className="space-y-3">
                    <Label>Additional Information</Label>
                    <div className="space-y-2">
                      <div className="flex items-center gap-2">
                        <Checkbox id="prior-attorney" />
                        <Label htmlFor="prior-attorney" className="text-sm font-normal">
                          I've previously consulted with an attorney about this matter
                        </Label>
                      </div>
                      <div className="flex items-center gap-2">
                        <Checkbox id="lawsuit" />
                        <Label htmlFor="lawsuit" className="text-sm font-normal">
                          A lawsuit has already been filed
                        </Label>
                      </div>
                      <div className="flex items-center gap-2">
                        <Checkbox id="documents" />
                        <Label htmlFor="documents" className="text-sm font-normal">
                          I have documents or evidence to share
                        </Label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Right: Contact & Schedule */}
              <div className="p-6">
                <div className="flex items-center gap-2 mb-6">
                  <Calendar className="h-5 w-5 text-muted-foreground" />
                  <h3 className="font-semibold">Your Information</h3>
                </div>

<form className="space-y-4">
                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="first-name">First Name</Label>
                      <Input id="first-name" placeholder="Robert" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="last-name">Last Name</Label>
                      <Input id="last-name" placeholder="Johnson" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input
                      id="email"
                      type="email"
                      placeholder="robert@example.com"
                    />
                  </div>

<div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="phone">Phone</Label>
                      <Input id="phone" type="tel" placeholder="+1 (555) 000-0000" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="best-time">Best Time to Reach You</Label>
                      <Select>
                        <SelectTrigger id="best-time">
                          <SelectValue placeholder="Select" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="morning">Morning (9am-12pm)</SelectItem>
                          <SelectItem value="afternoon">Afternoon (12-5pm)</SelectItem>
                          <SelectItem value="evening">Evening (5-8pm)</SelectItem>
                          <SelectItem value="anytime">Anytime</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="space-y-3">
                    <Label>Preferred Contact Method</Label>
                    <div className="flex flex-wrap gap-4">
                      {CONTACT_PREFERENCES.map((pref) => {
                        const Icon = pref.icon;
                        return (
                          <div key={pref.id} className="flex items-center gap-2">
                            <Checkbox id={pref.id} defaultChecked={pref.id === "phone"} />
                            <Label htmlFor={pref.id} className="text-sm font-normal flex items-center gap-1">
                              <Icon className="h-3 w-3" />
                              {pref.label}
                            </Label>
                          </div>
                        );
                      })}
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="referral">How Did You Find Us?</Label>
                    <Select>
                      <SelectTrigger id="referral">
                        <SelectValue placeholder="Select" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="google">Google Search</SelectItem>
                        <SelectItem value="referral">Friend/Family Referral</SelectItem>
                        <SelectItem value="attorney">Attorney Referral</SelectItem>
                        <SelectItem value="avvo">Avvo / Legal Directory</SelectItem>
                        <SelectItem value="social">Social Media</SelectItem>
                        <SelectItem value="other">Other</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="rounded-lg border p-4 space-y-3">
                    <div className="flex items-center gap-2">
                      <Lock className="h-4 w-4 text-muted-foreground" />
                      <span className="font-medium text-sm">Your Privacy Protected</span>
                    </div>
                    <p className="text-xs text-muted-foreground">
                      All information is transmitted securely and treated as confidential.
                      Submitting this form does not create an attorney-client relationship.
                    </p>
                  </div>

<div className="flex items-start gap-2">
                    <Checkbox id="consent" />
                    <Label
                      htmlFor="consent"
                      className="text-sm font-normal leading-tight"
                    >
                      I consent to being contacted about my legal matter and understand
                      the <a href="#" className="text-primary hover:underline">privacy policy</a>
                    </Label>
                  </div>

<div className="rounded-lg border p-4 space-y-2">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2">
                        <Shield className="h-5 w-5 text-primary" />
                        <span className="font-medium">Free Case Evaluation</span>
                      </div>
                      <Badge>No Obligation</Badge>
                    </div>
                    <p className="text-xs text-muted-foreground">
                      {selectedUrgency?.time} response • Confidential • No fees until we win*
                    </p>
                  </div>

<Button className="w-full" size="lg">
                    <Scale className="mr-2 h-4 w-4" />
                    Request Free Consultation
                  </Button>

<p className="text-center text-xs text-muted-foreground">
                    *Contingency fees apply to select case types. Consultation is always free.
                  </p>
                </form>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}
</article></body></html>

React Contact Block Legal

Speak With an Attorney

How Urgent Is Your Matter?

About Your Case

Your Information

Installation

Related blocks you will also like

Contact Consultation Form

Contact Booking Form

Contact Callback Request

Contact Quote Request

Contact Insurance Quote

Contact Schedule Meeting

Questions you might have

What practice areas should I list?

How should I handle urgent legal matters?

What information should legal intake capture?

How do I address confidentiality concerns?

How should I present legal fee structures?

What response time do clients expect?