{section} of {totalSections}

{title}

{description}

); }; interface FigmaOnboardingQuestionProps { question: string; placeholder?: string; value: string; onChange: (value: string) => void; onBack: () => void; onNext: () => void; sectionPosition: number; totalInSection: number; sectionName: string; canProceed: boolean; canSkip?: boolean; rows?: number; } export const FigmaOnboardingQuestion: React.FC = ({ question, placeholder = "Type your answer....", value, onChange, onBack, onNext, sectionPosition, totalInSection, sectionName, canProceed, canSkip = true, rows = 6 }) => { // Generate progress dots const renderProgressDots = () => { const dots = []; for (let i = 1; i <= 7; i++) { if (i === sectionPosition) { dots.push( ); } else { dots.push( ); } } return dots; }; return (

{question}

onChange(e.target.value)}
              className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-base font-normal font-['Inter'] leading-normal placeholder:text-[--Neutrals-NeutralSlate950] outline-none resize-none"
              placeholder={placeholder}
              rows={rows}
            />
            <div className="w-3 h-3 absolute right-3 bottom-3">
              <div className="w-2 h-2 absolute top-0.5 left-0.5 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
              <div className="w-1 h-1 absolute top-2 left-2 outline outline-1 outline-offset-[-0.50px] outline-Neutrals-NeutralSlate500" />
            </div>
          </div>
        </div>
        <div className="self-stretch inline-flex justify-start items-start gap-2">
          <button
            onClick={onBack}
            className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100] transition-colors"
          >
            <div className="px-1 flex justify-center items-center">
              <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
            </div>
          </button>
          <button
            onClick={onNext}
            disabled={!canProceed}
            className="flex-1 h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[--Brand-Orange]/90 transition-colors"
          >
            <div className="px-1 flex justify-center items-center">
              <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
            </div>
          </button>
        </div>
      </div>

<div className="px-3 py-1.5 left-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
        <div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] uppercase leading-none">
          {sectionPosition} of {totalInSection}
        </div>
      </div>

{canSkip && (
        <div className="px-3 py-1.5 right-[24px] top-[24px] absolute bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate100] transition-colors">
          <div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-none">Skip</div>
        </div>
      )}

<div className="w-[464px] max-w-[464px] min-w-[464px] left-[488px] top-[24px] absolute flex flex-col justify-start items-center gap-4">
        <div className="p-4 bg-[--Neutrals-NeutralSlate100] rounded-[50px] inline-flex justify-center items-center gap-2 overflow-hidden">
          {renderProgressDots()}
        </div>
        <div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate500] text-base font-medium font-['Neue_Montreal'] leading-normal">
          {sectionName}
        </div>
      </div>
    </div>
  );
};

interface FigmaOnboardingMultipleChoiceProps {
  question: string;
  options: string[];
  selectedValue: string;
  onSelect: (value: string) => void;
  onBack: () => void;
  onNext: () => void;
  sectionPosition: number;
  totalInSection: number;
  sectionName: string;
  canSkip?: boolean;
}

