; } function TI({ type = 'text', id, value, onChange, placeholder, hasError, label, required, url, readOnly, step }: { type?: string; id: string; value: string; onChange: (v: string) => void; placeholder?: string; hasError?: boolean; label?: string; required?: boolean; url?: boolean; readOnly?: boolean; step?: string; }) { const [f, setF] = useState(false); return (

{label && {label}}

onChange(e.target.value)} placeholder={readOnly ? '—' : (placeholder || 'Fill details here')} onFocus={() => setF(true)} onBlur={() => setF(false)} readOnly={readOnly} step={step} style={{ display: 'block', width: '100%', padding: readOnly ? '0 40px 0 14px' : '0 14px', height: '48px', border: `1.5px solid ${hasError ? T.err : readOnly ? 'rgba(30,69,48,0.12)' : f ? T.gold : T.border}`, borderRadius: '12px', fontFamily: 'inherit', fontSize: '13.5px', color: readOnly ? T.tx4 : T.tx1, background: readOnly ? '#f0f0ee' : '#fff', outline: 'none', boxShadow: hasError ? `0 0 0 3px ${T.errBg}` : f ? `0 0 0 3px ${T.goldFocus}` : 'none', cursor: readOnly ? 'not-allowed' : 'text', transition: 'border-color .2s,box-shadow .2s' }} /> {readOnly && (

)}

{hasError &&

⚠ Required

}

); } function SelectInput({ id, value, onChange, options, placeholder, hasError, label, required, readOnly }: { id: string; value: string; onChange: (v: string) => void; options: string[]; placeholder?: string; hasError?: boolean; label?: string; required?: boolean; readOnly?: boolean; }) { const [f, setF] = useState(false); return (

{label && {label}}

{readOnly ? : }

{hasError &&

⚠ Required

}

); } function TA({ id, value, onChange, label, minH, indigo, readOnly }: { id: string; value: string; onChange: (v: string) => void; label?: string; minH?: string; indigo?: boolean; readOnly?: boolean; }) { const [f, setF] = useState(false); return (

{label && {label}}

onChange(e.target.value)}
          placeholder={readOnly ? '—' : "Fill details here"}
          onFocus={() => setF(true)} onBlur={() => setF(false)}
          readOnly={readOnly}
          style={{
            display: 'block', width: '100%', padding: readOnly ? '12px 40px 12px 14px' : '12px 14px', minHeight: minH || '80px',
            border: `1.5px solid ${readOnly ? 'rgba(30,69,48,0.12)' : f ? T.gold : T.border}`, borderRadius: '12px', fontFamily: 'inherit',
            fontSize: '13px', color: readOnly ? T.tx4 : T.tx1, background: readOnly ? '#f0f0ee' : '#fff', outline: 'none', resize: readOnly ? 'none' : 'vertical', lineHeight: 1.6,
            boxShadow: f ? `0 0 0 3px ${T.goldFocus}` : 'none', cursor: readOnly ? 'not-allowed' : 'text', transition: 'border-color .2s,box-shadow .2s'
          }} />
        {readOnly && (
          <div style={{ position: 'absolute', right: '13px', top: '14px', opacity: 0.5 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </div>
        )}
      </div>
    </div>
  );
}

function PillRow({ children }: { children: React.ReactNode }) {
  return <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>{children}</div>;
}

function ErrHint({ msg }: { msg: string }) {
  return <p style={{ fontSize: '11px', color: T.err, marginTop: '5px', fontWeight: 500 }}>⚠ {msg}</p>;
}

// ─── Step Bar ─────────────────────────────────────────────────────────────────

// ─── Form Cards ───────────────────────────────────────────────────────────────

function FormCard({ children, indigo }: { children: React.ReactNode; indigo?: boolean }) {
  return (
    <div className="kcc3-card" style={{
      background: indigo ? 'linear-gradient(135deg,#fff,#f5f3ff)' : T.cardBg,
      border: `1px solid ${indigo ? 'rgba(99,102,241,0.2)' : 'rgba(30,69,48,0.09)'}`
    }}>
      {!indigo && <div style={{
        position: 'absolute', top: '18px', left: 0, bottom: '18px', width: '3px',
        background: `linear-gradient(180deg,${T.gold},#edd07a 50%,transparent)`, borderRadius: '0 3px 3px 0'
      }} />}
      {children}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════════
// STEP PANELS
// ═══════════════════════════════════════════════════════════════════════════════

function Step10Panel({ form, set, errors, locked }: any) {
  return (
    <>
      <div style={{
        display: 'flex', alignItems: 'flex-start', gap: '9px', padding: '10px 16px', marginBottom: '16px',
        background: '#f8edc0', border: '1px solid rgba(201,168,76,0.38)', borderRadius: '10px'
      }}>
        <Svg d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
        <span style={{ fontSize: '12px', fontWeight: 600, color: T.goldLabel }}>Triggered by the first confirmed booking — fill billing before processing commission</span>
      </div>
      <FormCard>
        <CH icon={<Svg d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />}>Trigger & Identity</CH>
        <div className="kcc3-g2">
          <TI id="partnerCompany" label="Partner Company Name" required value={form.partnerCompany} onChange={v => set('partnerCompany', v)} hasError={!!errors.partnerCompany} readOnly={locked.has('partnerCompany')} />
          <TI id="partnerId" label="Partner ID (from CRM)" required value={form.partnerId} onChange={v => set('partnerId', v)} hasError={!!errors.partnerId} readOnly={locked.has('partnerId')} />
          <TI id="firstBookingRef" label="First Booking Reference" required value={form.firstBookingRef} onChange={v => set('firstBookingRef', v)} hasError={!!errors.firstBookingRef} readOnly={locked.has('firstBookingRef')} />
          <TI type="date" id="dateTriggered" label="Date Triggered" required value={form.dateTriggered} onChange={v => set('dateTriggered', v)} hasError={!!errors.dateTriggered} readOnly={locked.has('dateTriggered')} />
          <SelectInput id="takingCare" label="Taking Care (Responsible Employee)" value={form.takingCare} onChange={v => set('takingCare', v)} options={STAFF_OPTIONS} placeholder="Select staff member…" readOnly={locked.has('takingCare')} />

<TI id="referralCode" label="Referral Code" value={form.referralCode} onChange={v => set('referralCode', v)} readOnly={locked.has('referralCode')} />
        </div>
        <div style={{ marginTop: '18px' }}>
          <SL>Category</SL>
          <PillRow>{CATEGORY_OPTS.map(o => <Pill key={o} label={o} checked={form.category === o} disabled={locked.has('category')} onClick={() => set('category', form.category === o ? '' : o)} />)}</PillRow>
        </div>
        <div style={{ marginTop: '16px' }}>
          <TI url id="taProfileLink" label="TA Profile Link" value={form.taProfileLink} onChange={v => set('taProfileLink', v)} placeholder="https://" readOnly={locked.has('taProfileLink')} />
        </div>
      </FormCard>
    </>
  );
}

const handleStateChange = (state: string) => {
    set('state', state);
    set('taxCity', '');
  };

const selectedCountryData = COUNTRY_DATA[form.taxCountry];
  const stateOptions = selectedCountryData ? Object.keys(selectedCountryData.states) : [];
  const cityOptions = (selectedCountryData && form.state) ? selectedCountryData.states[form.state] || [] : [];

return (
    <div>
      {/* A1 */}
      <FormCard>
        <CH icon={<Svg d="M2 7h20M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7z M10 7v12" />}>A1 · Company & Tax Details</CH>
        <div style={{ marginBottom: '14px' }}><TI id="legalCompanyName" label="Legal Company Name (as per bank / tax registration)" required value={form.legalCompanyName} onChange={v => set('legalCompanyName', v)} hasError={!!errors.legalCompanyName} readOnly={locked.has('legalCompanyName')} /></div>
        <div className="kcc3-g2">
          <TI id="gstNo" label="GST No. (India)" value={form.gstNo} onChange={v => set('gstNo', v)} readOnly={locked.has('gstNo')} />
          <TI id="panNo" label="PAN No. (India)" value={form.panNo} onChange={v => set('panNo', v)} readOnly={locked.has('panNo')} />
          <TI id="aadharNo" label="Aadhar No." value={form.aadharNo} onChange={v => set('aadharNo', v)} readOnly={locked.has('aadharNo')} />
          <TI id="vatTaxId" label="VAT / Tax ID (International)" value={form.vatTaxId} onChange={v => set('vatTaxId', v)} readOnly={locked.has('vatTaxId')} />
          <TI id="bizRegNo" label="Business Registration No." value={form.bizRegNo} onChange={v => set('bizRegNo', v)} readOnly={locked.has('bizRegNo')} />
          <TI id="yearsExperience" label="Years of Experience" value={form.yearsExperience} onChange={v => set('yearsExperience', v)} readOnly={locked.has('yearsExperience')} />
        </div>
        <div style={{ marginTop: '14px', marginBottom: '14px' }}><TA id="agencyAddress" label="Agency / Office Address (full)" value={form.agencyAddress} onChange={v => set('agencyAddress', v)} readOnly={locked.has('agencyAddress')} /></div>
        
        <div className="kcc3-g2">
          <SelectInput id="taxCountry" label="Country" required value={form.taxCountry} onChange={handleCountryChange} options={Object.keys(COUNTRY_DATA)} placeholder="Select country…" hasError={!!errors.taxCountry} readOnly={locked.has('taxCountry')} />
          <TI id="countryCode" label="Country Code (e.g. +91)" value={form.countryCode} onChange={v => set('countryCode', v)} readOnly={locked.has('countryCode')} />
        </div>
        <div className="kcc3-g2">
          <SelectInput id="state" label="State" value={form.state} onChange={handleStateChange} options={stateOptions} placeholder="Select state…" readOnly={locked.has('state') || !form.taxCountry} />
          <SelectInput id="taxCity" label="City" value={form.taxCity} onChange={v => set('taxCity', v)} options={cityOptions} placeholder="Select city…" readOnly={locked.has('taxCity') || !form.state} />
        </div>
        <div className="kcc3-g2">
          <TI id="pincode" label="Pincode / ZIP" value={form.pincode} onChange={v => set('pincode', v)} readOnly={locked.has('pincode')} />
          <TI type="tel" id="officeContact" label="Office Contact Number" value={form.officeContact} onChange={v => set('officeContact', v)} readOnly={locked.has('officeContact')} />
        </div>
      </FormCard>

{/* A2 */}
      <FormCard>
        <CH icon={<Svg d="M1 4h22v16H1z M1 10h22" />}>A2 · Bank Details</CH>
        <div className="kcc3-g2">
          <TI id="accountHolder" label="Account Holder Name" required value={form.accountHolder} onChange={v => set('accountHolder', v)} hasError={!!errors.accountHolder} readOnly={locked.has('accountHolder')} />
          <TI id="bankName" label="Bank Name" required value={form.bankName} onChange={v => set('bankName', v)} hasError={!!errors.bankName} readOnly={locked.has('bankName')} />
          <TI id="accountNo" label="Account Number / IBAN" required value={form.accountNo} onChange={v => set('accountNo', v)} hasError={!!errors.accountNo} readOnly={locked.has('accountNo')} />
          <TI id="ifscSwift" label="IFSC (India) / SWIFT (International)" required value={form.ifscSwift} onChange={v => set('ifscSwift', v)} hasError={!!errors.ifscSwift} readOnly={locked.has('ifscSwift')} />
          <TI id="branchCity" label="Branch Name & City" value={form.branchCity} onChange={v => set('branchCity', v)} readOnly={locked.has('branchCity')} />
          <TI id="accountType" label="Account Type (Current / Savings)" value={form.accountType} onChange={v => set('accountType', v)} readOnly={locked.has('accountType')} />
        </div>
        <div style={{ marginTop: '14px' }}><TI id="intermediaryBank" label="Intermediary / Correspondent Bank (international only)" value={form.intermediaryBank} onChange={v => set('intermediaryBank', v)} readOnly={locked.has('intermediaryBank')} /></div>
      </FormCard>

{/* A3 */}
      <FormCard>
        <CH icon={<Svg d="M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />}>A3 · How Commission is Settled</CH>
        <div style={{ marginBottom: '16px' }}><SL>Commission Type</SL><PillRow>{COMM_TYPE_OPTS.map(o => <Pill key={o} label={o} checked={form.commissionType === o} disabled={locked.has('commissionType')} onClick={() => set('commissionType', form.commissionType === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}>
          <SL required>Settlement Model</SL>
          <PillRow>{SETTLEMENT_OPTS.map(o => <Pill key={o} label={o} checked={form.settlementModel === o} disabled={locked.has('settlementModel')} onClick={() => set('settlementModel', form.settlementModel === o ? '' : o)} />)}</PillRow>
          {errors.settlementModel && <ErrHint msg={errors.settlementModel} />}
        </div>
        <div style={{ marginBottom: '16px' }}><SL>Billing Cycle</SL><PillRow>{BILLING_CYCLE_OPTS.map(o => <Pill key={o} label={o} checked={form.billingCycle === o} disabled={locked.has('billingCycle')} onClick={() => set('billingCycle', form.billingCycle === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}><SL>Preferred Payment Method</SL><PillRow>{PAYMENT_METHOD_OPTS.map(o => <Pill key={o} label={o} checked={form.paymentMethod.includes(o)} disabled={locked.has('paymentMethod')} onClick={() => { const cur = form.paymentMethod; set('paymentMethod', cur.includes(o) ? cur.filter((v: string) => v !== o) : [...cur, o]); }} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}><SL>Billing Currency</SL><PillRow>{CURRENCY_OPTS.map(o => <Pill key={o} label={o} checked={form.billingCurrency === o} disabled={locked.has('billingCurrency')} onClick={() => set('billingCurrency', form.billingCurrency === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '14px' }}><TA id="billingNotes" label="Any specific billing notes or instructions from the partner" value={form.billingNotes} onChange={v => set('billingNotes', v)} readOnly={locked.has('billingNotes')} /></div>
        <div className="kcc3-g2">
          <SelectInput id="billingCollectedBy" label="Billing section collected by" value={form.billingCollectedBy} onChange={v => set('billingCollectedBy', v)} options={STAFF_OPTIONS} placeholder="Select staff member…" readOnly={locked.has('billingCollectedBy')} />

<TI type="date" id="billingCollectedDate" label="Date collected" value={form.billingCollectedDate} onChange={v => set('billingCollectedDate', v)} readOnly={locked.has('billingCollectedDate')} />
        </div>
      </FormCard>

{/* A4 */}
      <FormCard>
        <CH icon={<Svg d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />}>A4 · Documents & Uploads</CH>
        <div style={{ padding: '10px 14px', background: '#f8edc0', borderRadius: '9px', fontSize: '12px', color: T.goldLabel, marginBottom: '16px', fontStyle: 'italic' }}>
          Paste Google Drive share links. Sharing must be set to "Anyone with link can view".
        </div>
        <div className="kcc3-g2">
          <TI url id="gstCertLink" label="GST Certificate (Drive link)" value={form.gstCertLink} onChange={v => set('gstCertLink', v)} placeholder="https://drive.google.com/..." readOnly={locked.has('gstCertLink')} />
          <TI url id="panCardLink" label="PAN Card (Drive link)" value={form.panCardLink} onChange={v => set('panCardLink', v)} placeholder="https://drive.google.com/..." readOnly={locked.has('panCardLink')} />
          <TI url id="cancelledChequeLink" label="Cancelled Cheque (Drive link)" value={form.cancelledChequeLink} onChange={v => set('cancelledChequeLink', v)} placeholder="https://drive.google.com/..." readOnly={locked.has('cancelledChequeLink')} />
          <TI url id="agreementCopyLink" label="Agreement Copy (Drive link)" value={form.agreementCopyLink} onChange={v => set('agreementCopyLink', v)} placeholder="https://drive.google.com/..." readOnly={locked.has('agreementCopyLink')} />
          <TI url id="logoLink" label="Agency Logo (Drive link)" value={form.logoLink} onChange={v => set('logoLink', v)} placeholder="https://drive.google.com/..." readOnly={locked.has('logoLink')} />
          <TI url id="otherDocLink" label="Other Document (Drive link)" value={form.otherDocLink} onChange={v => set('otherDocLink', v)} placeholder="https://drive.google.com/..." readOnly={locked.has('otherDocLink')} />
        </div>
      </FormCard>
    </div>
  );
}

<FormCard>
        <CH icon={<Svg d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />}>B2 · Programs They Want to Sell</CH>
        <div style={{ marginBottom: '16px' }}><SL>Programs</SL><PillRow>{PROGRAM_OPTS.map(o => <Pill key={o} label={o} checked={form.programs.includes(o)} disabled={locked.has('programs')} onClick={() => tm('programs', o)} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}><TA id="programGaps" label="Specific program needs or gaps they've mentioned" value={form.programGaps} onChange={v => set('programGaps', v)} minH="70px" readOnly={locked.has('programGaps')} /></div>
        <div style={{ marginBottom: '16px' }}><SL>Support materials they need</SL><PillRow>{SUPPORT_MAT_OPTS.map(o => <Pill key={o} label={o} checked={form.supportMaterials.includes(o)} disabled={locked.has('supportMaterials')} onClick={() => tm('supportMaterials', o)} />)}</PillRow></div>
        <TI id="translationLang" label="Language for translated content (if needed)" value={form.translationLang} onChange={v => set('translationLang', v)} readOnly={locked.has('translationLang')} />
      </FormCard>
    </div>
  );
}

function Step13Panel({ form, set, locked }: any) {
  return (
    <div>
      <FormCard indigo>
        <CH indigo icon={<Svg d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" indigo />}>C1 · Messaging Angle for This Partner</CH>
        <div style={{ marginBottom: '16px' }}><SL indigo>Primary market profile</SL><PillRow>{MARKET_PROFILE_OPTS.map(o => <IndigoPill key={o} label={o} checked={form.marketProfile === o} disabled={locked.has('marketProfile')} onClick={() => set('marketProfile', form.marketProfile === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}><SL indigo>Segment profile</SL><PillRow>{SEGMENT_OPTS.map(o => <IndigoPill key={o} label={o} checked={form.segmentProfile === o} disabled={locked.has('segmentProfile')} onClick={() => set('segmentProfile', form.segmentProfile === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '14px' }}><TA indigo id="aiLeadWith" label="AI messaging notes — what to lead with for this partner" value={form.aiLeadWith} onChange={v => set('aiLeadWith', v)} readOnly={locked.has('aiLeadWith')} /></div>
        <div style={{ marginBottom: '14px' }}><TA indigo id="aiAvoid" label="What NOT to emphasise with this partner" value={form.aiAvoid} onChange={v => set('aiAvoid', v)} minH="70px" readOnly={locked.has('aiAvoid')} /></div>
        <TA indigo id="aiRespondedWell" label="Programs or offers this partner has responded well to" value={form.aiRespondedWell} onChange={v => set('aiRespondedWell', v)} minH="70px" readOnly={locked.has('aiRespondedWell')} />
      </FormCard>

<FormCard indigo>
        <CH indigo icon={<Svg d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.44 2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.73 16z" indigo />}>C2 · Communication Preferences Observed</CH>
        <div style={{ marginBottom: '16px' }}><SL indigo>Best channel</SL><PillRow>{CHANNEL_OPTS.map(o => <IndigoPill key={o} label={o} checked={form.bestChannel === o} disabled={locked.has('bestChannel')} onClick={() => set('bestChannel', form.bestChannel === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}><SL indigo>Response speed (observed)</SL><PillRow>{RESP_SPEED_OPTS.map(o => <IndigoPill key={o} label={o} checked={form.responseSpeed === o} disabled={locked.has('responseSpeed')} onClick={() => set('responseSpeed', form.responseSpeed === o ? '' : o)} />)}</PillRow></div>
        <div style={{ marginBottom: '16px' }}><SL indigo>Communication style</SL><PillRow>{COMM_STYLE_OPTS.map(o => <IndigoPill key={o} label={o} checked={form.commStyle === o} disabled={locked.has('commStyle')} onClick={() => set('commStyle', form.commStyle === o ? '' : o)} />)}</PillRow></div>
        <TA indigo id="personalNotes" label="Personal notes — names, preferences, things to remember" value={form.personalNotes} onChange={v => set('personalNotes', v)} readOnly={locked.has('personalNotes')} />
      </FormCard>

<FormCard indigo>
        <CH indigo icon={<Svg d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7 M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" indigo />}>Remarks</CH>
        <TA indigo id="remarks" label="Any additional remarks, observations or internal notes" value={form.remarks} onChange={v => set('remarks', v)} minH="110px" readOnly={locked.has('remarks')} />
      </FormCard>
    </div>
  );
}

// ─── Validation ───────────────────────────────────────────────────────────────

// function validateStep(step: number, form: Part3Data) {
//   const e: Partial<Record<keyof Part3Data, string>> = {};
//   if (step === 1) {
//     if (!form.partnerCompany.trim()) e.partnerCompany = 'Required';
//     if (!form.partnerId.trim()) e.partnerId = 'Required';
//     if (!form.firstBookingRef.trim()) e.firstBookingRef = 'Required';
//     if (!form.dateTriggered) e.dateTriggered = 'Required';
//   }
//   if (step === 2) {
//     if (!form.legalCompanyName.trim()) e.legalCompanyName = 'Required';
//     if (!form.taxCountry.trim()) e.taxCountry = 'Required';
//     if (!form.accountHolder.trim()) e.accountHolder = 'Required';
//     if (!form.bankName.trim()) e.bankName = 'Required';
//     if (!form.accountNo.trim()) e.accountNo = 'Required';
//     if (!form.ifscSwift.trim()) e.ifscSwift = 'Required';
//     if (!form.settlementModel) e.settlementModel = 'Please select a settlement model.';
//   }
//   return e;
// }

function validateStep(step: number, form: Part3Data, locked: Set<string>) {
  const e: Partial<Record<keyof Part3Data, string>> = {};

const isLocked = (key: keyof Part3Data) => locked.has(key as string);

if (step === 1) {
    if (!isLocked('partnerCompany') && !form.partnerCompany.trim()) e.partnerCompany = 'Required';
    if (!isLocked('partnerId') && !form.partnerId.trim()) e.partnerId = 'Required';
    if (!isLocked('firstBookingRef') && !form.firstBookingRef.trim()) e.firstBookingRef = 'Required';
    if (!isLocked('dateTriggered') && !form.dateTriggered) e.dateTriggered = 'Required';
  }

if (step === 2) {
    if (!isLocked('legalCompanyName') && !form.legalCompanyName.trim()) e.legalCompanyName = 'Required';
    if (!isLocked('taxCountry') && !form.taxCountry.trim()) e.taxCountry = 'Required';
    if (!isLocked('accountHolder') && !form.accountHolder.trim()) e.accountHolder = 'Required';
    if (!isLocked('bankName') && !form.bankName.trim()) e.bankName = 'Required';
    if (!isLocked('accountNo') && !form.accountNo.trim()) e.accountNo = 'Required';
    if (!isLocked('ifscSwift') && !form.ifscSwift.trim()) e.ifscSwift = 'Required';
    if (!isLocked('settlementModel') && !form.settlementModel) {
      e.settlementModel = 'Please select a settlement model.';
    }
  }

return e;
}
// ─── Main Modal ───────────────────────────────────────────────────────────────

export default function Part3Modal({ isOpen, onClose, onSubmit, partnerName = '', partnerId = '', initialData = {}, lockedFields = false, showSubmitButton = false }: Part3ModalProps) {
  const [form, setForm] = useState<Part3Data>(EMPTY);
  const [step, setStep] = useState(1);
  const [errors, setErrors] = useState<Partial<Record<keyof Part3Data, string>>>({});
  const [saving, setSaving] = useState(false);

// Locking logic for prefilled fields and passed lockedFields
  const locked = useMemo(() => {
    const s = new Set<string>();

// 1. Add fields from lockedFields prop
    if (lockedFields === true) {
      // Lock EVERYTHING
      Object.keys(EMPTY).forEach(k => s.add(k));
    } else if (lockedFields instanceof Set) {
      lockedFields.forEach(f => s.add(f));
    }

// 2. Always lock identity fields if they came from CRM
    if (partnerName) s.add('partnerCompany');
    if (partnerId) s.add('partnerId');

return s;
  }, [partnerName, partnerId, lockedFields]);

useEffect(() => {
    if (isOpen) {
      // Merge EMPTY + initialData + prefilled CRM values
      setForm({
        ...EMPTY,
        ...initialData,
        partnerCompany: partnerName || (initialData as any)?.partnerCompany || '',
        partnerId: partnerId || (initialData as any)?.partnerId || ''
      });
      setStep(1);
      setErrors({});
      setSaving(false);
    }
  }, [isOpen, partnerName, partnerId, initialData]);

useEffect(() => { if (!isOpen) return; const fn = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', fn); return () => window.removeEventListener('keydown', fn); }, [isOpen, onClose]);
  useEffect(() => { document.body.style.overflow = isOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [isOpen]);

const goBack = () => {
    setErrors({});
    setStep(s => Math.max(s - 1, 1));
  };

const goNext = () => {
    const errs = validateStep(step, form, locked);

if (Object.keys(errs).length) {
      setErrors(errs);
      return;
    }

setErrors({});
    setStep(s => Math.min(s + 1, 4));
  };
  const handleSave = async () => {
    setSaving(true);
    try {
      await onSubmit(form);
      setSaving(false);
      onClose();
    } catch (error) {
      console.error("Part 3 Save Error:", error);
      setSaving(false);
    }
  };

if (!isOpen) return null;
  const pp = { form, set, errors, locked };

return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(3px)', zIndex: 999, animation: 'kccFade .2s ease both' }} />

{/* Header */}
        <div className="kcc3-hdr" style={{
          background: T.hdrBg, height: '62px', flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          borderBottom: `2px solid ${T.gold}`
        }}>
          {/* <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{ width: '34px', height: '34px', borderRadius: '9px', background: 'rgba(201,168,76,0.18)', border: '1px solid rgba(201,168,76,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <BookOpen size={16} color={T.gold} />
            </div>
            <div>
              <p style={{ fontSize: '14px', fontWeight: 700, color: '#f9fafb', lineHeight: 1.2 }}>Billing & Partner Intelligence</p>
              <p style={{ fontSize: '10px', color: 'rgba(255,255,255,0.5)', marginTop: '1px', letterSpacing: '.08em', textTransform: 'uppercase' }}>
                Part 3 · Step {step} of 4 · {STEPS[step - 1].label}
              </p>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '7px' }}>
            {['Part 3 of 3', 'First Booking', 'TravelAgentFMS'].map(t => (
              <span key={t} className="kcc3-tag" style={{
                fontSize: '10px', padding: '2px 9px', borderRadius: '20px',
                background: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.5)',
                border: '1px solid rgba(255,255,255,0.1)', letterSpacing: '.04em'
              }}>{t}</span>
            ))}
            <button onClick={onClose} style={{
              marginLeft: '6px', width: '30px', height: '30px', borderRadius: '7px',
              border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.06)',
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.7)'
            }}>
              <X size={14} />
            </button>
          </div> */}

<div>
              <p style={{
                fontSize: '14px',
                fontWeight: 700,
                color: '#f9fafb',
                lineHeight: 1.2
              }}>
                Billing & Partner Intelligence
              </p>

<p style={{
                fontSize: '10px',
                color: 'rgba(255,255,255,0.5)',
                marginTop: '1px',
                letterSpacing: '.08em',
                textTransform: 'uppercase'
              }}>
                Part 3 · Step {step} of 4 · {STEPS[step - 1].label}
              </p>
            </div>
          </div>

<div style={{ display: 'flex', alignItems: 'center', gap: '7px' }}>
            {['Part 3 of 3'].map(t => (
              <span key={t} className="kcc3-tag" style={{
                fontSize: '10px',
                padding: '2px 9px',
                borderRadius: '20px',
                background: 'rgba(255,255,255,0.08)',
                color: 'rgba(255,255,255,0.5)',
                border: '1px solid rgba(255,255,255,0.1)',
                letterSpacing: '.04em'
              }}>
                {t}
              </span>
            ))}

{/* Body */}
        <div className="kcc3-body" style={{ flex: 1, overflowY: 'auto', background: T.pageBg }}>
          <StepBar current={step} />
          {step === 1 && <Step10Panel {...pp} />}
          {step === 2 && <Step11Panel {...pp} />}
          {step === 3 && <Step12Panel {...pp} />}
          {step === 4 && <Step13Panel {...pp} />}
        </div>

{/* Footer */}
        <div className="kcc3-footer" style={{
          background: '#fff', flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '10px',
          borderTop: '1px solid rgba(30,69,48,0.1)'
        }}>
          <p style={{ fontSize: '11px', color: T.tx4 }}>Fields marked <span style={{ color: T.err }}>✱</span> are required</p>
          <div style={{ display: 'flex', gap: '10px' }}>
            {step > 1 ? (
              <button onClick={goBack} style={{
                height: '40px', padding: '0 20px', borderRadius: '10px',
                border: `1.5px solid ${T.border}`, background: 'transparent', fontFamily: 'inherit',
                fontSize: '12px', fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase',
                color: T.tx3, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '7px'
              }}>
                <ArrowLeft size={13} /> Back
              </button>
            ) : (
              <button onClick={onClose} style={{
                height: '40px', padding: '0 20px', borderRadius: '10px',
                border: `1.5px solid ${T.border}`, background: 'transparent', fontFamily: 'inherit',
                fontSize: '12px', fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase',
                color: T.tx3, cursor: 'pointer'
              }}>Cancel</button>
            )}
            {step < 4 ? (
              <button onClick={goNext} style={{
                height: '40px', padding: '0 26px', borderRadius: '10px',
                border: 'none', background: '#1e4530', fontFamily: 'inherit', fontSize: '12px', fontWeight: 700,
                letterSpacing: '.07em', textTransform: 'uppercase', color: '#fff', cursor: 'pointer',
                display: 'flex', alignItems: 'center', gap: '7px'
              }}>
                Continue <ArrowRight size={13} />
              </button>
            ) : (showSubmitButton || !lockedFields) && (
              <button onClick={handleSave} disabled={saving}
                style={{
                  height: '40px', padding: '0 28px', borderRadius: '10px', border: 'none',
                  background: saving ? 'rgba(30,69,48,0.5)' : '#1e4530', fontFamily: 'inherit',
                  fontSize: '12px', fontWeight: 700, letterSpacing: '.07em', textTransform: 'uppercase',
                  color: '#fff', cursor: saving ? 'not-allowed' : 'pointer',
                  display: 'flex', alignItems: 'center', gap: '7px'
                }}>
                {saving ? (<><span style={{ width: '13px', height: '13px', border: '2px solid rgba(255,255,255,0.4)', borderTopColor: '#fff', borderRadius: '50%', display: 'inline-block', animation: 'kccSpin .7s linear infinite' }} />Saving…</>) : (<>Submit Part 3 <ArrowRight size={13} /></>)}
              </button>
            )}
          </div>
        </div>
      </div>

// ─── Trigger Button ───────────────────────────────────────────────────────────

export function Part3Button({ partnerName, partnerId }: { partnerName?: string; partnerId?: string }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)} style={{
        display: 'inline-flex', alignItems: 'center', gap: '7px',
        padding: '0 18px', height: '38px', borderRadius: '8px', border: 'none', background: '#1E3A2F',
        color: '#fff', fontFamily: 'inherit', fontSize: '13px', fontWeight: 600, cursor: 'pointer'
      }}>
        <BookOpen size={14} /> Open Part 3
      </button>
      <Part3Modal isOpen={open} onClose={() => setOpen(false)}
        onSubmit={async (d) => console.log('Part 3:', d)} partnerName={partnerName} partnerId={partnerId} />
    </>
  );
}