/* sections-top.jsx — Nav, Hero with demo, ValueBar, Features — all translated */

/* ---- Flag SVGs ---- */
var FlagNL = function() {
  return (
    <svg width="20" height="14" viewBox="0 0 20 14" style={{borderRadius:2,display:'block'}}>
      <rect y="0" width="20" height="4.67" fill="#AE1C28"/>
      <rect y="4.67" width="20" height="4.67" fill="#FFF"/>
      <rect y="9.33" width="20" height="4.67" fill="#21468B"/>
    </svg>
  );
};
var FlagGB = function() {
  return (
    <svg width="20" height="14" viewBox="0 0 20 14" style={{borderRadius:2,display:'block'}}>
      <rect width="20" height="14" fill="#012169"/>
      <path d="M0 0L20 14M20 0L0 14" stroke="#FFF" strokeWidth="2.5"/>
      <path d="M0 0L20 14M20 0L0 14" stroke="#C8102E" strokeWidth="1.5"/>
      <rect x="8.5" width="3" height="14" fill="#FFF"/>
      <rect y="5" width="20" height="4" fill="#FFF"/>
      <rect x="9" width="2" height="14" fill="#C8102E"/>
      <rect y="5.5" width="20" height="3" fill="#C8102E"/>
    </svg>
  );
};

