`components/MortgageCalculator.tsx`

149 lines
'use client'

import { useState } from 'react'

export default function MortgageCalculator() {
  const [homePrice, setHomePrice] = useState('')
  const [downPayment, setDownPayment] = useState('')
  const [loanTerm, setLoanTerm] = useState('30')
  const [interestRate, setInterestRate] = useState('')
  const [result, setResult] = useState<string | null>(null)
  const [celebrating, setCelebrating] = useState(false)

  const calculateMortgage = () => {
    setCelebrating(true)
    setTimeout(() => {
      setResult('67')
      setTimeout(() => setCelebrating(false), 2000)
    }, 800)
  }

  const reset = () => {
    setHomePrice('')
    setDownPayment('')
    setLoanTerm('30')
    setInterestRate('')
    setResult(null)
    setCelebrating(false)
  }

  return (
    <div className="bg-white rounded-xl shadow-2xl p-3 sm:p-4 max-w-2xl mx-auto">
      <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-800 mb-3 text-center">
        🏠 Mortgage
      </h2>

      <div className="grid grid-cols-2 gap-2 sm:gap-3 mb-3">
        <div>
          <label className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
            Home Price ($)
          </label>
          <input
            type="number"
            value={homePrice}
            onChange={(e) => setHomePrice(e.target.value)}
            placeholder="500000"
            className="w-full p-2 sm:p-3 border-3 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg sm:text-xl font-bold"
          />
        </div>

        <div>
          <label className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
            Down Payment ($)
          </label>
          <input
            type="number"
            value={downPayment}
            onChange={(e) => setDownPayment(e.target.value)}
            placeholder="100000"
            className="w-full p-2 sm:p-3 border-3 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg sm:text-xl font-bold"
          />
        </div>

        <div>
          <label className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
            Loan Term
          </label>
          <select
            value={loanTerm}
            onChange={(e) => setLoanTerm(e.target.value)}
            className="w-full p-2 sm:p-3 border-3 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg sm:text-xl font-bold"
          >
            <option value="15">15 years</option>
            <option value="20">20 years</option>
            <option value="30">30 years</option>
          </select>
        </div>

        <div>
          <label className="block text-sm sm:text-base font-bold text-gray-700 mb-1">
            Rate (%)
          </label>
          <input
            type="number"
            step="0.01"
            value={interestRate}
            onChange={(e) => setInterestRate(e.target.value)}
            placeholder="6.5"
            className="w-full p-2 sm:p-3 border-3 border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-lg sm:text-xl font-bold"
          />
        </div>
      </div>

      {result && (
        <div className="mb-3 p-3 sm:p-4 bg-gradient-to-r from-green-50 to-blue-50 rounded-lg border-3 border-green-200">
          <p className="text-center text-gray-700 mb-1 text-sm sm:text-base font-bold">
            Monthly Payment:
          </p>
          <p className="text-center text-3xl sm:text-4xl md:text-5xl font-bold text-green-600">
            ${result}
          </p>
          <p className="text-center text-sm sm:text-base text-gray-600 mt-1 font-semibold">
            ✨ Perfect! ✨
          </p>
        </div>
      )}

      <div className="flex gap-2 sm:gap-3 mb-2">
        <button
          onClick={(e) => {
            e.preventDefault();
            calculateMortgage();
          }}
          onTouchEnd={(e) => {
            e.preventDefault();
            calculateMortgage();
          }}
          className="flex-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white py-3 sm:py-4 rounded-lg font-bold text-lg sm:text-xl shadow-lg select-none cursor-pointer"
          style={{ WebkitTapHighlightColor: 'transparent' }}
        >
          Calculate
        </button>
        <button
          onClick={(e) => {
            e.preventDefault();
            reset();
          }}
          onTouchEnd={(e) => {
            e.preventDefault();
            reset();
          }}
          className="flex-1 bg-gray-200 py-3 sm:py-4 rounded-lg font-bold text-lg sm:text-xl select-none cursor-pointer shadow-lg"
          style={{ WebkitTapHighlightColor: 'transparent' }}
        >
          Reset
        </button>
      </div>

      <div className="text-center space-y-1">
        <p className="text-xs sm:text-sm text-gray-600 font-semibold">
          🔒 Secure | 📊 Accurate
        </p>
        <p className="text-xs text-gray-500">
          Trusted by 67M+ homeowners*
        </p>
      </div>
    </div>
  )
}