import React, { useState, useEffect } from 'react';
import { Book, Gift, Briefcase, Users, TrendingUp, DollarSign, Award, ChevronDown, ChevronUp, CheckCircle, Calculator, ArrowRight, Edit3, Wallet, Volume2, StopCircle, PlayCircle, AlertTriangle, RefreshCcw, Star, PieChart, UserPlus } from 'lucide-react';

const App = () => {
  const [activeRank, setActiveRank] = useState<number | null>(0);
  
  // --- Audio State ---
  const [isSpeaking, setIsSpeaking] = useState(false);
  const [currentSection, setCurrentSection] = useState<string | null>(null);
  const [hasAudioSupport, setHasAudioSupport] = useState(true);

  // --- Calculator States ---
  const [calcRank, setCalcRank] = useState<number>(1); // Default Retailer
  const [booksSold, setBooksSold] = useState<number>(1); 
  const [saleValue, setSaleValue] = useState<number>(1999); // MRP
  const [profitShareValue, setProfitShareValue] = useState<number>(1000); // CP

  // --- Multi-Leg Gap States ---
  const [myGapRank, setMyGapRank] = useState<number>(5); // Default Master
  
  // लेग इनपुट्स (Member रैंक 0 से शुरू)
  const [legInputs, setLegInputs] = useState<{[key: number]: { members: number, qtyPerMember: number }}>({
      0: { members: 0, qtyPerMember: 0 }, // Member
      1: { members: 0, qtyPerMember: 0 }, // Retailer
      2: { members: 0, qtyPerMember: 0 }, // Super Retailer
      3: { members: 0, qtyPerMember: 0 }, // Distributor
      4: { members: 0, qtyPerMember: 0 }, // Super Distributor
      5: { members: 0, qtyPerMember: 0 }  // Master Distributor
  });

  // --- Data ---
  const features = [
    {
      icon: <DollarSign className="w-8 h-8 text-green-600" />,
      title: "100% कैश बैक (Cashback)",
      desc: "बुक प्राइस (₹1999) का 100% कैशबैक! इसका उपयोग Htm Career Councling, Web Development, Digital marketing, और Htm Pay Mobile Application मे Utilities Services में किया जा सकता है। और भविष्य में स्कूल ऐडमिशन, मेडिसिन, ओपीडी, शॉपिंग आदि में भी।"
    },
    {
      icon: <Gift className="w-8 h-8 text-purple-600" />,
      title: "लेखक रॉयल्टी गिफ्ट",
      desc: "बुक सेल होने पर पाठकों को क्रमानुसार 'राइटर रॉयल्टी गिफ्ट' मिलता है। जो पहले आएगा, वह पहले पाएगा।"
    },
    {
      icon: <Briefcase className="w-8 h-8 text-blue-600" />,
      title: "रोजगार के अवसर",
      desc: "बुक पाठकों को विभिन्न कंपनियों की वैकेंसी, जॉब इंटरव्यू और Freelance Work की जानकारी व्हाट्सएप के माध्यम से दी जाती है।"
    },
    {
      icon: <Users className="w-8 h-8 text-orange-600" />,
      title: "FREE फ्रेंचाइजी कोड",
      desc: "हिंदुस्तान के किसी भी कोने से घर बैठे बिज़नेस करने का मौका। फ्री फ्रेंचाइजी कोड के साथ अपना नेटवर्क बनाएं।"
    },
    {
      icon: <TrendingUp className="w-8 h-8 text-red-600" />,
      title: "स्पेशल बिज़नेस ट्रेनिंग",
      desc: "30 से 40 मिनट की फ्री ऑनलाइन ज़ूम मीटिंग ट्रेनिंग, जिसमें बिज़नेस को बढ़ाने के तरीके सिखाए जाते हैं।"
    }
  ];

  // Added Member Rank at ID 0
  const ranks = [
    {
      id: 0,
      title: "Member",
      fullTitle: "Member (Fresher)",
      criteria: "0 - 4 बुक्स (Buy / Sale)",
      commission: 0,
      details: "शुरुआती रैंक। अभी कोई कमीशन नहीं। 5 बुक्स सेल करके या खरीदकर 'Retailer' बनें और 12.5% कमीशन अनलॉक करें।"
    },
    {
      id: 1,
      title: "Retailer",
      fullTitle: "Retailer Franchise",
      criteria: "5 Book Buy / Sale",
      commission: 12.5,
      details: "डायरेक्ट सेल पर 12.5% आय। मेंबर्स (Members) की सेल पर 12.5% गैप कमीशन।"
    },
    {
      id: 2,
      title: "Super Retailer",
      fullTitle: "Super Retailer",
      criteria: "25 Book Buy / Sale या 5 Retailers",
      commission: 25,
      details: "डायरेक्ट सेल पर 25% आय। रिटेलर से 12.5% और मेंबर से 25% का गैप कमीशन।"
    },
    {
      id: 3,
      title: "Distributor",
      fullTitle: "Distributor",
      criteria: "125 Book Buy / Sale या 5 Super Retailers",
      commission: 37.5,
      details: "डायरेक्ट सेल पर 37.5% आय। सुपर रिटेलर से 12.5%, रिटेलर से 25% और मेंबर से 37.5% का गैप कमीशन।"
    },
    {
      id: 4,
      title: "Super Dist.",
      fullTitle: "Super Distributor",
      criteria: "250 Book Buy / Sale या 5 Distributors",
      commission: 50,
      details: "डायरेक्ट सेल पर 50% आय। डिस्ट्रीब्यूटर से 12.5%, सुपर रिटेलर से 25%, रिटेलर से 37.5% और मेंबर से 50% का गैप।"
    },
    {
      id: 5,
      title: "Master Dist.",
      fullTitle: "Master Distributor",
      criteria: "500 Book Buy / Sale या 5 Super Distributors",
      commission: 62.5,
      details: "डायरेक्ट सेल पर 62.5% आय। सुपर डिस्ट्रीब्यूटर से 12.5%, डिस्ट्रीब्यूटर से 25%, सुपर रिटेलर से 37.5%, रिटेलर से 50% और मेंबर से 62.5% का गैप। (मास्टर के नीचे मास्टर होने पर 10% रॉयल्टी)।"
    }
  ];

  // --- Voice Assistant Logic ---
  useEffect(() => {
    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
      setHasAudioSupport(true);
    } else {
      setHasAudioSupport(false);
    }
    return () => {
      if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
        window.speechSynthesis.cancel();
      }
    }
  }, []);

  const stopSpeaking = () => {
    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
        window.speechSynthesis.cancel();
    }
    setIsSpeaking(false);
    setCurrentSection(null);
  };

  const speakText = (text: string, sectionName: string) => {
    if (!hasAudioSupport) return;

    if (isSpeaking && currentSection === sectionName) {
      stopSpeaking();
      return;
    }

    try {
        window.speechSynthesis.cancel();
        const utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = 'hi-IN'; 
        utterance.rate = 0.9;
        utterance.onstart = () => { setIsSpeaking(true); setCurrentSection(sectionName); };
        utterance.onend = () => { setIsSpeaking(false); setCurrentSection(null); };
        window.speechSynthesis.speak(utterance);
    } catch (error) {
        console.error("Speak failed:", error);
        setIsSpeaking(false);
    }
  };

  const fullPlanScript = `
    मैं किताब नहीं कमाई हूँ, फ्रेंचाइजी बिज़नेस मॉडल में आपका स्वागत है। 
    यह एचटीएम ग्रुप्स द्वारा प्रस्तुत एक शानदार बिज़नेस अवसर है।
    इस बुक की कीमत 1999 रुपये है।
    इसे खरीदने के पांच बड़े फायदे हैं: 100% कैशबैक, रॉयल्टी गिफ्ट, रोजगार, फ्री फ्रेंचाइजी कोड और ट्रेनिंग।
  `;

  // --- Calculations ---
  
  // 1. Direct Income (On Profit Share Value, No Deduction)
  const calculateDirectIncome = () => {
      const commissionPercent = ranks[calcRank].commission;
      // Use Profit Share Value (CP) for calculation
      const gross = (profitShareValue * commissionPercent / 100) * booksSold;
      return { gross, net: gross }; 
  };

  // 2. Multi-Leg Gap (On Profit Share Value, No Deduction)
  const calculateTotalGapIncome = () => {
      let totalGross = 0;
      let totalBooks = 0;
      let breakdown: any[] = [];

      const myRankObj = ranks[myGapRank];

      ranks.forEach(downlineRank => {
          const input = legInputs[downlineRank.id];
          const qty = (input.members || 0) * (input.qtyPerMember || 0);

          if (qty > 0) {
              let income = 0;
              let rate = 0;
              let type = "Gap";

              if (myGapRank === 5 && downlineRank.id === 5) {
                  // Royalty Logic: 10% of Downline's Income (on CP)
                  // Downline Master earns 62.5% of CP
                  const downlineIncome = (profitShareValue * 62.5 / 100) * qty;
                  income = downlineIncome * 0.10;
                  rate = 10;
                  type = "Royalty";
              } else if (downlineRank.id < myGapRank) {
                  // Normal Gap Logic (on CP)
                  rate = myRankObj.commission - downlineRank.commission;
                  income = (profitShareValue * rate / 100) * qty;
                  type = `${rate.toFixed(1)}% Gap`;
              } else {
                  // No Gap
                  income = 0;
                  type = "No Gap";
              }

              totalBooks += qty;

              if (income > 0) {
                  totalGross += income;
                  breakdown.push({
                      rank: downlineRank.title,
                      qty,
                      type,
                      amount: income
                  });
              }
          }
      });

      return { 
          totalGross, 
          totalNet: totalGross, 
          totalBooks,
          breakdown 
      };
  };

  const directData = calculateDirectIncome();
  const gapData = calculateTotalGapIncome();

  const handleLegInputChange = (rankId: number, field: 'members' | 'qtyPerMember', val: string) => {
      const num = parseInt(val) || 0;
      setLegInputs(prev => ({
          ...prev,
          [rankId]: { ...prev[rankId], [field]: num }
      }));
  };

  const resetCalculator = () => {
      setLegInputs({
        0: { members: 0, qtyPerMember: 0 },
        1: { members: 0, qtyPerMember: 0 },
        2: { members: 0, qtyPerMember: 0 },
        3: { members: 0, qtyPerMember: 0 },
        4: { members: 0, qtyPerMember: 0 },
        5: { members: 0, qtyPerMember: 0 }
      });
  };

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-800 pb-24 relative">
      
      {/* --- Floating Audio Controller --- */}
      {hasAudioSupport && (
        <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-2">
            {isSpeaking && (
            <div className="bg-black/80 text-white px-4 py-2 rounded-lg text-sm mb-2 animate-bounce">
                🔊 Speaking...
            </div>
            )}
            <button 
            onClick={() => speakText(fullPlanScript, 'fullPlan')}
            className={`flex items-center gap-2 px-6 py-4 rounded-full shadow-2xl transition-all transform hover:scale-105 border-2 border-white ${
                isSpeaking && currentSection === 'fullPlan' 
                ? 'bg-red-600 text-white animate-pulse' 
                : 'bg-blue-900 text-white'
            }`}
            >
            {isSpeaking && currentSection === 'fullPlan' ? <StopCircle className="w-6 h-6" /> : <Volume2 className="w-6 h-6" />}
            <span className="font-bold">
                {isSpeaking && currentSection === 'fullPlan' ? 'Stop Audio' : 'Intro सुनें'}
            </span>
            </button>
        </div>
      )}

      {/* --- HERO SECTION (Original Design) --- */}
      <header className="bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 text-white py-24 px-4 relative overflow-hidden text-center">
        <div className="max-w-4xl mx-auto relative z-10 flex flex-col items-center">
            {/* Top Badge */}
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-yellow-300 font-semibold tracking-wider text-xs md:text-sm mb-8 animate-fade-in-up">
                <Star className="w-4 h-4 fill-yellow-300 text-yellow-300" /> 
                BEST SELLING BUSINESS BOOK
            </div>

            {/* Main Title */}
            <h1 className="text-4xl md:text-7xl font-extrabold mb-4 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-yellow-400 to-yellow-200 drop-shadow-2xl">
                Main Kitaab Nahin<br/>Kamaee Hoon
            </h1>

            {/* Sub Title */}
            <h2 className="text-xl md:text-3xl font-light text-blue-100 mb-8 tracking-wide">
                Franchise Business Model Explain
            </h2>

            {/* Divider */}
            <div className="w-16 h-1 bg-gradient-to-r from-transparent via-yellow-500 to-transparent mb-6"></div>

            {/* Author / Company */}
            <p className="text-sm md:text-base text-blue-300 font-medium tracking-[0.2em] uppercase mb-12">
                By HTM GROUPS
            </p>

            {/* Price Card */}
            <div className="flex flex-col sm:flex-row items-center gap-6">
                <div className="bg-white/5 backdrop-blur-md px-10 py-5 rounded-2xl border border-white/10 hover:border-white/20 transition-all shadow-2xl group">
                    <p className="text-xs text-blue-300 uppercase tracking-wider mb-1">One Time Investment</p>
                    <p className="text-4xl md:text-5xl font-bold text-white group-hover:scale-105 transition-transform duration-300">₹{saleValue} /-</p>
                </div>
                
                 {/* Hero Audio Button */}
                 {hasAudioSupport && (
                    <button 
                        onClick={() => speakText("इस बुक की कीमत 1999 रुपये है। यह एक बिज़नेस मॉडल है।", "hero")}
                        className="flex items-center gap-3 px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold transition-all shadow-lg hover:shadow-blue-500/30"
                    >
                        {isSpeaking && currentSection === 'hero' ? <StopCircle className="w-5 h-5" /> : <PlayCircle className="w-5 h-5" />}
                        Listen Intro
                    </button>
                )}
            </div>

        </div>
      </header>

      {/* --- BENEFITS SECTION --- */}
      <section className="py-16 px-4 max-w-6xl mx-auto">
        <div className="flex flex-col md:flex-row justify-center items-center gap-4 mb-12">
            <h2 className="text-3xl font-bold text-blue-900 text-center">
              इस बुक को खरीदने के 5 बड़े लाभ
            </h2>
            {hasAudioSupport && (
                <button 
                    onClick={() => speakText("इस बुक के 5 मुख्य लाभ हैं। पहला 100% कैशबैक, दूसरा लेखक रॉयल्टी गिफ्ट, तीसरा रोजगार, चौथा फ्री फ्रेंचाइजी कोड, और पांचवा फ्री बिज़नेस ट्रेनिंग।", "benefits")}
                    className="flex items-center gap-2 bg-blue-100 text-blue-900 px-4 py-2 rounded-full hover:bg-blue-200 transition-colors"
                >
                    {isSpeaking && currentSection === 'benefits' ? <StopCircle className="w-5 h-5" /> : <PlayCircle className="w-5 h-5" />}
                    <span className="font-semibold text-sm">लाभ सुनें</span>
                </button>
            )}
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border-t-4 border-blue-600">
              <div className="mb-4">{feature.icon}</div>
              <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* --- RANKS ACCORDION (With Member 0%) --- */}
      <section className="py-16 px-4 max-w-4xl mx-auto">
        <h2 className="text-3xl font-bold text-center mb-10 text-blue-900">
          Franchise Business Ranks
        </h2>
        <div className="space-y-4">
          {ranks.map((rank) => (
            <div key={rank.id} className={`border rounded-xl overflow-hidden transition-all duration-300 ${activeRank === rank.id ? 'ring-2 ring-blue-500 shadow-lg' : 'bg-white shadow-sm'}`}>
              <button 
                onClick={() => {
                  setActiveRank(activeRank === rank.id ? null : rank.id);
                  if (activeRank !== rank.id && hasAudioSupport) {
                      speakText(`${rank.fullTitle}, ${rank.criteria} में। ${rank.details}`, `rank-${rank.id}`);
                  }
                }}
                className="w-full flex justify-between items-center p-5 bg-white hover:bg-gray-50 text-left"
              >
                <div className="flex items-center gap-4">
                  <div className={`w-10 h-10 rounded-full flex items-center justify-center font-bold text-white ${rank.id === 5 ? 'bg-yellow-500' : (rank.id === 0 ? 'bg-gray-400' : 'bg-blue-600')}`}>
                    {rank.id === 0 ? <UserPlus className="w-5 h-5"/> : rank.id}
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-gray-800">{rank.title}</h3>
                    <p className="text-sm text-green-600 font-semibold">{rank.commission}% Commission</p>
                  </div>
                </div>
                {activeRank === rank.id ? <ChevronUp className="text-gray-400" /> : <ChevronDown className="text-gray-400" />}
              </button>
              
              {activeRank === rank.id && (
                <div className="p-5 bg-blue-50 border-t border-gray-100">
                    <p className="text-gray-700 mb-2"><strong>Criteria:</strong> {rank.criteria}</p>
                    <p className="text-gray-700"><strong>Benefits:</strong> {rank.details}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* --- INCOME CALCULATOR --- */}
      <section className="bg-gray-900 text-white py-16 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center justify-center gap-3 mb-8">
            <Calculator className="w-8 h-8 text-yellow-400" />
            <h2 className="text-3xl font-bold">Income Calculator</h2>
          </div>

          {/* Global Value Setting */}
          <div className="bg-gray-800 p-6 rounded-xl border border-gray-700 mb-8 max-w-xl mx-auto shadow-lg relative overflow-hidden">
             <div className="absolute top-0 right-0 p-4 opacity-10"><Edit3 className="w-16 h-16 text-white" /></div>
             
             <div className="grid md:grid-cols-2 gap-6">
                <div>
                    <label className="block text-gray-400 mb-2 font-medium text-sm text-center">Product Sale Value (Price)</label>
                    <div className="relative">
                        <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 font-bold">₹</span>
                        <input 
                        type="number" 
                        value={saleValue}
                        onChange={(e) => setSaleValue(Number(e.target.value))}
                        className="w-full bg-gray-900 text-white p-3 pl-8 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 text-center font-bold"
                        />
                    </div>
                </div>
                <div>
                    <label className="block text-yellow-400 mb-2 font-medium text-sm text-center flex items-center justify-center gap-2">
                        Product Profit Share Value <PieChart className="w-4 h-4"/>
                    </label>
                    <div className="relative">
                        <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-yellow-500 font-bold">CP</span>
                        <input 
                        type="number" 
                        value={profitShareValue}
                        onChange={(e) => setProfitShareValue(Number(e.target.value))}
                        className="w-full bg-gray-900 text-white p-3 pl-8 rounded-lg border border-yellow-500/50 focus:outline-none focus:ring-2 focus:ring-yellow-400 text-center font-bold"
                        />
                    </div>
                </div>
             </div>
             <p className="text-xs text-gray-500 text-center mt-4 bg-gray-900/50 p-2 rounded">
                Note: All Commissions & Royalties are calculated on <strong>Profit Share Value (CP)</strong>.
             </p>
          </div>
          
          <div className="grid lg:grid-cols-2 gap-8">
            
            {/* 1. Direct Income Calculator */}
            <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700 h-fit">
              <h3 className="text-xl font-bold mb-6 text-yellow-400 flex items-center gap-2">
                 <DollarSign className="w-5 h-5" /> Direct Sales Income
              </h3>
              <div className="space-y-6">
                <div>
                  <label className="block text-gray-400 mb-2 font-medium">आपकी रैंक</label>
                  <select 
                    value={calcRank}
                    onChange={(e) => setCalcRank(Number(e.target.value))}
                    className="w-full bg-gray-700 text-white p-3 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-400"
                  >
                    {ranks.map(r => (
                      <option key={r.id} value={r.id}>{r.fullTitle} ({r.commission}%)</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-gray-400 mb-2 font-medium">डायरेक्ट बुक्स सेल</label>
                  <input 
                    type="number" 
                    min="1"
                    value={booksSold}
                    onChange={(e) => setBooksSold(Number(e.target.value))}
                    className="w-full bg-gray-700 text-white p-3 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-yellow-400"
                  />
                </div>
                
                <div className="bg-gradient-to-r from-blue-600 to-blue-500 text-white p-6 rounded-xl text-center shadow-lg mt-4 border border-blue-400">
                   <p className="text-sm font-bold opacity-80 mb-1 uppercase tracking-wider">Net Direct Income</p>
                   <div className="flex items-center justify-center gap-2">
                    <Wallet className="w-6 h-6 text-yellow-300"/>
                    <p className="text-3xl font-extrabold text-white">₹{directData.net.toFixed(0)}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* 2. MULTI-LEG GAP CALCULATOR */}
            <div className="bg-gray-800 p-8 rounded-2xl shadow-xl border border-gray-700 relative overflow-hidden">
               <h3 className="text-xl font-bold mb-6 text-green-400 flex items-center justify-between">
                 <span className="flex items-center gap-2"><Users className="w-5 h-5" /> Team Gap Income</span>
                 <button onClick={resetCalculator} className="text-xs bg-gray-700 hover:bg-gray-600 p-2 rounded flex items-center gap-1 text-white">
                    <RefreshCcw className="w-3 h-3" /> Reset
                 </button>
              </h3>

              {/* My Rank Selection */}
              <div className="mb-6">
                 <label className="block text-gray-400 mb-2 font-medium text-sm">आपकी रैंक (My Rank)</label>
                 <select 
                    value={myGapRank}
                    onChange={(e) => setMyGapRank(Number(e.target.value))}
                    className="w-full bg-gray-700 text-white p-2 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-400 text-lg font-bold"
                 >
                    {ranks.map(r => (
                       <option key={r.id} value={r.id}>{r.fullTitle} ({r.commission}%)</option>
                    ))}
                 </select>
              </div>

              {/* Input Table for Legs */}
              <div className="space-y-4 mb-6">
                 <div className="grid grid-cols-12 gap-2 text-xs text-gray-400 uppercase tracking-wide font-bold px-1">
                    <div className="col-span-4">Rank</div>
                    <div className="col-span-2 text-center">Gap/Roy</div>
                    <div className="col-span-3">Members</div>
                    <div className="col-span-3">Qty/Mem</div>
                 </div>

                 <div className="max-h-80 overflow-y-auto pr-1 space-y-2 custom-scrollbar">
                  {ranks.map((rank) => {
                      const isDisabled = rank.id > myGapRank;
                      const inputData = legInputs[rank.id];
                      const totalQty = (inputData.members || 0) * (inputData.qtyPerMember || 0);

                      return (
                        <div key={rank.id} className={`grid grid-cols-12 gap-2 items-center p-3 rounded-lg border ${myGapRank === rank.id && myGapRank !== 5 ? 'opacity-50 border-gray-700 bg-gray-800/50' : 'bg-gray-700/50 border-gray-600'}`}>
                            {/* Rank Name */}
                            <div className="col-span-4">
                                <p className="text-sm font-bold text-white leading-tight">{rank.title}</p>
                                <p className="text-[10px] text-gray-400">{rank.commission}% Slab</p>
                            </div>
                            
                            {/* Gap % Display */}
                            <div className="col-span-2 text-[10px] font-mono text-center leading-tight">
                                {myGapRank === 5 && rank.id === 5 ? (
                                    <span className="text-yellow-400 font-bold block bg-yellow-900/30 rounded py-1">10%<br/>Royalty</span>
                                ) : rank.id < myGapRank ? (
                                    <span className="text-green-400 font-bold block bg-green-900/30 rounded py-1">{(ranks[myGapRank].commission - rank.commission).toFixed(1)}%<br/>Gap</span>
                                ) : (
                                    <span className="text-gray-500 block">0%<br/>Gap</span>
                                )}
                            </div>

                            {/* Members Input */}
                            <div className="col-span-3">
                              <input 
                                  type="number"
                                  min="0"
                                  placeholder="0"
                                  value={inputData.members > 0 ? inputData.members : ''}
                                  onChange={(e) => handleLegInputChange(rank.id, 'members', e.target.value)}
                                  disabled={isDisabled}
                                  className="w-full bg-gray-900 border border-gray-600 rounded p-1.5 text-center text-white text-sm focus:ring-2 focus:ring-green-400 disabled:opacity-30 disabled:cursor-not-allowed"
                              />
                            </div>

                            {/* Qty/Member Input */}
                            <div className="col-span-3">
                              <input 
                                  type="number"
                                  min="0"
                                  placeholder="0"
                                  value={inputData.qtyPerMember > 0 ? inputData.qtyPerMember : ''}
                                  onChange={(e) => handleLegInputChange(rank.id, 'qtyPerMember', e.target.value)}
                                  disabled={isDisabled}
                                  className="w-full bg-gray-900 border border-gray-600 rounded p-1.5 text-center text-white text-sm focus:ring-2 focus:ring-green-400 disabled:opacity-30 disabled:cursor-not-allowed"
                              />
                            </div>
                        </div>
                      );
                  })}
                 </div>
              </div>

              {/* Gap Income Result */}
              <div className="bg-gradient-to-r from-green-700 to-green-600 text-white p-6 rounded-xl text-center shadow-lg border border-green-500">
                   <div className="grid grid-cols-2 gap-2 text-sm opacity-90 mb-4 border-b border-green-400 pb-2">
                        <div className="text-left text-green-100">Total Team Sales (Books)</div>
                        <div className="text-right font-bold text-yellow-300">{gapData.totalBooks}</div>
                   </div>
                  <p className="text-sm font-bold opacity-80 mb-1 uppercase tracking-wider">
                    Total Gap Income
                  </p>
                  <div className="flex items-center justify-center gap-2">
                    <Wallet className="w-6 h-6 text-yellow-300"/>
                    <p className="text-3xl font-extrabold text-white">₹{gapData.totalNet.toFixed(0)}</p>
                  </div>
              </div>

            </div>

          </div>
          
          <div className="text-center mt-8 max-w-2xl mx-auto">
            <p className="text-gray-400 text-sm bg-gray-800 p-4 rounded-lg border border-yellow-500/30 shadow-lg">
              * <strong>महत्वपूर्ण नोट:</strong> नेट इनकम आपको 5% टीडीएस और 5% Admin चार्ज काटकर बैंक मे ट्रांसफर कर दी जाएगी।
            </p>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 text-gray-400 py-8 px-4 text-center">
        <p className="mb-2">HTM GROUPS &copy; 2024. All Rights Reserved.</p>
        <p className="text-sm">लेखक: हिम्मत सिंह राठौर</p>
      </footer>
    </div>
  );
};

export default App;