Build a Love Calculator in React

/* lib/love-algo.js */
export const calculateMatch = (name1, name2) => {
  const str = (name1 + name2).toLowerCase().replace(/[^a-z]/g, "");
  
  let sum = 0;
  for (let i = 0; i < str.length; i++) {
    sum += str.charCodeAt(i);
  }
  
  return sum % 101; // Returns 0-100
}

"use client"

import { useState } from "react"
import { Heart, Sparkles } from "lucide-react"

export default function LoveCalculator() {
  const [name1, setName1] = useState("")
  const [name2, setName2] = useState("")
  const [score, setScore] = useState<number | null>(null)
  
  const handleCalculate = () => {
    if(!name1 || !name2) return;
    
    // Add a fake loading delay for suspense!
    setScore(null)
    setTimeout(() => {
       const combined = (name1 + name2).toLowerCase().trim()
       let sum = 0
       for(let i=0; i<combined.length; i++) sum += combined.charCodeAt(i)
       setScore(sum % 101)
    }, 1500)
  }

  return (
    <div className="max-w-md mx-auto p-4">
       <div className="bg-pink-50 p-8 rounded-3xl shadow-xl text-center border-4 border-white ring-4 ring-pink-100">
          
          <div className="flex justify-center mb-6 text-pink-500 animate-bounce">
             <Heart fill="currentColor" size={48} />
          </div>
          
          <h2 className="text-3xl font-black text-pink-600 mb-2 font-handwriting">
            Love Tester
          </h2>
          <p className="text-pink-400 text-sm mb-8">Are you destined for each other?</p>

          <div className="space-y-4">
             <input 
               value={name1} onChange={e => setName1(e.target.value)}
               placeholder="Your Name"
               className="w-full p-4 rounded-full border-2 border-pink-200 text-center text-lg focus:border-pink-500 outline-none text-pink-600 placeholder:text-pink-300"
             />
             
             <div className="text-2xl">➕</div>
             
             <input 
               value={name2} onChange={e => setName2(e.target.value)}
               placeholder="Crush Name"
               className="w-full p-4 rounded-full border-2 border-pink-200 text-center text-lg focus:border-pink-500 outline-none text-pink-600 placeholder:text-pink-300"
             />
          </div>

          <button 
            onClick={handleCalculate}
            className="w-full mt-8 bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold py-4 rounded-full shadow-lg transform transition active:scale-95 hover:shadow-pink-500/50"
          >
            CALCULATE LOVE ❤️
          </button>

          {score !== null && (
             <div className="mt-8 animate-in zoom-in duration-500">
                <div className="text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-pink-600 to-purple-600">
                   {score}%
                </div>
                <div className="text-pink-500 font-bold mt-2 flex items-center justify-center gap-2">
                   <Sparkles size={16} />
                   {score > 80 ? "SOULMATES! 😍" : 
                    score > 50 ? "GOOD MATCH! 😘" : 
                    "JUST FRIENDS? 😅"}
                   <Sparkles size={16} />
                </div>
             </div>
          )}

       </div>
    </div>
  )
}

const shareUrl = `https://myapp.com/love?n1=${name1}&n2=${name2}&score=${score}`;