/* global React */
const NC = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  goldDark: '#9E7B4B',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  white: 'rgb(255,255,255)'
};

// Meaning of each vibration — short, evocative paragraphs.
const VIBRATION_MEANINGS = {
  1: {
    title: 'Wibracja 1 — Pionier',
    body: 'Wnosisz inicjatywę, niezależność i odwagę zaczynania od nowa. To energia lidera, który toruje własną ścieżkę. Twoją lekcją jest zaufanie sobie, swoim decyzjom i odwadze podążania w stronę celu — nawet wtedy, gdy nikt jeszcze tej drogi nie przeszedł.'
  },
  2: {
    title: 'Wibracja 2 — Dyplomata',
    body: 'Twoją mocą jest wrażliwość, intuicja i umiejętność łączenia ludzi. Działasz przez współpracę i równowagę, a nie konfrontację. Twoja lekcja to nauczenie się dbania o własne potrzeby — nie tylko o potrzeby innych.'
  },
  3: {
    title: 'Wibracja 3 — Twórca',
    body: 'Energia ekspresji, radości i kreatywności. Przyciągasz uwagę, masz dar słowa i potrafisz inspirować. Twoja lekcja to skupienie — uczysz się, jak wybierać jeden kierunek zamiast rozpraszać siłę na zbyt wiele rzeczy naraz.'
  },
  4: {
    title: 'Wibracja 4 — Budowniczy',
    body: 'Stabilność, porządek i konsekwencja to Twoje narzędzia. Tworzysz fundamenty, które wytrzymują próbę czasu. Twoją lekcją jest otwartość — nauka, że nie wszystko da się zaplanować i że spontaniczność też ma swoją wartość.'
  },
  5: {
    title: 'Wibracja 5 — Podróżnik',
    body: 'Wolność, zmiana, ciekawość świata — to Twój żywioł. Potrzebujesz przestrzeni i ruchu, by się rozwijać. Twoją lekcją jest dyscyplina — odkrycie, że prawdziwa wolność rodzi się ze świadomych wyborów, a nie z ucieczki.'
  },
  6: {
    title: 'Wibracja 6 — Opiekun',
    body: 'Miłość, harmonia, odpowiedzialność za bliskich — to Twoje wartości. Masz dar troski i tworzenia ciepłego domu. Twoją lekcją jest równowaga — uczysz się dawać bez zatracania siebie i przyjmować z otwartością.'
  },
  7: {
    title: 'Wibracja 7 — Poszukiwacz',
    body: 'Głębia, refleksja, zainteresowanie tajemnicą życia. Potrzebujesz samotności, by usłyszeć własną intuicję. Twoja lekcja to zaufanie — nauka, że wiedzy szuka się także sercem, nie tylko umysłem.'
  },
  8: {
    title: 'Wibracja 8 — Strateg',
    body: 'Siła, autorytet, umiejętność tworzenia obfitości. Masz naturalny talent do zarządzania, finansów i wpływania na rzeczywistość. Twoją lekcją jest pokora — odkrycie, że prawdziwa moc rośnie wtedy, gdy służy czemuś większemu niż Ty sam.'
  },
  9: {
    title: 'Wibracja 9 — Mędrzec',
    body: 'Empatia, szerokie spojrzenie, duch służby. Twoje życie często prowadzi przez doświadczenia, które uczą głębokiego współczucia. Twoja lekcja to puszczanie — sztuka kończenia tego, co przestało służyć, by zrobić miejsce dla nowego.'
  },
  11: {
    title: 'Wibracja Mistrzowska 11 — Wizjoner',
    body: 'Jesteś kanałem dla intuicji i inspiracji. Niesiesz w sobie wrażliwość większą niż przeciętna — i równie wielki potencjał duchowego oddziaływania. Twoją lekcją jest opanowanie wewnętrznego napięcia i odważne korzystanie z daru widzenia więcej.'
  },
  22: {
    title: 'Wibracja Mistrzowska 22 — Budowniczy Świata',
    body: 'Łączysz duchową wizję z praktycznym działaniem. Potrafisz urzeczywistniać rzeczy, które innym wydają się nieosiągalne. Twoją lekcją jest wytrwałość — nauka pracy z tą energią bez ulegania jej ciężarowi.'
  },
  33: {
    title: 'Wibracja Mistrzowska 33 — Nauczyciel',
    body: 'Najwyższa wibracja miłości bezwarunkowej i służby. Niesiesz dar uzdrawiania, inspirowania i prowadzenia innych. Twoją lekcją jest pamięć o sobie — uczysz się, że dbanie o siebie jest pierwszym krokiem do dbania o świat.'
  }
};

function sumDigits(n) {
  return String(n).split('').reduce((s, d) => s + Number(d), 0);
}

// Reduce a number to a single digit, preserving master numbers 11, 22, 33.
function reduceToVibration(n) {
  while (n > 9 && n !== 11 && n !== 22 && n !== 33) {
    n = sumDigits(n);
  }
  return n;
}

function computeLifePath(day, month, year) {
  const d = parseInt(day, 10);
  const mo = parseInt(month, 10);
  const y = parseInt(year, 10);
  if (!d || !mo || !y) return null;
  if (d < 1 || d > 31 || mo < 1 || mo > 12 || y < 1900 || y > 2100) return null;
  const total = sumDigits(d) + sumDigits(mo) + sumDigits(y);
  return reduceToVibration(total);
}

