/* sections-middle.jsx — Exam Experience, Question Types, Progress, Mobile — all translated */

/* ---- Exam Experience Section ---- */
function ExamExperience() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].exam;
  return (
    <section className="section section--alt" id="exam">
      <div className="container">
        <div className="exam-exp">
          <div className="exam-exp__content">
            <span className="section-label">{t.label}</span>
            <h2 className="section-heading">{t.heading}</h2>
            <p className="section-desc">{t.desc}</p>
            <div className="exam-exp__stats">
              <div className="exam-exp__stat">
                <div className="exam-exp__stat-val">{t.questions}</div>
                <div className="exam-exp__stat-label">{t.questionsLabel}</div>
              </div>
              <div className="exam-exp__stat">
                <div className="exam-exp__stat-val">{t.time}</div>
                <div className="exam-exp__stat-label">{t.timeLabel}</div>
              </div>
            </div>
            <div className="exam-exp__pass">
              <div className="exam-exp__pass-title">{t.passLabel}</div>
              <div className="exam-exp__pass-row">
                <span className="exam-exp__pass-val">{t.passCar}</span>
                <span className="exam-exp__pass-sub">{t.passCarSub}</span>
              </div>
              <div className="exam-exp__pass-row">
                <span className="exam-exp__pass-val">{t.passMoto}</span>
                <span className="exam-exp__pass-sub">{t.passMotoSub}</span>
              </div>
            </div>
          </div>
          <div className="exam-exp__mockup">
            <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/exam</div>
              </div>
              <div className="browser-frame__body">
                <div className="exam-mock">
                  <div className="exam-mock__top">
                    <span>{t.mockHeader}</span>
                    <span style={{fontVariantNumeric:'tabular-nums'}}>⏱ 22:15</span>
                  </div>
                  <div className="exam-mock__progress">
                    <div className="exam-mock__progress-fill" style={{width:'68%'}}></div>
                  </div>
                  <div className="exam-mock__q">{t.mockQuestion}</div>
                  <div style={{
                    width:'100%',height:'100px',borderRadius:'8px',
                    background:'var(--surface-raised)',border:'1px dashed var(--border)',
                    display:'flex',alignItems:'center',justifyContent:'center',
                    marginBottom:'16px',color:'var(--text-tertiary)',fontSize:'12px',fontFamily:'monospace'
                  }}>
                    {lang === 'nl' ? 'verkeersbord · placeholder' : 'traffic sign · placeholder'}
                  </div>
                  <div className="exam-mock__opts">
                    <div className="exam-mock__opt">
                      <div className="exam-mock__opt-dot"></div>
                      <span>{t.mockOpt1}</span>
                    </div>
                    <div className="exam-mock__opt exam-mock__opt--selected">
                      <div className="exam-mock__opt-dot"></div>
                      <span>{t.mockOpt2}</span>
                    </div>
                    <div className="exam-mock__opt">
                      <div className="exam-mock__opt-dot"></div>
                      <span>{t.mockOpt3}</span>
                    </div>
                  </div>
                  <div className="exam-mock__nav">
                    <div className="exam-mock__nav-btn">{t.mockPrev}</div>
                    <div className="exam-mock__nav-btn exam-mock__nav-btn--primary">{t.mockNext}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Question Types ---- */
var QTYPE_STYLES = [
  { bg: 'var(--accent-light)', color: 'var(--accent)' },
  { bg: '#FEF3C7', color: '#D97706' },
  { bg: '#F0FDF4', color: '#16A34A' },
  { bg: '#FAF5FF', color: '#9333EA' }
];

function QuestionTypes() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].questionTypes;
  return (
    <section className="section" id="questions">
      <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="qtypes-grid">
          {t.items.map(function(qt, i) {
            var st = QTYPE_STYLES[i];
            return (
              <div key={i} className="qtype-card">
                <div className="qtype-card__icon" style={{background: st.bg, color: st.color}}>
                  {qt.icon}
                </div>
                <div className="qtype-card__title">{qt.title}</div>
                <div className="qtype-card__desc">{qt.desc}</div>
                <div className="qtype-card__count">{qt.count}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---- Progress Tracking ---- */
function ProgressTracking() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].progress;
  var catPcts = [87, 92, 74, 68, 81];

  return (
    <section className="section section--alt" id="progress">
      <div className="container">
        <div className="progress-sec">
          <div className="progress-sec__content">
            <span className="section-label">{t.label}</span>
            <h2 className="section-heading">{t.heading}</h2>
            <p className="section-desc">{t.desc}</p>
          </div>
          <div>
            <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/dashboard</div>
              </div>
              <div className="browser-frame__body">
                <div className="progress-mock">
                  <div className="progress-mock__top">
                    <div className="progress-mock__score">
                      <div className="progress-mock__score-num">82%</div>
                      <div className="progress-mock__score-label">{t.overallScore}</div>
                    </div>
                    <div className="progress-mock__stats">
                      <div className="progress-mock__stat-card">
                        <span>{t.questionsAnswered}</span>
                        <span>1,847</span>
                      </div>
                      <div className="progress-mock__stat-card">
                        <span>{t.examsCompleted}</span>
                        <span>24</span>
                      </div>
                      <div className="progress-mock__stat-card">
                        <span>{t.studyStreak}</span>
                        <span>{t.studyStreakVal}</span>
                      </div>
                      <div className="progress-mock__stat-card">
                        <span>{t.examReadiness}</span>
                        <span style={{color:'var(--success)'}}>{t.almostReady}</span>
                      </div>
                    </div>
                  </div>
                  <div className="progress-mock__cats-title">{t.perfByCategory}</div>
                  {t.categories.map(function(name, i) {
                    return (
                      <div key={i} className="progress-mock__cat">
                        <div className="progress-mock__cat-name">{name}</div>
                        <div className="progress-mock__cat-bar">
                          <div className="progress-mock__cat-fill" style={{width: catPcts[i] + '%'}}></div>
                        </div>
                        <div className="progress-mock__cat-pct">{catPcts[i]}%</div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Phone Exam Demo Data ---- */
var PHONE_EXAM_Q = {
  en: {
    type: 'SINGLECHOICE',
    question: 'What is this sign warning you of?',
    image: 'uploads/pasted-1781091218821-0.png',
    imageLabel: 'J-33',
    options: ['A. Traffic lights.', 'B. A traffic jam.', 'C. An accident.'],
    correct: 1,
    explanationRight: 'Correct! The sign J-33 indicates a traffic jam.',
    explanationWrong: 'Incorrect. The sign J-33 indicates a traffic jam.',
    qNum: 8, qTotal: 50, time: '34:30',
    prev: '‹ PREV', next: 'NEXT ›'
  },
  nl: {
    type: 'SINGLECHOICE',
    question: 'Waar waarschuwt dit bord voor?',
    image: 'uploads/pasted-1781091218821-0.png',
    imageLabel: 'J-33',
    options: ['A. Verkeerslichten.', 'B. Een file.', 'C. Een ongeluk.'],
    correct: 1,
    explanationRight: 'Correct! Het bord J-33 geeft een file aan.',
    explanationWrong: 'Onjuist. Het bord J-33 geeft een file aan.',
    qNum: 8, qTotal: 50, time: '34:30',
    prev: '‹ VORIGE', next: 'NEXT ›'
  }
};

/* ---- CBR-styled colors (matching real exam screenshots) ---- */
var CBR_C = {
  headerBg: '#2D5F8B',
  progTrack: 'rgba(255,255,255,.25)',
  progFill: 'rgba(255,255,255,.8)',
  bodyBg: '#F4F5F7',
  questionCardBg: '#F1F3F5',
  badgeBg: '#DCE4EC',
  badgeColor: '#2D5F8B',
  cardBg: '#FFFFFF',
  borderMuted: '#E9ECEF',
  textPrimary: '#1A1D20',
  textSecondary: '#495057',
  textLight: '#FFFFFF',
  footerBg: '#2D5F8B',
  footBtnBg: 'rgba(255,255,255,.15)',
  correctBg: '#E6F9F0',
  correctBorder: '#16A34A',
  correctText: '#166534',
  wrongBg: '#FEF2F2',
  wrongBorder: '#DC2626',
  wrongText: '#991B1B',
  correctDot: '#16A34A',
  wrongDot: '#DC2626'
};

/* ---- Auto-playing Phone Exam Mockup ---- */
function PhoneExamMock() {
  var lang = React.useContext(window.LangCtx);
  var q = PHONE_EXAM_Q[lang];

  /* phase: 'idle' → 'hovering' → 'answered' → 'showing' → 'resetting' → 'idle' */
  var ref1 = React.useState('idle');
  var phase = ref1[0]; var setPhase = ref1[1];
  var ref2 = React.useState(null);
  var selected = ref2[0]; var setSelected = ref2[1];
  var ref3 = React.useState(null);
  var hovering = ref3[0]; var setHovering = ref3[1];
  var ref4 = React.useState(true);
  var isVisible = ref4[0]; var setIsVisible = ref4[1];
  var sectionRef = React.useRef(null);
  var cycleRef = React.useRef(0);

  var isCorrect = selected === q.correct;
  var answered = phase === 'answered' || phase === 'showing';

  /* Intersection observer — start auto-play when in view */
  React.useEffect(function() {
    var el = sectionRef.current;
    if (!el || !window.IntersectionObserver) { setIsVisible(true); return; }
    var obs = new IntersectionObserver(function(entries) {
      setIsVisible(entries[0].isIntersecting);
    }, { threshold: 0.3 });
    obs.observe(el);
    return function() { obs.disconnect(); };
  }, []);

  /* Auto-play loop */
  React.useEffect(function() {
    if (!isVisible) return;
    var timers = [];
    var cycle = ++cycleRef.current;
    function isCurrent() { return cycleRef.current === cycle; }

    /* Pick a random answer — 60% chance correct, 40% chance wrong */
    var willBeCorrect = Math.random() < 0.6;
    var wrongOptions = [0, 2]; /* indices that are wrong */
    var pick = willBeCorrect ? q.correct : wrongOptions[Math.floor(Math.random() * wrongOptions.length)];

    /* Step 1: after 1.2s, hover over the chosen option */
    timers.push(setTimeout(function() {
      if (!isCurrent()) return;
      setHovering(pick);
      setPhase('hovering');
    }, 1200));

    /* Step 2: after 2.2s, select it */
    timers.push(setTimeout(function() {
      if (!isCurrent()) return;
      setSelected(pick);
      setHovering(null);
      setPhase('answered');
    }, 2400));

    /* Step 3: after 3s, show explanation */
    timers.push(setTimeout(function() {
      if (!isCurrent()) return;
      setPhase('showing');
    }, 3200));

    /* Step 4: after 6.5s, reset and loop */
    timers.push(setTimeout(function() {
      if (!isCurrent()) return;
      setPhase('resetting');
    }, 6500));

    timers.push(setTimeout(function() {
      if (!isCurrent()) return;
      setSelected(null);
      setHovering(null);
      setPhase('idle');
    }, 7000));

    return function() {
      cycleRef.current++;
      timers.forEach(clearTimeout);
    };
  }, [isVisible, phase === 'idle' ? selected : undefined, lang]);

  /* Reset when phase goes to idle to restart the loop */
  React.useEffect(function() {
    if (phase === 'resetting') return;
  }, [phase]);

  var pct = ((q.qNum / q.qTotal) * 100).toFixed(0);
  var C = CBR_C;

  return (
    <div ref={sectionRef} className="phone-exam-mock" style={{display:'flex',flexDirection:'column',height:'100%',background:C.headerBg,fontFamily:'"DM Sans",system-ui,sans-serif',fontSize:'11px',color:C.textPrimary,overflow:'hidden'}}>
      {/* Safe-area spacer — accounts for notch / Dynamic Island overlay */}
      <div className="phone-exam-mock__safe-top" style={{background:C.headerBg,flexShrink:0}}></div>
      {/* Header — progress bar, timer, action buttons */}
      <div className="phone-exam-mock__header" style={{padding:'6px 10px 8px',background:C.headerBg,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'3px',flex:1,marginRight:'10px'}}>
          <div style={{height:'3px',background:C.progTrack,borderRadius:'2px'}}>
            <div style={{height:'100%',background:C.progFill,borderRadius:'2px',width:pct+'%',transition:'width .3s'}}></div>
          </div>
          <span style={{fontSize:'7.5px',fontWeight:700,color:C.textLight,letterSpacing:'.05em',textTransform:'uppercase'}}>REMAINING TIME {q.time}</span>
        </div>
        <div style={{display:'flex',gap:'4px'}}>
          <div style={{width:'18px',height:'18px',borderRadius:'4px',border:'1px solid rgba(255,255,255,.2)',background:'rgba(255,255,255,.1)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'8px',color:'rgba(255,255,255,.7)'}}>⚑</div>
          <div style={{width:'18px',height:'18px',borderRadius:'4px',border:'1px solid rgba(255,255,255,.2)',background:'rgba(255,255,255,.1)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'8px',color:'rgba(255,255,255,.7)'}}>⊞</div>
          <div style={{width:'18px',height:'18px',borderRadius:'4px',border:'1px solid rgba(255,255,255,.2)',background:'rgba(255,255,255,.1)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'8px',color:'rgba(255,255,255,.7)'}}>✕</div>
        </div>
      </div>

      {/* Body */}
      <div style={{flex:1,background:C.bodyBg,overflow:'hidden',display:'flex',flexDirection:'column',padding:'8px',gap:'6px'}}>
        {/* Question card */}
        <div style={{background:C.questionCardBg,borderRadius:'8px',padding:'8px 10px',display:'flex',flexDirection:'column',gap:'4px'}}>
          <div style={{display:'inline-block',background:C.badgeBg,color:C.badgeColor,fontSize:'6px',fontWeight:700,padding:'2px 6px',borderRadius:'8px',letterSpacing:'.05em',width:'fit-content'}}>{q.type}</div>
          <div style={{fontSize:'10.5px',fontWeight:700,lineHeight:1.35,color:C.textPrimary}}>{q.question}</div>
        </div>

        {/* Traffic sign image card */}
        <div style={{background:C.cardBg,borderRadius:'8px',border:'1px solid '+C.borderMuted,padding:'14px 10px',display:'flex',flexDirection:'column',alignItems:'center',gap:'6px',boxShadow:'0 1px 2px rgba(0,0,0,.04)'}}>
          <img src={q.image} alt="Traffic sign" style={{width:'58px',height:'auto'}} />
          <span style={{fontSize:'7.5px',color:C.textSecondary}}>{q.imageLabel}</span>
        </div>

        {/* Answer options */}
        <div style={{display:'flex',flexDirection:'column',gap:'5px'}}>
          {q.options.map(function(opt, i) {
            var isThis = selected === i;
            var isRight = i === q.correct;
            var isHovered = hovering === i;
            var bg = C.cardBg;
            var border = '1px solid ' + C.borderMuted;
            var dotBg = C.cardBg;
            var dotBorder = C.borderMuted;
            var shadow = 'none';
            var txtColor = C.textSecondary;

            if (isHovered && !answered) {
              bg = '#E8ECF0';
              border = '1px solid #C5CDD5';
              shadow = '0 0 0 2px rgba(45,95,139,.15)';
            }
            if (answered && isThis && isCorrect) { bg=C.correctBg; border='1px solid '+C.correctBorder; dotBg=C.correctDot; dotBorder=C.correctDot; txtColor=C.correctText; }
            else if (answered && isThis && !isCorrect) { bg=C.wrongBg; border='1px solid '+C.wrongBorder; dotBg=C.wrongDot; dotBorder=C.wrongDot; txtColor=C.wrongText; }
            else if (answered && isRight) { bg=C.correctBg; border='1px solid '+C.correctBorder; dotBg=C.correctDot; dotBorder=C.correctDot; txtColor=C.correctText; }

            return (
              <div key={i} style={{
                display:'flex',alignItems:'center',gap:'7px',padding:'8px 9px',borderRadius:'8px',
                background:bg,border:border,boxShadow:shadow,
                transition:'all .25s ease',opacity: phase==='resetting'?0:1
              }}>
                <div style={{width:'12px',height:'12px',borderRadius:'50%',flexShrink:0,border:'2px solid '+dotBorder,background:dotBg,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'6.5px',color:'#fff',fontWeight:700,transition:'all .2s'}}>
                  {answered && isThis && isCorrect ? '✓' : ''}
                  {answered && isThis && !isCorrect ? '✕' : ''}
                  {answered && !isThis && isRight ? '✓' : ''}
                </div>
                <span style={{fontSize:'9.5px',lineHeight:1.3,color:txtColor}}>{opt}</span>
              </div>
            );
          })}
        </div>

        {/* Explanation */}
        {phase === 'showing' && (
          <div style={{padding:'8px 10px',borderRadius:'8px',fontSize:'8.5px',lineHeight:1.45,
            background:isCorrect?C.correctBg:C.wrongBg,border:isCorrect?'1px solid '+C.correctBorder:'1px solid '+C.wrongBorder,
            color:isCorrect?C.correctText:C.wrongText,animation:'fadeInUp .3s ease'}}>
            <div style={{marginBottom:'2px',fontSize:'10px'}}>{isCorrect ? '👍' : '👎'}</div>
            <strong>{isCorrect ? (lang==='nl'?'Correct!':'Correct!') : (lang==='nl'?'Onjuist.':'Incorrect.')}</strong>{' '}
            {isCorrect ? q.explanationRight.replace(/^Correct!\s?/,'') : q.explanationWrong.replace(/^(Incorrect\.|Onjuist\.)\s?/,'')}
          </div>
        )}
      </div>

      {/* Footer nav — with bottom safe-area padding */}
      <div className="phone-exam-mock__footer" style={{padding:'8px 10px',background:C.footerBg,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{padding:'5px 10px',borderRadius:'6px',fontSize:'7px',fontWeight:700,color:C.textLight,background:C.footBtnBg,letterSpacing:'.05em'}}>{q.prev}</div>
        <span style={{fontSize:'7px',fontWeight:700,color:C.textLight,letterSpacing:'.05em',textTransform:'uppercase'}}>QUESTION {q.qNum} OF {q.qTotal}</span>
        <div style={{padding:'5px 10px',borderRadius:'6px',fontSize:'7px',fontWeight:700,color:C.textLight,background:C.footBtnBg,letterSpacing:'.05em'}}>{q.next}</div>
      </div>
      {/* Safe-area spacer — accounts for home indicator / bottom inset */}
      <div className="phone-exam-mock__safe-bottom" style={{background:C.footerBg,flexShrink:0}}></div>
    </div>
  );
}

/* ---- Mobile Experience ---- */
function MobileExperience() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].mobile;

  return (
    <section className="section" id="mobile">
      <div className="container">
        <div className="mobile-sec">
          <div className="mobile-sec__content">
            <span className="section-label">{t.label}</span>
            <h2 className="section-heading">{t.heading}</h2>
            <p className="section-desc">{t.desc}</p>
            <div className="mobile-sec__features">
              {t.items.map(function(f, i) {
                return (
                  <div key={i} className="mobile-sec__feat">
                    <div className="mobile-sec__feat-icon">{f.icon}</div>
                    <div className="mobile-sec__feat-text">
                      <span>{f.title}</span>
                      <span>{f.desc}</span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div>
            <div className="phone-frame">
              <div className="phone-frame__screen">
                <div className="phone-frame__notch"></div>
                <div className="phone-frame__content" style={{padding:0}}>
                  <PhoneExamMock />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ExamExperience, QuestionTypes, ProgressTracking, MobileExperience });