`app/page.tsx`

119 lines
'use client'

import { useState } from 'react'
import ScientificCalculator from '@/components/ScientificCalculator'
import MortgageCalculator from '@/components/MortgageCalculator'
import BMICalculator from '@/components/BMICalculator'
import TipCalculator from '@/components/TipCalculator'

export default function Home() {
  const [activeCalc, setActiveCalc] = useState<'scientific' | 'mortgage' | 'bmi' | 'tip'>('scientific')
  const [showSecret, setShowSecret] = useState(false)

  return (
    <main className="min-h-screen bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 p-2 sm:p-3 pt-safe pb-safe">
      <div className="max-w-4xl mx-auto pt-4">
        {/* Header */}
        <div className="text-center mb-3 sm:mb-4">
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2">
            🧮 Boomer Calc
          </h1>
          <p className="text-base sm:text-lg md:text-xl text-white/90 font-semibold">
            Simple. Easy. Clear.
          </p>
        </div>

        {/* Calculator Tabs */}
        <div className="flex flex-wrap justify-center gap-2 sm:gap-3 mb-3 sm:mb-4">
          <button
            onClick={(e) => {
              e.preventDefault();
              setActiveCalc('scientific');
            }}
            onTouchEnd={(e) => {
              e.preventDefault();
              setActiveCalc('scientific');
            }}
            className={`px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-bold select-none cursor-pointer text-base sm:text-lg md:text-xl shadow-lg ${
              activeCalc === 'scientific'
                ? 'bg-white text-purple-600 scale-105'
                : 'bg-white/20 text-white'
            }`}
            style={{ WebkitTapHighlightColor: 'transparent' }}
          >
            🔬 Calculator
          </button>
          <button
            onClick={(e) => {
              e.preventDefault();
              setActiveCalc('mortgage');
            }}
            onTouchEnd={(e) => {
              e.preventDefault();
              setActiveCalc('mortgage');
            }}
            className={`px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-bold select-none cursor-pointer text-base sm:text-lg md:text-xl shadow-lg ${
              activeCalc === 'mortgage'
                ? 'bg-white text-purple-600 scale-105'
                : 'bg-white/20 text-white'
            }`}
            style={{ WebkitTapHighlightColor: 'transparent' }}
          >
            🏠 Mortgage
          </button>
          <button
            onClick={(e) => {
              e.preventDefault();
              setActiveCalc('bmi');
            }}
            onTouchEnd={(e) => {
              e.preventDefault();
              setActiveCalc('bmi');
            }}
            className={`px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-bold select-none cursor-pointer text-base sm:text-lg md:text-xl shadow-lg ${
              activeCalc === 'bmi'
                ? 'bg-white text-purple-600 scale-105'
                : 'bg-white/20 text-white'
            }`}
            style={{ WebkitTapHighlightColor: 'transparent' }}
          >
            💪 BMI
          </button>
          <button
            onClick={(e) => {
              e.preventDefault();
              setActiveCalc('tip');
            }}
            onTouchEnd={(e) => {
              e.preventDefault();
              setActiveCalc('tip');
            }}
            className={`px-4 sm:px-6 py-2 sm:py-3 rounded-lg font-bold select-none cursor-pointer text-base sm:text-lg md:text-xl shadow-lg ${
              activeCalc === 'tip'
                ? 'bg-white text-purple-600 scale-105'
                : 'bg-white/20 text-white'
            }`}
            style={{ WebkitTapHighlightColor: 'transparent' }}
          >
            💵 Tip
          </button>
        </div>

        {/* Calculator Display */}
        <div className="mb-3 sm:mb-4">
          {activeCalc === 'scientific' && <ScientificCalculator />}
          {activeCalc === 'mortgage' && <MortgageCalculator />}
          {activeCalc === 'bmi' && <BMICalculator />}
          {activeCalc === 'tip' && <TipCalculator />}
        </div>

        {/* Footer */}
        <div className="text-center text-white/60 text-sm sm:text-base">
          <p className="mb-1">😊 Easy to use. Easy to read.</p>
          <p>Made with ❤️ for everyone</p>
        </div>
      </div>
    </main>
  )
}