'use client'

import { useState } from 'react'
import { useI18n } from '@/lib/i18n'
import UnlockModal from './UnlockModal'

export default function InfoBox() {
  const { t } = useI18n()
  const [showUnlockModal, setShowUnlockModal] = useState(false)
  
  // Process the text to make "referral link" clickable
  const processTaxesLegalText = () => {
    const text = t('infoBox.taxesLegalText')
    
    // Replace "referral link" or "Referral-Link" with a clickable link
    // Preserve the original case of the matched text
    const processed = text.replace(
      /(referral link|Referral-Link)/gi,
      (match) => `<a href="#" class="referral-link-clickable" style="cursor:pointer;text-decoration:underline;color:inherit;">${match}</a>`
    )
    
    return processed
  }
  
  return (
    <>
      <div className="info-box">
        <div>
          <h3>{t('infoBox.whyCheap')}</h3>
          <p>{t('infoBox.whyCheapText')}</p>
        </div>
        <div>
          <h3>{t('infoBox.taxesLegal')}</h3>
          <p
            dangerouslySetInnerHTML={{ __html: processTaxesLegalText() }}
            onClick={(e) => {
              const target = e.target as HTMLElement
              if (target.classList.contains('referral-link-clickable')) {
                e.preventDefault()
                setShowUnlockModal(true)
              }
            }}
          />
        </div>
        <div>
          <h3>{t('infoBox.dropModel')}</h3>
          <p>{t('infoBox.dropModelText')}</p>
        </div>
      </div>
      <UnlockModal isOpen={showUnlockModal} onClose={() => setShowUnlockModal(false)} />
    </>
  )
}