"use client" /** * @name Contact 05 * @description Contact section with office locations and business hours. * Multiple office locations with map placeholder and hours display. * * @slots contact, contact-container, contact-header, contact-heading, * contact-description, contact-content, contact-map, contact-locations, * contact-location, contact-location-name, contact-location-badge, * contact-location-address, contact-location-hours, contact-location-day, * contact-location-time, contact-location-contact, contact-location-email, * contact-location-phone, contact-form-section, contact-form-card, * contact-form-heading, contact-form, contact-form-row, contact-form-field, * contact-form-label, contact-form-input, contact-form-submit * @variant locations * * @registryDependencies button card input textarea label badge * @dependencies lucide-react */ import * as React from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/registry/ui/card" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { Textarea } from "@/registry/ui/textarea" import { Label } from "@/registry/ui/label" import { Badge } from "@/registry/ui/badge" import { MapPin, Clock, Mail, Phone, Building2, Send, } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface OfficeHours { days: string hours: string } interface OfficeLocation { id: string name: string isHeadquarters?: boolean address: string[] email: string phone: string hours: OfficeHours[] } interface Contact05Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Office locations */ locations?: OfficeLocation[] /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultLocations: OfficeLocation[] = [ { id: "sf", name: "San Francisco", isHeadquarters: true, address: ["100 Market Street", "Suite 500", "San Francisco, CA 94105"], email: "sf@company.com", phone: "+1 (415) 555-0100", hours: [ { days: "Monday - Friday", hours: "9:00 AM - 6:00 PM" }, { days: "Saturday", hours: "10:00 AM - 2:00 PM" }, { days: "Sunday", hours: "Closed" }, ], }, { id: "nyc", name: "New York", address: ["350 Fifth Avenue", "Floor 21", "New York, NY 10118"], email: "nyc@company.com", phone: "+1 (212) 555-0100", hours: [ { days: "Monday - Friday", hours: "9:00 AM - 6:00 PM" }, { days: "Weekend", hours: "Closed" }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Contact05({ heading = "Visit Our Offices", description = "Find the office nearest you or send us a message.", locations = defaultLocations, className, idBase = "contact-05", }: Contact05Props) { const [selectedLocation, setSelectedLocation] = React.useState(locations[0]?.id || "") const headingId = `${idBase}-heading` return (

{/* Header */}

{description && (

{description}

)}

{/* Map Placeholder */}

{/* Location Tabs */}

{locations.map((location) => ( ))}

{/* Contact Form */}

Send us a message

First name

Last name

Phone (optional)

Message

{heading}

{location.name}