'use client';

import { useState, useEffect } from 'react';
import { submitLegalDeclaration } from '@/modules/api/meta-account-step/legalDeclaration';
import { getCompanyProfile } from '@/modules/api/company-profile/getCompanyProfile';
import { useLegalFinalSubmit } from '@/context/LegalFinalSubmit';
import { usePersonalInformation } from '@/context/PersonalInformation';
import { useAddressContact } from '@/context/AddressContact';
import { useEmploymentFinancial } from '@/context/EmploymentFinancial';
import { useMetaAccount } from '@/context/MetaAccountProductContext';
import StepperBreadcrumb from '@/components/StepperBreadcrumb';
import LivenessVerif from './LivenessVerif';
// debug
// import SuccessVerif from './SuccessVerif';

export default function LegalFinalSubmit({ onNext, onBack, onJumpToStep, onRequireProductSelection }) {
    // Untuk clientAgreementChecks, urutan key agreement1 ... agreement23
    const agreementOrder = Array.from({length: 23}, (_, i) => `agreement${i+1}`);
    // Cek apakah agreement item ke-n boleh diaktifkan
    const isAgreementCheckboxEnabled = (name) => {
      const idx = agreementOrder.indexOf(name);
      if (idx === -1) return true;
      for (let i = 0; i < idx; i++) {
        if (!clientAgreementChecks[agreementOrder[i]]) return false;
      }
      return true;
    };
  // Untuk riskDisclosureChecks, urutan key risk1 ... risk13
  const riskOrder = [
    'risk1','risk2','risk3','risk4','risk5','risk6','risk7','risk8','risk9','risk10','risk11','risk12','risk13'
  ];
  // Cek apakah risk item ke-n boleh diaktifkan
  const isRiskCheckboxEnabled = (name) => {
    const idx = riskOrder.indexOf(name);
    if (idx === -1) return true;
    for (let i = 0; i < idx; i++) {
      if (!riskDisclosureChecks[riskOrder[i]]) return false;
    }
    return true;
  };
  
  // Daftar urutan nama checkbox utama (bukan sub checklist)
  const mainCheckboxOrder = [
    'is_beneficial_owner',
    'is_funds_legitimate',
    'company_profile_accepted',
    'demo_simulation_accepted',
    'experience_declaration_accepted',
    'data_validity_accepted',
    'risk_disclosure_accepted',
    'client_agreement_accepted',
    'trading_rules_accepted',
    'access_code_responsibility_accepted',
    'funds_ownership_accepted',
    'cdd_requirement_accepted',
    'language_declaration_accepted',
  ];
  // Cek apakah checkbox pada index ke-i boleh diaktifkan
  const isCheckboxEnabled = (name) => {
    const idx = mainCheckboxOrder.indexOf(name);
    if (idx === -1) return true;
    // Semua sebelumnya harus sudah dicentang
    for (let i = 0; i < idx; i++) {
      if (!formData[mainCheckboxOrder[i]]) return false;
    }
    return true;
  };

  const { legalFinalSubmitData, updateLegalFinalSubmit } = useLegalFinalSubmit();
  const { personalInformationData } = usePersonalInformation();
  const { addressContactData } = useAddressContact();
  const { employmentFinancialData } = useEmploymentFinancial();
  const { metaAccountProductData } = useMetaAccount();
  const [formData, setFormData] = useState({
    has_family_in_exchange: legalFinalSubmitData.has_family_in_exchange || true,
    is_bankrupt: legalFinalSubmitData.is_bankrupt || true,
    is_beneficial_owner: legalFinalSubmitData.is_beneficial_owner || false,
    is_funds_legitimate: legalFinalSubmitData.is_funds_legitimate || false,
    company_profile_accepted: legalFinalSubmitData.company_profile_accepted || false,
    demo_simulation_accepted: legalFinalSubmitData.demo_simulation_accepted || false,
    demo_account_number: legalFinalSubmitData.demo_account_number || '',
    experience_declaration_accepted: legalFinalSubmitData.experience_declaration_accepted || false,
    data_validity_accepted: legalFinalSubmitData.data_validity_accepted || false,
    risk_disclosure_accepted: legalFinalSubmitData.risk_disclosure_accepted || false,
    client_agreement_accepted: legalFinalSubmitData.client_agreement_accepted || false,
    trading_rules_accepted: legalFinalSubmitData.trading_rules_accepted || false,
    access_code_responsibility_accepted: legalFinalSubmitData.access_code_responsibility_accepted || false,
    funds_ownership_accepted: legalFinalSubmitData.funds_ownership_accepted || false,
    declaration_accepted: legalFinalSubmitData.declaration_accepted || false,
    cdd_requirement_accepted: legalFinalSubmitData.cdd_requirement_accepted || false,
    dispute_resolution_choice: legalFinalSubmitData.dispute_resolution_choice || 'BAKTI',
    language_declaration_accepted: legalFinalSubmitData.language_declaration_accepted || false,

    // === FOR DEBUG ===
    // has_family_in_exchange: legalFinalSubmitData.has_family_in_exchange || false,
    // is_bankrupt: legalFinalSubmitData.is_bankrupt || false,
    // is_beneficial_owner: legalFinalSubmitData.is_beneficial_owner || true,
    // is_funds_legitimate: legalFinalSubmitData.is_funds_legitimate || true,
    // company_profile_accepted: legalFinalSubmitData.company_profile_accepted || true,
    // demo_simulation_accepted: legalFinalSubmitData.demo_simulation_accepted || true,
    // demo_account_number: legalFinalSubmitData.demo_account_number || '889',
    // experience_declaration_accepted: legalFinalSubmitData.experience_declaration_accepted || true,
    // data_validity_accepted: legalFinalSubmitData.data_validity_accepted || true,
    // risk_disclosure_accepted: legalFinalSubmitData.risk_disclosure_accepted || true,
    // client_agreement_accepted: legalFinalSubmitData.client_agreement_accepted || true,
    // trading_rules_accepted: legalFinalSubmitData.trading_rules_accepted || true,
    // access_code_responsibility_accepted: legalFinalSubmitData.access_code_responsibility_accepted || true,
    // funds_ownership_accepted: legalFinalSubmitData.funds_ownership_accepted || true,
    // declaration_accepted: legalFinalSubmitData.declaration_accepted || true,
    // cdd_requirement_accepted: legalFinalSubmitData.cdd_requirement_accepted || true,
    // dispute_resolution_choice: legalFinalSubmitData.dispute_resolution_choice || 'BAKTI',
    // language_declaration_accepted: legalFinalSubmitData.language_declaration_accepted || true,
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [companyData, setCompanyData] = useState(null);
  const [showWaitingVerification, setShowWaitingVerification] = useState(false);
  const [riskDisclosureChecks, setRiskDisclosureChecks] = useState({
    risk1: false,
    risk2: false,
    risk3: false,
    risk4: false,
    risk5: false,
    risk6: false,
    risk7: false,
    risk8: false,
    risk9: false,
    risk10: false,
    risk11: false,
    risk12: false,
    risk13: false,
  });
  const [clientAgreementChecks, setClientAgreementChecks] = useState({
    agreement1: false,
    agreement2: false,
    agreement3: false,
    agreement4: false,
    agreement5: false,
    agreement6: false,
    agreement7: false,
    agreement8: false,
    agreement9: false,
    agreement10: false,
    agreement11: false,
    agreement12: false,
    agreement13: false,
    agreement14: false,
    agreement15: false,
    agreement16: false,
    agreement17: false,
    agreement18: false,
    agreement19: false,
    agreement20: false,
    agreement21: false,
    agreement22: false,
    agreement23: false,
  });

  // State untuk error khusus pendaftaran meta
  const [metaBlockError, setMetaBlockError] = useState("");
  // Cek jika user memilih "Ya" pada dua radio awal
  useEffect(() => {
    if (formData.has_family_in_exchange === true || formData.is_bankrupt === true) {
      setMetaBlockError("Anda tidak dapat mendaftarkan akun meta");
    } else {
      setMetaBlockError("");
    }
  }, [formData.has_family_in_exchange, formData.is_bankrupt]);

  // Autofill demo_account_number dari localStorage jika ada
  useEffect(() => {
    if (typeof window !== "undefined") {
      const demoAccountNumber = localStorage.getItem("demoAccountNumber");
      if (demoAccountNumber) {
        setFormData(prev => ({
          ...prev,
          demo_account_number: demoAccountNumber
        }));
      }
    }
  }, []);

  // Fetch company profile data on mount
  useEffect(() => {
    const fetchCompanyProfile = async () => {
      try {
        const response = await getCompanyProfile();
        console.log('[FETCH COMPANY PROFILE RESPONSE]', response);
        if (response) {
          setCompanyData(response);
        }
      } catch (err) {
        console.error('Error fetching company profile:', err);
      }
    };

    fetchCompanyProfile();
  }, []);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    setError('');
  };

  const handleCheckboxChange = (name) => {
    // Cegah centang jika belum urut
    if (!isCheckboxEnabled(name)) return;
    setFormData(prev => ({
      ...prev,
      [name]: !prev[name]
    }));
    setError('');
  };

  const handleRadioChange = (name, value) => {
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    setError('');
  };

  const handleRiskCheckboxChange = (name) => {
    // Cegah centang jika belum urut
    if (!isRiskCheckboxEnabled(name)) return;
    setRiskDisclosureChecks(prev => {
      const newValue = !prev[name];
      // If unchecking any risk item, also uncheck the main risk disclosure checkbox
      if (!newValue) {
        setFormData(prevForm => ({
          ...prevForm,
          risk_disclosure_accepted: false
        }));
      }
      return {
        ...prev,
        [name]: newValue
      };
    });
  };

  const handleClientAgreementCheckboxChange = (name) => {
    // Cegah centang jika belum urut
    if (!isAgreementCheckboxEnabled(name)) return;
    setClientAgreementChecks(prev => {
      const newValue = !prev[name];
      // If unchecking any agreement item, juga uncheck main agreement
      if (!newValue) {
        setFormData(prevForm => ({
          ...prevForm,
          client_agreement_accepted: false
        }));
      }
      return {
        ...prev,
        [name]: newValue
      };
    });
  };

  const allRiskDisclosuresChecked = Object.values(riskDisclosureChecks).every(value => value === true);
  const allClientAgreementsChecked = Object.values(clientAgreementChecks).every(value => value === true);

  const validateForm = () => {
    if (!formData.demo_account_number.trim()) {
      setError('No. Demo Account harus diisi');
      return false;
    }
    if (!formData.is_beneficial_owner) {
      setError('Pernyataan kepemilikan dana harus disetujui');
      return false;
    }
    if (!formData.is_funds_legitimate) {
      setError('Pernyataan legalitas dana harus disetujui');
      return false;
    }
    if (!formData.company_profile_accepted) {
      setError('Pernyataan Profil Perusahaan harus disetujui');
      return false;
    }
    if (!formData.demo_simulation_accepted) {
      setError('Pernyataan Simulasi Demo harus disetujui');
      return false;
    }
    if (!formData.experience_declaration_accepted) {
      setError('Pernyataan Pengalaman harus disetujui');
      return false;
    }
    if (!formData.data_validity_accepted) {
      setError('Pernyataan Kebenaran Data harus disetujui');
      return false;
    }
    if (!formData.risk_disclosure_accepted) {
      setError('Pemberitahuan Risiko harus disetujui');
      return false;
    }
    if (!formData.client_agreement_accepted) {
      setError('Perjanjian Pemberian Amanat harus disetujui');
      return false;
    }
    if (!formData.trading_rules_accepted) {
      setError('Peraturan Perdagangan harus disetujui');
      return false;
    }
    if (!formData.access_code_responsibility_accepted) {
      setError('Tanggung Jawab Kode Akses harus disetujui');
      return false;
    }
    if (!formData.funds_ownership_accepted) {
      setError('Pernyataan Kepemilikan Dana harus disetujui');
      return false;
    }
    if (!formData.cdd_requirement_accepted) {
      setError('Persetujuan CDD Reguler harus disetujui');
      return false;
    }
    if (!formData.language_declaration_accepted) {
      setError('Pernyataan Bahasa harus disetujui');
      return false;
    }
    return true;
  };

  const handleSubmit = async () => {
    if (!validateForm()) {
      return;
    }

    setLoading(true);
    setError('');

    try {
      const payload = {
        has_family_in_exchange: formData.has_family_in_exchange,
        is_bankrupt: formData.is_bankrupt,
        is_beneficial_owner: formData.is_beneficial_owner,
        is_funds_legitimate: formData.is_funds_legitimate,
        company_profile_accepted: formData.company_profile_accepted,
        demo_simulation_accepted: formData.demo_simulation_accepted,
        demo_account_number: formData.demo_account_number,
        experience_declaration_accepted: formData.experience_declaration_accepted,
        data_validity_accepted: formData.data_validity_accepted,
        risk_disclosure_accepted: formData.risk_disclosure_accepted,
        client_agreement_accepted: formData.client_agreement_accepted,
        trading_rules_accepted: formData.trading_rules_accepted,
        access_code_responsibility_accepted: formData.access_code_responsibility_accepted,
        funds_ownership_accepted: formData.funds_ownership_accepted,
        cdd_requirement_accepted: formData.cdd_requirement_accepted,
        dispute_resolution_choice: formData.dispute_resolution_choice,
        language_declaration_accepted: formData.language_declaration_accepted,
        declaration_accepted: true,
      };

      const response = await submitLegalDeclaration(payload);

      if (response.status) {
        console.log('Legal declaration submitted successfully');
        
        // Save to context
        updateLegalFinalSubmit(payload);

        // Hapus semua data meta_account di localStorage
        if (typeof window !== 'undefined') {
          const keysToRemove = [
            'demoAccountNumber',
            'meta_account_address_contact',
            // 'meta_account_employment_financial',
            'meta_account_investment_emergency',
            'meta_account_legal_final',
            'meta_account_personal_info',
            'meta_account_risk_warning',
            'meta_account_step',
          ];
          keysToRemove.forEach(key => localStorage.removeItem(key));
        }

        const selectedProduct = metaAccountProductData?.selectedProduct;
        const product_id = selectedProduct?.id || selectedProduct?.product_id;

        if (!product_id) {
          if (onRequireProductSelection) {
            onRequireProductSelection();
          } else {
            setError('Produk belum dipilih. Silakan pilih produk terlebih dahulu.');
          }
          return;
        }

        if (product_id) {
          // Show waiting verification page
          setShowWaitingVerification(true);

          //uncomment for debug, skip liveness step and go directly to waiting verification page
          // const verification_id = '13ed4ea1-xxxx-xxxx-xxxx-96cc8f15e603';
          // window.location.href = '/pages/meta-account/waiting-page/' + verification_id;
        }
      }
    } catch (err) {
      console.error('Error submitting legal declaration:', err);
      setError(err.response?.data?.message || 'Terjadi kesalahan saat mengirim pernyataan legal');
    } finally {
      setLoading(false);
    }
  };

  // Show liveness verification page if submission is successful
  if (showWaitingVerification) {
    return (
      <div className="relative align-middle justify-center px-4 py-60 bg-linear-to-tr from-[#190D66]/70 via-[#0e113a]/70 to-[#190D66]/70"> 
        <LivenessVerif/>
        {/* debug */}
        {/* <SuccessVerif /> */}
      </div>
    );
  }

  return (
    <div className="min-h-screen flex items-center justify-center px-4 py-80 relative">

      {/* Stepper Breadcrumb */}
      <div className="absolute top-30 left-0 right-0 z-10">
        <StepperBreadcrumb 
          totalSteps={6} 
          currentStep={6} 
          currentStepTitle="Pernyataan Legal & Final"
          onStepClick={onJumpToStep}
        />
      </div>

      {/* Background Image - Grid */}
      <div className="absolute inset-0 bg-cover bg-center bg-no-repeat bg-[url('/images/bg_grid.png')] -z-10"></div>
      
      {/* Background Image - Candle (overlay) */}
      <div className="absolute inset-0 bg-cover bg-center bg-no-repeat bg-[url('/images/bg_candle_2.png')] opacity-50 bg-transparent"></div>
      
      {/* Gradient Overlay - Darker */}
      <div className="absolute inset-0 bg-linear-to-tr from-[#0a0a0a]/95 via-[#190D66]/90 to-[#0a0a0a]/95 -z-10"></div>

      <div className="w-full max-w-5xl relative">
        {/* Card */}
        <div className="bg-[#190D66]/50 backdrop-blur-sm rounded-3xl p-6 md:p-10 border border-[#1D0D80]/30">
          {/* Title */}
          <h1 className="text-2xl md:text-3xl font-bold text-white mb-8 text-center">
            Pernyataan Legal & Final Submit
          </h1>

          {/* Form */}
          <div className="space-y-6">
            
            {/* Section A: Profil & Legalitas BAPPEBTI */}
            <div className="border-b border-[#1D0D80]/30 pb-6">
              <h2 className="text-xl font-semibold text-white mb-4">A. Profil & Legalitas BAPPEBTI</h2>
              
              {/* Has Family in Exchange */}
              <div className="mb-4">
                <label className="text-white text-sm md:text-base mb-2 block">
                  Apakah Anda memiliki anggota keluarga yang bekerja di BAPPEBTI/Bursa Berjangka/Kliring Berjangka?
                </label>
                <div className="flex gap-6">
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="has_family_in_exchange"
                      checked={formData.has_family_in_exchange === true}
                      onChange={() => handleRadioChange('has_family_in_exchange', true)}
                      className="mr-2 w-4 h-4 accent-[#FCA311]"
                    />
                    <span className="text-white text-sm">Ya</span>
                  </label>
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="has_family_in_exchange"
                      checked={formData.has_family_in_exchange === false}
                      onChange={() => handleRadioChange('has_family_in_exchange', false)}
                      className="mr-2 w-4 h-4 accent-[#FCA311]"
                    />
                    <span className="text-white text-sm">Tidak</span>
                  </label>
                </div>
              </div>

              {/* Error jika memilih Ya */}
              {formData.has_family_in_exchange === true && (
                <div className="mb-6 p-3 bg-red-500/10 border border-red-500/50 text-red-400 rounded-lg text-sm">Anda tidak dapat mendaftarkan akun meta</div>
              )}

              {/* Is Bankrupt */}
              <div className="mb-4">
                <label className="text-white text-sm md:text-base mb-2 block">
                  Apakah Anda telah dinyatakan pailit oleh pengadilan?
                </label>
                <div className="flex gap-6">
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="is_bankrupt"
                      checked={formData.is_bankrupt === true}
                      onChange={() => handleRadioChange('is_bankrupt', true)}
                      className="mr-2 w-4 h-4 accent-[#FCA311]"
                    />
                    <span className="text-white text-sm">Ya</span>
                  </label>
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="is_bankrupt"
                      checked={formData.is_bankrupt === false}
                      onChange={() => handleRadioChange('is_bankrupt', false)}
                      className="mr-2 w-4 h-4 accent-[#FCA311]"
                    />
                    <span className="text-white text-sm">Tidak</span>
                  </label>
                </div>
              </div>

              {/* Error jika memilih Ya */}
              {formData.is_bankrupt === true && (
                <div className="mb-6 p-3 bg-red-500/10 border border-red-500/50 text-red-400 rounded-lg text-sm">Anda tidak dapat mendaftarkan akun meta</div>
              )}

              {/* Is Beneficial Owner */}
              <label className="flex items-start cursor-pointer mb-4">
                <input
                  type="checkbox"
                  checked={formData.is_beneficial_owner}
                  onChange={() => handleCheckboxChange('is_beneficial_owner')}
                  className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                  disabled={!isCheckboxEnabled('is_beneficial_owner')}
                />
                <span className="text-white text-sm">
                  Saya menyatakan bahwa dana yang saya pergunakan untuk bertransaksi adalah milik sendiri dan bukan dana pihak lain
                </span>
              </label>

              {/* Is Funds Legitimate */}
              <label className="flex items-start cursor-pointer mb-4">
                <input
                  type="checkbox"
                  checked={formData.is_funds_legitimate}
                  onChange={() => handleCheckboxChange('is_funds_legitimate')}
                  className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                  disabled={!isCheckboxEnabled('is_funds_legitimate')}
                />
                <span className="text-white text-sm">
                  Saya menyatakan bahwa dana yang saya pergunakan untuk bertransaksi bukan hasil penipuan, penggelapan, hasil pencucian uang maupun tindak pidana korupsi dan perbuatan melawan hukum lainnya serta tidak dimaksudkan untuk melakukan pencucian uang
                </span>
              </label>
            </div>

            {/* Section B: Pernyataan Dokumen */}
            <div className="border-b border-[#1D0D80]/30 pb-6">
              <h2 className="text-xl font-semibold text-white mb-4">B. Pernyataan Dokumen</h2>
              
              {/* Demo Account Number */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-center mb-4">
                <label className="text-white text-sm md:text-base">No. Demo Account</label>
                <input
                  type="text"
                  name="demo_account_number"
                  value={formData.demo_account_number}
                  onChange={handleInputChange}
                  className="col-span-2 px-4 py-2 bg-[#2a2a2a] border border-[#FCA311] text-white rounded-lg focus:outline-none focus:border-[#FDD168] transition-all"
                />
              </div>

              {/* Checkboxes for Document Declarations */}
              <div className="space-y-3">
                {/* Company Profile Preview */}
                <div className="bg-[#2a2a2a]/50 border border-[#1D0D80]/30 rounded-lg p-4 mb-3">
                  <h3 className="text-white font-semibold mb-3 text-sm uppercase">Profil Perusahaan Pialang Berjangka</h3>
                  
                  {companyData && companyData.company ? (
                    <div className="space-y-3 text-sm">
                      {/* Company Info */}
                      <div className="border-b border-[#1D0D80]/20 pb-3">
                        <table className="w-full">
                          <tbody>
                            <tr>
                              <td className="text-gray-400 py-1 align-top w-48">Company Name</td>
                              <td className="text-white py-1">: {companyData.company.company_name}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Kantor</td>
                              <td className="text-white py-1 whitespace-pre-line">: {companyData.company.address_hq}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">No. Telp Handphone</td>
                              <td className="text-white py-1">: {companyData.company.phone_hq}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Fax</td>
                              <td className="text-white py-1">: {companyData.company.fax}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Website</td>
                              <td className="text-white py-1">: {companyData.company.website}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      {/* Management Board */}
                      <div className="border-b border-[#1D0D80]/20 pb-3">
                        <h4 className="text-white font-semibold mb-2">Susunan Pengurus/Pemegang/Pemilik:</h4>
                        <table className="w-full">
                          <tbody>
                            {companyData.company.management_board && companyData.company.management_board.map((member, index) => (
                              <tr key={index}>
                                <td className="text-gray-400 py-1 w-48">{member.position}</td>
                                <td className="text-white py-1">: {member.name}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>

                      {/* Shareholders */}
                      {companyData.company.shareholders && companyData.company.shareholders.length > 0 && (
                        <div className="border-b border-[#1D0D80]/20 pb-3">
                          <table className="w-full">
                            <tbody>
                              {companyData.company.shareholders.map((shareholder, index) => (
                                <tr key={index}>
                                  <td className="text-gray-400 py-1 w-48">{shareholder.type}</td>
                                  <td className="text-white py-1">: {shareholder.name}</td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      )}

                      {/* Licenses & Memberships */}
                      <div className="border-b border-[#1D0D80]/20 pb-3">
                        <h4 className="text-white font-semibold mb-2">Izin dan Keanggotaan:</h4>
                        <table className="w-full">
                          <tbody>
                            <tr>
                              <td className="text-gray-400 py-1 align-top w-48">Nomor dan Tanggal Izin Usaha</td>
                              <td className="text-white py-1">: {companyData.company.bappebti_license}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Keanggotaan Bursa</td>
                              <td className="text-white py-1">: {companyData.company.bbj_membership}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Keanggotaan Badan Kliring</td>
                              <td className="text-white py-1">: {companyData.company.bkdi_membership}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      {/* Trading Information */}
                      <div className="border-b border-[#1D0D80]/20 pb-3">
                        <table className="w-full">
                          <tbody>
                            <tr>
                              <td className="text-gray-400 py-1 align-top w-48">Kontrak Derivatif yang Ditransaksikan</td>
                              <td className="text-white py-1">: {companyData.company.contract_derivatives_traded}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Volume Transaksi Minimal</td>
                              <td className="text-white py-1">: {companyData.company.min_volume_lot}</td>
                            </tr>
                            <tr>
                              <td className="text-gray-400 py-1 align-top">Biaya-Biaya</td>
                              <td className="text-white py-1 whitespace-pre-line">: {companyData.company.fees_details}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

                      {/* Segregated Accounts */}
                      {companyData.company.segregated_accounts && companyData.company.segregated_accounts.length > 0 && (
                        <div>
                          <h4 className="text-white font-semibold mb-2">Rekening Terpisah (Segregated Account):</h4>
                          {companyData.company.segregated_accounts.map((account, index) => (
                            <div key={index} className="mb-2">
                              <table className="w-full">
                                <tbody>
                                  <tr>
                                    <td className="text-gray-400 py-1 w-48">Nama Bank</td>
                                    <td className="text-white py-1">: {account.bank_name}</td>
                                  </tr>
                                  <tr>
                                    <td className="text-gray-400 py-1">Jenis Rekening</td>
                                    <td className="text-white py-1">: {account.account_type}</td>
                                  </tr>
                                  <tr>
                                    <td className="text-gray-400 py-1">Cabang</td>
                                    <td className="text-white py-1">: {account.branch}</td>
                                  </tr>
                                  <tr>
                                    <td className="text-gray-400 py-1">Nomor Rekening</td>
                                    <td className="text-white py-1">: {account.account_number}</td>
                                  </tr>
                                </tbody>
                              </table>
                              {index < companyData.company.segregated_accounts.length - 1 && (
                                <div className="border-b border-[#1D0D80]/10 my-2"></div>
                              )}
                            </div>
                          ))}
                        </div>
                      )}

                      {/* Dispute Resolution */}
                      <div className="mt-3">
                        <table className="w-full">
                          <tbody>
                            <tr>
                              <td className="text-gray-400 py-1 align-top w-48">Penyelesaian Perselisihan</td>
                              <td className="text-white py-1 whitespace-pre-line">: {companyData.company.dispute_resolutions}</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  ) : (
                    <div className="text-gray-400 text-sm text-center py-4">
                      Memuat data profil perusahaan...
                    </div>
                  )}

                  <label className="flex items-start cursor-pointer mt-4">
                    <input
                      type="checkbox"
                      checked={formData.company_profile_accepted}
                      onChange={() => handleCheckboxChange('company_profile_accepted')}
                      className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                      disabled={!isCheckboxEnabled('company_profile_accepted')}
                    />
                    <span className="text-white text-sm">
                      Saya menyatakan bahwa saya telah membaca dan menerima informasi PROFIL PERUSAHAAN PIALANG BERJANGKA, mengerti dan memahami isinya
                    </span>
                  </label>
                </div>

                {/* Demo Simulation Accepted with Data Review */}
                <div className="bg-[#2a2a2a]/50 border border-[#1D0D80]/30 rounded-lg p-4 mb-3">
                  <h3 className="text-white font-semibold mb-3 text-sm uppercase">Pernyataan Telah Melakukan Simulasi Perdagangan Berjangka Komoditi</h3>
                  
                  {/* Data Review */}
                  <div className="space-y-2 mb-4 text-sm">
                    <div className="flex">
                      <span className="text-gray-400 w-48">Nama Lengkap</span>
                      <span className="text-white">{personalInformationData.full_name || 'XXXXXXXXXX'}</span>
                    </div>
                    <div className="flex">
                      <span className="text-gray-400 w-48">Tempat / Tanggal Lahir</span>
                      <span className="text-white">{personalInformationData.place_of_birth || 'XXXXXXXXXXXXXX'}, {personalInformationData.date_of_birth || 'XXXX-XX-XX'}</span>
                    </div>
                    <div className="flex">
                      <span className="text-gray-400 w-48">Alamat</span>
                      <span className="text-white">{addressContactData.address_identity || addressContactData.address_domicile || 'XXXXXXXXXXXXX'}</span>
                    </div>
                    <div className="flex">
                      <span className="text-gray-400 w-48">Kodepos</span>
                      <span className="text-white">{addressContactData.postal_code_identity || addressContactData.postal_code_domicile || 'XXXXX'}</span>
                    </div>
                    <div className="flex">
                      <span className="text-gray-400 w-48">No. Identitas KTP/SIM/Passpor *</span>
                      <span className="text-white">{personalInformationData.identity_number || 'XXXXXXXXXXXXXX'}</span>
                    </div>
                    <div className="flex">
                      <span className="text-gray-400 w-48">No. Demo Acc</span>
                      <span className="text-white">{metaAccountProductData.demoAccountNumber || 'XX'}</span>
                    </div>
                  </div>

                  <label className="flex items-start cursor-pointer mb-2">
                    <input
                      type="checkbox"
                      checked={formData.demo_simulation_accepted}
                      onChange={() => handleCheckboxChange('demo_simulation_accepted')}
                      className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                      disabled={!isCheckboxEnabled('demo_simulation_accepted')}
                    />
                    <span className="text-white text-sm">
                      Saya menyatakan bahwa saya telah melakukan simulasi bertransaksi di bidang Perdagangan Berjangka Komoditi pada PT. Century Investment Futures, dan telah memahami tentang tata cara bertransaksi dibidang Perdagangan Berjangka Komoditi
                    </span>
                  </label>

                  <label className="flex items-start cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.experience_declaration_accepted}
                      onChange={() => handleCheckboxChange('experience_declaration_accepted')}
                      className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                      disabled={!isCheckboxEnabled('experience_declaration_accepted')}
                    />
                    <span className="text-white text-sm">
                      Saya menyatakan bahwa saya telah memiliki pengalaman yang mencukupi dalam melaksanakan transaksi Perdagangan Berjangka karena pernah bertransaksi pada Perusahaan Pialang Berjangka PT.Century Investment Futures, dan telah memahami tentang tata cara bertransaksi Perdagangan Berjangka
                    </span>
                  </label>
                </div>

                
                {/* Data Validity Accepted with Bank Account Review */}
                <div className="bg-[#2a2a2a]/50 border border-[#1D0D80]/30 rounded-lg p-4 mb-3">
                  <h3 className="text-white font-semibold mb-3 text-sm uppercase">Rekening Bank Nasabah Untuk Penyetoran dan Penarikan Margin</h3>
                  
                  {(employmentFinancialData.banks?.length > 0
                    ? employmentFinancialData.banks
                    : [{
                        bank_name: employmentFinancialData.bank_name,
                        bank_branch: employmentFinancialData.bank_branch,
                        bank_account_number: employmentFinancialData.bank_account_number,
                        bank_account_type: employmentFinancialData.bank_account_type,
                        bank_account_holder: employmentFinancialData.bank_account_holder,
                      }]
                  ).map((bank, index) => (
                    <div key={`${bank.bank_name || 'bank'}-${index}`} className="mb-4">
                      <h4 className="text-white font-semibold mb-2 text-sm">{index + 1}. NAMA BANK</h4>
                      <div className="space-y-2 text-sm">
                        <div className="flex">
                          <span className="text-gray-400 w-32">Nama Bank</span>
                          <span className="text-white">{bank.bank_name || (index === 0 ? 'BCA' : 'XXXXXXXXXXXXX')}</span>
                        </div>
                        <div className="flex">
                          <span className="text-gray-400 w-32">Cabang</span>
                          <span className="text-white">{bank.bank_branch || 'XXXXXXXXXXXXX'}</span>
                        </div>
                        <div className="flex">
                          <span className="text-gray-400 w-32">Nomor Rekening</span>
                          <span className="text-white">{bank.bank_account_number || 'XXXXXXXXXXXXXX'}</span>
                        </div>
                        <div className="flex">
                          <span className="text-gray-400 w-32">Atas Nama</span>
                          <span className="text-white">{bank.bank_account_holder || 'XXXXXXXXXXXXX'}</span>
                        </div>
                        <div className="flex">
                          <span className="text-gray-400 w-32">Jenis Rekening</span>
                          <span className="text-white">{bank.bank_account_type || 'XXXXXXXXXXXXX'}</span>
                        </div>
                      </div>
                    </div>
                  ))}

                  {/* Document Checklist */}
                  <div className="border-t border-[#1D0D80]/20 pt-4 mb-4">
                    <h4 className="text-white font-semibold mb-2 text-sm">DOKUMEN YANG DILAMPIRKAN</h4>
                    <div className="space-y-1 text-xs text-white">
                      <div className="flex items-center">
                        <span className="mr-2">☑</span>
                        <span>1. Upload ID(KTP/ SIM/ Passport) Hasil Scan/photo(Lampirkan)</span>
                      </div>
                      <div className="flex items-center">
                        <span className="mr-2">☑</span>
                        <span>2. FOTO TERKINI(3 bulan terakhir) Hasil Scan/photo(Lampirkan)</span>
                      </div>
                      <div className="flex items-center">
                        <span className="mr-2">☑</span>
                        <span>3. Dokumen Alamat (Rekening Listrik/Telepon) Hasil Scan/photo(Lampirkan)</span>
                      </div>
                      <div className="flex items-center">
                        <span className="mr-2">☑</span>
                        <span>4. Statement Bank/Tagihan Kartu Kredit Hasil Scan/photo (Lampirkan)</span>
                      </div>
                      <div className="flex items-center">
                        <span className="mr-2">☑</span>
                        <span>5. NPWP Hasil Scan (Lampirkan)</span>
                      </div>
                    </div>
                  </div>

                  <label className="flex items-start cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.data_validity_accepted}
                      onChange={() => handleCheckboxChange('data_validity_accepted')}
                      className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                      disabled={!isCheckboxEnabled('data_validity_accepted')}
                    />
                    <span className="text-white text-sm">
                      Saya menyatakan bahwa semua informasi dan semua dokumen yang saya lampirkan dalam APLIKASI PEMBUKAAN REKENING TRANSAKSI SECARA ELEKTRONIK ON-LINE adalah benar dan tepat, Saya akan bertanggung jawab penuh apabila dikemudian hari terjadi sesuatu hal sehubungan dengan ketidak benaran data yang saya berikan
                    </span>
                  </label>
                </div>

                {/* Risk Disclosure with Detailed Checklist */}
                <div className="bg-[#2a2a2a]/50 border border-[#1D0D80]/30 rounded-lg p-4 mb-3">
                  <h3 className="text-white font-semibold mb-3 text-sm uppercase">PEMBERITAHUAN ADANYA RISIKO</h3>
                  
                  <div className="space-y-4 text-sm text-white">
                    <p className="font-semibold">
                      DOKUMEN PEMBERITAHUAN ADANYA RISIKO YANG HARUS DISAMPAIKAN OLEH PIALANG BERJANGKA UNTUK TRANSAKSI KONTRAK DERIVATIF DALAM SISTEM PERDAGANGAN ALTERNATIF
                    </p>
                    
                    <p>
                      Dokumen Pemberitahuan Adanya Risiko ini disampaikan kepada Anda sesuai dengan Pasal 50 ayat (2) Undang-Undang Nomor 32 Tahun 1997 tentang Perdagangan Berjangka Komoditi sebagaimana telah diubah dengan Undang-Undang Nomor 10 Tahun 2011 tentang Perubahan Atas Undang-Undang Nomor 32 Tahun 1997 Tentang Perdagangan Berjangka Komoditi.
                    </p>
                    
                    <p>
                      Maksud dokumen ini adalah memberitahukan bahwa kemungkinan kerugian atau keuntungan dalam perdagangan Kontrak Derivatif dalam Sistem Perdagangan Alternatif bisa mencapai jumlah yang sangat besar. Oleh karena itu, Anda harus berhati-hati dalam memutuskan untuk melakukan transaksi, apakah kondisi keuangan Anda mencukupi.
                    </p>

                    {/* Risk Item 1 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">1. Perdagangan Kontrak Derivatif dalam Sistem Perdagangan Alternatif belum tentu layak bagi semua investor.</p>
                      <p className="mb-2">
                        Anda dapat menderita kerugian dalam jumlah besar dan dalam jangka waktu singkat. Jumlah kerugian uang dimungkinkan dapat melebihi jumlah uang yang pertama kali Anda setor (Margin Awal) ke Pialang Berjangka Anda. Anda mungkin menderita kerugian seluruh Margin dan Margin tambahan yang ditempatkan pada Pialang Berjangka. Untuk mempertahankan posisi Kontrak Derivatif dalam Sistem Perdagangan Alternatif Anda. Hal ini disebabkan Perdagangan Berjangka sangat dipengaruhi oleh mekanisme leverage, dimana dengan jumlah investasi dalam bentuk yang relatif kecil dapat digunakan untuk membuka posisi dengan aset yang bernilai jauh lebih tinggi. Apabila Anda tidak siap dengan risiko seperti ini, sebaiknya Anda tidak melakukan perdagangan Kontrak Derivatif dalam Sistem Perdagangan Alternatif
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk1}
                          onChange={() => handleRiskCheckboxChange('risk1')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk1') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 2 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">2. Perdagangan Kontrak Derivatif dalam Sistem Perdagangan Alternatif mempunyai risiko dan mempunyai kemungkinan kerugian yang tidak terbatas yang jauh lebih besar dari jumlah uang yang disetor (Margin) ke Pialang Berjangka</p>
                      <p className="mb-2">
                        Kontrak Derivatif dalam Sistem Perdagangan Alternatif sama dengan produk keuangan lainnya yang mempunyai risiko tinggi, Anda sebaiknya tidak menaruh risiko terhadap dana yang Anda tidak siap untuk menderita rugi, seperti tabungan pensiun, dana kesehatan atau dana untuk keadaan darurat, dana yang disediakan untuk pendidikan atau kepemilikan rumah, dana yang diperoleh dari pinjaman pendidikan atau gadai, atau dana yang digunakan untuk memenuhi kebutuhan sehari-hari
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk2}
                          onChange={() => handleRiskCheckboxChange('risk2')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk2') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 3 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">3. Berhati-hatilah terhadap pernyataan bahwa Anda pasti mendapatkan keuntungan besar dari perdagangan Kontrak Derivatif dalam Sistem Perdagangan Alternatif.</p>
                      <p className="mb-2">
                        Meskipun perdagangan Kontrak Derivatif dalam Sistem Perdagangan Alternatif dapat memberikan keuntungan yang besar dan cepat, namun hal tersebut tidak pasti, bahkan dapat menimbulkan kerugian yang besar dan cepat juga. Seperti produk keuangan lainnya, tidak ada yang dinamakan &quot;pasti untung&quot;.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk3}
                          onChange={() => handleRiskCheckboxChange('risk3')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk3') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 4 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">4. Disebabkan adanya mekanisme leverage dan sifat dari transaksi Kontrak Derivatif dalam Sistem Perdagangan Alternatif, Anda dapat merasakan dampak bahwa Anda menderita kerugian dalam waktu cepat.</p>
                      <p className="mb-2">
                        Keuntungan maupun kerugian dalam transaksi akan langsung dikredit atau didebet ke rekening Anda, paling lambat secara harian. Apabila pergerakan di pasar terhadap Kontrak Derivatif dalam Sistem Perdagangan Alternatif menurunkan nilai posisi Anda dalam Kontrak Derivatif dalam Sistem Perdagangan Alternatif, dengan kata lain berlawanan dengan posisi yang Anda ambil, Anda diwajibkan untuk menambah dana untuk pemenuhan kewajiban Margin ke perusahaan Pialang Berjangka. Apabila rekening Anda berada dibawah minimum Margin yang telah ditetapkan Lembaga Kliring Berjangka atau Pialang Berjangka, maka posisi Anda dapat dilikuidasi pada saat rugi, dan Anda wajib menyelesaikan defisit (jika ada) dalam rekening Anda.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk4}
                          onChange={() => handleRiskCheckboxChange('risk4')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk4') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 5 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">5. Pada saat pasar dalam keadaan tertentu, Anda mungkin akan sulit atau tidak mungkin melikuidasi posisi.</p>
                      <p className="mb-2">
                        Pada umumnya Anda harus melakukan transaksi mengambil posisi yang berlawanan dengan maksud melikuidasi posisi (offset) jika ingin melikuidasi posisi dalam Kontrak Derivatif dalam Sistem Perdagangan Alternatif. Apabila Anda tidak dapat melikuidasi posisi Kontrak Derivatif dalam Sistem Perdagangan Alternatif, Anda tidak dapat merealisasikan keuntungan pada nilai posisi tersebut atau mencegah kerugian yang lebih tinggi. Kemungkinan tidak dapat melikuidasi dapat terjadi, antara lain: jika perdagangan berhenti dikarenakan aktivitas perdagangan yang tidak lazim pada Kontrak Derivatif atau subjek Kontrak Derivatif, atau terjadi kerusakan sistem pada Pialang Berjangka Peserta Sistem Perdagangan Alternatif atau Pedagang Berjangka Penyelenggara Sistem Perdagangan Alternatif. Bahkan apabila Anda dapat melikuidasi posisi tersebut, Anda mungkin terpaksa melakukannya pada harga yang menimbulkan kerugian besar.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk5}
                          onChange={() => handleRiskCheckboxChange('risk5')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk5') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 6 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">6. Pada saat pasar dalam keadaan tertentu, Anda mungkin akan sulit atau tidak mungkin mengelola risiko atas posisi terbuka Kontrak Derivatif dalam Sistem Perdagangan Alternatif dengan cara membuka posisi dengan nilai yang sama namun dengan posisi yang berlawanan dalam kontrak bulan yang berbeda, dalam pasar yang berbeda atau dalam &quot;subjek Kontrak Derivatif dalam Sistem Perdagangan Alternatif&quot; yang berbeda</p>
                      <p className="mb-2">
                        Kemungkinan untuk tidak dapat mengambil posisi dalam rangka membatasi risiko yang timbul, contohnya; jika perdagangan dihentikan pada pasar yang berbeda disebabkan aktivitas perdagangan yang tidak lazim pada Kontrak Derivatif dalam Sistem Perdagangan Alternatif atau &quot;Kontrak Derivatif dalam Sistem Perdagangan Alternatif&quot;.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk6}
                          onChange={() => handleRiskCheckboxChange('risk6')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk6') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 7 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">7. Anda dapat menderita kerugian yang disebabkan kegagalan sistem informasi.</p>
                      <p className="mb-2">
                        Sebagaimana yang terjadi pada setiap transaksi keuangan, Anda dapat menderita kerugian jika amanat untuk melaksanakan transaksi Kontrak Derivatif dalam Sistem Perdagangan Alternatif tidak dapat dilakukan karena kegagalan sistem informasi di Bursa Berjangka, Pedagang Penyelenggara Sistem Perdagangan Alternatif, maupun sistem di Pialang Berjangka Peserta Sistem Perdagangan Alternatif yang mengelola posisi Anda. Kerugian Anda akan semakin besar jika Pialang Berjangka yang mengelola posisi Anda tidak memiliki sistem informasi cadangan atau prosedur yang layak.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk7}
                          onChange={() => handleRiskCheckboxChange('risk7')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk7') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 8 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">8. Semua Kontrak Derivatif dalam Sistem Perdagangan Alternatif mempunyai risiko, dan tidak ada strategi berdagang yang dapat menjamin untuk menghilangkan risiko tersebut.</p>
                      <p className="mb-2">
                        Strategi dengan menggunakan kombinasi posisi seperti spread, dapat sama berisiko seperti posisi long atau short. Melakukan Perdagangan Berjangka memerlukan pengetahuan mengenai Kontrak Derivatif dalam Sistem Perdagangan Alternatif dan pasar berjangka.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk8}
                          onChange={() => handleRiskCheckboxChange('risk8')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk8') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 9 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">9. Strategi perdagangan harian dalam Kontrak Derivatif dalam Sistem Perdagangan Alternatif dan produk lainnya memiliki risiko khusus</p>
                      <p className="mb-2">
                        Pada produk keuangan lainnya, pihak yang ingin membeli atau menjual Kontrak Derivatif dalam Sistem Perdagangan Alternatif yang sama dalam satu hari untuk mendapat keuntungan dari perubahan harga pada hari tersebut (&quot;day traders&quot;) akan memiliki beberapa risiko tertentu antara lain jumlah komisi yang besar, risiko terkena efek pengungkit (&quot;exposure to leverage&quot;), dan persaingan dengan pedagang profesional. Anda harus mengerti risiko tersebut dan memiliki pengalaman yang memadai sebelum melakukan perdagangan harian (&quot;day trading&quot;).
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk9}
                          onChange={() => handleRiskCheckboxChange('risk9')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk9') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 10 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">10. Menetapkan amanat bersyarat, Kontrak Derivatif dalam Sistem Perdagangan Alternatif dilikuidasi pada keadaan tertentu untuk membatasi rugi (stop loss), mungkin tidak akan dapat membatasi kerugian Anda sampai jumlah tertentu saja.</p>
                      <p className="mb-2">
                        Amanat bersyarat tersebut mungkin tidak dapat dilaksanakan karena terjadi kondisi pasar yang tidak memungkinkan melikuidasi Kontrak Derivatif dalam Sistem Perdagangan Alternatif.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk10}
                          onChange={() => handleRiskCheckboxChange('risk10')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk10') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 11 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">11. Anda harus membaca dengan seksama dan memahami Perjanjian Pemberian Amanat Nasabah dengan Pialang Berjangka Anda sebelum melakukan transaksi Kontrak Derivatif dalam Sistem Perdagangan Alternatif.</p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk11}
                          onChange={() => handleRiskCheckboxChange('risk11')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk11') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 12 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">12. Pernyataan singkat ini tidak dapat memuat secara rinci seluruh risiko atau aspek penting lainnya tentang Perdagangan Berjangka. Oleh karena itu Anda harus mempelajari kegiatan Perdagangan Berjangka secara cermat sebelum memutuskan melakukan transaksi.</p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk12}
                          onChange={() => handleRiskCheckboxChange('risk12')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk12') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Risk Item 13 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">13. Dokumen Pemberitahuan Adanya Risiko (Risk Disclosure) ini dibuat dalam Bahasa Indonesia.</p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={riskDisclosureChecks.risk13}
                          onChange={() => handleRiskCheckboxChange('risk13')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isRiskCheckboxEnabled('risk13') || !isCheckboxEnabled('risk_disclosure_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>
                  </div>

                  {/* Main Checkbox - Disabled until all risks are checked */}
                  <div className="mt-6 pt-4 border-t border-[#1D0D80]/30">
                    <label className={`flex items-center ${allRiskDisclosuresChecked ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'}`}>
                      <input
                        type="checkbox"
                        checked={formData.risk_disclosure_accepted}
                        onChange={() => handleCheckboxChange('risk_disclosure_accepted')}
                        disabled={!allRiskDisclosuresChecked || !isCheckboxEnabled('risk_disclosure_accepted')}
                        className="mr-3 w-4 h-4 accent-[#FCA311] disabled:opacity-50 disabled:cursor-not-allowed"
                      />
                      <span className="text-white text-sm font-semibold">
                        Saya telah menerima &quot;DOKUMEN PEMBERITAHUAN ADANYA RISIKO&quot;, mengerti dan menyetujui isinya
                        {!allRiskDisclosuresChecked && <span className="text-red-400 block mt-1 text-xs">(Harap centang semua pernyataan di atas terlebih dahulu)</span>}
                      </span>
                    </label>
                  </div>
                </div>

                {/* Client Agreement with Detailed Checklist */}
                <div className="bg-[#2a2a2a]/50 border border-[#1D0D80]/30 rounded-lg p-4 mb-3">
                  <h3 className="text-white font-semibold mb-3 text-sm uppercase">PERJANJIAN PEMBERIAN AMANAT</h3>
                  
                  <div className="space-y-4 text-sm text-white">
                    <p>
                      Dalam Hal ini bertindak untuk dan atas nama PT. Century Investment Futures, yang selanjutnya di sebut Pialang Berjangka
                    </p>
                    
                    <p>
                      Dalam hal ini bertindak untuk dan atas nama PT. Century Investment Futures yang selanjutnya disebut Pialang Berjangka, Nasabah dan Pialang Berjangka secara bersama – sama selanjutnya disebut Para Pihak. Para Pihak sepakat untuk mengadakan Perjanjian Pemberian Amanat untuk melakukan transaksi penjualan maupun pembelian Kontrak Berjangka dengan ketentuan sebagai berikut:
                    </p>

                    {/* Agreement Item 1 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">1. Margin dan Pembayaran Lainnya</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Nasabah menempatkan sejumlah dana (Margin) ke Rekening Terpisah (Segregated Account) Pialang Berjangka sebagai Margin Awal dan wajib mempertahankannya sebagaimana ditetapkan.</li>
                        <li>Membayar biaya-biaya yang diperlukan untuk transaksi, yaitu biaya transaksi, pajak, komisi, dan biaya pelayanan, biaya bunga sesuai tingkat yang berlaku, dan biaya lainnya yang dapat dipertanggungjawabkan berkaitan dengan transaksi sesuai amanat Nasabah, maupun biaya rekening Nasabah.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement1}
                          onChange={() => handleClientAgreementCheckboxChange('agreement1')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 2 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">2. Pelaksanaan Transaksi</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Setiap transaksi Nasabah dilaksanakan secara elektronik on-line oleh Nasabah yang bersangkutan.</li>
                        <li>Setiap amanat Nasabah yang diterima dapat langsung dilaksanakan sepanjang nilai Margin yang tersedia pada rekeningnya mencukupi dan eksekusinya dapat menimbulkan perbedaan waktu terhadap proses pelaksanaan transaksi tersebut. Nasabah harus mengetahui posisi Margin dan posisi terbuka sebelum memberikan amanat untuk transaksi berikutnya.</li>
                        <li>Setiap transaksi Nasabah secara bilateral dilawankan dengan Penyelenggara Sistem Perdagangan Alternatif PT. Adhikarya Cipta Persada yang bekerjasama dengan Pialang Berjangka.</li>
                        <li>Nasabah bertanggung jawab atas keamanan dan penggunaan username dan password dalam transaksi Perdagangan Berjangka, oleh karenanya Nasabah dilarang memberitahukan, menyerahkan atau meminjamkan username dan password kepada pihak lain, termasuk kepada pegawai Pialang Berjangka.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement2}
                          onChange={() => handleClientAgreementCheckboxChange('agreement2')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement2') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 3 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">3. Kewajiban Memelihara Margin</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Nasabah wajib memelihara/memenuhi tingkat Margin yang harus tersedia di rekening pada Pialang Berjangka sesuai dengan jumlah yang telah ditetapkan baik diminta ataupun tidak oleh Pialang Berjangka.</li>
                        <li>Apabila jumlah Margin memerlukan penambahan maka Pialang Berjangka wajib memberitahukan dan memintakan kepada Nasabah untuk menambah Margin segera.</li>
                        <li>Apabila jumlah Margin memerlukan tambahan (Call Margin) maka Nasabah wajib melakukan penyerahan Call Margin selambat-lambatnya sebelum dimulai hari perdagangan berikutnya. Kewajiban Nasabah sehubungan dengan penyerahan Call Margin tidak terbatas pada jumlah Margin awal.</li>
                        <li>Pialang Berjangka tidak berkewajiban melaksanakan amanat untuk melakukan transaksi yang baru dari Nasabah sebelum Call Margin dipenuhi.</li>
                        <li>Untuk memenuhi kewajiban Call Margin dan keuangan lainnya dari Nasabah, Pialang Berjangka dapat mencairkan dana Nasabah yang ada di Pialang Berjangka.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement3}
                          onChange={() => handleClientAgreementCheckboxChange('agreement3')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement3') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 4 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">4. Hak Pialang Berjangka Melikuidasi Posisi Nasabah</p>
                      <p className="mb-2">
                        Nasabah bertanggung jawab memantau/mengetahui posisi terbukanya secara terus-menerus dan memenuhi kewajibannya. Apabila dalam jangka waktu tertentu dana pada rekening Nasabah kurang dari yang dipersyaratkan, Pialang Berjangka dapat menutup posisi terbuka Nasabah secara keseluruhan atau sebagian, membatasi transaksi, atau tindakan lain untuk melindungi diri dalam pemenuhan Margin tersebut dengan terlebih dahulu memberitahu atau tanpa memberitahu Nasabah dan Pialang Berjangka tidak bertanggung jawab atas kerugian yang timbul akibat tindakan tersebut.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement4}
                          onChange={() => handleClientAgreementCheckboxChange('agreement4')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement4') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 5 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">5. Penggantian Kerugian Tidak Adanya Penutupan Posisi</p>
                      <p className="mb-2">
                        Apabila Nasabah tidak mampu melakukan penutupan atas transaksi yang jatuh tempo, Pialang Berjangka dapat melakukan penutupan atas transaksi Nasabah yang terjadi. Nasabah wajib membayar biaya-biaya, termasuk biaya kerugian dan premi yang telah dibayarkan oleh Pialang Berjangka, dan apabila Nasabah lalai untuk membayar biaya-biaya tersebut, Pialang Berjangka berhak untuk mengambil pembayaran dari dana Nasabah.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement5}
                          onChange={() => handleClientAgreementCheckboxChange('agreement5')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement5') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 6 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">6. Pialang Berjangka Dapat Membatasi Posisi</p>
                      <p className="mb-2">
                        Nasabah mengakui hak Pialang Berjangka untuk membatasi posisi terbuka Kontrak dan Nasabah tidak melakukan transaksi melebihi batas yang telah ditetapkan tersebut.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement6}
                          onChange={() => handleClientAgreementCheckboxChange('agreement6')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement6') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 7 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">7. Tidak Ada Jaminan atas Informasi atau Rekomendasi</p>
                      <p className="mb-2">Nasabah mengakui bahwa:</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Informasi dan rekomendasi yang diberikan oleh Pialang Berjangka kepada Nasabah tidak selalu lengkap dan perlu diverifikasi.</li>
                        <li>Pialang Berjangka tidak menjamin bahwa informasi dan rekomendasi yang diberikan merupakan informasi yang akurat dan lengkap.</li>
                        <li>Informasi dan rekomendasi yang diberikan oleh Wakil Pialang Berjangka yang satu dengan yang lain mungkin berbeda karena perbedaan analisis fundamental atau teknikal. Nasabah menyadari bahwa ada kemungkinan Pialang Berjangka dan pihak terafiliasinya memiliki posisi di pasar dan memberikan rekomendasi tidak konsisten kepada Nasabah.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement7}
                          onChange={() => handleClientAgreementCheckboxChange('agreement7')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement7') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 8 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">8. Pembatasan Tanggung Jawab Pialang Berjangka</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Pialang Berjangka tidak bertanggung jawab untuk memberikan penilaian kepada Nasabah mengenai iklim, pasar, keadaan politik dan ekonomi nasional dan internasional, nilai Kontrak Derivatif, kolateral, atau memberikan nasihat mengenai keadaan pasar. Pialang Berjangka hanya memberikan pelayanan untuk melakukan transaksi secara jujur serta memberikan laporan atas transaksi tersebut.</li>
                        <li>Perdagangan sewaktu-waktu dapat dihentikan oleh pihak yang memiliki otoritas (Bappebti/Bursa Berjangka) tanpa pemberitahuan terlebih dahulu kepada Nasabah. Atas posisi terbuka yang masih dimiliki oleh Nasabah pada saat perdagangan tersebut dihentikan, maka akan diselesaikan (likuidasi) berdasarkan pada peraturan/ketentuan yang dikeluarkan dan ditetapkan oleh pihak otoritas tersebut, dan semua kerugian serta biaya yang timbul sebagai akibat dihentikannya transaksi oleh pihak otoritas perdagangan tersebut, menjadi beban dan tanggung jawab Nasabah sepenuhnya.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement8}
                          onChange={() => handleClientAgreementCheckboxChange('agreement8')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement8') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 9 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">9. Transaksi Harus Mematuhi Peraturan Yang Berlaku</p>
                      <p className="mb-2">
                        Semua transaksi dilakukan sendiri oleh Nasabah dan wajib mematuhi peraturan perundang-undangan di bidang Perdagangan Berjangka, kebiasaan dan interpretasi resmi yang ditetapkan oleh Bappebti atau Bursa Berjangka.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement9}
                          onChange={() => handleClientAgreementCheckboxChange('agreement9')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement9') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 10 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">10. Pialang Berjangka tidak Bertanggung jawab atas Kegagalan Komunikasi</p>
                      <p className="mb-2">
                        Pialang Berjangka tidak bertanggung jawab atas keterlambatan atau tidak tepat waktunya pengiriman amanat atau informasi lainnya yang disebabkan oleh kerusakan fasilitas komunikasi atau sebab lain diluar kontrol Pialang Berjangka.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement10}
                          onChange={() => handleClientAgreementCheckboxChange('agreement10')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement10') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 11 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">11. Konfirmasi</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Konfirmasi dari Nasabah dapat berupa surat, telex, media lain, surat elektronik, secara tertulis ataupun rekaman suara.</li>
                        <li>Pialang Berjangka berkewajiban menyampaikan konfirmasi transaksi, laporan rekening, permintaan Call Margin, dan pemberitahuan lainnya kepada Nasabah secara akurat, benar dan secepatnya pada alamat (email) Nasabah sesuai dengan yang tertera dalam rekening Nasabah. Apabila dalam jangka waktu 2 x 24 jam setelah amanat jual atau beli disampaikan, tetapi Nasabah belum menerima konfirmasi melalui alamat email Nasabah dan/atau sistem transaksi, Nasabah segera memberitahukan hal tersebut kepada Pialang Berjangka melalui telepon dan disusul dengan pemberitahuan tertulis.</li>
                        <li>Jika dalam waktu 2 x 24 jam sejak tanggal penerimaan konfirmasi tersebut tidak ada sanggahan dari Nasabah maka konfirmasi Pialang Berjangka dianggap benar dan sah.</li>
                        <li>Kekeliruan atas konfirmasi yang diterbitkan Pialang Berjangka akan diperbaiki oleh Pialang Berjangka sesuai keadaan yang sebenarnya dan demi hukum konfirmasi yang lama batal.</li>
                        <li>Nasabah tidak bertanggung jawab atas transaksi yang dilaksanakan atas rekeningnya apabila konfirmasi tersebut tidak disampaikan secara benar dan akurat.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement11}
                          onChange={() => handleClientAgreementCheckboxChange('agreement11')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement11') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 12 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">12. Kebenaran Informasi Nasabah</p>
                      <p className="mb-2">
                        Nasabah memberikan informasi yang benar dan akurat mengenai data Nasabah yang diminta oleh Pialang Berjangka dan akan memberitahukan paling lambat dalam waktu 3 (tiga) hari kerja setelah terjadi perubahan, termasuk perubahan kemampuan keuangannya untuk terus melaksanakan transaksi.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement12}
                          onChange={() => handleClientAgreementCheckboxChange('agreement12')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement12') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 13 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">13. Komisi Transaksi</p>
                      <p className="mb-2">
                        Nasabah mengetahui dan menyetujui bahwa Pialang Berjangka berhak untuk memungut komisi atas transaksi yang telah dilaksanakan, dalam jumlah sebagaimana akan ditetapkan dari waktu ke waktu oleh Pialang Berjangka. Perubahan beban (fees) dan biaya lainnya harus disetujui secara tertulis oleh Para Pihak.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement13}
                          onChange={() => handleClientAgreementCheckboxChange('agreement13')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement13') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 14 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">14. Pemberian Kuasa</p>
                      <p className="mb-2">
                        Nasabah memberikan kuasa kepada Pialang Berjangka untuk menghubungi bank, lembaga keuangan, Pialang Berjangka lain, atau institusi lain yang terkait untuk memperoleh keterangan atau verifikasi mengenai informasi yang diterima dari Nasabah. Nasabah mengerti bahwa penelitian mengenai data hutang pribadi dan bisnis dapat dilakukan oleh Pialang Berjangka apabila diperlukan. Nasabah diberikan kesempatan untuk memberitahukan secara tertulis dalam jangka waktu yang telah disepakati untuk melengkapi persyaratan yang diperlukan.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement14}
                          onChange={() => handleClientAgreementCheckboxChange('agreement14')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement14') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 15 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">15. Pemindahan Dana</p>
                      <p className="mb-2">
                        Pialang Berjangka dapat setiap saat mengalihkan dana dari satu rekening ke rekening lainnya berkaitan dengan kegiatan transaksi yang dilakukan Nasabah seperti pembayaran komisi, pembayaran biaya transaksi, kliring dan keterlambatan dalam memenuhi kewajibannya, tanpa terlebih dahulu memberitahukan kepada Nasabah. Transfer yang telah dilakukan akan segera diberitahukan secara tertulis kepada Nasabah.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement15}
                          onChange={() => handleClientAgreementCheckboxChange('agreement15')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement15') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 16 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">16. Pemberitahuan</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Semua komunikasi, uang, surat berharga, dan kekayaan lainnya harus dikirimkan langsung ke alamat Nasabah seperti tertera dalam rekeningnya atau alamat lain yang ditetapkan/diberitahukan secara tertulis oleh Nasabah.</li>
                        <li>Semua uang, harus disetor atau ditransfer langsung oleh Nasabah ke Rekening Terpisah (Segregated Account) Pialang Berjangka.</li>
                        <li>Semua surat berharga, kekayaan lainnya, atau komunikasi harus dikirim kepada Pialang Berjangka.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement16}
                          onChange={() => handleClientAgreementCheckboxChange('agreement16')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement16') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 17 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">17. Dokumen Pemberitahuan Adanya Risiko</p>
                      <p className="mb-2">
                        Nasabah mengakui menerima dan mengerti Dokumen Pemberitahuan Adanya Risiko.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement17}
                          onChange={() => handleClientAgreementCheckboxChange('agreement17')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement17') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 18 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">18. Pemberitahuan</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Perjanjian ini mulai berlaku terhitung sejak tanggal dilakukannya konfirmasi oleh Pialang Berjangka dengan diterimanya Bukti Konfirmasi Penerimaan Nasabah dari Pialang Berjangka oleh Nasabah.</li>
                        <li>Nasabah dapat mengakhiri Perjanjian ini hanya jika Nasabah sudah tidak lagi memiliki posisi terbuka dan tidak ada kewajiban Nasabah yang diemban oleh atau terhutang kepada Pialang Berjangka.</li>
                        <li>Pengakhiran tidak dibebaskan salah satu pihak dari tanggung jawab atau kewajiban yang terjadi sebelum pemberitahuan tersebut.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement18}
                          onChange={() => handleClientAgreementCheckboxChange('agreement18')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement18') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 19 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">19. Berakhirnya Perjanjian</p>
                      <p className="mb-2">Perjanjian dapat berakhir dalam hal Nasabah:</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Dinyatakan pailit, memiliki hutang yang sangat besar, dalam proses peradilan, menjadi hilang ingatan, mengundurkan diri atau meninggal.</li>
                        <li>Tidak dapat memenuhi atau mematuhi perjanjian ini dan/atau melakukan pelanggaran terhadapnya.</li>
                        <li>Berkaitan dengan butir (1) dan (2) tersebut diatas, Pialang Berjangka dapat: a) Meneruskan atau menutup posisi Nasabah tersebut setelah mempertimbangkannya secara cermat dan jujur; b) Menolak transaksi dari Nasabah.</li>
                        <li>Pengakhiran Perjanjian sebagaimana dimaksud dengan angka (1) dan (2) tersebut di atas tidak melepaskan kewajiban dari Para Pihak yang berhubungan dengan penerimaan atau kewajiban pembayaran atau pertanggungjawaban kewajiban lainnya yang timbul dari Perjanjian.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement19}
                          onChange={() => handleClientAgreementCheckboxChange('agreement19')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement19') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 20 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">20. Force Majeur</p>
                      <p className="mb-2">
                        Tidak ada satupun pihak di dalam Perjanjian dapat diminta pertanggungjawabannya untuk suatu keterlambatan atau terhalangnya memenuhi kewajiban berdasarkan Perjanjian yang diakibatkan oleh suatu sebab yang berada di luar kemampuannya atau kekuasaannya (force majeur), sepanjang pemberitahuan tertulis mengenai sebab itu disampaikannya kepada pihak lain dalam Perjanjian dalam waktu tidak lebih dari 24 (dua puluh empat) jam sejak timbulnya sebab itu. Yang dimaksud dengan Force Majeur dalam Perjanjian adalah peristiwa kebakaran, bencana alam (seperti gempa bumi, banjir, angin topan, petir), pemogokan umum, huru hara, peperangan, perubahan terhadap peraturan perundang-undangan yang berlaku dan kondisi di bidang ekonomi, keuangan dan Perdagangan Berjangka, pembatasan yang dilakukan oleh otoritas Perdagangan Berjangka dan Bursa Berjangka serta terganggunya sistem perdagangan, kliring dan penyelesaian transaksi Kontrak Berjangka di mana transaksi dilaksanakan yang secara langsung mempengaruhi pelaksanaan pekerjaan berdasarkan Perjanjian.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement20}
                          onChange={() => handleClientAgreementCheckboxChange('agreement20')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement20') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 21 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">21. Perubahan atas Isian dalam Perjanjian Pemberian Amanat</p>
                      <p className="mb-2">
                        Perubahan atas isian dalam Perjanjian ini hanya dapat dilakukan atas persetujuan Para Pihak, atau Pialang Berjangka telah memberitahukan secara tertulis perubahan yang diinginkan, dan Nasabah tetap memberikan perintah untuk transaksi dengan tanpa memberikan tanggapan secara tertulis atas usul perubahan tersebut. Tindakan Nasabah tersebut dianggap setuju atas usul perubahan tersebut.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement21}
                          onChange={() => handleClientAgreementCheckboxChange('agreement21')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement21') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 22 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">22. Penyelesaian Perselisihan</p>
                      <ol className="list-decimal ml-5 space-y-1 mb-2">
                        <li>Semua perselisihan dan perbedaan pendapat yang timbul dalam pelaksanaan Perjanjian ini wajib diselesaikan terlebih dahulu secara musyawarah untuk mencapai mufakat antara Para Pihak.</li>
                        <li>Apabila perselisihan dan perbedaan pendapat yang timbul tidak dapat diselesaikan secara musyawarah untuk mencapai mufakat, Para Pihak wajib memanfaatkan sarana penyelesaian perselisihan yang tersedia di Bursa Berjangka.</li>
                        <li>Apabila perselisihan dan perbedaan pendapat yang timbul tidak dapat diselesaikan melalui cara sebagaimana dimaksud pada angka (1) dan angka (2), maka Para Pihak sepakat untuk menyelesaikan perselisihan melalui BAKTI (Rekomendasi).</li>
                        <li>Kantor atau kantor cabang Pialang Berjangka terdekat dengan domisili Nasabah tempat penyelesaian dalam hal terjadi perselisihan.</li>
                      </ol>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement22}
                          onChange={() => handleClientAgreementCheckboxChange('agreement22')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement22') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>

                    {/* Agreement Item 23 */}
                    <div className="border-t border-[#1D0D80]/20 pt-3">
                      <p className="mb-2 font-semibold">23. Bahasa</p>
                      <p className="mb-2">
                        Perjanjian ini dibuat dalam Bahasa Indonesia.
                      </p>
                      <p className="mb-2">
                        Demikian Perjanjian Pemberian Amanat ini dibuat oleh Para Pihak dalam keadaan sadar, sehat jasmani rohani dan tanpa unsur paksaan dari pihak manapun.
                      </p>
                      <label className="flex items-start cursor-pointer">
                        <input
                          type="checkbox"
                          checked={clientAgreementChecks.agreement23}
                          onChange={() => handleClientAgreementCheckboxChange('agreement23')}
                          className="mr-3 w-4 h-4 accent-[#FCA311]"
                          disabled={!isAgreementCheckboxEnabled('agreement23') || !isCheckboxEnabled('client_agreement_accepted')}
                        />
                        <span className="text-white text-xs">Saya sudah membaca dan memahami</span>
                      </label>
                    </div>
                  </div>

                  {/* Main Checkbox - Disabled until all agreements are checked */}
                  <div className="mt-6 pt-4 border-t border-[#1D0D80]/30">
                    <label className={`flex items-start ${allClientAgreementsChecked ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'}`}>
                      <input
                        type="checkbox"
                        checked={formData.client_agreement_accepted}
                        onChange={() => handleCheckboxChange('client_agreement_accepted')}
                        disabled={!allClientAgreementsChecked || !isCheckboxEnabled('client_agreement_accepted')}
                        className="mt-1 mr-3 w-4 h-4 accent-[#FCA311] disabled:opacity-50 disabled:cursor-not-allowed"
                      />
                      <span className="text-white text-sm font-semibold">
                        Saya telah menerima Perjanjian Pemberian Amanat Transaksi Kontrak Derivatif, mengerti dan menyetujui isinya
                        {!allClientAgreementsChecked && <span className="text-red-400 block mt-1 text-xs">(Harap centang semua pernyataan di atas terlebih dahulu)</span>}
                      </span>
                    </label>
                  </div>
                </div>

                {/* Trading Rules with PDF Link */}
                <div className="bg-[#2a2a2a]/50 border border-[#1D0D80]/30 rounded-lg p-4 mb-3">
                  <h3 className="text-white font-semibold mb-3 text-sm uppercase">PERATURAN PERDAGANGAN (TRADING RULES)</h3>
                  
                  <div className="mb-4">
                    <a 
                      href="/about/#regulatory-documents" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="inline-flex items-center gap-2 px-4 py-2 bg-[#FCA311] hover:bg-[#b89d5a] text-white font-semibold rounded-lg transition-all"
                    >
                      <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        className="h-5 w-5" 
                        fill="none" 
                        viewBox="0 0 24 24" 
                        stroke="currentColor"
                      >
                        <path 
                          strokeLinecap="round" 
                          strokeLinejoin="round" 
                          strokeWidth={2} 
                          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" 
                        />
                      </svg>
                      Lihat Dokumen Peraturan Perdagangan
                    </a>
                  </div>

                  <label className="flex items-start cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.trading_rules_accepted}
                      onChange={() => handleCheckboxChange('trading_rules_accepted')}
                      className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                      disabled={!isCheckboxEnabled('trading_rules_accepted')}
                    />
                    <span className="text-white text-sm">
                      Saya menyatakan bahwa saya telah membaca tentang PERATURAN PERDAGANGAN (TRADING RULES), mengerti dan menerima ketentuan dalam bertransaksi.
                    </span>
                  </label>
                </div>

                <label className="flex items-start cursor-pointer">
                  <input
                    type="checkbox"
                    checked={formData.access_code_responsibility_accepted}
                    onChange={() => handleCheckboxChange('access_code_responsibility_accepted')}
                    className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                    disabled={!isCheckboxEnabled('access_code_responsibility_accepted')}
                  />
                  <span className="text-white text-sm">
                    Saya menyatakan bahwa saya bertanggungjawab sepenuhnya terhadap kode akses transaksi Nasabah (Personal Access Password) ke pihak lain, terutama kepada pegawai Pialang Berjangka atau pihak yang memiliki kepentingan dengan Pialang Berjangka.
                  </span>
                </label>

                <label className="flex items-start cursor-pointer">
                  <input
                    type="checkbox"
                    checked={formData.funds_ownership_accepted}
                    onChange={() => handleCheckboxChange('funds_ownership_accepted')}
                    className="mt-1 mr-3 w-4 h-4 accent-[#FCA311]"
                    disabled={!isCheckboxEnabled('funds_ownership_accepted')}
                  />
                  <span className="text-white text-sm">
                    Saya menyatakan bahwa dana yang saya pergunakan untuk bertransaksi adalah milik sendiri dan bukan dana pihak lain, serta bukan hasil penipuan, penggelapan, hasil pencucian uang maupun tindak pidana korupsi dan perbuatan melawan hukum lainnya serta tidak dimaksudkan untuk melakukan pencucian uang.
                  </span>
                </label>
              </div>
            </div>

            {/* Section C: Klausul Spesifik */}
            <div className="pb-6">
              <h2 className="text-xl font-semibold text-white mb-4">C. Klausul Spesifik & Pilihan Hukum</h2>
              
              {/* CDD Requirement */}
              <label className="flex items-start cursor-pointer mb-4">
                <input
                  type="checkbox"
                  checked={formData.cdd_requirement_accepted}
                  onChange={() => handleCheckboxChange('cdd_requirement_accepted')}
                  className="mr-3 w-4 h-4 accent-[#FCA311]"
                  disabled={!isCheckboxEnabled('cdd_requirement_accepted')}
                />
                <span className="text-white text-sm">
                  Saya setuju untuk dikonfirmasi kembali oleh WPB dan bersedia memenuhi persyaratan CDD Reguler saat equity mencapai Rp.25.000.000,-
                </span>
              </label>

              {/* Dispute Resolution Choice */}
              <div className="mb-4">
                <label className="text-white text-sm md:text-base mb-2 block">
                  Pilihan penyelesaian perselisihan:
                </label>
                <div className="flex gap-6">
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="dispute_resolution_choice"
                      checked={formData.dispute_resolution_choice === 'BAKTI'}
                      onChange={() => handleRadioChange('dispute_resolution_choice', 'BAKTI')}
                      className="mr-2 w-4 h-4 accent-[#FCA311]"
                    />
                    <span className="text-white text-sm">BAKTI (Rekomendasi)</span>
                  </label>
                  <label className="flex items-center cursor-pointer">
                    <input
                      type="radio"
                      name="dispute_resolution_choice"
                      checked={formData.dispute_resolution_choice === 'PENGADILAN NEGERI'}
                      onChange={() => handleRadioChange('dispute_resolution_choice', 'PENGADILAN NEGERI')}
                      className="mr-2 w-4 h-4 accent-[#FCA311]"
                    />
                    <span className="text-white text-sm">Pengadilan Negeri Jakarta Pusat</span>
                  </label>
                </div>
              </div>

              {/* Language Declaration */}
              <label className="flex items-start cursor-pointer">
                <input
                  type="checkbox"
                  checked={formData.language_declaration_accepted}
                  onChange={() => handleCheckboxChange('language_declaration_accepted')}
                  className="mr-3 w-4 h-4 accent-[#FCA311]"
                  disabled={!isCheckboxEnabled('language_declaration_accepted')}
                />
                <span className="text-white text-sm">
                  Saya menyetujui bahwa dokumen ini dibuat dalam Bahasa Indonesia
                </span>
              </label>
            </div>

          </div>

          {/* Declaration Statement */}
          <div className="mt-8 mb-5 p-6 bg-[#2a2a2a] border border-[#FCA311] rounded-lg">
            <p className="text-white text-center text-sm md:text-base leading-relaxed">
              Demikian Pernyataan ini dibuat dengan sebenarnya dalam keadaan sadar, sehat jasmani dan rohani serta tanpa paksaan apapun dari pihak manapun.
            </p>
          </div>

          {/* Error Message */}
          {error && (
            <div className="mb-6 p-3 bg-red-500/10 border border-red-500/50 text-red-400 rounded-lg text-sm">
              {error}
            </div>
          )}

          {/* Action Buttons */}
          <div className="mt-8 flex flex-col md:flex-row gap-4 justify-center items-center">
            {/* Back Button */}
            {onBack && (
              <button
                onClick={onBack}
                className="w-full md:w-auto px-15 py-3 bg-linear-to-t from-[#212020] to-[#626060] border-y border-[#CCAE66] hover:bg-[#b89d5a] text-[#CCAE66] font-semibold rounded-full transition-all"
              >
                Kembali
              </button>
            )}
            
            {/* Submit Button */}
            <button
              onClick={handleSubmit}
              disabled={loading || !!metaBlockError}
              className="w-full md:w-auto px-15 py-3 bg-linear-to-r from-[#F45531] to-[#FF8F5B] border-y border-[#FFD976] text-white hover:bg-[#FDD168] font-semibold rounded-full transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {loading ? 'Mengirim...' : 'Submit Final'}
            </button>
            
          </div>
        </div>
      </div>
    </div>
  );
}