export const FigmaOnboardingMultipleChoice: React.FC<FigmaOnboardingMultipleChoiceProps> = ({
  question,
  options,
  selectedValue,
  onSelect,
  onBack,
  onNext,
  sectionPosition,
  totalInSection,
  sectionName,
  canSkip = true
}) => {
  // Generate progress dots
  const renderProgressDots = () => {
    const dots = [];
    for (let i = 1; i <= 7; i++) {
      if (i === sectionPosition) {
        dots.push(
          <div key={i} className="w-6 h-1 bg-[--Brand-Orange] rounded-3xl" />
        );
      } else {
        dots.push(
          <svg key={i} width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="4" height="4" rx="2" fill="var(--Neutrals-NeutralSlate300, #D5D7DA)" />
          </svg>
        );
      }
    }
    return dots;
  };

return (
    <div className="w-[1440px] h-[810px] py-6 relative bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
      <div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
        <div className="self-stretch flex flex-col justify-start items-start gap-8">
          <div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">
            {question}
          </div>
          <div className="self-stretch inline-flex justify-center items-center gap-3">
            {options.map((option, index) => (
              <button
                key={option}
                onClick={() => onSelect(option)}
                className={`flex-1 h-20 relative rounded-[999px] overflow-hidden transition-colors ${selectedValue === option
                  ? 'bg-[--Neutrals-NeutralSlate800]'
                  : 'bg-[--Neutrals-NeutralSlate100] hover:bg-[--Neutrals-NeutralSlate50]'
                  }`}
              >
                <div className={`absolute inset-0 flex items-center justify-center text-center text-base font-normal font-['Inter'] leading-normal ${selectedValue === option
                  ? 'text-[--Neutrals-NeutralSlate0]'
                  : 'text-[--Neutrals-NeutralSlate950]'
                  }`}>
                  {option}
                </div>
              </button>
            ))}
          </div>
        </div>
        <div className="self-stretch inline-flex justify-start items-start gap-2">
          <button
            onClick={onBack}
            className="h-12 px-8 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-[--Neutrals-NeutralSlate100] transition-colors"
          >
            <div className="px-1 flex justify-center items-center">
              <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Back</div>
            </div>
          </button>
          <button
            onClick={onNext}
            disabled={!selectedValue}
            className="flex-1 h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[--Brand-Orange]/90 transition-colors"
          >
            <div className="px-1 flex justify-center items-center">
              <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
            </div>
          </button>
        </div>
      </div>

interface FigmaOnboardingFormProps {
  companyName: string;
  yourName: string;
  companyLogo?: string;
  onCompanyNameChange: (value: string) => void;
  onYourNameChange: (value: string) => void;
  onLogoUpload?: (file: File) => void;
  onNext: () => void;
  canProceed: boolean;
}

export const FigmaOnboardingForm: React.FC<FigmaOnboardingFormProps> = ({
  companyName,
  yourName,
  companyLogo,
  onCompanyNameChange,
  onYourNameChange,
  onLogoUpload,
  onNext,
  canProceed
}) => {
  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file && onLogoUpload) {
      onLogoUpload(file);
    }
  };

return (
    <div className="w-[1440px] h-[810px] px-[488px] py-32 bg-[--Neutrals-NeutralSlate0] inline-flex flex-col justify-center items-center gap-9">
      <div className="w-full max-w-[464px] min-w-[464px] flex flex-col justify-start items-start gap-12">
        <div className="self-stretch flex flex-col justify-start items-start gap-8">
          <div className="self-stretch text-center justify-start text-[--Neutrals-NeutralSlate950] text-2xl font-medium font-['Neue_Montreal'] leading-normal">
            Company Details
          </div>
          <div className="self-stretch flex flex-col justify-start items-start gap-6">
            <div className="self-stretch flex flex-col justify-start items-start gap-2">
              <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                <div className="justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Logo</div>
              </div>
              <div className="self-stretch p-4 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-start items-center gap-4">
                <div className="w-16 h-16 relative bg-gray-200 rounded-[250px]">
                  <div className="w-16 h-16 left-0 top-0 absolute opacity-10 rounded-[250px]" />
                  {companyLogo && (
                    <img src={companyLogo} alt="Company logo" className="w-16 h-16 rounded-[250px] object-cover" />
                  )}
                </div>
                <div className="inline-flex flex-col justify-start items-start gap-4">
                  <div className="self-stretch inline-flex justify-start items-center gap-3">
                    <label className="flex justify-start items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity">
                      <div>
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M14 2H2M12 8.66667L8 4.66667M8 4.66667L4 8.66667M8 4.66667V14" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                      </div>
                      <div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Upload image</div>
                      <input
                        type="file"
                        accept="image/*"
                        onChange={handleFileUpload}
                        className="hidden"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </div>
            <div className="self-stretch flex flex-col justify-start items-start gap-2">
              <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                <div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Your Name</div>
                <div className="justify-start text-[--Brand-Orange] text-sm font-medium font-['Inter'] leading-tight">*</div>
              </div>
              <div className="self-stretch flex flex-col justify-start items-start gap-1">
                <div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
                  <input
                    type="text"
                    value={yourName}
                    onChange={(e) => onYourNameChange(e.target.value)}
                    className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
                    placeholder="John Doe"
                  />
                </div>
              </div>
            </div>
            <div className="self-stretch flex flex-col justify-start items-start gap-2">
              <div className="self-stretch inline-flex justify-start items-center gap-0.5">
                <div className="justify-start text-[--Neutrals-NeutralSlate900] text-sm font-normal font-['Inter'] leading-tight">Company Name</div>
                <div className="justify-start text-[--Brand-Orange] text-sm font-medium font-['Inter'] leading-tight">*</div>
              </div>
              <div className="self-stretch flex flex-col justify-start items-start gap-1">
                <div className="self-stretch px-4 py-3.5 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
                  <input
                    type="text"
                    value={companyName}
                    onChange={(e) => onCompanyNameChange(e.target.value)}
                    className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight placeholder:text-[--Neutrals-NeutralSlate950] outline-none"
                    placeholder="Doe Enterprises"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <button
          onClick={onNext}
          disabled={!canProceed}
          className="self-stretch h-12 px-4 py-3.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 inline-flex justify-center items-center gap-1 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[--Brand-Orange]/90 transition-colors"
        >
          <div className="px-1 flex justify-center items-center">
            <div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">Next</div>
          </div>
        </button>
      </div>
    </div>
  );
};