import React, { useState, useEffect, useRef } from 'react'; export default function LehighValleyHomeHelp() { const [chatOpen, setChatOpen] = useState(false); const [chatMessages, setChatMessages] = useState([ { role: 'bot', text: "Hi! I'm your Lehigh Valley Home Help & Services assistant. Ask me anything about finding the right contractor, what to look for, or how to avoid common mistakes!", suggestions: [ 'How do I find a good plumber?', 'What should I ask an electrician?', 'How much does HVAC repair cost?' ] } ]); const [chatInput, setChatInput] = useState(''); const [chatPhotos, setChatPhotos] = useState([]); const [isTyping, setIsTyping] = useState(false); const [heroSearchInput, setHeroSearchInput] = useState(''); const [uploadedPhotos, setUploadedPhotos] = useState([]); const [searchModalOpen, setSearchModalOpen] = useState(false); const [searchLoading, setSearchLoading] = useState(false); const [searchQuestion, setSearchQuestion] = useState(''); const [searchAnswer, setSearchAnswer] = useState(''); const [searchPhotos, setSearchPhotos] = useState([]); const [followUpInput, setFollowUpInput] = useState(''); const [lightboxOpen, setLightboxOpen] = useState(false); const [lightboxImage, setLightboxImage] = useState(''); const [activeService, setActiveService] = useState(null); const chatMessagesRef = useRef(null); useEffect(() => { if (chatMessagesRef.current) { chatMessagesRef.current.scrollTop = chatMessagesRef.current.scrollHeight; } }, [chatMessages, isTyping]); const services = [ { id: 'cleaning', name: 'Home Cleaning / Deep Cleaning', icon: '✨', details: [ 'Standard cleaning: dusting, vacuuming, bathrooms, kitchens', 'Deep cleaning: baseboards, inside appliances, detailed work', 'Move-in/move-out cleaning services', 'Post-construction cleaning', 'Typical cost: $100-$300 depending on size' ] }, { id: 'handyman', name: 'General Handyman / Home Repair', icon: '🔧', details: [ 'Minor repairs and maintenance', 'Furniture assembly and installation', 'Door and window adjustments', 'Basic carpentry and fixes', 'Typical rate: $75-$150/hour' ] }, { id: 'plumbing', name: 'Plumbing', icon: '🚰', details: [ 'Leak repairs and pipe fixes', 'Drain cleaning and unclogging', 'Water heater installation/repair', 'Fixture installation (sinks, toilets, faucets)', 'Should be licensed - ask for license number' ] }, { id: 'electrical', name: 'Electrical', icon: '⚡', details: [ 'Outlet and switch installation/repair', 'Lighting fixture installation', 'Panel upgrades and circuit work', 'Whole-home surge protection', 'MUST be licensed - verify before hiring' ] }, { id: 'hvac', name: 'HVAC (Heating & Cooling)', icon: '❄️', details: [ 'AC and furnace repair/installation', 'Seasonal maintenance tune-ups', 'Duct cleaning and sealing', 'Thermostat installation', 'Get multiple quotes for big jobs' ] }, { id: 'carpentry', name: 'Carpentry', icon: '🪚', details: [ 'Custom woodworking and trim', 'Deck building and repair', 'Cabinet installation', 'Crown molding and baseboards', 'Ask to see portfolio of past work' ] }, { id: 'painting', name: 'Painting & Surface Finishing', icon: '🎨', details: [ 'Interior and exterior painting', 'Staining and varnishing', 'Drywall repair before painting', 'Cabinet painting and refinishing', 'Get detailed prep work included in quote' ] }, { id: 'appliance', name: 'Appliance Install & Light Repair', icon: '📺', details: [ 'Dishwasher, washer/dryer installation', 'Refrigerator hookups', 'Garbage disposal installation', 'Basic appliance troubleshooting', 'Some repairs require factory certification' ] }, { id: 'roofing', name: 'Roofing & Exterior Repair', icon: '🏠', details: [ 'Roof repair and replacement', 'Leak detection and fixes', 'Shingle replacement', 'Gutter integration', 'Should carry workers comp insurance' ] }, { id: 'flooring', name: 'Flooring (tile, vinyl, hardwood)', icon: '📐', details: [ 'Hardwood installation and refinishing', 'Tile installation (ceramic, porcelain)', 'Vinyl and laminate flooring', 'Floor repair and leveling', 'Subfloor work if needed' ] }, { id: 'drywall', name: 'Drywall & Patchwork', icon: '🧱', details: [ 'Hole and crack repair', 'Water damage restoration', 'Texture matching', 'New drywall installation', 'Often includes painting services' ] }, { id: 'windows-doors', name: 'Windows & Doors', icon: '🚪', details: [ 'Window replacement and repair', 'Door installation (interior/exterior)', 'Weatherstripping and sealing', 'Screen repair and replacement', 'Permits may be required for exterior work' ] }, { id: 'gutter', name: 'Gutter Cleaning & Exterior Maintenance', icon: '🌧️', details: [ 'Gutter cleaning and debris removal', 'Downspout clearing', 'Gutter guard installation', 'Minor repairs and resealing', 'Recommended 2x per year (spring & fall)' ] }, { id: 'pressure-washing', name: 'Pressure Washing & Exterior Cleaning', icon: '💦', details: [ 'House siding cleaning', 'Driveway and walkway cleaning', 'Deck and patio restoration', 'Fence cleaning', 'Can damage surfaces if done wrong - hire pros' ] }, { id: 'furniture-assembly', name: 'Furniture Assembly & Mounting', icon: '🪑', details: [ 'IKEA and flat-pack assembly', 'TV mounting and installation', 'Shelving and storage systems', 'Office furniture setup', 'Usually charged by piece or hourly' ] }, { id: 'landscaping', name: 'Landscaping / Lawn Care', icon: '🌿', details: [ 'Lawn mowing and edging', 'Mulching and bed maintenance', 'Tree and shrub trimming', 'Seasonal cleanups', 'Irrigation system maintenance' ] }, { id: 'pest-control', name: 'Pest Control', icon: '🐛', details: [ 'Insect extermination (ants, roaches, etc.)', 'Rodent removal and prevention', 'Termite inspection and treatment', 'Wildlife removal (bats, squirrels)', 'Should be licensed pest control operator' ] }, { id: 'home-safety', name: 'Home Safety & Accessibility', icon: '🛡️', details: [ 'Grab bar installation', 'Wheelchair ramp construction', 'Stair lift installation', 'Walk-in tub conversion', 'May qualify for insurance or assistance programs' ] }, { id: 'organizing', name: 'Organizing & Home Management', icon: '📋', details: [ 'Closet organization systems', 'Garage organization', 'Decluttering services', 'Move coordination', 'Great for downsizing or life transitions' ] }, { id: 'mason-work', name: 'Mason Work / Stonework / Brickwork', icon: '🧱', details: [ 'Brick and stone repair', 'Chimney repair and repointing', 'Patio and walkway installation', 'Retaining walls', 'Specialized skill - check past work examples' ] }, { id: 'other', name: 'Other Services', icon: '📝', details: [ "Can't find what you need?", 'Ask our AI assistant about any home service', 'We can connect you with specialists', 'New providers added regularly', 'Contact us with your specific needs' ] } ]; const handleChatPhotoUpload = (e) => { const files = Array.from(e.target.files); files.forEach(file => { if (file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = (event) => { setChatPhotos(prev => [...prev, { data: event.target.result, base64: event.target.result.split(',')[1], type: file.type }]); }; reader.readAsDataURL(file); } }); e.target.value = ''; }; const removeChatPhoto = (index) => { setChatPhotos(prev => prev.filter((_, i) => i !== index)); }; const sendChatMessage = async () => { const message = chatInput.trim(); if (!message && chatPhotos.length === 0) return; // Add user message const userMessage = { role: 'user', text: message || "What do you see in this photo?", photos: [...chatPhotos] }; setChatMessages(prev => [...prev, userMessage]); setChatInput(''); const photosToSend = [...chatPhotos]; setChatPhotos([]); setIsTyping(true); try { let messageContent = []; if (photosToSend.length > 0) { photosToSend.forEach(photo => { messageContent.push({ type: "image", source: { type: "base64", media_type: photo.type, data: photo.base64 } }); }); } messageContent.push({ type: "text", text: photosToSend.length > 0 ? `Looking at the photo(s): ${message || "What do you see and what advice do you have?"}` : message }); const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: photosToSend.length > 0 ? 400 : 300, messages: [{ role: 'user', content: messageContent }], system: "You are a helpful home services expert for Lehigh Valley Home Help & Services (powered by Traditionally Unique) in Lehigh Valley, PA. When photos are provided, analyze what you see and give specific advice. Be warm and concise (2-4 sentences). Help people understand home services, what to look for, typical costs, and red flags. If they need a contractor, mention we can connect them with vetted local pros through our partnership network." }) }); const data = await response.json(); const botResponse = data.content[0].text; setIsTyping(false); setChatMessages(prev => [...prev, { role: 'bot', text: botResponse }]); } catch (error) { setIsTyping(false); setChatMessages(prev => [...prev, { role: 'bot', text: "Sorry, I'm having trouble connecting. Please try again or contact Lehigh Valley Home Help & Services at [email protected]" }]); } }; const handlePhotoUpload = (e) => { const files = Array.from(e.target.files); files.forEach(file => { if (file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = (event) => { setUploadedPhotos(prev => [...prev, { data: event.target.result, base64: event.target.result.split(',')[1], type: file.type }]); }; reader.readAsDataURL(file); } }); e.target.value = ''; }; const removeUploadedPhoto = (index) => { setUploadedPhotos(prev => prev.filter((_, i) => i !== index)); }; const searchQuestionFunc = async () => { const question = heroSearchInput.trim(); if (!question) { alert('Please enter a question'); return; } setSearchModalOpen(true); setSearchLoading(true); setSearchQuestion(question); setSearchPhotos([...uploadedPhotos]); try { let messageContent = []; if (uploadedPhotos.length > 0) { uploadedPhotos.forEach(photo => { messageContent.push({ type: "image", source: { type: "base64", media_type: photo.type, data: photo.base64 } }); }); } messageContent.push({ type: "text", text: uploadedPhotos.length > 0 ? `Looking at the photo(s) provided, ${question}` : question }); const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: uploadedPhotos.length > 0 ? 500 : 350, messages: [{ role: 'user', content: messageContent }], system: "You are a helpful home services expert for Lehigh Valley Home Help & Services (powered by Traditionally Unique) in Lehigh Valley, PA. When photos are provided, analyze what you see and give specific advice based on the image. Give concise, actionable answers (3-4 sentences, or 5-6 if analyzing photos). Include key facts, red flags, or typical costs when relevant. If they need a contractor, mention we connect people with vetted local pros through our partnership network." }) }); const data = await response.json(); const answer = data.content[0].text; setSearchAnswer(answer); setSearchLoading(false); } catch (error) { setSearchAnswer("Sorry, we're having trouble connecting to our AI assistant right now. Please try again in a moment, or contact us directly at [email protected]"); setSearchLoading(false); } }; const askFollowUp = async () => { const question = followUpInput.trim(); if (!question) return; setFollowUpInput(''); setSearchLoading(true); setSearchQuestion(question); setSearchPhotos([]); try { const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ model: 'claude-sonnet-4-20250514', max_tokens: 350, messages: [{ role: 'user', content: question }], system: "You are a helpful home services expert for Lehigh Valley Home Help & Services (powered by Traditionally Unique) in Lehigh Valley, PA. Give concise, actionable answers (3-4 sentences max). Include key facts, red flags, or typical costs when relevant. If they need a contractor, mention we connect people with vetted local pros through our partnership network." }) }); const data = await response.json(); const answer = data.content[0].text; setSearchAnswer(answer); setSearchLoading(false); } catch (error) { setSearchAnswer("Sorry, we're having trouble connecting to our AI assistant right now. Please try again in a moment, or contact us directly at [email protected]"); setSearchLoading(false); } }; const closeSearchModal = () => { setSearchModalOpen(false); setUploadedPhotos([]); }; const loadingTips = [ "💡 Always ask for proof of insurance before hiring", "💡 Get at least 3 written estimates for big jobs", "💡 Never pay more than 30% upfront", "💡 Check if permits are needed for your project", "💡 Licensed contractors carry proper insurance", "💡 Ask for local references you can verify", "💡 Get everything in writing before work starts", "💡 Red flag: pressure to decide immediately" ]; return (