claudetools/projects/msp-tools/quote-wizard/frontend/src/components/wizard/steps/Step1CompanyProfile.tsx

import { motion } from 'framer-motion';
import { Building2, Users, Briefcase, MessageSquare } from 'lucide-react';
import { Input } from '@/components/ui';
import { industries } from '@/lib/pricing-data';
import type { CompanyInfo, Industry } from '@/types/quote';

export interface Step1CompanyProfileProps {
  companyInfo: CompanyInfo;
  onUpdateCompany: (data: Partial<CompanyInfo>) => void;
  onSetEndpointCount: (count: number) => void;
  onSetIndustry: (industry: Industry | '') => void;
}

export function Step1CompanyProfile({
  companyInfo,
  onUpdateCompany,
  onSetEndpointCount,
  onSetIndustry,
}: Step1CompanyProfileProps) {
  const handleEndpointChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value, 10);
    if (!isNaN(value) && value >= 1) {
      onSetEndpointCount(value);
    }
  };

  const handleIndustryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onSetIndustry(e.target.value as Industry | '');
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="space-y-6"
    >
      {/* Company Name (Optional) */}
      <div className="space-y-2">
        <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]">
          <Building2 className="w-4 h-4 text-[#fe7400]" />
          Company Name
          <span className="text-gray-400 font-normal">(optional)</span>
        </label>
        <Input
          type="text"
          value={companyInfo.name}
          onChange={(e) => onUpdateCompany({ name: e.target.value })}
          placeholder="Enter your company name"
          className="max-w-md"
        />
      </div>

      {/* Number of Endpoints (Required) */}
      <div className="space-y-2">
        <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]">
          <Users className="w-4 h-4 text-[#fe7400]" />
          Number of Endpoints / Employees
          <span className="text-red-500">*</span>
        </label>
        <div className="flex items-center gap-4">
          <Input
            type="number"
            min={1}
            value={companyInfo.endpointCount}
            onChange={handleEndpointChange}
            className="w-32"
          />
          <span className="text-sm text-gray-500">
            devices requiring monitoring and support
          </span>
        </div>
        <p className="text-xs text-gray-400">
          Include workstations, laptops, and servers that need IT support
        </p>
      </div>

      {/* Industry Selection */}
      <div className="space-y-2">
        <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]">
          <Briefcase className="w-4 h-4 text-[#fe7400]" />
          Industry
        </label>
        <select
          value={companyInfo.industry}
          onChange={handleIndustryChange}
          className="w-full max-w-md px-4 py-2.5 rounded-lg border border-gray-300 text-[#333d49] focus:outline-none focus:ring-2 focus:ring-[#fe7400]/20 focus:border-[#fe7400] transition-all duration-200"
        >
          <option value="">Select your industry...</option>
          {industries.map((industry) => (
            <option key={industry} value={industry}>
              {industry}
            </option>
          ))}
        </select>
        <p className="text-xs text-gray-400">
          This helps us understand compliance requirements and best practices for your sector
        </p>
      </div>

      {/* Notes (Optional) */}
      <div className="space-y-2">
        <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]">
          <MessageSquare className="w-4 h-4 text-[#fe7400]" />
          What brings you here today?
          <span className="text-gray-400 font-normal">(optional)</span>
        </label>
        <textarea
          value={companyInfo.notes}
          onChange={(e) => onUpdateCompany({ notes: e.target.value })}
          placeholder="Tell us about your current IT challenges or what you're looking for..."
          rows={3}
          className="w-full px-4 py-2.5 rounded-lg border border-gray-300 text-[#333d49] placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#fe7400]/20 focus:border-[#fe7400] transition-all duration-200 resize-none"
        />
      </div>

      {/* Info Card */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.2 }}
        className="bg-[#fe7400]/5 border border-[#fe7400]/20 rounded-lg p-4 mt-6"
      >
        <h4 className="font-medium text-[#333d49] mb-2">Why we ask this</h4>
        <p className="text-sm text-gray-600">
          Understanding your business size and industry helps us recommend the right
          service tier and identify any compliance requirements (like HIPAA for healthcare
          or PCI-DSS for retail) that may affect your IT needs.
        </p>
      </motion.div>
    </motion.div>
  );
}