import React, { useState, useEffect } from 'react';
import { 
  Dna, 
  Activity, 
  ChevronDown, 
  ChevronUp, 
  Gauge, 
  Flame, 
  TrendingUp,
  Move,
  Clock,
  Droplets,
  AlertTriangle,
  CreditCard,
  CheckCircle2,
  Zap,
  Target,
  ShieldCheck,
  Star,
  Lock,
  ArrowRight,
  RotateCcw
} from 'lucide-react';

const LEMON_SQUEEZY_URL = "https://your-store.lemonsqueezy.com/checkout/buy/your-product-id"; // REPLACE WITH YOUR LINK

const playSound = (type) => {
  try {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.connect(gain);
    gain.connect(ctx.destination);
    osc.frequency.setValueAtTime(type === 'start' ? 880 : 440, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
    osc.start(); 
    osc.stop(ctx.currentTime + 0.5);
  } catch(e) {}
};

const WelcomeScreen = ({ onJoin }) => (
  <div className="min-h-screen w-full bg-slate-950 text-white flex flex-col items-center p-6 pt-12 pb-24 relative overflow-y-auto">
    <div className="w-20 h-20 bg-emerald-500/20 rounded-[2rem] flex items-center justify-center mb-8 shadow-[0_0_30px_rgba(16,185,129,0.2)] border border-emerald-500/20 shrink-0">
      <Dna className="w-10 h-10 text-emerald-400" />
    </div>
    
    <h1 className="text-4xl font-black text-center italic uppercase leading-none mb-4 tracking-tighter shrink-0">
      BIOX <span className="text-emerald-500">ELITE</span>
    </h1>
    <p className="text-emerald-400 font-bold uppercase tracking-[0.3em] text-[10px] mb-8 shrink-0">Bio-Hacking Growth Protocol</p>

    {/* FEATURE CARDS */}
    <div className="grid grid-cols-1 gap-3 w-full max-w-sm mb-8 shrink-0">
      <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center gap-4">
        <div className="w-10 h-10 rounded-xl bg-emerald-500/10 flex items-center justify-center shrink-0">
          <TrendingUp className="w-5 h-5 text-emerald-400" />
        </div>
        <div>
          <h3 className="text-sm font-black uppercase italic">Permanent Length</h3>
          <p className="text-[11px] text-slate-400">Trigger cellular expansion in the tunica tissue.</p>
        </div>
      </div>

      <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center gap-4">
        <div className="w-10 h-10 rounded-xl bg-blue-500/10 flex items-center justify-center shrink-0">
          <Zap className="w-5 h-5 text-blue-400" />
        </div>
        <div>
          <h3 className="text-sm font-black uppercase italic">Maximum EQ</h3>
          <p className="text-[11px] text-slate-400">Optimize vascular capacity for rock-solid erections.</p>
        </div>
      </div>

      <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center gap-4">
        <div className="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center shrink-0">
          <RotateCcw className="w-5 h-5 text-purple-400" />
        </div>
        <div>
          <h3 className="text-sm font-black uppercase italic">Curvature Correction</h3>
          <p className="text-[11px] text-slate-400">Realign collagen fibers to straighten structure.</p>
        </div>
      </div>

      <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl flex items-center gap-4">
        <div className="w-10 h-10 rounded-xl bg-orange-500/10 flex items-center justify-center shrink-0">
          <Target className="w-5 h-5 text-orange-400" />
        </div>
        <div>
          <h3 className="text-sm font-black uppercase italic">Precision Tracking</h3>
          <p className="text-[11px] text-slate-400">Hit the 13% expansion peak with guided cycles.</p>
        </div>
      </div>
    </div>

    {/* PERSUASIVE PARAGRAPHS */}
    <div className="w-full max-w-sm mb-10 px-2 space-y-4 shrink-0 border-t border-slate-800/50 pt-6 text-center">
      <p className="text-sm text-slate-300 leading-relaxed font-medium">
        Welcome to the BioX Protocol. Most systems fail because they ignore the underlying physiology of tissue expansion. Our method focuses on <span className="text-white font-bold text-emerald-400">permanent lengthening</span> and <span className="text-white font-bold text-emerald-400">correcting curvature</span> by utilizing controlled mechanical tension to induce micro-expansion in the tunica albuginea.
      </p>
      <p className="text-sm text-slate-300 leading-relaxed font-medium">
        Simultaneously, we target <span className="text-emerald-400 font-bold">Erection Quality (EQ)</span> through blood-saturation management. By optimizing the internal pressure before applying vacuum tension, we expand the total volume capacity of the chambers.
      </p>
      <p className="italic text-slate-500 text-[10px] mt-2">
        Clinical-grade discipline for seeking to maximize biological potential through science-backed remodeling.
      </p>
    </div>

    {/* PRICING & CONVERSION */}
    <div className="w-full max-w-sm bg-gradient-to-b from-slate-900 to-slate-950 border-t border-emerald-500/50 p-8 rounded-[2.5rem] shadow-2xl text-center relative overflow-hidden shrink-0 mb-20">
        <div className="absolute top-0 right-0 p-4 opacity-10">
            <ShieldCheck className="w-20 h-20 text-emerald-400" />
        </div>
      <p className="text-[10px] font-black uppercase tracking-[0.3em] mb-2 text-emerald-500">Instant Digital Unlock</p>
      <div className="flex justify-center items-baseline gap-1 mb-6">
        <span className="text-4xl font-black text-white">$29.99</span>
        <span className="text-xs text-slate-500 uppercase font-bold tracking-widest">/ Lifetime Access</span>
      </div>
      <button 
        onClick={onJoin}
        className="w-full py-5 bg-emerald-500 text-slate-950 font-black rounded-2xl uppercase tracking-[0.2em] text-sm hover:scale-[1.02] active:scale-95 transition-all shadow-[0_10px_30px_rgba(16,185,129,0.4)] mb-4 flex items-center justify-center gap-2"
      >
        <span>Start My Transformation</span>
      </button>
      <p className="text-[9px] text-slate-500 font-bold uppercase">Join 12,000+ Men Optimizing Their Results</p>
      <div className="mt-4 flex items-center justify-center gap-2 opacity-50">
        <CheckCircle2 className="w-3 h-3 text-emerald-500" />
        <span className="text-[8px] uppercase font-bold tracking-widest text-slate-400">100% Secure & Private</span>
      </div>
    </div>
  </div>
);

const Stopwatch = ({ label, maxMinutes }) => {
  const [seconds, setSeconds] = useState(0);
  const [isActive, setIsActive] = useState(false);
  const maxSeconds = maxMinutes * 60;

  useEffect(() => {
    let interval = null;
    if (isActive && seconds < maxSeconds) {
      interval = setInterval(() => setSeconds(s => s + 1), 1000);
    } else if (seconds >= maxSeconds) {
      setIsActive(false);
      clearInterval(interval);
    }
    return () => clearInterval(interval);
  }, [isActive, seconds, maxSeconds]);

  const formatTime = (s) => {
    const mins = Math.floor(s / 60);
    const secs = s % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <div className="bg-slate-950/50 border border-slate-800 rounded-2xl p-4 mt-2 shadow-inner">
      <div className="flex justify-between items-center mb-2">
        <span className="text-[10px] font-black uppercase text-slate-500 tracking-widest flex items-center gap-1">
          <Clock className="w-3 h-3" /> {label} (Max {maxMinutes}m)
        </span>
        <div className="flex gap-2">
          <button onClick={() => { setSeconds(0); setIsActive(false); }} className="text-[10px] font-bold px-3 py-1 rounded-full bg-slate-800 text-slate-400 hover:text-white transition-all">RESET</button>
          <button onClick={() => { if (seconds < maxSeconds) { setIsActive(!isActive); if(!isActive) playSound('start'); } }} className={`text-[10px] font-bold px-4 py-1 rounded-full transition-all ${isActive ? 'bg-red-500/10 text-red-500' : 'bg-emerald-500 text-slate-950 hover:bg-emerald-400'} ${seconds >= maxSeconds ? 'opacity-50 grayscale' : ''}`}>
            {isActive ? 'STOP' : 'START'}
          </button>
        </div>
      </div>
      <div className={`text-4xl font-black italic text-center ${seconds >= maxSeconds ? 'text-amber-500' : 'text-white'}`}>{formatTime(seconds)}</div>
    </div>
  );
};

const Timer = ({ initialMinutes, label, isLoop = false, totalCycles = 1 }) => {
  const [seconds, setSeconds] = useState(initialMinutes * 60);
  const [isActive, setIsActive] = useState(false);
  const [currentCycle, setCurrentCycle] = useState(1);
  const [isResting, setIsResting] = useState(false);

  useEffect(() => {
    let interval = null;
    if (isActive && seconds > 0) {
      interval = setInterval(() => setSeconds(s => s - 1), 1000);
    } else if (isActive && seconds === 0) {
      playSound('end');
      if (isLoop && !isResting && currentCycle < totalCycles) {
        setIsResting(true); setSeconds(60); 
      } else if (isLoop && isResting) {
        setIsResting(false); setCurrentCycle(c => c + 1); setSeconds(initialMinutes * 60); playSound('start');
      } else { setIsActive(false); }
    }
    return () => clearInterval(interval);
  }, [isActive, seconds, isResting, currentCycle, isLoop, totalCycles, initialMinutes]);

  const formatTime = (s) => `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;

  return (
    <div className="bg-slate-950/50 border border-slate-800 rounded-2xl p-4 mt-2 shadow-inner">
      <div className="flex justify-between items-center mb-2">
        <span className="text-[10px] font-black uppercase text-slate-500 tracking-widest">
          {isLoop && <span className="text-emerald-400 mr-2">Cycle {currentCycle}/{totalCycles}</span>}
          {isResting ? 'Recovery' : label}
        </span>
        <button onClick={() => { setIsActive(!isActive); if(!isActive) playSound('start'); }} className={`text-[10px] font-bold px-4 py-1 rounded-full transition-all ${isActive ? 'bg-red-500/10 text-red-500' : 'bg-emerald-500 text-slate-950 hover:bg-emerald-400'}`}>
          {isActive ? 'PAUSE' : 'START'}
        </button>
      </div>
      <div className={`text-4xl font-black italic text-center ${isResting ? 'text-orange-500' : 'text-white'}`}>{formatTime(seconds)}</div>
    </div>
  );
};

const App = () => {
  const [isUnlocked, setIsUnlocked] = useState(true);
  const [activeTab, setActiveTab] = useState('system');
  const [unit, setUnit] = useState('cm');
  const [currentVal, setCurrentVal] = useState(15.5);
  const [openSection, setOpenSection] = useState('manual');
  const [isEditing, setIsEditing] = useState(false);
  const [bonusActive, setBonusActive] = useState(false);

  const baselineCM = 15.5; 
  const target10CM = 17.1;
  const target13CM = 17.5;

  const toUnit = (val) => unit === 'cm' ? val : (val / 2.54);
  const fromUnit = (val) => unit === 'cm' ? val : (val * 2.54);
  const displayVal = toUnit(currentVal).toFixed(unit === 'cm' ? 1 : 2);
  const progress = Math.min(Math.max(((currentVal - baselineCM) / (target13CM - baselineCM)) * 100, 5), 100);

  const handlePurchase = () => {
    // Redirects to your LemonSqueezy Checkout
    window.location.href = LEMON_SQUEEZY_URL;
  };

  // Ensure Welcome Screen is rendered as a clean block
  if (!isUnlocked) {
    return <WelcomeScreen onJoin={handlePurchase} />;
  }

  return (
    <div className="min-h-screen bg-slate-950 text-white font-sans overflow-x-hidden relative">
      <header className="fixed top-0 w-full bg-slate-950/90 backdrop-blur-md z-[100] p-6 flex justify-between items-center border-b border-slate-800/50">
        <div>
          <h1 className="text-xl font-black tracking-tighter flex items-center gap-1">
            BIOX <span className="text-emerald-400">LAB</span>
          </h1>
        </div>
        <button 
          onClick={() => setUnit(unit === 'cm' ? 'inch' : 'cm')}
          className="bg-slate-900 border border-slate-800 text-[10px] font-bold text-emerald-400 px-4 py-1 rounded-full"
        >
          {unit.toUpperCase()}
        </button>
      </header>

      <main className="pt-28 px-4 max-w-md mx-auto space-y-4 pb-40">
        {activeTab === 'system' ? (
          <>
            <div className="bg-slate-900/40 border border-slate-800 rounded-[2.5rem] p-8 shadow-2xl">
              <h2 className="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] mb-8 text-center">Current Saturation Peak</h2>
              <div className="text-center mb-10">
                <div className="relative inline-flex items-baseline gap-2 cursor-pointer" onClick={() => setIsEditing(true)}>
                  {isEditing ? (
                    <input 
                      type="number" step="0.1" autoFocus 
                      className="bg-slate-800 border-2 border-emerald-500 rounded-xl text-6xl font-black text-white w-40 text-center outline-none" 
                      value={toUnit(currentVal).toFixed(unit === 'cm' ? 1 : 2)} 
                      onChange={(e) => setCurrentVal(fromUnit(parseFloat(e.target.value) || 0))} 
                      onBlur={() => setIsEditing(false)} 
                    />
                  ) : (
                    <><span className="text-7xl font-black italic tracking-tighter text-white">{displayVal}</span><span className="text-slate-500 font-bold uppercase text-2xl">{unit}</span></>
                  )}
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3 mb-10">
                <div className={`p-4 rounded-2xl border transition-all ${currentVal >= target10CM ? 'bg-emerald-500/10 border-emerald-500/40' : 'bg-slate-950/40 border-slate-800'}`}>
                  <div className="text-[9px] font-black text-emerald-400 uppercase tracking-widest text-center mb-1">Expansion Target</div>
                  <div className="text-lg font-black text-center">{toUnit(target10CM).toFixed(unit === 'cm' ? 1 : 2)} {unit.toUpperCase()}</div>
                </div>
                <div className={`p-4 rounded-2xl border transition-all ${currentVal >= target13CM ? 'bg-emerald-500/10 border-emerald-500/40' : 'bg-slate-950/40 border-slate-800'}`}>
                  <div className="text-[9px] font-black text-slate-500 uppercase tracking-widest text-center mb-1">Elite Threshold</div>
                  <div className="text-lg font-black text-center">{toUnit(target13CM).toFixed(unit === 'cm' ? 1 : 2)} {unit.toUpperCase()}</div>
                </div>
              </div>
              <div className="h-3 bg-slate-950 rounded-full overflow-hidden border border-slate-800">
                <div className="h-full bg-emerald-500 transition-all duration-1000 shadow-[0_0_15px_rgba(16,185,129,0.5)]" style={{ width: `${progress}%` }}></div>
              </div>
            </div>

            {/* PROTOCOL SECTIONS */}
            <div className="bg-slate-900/40 border border-slate-800 rounded-[1.5rem] overflow-hidden">
              <button onClick={() => setOpenSection(openSection === 'manual' ? null : 'manual')} className="w-full p-5 flex items-center justify-between">
                <div className="flex items-center gap-4 text-left">
                  <div className="w-12 h-12 rounded-xl bg-slate-800 flex items-center justify-center text-slate-400"><Move className="w-6 h-6" /></div>
                  <div><h4 className="text-sm font-bold">1. Manual Tension</h4><p className="text-[9px] text-slate-500 font-black uppercase tracking-widest italic">Gently Tug & Stretch</p></div>
                </div>
                {openSection === 'manual' ? <ChevronUp className="w-4 h-4 text-slate-600" /> : <ChevronDown className="w-4 h-4 text-slate-600" />}
              </button>
              <div className={`collapsible-content ${openSection === 'manual' ? 'open' : ''}`}>
                <div className="px-5 pb-5 pt-2 text-[12px] text-slate-300 space-y-3 border-t border-slate-800/50">
                  <p className="leading-relaxed">Gently tug and stretch in all 5 directions. Focus on structural lengthening.</p>
                  <Stopwatch label="Active Tension" maxMinutes={45} />
                </div>
              </div>
            </div>

            <div className="bg-orange-500/5 border border-orange-500/20 rounded-[1.5rem] overflow-hidden">
              <button onClick={() => setOpenSection(openSection === 'volume' ? null : 'volume')} className="w-full p-5 flex items-center justify-between">
                <div className="flex items-center gap-4 text-left">
                  <div className="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center text-orange-500"><Flame className="w-6 h-6" /></div>
                  <div><h4 className="text-sm font-bold">2. Bio-Volumizing</h4><p className="text-[9px] text-orange-500 font-black uppercase tracking-widest italic">EQ Saturation</p></div>
                </div>
                {openSection === 'volume' ? <ChevronUp className="w-4 h-4 text-slate-600" /> : <ChevronDown className="w-4 h-4 text-slate-600" />}
              </button>
              <div className={`collapsible-content ${openSection === 'volume' ? 'open' : ''}`}>
                <div className="px-5 pb-5 pt-2 text-[12px] text-slate-300 space-y-4 border-t border-orange-500/10">
                  <div className="bg-red-500/10 border border-red-500/30 p-2 rounded-xl text-red-200 font-black italic text-center uppercase text-[10px]">Strict: Do Not Ejaculate</div>
                  <div className="bg-slate-900/80 p-3 rounded-xl border border-slate-800 space-y-2">
                    <p className="text-[11px]"><span className="text-orange-400 font-bold uppercase">Technique:</span> Reach high arousal, then hold full erection. Never ejaculate during this phase.</p>
                  </div>
                  <Timer initialMinutes={10} label="Saturation Maintenance" />
                </div>
              </div>
            </div>

            <div className="bg-emerald-500/5 border border-emerald-500/30 rounded-[1.5rem] overflow-hidden">
              <button onClick={() => setOpenSection(openSection === 'ved' ? null : 'ved')} className="w-full p-5 flex items-center justify-between">
                <div className="flex items-center gap-4 text-left">
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/20 flex items-center justify-center text-emerald-400"><Gauge className="w-6 h-6" /></div>
                  <div><h4 className="text-sm font-black italic uppercase">3. Expansion Loop</h4><p className="text-[9px] text-emerald-500 font-black uppercase tracking-widest italic">Mechanical Lengthening</p></div>
                </div>
                {openSection === 'ved' ? <ChevronUp className="w-4 h-4 text-emerald-400" /> : <ChevronDown className="w-4 h-4 text-emerald-400" />}
              </button>
              <div className={`collapsible-content ${openSection === 'ved' ? 'open' : ''}`}>
                <div className="px-5 pb-5 pt-2 space-y-4 border-t border-emerald-500/20">
                  <div className="bg-emerald-950/40 p-3 rounded-xl border border-emerald-900/50 space-y-2">
                    <p className="text-[11px] text-emerald-100">Add a small amount of water and more lubricant when necessary. Re-apply between cycles.</p>
                  </div>
                  <div className="flex justify-between items-center bg-slate-950 p-3 rounded-xl border border-slate-800" onClick={() => setBonusActive(!bonusActive)}>
                    <span className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Enable Pro Recovery Cycle</span>
                    <div className={`w-10 h-5 rounded-full relative transition-colors ${bonusActive ? 'bg-emerald-600' : 'bg-slate-700'}`}>
                      <div className="absolute top-0.5 w-4 h-4 bg-white rounded-full transition-all duration-200" style={{left: bonusActive ? '22px' : '2px'}}></div>
                    </div>
                  </div>
                  <Timer initialMinutes={3} isLoop={true} totalCycles={bonusActive ? 6 : 5} label="Expansion Phase" />
                </div>
              </div>
            </div>
          </>
        ) : (
          <div className="animate-in fade-in duration-500 space-y-6">
            <div className="bg-slate-900 border border-slate-800 rounded-[2.5rem] p-8 text-center">
              <div className="w-20 h-20 bg-emerald-500/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-emerald-500/20">
                <CheckCircle2 className="w-10 h-10 text-emerald-500" />
              </div>
              <h3 className="text-xl font-black uppercase tracking-widest italic">Elite License Active</h3>
            </div>
          </div>
        )}
      </main>

      <nav className="fixed bottom-8 w-full px-6 z-[100]">
        <div className="bg-slate-900/95 backdrop-blur-xl border border-slate-800 rounded-full p-3 flex justify-around shadow-2xl max-w-sm mx-auto">
          <button onClick={() => setActiveTab('system')} className={`flex flex-col items-center gap-1 transition-all ${activeTab === 'system' ? 'text-emerald-400' : 'text-slate-600'}`}>
            <Dna className="w-5 h-5" /><span className="text-[8px] font-black uppercase">Protocol</span>
          </button>
          <button onClick={() => setActiveTab('billing')} className={`flex flex-col items-center gap-1 transition-all ${activeTab === 'billing' ? 'text-emerald-400' : 'text-slate-600'}`}>
            <CreditCard className="w-5 h-5" /><span className="text-[8px] font-black uppercase">License</span>
          </button>
        </div>
      </nav>

      <style>{`
        .collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
        .collapsible-content.open { max-height: 1200px; transition: max-height 0.5s ease-in; }
      `}</style>
    </div>
  );
};

export default App;