Booking Confirmation

[V0_FILE]typescriptreact:file="app/track/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]sql:file="scripts/001-create-tables.sql" isMerged="true" -- Create customers table CREATE TABLE IF NOT EXISTS customers ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, phone VARCHAR(20) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create device_types table CREATE TABLE IF NOT EXISTS device_types ( id SERIAL PRIMARY KEY, name VARCHAR(100) NOT NULL, description TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create device_brands table CREATE TABLE IF NOT EXISTS device_brands ( id SERIAL PRIMARY KEY, name VARCHAR(100) NOT NULL, device_type_id INTEGER REFERENCES device_types(id), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create issue_types table CREATE TABLE IF NOT EXISTS issue_types ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, device_type_id INTEGER REFERENCES device_types(id), description TEXT, estimated_repair_time INTEGER, -- in hours base_price DECIMAL(10,2), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create bookings table CREATE TABLE IF NOT EXISTS bookings ( id SERIAL PRIMARY KEY, reference_number VARCHAR(50) UNIQUE NOT NULL, customer_id INTEGER REFERENCES customers(id), device_type_id INTEGER REFERENCES device_types(id), device_brand_id INTEGER REFERENCES device_brands(id), device_model VARCHAR(255) NOT NULL, issue_type_id INTEGER REFERENCES issue_types(id), issue_description TEXT NOT NULL, urgency VARCHAR(20) DEFAULT 'normal' CHECK (urgency IN ('normal', 'urgent')), status VARCHAR(50) DEFAULT 'pending' CHECK (status IN ('pending', 'received', 'diagnosed', 'in-progress', 'completed', 'ready', 'delivered', 'cancelled')), appointment_date DATE NOT NULL, appointment_time TIME NOT NULL, estimated_completion_date DATE, actual_completion_date DATE, total_cost DECIMAL(10,2), notes TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create booking_updates table for tracking progress CREATE TABLE IF NOT EXISTS booking_updates ( id SERIAL PRIMARY KEY, booking_id INTEGER REFERENCES bookings(id), status VARCHAR(50) NOT NULL, message TEXT NOT NULL, created_by VARCHAR(255), -- technician or system created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create technicians table CREATE TABLE IF NOT EXISTS technicians ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, phone VARCHAR(20), specialization TEXT[], -- array of device types they specialize in is_active BOOLEAN DEFAULT true, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create booking_assignments table CREATE TABLE IF NOT EXISTS booking_assignments ( id SERIAL PRIMARY KEY, booking_id INTEGER REFERENCES bookings(id), technician_id INTEGER REFERENCES technicians(id), assigned_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, completed_at TIMESTAMP, notes TEXT ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_bookings_reference ON bookings(reference_number); CREATE INDEX IF NOT EXISTS idx_bookings_customer ON bookings(customer_id); CREATE INDEX IF NOT EXISTS idx_bookings_status ON bookings(status); CREATE INDEX IF NOT EXISTS idx_bookings_appointment_date ON bookings(appointment_date); CREATE INDEX IF NOT EXISTS idx_customers_email ON customers(email); CREATE INDEX IF NOT EXISTS idx_booking_updates_booking ON booking_updates(booking_id); [V0_FILE]sql:file="scripts/002-seed-data.sql" isMerged="true" -- Insert device types INSERT INTO device_types (name, description) VALUES ('smartphone', 'Mobile phones and smartphones'), ('laptop', 'Laptops and notebooks'), ('tablet', 'Tablets and iPads'), ('audio', 'Audio devices like headphones and speakers') ON CONFLICT DO NOTHING; -- Insert device brands INSERT INTO device_brands (name, device_type_id) VALUES -- Smartphone brands ('Apple', (SELECT id FROM device_types WHERE name = 'smartphone')), ('Samsung', (SELECT id FROM device_types WHERE name = 'smartphone')), ('Google', (SELECT id FROM device_types WHERE name = 'smartphone')), ('OnePlus', (SELECT id FROM device_types WHERE name = 'smartphone')), ('Xiaomi', (SELECT id FROM device_types WHERE name = 'smartphone')), ('Other', (SELECT id FROM device_types WHERE name = 'smartphone')), -- Laptop brands ('Apple', (SELECT id FROM device_types WHERE name = 'laptop')), ('Dell', (SELECT id FROM device_types WHERE name = 'laptop')), ('HP', (SELECT id FROM device_types WHERE name = 'laptop')), ('Lenovo', (SELECT id FROM device_types WHERE name = 'laptop')), ('ASUS', (SELECT id FROM device_types WHERE name = 'laptop')), ('Other', (SELECT id FROM device_types WHERE name = 'laptop')), -- Tablet brands ('Apple', (SELECT id FROM device_types WHERE name = 'tablet')), ('Samsung', (SELECT id FROM device_types WHERE name = 'tablet')), ('Microsoft', (SELECT id FROM device_types WHERE name = 'tablet')), ('Other', (SELECT id FROM device_types WHERE name = 'tablet')), -- Audio device brands ('Apple', (SELECT id FROM device_types WHERE name = 'audio')), ('Sony', (SELECT id FROM device_types WHERE name = 'audio')), ('Bose', (SELECT id FROM device_types WHERE name = 'audio')), ('JBL', (SELECT id FROM device_types WHERE name = 'audio')), ('Other', (SELECT id FROM device_types WHERE name = 'audio')) ON CONFLICT DO NOTHING; -- Insert common issue types INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES -- Smartphone issues ('Cracked Screen', (SELECT id FROM device_types WHERE name = 'smartphone'), 'Screen replacement needed', 2, 15000.00), ('Battery Issues', (SELECT id FROM device_types WHERE name = 'smartphone'), 'Battery replacement or charging problems', 1, 8000.00), ('Water Damage', (SELECT id FROM device_types WHERE name = 'smartphone'), 'Device exposed to water or liquid', 4, 25000.00), ('Camera Problems', (SELECT id FROM device_types WHERE name = 'smartphone'), 'Camera not working or poor quality', 2, 12000.00), ('Charging Issues', (SELECT id FROM device_types WHERE name = 'smartphone'), 'Charging port or cable problems', 1, 6000.00), ('Software Problems', (SELECT id FROM device_types WHERE name = 'smartphone'), 'OS issues, apps not working', 1, 5000.00), -- Laptop issues ('Screen Replacement', (SELECT id FROM device_types WHERE name = 'laptop'), 'Laptop screen repair or replacement', 3, 35000.00), ('Keyboard Issues', (SELECT id FROM device_types WHERE name = 'laptop'), 'Keys not working or keyboard replacement', 2, 15000.00), ('Hard Drive Problems', (SELECT id FROM device_types WHERE name = 'laptop'), 'Storage issues or upgrade needed', 2, 20000.00), ('Overheating', (SELECT id FROM device_types WHERE name = 'laptop'), 'Cooling system problems', 3, 18000.00), ('Virus Removal', (SELECT id FROM device_types WHERE name = 'laptop'), 'Malware and virus cleaning', 2, 8000.00), ('Performance Issues', (SELECT id FROM device_types WHERE name = 'laptop'), 'Slow performance optimization', 2, 10000.00), -- Tablet issues ('Screen Replacement', (SELECT id FROM device_types WHERE name = 'tablet'), 'Tablet screen repair', 2, 25000.00), ('Battery Replacement', (SELECT id FROM device_types WHERE name = 'tablet'), 'Battery not holding charge', 2, 12000.00), ('Charging Port', (SELECT id FROM device_types WHERE name = 'tablet'), 'Charging port repair', 1, 8000.00), ('Software Issues', (SELECT id FROM device_types WHERE name = 'tablet'), 'OS problems or app issues', 1, 6000.00), ('Speaker Problems', (SELECT id FROM device_types WHERE name = 'tablet'), 'Audio output issues', 1, 7000.00), ('Camera Issues', (SELECT id FROM device_types WHERE name = 'tablet'), 'Camera not working', 2, 10000.00), -- Audio device issues ('No Sound', (SELECT id FROM device_types WHERE name = 'audio'), 'Audio output problems', 1, 5000.00), ('Bluetooth Issues', (SELECT id FROM device_types WHERE name = 'audio'), 'Connection problems', 1, 4000.00), ('Cable Problems', (SELECT id FROM device_types WHERE name = 'audio'), 'Wired connection issues', 1, 3000.00), ('Driver Replacement', (SELECT id FROM device_types WHERE name = 'audio'), 'Speaker driver replacement', 2, 8000.00), ('Microphone Issues', (SELECT id FROM device_types WHERE name = 'audio'), 'Mic not working', 1, 6000.00), ('Volume Problems', (SELECT id FROM device_types WHERE name = 'audio'), 'Volume control issues', 1, 4000.00) ON CONFLICT DO NOTHING; -- Insert sample technicians INSERT INTO technicians (name, email, phone, specialization, is_active) VALUES ('Adamu Ibrahim', 'adamu@jhobams.com', '0803-111-1111', ARRAY['smartphone', 'tablet'], true), ('Sarah Johnson', 'sarah@jhobams.com', '0803-222-2222', ARRAY['laptop'], true), ('Michael Okafor', 'michael@jhobams.com', '0803-333-3333', ARRAY['smartphone', 'audio'], true), ('Fatima Aliyu', 'fatima@jhobams.com', '0803-444-4444', ARRAY['laptop', 'tablet'], true) ON CONFLICT (email) DO NOTHING; [V0_FILE]typescriptreact:file="app/api/bookings/track/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { getBookingByReference, getBookingByEmail } from "@/lib/booking-service" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const reference = searchParams.get("reference") const email = searchParams.get("email") if (!reference && !email) { return NextResponse.json({ success: false, message: "Either reference or email is required" }, { status: 400 }) } let result if (reference) { result = await getBookingByReference(reference) } else if (email) { result = await getBookingByEmail(email) } if (!result || (Array.isArray(result) && result.length === 0)) { return NextResponse.json({ success: false, message: "No bookings found" }, { status: 404 }) } return NextResponse.json({ success: true, data: result }) } catch (error) { console.error("API Error:", error) return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 }) } } [V0_FILE]sql:file="scripts/003-update-device-types.sql" isMerged="true" -- Clear existing data DELETE FROM booking_updates; DELETE FROM booking_assignments; DELETE FROM bookings; DELETE FROM issue_types; DELETE FROM device_brands; DELETE FROM device_types; -- Insert new device types INSERT INTO device_types (name, description) VALUES ('phone', 'Mobile phones and smartphones'), ('laptop', 'Laptops and notebooks'), ('desktop', 'Desktop computers and workstations'), ('printer', 'Printers and printing devices'), ('charger', 'Chargers and power adapters'), ('photocopier', 'Photocopiers and multifunction devices'); -- Insert device brands for phones INSERT INTO device_brands (name, device_type_id) VALUES ('Apple', (SELECT id FROM device_types WHERE name = 'phone')), ('Samsung', (SELECT id FROM device_types WHERE name = 'phone')), ('Google', (SELECT id FROM device_types WHERE name = 'phone')), ('OnePlus', (SELECT id FROM device_types WHERE name = 'phone')), ('Xiaomi', (SELECT id FROM device_types WHERE name = 'phone')), ('Tecno', (SELECT id FROM device_types WHERE name = 'phone')), ('Infinix', (SELECT id FROM device_types WHERE name = 'phone')), ('Other', (SELECT id FROM device_types WHERE name = 'phone')); -- Insert device brands for laptops INSERT INTO device_brands (name, device_type_id) VALUES ('Apple', (SELECT id FROM device_types WHERE name = 'laptop')), ('Dell', (SELECT id FROM device_types WHERE name = 'laptop')), ('HP', (SELECT id FROM device_types WHERE name = 'laptop')), ('Lenovo', (SELECT id FROM device_types WHERE name = 'laptop')), ('ASUS', (SELECT id FROM device_types WHERE name = 'laptop')), ('Acer', (SELECT id FROM device_types WHERE name = 'laptop')), ('Toshiba', (SELECT id FROM device_types WHERE name = 'laptop')), ('Other', (SELECT id FROM device_types WHERE name = 'laptop')); -- Insert device brands for desktops INSERT INTO device_brands (name, device_type_id) VALUES ('Dell', (SELECT id FROM device_types WHERE name = 'desktop')), ('HP', (SELECT id FROM device_types WHERE name = 'desktop')), ('Lenovo', (SELECT id FROM device_types WHERE name = 'desktop')), ('ASUS', (SELECT id FROM device_types WHERE name = 'desktop')), ('Acer', (SELECT id FROM device_types WHERE name = 'desktop')), ('Custom Built', (SELECT id FROM device_types WHERE name = 'desktop')), ('Other', (SELECT id FROM device_types WHERE name = 'desktop')); -- Insert device brands for printers INSERT INTO device_brands (name, device_type_id) VALUES ('HP', (SELECT id FROM device_types WHERE name = 'printer')), ('Canon', (SELECT id FROM device_types WHERE name = 'printer')), ('Epson', (SELECT id FROM device_types WHERE name = 'printer')), ('Brother', (SELECT id FROM device_types WHERE name = 'printer')), ('Samsung', (SELECT id FROM device_types WHERE name = 'printer')), ('Lexmark', (SELECT id FROM device_types WHERE name = 'printer')), ('Other', (SELECT id FROM device_types WHERE name = 'printer')); -- Insert device brands for chargers INSERT INTO device_brands (name, device_type_id) VALUES ('Apple', (SELECT id FROM device_types WHERE name = 'charger')), ('Samsung', (SELECT id FROM device_types WHERE name = 'charger')), ('Dell', (SELECT id FROM device_types WHERE name = 'charger')), ('HP', (SELECT id FROM device_types WHERE name = 'charger')), ('Lenovo', (SELECT id FROM device_types WHERE name = 'charger')), ('Universal', (SELECT id FROM device_types WHERE name = 'charger')), ('Other', (SELECT id FROM device_types WHERE name = 'charger')); -- Insert device brands for photocopiers INSERT INTO device_brands (name, device_type_id) VALUES ('Canon', (SELECT id FROM device_types WHERE name = 'photocopier')), ('Xerox', (SELECT id FROM device_types WHERE name = 'photocopier')), ('Ricoh', (SELECT id FROM device_types WHERE name = 'photocopier')), ('Konica Minolta', (SELECT id FROM device_types WHERE name = 'photocopier')), ('Sharp', (SELECT id FROM device_types WHERE name = 'photocopier')), ('Kyocera', (SELECT id FROM device_types WHERE name = 'photocopier')), ('Other', (SELECT id FROM device_types WHERE name = 'photocopier')); -- Insert issue types for phones INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES ('Cracked Screen', (SELECT id FROM device_types WHERE name = 'phone'), 'Screen replacement needed', 2, 15000.00), ('Battery Issues', (SELECT id FROM device_types WHERE name = 'phone'), 'Battery replacement or charging problems', 1, 8000.00), ('Water Damage', (SELECT id FROM device_types WHERE name = 'phone'), 'Device exposed to water or liquid', 4, 25000.00), ('Camera Problems', (SELECT id FROM device_types WHERE name = 'phone'), 'Camera not working or poor quality', 2, 12000.00), ('Charging Issues', (SELECT id FROM device_types WHERE name = 'phone'), 'Charging port or cable problems', 1, 6000.00), ('Software Problems', (SELECT id FROM device_types WHERE name = 'phone'), 'OS issues, apps not working', 1, 5000.00); -- Insert issue types for laptops INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES ('Screen Replacement', (SELECT id FROM device_types WHERE name = 'laptop'), 'Laptop screen repair or replacement', 3, 35000.00), ('Keyboard Issues', (SELECT id FROM device_types WHERE name = 'laptop'), 'Keys not working or keyboard replacement', 2, 15000.00), ('Hard Drive Problems', (SELECT id FROM device_types WHERE name = 'laptop'), 'Storage issues or upgrade needed', 2, 20000.00), ('Overheating', (SELECT id FROM device_types WHERE name = 'laptop'), 'Cooling system problems', 3, 18000.00), ('Virus Removal', (SELECT id FROM device_types WHERE name = 'laptop'), 'Malware and virus cleaning', 2, 8000.00), ('Performance Issues', (SELECT id FROM device_types WHERE name = 'laptop'), 'Slow performance optimization', 2, 10000.00); -- Insert issue types for desktops INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES ('Won''t Turn On', (SELECT id FROM device_types WHERE name = 'desktop'), 'Power issues or hardware failure', 2, 12000.00), ('Slow Performance', (SELECT id FROM device_types WHERE name = 'desktop'), 'System optimization and cleanup', 2, 8000.00), ('Virus/Malware', (SELECT id FROM device_types WHERE name = 'desktop'), 'Virus removal and security setup', 3, 10000.00), ('Hardware Upgrade', (SELECT id FROM device_types WHERE name = 'desktop'), 'RAM, storage, or component upgrade', 2, 15000.00), ('Blue Screen Errors', (SELECT id FROM device_types WHERE name = 'desktop'), 'System crash troubleshooting', 3, 12000.00), ('Network Issues', (SELECT id FROM device_types WHERE name = 'desktop'), 'Internet and network connectivity', 1, 6000.00); -- Insert issue types for printers INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES ('Won''t Print', (SELECT id FROM device_types WHERE name = 'printer'), 'Printer not responding or printing', 1, 8000.00), ('Print Quality Issues', (SELECT id FROM device_types WHERE name = 'printer'), 'Poor print quality or streaks', 1, 6000.00), ('Paper Jam', (SELECT id FROM device_types WHERE name = 'printer'), 'Paper feeding problems', 1, 4000.00), ('Ink/Toner Problems', (SELECT id FROM device_types WHERE name = 'printer'), 'Cartridge or toner issues', 1, 5000.00), ('Connection Issues', (SELECT id FROM device_types WHERE name = 'printer'), 'Network or USB connectivity', 1, 5000.00), ('Scanner Problems', (SELECT id FROM device_types WHERE name = 'printer'), 'Scanning functionality issues', 2, 8000.00); -- Insert issue types for chargers INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES ('Not Charging', (SELECT id FROM device_types WHERE name = 'charger'), 'Charger not providing power', 1, 3000.00), ('Cable Damage', (SELECT id FROM device_types WHERE name = 'charger'), 'Frayed or broken cables', 1, 2500.00), ('Adapter Issues', (SELECT id FROM device_types WHERE name = 'charger'), 'Power adapter problems', 1, 4000.00), ('Port Problems', (SELECT id FROM device_types WHERE name = 'charger'), 'Charging port cleaning or repair', 1, 3500.00), ('Overheating', (SELECT id FROM device_types WHERE name = 'charger'), 'Charger getting too hot', 1, 4000.00), ('Compatibility Issues', (SELECT id FROM device_types WHERE name = 'charger'), 'Wrong charger type or voltage', 1, 2000.00); -- Insert issue types for photocopiers INSERT INTO issue_types (name, device_type_id, description, estimated_repair_time, base_price) VALUES ('Poor Copy Quality', (SELECT id FROM device_types WHERE name = 'photocopier'), 'Blurry or faded copies', 2, 12000.00), ('Paper Feed Issues', (SELECT id FROM device_types WHERE name = 'photocopier'), 'Paper jam or feeding problems', 1, 8000.00), ('Scanner Problems', (SELECT id FROM device_types WHERE name = 'photocopier'), 'Scanning functionality issues', 2, 10000.00), ('Toner Issues', (SELECT id FROM device_types WHERE name = 'photocopier'), 'Toner cartridge problems', 1, 6000.00), ('Network Setup', (SELECT id FROM device_types WHERE name = 'photocopier'), 'Network connectivity setup', 1, 7000.00), ('Maintenance Required', (SELECT id FROM device_types WHERE name = 'photocopier'), 'General maintenance and cleaning', 2, 15000.00); -- Update technician specializations UPDATE technicians SET specialization = ARRAY['phone', 'charger'] WHERE name = 'Adamu Ibrahim'; UPDATE technicians SET specialization = ARRAY['laptop', 'desktop'] WHERE name = 'Sarah Johnson'; UPDATE technicians SET specialization = ARRAY['printer', 'photocopier'] WHERE name = 'Michael Okafor'; UPDATE technicians SET specialization = ARRAY['laptop', 'desktop', 'phone'] WHERE name = 'Fatima Aliyu'; [V0_FILE]typescriptreact:file="lib/email-service.ts" isMerged="true" import { Resend } from "resend" const resend = new Resend(process.env.RESEND_API_KEY) export interface BookingEmailData { customerName: string customerEmail: string bookingReference: string deviceType: string deviceBrand: string deviceModel: string issueType: string appointmentDate: string appointmentTime: string urgency: string } export async function sendBookingConfirmationEmail(data: BookingEmailData) { try { const emailHtml = generateBookingConfirmationHTML(data) const result = await resend.emails.send({ from: "JHOBAMS MultiConcepts ", to: [data.customerEmail], subject: `Booking Confirmation - ${data.bookingReference}`, html: emailHtml, }) console.log("Email sent successfully:", result) return { success: true, messageId: result.data?.id } } catch (error) { console.error("Failed to send email:", error) return { success: false, error: error } } } export async function sendStatusUpdateEmail( customerEmail: string, customerName: string, bookingReference: string, status: string, message: string, deviceInfo: string, ) { try { const emailHtml = generateStatusUpdateHTML({ customerName, bookingReference, status, message, deviceInfo, }) const result = await resend.emails.send({ from: "JHOBAMS MultiConcepts ", to: [customerEmail], subject: `Repair Update - ${bookingReference}`, html: emailHtml, }) console.log("Status update email sent:", result) return { success: true, messageId: result.data?.id } } catch (error) { console.error("Failed to send status update email:", error) return { success: false, error: error } } } function generateBookingConfirmationHTML(data: BookingEmailData): string { const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric", }) } const formatTime = (timeString: string) => { const [hours, minutes] = timeString.split(":") const hour = Number.parseInt(hours) const ampm = hour >= 12 ? "PM" : "AM" const displayHour = hour % 12 || 12 return `${displayHour}:${minutes} ${ampm}` } return ` Booking Confirmation

🎉 Booking Confirmed!

Dear ${data.customerName},

Thank you for choosing JHOBAMS MultiConcepts Limited for your device repair needs. Your booking has been successfully confirmed.

Booking Details

Booking Reference: ${data.bookingReference}

Device: ${data.deviceBrand} ${data.deviceModel}

Issue: ${data.issueType}

Priority: ${data.urgency === "urgent" ? "Urgent (1-2 days)" : "Normal (3-5 days)"}

Appointment: ${formatDate(data.appointmentDate)} at ${formatTime(data.appointmentTime)}

What's Next?

Our team will contact you 24 hours before your appointment
Please bring your device and a valid ID to your appointment
We'll provide a detailed quote before starting any work
Repairs are typically completed within 1 week
All repairs come with a 1-month warranty

Contact Information

Address: No. 1 Hwoll, Zaria Rd, Farin Gada Rd, behind Vochmal Petro Station, Jos, Plateau

Phone: 0803 891 3567

Email: info@jhobams.com

Business Hours:
Mon - Fri: 8:00 AM - 4:00 PM
Saturday: 9:00 AM - 3:00 PM
Sunday: Closed

Track Your Repair

` } function generateStatusUpdateHTML(data: { customerName: string bookingReference: string status: string message: string deviceInfo: string }): string { const getStatusColor = (status: string) => { switch (status) { case "received": return "#3b82f6" case "diagnosed": return "#f59e0b" case "in-progress": return "#f97316" case "completed": return "#10b981" case "ready": return "#8b5cf6" default: return "#6b7280" } } const getStatusIcon = (status: string) => { switch (status) { case "received": return "📦" case "diagnosed": return "🔍" case "in-progress": return "🔧" case "completed": return "✅" case "ready": return "🎉" default: return "📋" } } return ` Repair Status Update

Dear ${data.customerName},

${getStatusIcon(data.status)} ${data.status.charAt(0).toUpperCase() + data.status.slice(1).replace("-", " ")}

${data.message}

Booking Reference: ${data.bookingReference}

Device: ${data.deviceInfo}

Need Help?

Phone: 0803 891 3567

Email: info@jhobams.com

Address: No. 1 Hwoll, Zaria Rd, Farin Gada Rd, behind Vochmal Petro Station, Jos, Plateau

Track Your Repair

` } [V0_FILE]typescriptreact:file="app/api/bookings/route.ts" isEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createBooking } from "@/lib/booking-service" export async function POST(request: NextRequest) { try { const bookingData = await request.json() // Validate required fields const requiredFields = [ "customerName", "customerEmail", "customerPhone", "deviceType", "deviceBrand", "deviceModel", "issueType", "issueDescription", "appointmentDate", "appointmentTime", ] for (const field of requiredFields) { if (!bookingData[field]) { return NextResponse.json({ success: false, message: `Missing required field: ${field}` }, { status: 400 }) } } // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(bookingData.customerEmail)) { return NextResponse.json({ success: false, message: "Invalid email format" }, { status: 400 }) } const result = await createBooking(bookingData) if (result.success) { return NextResponse.json(result, { status: 201 }) } else { return NextResponse.json(result, { status: 400 }) } } catch (error) { console.error("API Error:", error) return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/bookings/status/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { updateBookingStatus } from "@/lib/booking-service" export async function POST(request: NextRequest) { try { const { bookingId, status, message, createdBy } = await request.json() // Validate required fields if (!bookingId || !status || !message) { return NextResponse.json( { success: false, message: "Missing required fields: bookingId, status, message" }, { status: 400 }, ) } // Validate status values const validStatuses = [ "pending", "received", "diagnosed", "in-progress", "completed", "ready", "delivered", "cancelled", ] if (!validStatuses.includes(status)) { return NextResponse.json({ success: false, message: "Invalid status value" }, { status: 400 }) } const result = await updateBookingStatus(bookingId, status, message, createdBy || "system") if (result.success) { return NextResponse.json({ success: true, message: "Status updated successfully" }) } else { return NextResponse.json({ success: false, message: "Failed to update status" }, { status: 500 }) } } catch (error) { console.error("API Error:", error) return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/send-test-email/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { sendBookingConfirmationEmail, sendStatusUpdateEmail } from "@/lib/email-service" export async function POST(request: NextRequest) { try { const { type, ...data } = await request.json() if (type === "booking-confirmation") { const result = await sendBookingConfirmationEmail(data) return NextResponse.json(result) } else if (type === "status-update") { const result = await sendStatusUpdateEmail( data.customerEmail, data.customerName, data.bookingReference, data.status, data.message, data.deviceInfo, ) return NextResponse.json(result) } else { return NextResponse.json({ success: false, message: "Invalid email type" }, { status: 400 }) } } catch (error) { console.error("Test email error:", error) return NextResponse.json({ success: false, message: "Failed to send test email" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/email-test-form.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" export default function EmailTestForm() { const [emailType, setEmailType] = useState("") const [formData, setFormData] = useState({ customerName: "John Doe", customerEmail: "", bookingReference: "JHB-TEST123", deviceType: "phone", deviceBrand: "Apple", deviceModel: "iPhone 14 Pro", issueType: "Cracked Screen", appointmentDate: "2025-01-20", appointmentTime: "10:00", urgency: "normal", status: "received", message: "Your device has been received and is being assessed by our technicians.", deviceInfo: "Apple iPhone 14 Pro", }) const [isLoading, setIsLoading] = useState(false) const [result, setResult] = useState(null) const handleSendTestEmail = async () => { if (!formData.customerEmail) { alert("Please enter an email address") return } setIsLoading(true) setResult(null) try { const response = await fetch("/api/send-test-email", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ type: emailType, ...formData, }), }) const data = await response.json() setResult(data) } catch (error) { setResult({ success: false, error: "Failed to send email" }) } finally { setIsLoading(false) } } return ( Email System Test Test the email functionality for booking confirmations and status updates

Email Type

Test Email Address setFormData({ ...formData, customerEmail: e.target.value })} placeholder="Enter email to receive test" />

Customer Name setFormData({ ...formData, customerName: e.target.value })} />

{emailType === "status-update" && ( <>

Status

Status Message

setFormData({ ...formData, message: e.target.value })}
                rows={3}
              />
            </div>
          </>
        )}

<Button onClick={handleSendTestEmail} disabled={isLoading || !emailType || !formData.customerEmail}>
          {isLoading ? "Sending..." : "Send Test Email"}
        </Button>

{result && (
          <div className={`p-4 rounded-lg ${result.success ? "bg-green-50 text-green-800" : "bg-red-50 text-red-800"}`}>
            <h4 className="font-semibold">{result.success ? "Success!" : "Error"}</h4>
            <p>
              {result.success
                ? `Email sent successfully. Message ID: ${result.messageId}`
                : result.error || result.message}
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]plaintext:file=".env.example" isEdit="true" isMerged="true"
# Database Configuration
DATABASE_URL="postgresql://username:password@hostname:port/database_name"

# Application Settings
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Email Configuration (Resend)
RESEND_API_KEY="re_xxxxxxxxxxxxxxxxxxxxxxxxxx"

# Alternative Email Providers (choose one)
# SMTP Configuration
SMTP_HOST=""
SMTP_PORT=""
SMTP_USER=""
SMTP_PASS=""

# SendGrid
SENDGRID_API_KEY=""

# Mailgun
MAILGUN_API_KEY=""
MAILGUN_DOMAIN=""

# SMS Configuration (optional)
SMS_API_KEY=""
SMS_SENDER_ID=""
[V0_FILE]typescriptreact:file="package.json" isMerged="true"
{
  "name": "device-repair-booking",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "type-check": "tsc --noEmit",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:e2e": "playwright test",
    "test:e2e:ui": "playwright test --ui",
    "db:migrate": "node scripts/run-migrations.js",
    "db:seed": "node scripts/seed-database.js",
    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
    "@neondatabase/serverless": "^0.9.0",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@tanstack/react-query": "^5.0.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "lucide-react": "^0.263.1",
    "next": "14.0.0",
    "react": "^18",
    "react-dom": "^18",
    "resend": "^3.2.0",
    "sonner": "^1.0.0",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.22.0",
    "zustand": "^4.4.0"
  },
  "devDependencies": {
    "@playwright/test": "^1.40.0",
    "@testing-library/jest-dom": "^6.0.0",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "autoprefixer": "^10",
    "eslint": "^8",
    "eslint-config-next": "14.0.0",
    "eslint-config-prettier": "^9.0.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8",
    "prettier": "^3.0.0",
    "tailwindcss": "^3",
    "typescript": "^5"
  },
  "jest": {
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"],
    "moduleNameMapping": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts",
      "!src/app/layout.tsx"
    ]
  }
}
[V0_FILE]typescript:file="docs/DEVELOPMENT_TEAM.md" isMerged="true"
# Development Team Structure & Guidelines

## Team Organization

### Core Development Team

#### 1. **Technical Lead / Senior Full-Stack Developer**
**Responsibilities:**
- Architecture decisions and technical direction
- Code review and quality assurance
- Mentoring junior developers
- Performance optimization and scalability planning
- Integration with third-party services

**Required Skills:**
- 5+ years experience with React/Next.js
- Strong TypeScript and Node.js expertise
- Database design and optimization
- Cloud deployment (Vercel/AWS)
- Team leadership experience

#### 2. **Frontend Developer**
**Responsibilities:**
- UI/UX implementation
- Component library maintenance
- Mobile responsiveness
- Performance optimization
- User experience testing

**Required Skills:**
- 3+ years React/Next.js experience
- Strong CSS/Tailwind CSS skills
- Component design patterns
- Accessibility standards (WCAG)
- Testing frameworks (Jest, Playwright)

#### 3. **Backend Developer**
**Responsibilities:**
- API development and maintenance
- Database schema design
- Integration services (email, SMS, payments)
- Security implementation
- Performance monitoring

**Required Skills:**
- 3+ years Node.js/TypeScript experience
- Database management (PostgreSQL)
- API design and documentation
- Security best practices
- Monitoring and logging

#### 4. **DevOps Engineer**
**Responsibilities:**
- CI/CD pipeline management
- Infrastructure as code
- Monitoring and alerting
- Security compliance
- Performance optimization

**Required Skills:**
- Cloud platforms (Vercel, AWS, GCP)
- Docker and containerization
- CI/CD tools (GitHub Actions)
- Monitoring tools (DataDog, Sentry)
- Security scanning and compliance

### Extended Team (As Needed)

#### 5. **QA Engineer**
**Responsibilities:**
- Test strategy and planning
- Automated testing implementation
- Manual testing and bug reporting
- Performance testing
- Security testing

#### 6. **UI/UX Designer**
**Responsibilities:**
- User interface design
- User experience research
- Design system maintenance
- Prototyping and wireframing
- Usability testing

## Development Workflow

### 1. **Sprint Planning (2-week sprints)**
- **Monday**: Sprint planning meeting (2 hours)
- **Daily**: Stand-up meetings (15 minutes)
- **Friday**: Sprint review and retrospective (1 hour)

### 2. **Code Development Process**

#### Feature Development Flow:
1. **Ticket Creation**: Product owner creates detailed tickets in project management tool
2. **Technical Design**: Developer creates technical design document for complex features
3. **Branch Creation**: Create feature branch from `develop`
4. **Development**: Implement feature with tests
5. **Code Review**: Minimum 2 reviewers for all PRs
6. **Testing**: QA testing in staging environment
7. **Deployment**: Merge to `main` and deploy to production

#### Branch Strategy:
\`\`\`
main (production)
├── develop (staging)
├── feature/booking-system-v2
├── feature/photo-upload
├── hotfix/critical-bug-fix
└── release/v1.2.0
\`\`\`

### 3. **Code Standards**

#### TypeScript Configuration:
\`\`\`json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}
\`\`\`

#### ESLint Rules:
\`\`\`json
{
  "extends": [
    "next/core-web-vitals",
    "@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": "warn",
    "prefer-const": "error",
    "no-var": "error"
  }
}
\`\`\`

#### Code Review Checklist:
- [ ] Code follows TypeScript strict mode
- [ ] All functions have proper type annotations
- [ ] Error handling is implemented
- [ ] Tests are written and passing
- [ ] Documentation is updated
- [ ] Performance considerations addressed
- [ ] Security vulnerabilities checked
- [ ] Accessibility standards met

### 4. **Testing Strategy**

#### Test Pyramid:
\`\`\`
        E2E Tests (10%)
       ├─────────────────┤
      Integration Tests (20%)
     ├─────────────────────────┤
    Unit Tests (70%)
   ├─────────────────────────────────┤
\`\`\`

#### Testing Requirements:
- **Unit Tests**: 80% code coverage minimum
- **Integration Tests**: All API endpoints
- **E2E Tests**: Critical user journeys
- **Performance Tests**: Load testing for peak usage

### 5. **Security Guidelines**

#### Security Checklist:
- [ ] Input validation on all user inputs
- [ ] SQL injection prevention
- [ ] XSS protection implemented
- [ ] CSRF tokens for state-changing operations
- [ ] Rate limiting on all endpoints
- [ ] Secure headers configured
- [ ] Environment variables for secrets
- [ ] Regular dependency updates
- [ ] Security scanning in CI/CD

#### Data Protection:
- [ ] PII data encryption at rest
- [ ] Secure data transmission (HTTPS)
- [ ] Access logging and monitoring
- [ ] Regular security audits
- [ ] GDPR compliance measures

### 6. **Performance Standards**

#### Performance Targets:
- **First Contentful Paint**: < 1.5s
- **Largest Contentful Paint**: < 2.5s
- **Cumulative Layout Shift**: < 0.1
- **First Input Delay**: < 100ms
- **API Response Time**: < 200ms (95th percentile)

#### Monitoring:
- Real User Monitoring (RUM)
- Core Web Vitals tracking
- Error rate monitoring
- Database performance monitoring
- Third-party service monitoring

### 7. **Documentation Standards**

#### Required Documentation:
- [ ] API documentation (OpenAPI/Swagger)
- [ ] Component documentation (Storybook)
- [ ] Database schema documentation
- [ ] Deployment procedures
- [ ] Troubleshooting guides
- [ ] Architecture decision records (ADRs)

### 8. **Communication Protocols**

#### Daily Communication:
- **Slack**: Immediate communication and updates
- **Stand-ups**: Daily progress and blockers
- **Code Reviews**: Technical discussions in PRs
- **Documentation**: Technical decisions and processes

#### Weekly Communication:
- **Sprint Planning**: Feature prioritization
- **Tech Talks**: Knowledge sharing sessions
- **Architecture Reviews**: System design discussions

### 9. **Professional Development**

#### Learning & Growth:
- **Monthly Tech Budget**: $200 per developer for courses/books
- **Conference Attendance**: 1 major conference per year
- **Internal Tech Talks**: Monthly knowledge sharing
- **Code Kata Sessions**: Weekly skill improvement
- **Open Source Contributions**: Encouraged and supported

#### Career Progression:
- **Junior → Mid-level**: 2-3 years, technical competency
- **Mid-level → Senior**: 3-5 years, leadership and mentoring
- **Senior → Lead**: 5+ years, architecture and team management

### 10. **Tools & Technologies**

#### Development Tools:
- **IDE**: VS Code with recommended extensions
- **Version Control**: Git with GitHub
- **Project Management**: Linear or Jira
- **Communication**: Slack, Discord
- **Documentation**: Notion, GitBook

#### Monitoring & Analytics:
- **Error Tracking**: Sentry
- **Performance**: Vercel Analytics, DataDog
- **User Analytics**: PostHog, Google Analytics
- **Uptime Monitoring**: Pingdom, UptimeRobot

### 11. **Onboarding Process**

#### Week 1: Environment Setup
- [ ] Development environment setup
- [ ] Access to all necessary tools and services
- [ ] Code repository access and local setup
- [ ] Introduction to team and stakeholders

#### Week 2: Codebase Familiarization
- [ ] Architecture overview session
- [ ] Code walkthrough with senior developer
- [ ] First small bug fix or feature
- [ ] Code review process participation

#### Week 3-4: Feature Development
- [ ] Assigned first medium-complexity feature
- [ ] Pair programming sessions
- [ ] Testing and deployment process
- [ ] Documentation contribution

### 12. **Emergency Procedures**

#### Production Issues:
1. **Immediate Response**: < 15 minutes acknowledgment
2. **Escalation Path**: Developer → Tech Lead → CTO
3. **Communication**: Status page updates, stakeholder notifications
4. **Resolution**: Hotfix deployment process
5. **Post-Mortem**: Root cause analysis and prevention measures

#### On-Call Rotation:
- **Primary**: Senior developers rotate weekly
- **Secondary**: Tech lead as backup
- **Escalation**: CTO for critical business impact
- **Compensation**: Time off or monetary compensation for after-hours work

This comprehensive development team structure ensures professional software development practices, clear responsibilities, and scalable processes for growing the device repair booking platform.
[V0_FILE]sql:file="scripts/004-add-photo-storage.sql" isMerged="true"
-- Create photos table for device damage documentation
CREATE TABLE IF NOT EXISTS booking_photos (
    id SERIAL PRIMARY KEY,
    booking_id INTEGER REFERENCES bookings(id) ON DELETE CASCADE,
    file_name VARCHAR(255) NOT NULL,
    file_path VARCHAR(500) NOT NULL,
    file_size INTEGER NOT NULL,
    mime_type VARCHAR(100) NOT NULL,
    upload_type VARCHAR(50) DEFAULT 'damage_photo' CHECK (upload_type IN ('damage_photo', 'repair_progress', 'completed_repair')),
    description TEXT,
    uploaded_by VARCHAR(255) DEFAULT 'customer',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Create indexes for better performance
CREATE INDEX IF NOT EXISTS idx_booking_photos_booking_id ON booking_photos(booking_id);
CREATE INDEX IF NOT EXISTS idx_booking_photos_upload_type ON booking_photos(upload_type);
CREATE INDEX IF NOT EXISTS idx_booking_photos_created_at ON booking_photos(created_at);

-- Add photo count to bookings for quick reference
ALTER TABLE bookings ADD COLUMN IF NOT EXISTS photo_count INTEGER DEFAULT 0;

-- Create trigger to update photo count
CREATE OR REPLACE FUNCTION update_booking_photo_count()
RETURNS TRIGGER AS $$
BEGIN
    IF TG_OP = 'INSERT' THEN
        UPDATE bookings 
        SET photo_count = photo_count + 1 
        WHERE id = NEW.booking_id;
        RETURN NEW;
    ELSIF TG_OP = 'DELETE' THEN
        UPDATE bookings 
        SET photo_count = photo_count - 1 
        WHERE id = OLD.booking_id;
        RETURN OLD;
    END IF;
    RETURN NULL;
END;
$$ LANGUAGE plpgsql;

CREATE TRIGGER trigger_update_booking_photo_count
    AFTER INSERT OR DELETE ON booking_photos
    FOR EACH ROW EXECUTE FUNCTION update_booking_photo_count();

-- Create team members table
CREATE TABLE IF NOT EXISTS team_members (
    id SERIAL PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    role VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL,
    avatar_url VARCHAR(500),
    bio TEXT,
    skills TEXT[], -- array of skills
    github_username VARCHAR(100),
    linkedin_url VARCHAR(500),
    is_active BOOLEAN DEFAULT true,
    hire_date DATE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert development team members
INSERT INTO team_members (name, email, role, department, bio, skills, github_username, hire_date, is_active) VALUES
('Sarah Johnson', 'sarah.johnson@jhobams.com', 'Technical Lead', 'Engineering', 'Full-stack developer with 8+ years experience in React and Node.js. Passionate about clean code and mentoring junior developers.', ARRAY['React', 'Next.js', 'TypeScript', 'Node.js', 'PostgreSQL', 'AWS'], 'sarahjohnson', '2023-01-15', true),
('Michael Chen', 'michael.chen@jhobams.com', 'Senior Frontend Developer', 'Engineering', 'Frontend specialist focused on creating beautiful, accessible user interfaces. Expert in modern React patterns and performance optimization.', ARRAY['React', 'TypeScript', 'Tailwind CSS', 'Jest', 'Playwright', 'Figma'], 'michaelchen', '2023-03-01', true),
('Aisha Okafor', 'aisha.okafor@jhobams.com', 'Backend Developer', 'Engineering', 'Backend engineer specializing in API design and database optimization. Strong focus on security and scalability.', ARRAY['Node.js', 'PostgreSQL', 'Redis', 'Docker', 'AWS', 'GraphQL'], 'aishaokafor', '2023-05-10', true),
('David Kim', 'david.kim@jhobams.com', 'DevOps Engineer', 'Engineering', 'DevOps specialist ensuring smooth deployments and robust infrastructure. Expert in cloud platforms and CI/CD pipelines.', ARRAY['AWS', 'Docker', 'Kubernetes', 'Terraform', 'GitHub Actions', 'Monitoring'], 'davidkim', '2023-07-20', true),
('Emma Wilson', 'emma.wilson@jhobams.com', 'QA Engineer', 'Quality Assurance', 'Quality assurance engineer focused on automated testing and ensuring excellent user experiences across all platforms.', ARRAY['Jest', 'Playwright', 'Cypress', 'Postman', 'Performance Testing', 'Accessibility'], 'emmawilson', '2023-09-01', true),
('James Rodriguez', 'james.rodriguez@jhobams.com', 'UI/UX Designer', 'Design', 'Product designer creating intuitive user experiences. Specializes in user research, prototyping, and design systems.', ARRAY['Figma', 'Adobe Creative Suite', 'Prototyping', 'User Research', 'Design Systems', 'Accessibility'], 'jamesrodriguez', '2023-11-15', true)
ON CONFLICT (email) DO NOTHING;

-- Create project assignments table
CREATE TABLE IF NOT EXISTS project_assignments (
    id SERIAL PRIMARY KEY,
    team_member_id INTEGER REFERENCES team_members(id),
    project_name VARCHAR(255) NOT NULL,
    role_in_project VARCHAR(100) NOT NULL,
    start_date DATE NOT NULL,
    end_date DATE,
    is_active BOOLEAN DEFAULT true,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Insert current project assignments
INSERT INTO project_assignments (team_member_id, project_name, role_in_project, start_date, is_active) VALUES
((SELECT id FROM team_members WHERE email = 'sarah.johnson@jhobams.com'), 'Device Repair Booking System', 'Technical Lead', '2023-01-15', true),
((SELECT id FROM team_members WHERE email = 'michael.chen@jhobams.com'), 'Device Repair Booking System', 'Frontend Lead', '2023-03-01', true),
((SELECT id FROM team_members WHERE email = 'aisha.okafor@jhobams.com'), 'Device Repair Booking System', 'Backend Developer', '2023-05-10', true),
((SELECT id FROM team_members WHERE email = 'david.kim@jhobams.com'), 'Device Repair Booking System', 'DevOps Engineer', '2023-07-20', true),
((SELECT id FROM team_members WHERE email = 'emma.wilson@jhobams.com'), 'Device Repair Booking System', 'QA Engineer', '2023-09-01', true),
((SELECT id FROM team_members WHERE email = 'james.rodriguez@jhobams.com'), 'Device Repair Booking System', 'UI/UX Designer', '2023-11-15', true);
[V0_FILE]typescript:file="components/photo-upload.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { X, Upload, ImageIcon, AlertCircle } from "lucide-react"
import { isValidImageFile, isValidFileSize } from "@/lib/services/photo-service"

interface PhotoUploadProps {
  onPhotosChange: (photos: File[]) => void
  maxPhotos?: number
  existingPhotos?: File[]
}

export default function PhotoUpload({ onPhotosChange, maxPhotos = 5, existingPhotos = [] }: PhotoUploadProps) {
  const [photos, setPhotos] = useState<File[]>(existingPhotos)
  const [dragActive, setDragActive] = useState(false)
  const [errors, setErrors] = useState<string[]>([])

const handleFiles = useCallback(
    (files: FileList | null) => {
      if (!files) return

const newErrors: string[] = []
      const validFiles: File[] = []

Array.from(files).forEach((file) => {
        if (!isValidImageFile(file)) {
          newErrors.push(`${file.name}: Only JPEG, PNG, and WebP images are allowed`)
          return
        }

if (!isValidFileSize(file)) {
          newErrors.push(`${file.name}: File size must be less than 5MB`)
          return
        }

if (photos.length + validFiles.length >= maxPhotos) {
          newErrors.push(`Maximum ${maxPhotos} photos allowed`)
          return
        }

validFiles.push(file)
      })

if (newErrors.length > 0) {
        setErrors(newErrors)
        setTimeout(() => setErrors([]), 5000)
      }

if (validFiles.length > 0) {
        const updatedPhotos = [...photos, ...validFiles]
        setPhotos(updatedPhotos)
        onPhotosChange(updatedPhotos)
      }
    },
    [photos, maxPhotos, onPhotosChange],
  )

const handleDrag = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true)
    } else if (e.type === "dragleave") {
      setDragActive(false)
    }
  }, [])

const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault()
      e.stopPropagation()
      setDragActive(false)
      handleFiles(e.dataTransfer.files)
    },
    [handleFiles],
  )

const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      handleFiles(e.target.files)
    },
    [handleFiles],
  )

const removePhoto = useCallback(
    (index: number) => {
      const updatedPhotos = photos.filter((_, i) => i !== index)
      setPhotos(updatedPhotos)
      onPhotosChange(updatedPhotos)
    },
    [photos, onPhotosChange],
  )

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <ImageIcon className="h-5 w-5" />
          Device Photos
        </CardTitle>
        <CardDescription>
          Upload photos of your device damage (optional). This helps our technicians prepare for your repair. Maximum{" "}
          {maxPhotos} photos, 5MB each.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Upload Area */}
        <div
          className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
            dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400"
          }`}
          onDragEnter={handleDrag}
          onDragLeave={handleDrag}
          onDragOver={handleDrag}
          onDrop={handleDrop}
        >
          <Upload className="h-8 w-8 text-gray-400 mx-auto mb-2" />
          <p className="text-sm text-gray-600 mb-2">Drag and drop photos here, or click to select</p>
          <Input
            type="file"
            multiple
            accept="image/jpeg,image/jpg,image/png,image/webp"
            onChange={handleInputChange}
            className="hidden"
            id="photo-upload"
          />
          <Label htmlFor="photo-upload">
            <Button variant="outline" className="cursor-pointer bg-transparent" asChild>
              <span>Choose Photos</span>
            </Button>
          </Label>
        </div>

