'use client'

import { useState } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { useLanguage } from '@/lib/LanguageContext'
import { getTranslation } from '@/lib/i18n'
import { submitForm } from '@/lib/formSubmit'

const AGENT_NAME = 'Kevin'

interface FormData {
  firstName: string
  lastName: string
  email: string
  phone: string
  homeCountry: string
  preferredContact: 'phone' | 'email'
  propertyType: string[]
  priceMin: string
  priceMax: string
  areas: string[]
  possessionWhen: string
  bedrooms: string
  bathrooms: string
  parking: string
  petFriendly: string
  reducedMobility: string
  amenities: string[]
  otherFeatures: string
  workingWithAgent: string
  needFinancing: string
  howPay: string
  verificationOfFunds: string
  downPayment: string
  howLongLooking: string
  readyToPurchase: string
  firstPurchaseMexico: string
  ownPropertyMexico: string
  sellPropertyFirst: string
  propertyUse: string
  nextVisit: string
  whoElseInvolved: string
  theirRelationship: string
  presentAtViewings: string
  anythingElse: string
  howDidYouHear: string
}

const initialData: FormData = {
  firstName: '',
  lastName: '',
  email: '',
  phone: '',
  homeCountry: '',
  preferredContact: 'email',
  propertyType: [],
  priceMin: '',
  priceMax: '',
  areas: [],
  possessionWhen: '',
  bedrooms: '',
  bathrooms: '',
  parking: '',
  petFriendly: '',
  reducedMobility: '',
  amenities: [],
  otherFeatures: '',
  workingWithAgent: '',
  needFinancing: '',
  howPay: '',
  verificationOfFunds: '',
  downPayment: '',
  howLongLooking: '',
  readyToPurchase: '',
  firstPurchaseMexico: '',
  ownPropertyMexico: '',
  sellPropertyFirst: '',
  propertyUse: '',
  nextVisit: '',
  whoElseInvolved: '',
  theirRelationship: '',
  presentAtViewings: '',
  anythingElse: '',
  howDidYouHear: '',
}

function formatMessage(data: FormData, lang: string): string {
  const lines: string[] = []
  const add = (label: string, val: string | string[]) => {
    if (Array.isArray(val) && val.length) lines.push(`${label}: ${val.join(', ')}`)
    else if (typeof val === 'string' && val.trim()) lines.push(`${label}: ${val.trim()}`)
  }
  lines.push('=== REQUEST FORM LEAD ===')
  lines.push(`Language: ${lang}`)
  lines.push('')
  lines.push('--- Step 1: Contact ---')
  add('Name', `${data.firstName} ${data.lastName}`.trim())
  add('Email', data.email)
  add('Phone', data.phone)
  add('Home Country', data.homeCountry)
  add('Preferred Contact', data.preferredContact)
  lines.push('')
  lines.push('--- Step 2: Property Basics ---')
  add('Property Type', data.propertyType)
  add('Price Range', data.priceMin && data.priceMax ? `$${data.priceMin} - $${data.priceMax} USD` : data.priceMin || data.priceMax)
  add('Areas', data.areas)
  add('Possession', data.possessionWhen)
  lines.push('')
  lines.push('--- Step 3: Features ---')
  add('Bedrooms', data.bedrooms)
  add('Bathrooms', data.bathrooms)
  add('Parking', data.parking)
  add('Pet Friendly', data.petFriendly)
  add('Reduced Mobility', data.reducedMobility)
  add('Amenities', data.amenities)
  add('Other Features', data.otherFeatures)
  lines.push('')
  lines.push('--- Step 4: Buying Journey ---')
  add('Working with Agent', data.workingWithAgent)
  add('Need Financing', data.needFinancing)
  add('How Pay', data.howPay)
  add('Verification of Funds', data.verificationOfFunds)
  add('Down Payment', data.downPayment)
  add('How Long Looking', data.howLongLooking)
  add('Ready to Purchase', data.readyToPurchase)
  add('First Purchase Mexico', data.firstPurchaseMexico)
  add('Own Property Mexico', data.ownPropertyMexico)
  add('Sell Property First', data.sellPropertyFirst)
  lines.push('')
  lines.push('--- Step 5: Final ---')
  add('Property Use', data.propertyUse)
  add('Next Visit', data.nextVisit)
  add('Who Else Involved', data.whoElseInvolved)
  add('Their Relationship', data.theirRelationship)
  add('Present at Viewings', data.presentAtViewings)
  add('Anything Else', data.anythingElse)
  add('How Did You Hear', data.howDidYouHear)
  return lines.join('\n')
}

