import React, { useState } from 'react';
import { Building2, Users, BookOpen, Mail, Phone,
MessageSquare, Building, CircleDollarSign,
Briefcase, LineChart, HeartPulse, Book,
ShoppingBag, Home, Film, Library,
BarChart, CalendarDays, FileSpreadsheet } from 'lucide-react';
const QuoteRequestForm = () => {
const [step, setStep] = useState(1);
const [formData, setFormData] = useState({
name: '',
email: '',
phone: '',
company: '',
industry: '',
companySize: '',
requirements: [],
products: [],
licenses: {},
message: ''
});
const industries = [
{ icon:
, name: 'IT & Technology' },
{ icon:
, name: 'Professional Services' },
{ icon:
, name: 'Real Estate & Construction' },
{ icon:
, name: 'Retail & E-commerce' },
{ icon:
, name: 'Education' },
{ icon:
, name: 'Healthcare' },
{ icon:
, name: 'Manufacturing' },
{ icon:
, name: 'Financial Services' },
{ icon:
, name: 'Non-Profit' },
{ icon:
, name: 'Media & Entertainment' }
];
const requirementsAndProducts = [
{
category: 'CRM & Sales',
icon:
,
products: [
{ name: 'Zoho CRM', description: 'Sales & Pipeline Management' },
{ name: 'Zoho Sales IQ', description: 'Sales Intelligence & Analytics' },
{ name: 'Zoho Bigin', description: 'Simple CRM for Small Business' }
]
},
{
category: 'Finance & Accounting',
icon:
,
products: [
{ name: 'Zoho Books', description: 'Accounting & Financial Management' },
{ name: 'Zoho Invoice', description: 'Invoicing & Billing' },
{ name: 'Zoho Expense', description: 'Expense Management' },
{ name: 'Zoho Inventory', description: 'Inventory Management' }
]
},
{
category: 'Customer Support',
icon:
,
products: [
{ name: 'Zoho Desk', description: 'Help Desk Software' },
{ name: 'Zoho Assist', description: 'Remote Support' }
]
},
{
category: 'Marketing',
icon:
,
products: [
{ name: 'Zoho Marketing Automation', description: 'Marketing Suite' },
{ name: 'Zoho Campaigns', description: 'Email Marketing' },
{ name: 'Zoho Social', description: 'Social Media Management' },
{ name: 'Zoho Forms', description: 'Online Forms & Surveys' }
]
},
{
category: 'HR & People',
icon:
,
products: [
{ name: 'Zoho People', description: 'HR Management' },
{ name: 'Zoho Recruit', description: 'Recruitment Software' },
{ name: 'Zoho Payroll', description: 'Payroll Management' }
]
},
{
category: 'Collaboration Tools',
icon:
,
products: [
{ name: 'Zoho Workplace', description: 'Email, Calendar & Office Suite' },
{ name: 'Zoho Projects', description: 'Project Management' },
{ name: 'Zoho Meeting', description: 'Video Conferencing' },
{ name: 'Zoho Connect', description: 'Team Collaboration' }
]
}
];
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
const handleProductToggle = (product) => {
setFormData(prev => {
const newProducts = prev.products.includes(product)
? prev.products.filter(p => p !== product)
: [...prev.products, product];
// Remove license count if product is deselected
const newLicenses = {...prev.licenses};
if (!newProducts.includes(product)) {
delete newLicenses[product];
} else if (!newLicenses[product]) {
newLicenses[product] = 1; // Default to 1 license when selected
}
return {
...prev,
products: newProducts,
licenses: newLicenses
};
});
};
const handleLicenseChange = (product, value) => {
const licenseCount = Math.max(1, parseInt(value) || 1); // Ensure minimum 1 license
setFormData(prev => ({
...prev,
licenses: {
...prev.licenses,
[product]: licenseCount
}
}));
};
const handleCategoryToggle = (category) => {
setFormData(prev => ({
...prev,
requirements: prev.requirements.includes(category)
? prev.requirements.filter(r => r !== category)
: [...prev.requirements, category]
}));
};
const handleNext = () => setStep(prev => prev + 1);
const handleBack = () => setStep(prev => prev - 1);
const renderStep1 = () => (
);
const renderStep2 = () => (
Select Your Industry
{industries.map((industry) => (
))}
);
const renderStep3 = () => (
Select Your Requirements
{requirementsAndProducts.map((category) => (
{formData.requirements.includes(category.category) && (
{category.products.map((product) => (
{formData.products.includes(product.name) && (
)}
))}
)}
))}
);
return (
{[
{ step: 1, icon:
, title: "Contact Information" },
{ step: 2, icon:
, title: "Industry Selection" },
{ step: 3, icon:
, title: "Product Requirements" }
].map((section) => (
= section.step ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-500'}`}
>
{section.icon}
= section.step ? 'text-blue-600' : 'text-gray-500'}`}>
{section.title}
))}
{[1, 2, 3].map((i) => (
))}
{step === 1 && renderStep1()}
{step === 2 && renderStep2()}
{step === 3 && renderStep3()}
);
};
export default QuoteRequestForm;