clawdbot-workspace/a2p-autopilot/mcp-app/apps/registration-wizard/steps/BusinessInfoStep.tsx

import React from 'react';
import { FormSection } from '../../../components/forms/FormSection';
import { FormField } from '../../../components/forms/FormField';
import { SelectField } from '../../../components/forms/SelectField';
import { EINInput } from '../../../components/forms/EINInput';
import { Button } from '../../../components/shared/Button';

const businessTypes = ['Corporation', 'Limited Liability Corporation', 'Partnership', 'Co-operative', 'Non-profit Corporation'];

const industries = [
  'AGRICULTURE', 'AUTOMOTIVE', 'BANKING', 'CONSTRUCTION', 'CONSUMER', 'EDUCATION',
  'ELECTRONICS', 'ENGINEERING', 'ENERGY', 'FAST_MOVING_CONSUMER_GOODS', 'FINANCIAL',
  'FINTECH', 'FOOD_AND_BEVERAGE', 'GOVERNMENT', 'HEALTHCARE', 'HOSPITALITY',
  'INSURANCE', 'JEWELRY', 'LEGAL', 'MANUFACTURING', 'MEDIA', 'NOT_FOR_PROFIT',
  'OIL_AND_GAS', 'ONLINE', 'PROFESSIONAL_SERVICES', 'RAW_MATERIALS', 'REAL_ESTATE',
  'RELIGION', 'RETAIL', 'TECHNOLOGY', 'TELECOMMUNICATIONS', 'TRANSPORTATION', 'TRAVEL',
];

const regions = ['USA_AND_CANADA', 'EUROPE', 'ASIA', 'LATIN_AMERICA', 'AFRICA'];

const companyTypes = ['public', 'private', 'non-profit', 'government'];

const registrationIdentifiers = ['EIN', 'DUNS', 'CBN', 'CN', 'ACN', 'CIN', 'VAT', 'VATRN', 'RN', 'Other'];

interface BusinessInfoStepProps {
  data: any;
  errors: Record<string, string>;
  onChange: (data: any) => void;
}

export function BusinessInfoStep({ data, errors, onChange }: BusinessInfoStepProps) {
  const addSocialMediaUrl = () => {
    onChange({ socialMediaUrls: [...data.socialMediaUrls, ''] });
  };

  const removeSocialMediaUrl = (index: number) => {
    onChange({
      socialMediaUrls: data.socialMediaUrls.filter((_: any, i: number) => i !== index),
    });
  };

  const updateSocialMediaUrl = (index: number, value: string) => {
    const updated = [...data.socialMediaUrls];
    updated[index] = value;
    onChange({ socialMediaUrls: updated });
  };

  const toggleRegion = (region: string) => {
    const regions = data.regionsOfOperation.includes(region)
      ? data.regionsOfOperation.filter((r: string) => r !== region)
      : [...data.regionsOfOperation, region];
    onChange({ regionsOfOperation: regions });
  };

  return (
    <div>
      <FormSection title="Business Information" description="Provide your company's legal details">
        <FormField
          label="Business Name"
          name="businessName"
          value={data.businessName}
          onChange={(v) => onChange({ businessName: v })}
          placeholder="Exact legal name matching EIN"
          error={errors.businessName}
          required
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-4)' }}>
          <SelectField
            label="Business Type"
            name="businessType"
            value={data.businessType}
            onChange={(v) => onChange({ businessType: v })}
            options={businessTypes}
            error={errors.businessType}
            required
          />

          <SelectField
            label="Company Type"
            name="companyType"
            value={data.companyType}
            onChange={(v) => onChange({ companyType: v })}
            options={companyTypes}
            error={errors.companyType}
            required
          />
        </div>

        <SelectField
          label="Business Industry"
          name="businessIndustry"
          value={data.businessIndustry}
          onChange={(v) => onChange({ businessIndustry: v })}
          options={industries}
          error={errors.businessIndustry}
          required
        />

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--spacing-4)' }}>
          <SelectField
            label="Registration ID Type"
            name="registrationIdentifier"
            value={data.registrationIdentifier}
            onChange={(v) => onChange({ registrationIdentifier: v })}
            options={registrationIdentifiers}
            required
          />

          <EINInput
            label="Registration Number"
            name="registrationNumber"
            value={data.registrationNumber}
            onChange={(v) => onChange({ registrationNumber: v })}
            helpText="9-digit EIN (XX-XXXXXXX)"
            error={errors.registrationNumber}
            required
          />
        </div>

        <FormField
          label="Website URL"
          name="websiteUrl"
          type="url"
          value={data.websiteUrl}
          onChange={(v) => onChange({ websiteUrl: v })}
          placeholder="https://example.com"
          error={errors.websiteUrl}
          required
        />

        <div>
          <label
            style={{
              display: 'block',
              fontSize: 'var(--font-size-sm)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
              marginBottom: 'var(--spacing-2)',
            }}
          >
            Social Media URLs (optional)
          </label>
          {data.socialMediaUrls.map((url: string, index: number) => (
            <div key={index} style={{ display: 'flex', gap: 'var(--spacing-2)', marginBottom: 'var(--spacing-2)' }}>
              <input
                type="url"
                value={url}
                onChange={(e) => updateSocialMediaUrl(index, e.target.value)}
                placeholder="https://twitter.com/yourcompany"
                style={{ flex: 1 }}
              />
              <Button variant="danger" size="sm" onClick={() => removeSocialMediaUrl(index)}>
                Remove
              </Button>
            </div>
          ))}
          <Button variant="secondary" size="sm" onClick={addSocialMediaUrl}>
            + Add Social Media URL
          </Button>
        </div>

        <SelectField
          label="Business Identity"
          name="businessIdentity"
          value={data.businessIdentity}
          onChange={(v) => onChange({ businessIdentity: v })}
          options={[
            { value: 'direct_customer', label: 'Direct Customer' },
            { value: 'isv_reseller_or_partner', label: 'ISV / Reseller / Partner' },
          ]}
          required
        />

        <div>
          <label
            style={{
              display: 'block',
              fontSize: 'var(--font-size-sm)',
              fontWeight: 600,
              color: 'var(--color-text-primary)',
              marginBottom: 'var(--spacing-2)',
            }}
          >
            Regions of Operation *
          </label>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--spacing-3)' }}>
            {regions.map((region) => (
              <label
                key={region}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 'var(--spacing-2)',
                  cursor: 'pointer',
                  padding: 'var(--spacing-2) var(--spacing-3)',
                  background: data.regionsOfOperation.includes(region)
                    ? 'var(--color-accent-primary)'
                    : 'var(--color-background-tertiary)',
                  color: data.regionsOfOperation.includes(region) ? 'white' : 'var(--color-text-primary)',
                  borderRadius: 'var(--border-radius-md)',
                  fontSize: 'var(--font-size-sm)',
                  fontWeight: 500,
                  transition: 'all 0.2s',
                }}
              >
                <input
                  type="checkbox"
                  checked={data.regionsOfOperation.includes(region)}
                  onChange={() => toggleRegion(region)}
                  style={{ display: 'none' }}
                />
                {region.replace(/_/g, ' ')}
              </label>
            ))}
          </div>
          {errors.regionsOfOperation && (
            <div style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-error)', marginTop: 'var(--spacing-1)' }}>
              {errors.regionsOfOperation}
            </div>
          )}
        </div>
      </FormSection>
    </div>
  );
}