function NumerologyCalculator() {
  const [day, setDay] = React.useState('');
  const [month, setMonth] = React.useState('');
  const [year, setYear] = React.useState('');
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    if (!day || !month || !year) {
      setError('Wybierz pełną datę urodzenia.');
      setResult(null);
      return;
    }
    const lp = computeLifePath(day, month, year);
    if (lp == null) {
      setError('Nie udało się obliczyć — sprawdź wybraną datę.');
      setResult(null);
      return;
    }
    setError('');
    setResult(lp);
  };

  const meaning = result != null ? VIBRATION_MEANINGS[result] : null;

  const months = [
    'styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec',
    'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień'
  ];
  const days = Array.from({ length: 31 }, (_, i) => i + 1);
  const currentYear = new Date().getFullYear();
  const years = Array.from({ length: currentYear - 1900 + 1 }, (_, i) => currentYear - i);

  const selectStyle = {
    padding: '14px 18px', borderRadius: 8,
    background: 'rgba(21,19,49,0.6)',
    border: `1px solid ${NC.muted}`,
    fontFamily: 'Nunito', fontSize: 16, color: NC.white,
    outline: 'none', transition: 'border-color .2s',
    appearance: 'none', WebkitAppearance: 'none',
    width: '100%', cursor: 'pointer'
  };

  return (
    <section style={{
      position: 'relative', background: NC.bg,
      borderTop: `1px solid ${NC.muted}`, borderBottom: `1px solid ${NC.muted}`,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      <div style={{ maxWidth: 1312, margin: '0 auto', padding: '0 40px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-start'
        }}>
          {/* Left: heading + form */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
              letterSpacing: '0.2em', color: NC.muted
            }}>KALKULATOR NUMEROLOGICZNY</div>
            <h2 style={{
              margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
              lineHeight: 1.2, letterSpacing: '-0.022em', color: NC.white
            }}>Sprawdź swoją wibrację<br />drogi życia</h2>
            <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6,
              color: NC.lavender
            }}>Wybierz swoją datę urodzenia, a w kilka sekund poznasz cyfrę, która prowadzi Cię przez życie. To pierwszy, podstawowy klucz do zrozumienia siebie z perspektywy numerologii.</p>

            <form onSubmit={onSubmit} style={{
              marginTop: 16,
              display: 'flex', flexDirection: 'column', gap: 16
            }}>
              <span style={{
                fontFamily: 'Nunito', fontSize: 13, letterSpacing: '0.15em',
                textTransform: 'uppercase', color: NC.muted, fontWeight: 600
              }}>Data urodzenia</span>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 12
              }}>
                <select value={day} onChange={(e) => setDay(e.target.value)} style={selectStyle}>
                  <option value="">Dzień</option>
                  {days.map((d) => <option key={d} value={d}>{d}</option>)}
                </select>
                <select value={month} onChange={(e) => setMonth(e.target.value)} style={selectStyle}>
                  <option value="">Miesiąc</option>
                  {months.map((m, i) => <option key={i} value={i + 1}>{m}</option>)}
                </select>
                <select value={year} onChange={(e) => setYear(e.target.value)} style={selectStyle}>
                  <option value="">Rok</option>
                  {years.map((y) => <option key={y} value={y}>{y}</option>)}
                </select>
              </div>
              {error &&
                <div style={{ fontFamily: 'Nunito', fontSize: 14, color: '#f49b9b' }}>{error}</div>
              }
              <div style={{ display: 'flex' }}>
                <BtnMain>Oblicz wibrację</BtnMain>
              </div>
            </form>
          </div>

          {/* Right: result panel (or placeholder) */}
          <div style={{
            minHeight: 360,
            padding: '40px 36px',
            borderRadius: 16,
            border: `1px solid ${NC.muted}`,
            background: 'rgba(21,19,49,0.45)',
            display: 'flex', flexDirection: 'column', justifyContent: 'center'
          }}>
            {meaning ?
              <>
                <div style={{
                  fontFamily: 'Nunito', fontSize: 13, letterSpacing: '0.2em',
                  textTransform: 'uppercase', color: NC.muted, marginBottom: 16
                }}>Twoja wibracja drogi życia</div>
                <div style={{
                  fontFamily: 'Playfair Display', fontSize: 96, fontWeight: 400,
                  lineHeight: 1, color: NC.gold, letterSpacing: '-0.02em',
                  marginBottom: 20
                }}>{result}</div>
                <h3 style={{
                  margin: '0 0 12px', fontFamily: 'Playfair Display', fontWeight: 400,
                  fontSize: 28, color: NC.white, letterSpacing: '-0.022em'
                }}>{meaning.title}</h3>
                <p style={{
                  margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.7,
                  color: NC.lavender
                }}>{meaning.body}</p>
                <div style={{
                  marginTop: 28, paddingTop: 24,
                  borderTop: `1px solid ${NC.muted}`,
                  display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start'
                }}>
                  <p style={{
                    margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.65,
                    color: NC.lavender
                  }}>To dopiero początek Twojej numerologicznej mapy. <span style={{ color: NC.white }}>Portret numerologiczny</span> łączy datę urodzenia ze wszystkimi imionami i nazwiskami, by pokazać Ci pełny obraz: ścieżkę, talenty, lekcje, cykle życia i wzmacniające imię — wielowarstwowy materiał, który zostaje z Tobą na lata.</p>
                  <BtnMain href="portretnumerologiczny.html">Zamów pełny portret numerologiczny</BtnMain>
                </div>
              </> :
              <div style={{
                display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start'
              }}>
                <div style={{
                  fontFamily: 'Playfair Display', fontSize: 96, fontWeight: 400,
                  lineHeight: 1, color: NC.muted, opacity: 0.4
                }}>?</div>
                <p style={{
                  margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.65,
                  color: NC.muted, maxWidth: 380
                }}>Wybierz datę urodzenia po lewej stronie i kliknij „Oblicz wibrację", aby zobaczyć tutaj swój wynik wraz z opisem.</p>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, { NumerologyCalculator });