export default function RequestForm() {
  const { language } = useLanguage()
  const [step, setStep] = useState(1)
  const [data, setData] = useState<FormData>(initialData)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [submitted, setSubmitted] = useState(false)

  const t = (key: string) => getTranslation(language, `request.${key}`)

  const update = (k: keyof FormData, v: string | string[]) => {
    setData((d) => ({ ...d, [k]: v }))
    setError(null)
  }

  const toggleArray = (k: 'areas' | 'amenities' | 'propertyType', v: string) => {
    setData((d) => {
      const arr = (d[k] as string[]).includes(v) ? (d[k] as string[]).filter((x) => x !== v) : [...(d[k] as string[]), v]
      return { ...d, [k]: arr }
    })
  }

  const step1Valid = data.firstName.trim() && data.lastName.trim() && data.email.trim()
  const step2Valid = data.propertyType.length > 0
  const step3Valid = data.bedrooms && data.bathrooms && data.parking && data.petFriendly && data.reducedMobility
  const step4Valid =
    data.workingWithAgent &&
    data.needFinancing &&
    data.howPay &&
    data.verificationOfFunds &&
    data.readyToPurchase &&
    data.firstPurchaseMexico &&
    data.ownPropertyMexico &&
    data.sellPropertyFirst
  const step5Valid = data.propertyUse

  const canNext =
    (step === 1 && step1Valid) ||
    (step === 2 && step2Valid) ||
    (step === 3 && step3Valid) ||
    (step === 4 && step4Valid)

  const handleNext = () => {
    if (step < 5 && canNext) setStep((s) => s + 1)
  }

  const handleBack = () => {
    if (step > 1) setStep((s) => s - 1)
  }

  const handleSubmit = async () => {
    if (!step5Valid) return
    setIsSubmitting(true)
    setError(null)
    try {
      const result = await submitForm({
        type: 'request',
        name: `${data.firstName} ${data.lastName}`.trim(),
        email: data.email,
        phone: data.phone || undefined,
        message: formatMessage(data, language),
        language,
      })
      if (result.ok) setSubmitted(true)
      else setError(result.error || 'Error')
    } catch (e: any) {
      setError(e.message || 'Error')
    } finally {
      setIsSubmitting(false)
    }
  }

  if (submitted) {
    return (
      <div className="text-center py-16 px-6 max-w-xl mx-auto">
        <div className="w-20 h-20 rounded-full bg-brand-primary/10 flex items-center justify-center mx-auto mb-6">
          <span className="text-4xl text-brand-primary">✓</span>
        </div>
        <h2 className="text-2xl sm:text-3xl font-bold text-brand-text mb-4">{t('thanksTitle')}</h2>
        <p className="text-gray-700 leading-relaxed mb-2">{t('thanksMessage')}</p>
        <p className="text-brand-primary font-semibold italic">— {AGENT_NAME}</p>
      </div>
    )
  }

  return (
    <div className="w-full max-w-2xl mx-auto">
      {/* Progress bar */}
      <div className="mb-8">
        <div className="flex justify-between text-xs font-bold uppercase tracking-wider text-gray-500 mb-2">
          <span>{t('step')} {step} {t('of')} 5</span>
        </div>
        <div className="h-1.5 bg-brand-accent/30 rounded-full overflow-hidden">
          <div
            className="h-full bg-brand-primary transition-all duration-500 rounded-full"
            style={{ width: `${(step / 5) * 100}%` }}
          />
        </div>
      </div>

      {/* Step content - fade transition */}
      <div
        key={step}
        className="min-h-[400px] animate-fade-in"
      >
        {/* Step 1 */}
        {step === 1 && (
          <div className="space-y-6">
            <h2 className="text-xl sm:text-2xl font-bold text-brand-text mb-6">{t('step1Title')}</h2>
            <div className="grid sm:grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                  {t('firstName')} *
                </label>
                <input
                  type="text"
                  value={data.firstName}
                  onChange={(e) => update('firstName', e.target.value)}
                  className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none transition-all"
                  placeholder="John"
                />
              </div>
              <div>
                <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                  {t('lastName')} *
                </label>
                <input
                  type="text"
                  value={data.lastName}
                  onChange={(e) => update('lastName', e.target.value)}
                  className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none transition-all"
                  placeholder="Doe"
                />
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('email')} *
              </label>
              <input
                type="email"
                value={data.email}
                onChange={(e) => update('email', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none transition-all"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">{t('phone')}</label>
              <input
                type="tel"
                value={data.phone}
                onChange={(e) => update('phone', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none transition-all"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('homeCountry')}
              </label>
              <input
                type="text"
                value={data.homeCountry}
                onChange={(e) => update('homeCountry', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none transition-all"
                placeholder="e.g. United States"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('preferredContact')}
              </label>
              <div className="flex gap-2">
                {(['phone', 'email'] as const).map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('preferredContact', v)}
                    className={`flex-1 py-3 px-4 rounded-xl text-sm font-bold uppercase tracking-wide transition-all ${
                      data.preferredContact === v
                        ? 'bg-brand-primary text-white'
                        : 'border-2 border-brand-accent/40 text-brand-text hover:border-brand-primary'
                    }`}
                  >
                    {v === 'phone' ? t('phone') : t('email')}
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Step 2 */}
        {step === 2 && (
          <div className="space-y-6">
            <h2 className="text-xl sm:text-2xl font-bold text-brand-text mb-6">{t('step2Title')}</h2>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('propertyType')}
              </label>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                {['Condominium', 'House', 'Commercial', 'Land'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => toggleArray('propertyType', v)}
                    className={`py-3 px-4 rounded-xl text-sm font-bold transition-all border-2 flex items-center justify-center gap-1.5 ${
                      data.propertyType.includes(v) ? 'bg-brand-primary text-white border-brand-primary' : 'border-brand-accent/40 hover:border-brand-primary'
                    }`}
                  >
                    {data.propertyType.includes(v) && (
                      <span className="text-white" aria-hidden>✓</span>
                    )}
                    {t(`propType_${v.toLowerCase()}`)}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('priceRange')}
              </label>
              <div className="flex gap-4 items-center">
                <input
                  type="text"
                  value={data.priceMin}
                  onChange={(e) => update('priceMin', e.target.value)}
                  placeholder="Min USD"
                  className="flex-1 px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
                />
                <span className="text-gray-400">—</span>
                <input
                  type="text"
                  value={data.priceMax}
                  onChange={(e) => update('priceMax', e.target.value)}
                  placeholder="Max USD"
                  className="flex-1 px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
                />
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('areasInterest')}
              </label>
              <div className="flex flex-wrap gap-2">
                {['Hotel Zone', 'Marina Vallarta', 'Centro North', 'Centro South', 'South Shore', 'Other'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => toggleArray('areas', v)}
                    className={`py-2 px-4 rounded-full text-sm font-semibold transition-all ${
                      data.areas.includes(v)
                        ? 'bg-brand-primary text-white'
                        : 'border-2 border-brand-accent/40 hover:border-brand-primary'
                    }`}
                  >
                    {t(`area_${v.replace(/\s/g, '')}`)}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('possessionWhen')}
              </label>
              <input
                type="text"
                value={data.possessionWhen}
                onChange={(e) => update('possessionWhen', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
                placeholder={t('possessionPlaceholder')}
              />
            </div>
          </div>
        )}

        {/* Step 3 */}
        {step === 3 && (
          <div className="space-y-6">
            <h2 className="text-xl sm:text-2xl font-bold text-brand-text mb-6">{t('step3Title')}</h2>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('bedrooms')}
              </label>
              <div className="flex flex-wrap gap-2">
                {['1', '1+', '2+', '3+'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('bedrooms', v)}
                    className={`py-2 px-4 rounded-full text-sm font-bold transition-all ${
                      data.bedrooms === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {v}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('bathrooms')}
              </label>
              <div className="flex flex-wrap gap-2">
                {['1', '2', '2+'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('bathrooms', v)}
                    className={`py-2 px-4 rounded-full text-sm font-bold transition-all ${
                      data.bathrooms === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {v}
                  </button>
                ))}
              </div>
            </div>
            <div className="grid sm:grid-cols-3 gap-4">
              {[
                { k: 'parking' as const, l: t('parking') },
                { k: 'petFriendly' as const, l: t('petFriendly') },
                { k: 'reducedMobility' as const, l: t('reducedMobility') },
              ].map(({ k, l }) => (
                <div key={k}>
                  <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">{l}</label>
                  <div className="flex gap-2">
                    {['Yes', 'No'].map((v) => (
                      <button
                        key={v}
                        type="button"
                        onClick={() => update(k, v)}
                        className={`flex-1 py-2 rounded-xl text-sm font-bold ${
                          data[k] === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                        }`}
                      >
                        {v === 'Yes' ? t('yes') : t('no')}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('amenities')}
              </label>
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                {['Pool', 'Hot Tub', 'Gym', 'Rooftop Patio', 'Party Room', 'Concierge', 'Security Camera', 'Workspace'].map(
                  (v) => (
                    <button
                      key={v}
                      type="button"
                      onClick={() => toggleArray('amenities', v)}
                      className={`py-2 px-3 rounded-xl text-sm font-semibold text-left transition-all ${
                        data.amenities.includes(v) ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                      }`}
                    >
                      {t(`amenity_${v.replace(/\s/g, '')}`)}
                    </button>
                  )
                )}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('otherFeatures')}
              </label>
              <textarea
                value={data.otherFeatures}
                onChange={(e) => update('otherFeatures', e.target.value)}
                rows={3}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none resize-none"
                placeholder={t('otherFeaturesPlaceholder')}
              />
            </div>
          </div>
        )}

        {/* Step 4 */}
        {step === 4 && (
          <div className="space-y-6">
            <h2 className="text-xl sm:text-2xl font-bold text-brand-text mb-6">{t('step4Title')}</h2>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('workingWithAgent')}
              </label>
              <div className="flex gap-2">
                {['Yes', 'No'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('workingWithAgent', v)}
                    className={`flex-1 py-3 rounded-xl font-bold ${
                      data.workingWithAgent === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {v === 'Yes' ? t('yes') : t('no')}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('needFinancing')}
              </label>
              <div className="flex flex-wrap gap-2">
                {['Yes', 'No', 'Not Sure'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('needFinancing', v)}
                    className={`py-2 px-4 rounded-full font-bold text-sm ${
                      data.needFinancing === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {v === 'Not Sure' ? t('notSure') : v === 'Yes' ? t('yes') : t('no')}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('howPay')}
              </label>
              <div className="flex flex-wrap gap-2">
                {['Cash', 'Financing', 'Both'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('howPay', v)}
                    className={`py-2 px-4 rounded-full font-bold text-sm ${
                      data.howPay === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {t(`howPay_${v.toLowerCase()}`)}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('verificationOfFunds')}
              </label>
              <div className="flex gap-2">
                {['Yes', 'No'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('verificationOfFunds', v)}
                    className={`flex-1 py-3 rounded-xl font-bold ${
                      data.verificationOfFunds === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {v === 'Yes' ? t('yes') : t('no')}
                  </button>
                ))}
              </div>
            </div>
            {(data.needFinancing === 'Yes' || data.howPay === 'Financing' || data.howPay === 'Both') && (
              <div>
                <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                  {t('downPayment')}
                </label>
                <input
                  type="text"
                  value={data.downPayment}
                  onChange={(e) => update('downPayment', e.target.value)}
                  className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
                  placeholder="USD"
                />
              </div>
            )}
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('howLongLooking')}
              </label>
              <input
                type="text"
                value={data.howLongLooking}
                onChange={(e) => update('howLongLooking', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('readyToPurchase')}
              </label>
              <select
                value={data.readyToPurchase}
                onChange={(e) => update('readyToPurchase', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none bg-white"
              >
                <option value="">{t('select')}</option>
                {['Immediately', '1-3 months', '3-6 months', '6-12 months', 'Just exploring'].map((v) => (
                  <option key={v} value={v}>
                    {t(`ready_${v.replace(/[\s-]/g, '')}`)}
                  </option>
                ))}
              </select>
            </div>
            <div className="grid sm:grid-cols-3 gap-4">
              {[
                { k: 'firstPurchaseMexico' as const, l: t('firstPurchaseMexico') },
                { k: 'ownPropertyMexico' as const, l: t('ownPropertyMexico') },
                { k: 'sellPropertyFirst' as const, l: t('sellPropertyFirst') },
              ].map(({ k, l }) => (
                <div key={k}>
                  <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">{l}</label>
                  <div className="flex gap-2">
                    {['Yes', 'No'].map((v) => (
                      <button
                        key={v}
                        type="button"
                        onClick={() => update(k, v)}
                        className={`flex-1 py-2 rounded-xl text-sm font-bold ${
                          data[k] === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                        }`}
                      >
                        {v === 'Yes' ? t('yes') : t('no')}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Step 5 */}
        {step === 5 && (
          <div className="space-y-6">
            <h2 className="text-xl sm:text-2xl font-bold text-brand-text mb-6">{t('step5Title')}</h2>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-3">
                {t('propertyUse')} *
              </label>
              <div className="grid sm:grid-cols-3 gap-3">
                {['Personal Use', 'Rental Income', 'Both'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('propertyUse', v)}
                    className={`py-4 px-4 rounded-xl font-bold transition-all border-2 ${
                      data.propertyUse === v ? 'bg-brand-primary text-white border-brand-primary' : 'border-brand-accent/40'
                    }`}
                  >
                    {t(`use_${v.replace(/\s/g, '')}`)}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('nextVisit')}
              </label>
              <input
                type="text"
                value={data.nextVisit}
                onChange={(e) => update('nextVisit', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('whoElseInvolved')}
              </label>
              <input
                type="text"
                value={data.whoElseInvolved}
                onChange={(e) => update('whoElseInvolved', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('theirRelationship')}
              </label>
              <input
                type="text"
                value={data.theirRelationship}
                onChange={(e) => update('theirRelationship', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('presentAtViewings')}
              </label>
              <div className="flex gap-2">
                {['Yes', 'No'].map((v) => (
                  <button
                    key={v}
                    type="button"
                    onClick={() => update('presentAtViewings', v)}
                    className={`flex-1 py-3 rounded-xl font-bold ${
                      data.presentAtViewings === v ? 'bg-brand-primary text-white' : 'border-2 border-brand-accent/40'
                    }`}
                  >
                    {v === 'Yes' ? t('yes') : t('no')}
                  </button>
                ))}
              </div>
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('anythingElse')}
              </label>
              <textarea
                value={data.anythingElse}
                onChange={(e) => update('anythingElse', e.target.value)}
                rows={4}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none resize-none"
              />
            </div>
            <div>
              <label className="block text-xs font-bold uppercase tracking-widest text-brand-text mb-2">
                {t('howDidYouHear')}
              </label>
              <input
                type="text"
                value={data.howDidYouHear}
                onChange={(e) => update('howDidYouHear', e.target.value)}
                className="w-full px-4 py-3 rounded-xl border-2 border-brand-accent/40 focus:border-brand-primary focus:outline-none"
              />
            </div>
          </div>
        )}
      </div>

      {error && (
        <p className="mt-4 text-red-600 text-sm font-medium">{error}</p>
      )}

      {/* Footer buttons */}
      <div className="flex gap-4 mt-10">
        <button
          type="button"
          onClick={handleBack}
          disabled={step === 1}
          className="flex items-center gap-2 px-6 py-4 rounded-xl border-2 border-brand-accent/40 font-bold uppercase tracking-widest text-sm disabled:opacity-40 disabled:cursor-not-allowed hover:border-brand-primary transition-all"
        >
          <ChevronLeft size={18} />
          {t('back')}
        </button>
        {step < 5 ? (
          <button
            type="button"
            onClick={handleNext}
            disabled={!canNext}
            className="flex-1 flex items-center justify-center gap-2 px-6 py-4 rounded-xl bg-brand-primary text-white font-bold uppercase tracking-widest text-sm hover:bg-brand-darkGreen disabled:opacity-50 disabled:cursor-not-allowed transition-all"
          >
            {t('next')}
            <ChevronRight size={18} />
          </button>
        ) : (
          <button
            type="button"
            onClick={handleSubmit}
            disabled={!step5Valid || isSubmitting}
            className="flex-1 flex items-center justify-center gap-2 px-6 py-4 rounded-xl bg-brand-primary text-white font-bold uppercase tracking-widest text-sm hover:bg-brand-darkGreen disabled:opacity-50 disabled:cursor-not-allowed transition-all"
          >
            {isSubmitting ? t('sending') : t('submit')}
          </button>
        )}
      </div>
    </div>
  )
}