// calculator.jsx — Calculator câștiguri

const { useState: useStateCa, useMemo: useMemoCa } = React;

const LEVELS = [
  { id: 'incepator', ico: '🌱', label: 'Începător', sub: '0–1 luni', dpm: 800 },
  { id: 'intermediar', ico: '🌿', label: 'Intermediar', sub: '1–3 luni', dpm: 2500 },
  { id: 'avansat', ico: '🌳', label: 'Avansat', sub: '3–6 luni', dpm: 6000 },
  { id: 'top', ico: '🏆', label: 'Top tier', sub: '+6 luni', dpm: 15000 },
];
const CATEGORIES = ['Lifestyle', 'Gaming', 'Music', 'Talk Show', 'Beauty', 'Fashion', 'Other'];
const CAT_MULT = { 'Lifestyle': 1.05, 'Gaming': 1.0, 'Music': 1.10, 'Talk Show': 1.08, 'Beauty': 1.12, 'Fashion': 1.06, 'Other': 0.95 };
const COUNTRIES = [
  { code: 'RO', flag: '🇷🇴', mult: 1.0 }, { code: 'UK', flag: '🇬🇧', mult: 2.4 },
  { code: 'DE', flag: '🇩🇪', mult: 2.1 }, { code: 'AT', flag: '🇦🇹', mult: 2.0 },
  { code: 'CH', flag: '🇨🇭', mult: 2.6 }, { code: 'IT', flag: '🇮🇹', mult: 1.7 },
  { code: 'ES', flag: '🇪🇸', mult: 1.5 }, { code: 'UAE', flag: '🇦🇪', mult: 2.8 },
];

function CalculatorPage({ onNav }) {
  return (
    <div className="page">
      <CalcHero onNav={onNav} />
      <CalcMain />
      <CalcCTA onNav={onNav} />
    </div>
  );
}

