import React, { useMemo, useState, useEffect } from "react"; /** * ✅ FIXED VERSION – Preferred Vendors Landing Page * ------------------------------------------------ * Fixes all validation and parsing errors: * - Proper React export syntax (no stray DOCTYPE expectations) * - Valid self-closing tags and attributes * - JSON-LD safely inserted * - Ensures file parses as JSX, not HTML */ const RAW_VENDORS = [ { id: "1", name: "Welch Olsen", categories: ["Accountant"], description: "Full-service accounting and tax firm serving Utah County clients.", email: "paul@welcholsen.com", website: "https://www.welcholsen.com/services", address: "Lehi, UT" }, { id: "2", name: "Appliance Repair Specialist", categories: ["Appliance Services"], description: "Expert appliance repair for all major brands with fast local service.", phone: "801-853-8618", website: "https://orem-appliancerepair.com/", address: "Orem, UT" }, { id: "3", name: "Jeff Pierson Appraisal", categories: ["Appraiser"], description: "Certified home appraiser providing accurate valuations across Utah.", phone: "801-673-7069", email: "jeff@thepiersonteam.com" }, { id: "4", name: "Freeman Lovell Law", categories: ["Attorney - Estate"], description: "Utah business and estate planning attorneys offering reliable guidance.", phone: "385-446-2247", email: "steve@freemanlovell.com", website: "https://www.freemanlovell.com/", address: "Sandy, UT" }, { id: "5", name: "Revive Property Services", categories: ["Basement Finishing"], description: "Basement finishing and home renovation experts serving Utah & Salt Lake Counties.", phone: "801-995-5380", email: "revive-utah@outlook.com", website: "https://www.elevatewithrevive.com/" }, { id: "6", name: "My Cabinet Guy", categories: ["Cabinet Specialists", "Countertop Specialists", "Flooring Specialists"], description: "Custom cabinets, countertops, and flooring design across Utah.", phone: "801-367-1173", email: "Chad@mycabinetguy.design", website: "https://www.mycabinetguy.design/", address: "Salt Lake City & St. George, UT" }, ]; const VENDORS = RAW_VENDORS; function VendorCard({ v }) { return (

{v.name}

{v.description &&

{v.description}

} {v.address &&

{v.address}

}

{v.phone && {v.phone}} {v.email && {v.email}} {v.website && Visit Website}

); } export default function PreferredVendorsPage() { const [query, setQuery] = useState(""); const filtered = useMemo(() => { const q = query.toLowerCase(); return VENDORS.filter((v) => v.name.toLowerCase().includes(q) || (v.description || "").toLowerCase().includes(q) || (v.categories || []).some((c) => c.toLowerCase().includes(q)) ); }, [query]); return (

Preferred Vendors

setQuery(e.target.value)} placeholder="Search vendors..." className="w-full max-w-md mb-8 rounded-xl border border-neutral-700 bg-neutral-900 px-4 py-2 text-white outline-none focus:ring-2 focus:ring-red-600" />

{filtered.length ? ( filtered.map((v) => ) ) : (

No matching vendors found.

)}