{/* Error Messages */}
        {errors.length > 0 && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-3">
            <div className="flex items-center gap-2 text-red-800 mb-2">
              <AlertCircle className="h-4 w-4" />
              <span className="font-medium">Upload Errors:</span>
            </div>
            <ul className="text-sm text-red-700 space-y-1">
              {errors.map((error, index) => (
                <li key={index}>• {error}</li>
              ))}
            </ul>
          </div>
        )}

{/* Photo Previews */}
        {photos.length > 0 && (
          <div className="space-y-3">
            <h4 className="font-medium text-sm">
              Uploaded Photos ({photos.length}/{maxPhotos})
            </h4>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
              {photos.map((photo, index) => (
                <div key={index} className="relative group">
                  <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden">
                    <img
                      src={URL.createObjectURL(photo) || "/placeholder.svg"}
                      alt={`Device photo ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <button
                    onClick={() => removePhoto(index)}
                    className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <X className="h-3 w-3" />
                  </button>
                  <p className="text-xs text-gray-500 mt-1 truncate">{photo.name}</p>
                </div>
              ))}
            </div>
          </div>
        )}

{/* Upload Instructions */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
          <h4 className="font-medium text-blue-900 mb-2">Photo Tips:</h4>
          <ul className="text-sm text-blue-800 space-y-1">
            <li>• Take clear, well-lit photos of the damage</li>
            <li>• Include multiple angles if possible</li>
            <li>• Show the overall device and close-ups of damage</li>
            <li>• Avoid blurry or dark photos</li>
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="components/photo-gallery.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { X, Download, Eye, Calendar, User } from "lucide-react"
import type { BookingPhoto } from "@/lib/services/photo-service"

interface PhotoGalleryProps {
  photos: BookingPhoto[]
  title?: string
  showUploadInfo?: boolean
}

export default function PhotoGallery({ photos, title = "Device Photos", showUploadInfo = true }: PhotoGalleryProps) {
  const [selectedPhoto, setSelectedPhoto] = useState<BookingPhoto | null>(null)

const getUploadTypeLabel = (type: string) => {
    switch (type) {
      case "damage_photo":
        return "Damage Photo"
      case "repair_progress":
        return "Repair Progress"
      case "completed_repair":
        return "Completed Repair"
      default:
        return "Photo"
    }
  }

const getUploadTypeColor = (type: string) => {
    switch (type) {
      case "damage_photo":
        return "bg-red-100 text-red-800"
      case "repair_progress":
        return "bg-yellow-100 text-yellow-800"
      case "completed_repair":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const formatFileSize = (bytes: number) => {
    if (bytes === 0) return "0 Bytes"
    const k = 1024
    const sizes = ["Bytes", "KB", "MB", "GB"]
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

if (photos.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>{title}</CardTitle>
          <CardDescription>No photos have been uploaded for this booking.</CardDescription>
        </CardHeader>
      </Card>
    )
  }

return (
    <>
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            {title}
            <Badge variant="secondary">
              {photos.length} photo{photos.length !== 1 ? "s" : ""}
            </Badge>
          </CardTitle>
          <CardDescription>Photos uploaded for this device repair booking</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {photos.map((photo) => (
              <div key={photo.id} className="group relative">
                <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer">
                  <img
                    src={photo.filePath || "/placeholder.svg"}
                    alt={photo.description || `Device photo`}
                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
                    onClick={() => setSelectedPhoto(photo)}
                  />
                  <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all flex items-center justify-center">
                    <Eye className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                  </div>
                </div>

<div className="mt-2 space-y-1">
                  <Badge variant="secondary" className={`text-xs ${getUploadTypeColor(photo.uploadType)}`}>
                    {getUploadTypeLabel(photo.uploadType)}
                  </Badge>

{showUploadInfo && (
                    <div className="text-xs text-gray-500 space-y-0.5">
                      <div className="flex items-center gap-1">
                        <User className="h-3 w-3" />
                        {photo.uploadedBy}
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="h-3 w-3" />
                        {formatDate(photo.createdAt)}
                      </div>
                      <div>{formatFileSize(photo.fileSize)}</div>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Photo Modal */}
      <Dialog open={!!selectedPhoto} onOpenChange={() => setSelectedPhoto(null)}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-auto">
          <DialogHeader>
            <DialogTitle className="flex items-center justify-between">
              <span>Device Photo</span>
              <div className="flex items-center gap-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    if (selectedPhoto) {
                      const link = document.createElement("a")
                      link.href = selectedPhoto.filePath
                      link.download = selectedPhoto.fileName
                      link.click()
                    }
                  }}
                >
                  <Download className="h-4 w-4 mr-1" />
                  Download
                </Button>
                <Button variant="ghost" size="sm" onClick={() => setSelectedPhoto(null)}>
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </DialogTitle>
          </DialogHeader>

{selectedPhoto && (
            <div className="space-y-4">
              <div className="flex justify-center">
                <img
                  src={selectedPhoto.filePath || "/placeholder.svg"}
                  alt={selectedPhoto.description || "Device photo"}
                  className="max-w-full max-h-[60vh] object-contain rounded-lg"
                />
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                  <h4 className="font-semibold mb-2">Photo Details</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Type:</span>
                      <Badge className={getUploadTypeColor(selectedPhoto.uploadType)}>
                        {getUploadTypeLabel(selectedPhoto.uploadType)}
                      </Badge>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">File Name:</span>
                      <span className="font-mono text-xs">{selectedPhoto.fileName}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">File Size:</span>
                      <span>{formatFileSize(selectedPhoto.fileSize)}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Format:</span>
                      <span className="uppercase">{selectedPhoto.mimeType.split("/")[1]}</span>
                    </div>
                  </div>
                </div>

<div>
                  <h4 className="font-semibold mb-2">Upload Information</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-gray-600">Uploaded By:</span>
                      <span className="capitalize">{selectedPhoto.uploadedBy}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">Upload Date:</span>
                      <span>{formatDate(selectedPhoto.createdAt)}</span>
                    </div>
                  </div>
                </div>
              </div>

{selectedPhoto.description && (
                <div>
                  <h4 className="font-semibold mb-2">Description</h4>
                  <p className="text-gray-700 bg-gray-50 p-3 rounded-lg">{selectedPhoto.description}</p>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescript:file="app/api/photos/upload/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { writeFile, mkdir } from "fs/promises"
import { join } from "path"
import {
  savePhotoRecord,
  generateUniqueFileName,
  isValidImageFile,
  isValidFileSize,
} from "@/lib/services/photo-service"

export async function POST(request: NextRequest) {
  try {
    const formData = await request.formData()
    const files = formData.getAll("photos") as File[]
    const bookingId = formData.get("bookingId") as string
    const uploadType = (formData.get("uploadType") as string) || "damage_photo"
    const description = formData.get("description") as string
    const uploadedBy = (formData.get("uploadedBy") as string) || "customer"

if (!bookingId) {
      return NextResponse.json({ success: false, message: "Booking ID is required" }, { status: 400 })
    }

if (!files || files.length === 0) {
      return NextResponse.json({ success: false, message: "No files provided" }, { status: 400 })
    }

const uploadResults = []
    const errors = []

// Create upload directory if it doesn't exist
    const uploadDir = join(process.cwd(), "public", "uploads", "bookings", bookingId)
    await mkdir(uploadDir, { recursive: true })

for (const file of files) {
      try {
        // Validate file
        if (!isValidImageFile(file)) {
          errors.push(`${file.name}: Invalid file type. Only JPEG, PNG, and WebP are allowed.`)
          continue
        }

if (!isValidFileSize(file)) {
          errors.push(`${file.name}: File too large. Maximum size is 5MB.`)
          continue
        }

// Generate unique filename
        const uniqueFileName = generateUniqueFileName(file.name)
        const filePath = join(uploadDir, uniqueFileName)
        const publicPath = `/uploads/bookings/${bookingId}/${uniqueFileName}`

// Save file to disk
        const bytes = await file.arrayBuffer()
        const buffer = Buffer.from(bytes)
        await writeFile(filePath, buffer)

// Save record to database
        const photoRecord = await savePhotoRecord({
          bookingId: Number.parseInt(bookingId),
          fileName: uniqueFileName,
          filePath: publicPath,
          fileSize: file.size,
          mimeType: file.type,
          uploadType: uploadType as any,
          description,
          uploadedBy,
        })

if (photoRecord.success) {
          uploadResults.push({
            id: photoRecord.photoId,
            fileName: uniqueFileName,
            filePath: publicPath,
            originalName: file.name,
          })
        } else {
          errors.push(`${file.name}: Failed to save to database`)
        }
      } catch (error) {
        console.error(`Error processing file ${file.name}:`, error)
        errors.push(`${file.name}: Processing failed`)
      }
    }

return NextResponse.json({
      success: uploadResults.length > 0,
      message: `${uploadResults.length} file(s) uploaded successfully`,
      uploadedFiles: uploadResults,
      errors: errors.length > 0 ? errors : undefined,
    })
  } catch (error) {
    console.error("Photo upload error:", error)
    return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/photos/[bookingId]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getBookingPhotos, getPhotosByType } from "@/lib/services/photo-service"

export async function GET(request: NextRequest, { params }: { params: { bookingId: string } }) {
  try {
    const { searchParams } = new URL(request.url)
    const uploadType = searchParams.get("type")
    const bookingId = Number.parseInt(params.bookingId)

if (isNaN(bookingId)) {
      return NextResponse.json({ success: false, message: "Invalid booking ID" }, { status: 400 })
    }

let photos
    if (uploadType) {
      photos = await getPhotosByType(bookingId, uploadType)
    } else {
      photos = await getBookingPhotos(bookingId)
    }

return NextResponse.json({
      success: true,
      data: photos,
    })
  } catch (error) {
    console.error("Error fetching photos:", error)
    return NextResponse.json({ success: false, message: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescript:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import Link from "next/link"
import Header from "@/components/layout/header"
import Footer from "@/components/layout/footer"
import { Users, Calendar, Wrench, Mail, BarChart3, Settings, FileText, Camera, Shield } from "lucide-react"

export default function AdminDashboard() {
  const quickStats = [
    { label: "Active Bookings", value: "24", icon: Calendar, color: "text-blue-600" },
    { label: "Team Members", value: "6", icon: Users, color: "text-green-600" },
    { label: "Completed Repairs", value: "156", icon: Wrench, color: "text-purple-600" },
    { label: "Customer Satisfaction", value: "98%", icon: BarChart3, color: "text-orange-600" },
  ]

const adminTools = [
    {
      title: "Team Management",
      description: "View and manage development team members",
      href: "/admin/team",
      icon: Users,
      color: "bg-blue-50 text-blue-600",
    },
    {
      title: "Email System Test",
      description: "Test booking confirmation and status update emails",
      href: "/admin/email-test",
      icon: Mail,
      color: "bg-green-50 text-green-600",
    },
    {
      title: "Photo Management",
      description: "Manage customer device photos and documentation",
      href: "/admin/photos",
      icon: Camera,
      color: "bg-purple-50 text-purple-600",
    },
    {
      title: "System Settings",
      description: "Configure application settings and preferences",
      href: "/admin/settings",
      icon: Settings,
      color: "bg-orange-50 text-orange-600",
    },
    {
      title: "Documentation",
      description: "Access development guides and API documentation",
      href: "/admin/docs",
      icon: FileText,
      color: "bg-indigo-50 text-indigo-600",
    },
    {
      title: "Security Audit",
      description: "Review security logs and system health",
      href: "/admin/security",
      icon: Shield,
      color: "bg-red-50 text-red-600",
    },
  ]

return (
    <div className="min-h-screen bg-gray-50">
      <Header title="Admin Dashboard" />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Welcome Section */}
        <div className="mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Welcome to Admin Dashboard</h2>
          <p className="text-gray-600">
            Manage your device repair booking system, team, and monitor system performance.
          </p>
        </div>

{/* Quick Stats */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {quickStats.map((stat) => (
            <Card key={stat.label}>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-gray-600">{stat.label}</p>
                    <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
                  </div>
                  <stat.icon className={`h-8 w-8 ${stat.color}`} />
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Admin Tools */}
        <Card>
          <CardHeader>
            <CardTitle>Administration Tools</CardTitle>
            <CardDescription>Access various administrative functions and system management tools</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {adminTools.map((tool) => (
                <Link key={tool.title} href={tool.href}>
                  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow cursor-pointer">
                    <div className={`inline-flex p-3 rounded-lg ${tool.color} mb-4`}>
                      <tool.icon className="h-6 w-6" />
                    </div>
                    <h3 className="font-semibold text-gray-900 mb-2">{tool.title}</h3>
                    <p className="text-sm text-gray-600">{tool.description}</p>
                  </div>
                </Link>
              ))}
            </div>
          </CardContent>
        </Card>

{/* Recent Activity */}
        <div className="mt-8">
          <Card>
            <CardHeader>
              <CardTitle>Recent System Activity</CardTitle>
              <CardDescription>Latest updates and system events</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between py-3 border-b">
                  <div className="flex items-center gap-3">
                    <div className="h-2 w-2 bg-green-500 rounded-full"></div>
                    <span className="text-sm">New booking received - JHB-ABC123</span>
                  </div>
                  <Badge variant="secondary">2 min ago</Badge>
                </div>
                <div className="flex items-center justify-between py-3 border-b">
                  <div className="flex items-center gap-3">
                    <div className="h-2 w-2 bg-blue-500 rounded-full"></div>
                    <span className="text-sm">Repair completed - JHB-XYZ789</span>
                  </div>
                  <Badge variant="secondary">15 min ago</Badge>
                </div>
                <div className="flex items-center justify-between py-3 border-b">
                  <div className="flex items-center gap-3">
                    <div className="h-2 w-2 bg-orange-500 rounded-full"></div>
                    <span className="text-sm">Team member Sarah Johnson updated project status</span>
                  </div>
                  <Badge variant="secondary">1 hour ago</Badge>
                </div>
                <div className="flex items-center justify-between py-3">
                  <div className="flex items-center gap-3">
                    <div className="h-2 w-2 bg-purple-500 rounded-full"></div>
                    <span className="text-sm">System backup completed successfully</span>
                  </div>
                  <Badge variant="secondary">3 hours ago</Badge>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/track/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Search, Package, Wrench, CheckCircle, Clock } from "lucide-react"
import PhotoGallery from "@/components/photo-gallery"
import type { BookingPhoto } from "@/lib/services/photo-service"
import Header from "@/components/layout/header"

export default function TrackPage() {
  const [trackingId, setTrackingId] = useState("")
  const [trackingResult, setTrackingResult] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [photos, setPhotos] = useState<BookingPhoto[]>([])

const handleTrack = async () => {
    if (!trackingId.trim()) return

setIsLoading(true)

// Simulate API call
    setTimeout(async () => {
      // Mock tracking data
      const mockData = {
        id: trackingId,
        status: "in-progress",
        device: "iPhone 14 Pro",
        issue: "Cracked Screen",
        customerName: "John Doe",
        submittedDate: "2024-01-15",
        estimatedCompletion: "2024-01-17",
        updates: [
          {
            date: "2024-01-15 10:30 AM",
            status: "received",
            message: "Device received and initial assessment completed",
          },
          {
            date: "2024-01-15 02:15 PM",
            status: "diagnosed",
            message: "Issue diagnosed: Screen replacement required. Parts ordered.",
          },
          {
            date: "2024-01-16 09:00 AM",
            status: "in-progress",
            message: "Repair in progress. Screen replacement started.",
          },
        ],
      }

setTrackingResult(mockData)

// Fetch photos for this booking
      try {
        const photoResponse = await fetch(`/api/photos/${trackingId}`)
        if (photoResponse.ok) {
          const photoData = await photoResponse.json()
          if (photoData.success) {
            setPhotos(photoData.data)
          }
        }
      } catch (error) {
        console.error("Error fetching photos:", error)
      }

setIsLoading(false)
    }, 1500)
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "received":
        return <Package className="h-5 w-5 text-blue-600" />
      case "diagnosed":
        return <Search className="h-5 w-5 text-yellow-600" />
      case "in-progress":
        return <Wrench className="h-5 w-5 text-orange-600" />
      case "completed":
        return <CheckCircle className="h-5 w-5 text-green-600" />
      default:
        return <Clock className="h-5 w-5 text-gray-600" />
    }
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "received":
        return <Badge variant="secondary">Received</Badge>
      case "diagnosed":
        return <Badge className="bg-yellow-100 text-yellow-800">Diagnosed</Badge>
      case "in-progress":
        return <Badge className="bg-orange-100 text-orange-800">In Progress</Badge>
      case "completed":
        return <Badge className="bg-green-100 text-green-800">Completed</Badge>
      case "ready":
        return <Badge className="bg-blue-100 text-blue-800">Ready for Pickup</Badge>
      default:
        return <Badge variant="outline">Unknown</Badge>
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <Header title="Track Your Repair">
        <Link href="/" className="flex items-center text-blue-600 hover:text-blue-700">
          <ArrowLeft className="h-5 w-5 mr-2" />
          Back to Home
        </Link>
      </Header>

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Tracking Input */}
        <Card className="mb-8">
          <CardHeader>
            <CardTitle>Enter Your Tracking Information</CardTitle>
            <CardDescription>
              Enter your booking reference number or email address to track your repair status
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex space-x-4">
              <div className="flex-1">
                <Label htmlFor="tracking">Booking Reference or Email</Label>
                <Input
                  id="tracking"
                  placeholder="e.g., JHB-ABC123XYZ or your.email@example.com"
                  value={trackingId}
                  onChange={(e) => setTrackingId(e.target.value)}
                  onKeyPress={(e) => e.key === "Enter" && handleTrack()}
                />
              </div>
              <div className="flex items-end">
                <Button onClick={handleTrack} disabled={isLoading || !trackingId.trim()}>
                  {isLoading ? (
                    <>
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                      Tracking...
                    </>
                  ) : (
                    <>
                      <Search className="h-4 w-4 mr-2" />
                      Track
                    </>
                  )}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Tracking Results */}
        {trackingResult && (
          <div className="space-y-6">
            {/* Status Overview */}
            <Card>
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle>Repair Status</CardTitle>
                    <CardDescription>Booking Reference: #{trackingResult.id}</CardDescription>
                  </div>
                  {getStatusBadge(trackingResult.status)}
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <h4 className="font-semibold mb-2">Device Information</h4>
                    <p className="text-gray-600 mb-1">Device: {trackingResult.device}</p>
                    <p className="text-gray-600 mb-1">Issue: {trackingResult.issue}</p>
                    <p className="text-gray-600">Customer: {trackingResult.customerName}</p>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2">Timeline</h4>
                    <p className="text-gray-600 mb-1">Submitted: {trackingResult.submittedDate}</p>
                    <p className="text-gray-600">Est. Completion: {trackingResult.estimatedCompletion}</p>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Device Photos */}
            {photos.length > 0 && <PhotoGallery photos={photos} title="Device Photos" showUploadInfo={true} />}

{/* Progress Timeline */}
            <Card>
              <CardHeader>
                <CardTitle>Repair Progress</CardTitle>
                <CardDescription>Track the progress of your device repair</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {trackingResult.updates.map((update: any, index: number) => (
                    <div key={index} className="flex items-start space-x-4">
                      <div className="flex-shrink-0 mt-1">{getStatusIcon(update.status)}</div>
                      <div className="flex-1">
                        <div className="flex items-center justify-between">
                          <h4 className="font-medium text-gray-900">
                            {update.status.charAt(0).toUpperCase() + update.status.slice(1).replace("-", " ")}
                          </h4>
                          <span className="text-sm text-gray-500">{update.date}</span>
                        </div>
                        <p className="text-gray-600 text-sm mt-1">{update.message}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* Next Steps */}
            <Card>
              <CardHeader>
                <CardTitle>What's Next?</CardTitle>
              </CardHeader>
              <CardContent>
                {trackingResult.status === "in-progress" && (
                  <div className="bg-blue-50 p-4 rounded-lg">
                    <p className="text-blue-800">
                      Your device is currently being repaired. We'll notify you once it's ready for pickup. Estimated
                      completion: <strong>{trackingResult.estimatedCompletion}</strong>
                    </p>
                  </div>
                )}
                {trackingResult.status === "completed" && (
                  <div className="bg-green-50 p-4 rounded-lg">
                    <p className="text-green-800 mb-2">
                      🎉 Great news! Your device repair is complete and ready for pickup.
                    </p>
                    <p className="text-green-700 text-sm">
                      Please bring your booking reference and a valid ID when collecting your device.
                    </p>
                  </div>
                )}
                {trackingResult.status === "received" && (
                  <div className="bg-yellow-50 p-4 rounded-lg">
                    <p className="text-yellow-800">
                      We've received your device and are conducting an initial assessment. You'll receive an update
                      within 24 hours.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>

{/* Contact Information */}
            <Card>
              <CardHeader>
                <CardTitle>Need Help?</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <h4 className="font-semibold mb-2">Contact Us</h4>
                    <p className="text-gray-600 text-sm mb-1">📧 info@jhobams.com</p>
                    <p className="text-gray-600 text-sm mb-1">📞 0803 891 3567</p>
                    <p className="text-gray-600 text-sm mb-1">📍 No. 1 Hwoll, Zaria Rd, Farin Gada Rd</p>
                    <p className="text-gray-600 text-sm mb-1">Behind Vochmal Petro Station, Jos, Plateau</p>
                    <p className="text-gray-600 text-sm">💬 Live chat available 8 AM - 4 PM</p>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2">Business Hours</h4>
                    <p className="text-gray-600 text-sm mb-1">Mon - Fri: 8:00 AM - 4:00 PM</p>
                    <p className="text-gray-600 text-sm mb-1">Saturday: 9:00 AM - 3:00 PM</p>
                    <p className="text-gray-600 text-sm">Sunday: Closed</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

{/* No Results Message */}
        {trackingResult === null && trackingId && !isLoading && (
          <Card>
            <CardContent className="text-center py-8">
              <div className="text-gray-400 mb-4">
                <Search className="h-12 w-12 mx-auto" />
              </div>
              <h3 className="text-lg font-semibold text-gray-900 mb-2">No Results Found</h3>
              <p className="text-gray-600 mb-4">
                We couldn't find any repair records matching your search. Please check your booking reference or email
                address.
              </p>
              <Button variant="outline" onClick={() => setTrackingId("")}>
                Try Again
              </Button>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/email-test/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import EmailTestForm from "@/components/email-test-form"
import Header from "@/components/layout/header"

export default function EmailTestPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <Header title="Email System Test" />
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="text-center mb-8">
          <p className="text-gray-600 mt-2">Test booking confirmation and status update emails</p>
        </div>
        <EmailTestForm />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/database.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { neon } from "@neondatabase/serverless"

// Make database connection optional for development/preview
let sql: any = null

if (process.env.DATABASE_URL) {
  sql = neon(process.env.DATABASE_URL)
} else {
  console.warn("DATABASE_URL environment variable is not set. Database features will be disabled.")
  // Create a mock sql function for development
  sql = () => Promise.resolve([])
}

export { sql }

// Database connection test
export async function testConnection() {
  if (!process.env.DATABASE_URL) {
    console.warn("Database connection test skipped - DATABASE_URL not configured")
    return false
  }

try {
    const result = await sql`SELECT NOW()`
    console.log("Database connected successfully:", result[0])
    return true
  } catch (error) {
    console.error("Database connection failed:", error)
    return false
  }
}

// Helper function to generate booking reference
export function generateBookingReference(): string {
  const prefix = "JHB"
  const timestamp = Date.now().toString(36).toUpperCase()
  const random = Math.random().toString(36).substr(2, 3).toUpperCase()
  return `${prefix}-${timestamp}${random}`
}

// Helper function to check if database is available
export function isDatabaseAvailable(): boolean {
  return !!process.env.DATABASE_URL
}
[V0_FILE]typescriptreact:file="lib/booking-service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { sql, isDatabaseAvailable } from "./database"
import { sendBookingConfirmationEmail, type BookingEmailData } from "./email-service"

export interface BookingData {
  customerName: string
  customerEmail: string
  customerPhone: string
  deviceType: string
  deviceBrand: string
  deviceModel: string
  issueType: string
  issueDescription: string
  urgency: "normal" | "urgent"
  appointmentDate: string
  appointmentTime: string
  photos?: File[]
}

export interface BookingResult {
  success: boolean
  bookingReference?: string
  message: string
}

export async function createBooking(data: BookingData): Promise<BookingResult> {
  // Check if database is available
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - returning mock success response")
    const mockReference = `JHB-${Date.now().toString(36).toUpperCase()}${Math.random().toString(36).substr(2, 3).toUpperCase()}`

// Still try to send confirmation email if email service is configured
    try {
      const emailData: BookingEmailData = {
        customerName: data.customerName,
        customerEmail: data.customerEmail,
        bookingReference: mockReference,
        deviceType: data.deviceType,
        deviceBrand: data.deviceBrand,
        deviceModel: data.deviceModel,
        issueType: data.issueType,
        appointmentDate: data.appointmentDate,
        appointmentTime: data.appointmentTime,
        urgency: data.urgency,
      }

await sendBookingConfirmationEmail(emailData)
    } catch (emailError) {
      console.error("Failed to send confirmation email:", emailError)
    }

return {
      success: true,
      bookingReference: mockReference,
      message: "Booking created successfully (demo mode)",
    }
  }

try {
    // Start transaction
    await sql`BEGIN`

// Insert or get customer
    const customerResult = await sql`
      INSERT INTO customers (name, email, phone)
      VALUES (${data.customerName}, ${data.customerEmail}, ${data.customerPhone})
      ON CONFLICT (email) 
      DO UPDATE SET 
        name = EXCLUDED.name,
        phone = EXCLUDED.phone,
        updated_at = CURRENT_TIMESTAMP
      RETURNING id
    `
    const customerId = customerResult[0].id

// Get device type ID
    const deviceTypeResult = await sql`
      SELECT id FROM device_types WHERE name = ${data.deviceType}
    `
    const deviceTypeId = deviceTypeResult[0]?.id

// Get device brand ID
    const deviceBrandResult = await sql`
      SELECT id FROM device_brands 
      WHERE name = ${data.deviceBrand} AND device_type_id = ${deviceTypeId}
    `
    const deviceBrandId = deviceBrandResult[0]?.id

// Get issue type ID
    const issueTypeResult = await sql`
      SELECT id, estimated_repair_time FROM issue_types 
      WHERE name = ${data.issueType} AND device_type_id = ${deviceTypeId}
    `
    const issueTypeId = issueTypeResult[0]?.id
    const estimatedRepairTime = issueTypeResult[0]?.estimated_repair_time || 24

// Generate booking reference
    const bookingReference = `JHB-${Date.now().toString(36).toUpperCase()}${Math.random().toString(36).substr(2, 3).toUpperCase()}`

// Calculate estimated completion date
    const appointmentDate = new Date(data.appointmentDate)
    const estimatedCompletion = new Date(appointmentDate)
    estimatedCompletion.setHours(estimatedCompletion.getHours() + estimatedRepairTime)

// Insert booking
    const bookingResult = await sql`
      INSERT INTO bookings (
        reference_number, customer_id, device_type_id, device_brand_id,
        device_model, issue_type_id, issue_description, urgency,
        appointment_date, appointment_time, estimated_completion_date
      ) VALUES (
        ${bookingReference}, ${customerId}, ${deviceTypeId}, ${deviceBrandId},
        ${data.deviceModel}, ${issueTypeId}, ${data.issueDescription}, ${data.urgency},
        ${data.appointmentDate}, ${data.appointmentTime}, ${estimatedCompletion.toISOString().split("T")[0]}
      ) RETURNING id
    `
    const bookingId = bookingResult[0].id

// Insert initial booking update
    await sql`
      INSERT INTO booking_updates (booking_id, status, message, created_by)
      VALUES (${bookingId}, 'pending', 'Booking created and appointment scheduled', 'system')
    `

// Commit transaction
    await sql`COMMIT`

// Handle photo uploads if any
    if (data.photos && data.photos.length > 0) {
      try {
        const formData = new FormData()
        data.photos.forEach((photo: File) => {
          formData.append("photos", photo)
        })
        formData.append("bookingId", bookingId.toString())
        formData.append("uploadType", "damage_photo")
        formData.append("uploadedBy", "customer")

const photoResponse = await fetch("/api/photos/upload", {
          method: "POST",
          body: formData,
        })

if (!photoResponse.ok) {
          console.error("Failed to upload photos")
        }
      } catch (photoError) {
        console.error("Error uploading photos:", photoError)
        // Don't fail the booking if photo upload fails
      }
    }

// Send confirmation email
    try {
      const emailData: BookingEmailData = {
        customerName: data.customerName,
        customerEmail: data.customerEmail,
        bookingReference,
        deviceType: data.deviceType,
        deviceBrand: data.deviceBrand,
        deviceModel: data.deviceModel,
        issueType: data.issueType,
        appointmentDate: data.appointmentDate,
        appointmentTime: data.appointmentTime,
        urgency: data.urgency,
      }

await sendBookingConfirmationEmail(emailData)
    } catch (emailError) {
      console.error("Failed to send confirmation email:", emailError)
      // Don't fail the booking if email fails
    }

return {
      success: true,
      bookingReference,
      message: "Booking created successfully",
    }
  } catch (error) {
    // Rollback transaction
    await sql`ROLLBACK`
    console.error("Error creating booking:", error)
    return {
      success: false,
      message: "Failed to create booking. Please try again.",
    }
  }
}

export async function updateBookingStatus(bookingId: number, status: string, message: string, createdBy = "system") {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - status update skipped")
    return { success: false, error: "Database not available" }
  }

try {
    // Update booking status
    await sql`
      UPDATE bookings 
      SET status = ${status}, updated_at = CURRENT_TIMESTAMP
      WHERE id = ${bookingId}
    `

// Insert status update
    await sql`
      INSERT INTO booking_updates (booking_id, status, message, created_by)
      VALUES (${bookingId}, ${status}, ${message}, ${createdBy})
    `

// Get booking details for email
    const bookingDetails = await sql`
      SELECT 
        b.reference_number,
        c.name as customer_name,
        c.email as customer_email,
        dt.name as device_type,
        db.name as device_brand,
        b.device_model
      FROM bookings b
      JOIN customers c ON b.customer_id = c.id
      JOIN device_types dt ON b.device_type_id = dt.id
      JOIN device_brands db ON b.device_brand_id = db.id
      WHERE b.id = ${bookingId}
    `

if (bookingDetails.length > 0) {
      const booking = bookingDetails[0]

// Send status update email
      try {
        const { sendStatusUpdateEmail } = await import("./email-service")
        await sendStatusUpdateEmail(
          booking.customer_email,
          booking.customer_name,
          booking.reference_number,
          status,
          message,
          `${booking.device_brand} ${booking.device_model}`,
        )
      } catch (emailError) {
        console.error("Failed to send status update email:", emailError)
      }
    }

return { success: true }
  } catch (error) {
    console.error("Error updating booking status:", error)
    return { success: false, error }
  }
}

export async function getBookingByReference(reference: string) {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - returning mock data")
    return {
      id: 1,
      reference_number: reference,
      customer_name: "Demo User",
      customer_email: "demo@example.com",
      device_type_name: "phone",
      device_brand_name: "Apple",
      device_model: "iPhone 14 Pro",
      issue_type_name: "Cracked Screen",
      status: "in-progress",
      created_at: new Date().toISOString(),
      updates: [
        {
          status: "received",
          message: "Device received and initial assessment completed",
          created_at: new Date().toISOString(),
          created_by: "system",
        },
      ],
    }
  }

try {
    const result = await sql`
      SELECT 
        b.*,
        c.name as customer_name,
        c.email as customer_email,
        c.phone as customer_phone,
        dt.name as device_type_name,
        db.name as device_brand_name,
        it.name as issue_type_name
      FROM bookings b
      JOIN customers c ON b.customer_id = c.id
      JOIN device_types dt ON b.device_type_id = dt.id
      JOIN device_brands db ON b.device_brand_id = db.id
      JOIN issue_types it ON b.issue_type_id = it.id
      WHERE b.reference_number = ${reference}
    `

if (result.length === 0) {
      return null
    }

const booking = result[0]

// Get booking updates
    const updates = await sql`
      SELECT status, message, created_at, created_by
      FROM booking_updates
      WHERE booking_id = ${booking.id}
      ORDER BY created_at ASC
    `

return {
      ...booking,
      updates,
    }
  } catch (error) {
    console.error("Error fetching booking:", error)
    return null
  }
}

export async function getBookingByEmail(email: string) {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - returning empty array")
    return []
  }

try {
    const result = await sql`
      SELECT 
        b.*,
        c.name as customer_name,
        dt.name as device_type_name,
        db.name as device_brand_name,
        it.name as issue_type_name
      FROM bookings b
      JOIN customers c ON b.customer_id = c.id
      JOIN device_types dt ON b.device_type_id = dt.id
      JOIN device_brands db ON b.device_brand_id = db.id
      JOIN issue_types it ON b.issue_type_id = it.id
      WHERE c.email = ${email}
      ORDER BY b.created_at DESC
    `

return result
  } catch (error) {
    console.error("Error fetching bookings by email:", error)
    return []
  }
}
[V0_FILE]typescriptreact:file="lib/services/photo-service.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { sql, isDatabaseAvailable } from "@/lib/database"

export interface PhotoUpload {
  bookingId: number
  fileName: string
  filePath: string
  fileSize: number
  mimeType: string
  uploadType: "damage_photo" | "repair_progress" | "completed_repair"
  description?: string
  uploadedBy?: string
}

export interface BookingPhoto {
  id: number
  bookingId: number
  fileName: string
  filePath: string
  fileSize: number
  mimeType: string
  uploadType: string
  description?: string
  uploadedBy: string
  createdAt: string
}

export async function savePhotoRecord(
  photoData: PhotoUpload,
): Promise<{ success: boolean; photoId?: number; error?: string }> {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - photo record not saved")
    return {
      success: true,
      photoId: Math.floor(Math.random() * 1000),
    }
  }

try {
    const result = await sql`
      INSERT INTO booking_photos (
        booking_id, file_name, file_path, file_size, mime_type, 
        upload_type, description, uploaded_by
      ) VALUES (
        ${photoData.bookingId}, ${photoData.fileName}, ${photoData.filePath}, 
        ${photoData.fileSize}, ${photoData.mimeType}, ${photoData.uploadType}, 
        ${photoData.description || null}, ${photoData.uploadedBy || "customer"}
      ) RETURNING id
    `

return {
      success: true,
      photoId: result[0].id,
    }
  } catch (error) {
    console.error("Error saving photo record:", error)
    return {
      success: false,
      error: "Failed to save photo record",
    }
  }
}

export async function getBookingPhotos(bookingId: number): Promise<BookingPhoto[]> {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - returning empty photos array")
    return []
  }

try {
    const result = await sql`
      SELECT 
        id, booking_id, file_name, file_path, file_size, mime_type,
        upload_type, description, uploaded_by, created_at
      FROM booking_photos
      WHERE booking_id = ${bookingId}
      ORDER BY created_at ASC
    `

return result.map((row) => ({
      id: row.id,
      bookingId: row.booking_id,
      fileName: row.file_name,
      filePath: row.file_path,
      fileSize: row.file_size,
      mimeType: row.mime_type,
      uploadType: row.upload_type,
      description: row.description,
      uploadedBy: row.uploaded_by,
      createdAt: row.created_at,
    }))
  } catch (error) {
    console.error("Error fetching booking photos:", error)
    return []
  }
}

export async function deletePhoto(photoId: number): Promise<{ success: boolean; error?: string }> {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - photo deletion skipped")
    return { success: false, error: "Database not available" }
  }

try {
    await sql`
      DELETE FROM booking_photos WHERE id = ${photoId}
    `

return { success: true }
  } catch (error) {
    console.error("Error deleting photo:", error)
    return {
      success: false,
      error: "Failed to delete photo",
    }
  }
}

export async function getPhotosByType(bookingId: number, uploadType: string): Promise<BookingPhoto[]> {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - returning empty photos array")
    return []
  }

// Utility function to validate file types
export function isValidImageFile(file: File): boolean {
  const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp"]
  return allowedTypes.includes(file.type)
}

// Utility function to validate file size (max 5MB)
export function isValidFileSize(file: File): boolean {
  const maxSize = 5 * 1024 * 1024 // 5MB in bytes
  return file.size <= maxSize
}

// Generate unique filename
export function generateUniqueFileName(originalName: string): string {
  const timestamp = Date.now()
  const random = Math.random().toString(36).substring(2, 8)
  const extension = originalName.split(".").pop()
  return `${timestamp}-${random}.${extension}`
}
[V0_FILE]typescriptreact:file="components/database-status.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Badge } from "@/components/ui/badge"
import { AlertCircle, CheckCircle } from "lucide-react"

export default function DatabaseStatus() {
  const [isConnected, setIsConnected] = useState<boolean | null>(null)

useEffect(() => {
    // Check if DATABASE_URL is available
    const hasDatabase = !!process.env.NEXT_PUBLIC_DATABASE_AVAILABLE
    setIsConnected(hasDatabase)
  }, [])

if (isConnected === null) {
    return null
  }

return (
    <div className="fixed bottom-4 right-4 z-50">
      <Badge
        variant={isConnected ? "default" : "secondary"}
        className={`flex items-center gap-2 ${
          isConnected
            ? "bg-green-100 text-green-800 border-green-200"
            : "bg-yellow-100 text-yellow-800 border-yellow-200"
        }`}
      >
        {isConnected ? (
          <>
            <CheckCircle className="h-3 w-3" />
            Database Connected
          </>
        ) : (
          <>
            <AlertCircle className="h-3 w-3" />
            Demo Mode
          </>
        )}
      </Badge>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata, Viewport } from "next"
import { Inter } from 'next/font/google'
import "./globals.css"
import DatabaseStatus from "@/components/database-status"
import PWAInstall from "@/components/pwa-install"
import PWAStatus from "@/components/pwa-status"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "JHOBAMS - Device Repair Booking",
  description: "Professional device repair services - Book your repair appointment online",
  manifest: "/manifest.json",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "JHOBAMS Repair",
  },
  formatDetection: {
    telephone: false,
  },
  openGraph: {
    type: "website",
    siteName: "JHOBAMS Device Repair",
    title: "JHOBAMS - Professional Device Repair Services",
    description: "Expert device repair services for phones, tablets, laptops and more. Book online, track your repair, and get your device fixed fast!",
  },
  twitter: {
    card: "summary",
    title: "JHOBAMS - Device Repair Booking",
    description: "Professional device repair services - Book your repair appointment online",
  },
}

export const viewport: Viewport = {
  themeColor: "#3b82f6",
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        {/* PWA Meta Tags */}
        <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <meta name="apple-mobile-web-app-title" content="JHOBAMS Repair" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="msapplication-TileColor" content="#3b82f6" />
        <meta name="msapplication-tap-highlight" content="no" />
      </head>
      <body className={inter.className}>
        {children}
        <DatabaseStatus />
        <PWAInstall />
        <PWAStatus />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/admin/team/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Github, Linkedin, Mail, Calendar, Users, Code, Briefcase } from "lucide-react"
import { sql, isDatabaseAvailable } from "@/lib/database"
import Header from "@/components/layout/header"
import Footer from "@/components/layout/footer"

async function getTeamMembers() {
  if (!isDatabaseAvailable()) {
    console.warn("Database not available - returning mock team data")
    return [
      {
        id: 1,
        name: "Sarah Johnson",
        email: "sarah.johnson@jhobams.com",
        role: "Technical Lead",
        department: "Engineering",
        bio: "Full-stack developer with 8+ years experience in React and Node.js. Passionate about clean code and mentoring junior developers.",
        skills: ["React", "Next.js", "TypeScript", "Node.js", "PostgreSQL", "AWS"],
        github_username: "sarahjohnson",
        linkedin_url: "https://linkedin.com/in/sarahjohnson",
        hire_date: "2023-01-15",
        project_name: "Device Repair Booking System",
        role_in_project: "Technical Lead",
        is_active: true,
        avatar_url: null,
      },
      {
        id: 2,
        name: "Michael Chen",
        email: "michael.chen@jhobams.com",
        role: "Senior Frontend Developer",
        department: "Engineering",
        bio: "Frontend specialist focused on creating beautiful, accessible user interfaces. Expert in modern React patterns and performance optimization.",
        skills: ["React", "TypeScript", "Tailwind CSS", "Jest", "Playwright", "Figma"],
        github_username: "michaelchen",
        linkedin_url: "https://linkedin.com/in/michaelchen",
        hire_date: "2023-03-01",
        project_name: "Device Repair Booking System",
        role_in_project: "Frontend Lead",
        is_active: true,
        avatar_url: null,
      },
      {
        id: 3,
        name: "Aisha Okafor",
        email: "aisha.okafor@jhobams.com",
        role: "Backend Developer",
        department: "Engineering",
        bio: "Backend engineer specializing in API design and database optimization. Strong focus on security and scalability.",
        skills: ["Node.js", "PostgreSQL", "Redis", "Docker", "AWS", "GraphQL"],
        github_username: "aishaokafor",
        linkedin_url: "https://linkedin.com/in/aishaokafor",
        hire_date: "2023-05-10",
        project_name: "Device Repair Booking System",
        role_in_project: "Backend Developer",
        is_active: true,
        avatar_url: null,
      },
      {
        id: 4,
        name: "David Kim",
        email: "david.kim@jhobams.com",
        role: "DevOps Engineer",
        department: "Engineering",
        bio: "DevOps specialist ensuring smooth deployments and robust infrastructure. Expert in cloud platforms and CI/CD pipelines.",
        skills: ["AWS", "Docker", "Kubernetes", "Terraform", "GitHub Actions", "Monitoring"],
        github_username: "davidkim",
        linkedin_url: "https://linkedin.com/in/davidkim",
        hire_date: "2023-07-20",
        project_name: "Device Repair Booking System",
        role_in_project: "DevOps Engineer",
        is_active: true,
        avatar_url: null,
      },
      {
        id: 5,
        name: "Emma Wilson",
        email: "emma.wilson@jhobams.com",
        role: "QA Engineer",
        department: "Quality Assurance",
        bio: "Quality assurance engineer focused on automated testing and ensuring excellent user experiences across all platforms.",
        skills: ["Jest", "Playwright", "Cypress", "Postman", "Performance Testing", "Accessibility"],
        github_username: "emmawilson",
        linkedin_url: "https://linkedin.com/in/emmawilson",
        hire_date: "2023-09-01",
        project_name: "Device Repair Booking System",
        role_in_project: "QA Engineer",
        is_active: true,
        avatar_url: null,
      },
      {
        id: 6,
        name: "James Rodriguez",
        email: "james.rodriguez@jhobams.com",
        role: "UI/UX Designer",
        department: "Design",
        bio: "Product designer creating intuitive user experiences. Specializes in user research, prototyping, and design systems.",
        skills: ["Figma", "Adobe Creative Suite", "Prototyping", "User Research", "Design Systems", "Accessibility"],
        github_username: "jamesrodriguez",
        linkedin_url: "https://linkedin.com/in/jamesrodriguez",
        hire_date: "2023-11-15",
        project_name: "Device Repair Booking System",
        role_in_project: "UI/UX Designer",
        is_active: true,
        avatar_url: null,
      },
    ]
  }

try {
    const result = await sql`
      SELECT 
        tm.*,
        pa.project_name,
        pa.role_in_project,
        pa.start_date as project_start_date
      FROM team_members tm
      LEFT JOIN project_assignments pa ON tm.id = pa.team_member_id AND pa.is_active = true
      WHERE tm.is_active = true
      ORDER BY tm.hire_date ASC
    `
    return result
  } catch (error) {
    console.error("Error fetching team members:", error)
    return []
  }
}

export default async function TeamPage() {
  const teamMembers = await getTeamMembers()

const getDepartmentColor = (department: string) => {
    switch (department.toLowerCase()) {
      case "engineering":
        return "bg-blue-100 text-blue-800"
      case "design":
        return "bg-purple-100 text-purple-800"
      case "quality assurance":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
    })
  }

return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <Header title="Development Team" />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Welcome Section */}
        <div className="text-center mb-8">
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Meet the talented professionals building and maintaining the JHOBAMS device repair booking platform. Our
            team combines technical expertise with a passion for creating exceptional user experiences.
          </p>
          {!isDatabaseAvailable() && (
            <div className="mt-4 bg-yellow-50 border border-yellow-200 rounded-lg p-3 max-w-md mx-auto">
              <p className="text-sm text-yellow-800">
                <strong>Demo Mode:</strong> Showing sample team data
              </p>
            </div>
          )}
        </div>

{/* Team Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardContent className="p-6 text-center">
              <Users className="h-8 w-8 text-blue-600 mx-auto mb-2" />
              <div className="text-2xl font-bold text-gray-900">{teamMembers.length}</div>
              <div className="text-sm text-gray-600">Team Members</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <Code className="h-8 w-8 text-green-600 mx-auto mb-2" />
              <div className="text-2xl font-bold text-gray-900">
                {teamMembers.filter((m) => m.department === "Engineering").length}
              </div>
              <div className="text-sm text-gray-600">Engineers</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <Briefcase className="h-8 w-8 text-purple-600 mx-auto mb-2" />
              <div className="text-2xl font-bold text-gray-900">
                {new Set(teamMembers.map((m) => m.department)).size}
              </div>
              <div className="text-sm text-gray-600">Departments</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-6 text-center">
              <Calendar className="h-8 w-8 text-orange-600 mx-auto mb-2" />
              <div className="text-2xl font-bold text-gray-900">2+</div>
              <div className="text-sm text-gray-600">Years Active</div>
            </CardContent>
          </Card>
        </div>

{/* Team Members Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {teamMembers.map((member) => (
            <Card key={member.id} className="hover:shadow-lg transition-shadow">
              <CardHeader className="text-center">
                <Avatar className="h-20 w-20 mx-auto mb-4">
                  <AvatarImage
                    src={member.avatar_url || `/placeholder.svg?height=80&width=80&text=${getInitials(member.name)}`}
                    alt={member.name}
                  />
                  <AvatarFallback className="text-lg">{getInitials(member.name)}</AvatarFallback>
                </Avatar>
                <CardTitle className="text-xl">{member.name}</CardTitle>
                <CardDescription className="space-y-2">
                  <div className="font-medium text-gray-900">{member.role}</div>
                  <Badge className={getDepartmentColor(member.department)}>{member.department}</Badge>
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {/* Bio */}
                <p className="text-sm text-gray-600 leading-relaxed">{member.bio}</p>

{/* Current Project */}
                {member.project_name && (
                  <div className="bg-blue-50 p-3 rounded-lg">
                    <div className="text-sm font-medium text-blue-900">Current Project</div>
                    <div className="text-sm text-blue-800">{member.project_name}</div>
                    <div className="text-xs text-blue-600">{member.role_in_project}</div>
                  </div>
                )}

{/* Skills */}
                {member.skills && member.skills.length > 0 && (
                  <div>
                    <div className="text-sm font-medium text-gray-900 mb-2">Skills</div>
                    <div className="flex flex-wrap gap-1">
                      {member.skills.slice(0, 6).map((skill: string) => (
                        <Badge key={skill} variant="secondary" className="text-xs">
                          {skill}
                        </Badge>
                      ))}
                      {member.skills.length > 6 && (
                        <Badge variant="secondary" className="text-xs">
                          +{member.skills.length - 6} more
                        </Badge>
                      )}
                    </div>
                  </div>
                )}

{/* Hire Date */}
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Calendar className="h-4 w-4" />
                  Joined {formatDate(member.hire_date)}
                </div>

{/* Contact Links */}
                <div className="flex gap-2 pt-2">
                  <Button variant="outline" size="sm" asChild>
                    <a href={`mailto:${member.email}`}>
                      <Mail className="h-4 w-4" />
                    </a>
                  </Button>
                  {member.github_username && (
                    <Button variant="outline" size="sm" asChild>
                      <a
                        href={`https://github.com/${member.github_username}`}
                        target="_blank"
                        rel="noopener noreferrer"
                      >
                        <Github className="h-4 w-4" />
                      </a>
                    </Button>
                  )}
                  {member.linkedin_url && (
                    <Button variant="outline" size="sm" asChild>
                      <a href={member.linkedin_url} target="_blank" rel="noopener noreferrer">
                        <Linkedin className="h-4 w-4" />
                      </a>
                    </Button>
                  )}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

{/* Development Process Overview */}
        <div className="mt-12">
          <Card>
            <CardHeader>
              <CardTitle>Our Development Process</CardTitle>
              <CardDescription>How we build and maintain high-quality software</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div className="text-center">
                  <div className="bg-blue-100 rounded-full p-3 w-12 h-12 mx-auto mb-3 flex items-center justify-center">
                    <span className="text-blue-600 font-bold">1</span>
                  </div>
                  <h3 className="font-semibold mb-2">Planning</h3>
                  <p className="text-sm text-gray-600">2-week sprints with detailed planning and task breakdown</p>
                </div>
                <div className="text-center">
                  <div className="bg-green-100 rounded-full p-3 w-12 h-12 mx-auto mb-3 flex items-center justify-center">
                    <span className="text-green-600 font-bold">2</span>
                  </div>
                  <h3 className="font-semibold mb-2">Development</h3>
                  <p className="text-sm text-gray-600">Feature branches with comprehensive testing and documentation</p>
                </div>
                <div className="text-center">
                  <div className="bg-purple-100 rounded-full p-3 w-12 h-12 mx-auto mb-3 flex items-center justify-center">
                    <span className="text-purple-600 font-bold">3</span>
                  </div>
                  <h3 className="font-semibold mb-2">Review</h3>
                  <p className="text-sm text-gray-600">Peer code reviews and QA testing before deployment</p>
                </div>
                <div className="text-center">
                  <div className="bg-orange-100 rounded-full p-3 w-12 h-12 mx-auto mb-3 flex items-center justify-center">
                    <span className="text-orange-600 font-bold">4</span>
                  </div>
                  <h3 className="font-semibold mb-2">Deploy</h3>
                  <p className="text-sm text-gray-600">
                    Automated deployment with monitoring and rollback capabilities
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Team Values */}
        <div className="mt-8">
          <Card>
            <CardHeader>
              <CardTitle>Our Values</CardTitle>
              <CardDescription>The principles that guide our development team</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="text-center">
                  <div className="bg-blue-50 rounded-lg p-4 mb-4">
                    <Code className="h-8 w-8 text-blue-600 mx-auto" />
                  </div>
                  <h3 className="font-semibold mb-2">Code Quality</h3>
                  <p className="text-sm text-gray-600">
                    We write clean, maintainable code with comprehensive testing and documentation
                  </p>
                </div>
                <div className="text-center">
                  <div className="bg-green-50 rounded-lg p-4 mb-4">
                    <Users className="h-8 w-8 text-green-600 mx-auto" />
                  </div>
                  <h3 className="font-semibold mb-2">Collaboration</h3>
                  <p className="text-sm text-gray-600">
                    We believe in open communication, knowledge sharing, and supporting each other
                  </p>
                </div>
                <div className="text-center">
                  <div className="bg-purple-50 rounded-lg p-4 mb-4">
                    <Briefcase className="h-8 w-8 text-purple-600 mx-auto" />
                  </div>
                  <h3 className="font-semibold mb-2">Innovation</h3>
                  <p className="text-sm text-gray-600">
                    We stay current with technology trends and continuously improve our processes
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/layout/header.tsx" isEdit="true" isMerged="true"
import type React from "react"
import Logo from "@/components/logo"
import Link from "next/link"
import { Button } from "@/components/ui/button"

interface HeaderProps {
  title?: string
  showBookButton?: boolean
  children?: React.ReactNode
}

export default function Header({ title, showBookButton = false, children }: HeaderProps) {
  return (
    <header className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-6">
          <Logo />
          {title && <h1 className="text-2xl font-bold text-gray-900 flex-1 text-center">{title}</h1>}
          {children}
          {showBookButton && (
            <Link href="/book">
              <Button size="lg">Book Repair</Button>
            </Link>
          )}
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/gallery/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/services/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Smartphone,
  Laptop,
  Monitor,
  Printer,
  Battery,
  Wrench,
  Clock,
  Shield,
  Star,
  CheckCircle,
  Phone,
  Mail,
  MapPin,
  ArrowRight,
} from "lucide-react"
import Link from "next/link"
import Navbar from "@/components/layout/navbar"
import Footer from "@/components/layout/footer"

export default function ServicesPage() {
  const services = [
    {
      id: "phone",
      title: "Phone & Tablet Repair",
      icon: Smartphone,
      description: "Professional repair services for all smartphone and tablet brands",
      features: [
        "Screen replacement and repair",
        "Battery replacement",
        "Water damage restoration",
        "Camera and speaker repair",
        "Charging port repair",
        "Software troubleshooting",
        "Touch screen calibration",
        "Home button repair",
      ],
      brands: ["Apple", "Samsung", "Google", "OnePlus", "Xiaomi", "Tecno", "Infinix", "Huawei"],
      priceRange: "₦5,000 - ₦25,000",
      turnaround: "1-3 days",
      warranty: "1 month",
      color: "bg-blue-50 text-blue-600 border-blue-200",
      bookingUrl: "/book?device=phone",
    },
    {
      id: "laptop",
      title: "Laptop Repair",
      icon: Laptop,
      description: "Complete laptop repair and maintenance services",
      features: [
        "Screen replacement",
        "Keyboard repair/replacement",
        "Hard drive upgrade/replacement",
        "RAM upgrade",
        "Cooling system repair",
        "Performance optimization",
        "Motherboard repair",
        "Power jack repair",
      ],
      brands: ["Apple", "Dell", "HP", "Lenovo", "ASUS", "Acer", "Toshiba", "MSI"],
      priceRange: "₦8,000 - ₦50,000",
      turnaround: "2-5 days",
      warranty: "1 month",
      color: "bg-green-50 text-green-600 border-green-200",
      bookingUrl: "/book?device=laptop",
    },
    {
      id: "desktop",
      title: "Desktop Repair",
      icon: Monitor,
      description: "Desktop computer repair and upgrade services",
      features: [
        "Hardware diagnostics",
        "Component replacement",
        "System optimization",
        "Virus/malware removal",
        "Data recovery",
        "Custom builds",
        "Graphics card upgrade",
        "Network setup",
      ],
      brands: ["Dell", "HP", "Lenovo", "ASUS", "Custom Built", "Acer"],
      priceRange: "₦6,000 - ₦40,000",
      turnaround: "1-4 days",
      warranty: "1 month",
      color: "bg-purple-50 text-purple-600 border-purple-200",
      bookingUrl: "/book?device=desktop",
    },
    {
      id: "printer",
      title: "Printer Repair",
      icon: Printer,
      description: "Printer and multifunction device repair services",
      features: [
        "Print quality improvement",
        "Paper jam resolution",
        "Ink/toner system repair",
        "Network setup",
        "Scanner repair",
        "Maintenance service",
        "Driver installation",
        "Wireless setup",
      ],
      brands: ["HP", "Canon", "Epson", "Brother", "Samsung", "Lexmark", "Xerox"],
      priceRange: "₦4,000 - ₦20,000",
      turnaround: "1-3 days",
      warranty: "1 month",
      color: "bg-orange-50 text-orange-600 border-orange-200",
      bookingUrl: "/book?device=printer",
    },
    {
      id: "charger",
      title: "Charger Repair",
      icon: Battery,
      description: "Charger and power adapter repair services",
      features: [
        "Cable repair/replacement",
        "Adapter diagnostics",
        "Port cleaning",
        "Power output testing",
        "Compatibility checking",
        "Safety inspection",
        "Connector replacement",
        "Voltage regulation",
      ],
      brands: ["Apple", "Samsung", "Dell", "HP", "Universal", "Lenovo"],
      priceRange: "₦2,000 - ₦8,000",
      turnaround: "Same day - 2 days",
      warranty: "1 month",
      color: "bg-yellow-50 text-yellow-600 border-yellow-200",
      bookingUrl: "/book?device=charger",
    },
    {
      id: "photocopier",
      title: "Photocopier Service",
      icon: Wrench,
      description: "Commercial photocopier repair and maintenance",
      features: [
        "Copy quality optimization",
        "Paper feed system repair",
        "Toner system maintenance",
        "Network configuration",
        "Regular maintenance",
        "Parts replacement",
        "Drum unit service",
        "Fuser unit repair",
      ],
      brands: ["Canon", "Xerox", "Ricoh", "Konica Minolta", "Sharp", "Kyocera"],
      priceRange: "₦10,000 - ₦50,000",
      turnaround: "1-5 days",
      warranty: "1 month",
      color: "bg-red-50 text-red-600 border-red-200",
      bookingUrl: "/book?device=photocopier",
    },
  ]

const whyChooseUs = [
    {
      icon: Clock,
      title: "Fast Turnaround",
      description: "Most repairs completed within 1-5 business days with express options available",
    },
    {
      icon: Shield,
      title: "Quality Guarantee",
      description: "1-month warranty on all repairs and parts with free follow-up service",
    },
    {
      icon: Star,
      title: "Expert Technicians",
      description: "Certified professionals with 5+ years of experience and ongoing training",
    },
    {
      icon: CheckCircle,
      title: "Genuine Parts",
      description: "We use only high-quality, genuine replacement parts from authorized suppliers",
    },
  ]

const testimonials = [
    {
      name: "Sarah M.",
      device: "iPhone 14 Pro",
      service: "Screen Replacement",
      rating: 5,
      review:
        "Amazing service! My phone looks brand new again. The screen quality is perfect and the repair was completed faster than expected.",
      date: "January 2024",
    },
    {
      name: "Michael C.",
      device: "MacBook Air M2",
      service: "Keyboard Repair",
      rating: 5,
      review:
        "Thought my MacBook was done for after the coffee spill. The team worked miracles and it's working perfectly now!",
      date: "January 2024",
    },
    {
      name: "Aisha K.",
      device: "Samsung Galaxy S23",
      service: "Battery Replacement",
      rating: 5,
      review: "Battery life is now better than when I first bought the phone. Great job and fair pricing!",
      date: "January 2024",
    },
  ]

const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <Star key={i} className={`h-4 w-4 ${i < rating ? "text-yellow-400 fill-current" : "text-gray-300"}`} />
    ))
  }

return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />

{/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-600 to-blue-800 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Our Repair Services</h1>
          <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            Professional device repair services for all your electronic devices. Fast, reliable, and affordable
            solutions with expert technicians and genuine parts.
          </p>
          <div className="flex flex-wrap justify-center gap-4 mb-8">
            <Badge variant="secondary" className="text-lg px-4 py-2">
              <CheckCircle className="h-5 w-5 mr-2" />
              500+ Repairs Completed
            </Badge>
            <Badge variant="secondary" className="text-lg px-4 py-2">
              <Star className="h-5 w-5 mr-2 text-yellow-400 fill-current" />
              4.9/5 Customer Rating
            </Badge>
            <Badge variant="secondary" className="text-lg px-4 py-2">
              <Shield className="h-5 w-5 mr-2" />1 Month Warranty
            </Badge>
          </div>
          <Link href="/book">
            <Button size="lg" variant="secondary" className="text-lg px-8 py-3">
              Book a Repair Now
              <ArrowRight className="h-5 w-5 ml-2" />
            </Button>
          </Link>
        </div>
      </section>

{/* Services Grid */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">What We Repair</h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              We specialize in repairing a wide range of electronic devices with professional expertise and genuine
              parts. Each repair comes with our quality guarantee.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service) => {
              const Icon = service.icon
              return (
                <Card key={service.id} className="hover:shadow-xl transition-all duration-300 group">
                  <CardHeader>
                    <div
                      className={`inline-flex p-3 rounded-lg ${service.color} w-fit mb-4 group-hover:scale-110 transition-transform`}
                    >
                      <Icon className="h-8 w-8" />
                    </div>
                    <CardTitle className="text-xl group-hover:text-blue-600 transition-colors">
                      {service.title}
                    </CardTitle>
                    <CardDescription>{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    {/* Features */}
                    <div>
                      <h4 className="font-semibold text-sm text-gray-900 mb-2">Services Include:</h4>
                      <ul className="text-sm text-gray-600 space-y-1">
                        {service.features.slice(0, 6).map((feature, index) => (
                          <li key={index} className="flex items-center">
                            <CheckCircle className="h-3 w-3 text-green-500 mr-2 flex-shrink-0" />
                            {feature}
                          </li>
                        ))}
                        {service.features.length > 6 && (
                          <li className="text-blue-600 text-xs font-medium">
                            +{service.features.length - 6} more services
                          </li>
                        )}
                      </ul>
                    </div>

{/* Brands */}
                    <div>
                      <h4 className="font-semibold text-sm text-gray-900 mb-2">Supported Brands:</h4>
                      <div className="flex flex-wrap gap-1">
                        {service.brands.slice(0, 5).map((brand) => (
                          <Badge key={brand} variant="secondary" className="text-xs">
                            {brand}
                          </Badge>
                        ))}
                        {service.brands.length > 5 && (
                          <Badge variant="secondary" className="text-xs">
                            +{service.brands.length - 5} more
                          </Badge>
                        )}
                      </div>
                    </div>

{/* Pricing and Timeline */}
                    <div className="grid grid-cols-2 gap-4 pt-4 border-t">
                      <div>
                        <div className="text-xs text-gray-500">Price Range</div>
                        <div className="font-semibold text-sm text-green-600">{service.priceRange}</div>
                      </div>
                      <div>
                        <div className="text-xs text-gray-500">Turnaround</div>
                        <div className="font-semibold text-sm">{service.turnaround}</div>
                      </div>
                    </div>

<div className="grid grid-cols-2 gap-4">
                      <div>
                        <div className="text-xs text-gray-500">Warranty</div>
                        <div className="font-semibold text-sm">{service.warranty}</div>
                      </div>
                      <div className="text-right">
                        <Badge className="bg-green-100 text-green-800">Available Now</Badge>
                      </div>
                    </div>

<Link href={service.bookingUrl}>
                      <Button className="w-full mt-4 group-hover:bg-blue-700 transition-colors">
                        Book {service.title}
                        <ArrowRight className="h-4 w-4 ml-2" />
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Customer Testimonials */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">What Our Customers Say</h2>
            <p className="text-lg text-gray-600">Real reviews from satisfied customers</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial, index) => (
              <Card key={index} className="bg-gray-50 hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center mb-4">
                    {renderStars(testimonial.rating)}
                    <span className="ml-2 text-sm text-gray-600">({testimonial.rating}/5)</span>
                  </div>
                  <blockquote className="text-gray-700 mb-4 italic">"{testimonial.review}"</blockquote>
                  <div className="flex justify-between items-center text-sm">
                    <div>
                      <div className="font-semibold">{testimonial.name}</div>
                      <div className="text-gray-500">{testimonial.service}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-gray-500">{testimonial.device}</div>
                      <div className="text-gray-400 text-xs">{testimonial.date}</div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

<div className="text-center mt-8">
            <Link href="/gallery">
              <Button variant="outline" size="lg">
                View More Reviews & Photos
                <ArrowRight className="h-4 w-4 ml-2" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

{/* Why Choose Us */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Why Choose JHOBAMS?</h2>
            <p className="text-lg text-gray-600">
              We're committed to providing the best repair experience for our customers
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {whyChooseUs.map((item, index) => {
              const Icon = item.icon
              return (
                <div key={index} className="text-center group">
                  <div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center group-hover:bg-blue-200 transition-colors">
                    <Icon className="h-8 w-8 text-blue-600" />
                  </div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
                  <p className="text-gray-600">{item.description}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>

{/* Process Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Repair Process</h2>
            <p className="text-lg text-gray-600">Simple, transparent, and efficient repair process</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            {[
              {
                step: 1,
                title: "Book Online",
                description: "Schedule your repair appointment online or by phone with instant confirmation",
              },
              {
                step: 2,
                title: "Drop Off Device",
                description: "Bring your device to our service center for free diagnosis and quote",
              },
              {
                step: 3,
                title: "Expert Repair",
                description: "Our certified technicians repair your device with genuine parts and care",
              },
              {
                step: 4,
                title: "Pick Up",
                description: "Collect your repaired device with warranty and satisfaction guarantee",
              },
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4 text-lg font-bold">
                  {item.step}
                </div>
                <h3 className="font-semibold mb-2">{item.title}</h3>
                <p className="text-sm text-gray-600">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Contact CTA */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to Get Your Device Fixed?</h2>
          <p className="text-xl text-blue-100 mb-8">Contact us today for a free diagnosis and quote</p>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
            <div className="flex items-center justify-center">
              <Phone className="h-6 w-6 mr-3" />
              <div>
                <div className="font-semibold">Call Us</div>
                <div className="text-blue-100">0803 891 3567</div>
              </div>
            </div>
            <div className="flex items-center justify-center">
              <Mail className="h-6 w-6 mr-3" />
              <div>
                <div className="font-semibold">Email Us</div>
                <div className="text-blue-100">info@jhobams.com</div>
              </div>
            </div>
            <div className="flex items-center justify-center">
              <MapPin className="h-6 w-6 mr-3" />
              <div>
                <div className="font-semibold">Visit Us</div>
                <div className="text-blue-100">Jos, Plateau State</div>
              </div>
            </div>
          </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/book">
              <Button size="lg" variant="secondary" className="text-lg px-8 py-3">
                Book Your Repair Now
                <ArrowRight className="h-5 w-5 ml-2" />
              </Button>
            </Link>
            <Link href="/gallery">
              <Button
                size="lg"
                variant="outline"
                className="text-lg px-8 py-3 bg-transparent border-white text-white hover:bg-white hover:text-blue-600"
              >
                View Our Work
                <ArrowRight className="h-5 w-5 ml-2" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/book/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { ArrowLeft, ArrowRight, Smartphone, Laptop } from "lucide-react"
import { Wrench } from "lucide-react"
import PhotoUpload from "@/components/photo-upload"
import Navbar from "@/components/layout/navbar"

interface BookingData {
  deviceType: string
  deviceBrand: string
  deviceModel: string
  issueType: string
  issueDescription: string
  customerName: string
  customerEmail: string
  customerPhone: string
  appointmentDate: string
  appointmentTime: string
  urgency: string
  agreeToTerms: boolean
  photos: File[]
}

export default function BookingPage() {
  const searchParams = useSearchParams()
  const preselectedDevice = searchParams.get("device")

const [currentStep, setCurrentStep] = useState<BookingStep>("device")
  const [bookingData, setBookingData] = useState<BookingData>({
    deviceType: preselectedDevice || "",
    deviceBrand: "",
    deviceModel: "",
    issueType: "",
    issueDescription: "",
    customerName: "",
    customerEmail: "",
    customerPhone: "",
    appointmentDate: "",
    appointmentTime: "",
    urgency: "normal",
    agreeToTerms: false,
    photos: [],
  })

// Pre-fill device type if coming from services page
  useEffect(() => {
    if (preselectedDevice && preselectedDevice !== bookingData.deviceType) {
      setBookingData((prev) => ({ ...prev, deviceType: preselectedDevice }))
    }
  }, [preselectedDevice, bookingData.deviceType])

const updateBookingData = (field: keyof BookingData, value: string | boolean | File[]) => {
    setBookingData((prev) => ({ ...prev, [field]: value }))
  }

const nextStep = () => {
    const steps: BookingStep[] = ["device", "issue", "photos", "details", "appointment", "confirmation"]
    const currentIndex = steps.indexOf(currentStep)
    if (currentIndex < steps.length - 1) {
      setCurrentStep(steps[currentIndex + 1])
    }
  }

const prevStep = () => {
    const steps: BookingStep[] = ["device", "issue", "photos", "details", "appointment", "confirmation"]
    const currentIndex = steps.indexOf(currentStep)
    if (currentIndex > 0) {
      setCurrentStep(steps[currentIndex - 1])
    }
  }

const deviceTypes = [
    { id: "phone", name: "Phone & Tablet", icon: Smartphone },
    { id: "laptop", name: "Laptop", icon: Laptop },
    { id: "desktop", name: "Desktop", icon: Wrench },
    {
      id: "printer",
      name: "Printer",
      icon: () => (
        <svg viewBox="0 0 24 24" fill="currentColor" className="h-8 w-8">
          <path d="M18 7H6V4h12v3zm1-5H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zM4 9v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V9H4zm13 7H7v-2h10v2z" />
        </svg>
      ),
    },
    {
      id: "charger",
      name: "Charger",
      icon: () => (
        <svg viewBox="0 0 24 24" fill="currentColor" className="h-8 w-8">
          <path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" />
        </svg>
      ),
    },
    {
      id: "photocopier",
      name: "Photocopier",
      icon: () => (
        <svg viewBox="0 0 24 24" fill="currentColor" className="h-8 w-8">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
        </svg>
      ),
    },
  ]

const commonIssues = {
    phone: [
      "Cracked Screen",
      "Battery Issues",
      "Water Damage",
      "Camera Problems",
      "Charging Issues",
      "Software Problems",
      "Touch Screen Not Working",
      "Speaker/Microphone Issues",
    ],
    laptop: [
      "Screen Replacement",
      "Keyboard Issues",
      "Hard Drive Problems",
      "Overheating",
      "Virus Removal",
      "Performance Issues",
      "Power Problems",
      "WiFi Connectivity Issues",
    ],
    desktop: [
      "Won't Turn On",
      "Slow Performance",
      "Virus/Malware",
      "Hardware Upgrade",
      "Blue Screen Errors",
      "Network Issues",
      "Graphics Problems",
      "Memory Issues",
    ],
    printer: [
      "Won't Print",
      "Print Quality Issues",
      "Paper Jam",
      "Ink/Toner Problems",
      "Connection Issues",
      "Scanner Problems",
      "Network Setup",
      "Driver Issues",
    ],
    charger: ["Not Charging", "Cable Damage", "Adapter Issues", "Port Problems", "Overheating", "Compatibility Issues"],
    photocopier: [
      "Poor Copy Quality",
      "Paper Feed Issues",
      "Scanner Problems",
      "Toner Issues",
      "Network Setup",
      "Maintenance Required",
      "Error Messages",
      "Slow Performance",
    ],
  }

return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Progress Bar */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-gray-600">
              Step {["device", "issue", "photos", "details", "appointment", "confirmation"].indexOf(currentStep) + 1} of
              6
            </span>
            <span className="text-sm text-gray-500">
              {currentStep === "device" && "Select Device"}
              {currentStep === "issue" && "Describe Issue"}
              {currentStep === "photos" && "Upload Photos"}
              {currentStep === "details" && "Your Information"}
              {currentStep === "appointment" && "Schedule Appointment"}
              {currentStep === "confirmation" && "Confirmation"}
            </span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-blue-600 h-2 rounded-full transition-all duration-300"
              style={{
                width: `${((["device", "issue", "photos", "details", "appointment", "confirmation"].indexOf(currentStep) + 1) / 6) * 100}%`,
              }}
            ></div>
          </div>
        </div>

{/* Device Selection Step */}
        {currentStep === "device" && (
          <Card>
            <CardHeader>
              <CardTitle>What device needs repair?</CardTitle>
              <CardDescription>
                Select the type of device you want to get repaired
                {preselectedDevice && (
                  <span className="block mt-2 text-blue-600 font-medium">
                    Pre-selected: {deviceTypes.find((d) => d.id === preselectedDevice)?.name}
                  </span>
                )}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {deviceTypes.map((device) => {
                  const Icon = device.icon
                  return (
                    <div
                      key={device.id}
                      className={`border-2 rounded-lg p-6 cursor-pointer transition-all ${
                        bookingData.deviceType === device.id
                          ? "border-blue-600 bg-blue-50"
                          : "border-gray-200 hover:border-gray-300"
                      }`}
                      onClick={() => updateBookingData("deviceType", device.id)}
                    >
                      <Icon className="h-8 w-8 text-blue-600 mb-3" />
                      <h3 className="font-semibold text-lg">{device.name}</h3>
                    </div>
                  )
                })}
              </div>

{bookingData.deviceType && (
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="brand">Device Brand</Label>
                    <Select onValueChange={(value) => updateBookingData("deviceBrand", value)}>
                      <SelectTrigger>
                        <SelectValue placeholder="Select brand" />
                      </SelectTrigger>
                      <SelectContent>
                        {bookingData.deviceType === "phone" && (
                          <>
                            <SelectItem value="apple">Apple</SelectItem>
                            <SelectItem value="samsung">Samsung</SelectItem>
                            <SelectItem value="google">Google</SelectItem>
                            <SelectItem value="oneplus">OnePlus</SelectItem>
                            <SelectItem value="xiaomi">Xiaomi</SelectItem>
                            <SelectItem value="tecno">Tecno</SelectItem>
                            <SelectItem value="infinix">Infinix</SelectItem>
                            <SelectItem value="huawei">Huawei</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </>
                        )}
                        {bookingData.deviceType === "laptop" && (
                          <>
                            <SelectItem value="apple">Apple</SelectItem>
                            <SelectItem value="dell">Dell</SelectItem>
                            <SelectItem value="hp">HP</SelectItem>
                            <SelectItem value="lenovo">Lenovo</SelectItem>
                            <SelectItem value="asus">ASUS</SelectItem>
                            <SelectItem value="acer">Acer</SelectItem>
                            <SelectItem value="toshiba">Toshiba</SelectItem>
                            <SelectItem value="msi">MSI</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </>
                        )}
                        {bookingData.deviceType === "desktop" && (
                          <>
                            <SelectItem value="dell">Dell</SelectItem>
                            <SelectItem value="hp">HP</SelectItem>
                            <SelectItem value="lenovo">Lenovo</SelectItem>
                            <SelectItem value="asus">ASUS</SelectItem>
                            <SelectItem value="acer">Acer</SelectItem>
                            <SelectItem value="custom">Custom Built</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </>
                        )}
                        {bookingData.deviceType === "printer" && (
                          <>
                            <SelectItem value="hp">HP</SelectItem>
                            <SelectItem value="canon">Canon</SelectItem>
                            <SelectItem value="epson">Epson</SelectItem>
                            <SelectItem value="brother">Brother</SelectItem>
                            <SelectItem value="samsung">Samsung</SelectItem>
                            <SelectItem value="lexmark">Lexmark</SelectItem>
                            <SelectItem value="xerox">Xerox</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </>
                        )}
                        {bookingData.deviceType === "charger" && (
                          <>
                            <SelectItem value="apple">Apple</SelectItem>
                            <SelectItem value="samsung">Samsung</SelectItem>
                            <SelectItem value="dell">Dell</SelectItem>
                            <SelectItem value="hp">HP</SelectItem>
                            <SelectItem value="lenovo">Lenovo</SelectItem>
                            <SelectItem value="universal">Universal</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </>
                        )}
                        {bookingData.deviceType === "photocopier" && (
                          <>
                            <SelectItem value="canon">Canon</SelectItem>
                            <SelectItem value="xerox">Xerox</SelectItem>
                            <SelectItem value="ricoh">Ricoh</SelectItem>
                            <SelectItem value="konica">Konica Minolta</SelectItem>
                            <SelectItem value="sharp">Sharp</SelectItem>
                            <SelectItem value="kyocera">Kyocera</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </>
                        )}
                      </SelectContent>
                    </Select>
                  </div>

<div>
                    <Label htmlFor="model">Device Model</Label>
                    <Input
                      id="model"
                      placeholder="e.g., iPhone 14 Pro, MacBook Air M2, HP LaserJet Pro"
                      value={bookingData.deviceModel}
                      onChange={(e) => updateBookingData("deviceModel", e.target.value)}
                    />
                  </div>
                </div>
              )}

<div className="flex justify-end">
                <Button onClick={nextStep} disabled={!bookingData.deviceType || !bookingData.deviceBrand}>
                  Next <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Issue Description Step */}
        {currentStep === "issue" && (
          <Card>
            <CardHeader>
              <CardTitle>What's the problem?</CardTitle>
              <CardDescription>Describe the issue with your {bookingData.deviceType}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label>Common Issues</Label>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
                  {commonIssues[bookingData.deviceType as keyof typeof commonIssues]?.map((issue) => (
                    <div
                      key={issue}
                      className={`border rounded-lg p-3 cursor-pointer transition-all ${
                        bookingData.issueType === issue
                          ? "border-blue-600 bg-blue-50"
                          : "border-gray-200 hover:border-gray-300"
                      }`}
                      onClick={() => updateBookingData("issueType", issue)}
                    >
                      <span className="text-sm font-medium">{issue}</span>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <Label htmlFor="description">Detailed Description</Label>
                <Textarea
                  id="description"
                  placeholder="Please provide more details about the issue..."
                  value={bookingData.issueDescription}
                  onChange={(e) => updateBookingData("issueDescription", e.target.value)}
                  rows={4}
                />
              </div>

<div>
                <Label>Urgency Level</Label>
                <RadioGroup
                  value={bookingData.urgency}
                  onValueChange={(value) => updateBookingData("urgency", value)}
                  className="mt-2"
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="normal" id="normal" />
                    <Label htmlFor="normal">Normal (3-5 business days)</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="urgent" id="urgent" />
                    <Label htmlFor="urgent">Urgent (1-2 business days) - Additional fee may apply</Label>
                  </div>
                </RadioGroup>
              </div>

<div className="flex justify-between">
                <Button variant="outline" onClick={prevStep}>
                  <ArrowLeft className="h-4 w-4 mr-2" /> Previous
                </Button>
                <Button onClick={nextStep} disabled={!bookingData.issueType || !bookingData.issueDescription}>
                  Next <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Photo Upload Step */}
        {currentStep === "photos" && (
          <Card>
            <CardHeader>
              <CardTitle>Upload Device Photos (Optional)</CardTitle>
              <CardDescription>Help our technicians prepare by uploading photos of your device damage</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <PhotoUpload
                onPhotosChange={(photos) => updateBookingData("photos", photos)}
                maxPhotos={5}
                existingPhotos={bookingData.photos}
              />

<div className="flex justify-between">
                <Button variant="outline" onClick={prevStep}>
                  <ArrowLeft className="h-4 w-4 mr-2" /> Previous
                </Button>
                <Button onClick={nextStep}>
                  Next <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Customer Details Step */}
        {currentStep === "details" && (
          <Card>
            <CardHeader>
              <CardTitle>Your Information</CardTitle>
              <CardDescription>We need your contact details to process the repair</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="name">Full Name *</Label>
                  <Input
                    id="name"
                    value={bookingData.customerName}
                    onChange={(e) => updateBookingData("customerName", e.target.value)}
                    placeholder="Enter your full name"
                  />
                </div>
                <div>
                  <Label htmlFor="phone">Phone Number *</Label>
                  <Input
                    id="phone"
                    type="tel"
                    value={bookingData.customerPhone}
                    onChange={(e) => updateBookingData("customerPhone", e.target.value)}
                    placeholder="+234 XXX XXX XXXX"
                  />
                </div>
              </div>

<div>
                <Label htmlFor="email">Email Address *</Label>
                <Input
                  id="email"
                  type="email"
                  value={bookingData.customerEmail}
                  onChange={(e) => updateBookingData("customerEmail", e.target.value)}
                  placeholder="your.email@example.com"
                />
              </div>

<div className="flex justify-between">
                <Button variant="outline" onClick={prevStep}>
                  <ArrowLeft className="h-4 w-4 mr-2" /> Previous
                </Button>
                <Button
                  onClick={nextStep}
                  disabled={!bookingData.customerName || !bookingData.customerEmail || !bookingData.customerPhone}
                >
                  Next <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Appointment Scheduling Step */}
        {currentStep === "appointment" && (
          <Card>
            <CardHeader>
              <CardTitle>Schedule Your Appointment</CardTitle>
              <CardDescription>Choose when you'd like to drop off your device</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="date">Preferred Date *</Label>
                  <Input
                    id="date"
                    type="date"
                    value={bookingData.appointmentDate}
                    onChange={(e) => updateBookingData("appointmentDate", e.target.value)}
                    min={new Date().toISOString().split("T")[0]}
                  />
                </div>
                <div>
                  <Label htmlFor="time">Preferred Time *</Label>
                  <Select onValueChange={(value) => updateBookingData("appointmentTime", value)}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select time" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="08:00">8:00 AM</SelectItem>
                      <SelectItem value="09:00">9:00 AM</SelectItem>
                      <SelectItem value="10:00">10:00 AM</SelectItem>
                      <SelectItem value="11:00">11:00 AM</SelectItem>
                      <SelectItem value="12:00">12:00 PM</SelectItem>
                      <SelectItem value="13:00">1:00 PM</SelectItem>
                      <SelectItem value="14:00">2:00 PM</SelectItem>
                      <SelectItem value="15:00">3:00 PM</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-semibold text-blue-900 mb-2">Business Hours</h4>
                <p className="text-blue-800 text-sm">
                  Monday - Friday: 8:00 AM - 4:00 PM
                  <br />
                  Saturday: 9:00 AM - 3:00 PM
                  <br />
                  Sunday: Closed
                </p>
              </div>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="terms"
                  checked={bookingData.agreeToTerms}
                  onCheckedChange={(checked) => updateBookingData("agreeToTerms", checked as boolean)}
                />
                <Label htmlFor="terms" className="text-sm">
                  I agree to the terms and conditions and privacy policy
                </Label>
              </div>

<div className="flex justify-between">
                <Button variant="outline" onClick={prevStep}>
                  <ArrowLeft className="h-4 w-4 mr-2" /> Previous
                </Button>
                <Button
                  onClick={nextStep}
                  disabled={!bookingData.appointmentDate || !bookingData.appointmentTime || !bookingData.agreeToTerms}
                >
                  Review Booking <ArrowRight className="h-4 w-4 ml-2" />
                </Button>
              </div>
            </CardContent>
          </Card>
        )}

{/* Confirmation Step */}
        {currentStep === "confirmation" && (
          <Card>
            <CardHeader>
              <CardTitle>Booking Confirmation</CardTitle>
              <CardDescription>Please review your booking details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="bg-green-50 border border-green-200 rounded-lg p-6">
                <h3 className="text-lg font-semibold text-green-900 mb-4">🎉 Booking Confirmed!</h3>
                <p className="text-green-800 mb-4">
                  Your repair booking has been successfully submitted. You will receive a confirmation email shortly.
                  {!process.env.DATABASE_URL && (
                    <span className="block mt-2 text-sm bg-yellow-100 text-yellow-800 p-2 rounded">
                      Note: This is a demo version. In production, your booking would be saved to the database.
                    </span>
                  )}
                </p>
                <div className="bg-white p-4 rounded border">
                  <h4 className="font-semibold mb-2">
                    Booking Reference: #JHB-{Math.random().toString(36).substr(2, 9).toUpperCase()}
                  </h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    <div>
                      <p>
                        <strong>Device:</strong> {bookingData.deviceBrand} {bookingData.deviceModel}
                      </p>
                      <p>
                        <strong>Issue:</strong> {bookingData.issueType}
                      </p>
                      <p>
                        <strong>Urgency:</strong> {bookingData.urgency}
                      </p>
                      {bookingData.photos.length > 0 && (
                        <p>
                          <strong>Photos:</strong> {bookingData.photos.length} uploaded
                        </p>
                      )}
                    </div>
                    <div>
                      <p>
                        <strong>Customer:</strong> {bookingData.customerName}
                      </p>
                      <p>
                        <strong>Email:</strong> {bookingData.customerEmail}
                      </p>
                      <p>
                        <strong>Phone:</strong> {bookingData.customerPhone}
                      </p>
                    </div>
                  </div>
                  <div className="mt-4 pt-4 border-t">
                    <p>
                      <strong>Appointment:</strong> {bookingData.appointmentDate} at {bookingData.appointmentTime}
                    </p>
                  </div>
                </div>
              </div>

<div className="bg-blue-50 p-4 rounded-lg">
                <h4 className="font-semibold text-blue-900 mb-2">What's Next?</h4>
                <ul className="text-blue-800 text-sm space-y-1">
                  <li>• You'll receive a confirmation email with your booking details</li>
                  <li>• Our team will contact you 24 hours before your appointment</li>
                  <li>• Bring your device and a valid ID to your appointment</li>
                  <li>• We'll provide a detailed quote before starting any work</li>
                  <li>• Repairs are typically completed within the estimated timeframe</li>
                  <li>• All repairs come with a 1-month warranty</li>
                </ul>
              </div>

<div className="flex justify-center space-x-4">
                <Link href="/">
                  <Button variant="outline">Back to Home</Button>
                </Link>
                <Link href="/track">
                  <Button>Track Your Repair</Button>
                </Link>
                <Link href="/gallery">
                  <Button variant="outline">View Our Work</Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/book/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"

interface LogoProps {
  className?: string
  showText?: boolean
  size?: "sm" | "md" | "lg"
}

export default function Logo({ className = "", showText = true, size = "md" }: LogoProps) {
  const sizeClasses = {
    sm: "h-8 w-8",
    md: "h-12 w-12",
    lg: "h-16 w-16",
  }

const textSizeClasses = {
    sm: "text-sm",
    md: "text-lg",
    lg: "text-xl",
  }

return (
    <Link href="/" className={`flex items-center hover:opacity-80 transition-opacity ${className}`}>
      <div className={`relative ${sizeClasses[size]} mr-3`}>
        <Image
          src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Jhobams%20Logo-fz85tR6VbwuI0WglPMF5Z7hCa3O5mF.png"
          alt="JHOBAMS MultiConcepts Limited Logo"
          fill
          className="object-contain"
          priority
        />
      </div>
      {showText && (
        <div>
          <h1 className={`font-bold text-gray-900 ${textSizeClasses[size]}`}>JHOBAMS</h1>
          <p className="text-xs text-gray-600 -mt-1">MultiConcepts Limited</p>
        </div>
      )}
    </Link>
  )
}
[V0_FILE]png:file="public/images/jhobams-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Jhobams%20Logo-fz85tR6VbwuI0WglPMF5Z7hCa3O5mF.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/layout/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Logo from "@/components/logo"
import { Facebook, Twitter, Instagram, Linkedin, Youtube, Phone, Mail, MapPin } from "lucide-react"

export default function Footer() {
  const socialLinks = [
    {
      name: "Facebook",
      href: "https://facebook.com/jhobamsmulticoncepts",
      icon: Facebook,
      color: "hover:text-blue-600",
    },
    {
      name: "Twitter",
      href: "https://twitter.com/jhobamsmulti",
      icon: Twitter,
      color: "hover:text-blue-400",
    },
    {
      name: "Instagram",
      href: "https://instagram.com/jhobamsmulticoncepts",
      icon: Instagram,
      color: "hover:text-pink-600",
    },
    {
      name: "LinkedIn",
      href: "https://linkedin.com/company/jhobams-multiconcepts",
      icon: Linkedin,
      color: "hover:text-blue-700",
    },
    {
      name: "YouTube",
      href: "https://youtube.com/@jhobamsmulticoncepts",
      icon: Youtube,
      color: "hover:text-red-600",
    },
  ]

return (
    <footer className="bg-gray-900 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Company Info */}
          <div className="md:col-span-2">
            <div className="mb-6">
              <Logo showText={true} size="md" className="text-white" />
            </div>
            <p className="text-gray-400 mb-6 max-w-md">
              Professional device repair services you can trust. We specialize in fixing phones, laptops, desktops,
              printers, and more with expert technicians and genuine parts.
            </p>

{/* Social Media Links */}
            <div>
              <h4 className="text-lg font-semibold mb-4">Follow Us</h4>
              <div className="flex space-x-4">
                {socialLinks.map((social) => {
                  const Icon = social.icon
                  return (
                    <a
                      key={social.name}
                      href={social.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`text-gray-400 ${social.color} transition-colors duration-200 p-2 rounded-full bg-gray-800 hover:bg-gray-700`}
                      aria-label={`Follow us on ${social.name}`}
                    >
                      <Icon className="h-5 w-5" />
                    </a>
                  )
                })}
              </div>
              <p className="text-gray-500 text-sm mt-3">
                Stay updated with our latest repairs, tips, and special offers!
              </p>
            </div>
          </div>

{/* Contact Info */}
          <div>
            <h4 className="text-lg font-semibold mb-4">Contact Info</h4>
            <div className="space-y-3">
              <div className="flex items-center text-gray-400">
                <Phone className="h-4 w-4 mr-3 flex-shrink-0" />
                <div>
                  <p className="font-medium">0803 891 3567</p>
                  <p className="text-sm">Mon-Fri: 8AM-4PM</p>
                </div>
              </div>
              <div className="flex items-center text-gray-400">
                <Mail className="h-4 w-4 mr-3 flex-shrink-0" />
                <div>
                  <p className="font-medium">info@jhobams.com</p>
                  <p className="text-sm">24/7 Email Support</p>
                </div>
              </div>
              <div className="flex items-start text-gray-400">
                <MapPin className="h-4 w-4 mr-3 flex-shrink-0 mt-1" />
                <div>
                  <p className="font-medium">Service Center</p>
                  <p className="text-sm">No. 1 Hwoll, Zaria Rd, Farin Gada Rd</p>
                  <p className="text-sm">Behind Vochmal Petro Station</p>
                  <p className="text-sm">Jos, Plateau State</p>
                </div>
              </div>
            </div>
          </div>

{/* Business Hours & Services */}
          <div>
            <h4 className="text-lg font-semibold mb-4">Business Hours</h4>
            <div className="space-y-2 text-gray-400 mb-6">
              <div className="flex justify-between">
                <span>Mon - Fri:</span>
                <span>8:00 AM - 4:00 PM</span>
              </div>
              <div className="flex justify-between">
                <span>Saturday:</span>
                <span>9:00 AM - 3:00 PM</span>
              </div>
              <div className="flex justify-between">
                <span>Sunday:</span>
                <span>Closed</span>
              </div>
            </div>

<h4 className="text-lg font-semibold mb-4">Quick Links</h4>
            <div className="space-y-2">
              <a href="/services" className="block text-gray-400 hover:text-white transition-colors">
                Our Services
              </a>
              <a href="/gallery" className="block text-gray-400 hover:text-white transition-colors">
                Repair Gallery
              </a>
              <a href="/book" className="block text-gray-400 hover:text-white transition-colors">
                Book Repair
              </a>
              <a href="/track" className="block text-gray-400 hover:text-white transition-colors">
                Track Repair
              </a>
              <a href="/admin/team" className="block text-gray-400 hover:text-white transition-colors">
                Our Team
              </a>
            </div>
          </div>
        </div>

{/* Bottom Section */}
        <div className="border-t border-gray-800 mt-8 pt-8">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <div className="text-center md:text-left mb-4 md:mb-0">
              <p className="text-gray-400">© 2025 JHOBAMS MultiConcepts Limited. All rights reserved.</p>
              <p className="text-gray-500 text-sm mt-1">Professional device repair services since 2020</p>
            </div>

{/* Additional Links */}
            <div className="flex space-x-6 text-sm">
              <a href="/privacy" className="text-gray-400 hover:text-white transition-colors">
                Privacy Policy
              </a>
              <a href="/terms" className="text-gray-400 hover:text-white transition-colors">
                Terms of Service
              </a>
              <a href="/warranty" className="text-gray-400 hover:text-white transition-colors">
                Warranty Info
              </a>
            </div>
          </div>

{/* Social Media Mobile */}
          <div className="md:hidden mt-6 pt-6 border-t border-gray-800">
            <div className="flex justify-center space-x-4">
              {socialLinks.map((social) => {
                const Icon = social.icon
                return (
                  <a
                    key={social.name}
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`text-gray-400 ${social.color} transition-colors duration-200 p-3 rounded-full bg-gray-800 hover:bg-gray-700`}
                    aria-label={`Follow us on ${social.name}`}
                  >
                    <Icon className="h-6 w-6" />
                  </a>
                )
              })}
            </div>
            <p className="text-gray-500 text-sm text-center mt-3">Follow us for updates and repair tips!</p>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/social-media-widget.tsx" isMerged="true"
"use client"

import { Facebook, Twitter, Instagram, Linkedin, Youtube, ExternalLink } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

interface SocialMediaWidgetProps {
  variant?: "compact" | "full" | "floating"
  showFollowerCount?: boolean
  className?: string
}

export default function SocialMediaWidget({
  variant = "compact",
  showFollowerCount = true,
  className = "",
}: SocialMediaWidgetProps) {
  const socialLinks = [
    {
      name: "Facebook",
      href: "https://facebook.com/jhobamsmulticoncepts",
      icon: Facebook,
      color: "text-blue-600 hover:text-blue-700 hover:bg-blue-50",
      bgColor: "bg-blue-600",
      followers: "2.5K",
      description: "Latest updates and customer stories",
    },
    {
      name: "Instagram",
      href: "https://instagram.com/jhobamsmulticoncepts",
      icon: Instagram,
      color: "text-pink-600 hover:text-pink-700 hover:bg-pink-50",
      bgColor: "bg-pink-600",
      followers: "1.8K",
      description: "Behind-the-scenes repair photos",
    },
    {
      name: "Twitter",
      href: "https://twitter.com/jhobamsmulti",
      icon: Twitter,
      color: "text-blue-400 hover:text-blue-500 hover:bg-blue-50",
      bgColor: "bg-blue-400",
      followers: "950",
      description: "Tech tips and quick updates",
    },
    {
      name: "LinkedIn",
      href: "https://linkedin.com/company/jhobams-multiconcepts",
      icon: Linkedin,
      color: "text-blue-700 hover:text-blue-800 hover:bg-blue-50",
      bgColor: "bg-blue-700",
      followers: "500",
      description: "Professional updates and insights",
    },
    {
      name: "YouTube",
      href: "https://youtube.com/@jhobamsmulticoncepts",
      icon: Youtube,
      color: "text-red-600 hover:text-red-700 hover:bg-red-50",
      bgColor: "bg-red-600",
      followers: "320",
      description: "Repair tutorials and guides",
    },
  ]

if (variant === "floating") {
    return (
      <div className={`fixed right-4 top-1/2 transform -translate-y-1/2 z-40 space-y-2 ${className}`}>
        {socialLinks.slice(0, 4).map((social) => {
          const Icon = social.icon
          return (
            <a
              key={social.name}
              href={social.href}
              target="_blank"
              rel="noopener noreferrer"
              className={`block p-3 rounded-full ${social.bgColor} text-white hover:scale-110 transition-all duration-200 shadow-lg hover:shadow-xl`}
              aria-label={`Follow us on ${social.name}`}
              title={`Follow us on ${social.name}`}
            >
              <Icon className="h-5 w-5" />
            </a>
          )
        })}
      </div>
    )
  }

if (variant === "compact") {
    return (
      <div className={`flex space-x-3 ${className}`}>
        {socialLinks.map((social) => {
          const Icon = social.icon
          return (
            <a
              key={social.name}
              href={social.href}
              target="_blank"
              rel="noopener noreferrer"
              className={`p-2 rounded-full transition-all duration-200 ${social.color}`}
              aria-label={`Follow us on ${social.name}`}
            >
              <Icon className="h-5 w-5" />
            </a>
          )
        })}
      </div>
    )
  }

return (
    <div className={`space-y-4 ${className}`}>
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Follow Us</h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3">
        {socialLinks.map((social) => {
          const Icon = social.icon
          return (
            <Card key={social.name} className="hover:shadow-md transition-shadow">
              <CardContent className="p-4">
                <a
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center space-x-3 group"
                >
                  <div
                    className={`p-2 rounded-full ${social.bgColor} text-white group-hover:scale-110 transition-transform`}
                  >
                    <Icon className="h-5 w-5" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <h4 className="font-medium text-gray-900">{social.name}</h4>
                      <ExternalLink className="h-4 w-4 text-gray-400 group-hover:text-gray-600" />
                    </div>
                    {showFollowerCount && <p className="text-sm text-gray-600">{social.followers} followers</p>}
                    <p className="text-xs text-gray-500 mt-1">{social.description}</p>
                  </div>
                </a>
              </CardContent>
            </Card>
          )
        })}
      </div>

<div className="pt-4 border-t">
        <p className="text-sm text-gray-600 mb-3">
          Stay connected for repair tips, special offers, and the latest updates!
        </p>
        <Button variant="outline" size="sm" className="w-full bg-transparent">
          <ExternalLink className="h-4 w-4 mr-2" />
          View All Social Media
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Phone, Mail, MapPin, Clock, Send } from "lucide-react"
import Navbar from "@/components/layout/navbar"
import Footer from "@/components/layout/footer"
import SocialMediaWidget from "@/components/social-media-widget"

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />

{/* Contact Content */}
      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Contact Form */}
            <div className="lg:col-span-2">
              <Card>
                <CardHeader>
                  <CardTitle>Send us a Message</CardTitle>
                  <CardDescription>Fill out the form below and we'll get back to you within 24 hours.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="name">Full Name</Label>
                      <Input id="name" placeholder="Your full name" />
                    </div>
                    <div>
                      <Label htmlFor="email">Email Address</Label>
                      <Input id="email" type="email" placeholder="your.email@example.com" />
                    </div>
                  </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label htmlFor="phone">Phone Number</Label>
                      <Input id="phone" type="tel" placeholder="+234 XXX XXX XXXX" />
                    </div>
                    <div>
                      <Label htmlFor="subject">Subject</Label>
                      <Input id="subject" placeholder="What's this about?" />
                    </div>
                  </div>

<div>
                    <Label htmlFor="message">Message</Label>
                    <Textarea id="message" placeholder="Tell us about your device issue or question..." rows={6} />
                  </div>

<Button className="w-full">
                    <Send className="h-4 w-4 mr-2" />
                    Send Message
                  </Button>
                </CardContent>
              </Card>
            </div>

{/* Contact Info & Social Media */}
            <div className="space-y-6">
              {/* Contact Information */}
              <Card>
                <CardHeader>
                  <CardTitle>Contact Information</CardTitle>
                  <CardDescription>Multiple ways to reach us</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <Phone className="h-5 w-5 text-blue-600" />
                    <div>
                      <p className="font-medium">0803 891 3567</p>
                      <p className="text-sm text-gray-600">Mon-Fri: 8AM-4PM</p>
                    </div>
                  </div>

<div className="flex items-center space-x-3">
                    <Mail className="h-5 w-5 text-blue-600" />
                    <div>
                      <p className="font-medium">info@jhobams.com</p>
                      <p className="text-sm text-gray-600">24/7 Email Support</p>
                    </div>
                  </div>

<div className="flex items-start space-x-3">
                    <MapPin className="h-5 w-5 text-blue-600 mt-1" />
                    <div>
                      <p className="font-medium">Service Center</p>
                      <p className="text-sm text-gray-600">No. 1 Hwoll, Zaria Rd, Farin Gada Rd</p>
                      <p className="text-sm text-gray-600">Behind Vochmal Petro Station</p>
                      <p className="text-sm text-gray-600">Jos, Plateau State</p>
                    </div>
                  </div>

<div className="flex items-center space-x-3">
                    <Clock className="h-5 w-5 text-blue-600" />
                    <div>
                      <p className="font-medium">Business Hours</p>
                      <p className="text-sm text-gray-600">Mon-Fri: 8:00 AM - 4:00 PM</p>
                      <p className="text-sm text-gray-600">Sat: 9:00 AM - 3:00 PM</p>
                      <p className="text-sm text-gray-600">Sun: Closed</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Social Media Widget */}
              <Card>
                <CardContent className="p-6">
                  <SocialMediaWidget variant="full" showFollowerCount={true} />
                </CardContent>
              </Card>

{/* Emergency Contact */}
              <Card className="bg-red-50 border-red-200">
                <CardHeader>
                  <CardTitle className="text-red-800">Emergency Repairs</CardTitle>
                  <CardDescription className="text-red-600">For urgent business device repairs</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-red-700 mb-3">
                    If you have a critical business device that needs immediate attention, call our emergency line.
                  </p>
                  <Button variant="destructive" className="w-full">
                    <Phone className="h-4 w-4 mr-2" />
                    Emergency: 0803 891 3567
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/layout/navbar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import Logo from "@/components/logo"
import { Menu, X, Camera, Wrench, Users, Home, Calendar, Search, Eye } from "lucide-react"

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()

const navigation = [
    { name: "Home", href: "/", icon: Home },
    { name: "Services", href: "/services", icon: Wrench },
    { name: "Gallery", href: "/gallery", icon: Camera },
    { name: "Team in Action", href: "/team-in-action", icon: Eye },
    { name: "Our Team", href: "/admin/team", icon: Users },
    { name: "Book Repair", href: "/book", icon: Calendar },
    { name: "Track Repair", href: "/track", icon: Search },
  ]

const isActive = (href: string) => {
    if (href === "/") {
      return pathname === "/"
    }
    return pathname.startsWith(href)
  }

return (
    <nav className="bg-white shadow-lg sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          {/* Logo */}
          <div className="flex items-center">
            <Logo />
          </div>

{/* Desktop Navigation */}
          <div className="hidden lg:flex items-center space-x-6">
            {navigation.map((item) => {
              const Icon = item.icon
              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                    isActive(item.href)
                      ? "text-blue-600 bg-blue-50"
                      : "text-gray-700 hover:text-blue-600 hover:bg-gray-50"
                  }`}
                >
                  <Icon className="h-4 w-4 mr-2" />
                  {item.name}
                </Link>
              )
            })}
          </div>

{/* Mobile menu button */}
          <div className="lg:hidden flex items-center">
            <Button variant="ghost" size="sm" onClick={() => setIsOpen(!isOpen)} className="text-gray-700">
              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </Button>
          </div>
        </div>

{/* Mobile Navigation */}
        {isOpen && (
          <div className="lg:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
              {navigation.map((item) => {
                const Icon = item.icon
                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    className={`flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors ${
                      isActive(item.href)
                        ? "text-blue-600 bg-blue-50"
                        : "text-gray-700 hover:text-blue-600 hover:bg-gray-50"
                    }`}
                    onClick={() => setIsOpen(false)}
                  >
                    <Icon className="h-5 w-5 mr-3" />
                    {item.name}
                  </Link>
                )
              })}
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/team-in-action/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Users, Wrench, Eye, Award, Clock, Shield } from "lucide-react"
import Navbar from "@/components/layout/navbar"
import Footer from "@/components/layout/footer"
import TeamInAction from "@/components/team-in-action"

export default function TeamInActionPage() {
  const stats = [
    { label: "Expert Technicians", value: "6+", icon: Users, color: "text-blue-600" },
    { label: "Years Experience", value: "5+", icon: Award, color: "text-green-600" },
    { label: "Devices Repaired", value: "500+", icon: Wrench, color: "text-purple-600" },
    { label: "Average Repair Time", value: "2-3 Days", icon: Clock, color: "text-orange-600" },
  ]

return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />

{/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-600 to-blue-800 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Our Expert Technicians at Work</h1>
          <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            See our certified professionals in action as they carefully diagnose, repair, and restore your devices with
            precision, expertise, and attention to detail. Every repair is handled with professional care.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Badge variant="secondary" className="text-lg px-4 py-2">
              <Users className="h-5 w-5 mr-2" />
              Certified Professionals
            </Badge>
            <Badge variant="secondary" className="text-lg px-4 py-2">
              <Shield className="h-5 w-5 mr-2" />
              Quality Guaranteed
            </Badge>
            <Badge variant="secondary" className="text-lg px-4 py-2">
              <Eye className="h-5 w-5 mr-2" />
              Transparent Process
            </Badge>
          </div>
        </div>
      </section>

{/* Stats Section */}
      <section className="py-12 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {stats.map((stat) => {
              const Icon = stat.icon
              return (
                <Card key={stat.label} className="text-center">
                  <CardContent className="p-6">
                    <Icon className={`h-8 w-8 ${stat.color} mx-auto mb-3`} />
                    <div className="text-2xl font-bold text-gray-900 mb-1">{stat.value}</div>
                    <div className="text-sm text-gray-600">{stat.label}</div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Featured Service */}
      <section className="py-12 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Featured: Professional iPhone Screen Repair</h2>
            <p className="text-lg text-gray-600">
              Watch our expert technician perform a precision iPhone screen replacement using professional tools and
              techniques
            </p>
          </div>
          <TeamInAction variant="featured" showCategories={false} />
        </div>
      </section>

{/* Main Gallery */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Behind the Scenes</h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Get an inside look at our professional repair process. From initial diagnosis to final quality testing,
              see how our certified technicians handle your devices with expert care and precision.
            </p>
          </div>

{/* Process Overview */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Professional Repair Process</h2>
            <p className="text-lg text-gray-600">Every device goes through our comprehensive 5-step repair process</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
            {[
              {
                step: 1,
                title: "Initial Consultation",
                description: "Customer consultation and device assessment with detailed explanation",
                icon: () => (
                  <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6">
                    <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
                  </svg>
                ),
              },
              {
                step: 2,
                title: "Professional Diagnosis",
                description: "Comprehensive testing and precise issue identification using advanced tools",
                icon: Eye,
              },
              {
                step: 3,
                title: "Expert Repair Work",
                description: "Skilled technicians perform the repair using genuine parts and professional techniques",
                icon: Wrench,
              },
              {
                step: 4,
                title: "Quality Testing",
                description: "Thorough testing to ensure perfect functionality and performance standards",
                icon: () => (
                  <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                  </svg>
                ),
              },
              {
                step: 5,
                title: "Customer Delivery",
                description: "Professional handover with warranty coverage and care instructions",
                icon: () => (
                  <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6">
                    <path d="M19 7c0-1.1-.9-2-2-2h-3v2h3v2.65L13.52 14H10V9H6c-2.21 0-4 1.79-4 4v3h2c0 1.66 1.34 3 3 3s3-1.34 3-3h4.48L19 10.35V7zM7 17c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" />
                  </svg>
                ),
              },
            ].map((item) => {
              const Icon = item.icon
              return (
                <Card key={item.step} className="text-center hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <div className="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                      <Icon className="text-blue-600" />
                    </div>
                    <div className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-3 text-sm font-bold">
                      {item.step}
                    </div>
                    <h3 className="font-semibold mb-2">{item.title}</h3>
                    <p className="text-sm text-gray-600">{item.description}</p>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Team Values */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Service Excellence</h2>
            <p className="text-lg text-gray-600">What sets our professional team apart in device repair services</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="text-center hover:shadow-lg transition-shadow">
              <CardContent className="p-8">
                <div className="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6">
                  <Shield className="h-8 w-8 text-blue-600" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Quality Assurance</h3>
                <p className="text-gray-600">
                  Every repair undergoes rigorous quality testing and inspection to ensure your device works perfectly
                  before pickup.
                </p>
              </CardContent>
            </Card>

<Card className="text-center hover:shadow-lg transition-shadow">
              <CardContent className="p-8">
                <div className="bg-green-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6">
                  <Users className="h-8 w-8 text-green-600" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Expert Technicians</h3>
                <p className="text-gray-600">
                  Our certified professionals have years of experience and undergo continuous training on the latest
                  repair technologies.
                </p>
              </CardContent>
            </Card>

<Card className="text-center hover:shadow-lg transition-shadow">
              <CardContent className="p-8">
                <div className="bg-purple-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6">
                  <Eye className="h-8 w-8 text-purple-600" />
                </div>
                <h3 className="text-xl font-semibold mb-4">Transparent Process</h3>
                <p className="text-gray-600">
                  We keep you informed throughout the entire repair process with regular updates and clear
                  communication.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]jpeg:file="public/images/team/iphone-screen-replacement.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iPhone%20Screen%20Replacement.jpg-VF97YrQnJf1kBgDsbsEgeg3QqcW9AI.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/team/laptop-diagnosis-testing.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Laptop%20Diagnosis%20and%20Testing.jpg-dgQr7DPQlV2GpRGnlQK09YOlPkxu9W.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Smartphone, Laptop, Tablet, Clock, Shield, Award, Star, CheckCircle, Phone, Mail, MapPin, Calendar, Search, Users, ArrowRight } from 'lucide-react'
import Link from "next/link"
import Header from "@/components/layout/header"
import Footer from "@/components/layout/footer"
import SocialMediaWidget from "@/components/social-media-widget"
import TeamInAction from "@/components/team-in-action"

export default function HomePage() {
  const services = [
    {
      icon: Smartphone,
      title: "Phone & Tablet Repair",
      description: "Screen replacement, battery battery, water damage, and more",
      features: ["Screen Replacement", "Battery Replacement", "Water Damage", "Camera Repair"],
    },
    {
      icon: Laptop,
      title: "Laptop Repair",
      description: "Hardware diagnostics, keyboard replacement, performance optimization",
      features: ["Hardware Diagnosis", "Keyboard Repair", "Performance Boost", "Data Recovery"],
    },
    {
      icon: Tablet,
      title: "Tablet Repair",
      description: "Screen replacement, battery issues, water damage, and more",
      features: ["Screen Replacement", "Battery Replacement", "Water Damage", "Camera Repair"],
    },
  ]

const stats = [
    { label: "Devices Repaired", value: "500+", icon: Smartphone },
    { label: "Happy Customers", value: "450+", icon: Users },
    { label: "Years Experience", value: "5+", icon: Award },
    { label: "Average Rating", value: "4.9", icon: Star },
  ]

const testimonials = [
    {
      name: "Sarah Johnson",
      service: "iPhone Screen Repair",
      rating: 5,
      comment:
        "Amazing service! My phone looks brand new again. The team was professional and the repair was completed faster than expected.",
      location: "Lagos, Nigeria",
    },
    {
      name: "Michael Chen",
      service: "MacBook Keyboard Repair",
      rating: 5,
      comment:
        "Thought my MacBook was done for after the coffee spill. These guys worked miracles and it's working perfectly now!",
      location: "Abuja, Nigeria",
    },
    {
      name: "Aisha Okafor",
      service: "Samsung Battery Replacement",
      rating: 5,
      comment: "Battery life is now better than when I first bought the phone. Great job and very fair pricing!",
      location: "Port Harcourt, Nigeria",
    },
  ]

return (
    <div className="min-h-screen bg-gray-50">
      <Header />

{/* Hero Section with Background Image */}
      <section
        className="relative bg-gradient-to-br from-blue-600 to-blue-800 text-white py-20 overflow-hidden"
        style={{
          backgroundImage: "url('/images/hero-background.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
        }}
      >
        {/* Overlay for better text readability */}
        <div className="absolute inset-0 bg-blue-900/80 backdrop-blur-sm"></div>

<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h1 className="text-4xl md:text-6xl font-bold mb-6 drop-shadow-lg">
                Professional Device Repair Services
              </h1>
              <p className="text-xl text-blue-100 mb-8 drop-shadow-md">
                Expert technicians, genuine parts, and fast turnaround times. We fix phones, laptops, tablets, and
                more with precision and care.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button asChild size="lg" className="bg-white text-blue-600 hover:bg-gray-100 shadow-lg">
                  <Link href="/book">
                    <Smartphone className="h-5 w-5 mr-2" />
                    Book Repair Now
                  </Link>
                </Button>
                <Button
                  asChild
                  variant="outline"
                  size="lg"
                  className="border-white text-white hover:bg-white hover:text-blue-600 bg-white/10 backdrop-blur-sm shadow-lg"
                >
                  <Link href="/gallery">
                    <Star className="h-5 w-5 mr-2" />
                    View Our Work
                  </Link>
                </Button>
              </div>
            </div>
            <div className="relative">
              <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 shadow-2xl-xl border-white/20">
                <h3 className="text-2xl font-semibold mb-6">Why Choose JHOBAMS?</h3>
                <div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <CheckCircle className="h-6 w-6 text-green-400 drop-shadow-sm" />
                    <span className="drop-shadow-sm">Certified Professional Technicians</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <CheckCircle className="h-6 w-6 text-green-400 drop-shadow-sm" />
                    <span className="drop-shadow-sm">Genuine Parts & Components</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <CheckCircle className="h-6 w-6 text-green-400 drop-shadow-sm" />
                    <span className="drop-shadow-sm">Fast 24-48 Hour Turnaround</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <CheckCircle className="h-6 w-6 text-green-400 drop-shadow-sm" />
                    <span className="drop-shadow-sm">90-Day Warranty on All Repairs</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Decorative Elements */}
        <div className="absolute top-10 right-10 w-20 h-20 bg-white/5 rounded-full blur-xl"></div>
        <div className="absolute bottom-10 left-10 w-32 h-32 bg-blue-400/10 rounded-full blur-2xl"></div>
        <div className="absolute top-1/2 right-1/4 w-16 h-16 bg-white/5 rounded-full blur-lg"></div>
      </section>

{/* Stats Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((stat) => {
              const Icon = stat.icon
              return (
                <Card key={stat.label} className="text-text hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <Icon className="h-8 w-8 text-blue-600 mx-auto mb-3" />
                    <div className="text-3xl font-bold text-gray-900 mb-1">{stat.value}</div>
                    <div className="text-sm text-gray-600">{stat.label}</div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Services Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Repair Services</h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Professional repair services for all your electronic devices. From smartphones to desktop computers, we've
              got you covered.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service) => {
              const Icon = service.icon
              return (
                <Card key={service.title} className="hover:shadow-lg transition-all duration-300 group">
                  <CardHeader className="text-center">
                    <div className="bg-blue-100 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 group-hover:bg-blue-200 transition-colors">
                      <Icon className="h-8 w-8 text-blue-600" />
                    </div>
                    <CardTitle className="text-xl">{service.title}</CardTitle>
                    <CardDescription>{service.description}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="space-y-2">
                      {service.features.map((feature) => (
                        <li key={feature} className="flex items-center gap-2 text-sm">
                          <CheckCircle className="h-4 w-4 text-green-500" />
                          {feature}
                        </li>
                      ))}
                    </ul>
                    <Button asChild className="w-full mt-4 bg-transparent" variant="outline">
                      <Link href="/services">
                        Learn More
                        <ArrowRight className="h-4 w-4 ml-2" />
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Team in Action Featured Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Expert Technicians at Work</h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              See our certified professionals in action as they carefully repair and restore your devices with precision
              and expertise.
            </p>
          </div>

{/* Featured Service */}
          <div className="mb-12">
            <TeamInAction variant="featured" showCategories={false} />
          </div>

{/* Carousel Preview */}
          <div className="mb-8">
            <h3 className="text-xl font-semibold text-gray-900 mb-6 text-center">More Behind-the-Scenes</h3>
            <TeamInAction variant="carousel" showCategories={false} maxImages={6} />
          </div>

<div className="text-center">
            <Button asChild size="lg" className="bg-blue-600 text-white hover:bg-blue-700">
              <Link href="/team-in-action">
                <Users className="h-5 w-5 mr-2" />
                View All Team Photos
              </Link>
            </Button>
          </div>
        </div>
      </section>

{/* Process Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Our Repair Process</h2>
            <p className="text-lg text-gray-600">Simple, transparent, and professional</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                step: 1,
                title: "Book Online",
                description: "Schedule your repair appointment online or visit our location",
                icon: Calendar,
              },
              {
                step: 2,
                title: "Free Diagnosis",
                description: "Our experts diagnose the issue and provide a detailed quote",
                icon: Search,
              },
              {
                step: 3,
                title: "Professional Repair",
                description: "Certified technicians fix your device using genuine parts",
                icon: Shield,
              },
              {
                step: 4,
                title: "Quality Testing",
                description: "Thorough testing ensures everything works perfectly",
                icon: CheckCircle,
              },
            ].map((item) => {
              const Icon = item.icon
              return (
                <Card key={item.step} className="text-center hover:shadow-lg transition-shadow">
                  <CardContent className="p-6">
                    <div className="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center mx-auto mb-4">
                      <Icon className="h-6 w-6 text-blue-600" />
                    </div>
                    <div className="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-3 text-sm font-bold">
                      {item.step}
                    </div>
                    <h3 className="font-semibold mb-2">{item.title}</h3>
                    <p className="text-sm text-gray-600">{item.description}</p>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

{/* Testimonials Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">What Our Customers Say</h2>
            <p className="text-lg text-gray-600">Real reviews from satisfied customers</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial) => (
              <Card key={testimonial.name} className="hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-center mb-4">
                    {Array.from({ length: 5 }, (_, i) => (
                      <Star
                        key={i}
                        className={`h-4 w-4 ${
                          i < testimonial.rating ? "text-yellow-400 fill-current" : "text-gray-300"
                        }`}
                      />
                    ))}
                    <span className="ml-2 text-sm text-gray-600">({testimonial.rating}/5)</span>
                  </div>
                  <blockquote className="text-gray-700 mb-4">"{testimonial.comment}"</blockquote>
                  <div className="flex justify-between items-center text-sm">
                    <div>
                      <div className="font-semibold">{testimonial.name}</div>
                      <div className="text-gray-500">{testimonial.service}</div>
                    </div>
                    <div className="text-right">
                      <div className="text-gray-500 flex items-center">
                        <MapPin className="h-3 w-3 mr-1" />
                        {testimonial.location}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Social Media Section */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Follow Us on Social Media</h2>
            <p className="text-lg text-gray-600">Stay updated with our latest repairs and tech tips</p>
          </div>

{/* Contact Section */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">Get in Touch</h2>
              <p className="text-lg text-gray-600 mb-8">
                Ready to get your device repaired? Contact us today for a free consultation and quote.
              </p>

<div className="space-y-6">
                <div className="flex items-center gap-4">
                  <div className="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center">
                    <Phone className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold">Phone</h3>
                    <p className="text-gray-600">+234 (0) 123 456 7890</p>
                  </div>
                </div>

<div className="flex items-center gap-4">
                  <div className="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center">
                    <Mail className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold">Email</h3>
                    <p className="text-gray-600">info@jhobams.com</p>
                  </div>
                </div>

<div className="flex items-center gap-4">
                  <div className="bg-blue-100 rounded-full w-12 h-12 flex items-center justify-center">
                    <MapPin className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold">Location</h3>
                    <p className="text-gray-600">Lagos, Nigeria</p>
                  </div>
                </div>
              </div>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Quick Contact Form</CardTitle>
                <CardDescription>Send us a message and we'll get back to you soon</CardDescription>
              </CardHeader>
              <CardContent>
                <form className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
                        Name
                      </label>
                      <Input id="name" placeholder="Your name" />
                    </div>
                    <div>
                      <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                        Email
                      </label>
                      <Input id="email" type="email" placeholder="your@email.com" />
                    </div>
                  </div>
                  <div>
                    <label htmlFor="device" className="block text-sm font-medium text-gray-700 mb-1">
                      Device Type
                    </label>
                    <Input id="device" placeholder="e.g., iPhone 14, MacBook Pro" />
                  </div>
                  <div>
                    <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
                      Message
                    </label>
                    <Textarea id="message" placeholder="Describe the issue with your device..." rows={4} />
                  </div>
                  <Button type="submit" className="w-full">
                    Send Message
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/team-in-action.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Search, LayoutGrid, List, Play, Eye, Calendar, MapPin, User, ChevronLeft, ChevronRight } from "lucide-react"

interface TeamImage {
  id: string
  src: string
  title: string
  description: string
  category: "repair" | "diagnosis" | "testing" | "consultation" | "delivery"
  technician: string
  date: string
  location: string
  isVideo?: boolean
}

interface TeamInActionProps {
  variant?: "grid" | "carousel" | "featured"
  showCategories?: boolean
  maxImages?: number
  className?: string
}

const teamImages: TeamImage[] = [
  {
    id: "1",
    src: "/images/team/iphone-screen-replacement.jpg",
    title: "iPhone Screen Replacement",
    description:
      "Professional technician carefully replacing a cracked iPhone screen with precision tools and genuine parts.",
    category: "repair",
    technician: "John Adebayo",
    date: "2024-01-15",
    location: "Main Workshop",
  },
  {
    id: "2",
    src: "/images/team/laptop-diagnosis-testing.jpg",
    title: "Laptop Hardware Diagnosis",
    description:
      "Expert diagnosis of laptop hardware issues using advanced diagnostic equipment and testing procedures.",
    category: "diagnosis",
    technician: "Sarah Okonkwo",
    date: "2024-01-14",
    location: "Diagnostic Center",
  },
  {
    id: "3",
    src: "/placeholder.svg?height=400&width=600",
    title: "Samsung Motherboard Repair",
    description:
      "Micro-soldering repair on Samsung phone motherboard using professional microscope and precision tools.",
    category: "repair",
    technician: "Michael Chen",
    date: "2024-01-13",
    location: "Micro-Repair Station",
  },
  {
    id: "4",
    src: "/placeholder.svg?height=400&width=600",
    title: "MacBook Keyboard Replacement",
    description: "Complete keyboard assembly replacement on MacBook Pro with careful attention to cable connections.",
    category: "repair",
    technician: "Fatima Ibrahim",
    date: "2024-01-12",
    location: "Apple Service Area",
  },
  {
    id: "5",
    src: "/placeholder.svg?height=400&width=600",
    title: "Battery Performance Testing",
    description: "Comprehensive battery health testing using calibrated equipment to ensure optimal performance.",
    category: "testing",
    technician: "David Okoro",
    date: "2024-01-11",
    location: "Testing Lab",
  },
  {
    id: "6",
    src: "/placeholder.svg?height=400&width=600",
    title: "Customer Device Consultation",
    description:
      "Detailed consultation with customer explaining repair options and providing transparent cost estimates.",
    category: "consultation",
    technician: "Grace Adeola",
    date: "2024-01-10",
    location: "Customer Service",
  },
  {
    id: "7",
    src: "/placeholder.svg?height=400&width=600",
    title: "Desktop Computer Assembly",
    description: "Custom desktop computer build with high-performance components and cable management.",
    category: "repair",
    technician: "Emmanuel Uche",
    date: "2024-01-09",
    location: "Build Station",
  },
  {
    id: "8",
    src: "/placeholder.svg?height=400&width=600",
    title: "Printer Maintenance Service",
    description: "Thorough cleaning and maintenance of office printer including printhead alignment and calibration.",
    category: "repair",
    technician: "Aisha Bello",
    date: "2024-01-08",
    location: "Printer Service Area",
  },
  {
    id: "9",
    src: "/placeholder.svg?height=400&width=600",
    title: "Tablet Digitizer Replacement",
    description: "Precision replacement of tablet digitizer with proper adhesive application and testing.",
    category: "repair",
    technician: "Peter Nwankwo",
    date: "2024-01-07",
    location: "Tablet Repair Station",
  },
  {
    id: "10",
    src: "/placeholder.svg?height=400&width=600",
    title: "Water Damage Recovery",
    description: "Professional water damage recovery process including component cleaning and corrosion removal.",
    category: "repair",
    technician: "Blessing Okafor",
    date: "2024-01-06",
    location: "Recovery Lab",
  },
  {
    id: "11",
    src: "/placeholder.svg?height=400&width=600",
    title: "Device Delivery & Handover",
    description: "Professional device delivery with quality check demonstration and warranty explanation.",
    category: "delivery",
    technician: "Joseph Adamu",
    date: "2024-01-05",
    location: "Customer Pickup",
  },
  {
    id: "12",
    src: "/placeholder.svg?height=400&width=600",
    title: "Quality Control Testing",
    description: "Final quality control testing of repaired devices ensuring all functions work perfectly.",
    category: "testing",
    technician: "Mary Ogbonna",
    date: "2024-01-04",
    location: "QC Department",
    isVideo: true,
  },
]

const categories = [
  { id: "all", label: "All Services", count: teamImages.length },
  { id: "repair", label: "Repairs", count: teamImages.filter((img) => img.category === "repair").length },
  { id: "diagnosis", label: "Diagnosis", count: teamImages.filter((img) => img.category === "diagnosis").length },
  { id: "testing", label: "Testing", count: teamImages.filter((img) => img.category === "testing").length },
  {
    id: "consultation",
    label: "Consultation",
    count: teamImages.filter((img) => img.category === "consultation").length,
  },
  { id: "delivery", label: "Delivery", count: teamImages.filter((img) => img.category === "delivery").length },
]

export default function TeamInAction({
  variant = "grid",
  showCategories = true,
  maxImages,
  className = "",
}: TeamInActionProps) {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchTerm, setSearchTerm] = useState("")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [currentSlide, setCurrentSlide] = useState(0)

const filteredImages = teamImages
    .filter((image) => selectedCategory === "all" || image.category === selectedCategory)
    .filter(
      (image) =>
        image.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        image.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
        image.technician.toLowerCase().includes(searchTerm.toLowerCase()),
    )
    .slice(0, maxImages)

const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % Math.ceil(filteredImages.length / 3))
  }

const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + Math.ceil(filteredImages.length / 3)) % Math.ceil(filteredImages.length / 3))
  }

if (variant === "featured") {
    const featuredImage = teamImages[0]
    return (
      <div className={`relative ${className}`}>
        <Card className="overflow-hidden">
          <div className="relative h-96 md:h-[500px]">
            <img
              src={featuredImage.src || "/placeholder.svg"}
              alt={featuredImage.title}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-6 text-white">
              <Badge className="mb-3 bg-blue-600">{featuredImage.category}</Badge>
              <h3 className="text-2xl font-bold mb-2">{featuredImage.title}</h3>
              <p className="text-gray-200 mb-4">{featuredImage.description}</p>
              <div className="flex items-center gap-4 text-sm">
                <div className="flex items-center gap-1">
                  <User className="h-4 w-4" />
                  {featuredImage.technician}
                </div>
                <div className="flex items-center gap-1">
                  <Calendar className="h-4 w-4" />
                  {new Date(featuredImage.date).toLocaleDateString()}
                </div>
                <div className="flex items-center gap-1">
                  <MapPin className="h-4 w-4" />
                  {featuredImage.location}
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>
    )
  }

if (variant === "carousel") {
    return (
      <div className={`relative ${className}`}>
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-semibold">Team in Action</h3>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={prevSlide}>
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" onClick={nextSlide}>
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>

<div className="overflow-hidden">
          <div
            className="flex transition-transform duration-300 ease-in-out"
            style={{ transform: `translateX(-${currentSlide * 100}%)` }}
          >
            {Array.from({ length: Math.ceil(filteredImages.length / 3) }, (_, slideIndex) => (
              <div key={slideIndex} className="w-full flex-shrink-0">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {filteredImages.slice(slideIndex * 3, (slideIndex + 1) * 3).map((image) => (
                    <Dialog key={image.id}>
                      <DialogTrigger asChild>
                        <Card className="cursor-pointer hover:shadow-lg transition-shadow group">
                          <div className="relative overflow-hidden">
                            <img
                              src={image.src || "/placeholder.svg"}
                              alt={image.title}
                              className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                            />
                            {image.isVideo && (
                              <div className="absolute inset-0 flex items-center justify-center bg-black/20">
                                <Play className="h-12 w-12 text-white" />
                              </div>
                            )}
                            <div className="absolute top-2 right-2">
                              <Badge className="bg-blue-600">{image.category}</Badge>
                            </div>
                          </div>
                          <CardContent className="p-4">
                            <h4 className="font-semibold mb-2">{image.title}</h4>
                            <p className="text-sm text-gray-600 line-clamp-2">{image.description}</p>
                            <div className="flex items-center justify-between mt-3 text-xs text-gray-500">
                              <span>{image.technician}</span>
                              <span>{new Date(image.date).toLocaleDateString()}</span>
                            </div>
                          </CardContent>
                        </Card>
                      </DialogTrigger>
                      <DialogContent className="max-w-4xl">
                        <DialogHeader>
                          <DialogTitle>{image.title}</DialogTitle>
                        </DialogHeader>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div className="relative">
                            <img
                              src={image.src || "/placeholder.svg"}
                              alt={image.title}
                              className="w-full h-64 md:h-80 object-cover rounded-lg"
                            />
                            {image.isVideo && (
                              <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-lg">
                                <Play className="h-16 w-16 text-white" />
                              </div>
                            )}
                          </div>
                          <div className="space-y-4">
                            <Badge className="bg-blue-600">{image.category}</Badge>
                            <p className="text-gray-700">{image.description}</p>
                            <div className="space-y-2 text-sm">
                              <div className="flex items-center gap-2">
                                <User className="h-4 w-4 text-gray-500" />
                                <span>
                                  <strong>Technician:</strong> {image.technician}
                                </span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Calendar className="h-4 w-4 text-gray-500" />
                                <span>
                                  <strong>Date:</strong> {new Date(image.date).toLocaleDateString()}
                                </span>
                              </div>
                              <div className="flex items-center gap-2">
                                <MapPin className="h-4 w-4 text-gray-500" />
                                <span>
                                  <strong>Location:</strong> {image.location}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </DialogContent>
                    </Dialog>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

return (
    <div className={`space-y-6 ${className}`}>
      {/* Search and Filters */}
      <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
        <div className="relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
          <Input
            placeholder="Search by service, technician, or description..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="pl-10"
          />
        </div>

<div className="flex items-center gap-2">
          <Button variant={viewMode === "grid" ? "default" : "outline"} size="sm" onClick={() => setViewMode("grid")}>
            <LayoutGrid className="h-4 w-4" />
          </Button>
          <Button variant={viewMode === "list" ? "default" : "outline"} size="sm" onClick={() => setViewMode("list")}>
            <List className="h-4 w-4" />
          </Button>
        </div>
      </div>

{/* Categories */}
      {showCategories && (
        <div className="flex flex-wrap gap-2">
          {categories.map((category) => (
            <Button
              key={category.id}
              variant={selectedCategory === category.id ? "default" : "outline"}
              size="sm"
              onClick={() => setSelectedCategory(category.id)}
              className="text-sm"
            >
              {category.label} ({category.count})
            </Button>
          ))}
        </div>
      )}

{/* Results */}
      <div className="text-sm text-gray-600 mb-4">
        Showing {filteredImages.length} of {teamImages.length} photos
      </div>

{/* Grid/List View */}
      {viewMode === "grid" ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredImages.map((image) => (
            <Dialog key={image.id}>
              <DialogTrigger asChild>
                <Card className="cursor-pointer hover:shadow-lg transition-shadow group">
                  <div className="relative overflow-hidden">
                    <img
                      src={image.src || "/placeholder.svg"}
                      alt={image.title}
                      className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                    {image.isVideo && (
                      <div className="absolute inset-0 flex items-center justify-center bg-black/20">
                        <Play className="h-12 w-12 text-white" />
                      </div>
                    )}
                    <div className="absolute top-2 right-2">
                      <Badge className="bg-blue-600">{image.category}</Badge>
                    </div>
                    <div className="absolute bottom-2 left-2 right-2">
                      <div className="bg-black/50 backdrop-blur-sm rounded px-2 py-1">
                        <p className="text-white text-xs font-medium">{image.technician}</p>
                      </div>
                    </div>
                  </div>
                  <CardContent className="p-4">
                    <h4 className="font-semibold mb-2">{image.title}</h4>
                    <p className="text-sm text-gray-600 line-clamp-2">{image.description}</p>
                    <div className="flex items-center justify-between mt-3 text-xs text-gray-500">
                      <span>{image.location}</span>
                      <span>{new Date(image.date).toLocaleDateString()}</span>
                    </div>
                  </CardContent>
                </Card>
              </DialogTrigger>
              <DialogContent className="max-w-4xl">
                <DialogHeader>
                  <DialogTitle>{image.title}</DialogTitle>
                </DialogHeader>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="relative">
                    <img
                      src={image.src || "/placeholder.svg"}
                      alt={image.title}
                      className="w-full h-64 md:h-80 object-cover rounded-lg"
                    />
                    {image.isVideo && (
                      <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-lg">
                        <Play className="h-16 w-16 text-white" />
                      </div>
                    )}
                  </div>
                  <div className="space-y-4">
                    <Badge className="bg-blue-600">{image.category}</Badge>
                    <p className="text-gray-700">{image.description}</p>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center gap-2">
                        <User className="h-4 w-4 text-gray-500" />
                        <span>
                          <strong>Technician:</strong> {image.technician}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Calendar className="h-4 w-4 text-gray-500" />
                        <span>
                          <strong>Date:</strong> {new Date(image.date).toLocaleDateString()}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-gray-500" />
                        <span>
                          <strong>Location:</strong> {image.location}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </DialogContent>
            </Dialog>
          ))}
        </div>
      ) : (
        <div className="space-y-4">
          {filteredImages.map((image) => (
            <Dialog key={image.id}>
              <DialogTrigger asChild>
                <Card className="cursor-pointer hover:shadow-lg transition-shadow">
                  <CardContent className="p-4">
                    <div className="flex gap-4">
                      <div className="relative w-24 h-24 flex-shrink-0">
                        <img
                          src={image.src || "/placeholder.svg"}
                          alt={image.title}
                          className="w-full h-full object-cover rounded"
                        />
                        {image.isVideo && (
                          <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
                            <Play className="h-6 w-6 text-white" />
                          </div>
                        )}
                      </div>
                      <div className="flex-1">
                        <div className="flex items-start justify-between mb-2">
                          <h4 className="font-semibold">{image.title}</h4>
                          <Badge className="bg-blue-600">{image.category}</Badge>
                        </div>
                        <p className="text-sm text-gray-600 mb-3 line-clamp-2">{image.description}</p>
                        <div className="flex items-center gap-4 text-xs text-gray-500">
                          <div className="flex items-center gap-1">
                            <User className="h-3 w-3" />
                            {image.technician}
                          </div>
                          <div className="flex items-center gap-1">
                            <Calendar className="h-3 w-3" />
                            {new Date(image.date).toLocaleDateString()}
                          </div>
                          <div className="flex items-center gap-1">
                            <MapPin className="h-3 w-3" />
                            {image.location}
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </DialogTrigger>
              <DialogContent className="max-w-4xl">
                <DialogHeader>
                  <DialogTitle>{image.title}</DialogTitle>
                </DialogHeader>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="relative">
                    <img
                      src={image.src || "/placeholder.svg"}
                      alt={image.title}
                      className="w-full h-64 md:h-80 object-cover rounded-lg"
                    />
                    {image.isVideo && (
                      <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-lg">
                        <Play className="h-16 w-16 text-white" />
                      </div>
                    )}
                  </div>
                  <div className="space-y-4">
                    <Badge className="bg-blue-600">{image.category}</Badge>
                    <p className="text-gray-700">{image.description}</p>
                    <div className="space-y-2 text-sm">
                      <div className="flex items-center gap-2">
                        <User className="h-4 w-4 text-gray-500" />
                        <span>
                          <strong>Technician:</strong> {image.technician}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Calendar className="h-4 w-4 text-gray-500" />
                        <span>
                          <strong>Date:</strong> {new Date(image.date).toLocaleDateString()}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <MapPin className="h-4 w-4 text-gray-500" />
                        <span>
                          <strong>Location:</strong> {image.location}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </DialogContent>
            </Dialog>
          ))}
        </div>
      )}

{filteredImages.length === 0 && (
        <div className="text-center py-12">
          <Eye className="h-12 w-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-gray-900 mb-2">No photos found</h3>
          <p className="text-gray-600">Try adjusting your search or filter criteria</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/gallery/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import Header from "@/components/layout/header"
import Footer from "@/components/layout/footer"
import { Search, LayoutGrid, List, Play, Eye, Calendar, Star, Clock, CheckCircle } from "lucide-react"

interface RepairImage {
  id: string
  src: string
  title: string
  description: string
  category: "phone" | "laptop" | "desktop" | "printer" | "tablet" | "other"
  beforeAfter?: {
    before: string
    after: string
  }
  repairDetails: {
    issue: string
    solution: string
    timeSpent: string
    difficulty: "Easy" | "Medium" | "Hard"
    warranty: string
  }
  customer?: {
    rating: number
    feedback: string
  }
  date: string
  isVideo?: boolean
}

const repairImages: RepairImage[] = [
  {
    id: "1",
    src: "/placeholder.svg?height=400&width=600",
    title: "iPhone 14 Pro Screen Replacement",
    description:
      "Complete screen replacement for iPhone 14 Pro with severely cracked display. Customer dropped phone from significant height.",
    category: "phone",
    beforeAfter: {
      before: "/placeholder.svg?height=300&width=400",
      after: "/placeholder.svg?height=300&width=400",
    },
    repairDetails: {
      issue: "Severely cracked screen with touch issues",
      solution: "Complete OLED display assembly replacement with genuine Apple parts",
      timeSpent: "45 minutes",
      difficulty: "Medium",
      warranty: "90 days",
    },
    customer: {
      rating: 5,
      feedback: "Amazing work! My phone looks brand new again. Very professional service.",
    },
    date: "2024-01-15",
  },
  {
    id: "2",
    src: "/placeholder.svg?height=400&width=600",
    title: "MacBook Pro Keyboard Repair",
    description:
      "Liquid damage repair and keyboard replacement for MacBook Pro 2019. Coffee spill caused multiple key failures.",
    category: "laptop",
    repairDetails: {
      issue: "Liquid damage to keyboard and trackpad",
      solution: "Complete keyboard assembly replacement and logic board cleaning",
      timeSpent: "2 hours",
      difficulty: "Hard",
      warranty: "90 days",
    },
    customer: {
      rating: 5,
      feedback: "Thought my MacBook was done for. These guys saved it! Works perfectly now.",
    },
    date: "2024-01-14",
  },
  {
    id: "3",
    src: "/placeholder.svg?height=400&width=600",
    title: "Samsung Galaxy S22 Battery Replacement",
    description:
      "Emergency battery replacement for swollen battery causing back panel separation. Safety-critical repair.",
    category: "phone",
    repairDetails: {
      issue: "Swollen battery causing device deformation",
      solution: "Safe battery removal and replacement with genuine Samsung battery",
      timeSpent: "30 minutes",
      difficulty: "Medium",
      warranty: "90 days",
    },
    customer: {
      rating: 5,
      feedback: "Quick and professional service. Battery life is now better than when new!",
    },
    date: "2024-01-13",
  },
  {
    id: "4",
    src: "/placeholder.svg?height=400&width=600",
    title: "Desktop Motherboard Capacitor Repair",
    description:
      "Micro-soldering repair of failed capacitors on gaming PC motherboard. Precision work to restore functionality.",
    category: "desktop",
    repairDetails: {
      issue: "Failed capacitors causing boot failures",
      solution: "Micro-soldering replacement of 6 capacitors",
      timeSpent: "3 hours",
      difficulty: "Hard",
      warranty: "60 days",
    },
    customer: {
      rating: 5,
      feedback: "Incredible skill! My gaming PC is running better than ever.",
    },
    date: "2024-01-12",
    isVideo: true,
  },
  {
    id: "5",
    src: "/placeholder.svg?height=400&width=600",
    title: "iPad Air Screen & Digitizer Replacement",
    description: "Complete screen and digitizer replacement for iPad Air with shattered glass and touch issues.",
    category: "tablet",
    repairDetails: {
      issue: "Shattered screen with non-responsive touch",
      solution: "Complete LCD and digitizer assembly replacement",
      timeSpent: "1 hour",
      difficulty: "Medium",
      warranty: "90 days",
    },
    customer: {
      rating: 5,
      feedback: "Perfect repair! Touch sensitivity is excellent and screen looks pristine.",
    },
    date: "2024-01-11",
  },
  {
    id: "6",
    src: "/placeholder.svg?height=400&width=600",
    title: "HP LaserJet Paper Feed Mechanism Repair",
    description: "Complete paper feed mechanism overhaul for HP LaserJet printer with chronic paper jam issues.",
    category: "printer",
    repairDetails: {
      issue: "Chronic paper jams and feed failures",
      solution: "Paper feed mechanism cleaning and roller replacement",
      timeSpent: "1.5 hours",
      difficulty: "Medium",
      warranty: "60 days",
    },
    customer: {
      rating: 4,
      feedback: "No more paper jams! Printer works like new. Great service.",
    },
    date: "2024-01-10",
  },
  {
    id: "7",
    src: "/placeholder.svg?height=400&width=600",
    title: "iPhone Water Damage Recovery",
    description:
      "Professional water damage recovery for iPhone 13 submerged in water. Advanced drying and cleaning process.",
    category: "phone",
    repairDetails: {
      issue: "Complete water submersion damage",
      solution: "Professional ultrasonic cleaning and component drying",
      timeSpent: "4 hours",
      difficulty: "Hard",
      warranty: "30 days",
    },
    customer: {
      rating: 5,
      feedback: "Miracle workers! My phone was completely dead and now it works perfectly.",
    },
    date: "2024-01-09",
  },
  {
    id: "8",
    src: "/placeholder.svg?height=400&width=600",
    title: "Laptop SSD Upgrade & Data Migration",
    description: "Complete hard drive to SSD upgrade with full data migration for improved performance.",
    category: "laptop",
    repairDetails: {
      issue: "Slow performance due to aging hard drive",
      solution: "SSD installation with complete data migration",
      timeSpent: "2 hours",
      difficulty: "Easy",
      warranty: "90 days",
    },
    customer: {
      rating: 5,
      feedback: "My laptop is so much faster now! Boot time went from 2 minutes to 15 seconds.",
    },
    date: "2024-01-08",
  },
]

const categories = [
  { id: "all", label: "All Repairs", count: repairImages.length },
  { id: "phone", label: "Phones", count: repairImages.filter((img) => img.category === "phone").length },
  { id: "laptop", label: "Laptops", count: repairImages.filter((img) => img.category === "laptop").length },
  { id: "desktop", label: "Desktops", count: repairImages.filter((img) => img.category === "desktop").length },
  { id: "tablet", label: "Tablets", count: repairImages.filter((img) => img.category === "tablet").length },
  { id: "printer", label: "Printers", count: repairImages.filter((img) => img.category === "printer").length },
  { id: "other", label: "Other", count: repairImages.filter((img) => img.category === "other").length },
]

export default function GalleryPage() {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchTerm, setSearchTerm] = useState("")
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")

const filteredImages = repairImages
    .filter((image) => selectedCategory === "all" || image.category === selectedCategory)
    .filter(
      (image) =>
        image.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        image.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
        image.repairDetails.issue.toLowerCase().includes(searchTerm.toLowerCase()),
    )

const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case "Easy":
        return "bg-green-100 text-green-800"
      case "Medium":
        return "bg-yellow-100 text-yellow-800"
      case "Hard":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <Header title="Repair Gallery" />

{/* Hero Section */}
      <section className="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">Our Repair Gallery</h1>
          <p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            See the quality of our work through before and after photos of actual repairs. Every device tells a story of
            expert craftsmanship and attention to detail.
          </p>
          <div className="flex justify-center gap-8 text-sm">
            <div className="text-center">
              <div className="text-2xl font-bold">{repairImages.length}+</div>
              <div className="text-blue-200">Successful Repairs</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold">4.9</div>
              <div className="text-blue-200">Average Rating</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold">90 Day</div>
              <div className="text-blue-200">Warranty</div>
            </div>
          </div>
        </div>
      </section>

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Search and Filters */}
        <div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-8">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
            <Input
              placeholder="Search repairs by device, issue, or description..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

<div className="flex items-center gap-2">
            <Button variant={viewMode === "grid" ? "default" : "outline"} size="sm" onClick={() => setViewMode("grid")}>
              <LayoutGrid className="h-4 w-4" />
            </Button>
            <Button variant={viewMode === "list" ? "default" : "outline"} size="sm" onClick={() => setViewMode("list")}>
              <List className="h-4 w-4" />
            </Button>
          </div>
        </div>

{/* Categories */}
        <div className="flex flex-wrap gap-2 mb-8">
          {categories.map((category) => (
            <Button
              key={category.id}
              variant={selectedCategory === category.id ? "default" : "outline"}
              size="sm"
              onClick={() => setSelectedCategory(category.id)}
              className="text-sm"
            >
              {category.label} ({category.count})
            </Button>
          ))}
        </div>

{/* Results */}
        <div className="text-sm text-gray-600 mb-6">
          Showing {filteredImages.length} of {repairImages.length} repairs
        </div>

{image.beforeAfter && (
                        <div className="grid grid-cols-2 gap-2">
                          <div>
                            <p className="text-sm font-medium text-gray-700 mb-2">Before</p>
                            <img
                              src={image.beforeAfter.before || "/placeholder.svg"}
                              alt="Before repair"
                              className="w-full h-32 object-cover rounded"
                            />
                          </div>
                          <div>
                            <p className="text-sm font-medium text-gray-700 mb-2">After</p>
                            <img
                              src={image.beforeAfter.after || "/placeholder.svg"}
                              alt="After repair"
                              className="w-full h-32 object-cover rounded"
                            />
                          </div>
                        </div>
                      )}
                    </div>

<div className="space-y-6">
                      <div className="flex gap-2">
                        <Badge className="bg-blue-600">{image.category}</Badge>
                        <Badge className={getDifficultyColor(image.repairDetails.difficulty)}>
                          {image.repairDetails.difficulty}
                        </Badge>
                      </div>

<p className="text-gray-700">{image.description}</p>

<div className="space-y-4">
                        <h4 className="font-semibold text-lg">Repair Details</h4>
                        <div className="space-y-3 text-sm">
                          <div>
                            <span className="font-medium text-gray-700">Issue:</span>
                            <p className="text-gray-600 mt-1">{image.repairDetails.issue}</p>
                          </div>
                          <div>
                            <span className="font-medium text-gray-700">Solution:</span>
                            <p className="text-gray-600 mt-1">{image.repairDetails.solution}</p>
                          </div>
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <span className="font-medium text-gray-700">Time Spent:</span>
                              <p className="text-gray-600">{image.repairDetails.timeSpent}</p>
                            </div>
                            <div>
                              <span className="font-medium text-gray-700">Warranty:</span>
                              <p className="text-gray-600">{image.repairDetails.warranty}</p>
                            </div>
                          </div>
                        </div>
                      </div>

{image.customer && (
                        <div className="space-y-3">
                          <h4 className="font-semibold text-lg">Customer Feedback</h4>
                          <div className="flex items-center gap-2 mb-2">
                            <div className="flex">
                              {Array.from({ length: 5 }, (_, i) => (
                                <Star
                                  key={i}
                                  className={`h-4 w-4 ${
                                    i < image.customer.rating ? "text-yellow-400 fill-current" : "text-gray-300"
                                  }`}
                                />
                              ))}
                            </div>
                            <span className="text-sm text-gray-600">({image.customer.rating}/5)</span>
                          </div>
                          <blockquote className="text-gray-700 italic">"{image.customer.feedback}"</blockquote>
                        </div>
                      )}

<div className="flex items-center gap-4 text-sm text-gray-500 pt-4 border-t">
                        <div className="flex items-center gap-1">
                          <Calendar className="h-4 w-4" />
                          {new Date(image.date).toLocaleDateString()}
                        </div>
                        <div className="flex items-center gap-1">
                          <CheckCircle className="h-4 w-4 text-green-500" />
                          Completed
                        </div>
                      </div>
                    </div>
                  </div>
                </DialogContent>
              </Dialog>
            ))}
          </div>
        ) : (
          <div className="space-y-4">
            {filteredImages.map((image) => (
              <Dialog key={image.id}>
                <DialogTrigger asChild>
                  <Card className="cursor-pointer hover:shadow-lg transition-shadow">
                    <CardContent className="p-4">
                      <div className="flex gap-4">
                        <div className="relative w-32 h-24 flex-shrink-0">
                          <img
                            src={image.src || "/placeholder.svg"}
                            alt={image.title}
                            className="w-full h-full object-cover rounded"
                          />
                          {image.isVideo && (
                            <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
                              <Play className="h-6 w-6 text-white" />
                            </div>
                          )}
                        </div>
                        <div className="flex-1">
                          <div className="flex items-start justify-between mb-2">
                            <h4 className="font-semibold text-lg">{image.title}</h4>
                            <div className="flex gap-2">
                              <Badge className="bg-blue-600">{image.category}</Badge>
                              <Badge className={getDifficultyColor(image.repairDetails.difficulty)}>
                                {image.repairDetails.difficulty}
                              </Badge>
                            </div>
                          </div>
                          <p className="text-sm text-gray-600 mb-3 line-clamp-2">{image.description}</p>
                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-4 text-xs text-gray-500">
                              <div className="flex items-center gap-1">
                                <Clock className="h-3 w-3" />
                                {image.repairDetails.timeSpent}
                              </div>
                              <div className="flex items-center gap-1">
                                <Calendar className="h-3 w-3" />
                                {new Date(image.date).toLocaleDateString()}
                              </div>
                            </div>
                            {image.customer && (
                              <div className="flex items-center gap-1">
                                <div className="flex">
                                  {Array.from({ length: 5 }, (_, i) => (
                                    <Star
                                      key={i}
                                      className={`h-3 w-3 ${
                                        i < image.customer.rating ? "text-yellow-400 fill-current" : "text-gray-300"
                                      }`}
                                    />
                                  ))}
                                </div>
                                <span className="text-xs text-gray-600">({image.customer.rating}/5)</span>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </DialogTrigger>
                <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
                  <DialogHeader>
                    <DialogTitle className="text-xl">{image.title}</DialogTitle>
                  </DialogHeader>
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div className="space-y-4">
                      <div className="relative">
                        <img
                          src={image.src || "/placeholder.svg"}
                          alt={image.title}
                          className="w-full h-64 object-cover rounded-lg"
                        />
                        {image.isVideo && (
                          <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded-lg">
                            <Play className="h-16 w-16 text-white" />
                          </div>
                        )}
                      </div>

<p className="text-gray-700">{image.description}</p>

{filteredImages.length === 0 && (
          <div className="text-center py-12">
            <Eye className="h-12 w-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-semibold text-gray-900 mb-2">No repairs found</h3>
            <p className="text-gray-600">Try adjusting your search or filter criteria</p>
          </div>
        )}
      </div>