function CalcHero({ onNav }) {
  return (
    <section style={{ minHeight: '40vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh /><Particles count={28} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal><div className="pill" style={{ marginBottom: 20 }}><span className="dot" /><span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>CALCULATOR CÂȘTIGURI</span></div></Reveal>
        <Reveal delay={120}><h1 className="display" style={{ fontSize: 'clamp(40px, 6vw, 84px)', margin: 0, maxWidth: 1100, letterSpacing: '-0.04em' }}>Vezi cât poți câștiga ca <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>TikTok Live Streamer</span>.</h1></Reveal>
        <Reveal delay={220}><p style={{ fontSize: 'clamp(17px, 1.3vw, 21px)', color: 'var(--txt-2)', marginTop: 24, maxWidth: 720, lineHeight: 1.55 }}>Pe baza datelor reale de la <strong style={{ color: 'var(--txt-0)' }}>5.000+ creatori</strong> din portofoliul nostru.</p></Reveal>
        <Reveal delay={260}>
          <div style={{ marginTop: 28 }}><BackButton onNav={onNav} /></div>
        </Reveal>
      </div>
    </section>
  );
}

function CalcMain() {
  const [hours, setHours] = useStateCa(4);
  const [days, setDays] = useStateCa(5);
  const [level, setLevel] = useStateCa('intermediar');
  const [cat, setCat] = useStateCa('Lifestyle');
  const [country, setCountry] = useStateCa('RO');

  const result = useMemoCa(() => {
    const lvl = LEVELS.find(l => l.id === level);
    const ct = COUNTRIES.find(c => c.code === country);
    const monthlyHours = hours * days * 4.3;
    const baseDiamonds = monthlyHours * lvl.dpm;
    const monthlyDiamonds = Math.round(baseDiamonds * ct.mult * (CAT_MULT[cat] || 1));
    const earningsRON = Math.round(monthlyDiamonds * 0.012);
    const earningsEUR = Math.round(earningsRON / 5);
    const points4u = Math.round(monthlyHours * 12);
    const hofProb = Math.min(99, Math.round((monthlyDiamonds / 1000000) * 8 + (lvl.dpm / 200)));
    return { monthlyHours: Math.round(monthlyHours), monthlyDiamonds, earningsRON, earningsEUR, points4u, hofProb };
  }, [hours, days, level, cat, country]);

  const chartData = useMemoCa(() => {
    const arr = [];
    for (let i = 0; i < 6; i++) {
      const factor = 0.55 + (i / 5) * 0.55 + (Math.sin(i * 1.3) * 0.04);
      arr.push(Math.round(result.earningsRON * factor));
    }
    return arr;
  }, [result.earningsRON]);
  const maxBar = Math.max(...chartData);

  return (
    <section style={{ padding: '0 0 80px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(24px, 3vw, 40px)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40 }} className="calc-grid">
              <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                <CalcSlider label="Ore de live / zi" value={hours} setter={setHours} min={1} max={12} unit="h" />
                <CalcSlider label="Zile / săptămână" value={days} setter={setDays} min={1} max={7} unit={days === 1 ? 'zi' : 'zile'} />
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.15em', marginBottom: 12 }}>NIVEL EXPERIENȚĂ</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    {LEVELS.map(l => (
                      <button key={l.id} onClick={() => setLevel(l.id)} className="hov" style={{ padding: '14px 16px', borderRadius: 12, border: '.5px solid', borderColor: level === l.id ? 'var(--accent-1)' : 'var(--line)', background: level === l.id ? 'rgba(82,242,15,.10)' : 'transparent', color: 'var(--txt-0)', cursor: 'pointer', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12 }}>
                        <span style={{ fontSize: 22 }}>{l.ico}</span>
                        <div>
                          <div style={{ fontSize: 13, fontWeight: 600 }}>{l.label}</div>
                          <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)' }}>{l.sub}</div>
                        </div>
                      </button>
                    ))}
                  </div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.15em', marginBottom: 12 }}>TIPUL DE CONȚINUT</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                    {CATEGORIES.map(c => (
                      <button key={c} onClick={() => setCat(c)} className="hov" style={{ padding: '8px 14px', borderRadius: 999, border: '.5px solid', borderColor: cat === c ? 'var(--accent-1)' : 'var(--line)', background: cat === c ? 'rgba(82,242,15,.10)' : 'transparent', color: cat === c ? 'var(--accent-1)' : 'var(--txt-2)', cursor: 'pointer', fontSize: 12, fontWeight: 500 }}>{c}</button>
                    ))}
                  </div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.15em', marginBottom: 12 }}>ȚARĂ</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
                    {COUNTRIES.map(c => (
                      <button key={c.code} onClick={() => setCountry(c.code)} className="hov" style={{ padding: '7px 9px', borderRadius: 999, border: '.5px solid', borderColor: country === c.code ? 'var(--accent-1)' : 'var(--line)', background: country === c.code ? 'rgba(82,242,15,.10)' : 'transparent', color: country === c.code ? 'var(--accent-1)' : 'var(--txt-2)', cursor: 'pointer', fontSize: 11, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
                        <span>{c.flag}</span><span>{c.code}</span>
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              <div className="card-glass" style={{ padding: 32, position: 'sticky', top: 100, alignSelf: 'start', border: '.5px solid rgba(82,242,15,.25)', background: 'linear-gradient(180deg, rgba(82,242,15,.06), transparent)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 8 }}>● ESTIMARE CÂȘTIG / LUNĂ</div>
                <div className="display mono" style={{ fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '-0.04em', lineHeight: 1, background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                  <Counter to={result.earningsRON} suffix=" RON" />
                </div>
                <div className="mono" style={{ fontSize: 14, color: 'var(--txt-3)', marginTop: 6 }}>≈ {result.earningsEUR.toLocaleString()} EUR</div>

                <div style={{ marginTop: 28, paddingTop: 24, borderTop: '.5px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <Row ico="💎" label="Diamante estimate" value={`~${result.monthlyDiamonds.toLocaleString()}`} />
                  <Row ico="🏆" label="Probabilitate Hall of Fame" value={`${result.hofProb}%`} />
                </div>

                <div style={{ marginTop: 28, paddingTop: 24, borderTop: '.5px solid var(--line)' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em', marginBottom: 14 }}>EVOLUȚIE 6 LUNI</div>
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 80 }}>
                    {chartData.map((v, i) => (
                      <div key={i} style={{ flex: 1, height: `${(v / maxBar) * 100}%`, minHeight: 6, background: 'linear-gradient(180deg, var(--accent-1), rgba(82,242,15,.3))', borderRadius: '4px 4px 0 0', position: 'relative', boxShadow: '0 0 10px rgba(82,242,15,.3)', transition: 'height .4s ease' }}>
                        <div style={{ position: 'absolute', top: -16, left: 0, right: 0, textAlign: 'center', fontSize: 9, color: 'var(--txt-3)', fontFamily: 'JetBrains Mono, monospace' }}>L{i + 1}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{ marginTop: 24, padding: 12, borderRadius: 8, background: 'rgba(255,215,0,.05)', border: '.5px solid rgba(255,215,0,.15)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <span style={{ fontSize: 14 }}>⚠</span>
                  <p style={{ fontSize: 11, color: 'var(--txt-3)', lineHeight: 1.5, margin: 0 }}>Estimare orientativă pe baza mediei creatorilor 4U cu profil similar. Rezultatele reale variază în funcție de consistență, calitate și factori externi.</p>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr !important; } .calc-grid > div:last-child { position: static !important; } }`}</style>
    </section>
  );
}

function Row({ ico, label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
      <span style={{ fontSize: 13, color: 'var(--txt-2)' }}><span style={{ marginRight: 8 }}>{ico}</span>{label}</span>
      <span className="mono" style={{ fontSize: 14, color: 'var(--txt-0)', fontWeight: 500 }}>{value}</span>
    </div>
  );
}

function CalcSlider({ label, value, setter, min, max, unit }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.15em' }}>{label.toUpperCase()}</span>
        <span className="display mono" style={{ fontSize: 26, color: 'var(--accent-1)', letterSpacing: '-0.02em' }}>{value}{unit ? <span style={{ fontSize: 14, marginLeft: 4, color: 'var(--txt-2)' }}>{unit}</span> : null}</span>
      </div>
      <input
        type="range"
        min={min}
        max={max}
        value={value}
        onChange={(e) => setter(parseInt(e.target.value, 10))}
        onTouchMove={(e) => { if (e.cancelable) e.preventDefault(); }}
        className="calc-range"
      />
      <style>{`
        .calc-range { width: 100%; appearance: none; height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; outline: none; cursor: pointer; touch-action: none; -ms-touch-action: none; }
        .calc-range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-1), #4DC30D); border: 2px solid #0E0E0E; box-shadow: 0 0 16px rgba(82,242,15,.5); cursor: pointer; transition: transform .15s; }
        .calc-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
        .calc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-1), #4DC30D); border: 2px solid #0E0E0E; cursor: pointer; }
      `}</style>
    </div>
  );
}

function CalcCTA({ onNav }) {
  return (
    <section style={{ padding: '60px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.25)' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● PASUL URMĂTOR</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 60px)', margin: '0 0 20px' }}>Estimarea ta arată potențial.<br/>Hai să-l facem realitate.</h2>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 32 }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')}>Înscrie-te acum →</button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.CalculatorPage = CalculatorPage;