'use client';

import { useState } from 'react';

export default function InvestmentCalculator() {
  const [monthlyIncome, setMonthlyIncome] = useState(5000);
  const [investmentPercentage, setInvestmentPercentage] = useState(20);
  const [period, setPeriod] = useState(45);

  // Calculate investment results
  const monthlyInvestment = (monthlyIncome * investmentPercentage) / 100;
  const totalSavings = monthlyInvestment * 12 * period;
  const estimatedReturns = totalSavings * 1.5; // Simple estimation for demo
  const totalValue = estimatedReturns;

  return (
    <section className="bg-white py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-tomato font-bold text-rise-dark mb-6">
              Start building your future
            </h2>
          </div>

          {/* Calculator Grid */}
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            {/* Left Side - Controls */}
            <div className="space-y-8">
              {/* Monthly Income */}
              <div className="space-y-4">
                <label className="block text-lg font-work font-medium text-rise-dark">
                  How much do you earn monthly?
                </label>
                <p className="text-sm text-gray-500 font-work">
                  You can type in your exact income in the display field
                </p>
                <div className="relative">
                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">$</span>
                  <input
                    type="number"
                    value={monthlyIncome}
                    onChange={(e) => setMonthlyIncome(Number(e.target.value))}
                    className="w-full pl-8 pr-4 py-3 border border-gray-200 rounded-lg font-work text-lg"
                  />
                </div>
              </div>

              {/* Investment Percentage */}
              <div className="space-y-4">
                <label className="block text-lg font-work font-medium text-rise-dark">
                  What income % do you want to invest monthly?
                </label>
                <p className="text-sm text-gray-500 font-work">
                  We recommend 20% but feel free to start lower.
                </p>
                <div className="space-y-3">
                  <input
                    type="range"
                    min="1"
                    max="50"
                    value={investmentPercentage}
                    onChange={(e) => setInvestmentPercentage(Number(e.target.value))}
                    className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
                  />
                  <div className="text-center">
                    <span className="text-2xl font-tomato font-bold text-rise-dark">
                      {investmentPercentage}%
                    </span>
                  </div>
                </div>
              </div>

              {/* Investment Period */}
              <div className="space-y-4">
                <label className="block text-lg font-work font-medium text-rise-dark">
                  For a period of
                </label>
                <div className="space-y-3">
                  <input
                    type="range"
                    min="1"
                    max="50"
                    value={period}
                    onChange={(e) => setPeriod(Number(e.target.value))}
                    className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
                  />
                  <div className="text-center">
                    <span className="text-2xl font-tomato font-bold text-rise-dark">
                      {period} years
                    </span>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Side - Results */}
            <div className="bg-gray-50 rounded-2xl p-8 space-y-6">
              <div className="text-center space-y-4">
                <p className="text-lg font-work font-medium text-rise-dark">
                  You get
                </p>
                <div className="space-y-2">
                  <p className="text-4xl md:text-5xl font-tomato font-bold text-rise-dark">
                    ${totalValue.toLocaleString()}
                  </p>
                  <p className="text-gray-500 font-work">
                    in {period} years
                  </p>
                </div>
              </div>

              {/* Breakdown */}
              <div className="space-y-4 pt-6 border-t border-gray-200">
                <div className="flex justify-between items-center">
                  <span className="text-gray-600 font-work">Returns</span>
                  <span className="font-work font-semibold text-rise-dark">
                    ${(totalValue - totalSavings).toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-gray-600 font-work">Savings</span>
                  <span className="font-work font-semibold text-rise-dark">
                    ${totalSavings.toLocaleString()}
                  </span>
                </div>
              </div>

              {/* Chart placeholder */}
              <img
                src="/download.png"
                alt="Investment Interface"
                className="h-32 bg-gradient-to-r from-teal-100 to-teal-200 rounded-lg flex items-center justify-center"
              />
              
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        .slider::-webkit-slider-thumb {
          appearance: none;
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #199c9f;
          cursor: pointer;
        }
        .slider::-moz-range-thumb {
          height: 20px;
          width: 20px;
          border-radius: 50%;
          background: #199c9f;
          cursor: pointer;
          border: none;
        }
      `}</style>
    </section>
  );
}