/* ---- Navigation ---- */
function Nav() {
  var lang = React.useContext(window.LangCtx);
  var setLang = React.useContext(window.SetLangCtx);
  var t = window.T[lang].nav;
  var scrolledRef = React.useRef(false);
  var ref2 = React.useState(false);
  var scrolled = ref2[0]; var setScrolled = ref2[1];

  React.useEffect(function() {
    var onScroll = function() {
      var s = window.scrollY > 20;
      if (s !== scrolledRef.current) { scrolledRef.current = s; setScrolled(s); }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return function() { window.removeEventListener('scroll', onScroll); };
  }, []);

  return (
    <nav className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="nav__inner">
        <a href="#" className="nav__logo">
          <span className="logo-cbr">CBR</span>
          <span className="logo-master">Master</span>
        </a>
        <div className="nav__links">
          <a href="#features">{t.features}</a>
          <a href="#exam">{t.howItWorks}</a>
          <a href="#pricing">{t.pricing}</a>
          <a href="#faq">{t.faq}</a>
        </div>
        <div className="nav__cta">
          <div className="lang-toggle">
            <button className={"lang-toggle__btn" + (lang === 'nl' ? " lang-toggle__btn--active" : "")}
              onClick={function(){ setLang('nl'); }} aria-label="Nederlands">
              <FlagNL /> <span>NL</span>
            </button>
            <button className={"lang-toggle__btn" + (lang === 'en' ? " lang-toggle__btn--active" : "")}
              onClick={function(){ setLang('en'); }} aria-label="English">
              <FlagGB /> <span>EN</span>
            </button>
          </div>
          <a href={window.CBR_CONFIG.API_BASE + '/login'} className="btn btn--login">{t.login}</a>
          <button className="btn btn--primary btn--sm" onClick={function(){ window.openSignup(); }}>{t.signup}</button>
        </div>
      </div>
    </nav>
  );
}

/* ---- Animated Exam Demo ---- */
function ExamDemo() {
  var lang = React.useContext(window.LangCtx);
  var questions = window.T[lang].demoQuestions;
  var ref1 = React.useState(0); var qIdx = ref1[0]; var setQIdx = ref1[1];
  var ref2 = React.useState('asking'); var phase = ref2[0]; var setPhase = ref2[1];

  React.useEffect(function() {
    var t = [];
    t.push(setTimeout(function(){ setPhase('answered'); }, 2400));
    t.push(setTimeout(function(){ setPhase('explained'); }, 3200));
    t.push(setTimeout(function(){ setPhase('fading'); }, 6000));
    t.push(setTimeout(function(){ setPhase('asking'); setQIdx(function(i){ return (i + 1) % questions.length; }); }, 6500));
    return function(){ t.forEach(clearTimeout); };
  }, [qIdx, questions.length]);

  var q = questions[qIdx];
  var pct = ((q.num / q.total) * 100).toFixed(0);

  return (
    <div className="browser-frame">
      <div className="browser-frame__bar">
        <div className="browser-frame__dot"></div>
        <div className="browser-frame__dot"></div>
        <div className="browser-frame__dot"></div>
        <div className="browser-frame__url">cbrmaster.nl/practice</div>
      </div>
      <div className="browser-frame__body">
        <div className={"exam-demo" + (phase === 'fading' ? " exam-demo--fading" : "")}>
          <div className="exam-demo__header">
            <span>{lang === 'nl' ? 'Vraag' : 'Question'} {q.num} {lang === 'nl' ? 'van' : 'of'} {q.total}</span>
            <span style={{fontVariantNumeric:'tabular-nums'}}>⏱ {q.time}</span>
          </div>
          <div className="exam-demo__progress">
            <div className="exam-demo__progress-fill" style={{width: pct + '%'}}></div>
          </div>
          <div className="exam-demo__image-placeholder">
            {lang === 'nl' ? 'verkeerssituatie · illustratie' : 'traffic situation · illustration'}
          </div>
          <div className="exam-demo__question">{q.text}</div>
          <div className="exam-demo__options">
            {q.options.map(function(opt, i) {
              var isCorrect = i === q.correct;
              var showCorrect = (phase === 'answered' || phase === 'explained') && isCorrect;
              return (
                <div key={i} className={"exam-demo__option" + (showCorrect ? " exam-demo__option--correct" : "")}>
                  <div className="exam-demo__option-dot">{showCorrect ? '✓' : ''}</div>
                  <span>{opt}</span>
                </div>
              );
            })}
          </div>
          {phase === 'explained' && (
            <div className="exam-demo__explanation">
              <strong>{lang === 'nl' ? 'Correct!' : 'Correct!'}</strong> {q.explanation}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---- Hero ---- */
function Hero() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].hero;
  return (
    <section className="hero">
      <div className="hero__orb hero__orb--1"></div>
      <div className="hero__orb hero__orb--2"></div>
      <div className="hero__orb hero__orb--3"></div>
      <div className="container">
        <div className="hero__inner">
          <h1 className="hero__title">
            {t.titleLine1}<br />{t.titleLine2}{' '}
            <span className="hero__title-accent">{t.titleAccent}</span>
          </h1>
          <p className="hero__subtitle">{t.subtitle}</p>
          <div className="hero__actions">
            <button className="btn btn--primary btn--lg" onClick={function(){ window.openSignup(); }}>{t.ctaPrimary}</button>
            <a href="#features" className="btn btn--ghost btn--lg">{t.ctaSecondary}</a>
          </div>
          <div className="hero__demo">
            <ExamDemo />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Value Bar (replaces Social Proof) ---- */
function ValueBar() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].valueBar;
  return (
    <section className="value-bar">
      <div className="container">
        <div className="value-bar__inner">
          <span className="value-bar__item">{t.item1}</span>
          <span className="value-bar__sep" aria-hidden="true">·</span>
          <span className="value-bar__item">{t.item2}</span>
          <span className="value-bar__sep" aria-hidden="true">·</span>
          <span className="value-bar__item">{t.item3}</span>
        </div>
      </div>
    </section>
  );
}

/* ---- Features ---- */
function Features() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].features;
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section-header section-header--center">
          <span className="section-label">{t.label}</span>
          <h2 className="section-heading">{t.heading}</h2>
          <p className="section-desc">{t.desc}</p>
        </div>
        <div className="features-grid">
          {t.items.map(function(f, i) {
            return (
              <div key={i} className="feature-card">
                <div className="feature-card__num">{f.num}</div>
                <div className="feature-card__title">{f.title}</div>
                <div className="feature-card__desc">{f.desc}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, ValueBar, Features });