// Direction B — Documentary / Construction Site
// Photography-led, monospace metadata, dark/gritty palette, hard edges.
// Hebrew RTL.

const B_TYPE = `'Heebo', 'Helvetica Neue', sans-serif`;
const B_MONO = `'JetBrains Mono', ui-monospace, monospace`;

function B_Frame({ children, mobile = false }) {
  return (
    <div dir="rtl" style={{
      width: '100%', height: '100%', position: 'relative',
      background: WXG.paperDeep, color: WXG.paper,
      fontFamily: B_TYPE, overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {children}
    </div>
  );
}

function B_Header({ s, mobile }) {
  const px = mobile ? 16 : 36;
  return (
    <header style={{
      padding: `${mobile ? 14 : 18}px ${px}px`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid #2a2a2a`,
      background: '#222222', position: 'relative', zIndex: 5,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <WXGMark size={mobile ? 48 : 60} color={WXG.paper} accent={WXG.amber} />
        <div style={{ width: 1, height: 24, background: '#333' }} />
        <span style={{ fontFamily: B_MONO, fontSize: mobile ? 9.5 : 11, letterSpacing: 1.6, color: '#888', textTransform: 'uppercase' }}>
          {mobile ? 'FIELD REPORT' : 'FIELD REPORT · CSAT'}
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 10 : 16,
        fontFamily: B_MONO, fontSize: mobile ? 9.5 : 11, color: '#888', letterSpacing: 1.4 }}>
        <span style={{ width: 6, height: 6, background: WXG.amber, borderRadius: '50%',
          animation: 'wxg-pulse 1.6s ease-in-out infinite' }} />
        <span>REC · 05.26</span>
      </div>
    </header>
  );
}

function B_Progress({ s, mobile }) {
  const px = mobile ? 16 : 36;
  const isSurvey = s.page >= 1 && s.page <= s.total;
  return (
    <div style={{
      padding: `${mobile ? 8 : 10}px ${px}px`,
      background: '#1c1c1c', borderBottom: '1px solid #2a2a2a',
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: '#666',
    }}>
      <span style={{ color: WXG.amber }}>◆</span>
      <span>STEP {String(Math.max(s.page, 0)).padStart(2,'0')} / {String(s.total + 1).padStart(2,'0')}</span>
      <div style={{ flex: 1, height: 1, background: '#1f1f1f', position: 'relative' }}>
        <div style={{
          position: 'absolute', insetInlineStart: 0, top: -1, height: 3,
          width: `${(s.page / (s.total + 1)) * 100}%`,
          background: WXG.amber, transition: 'width 600ms cubic-bezier(.2,.8,.2,1)',
          boxShadow: `0 0 8px ${WXG.amber}aa`,
        }} />
      </div>
      <span>{isSurvey ? 'IN PROGRESS' : s.page === 0 ? 'AWAITING' : 'COMPLETE'}</span>
    </div>
  );
}

function B_Intro({ mobile, onStart }) {
  const px = mobile ? 16 : 36;
  return (
    <div style={{ flex: 1, display: 'grid',
      gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
      gap: 0, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ padding: mobile ? `28px ${px}px` : `64px ${px}px`,
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        borderInlineStart: !mobile ? '1px solid #1f1f1f' : 'none' }}>
        <div>
          <div style={{ fontFamily: B_MONO, fontSize: 11, letterSpacing: 2, color: WXG.amber, textTransform: 'uppercase', marginBottom: 24 }}>
            ◐ סקר שטח · אבן דרך
          </div>
          <h1 style={{
            fontSize: mobile ? 40 : 76, fontWeight: 800, lineHeight: 1.0,
            letterSpacing: '-0.025em', margin: 0, color: WXG.paper,
          }}>
            כל בניין שלנו<br/>נבנה על <span style={{ color: WXG.amber }}>קשב.</span>
          </h1>
          <p style={{ fontSize: mobile ? 15 : 18, color: '#a3a3a3', lineHeight: 1.65,
            marginTop: mobile ? 22 : 32, maxWidth: 460 }}>
            הצוות שלך עובד איתך כבר חודשים. עכשיו תורך לדבר.
            5 שאלות, ~2 דקות, השפעה ישירה על איך נמשיך.
          </p>
        </div>

        <div style={{ marginTop: mobile ? 32 : 64 }}>
          <button onClick={onStart} style={{
            background: WXG.amber, color: WXG.ink, border: 'none', cursor: 'pointer',
            fontFamily: B_TYPE, fontSize: mobile ? 16 : 18, fontWeight: 700,
            padding: mobile ? '16px 26px' : '20px 32px',
            display: 'inline-flex', alignItems: 'center', gap: 14,
            borderRadius: 0, transition: 'all .2s',
            boxShadow: `0 0 0 0 ${WXG.amber}`,
          }}
          onMouseOver={e => { e.currentTarget.style.boxShadow = `4px 4px 0 0 ${WXG.amber}40`; e.currentTarget.style.transform = 'translate(-2px, -2px)'; }}
          onMouseOut={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translate(0,0)'; }}>
            <span>פתיחת הסקר</span>
            <span style={{ display: 'inline-block', transform: 'scaleX(-1)' }}>→</span>
          </button>

          <div style={{ marginTop: mobile ? 28 : 48, paddingTop: 24, borderTop: '1px solid #1f1f1f',
            display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 18,
            fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.2, color: '#666' }}>
            <div>
              <div style={{ color: '#555', textTransform: 'uppercase', marginBottom: 4 }}>PROJECT</div>
              <div style={{ color: WXG.paper, fontFamily: B_TYPE, fontSize: 15, fontWeight: 600 }}>מגדלי יבנה צפון</div>
            </div>
            <div>
              <div style={{ color: '#555', textTransform: 'uppercase', marginBottom: 4 }}>MILESTONE</div>
              <div style={{ color: WXG.paper, fontFamily: B_TYPE, fontSize: 15, fontWeight: 600 }}>שנה ראשונה</div>
            </div>
            <div>
              <div style={{ color: '#555', textTransform: 'uppercase', marginBottom: 4 }}>QUESTIONS</div>
              <div style={{ color: WXG.paper, fontFamily: B_TYPE, fontSize: 15, fontWeight: 600 }}>05</div>
            </div>
            <div>
              <div style={{ color: '#555', textTransform: 'uppercase', marginBottom: 4 }}>TIME</div>
              <div style={{ color: WXG.paper, fontFamily: B_TYPE, fontSize: 15, fontWeight: 600 }}>~2 דקות</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ position: 'relative', minHeight: mobile ? 220 : 'auto' }}>
        <ArchPlaceholder label="LIVE FEED · TOWER 03" tone="cool" />
        <div style={{ position: 'absolute', top: 16, insetInlineEnd: 16,
          fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: WXG.amber, textTransform: 'uppercase',
          background: 'rgba(0,0,0,0.6)', padding: '6px 10px', backdropFilter: 'blur(6px)',
          display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 6, height: 6, background: WXG.amber, borderRadius: '50%' }} />
          REC · 4K
        </div>
        {/* timecode strip */}
        <div style={{ position: 'absolute', bottom: 0, insetInline: 0,
          background: 'rgba(0,0,0,0.85)', padding: '10px 16px',
          fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: '#999',
          display: 'flex', justifyContent: 'space-between' }}>
          <span>32.0144°N · 34.7531°E</span>
          <span>05 / 05 / 2026 · 09:42</span>
        </div>
      </div>
    </div>
  );
}

function B_Rating({ q, value, onChange, mobile }) {
  const [hover, setHover] = React.useState(null);
  return (
    <div style={{ width: '100%' }}>
      <div style={{ display: 'flex', gap: mobile ? 4 : 6, marginBottom: 18 }}>
        {Array.from({ length: 5 }, (_, i) => {
          const n = i + 6;
          const filled = (hover != null ? n <= hover : value != null && n <= value);
          const isSel = value === n;
          return (
            <button key={n} onClick={() => onChange(n)}
              onMouseEnter={() => setHover(n)} onMouseLeave={() => setHover(null)}
              style={{
                flex: 1, height: mobile ? 56 : 80,
                background: filled ? (n >= 9 ? WXG.amber : n >= 7 ? '#9a6a0d' : '#3a3a3a') : 'transparent',
                border: `1px solid ${isSel ? WXG.amber : filled ? 'transparent' : '#2a2a2a'}`,
                color: filled && n >= 9 ? WXG.ink : filled ? WXG.paper : '#666',
                fontFamily: B_TYPE, fontSize: mobile ? 16 : 22, fontWeight: 700,
                cursor: 'pointer', transition: 'all 180ms', borderRadius: 0,
                position: 'relative',
              }}>
              {n}
              {isSel && <span style={{
                position: 'absolute', top: -6, insetInlineEnd: -1,
                background: WXG.amber, color: WXG.ink, fontFamily: B_MONO, fontSize: 9,
                padding: '2px 5px', letterSpacing: 1,
              }}>SEL</span>}
            </button>
          );
        })}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between',
        fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: '#888', textTransform: 'uppercase' }}>
        <span>{q.minLabel} →</span>
        <span>← {q.maxLabel}</span>
      </div>
    </div>
  );
}

function B_Choice({ q, value, onChange, mobile }) {
  return (
    <div style={{ display: 'grid', gap: 8 }}>
      {q.options.map((o, i) => {
        const active = value === o;
        return (
          <button key={o} onClick={() => onChange(o)} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: mobile ? '14px 16px' : '18px 22px',
            background: active ? '#2a2218' : '#262626',
            color: WXG.paper, textAlign: 'right',
            border: `1px solid ${active ? WXG.amber : '#222'}`,
            fontFamily: B_TYPE, fontSize: mobile ? 15 : 17, fontWeight: 500,
            cursor: 'pointer', borderRadius: 0, transition: 'all 200ms',
          }}>
            <span style={{ fontFamily: B_MONO, fontSize: 11, letterSpacing: 1.4, color: active ? WXG.amber : '#666', minWidth: 30 }}>
              {String.fromCharCode(65 + i)}
            </span>
            <span style={{ flex: 1 }}>{o}</span>
            {active && <span style={{ color: WXG.amber, fontFamily: B_MONO, fontSize: 11 }}>✓ נבחר</span>}
          </button>
        );
      })}
    </div>
  );
}

function B_Text({ q, value, onChange, mobile }) {
  return (
    <div>
      <textarea value={value || ''} onChange={e => onChange(e.target.value)}
        placeholder={q.placeholder} dir="rtl" rows={mobile ? 6 : 8}
        style={{
          width: '100%', resize: 'vertical', borderRadius: 0,
          background: '#1a1a1a', border: `1px solid #2a2a2a`,
          padding: mobile ? 16 : 22, fontFamily: B_TYPE, fontSize: mobile ? 15 : 17,
          color: WXG.paper, lineHeight: 1.6, outline: 'none',
          boxSizing: 'border-box', transition: 'border .15s',
        }}
        onFocus={e => e.currentTarget.style.borderColor = WXG.amber}
        onBlur={e => e.currentTarget.style.borderColor = '#2a2a2a'}
      />
      <div style={{ marginTop: 8, display: 'flex', justifyContent: 'space-between',
        fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: '#666', textTransform: 'uppercase' }}>
        <span>{(value || '').length} / 500 תווים</span>
        <span>// FIELD NOTE · ANONYMOUS</span>
      </div>
    </div>
  );
}

function B_Question({ s, mobile }) {
  const q = s.currentQ;
  if (!q) return null;
  const px = mobile ? 16 : 36;
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
      padding: mobile ? `28px ${px}px` : `48px ${px}px`, gap: mobile ? 24 : 36, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
        <div style={{ minWidth: mobile ? 48 : 80, fontFamily: B_MONO, color: WXG.amber, fontSize: mobile ? 32 : 56, fontWeight: 700, lineHeight: 1, letterSpacing: -1 }}>
          {String(s.qIdx + 1).padStart(2, '0')}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.6, color: '#888', textTransform: 'uppercase', marginBottom: 10 }}>
            QUESTION · {q.kind === 'rating' ? 'SCALE 1-10' : q.kind === 'choice' ? 'SINGLE SELECT' : 'OPEN TEXT'}
            {q.required && <span style={{ color: WXG.amber, marginInlineStart: 10 }}>* REQUIRED</span>}
          </div>
          <h2 style={{ fontSize: mobile ? 22 : 32, lineHeight: 1.25, fontWeight: 600, margin: 0, color: WXG.paper, letterSpacing: '-0.01em' }}>
            {q.text}
          </h2>
        </div>
      </div>

      <div style={{ paddingInlineStart: mobile ? 0 : 100 }}>
        {q.kind === 'rating' && <B_Rating q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
        {q.kind === 'choice' && <B_Choice q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
        {q.kind === 'text'   && <B_Text   q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
      </div>
    </div>
  );
}

function B_Thanks({ s, mobile }) {
  const px = mobile ? 16 : 36;
  const nums = SURVEY_QUESTIONS.filter(q => q.kind === 'rating').map(q => s.answers[q.id]).filter(v => v != null);
  const avg = nums.length ? (nums.reduce((a,b)=>a+b,0)/nums.length).toFixed(1) : null;
  return (
    <div style={{ flex: 1, padding: mobile ? `40px ${px}px` : `72px ${px}px`,
      display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
      <div style={{ fontFamily: B_MONO, fontSize: 11, letterSpacing: 2, color: WXG.amber, textTransform: 'uppercase', marginBottom: 20 }}>
        ◆ DATA RECEIVED · LOG #4271
      </div>
      <h1 style={{ fontSize: mobile ? 40 : 76, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.025em', margin: 0, color: WXG.paper }}>
        תודה. נרשם.
      </h1>
      <p style={{ fontSize: mobile ? 15 : 18, color: '#a3a3a3', maxWidth: 540, marginTop: 24, lineHeight: 1.65 }}>
        המשוב שלך ירד למסד הפרויקט וישוקלל בסקירת הצוות הקרובה.
        תיקונים נקודתיים — תוך 14 יום.
      </p>

      {avg && (
        <div style={{ marginTop: mobile ? 36 : 56, display: 'flex',
          alignItems: 'flex-end', gap: mobile ? 20 : 32,
          paddingTop: 24, borderTop: '1px solid #1f1f1f' }}>
          <div>
            <div style={{ fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: '#888', textTransform: 'uppercase', marginBottom: 8 }}>
              CSAT · OVERALL
            </div>
            <div style={{ fontSize: mobile ? 64 : 96, fontWeight: 800, color: WXG.amber, lineHeight: 1, letterSpacing: '-0.03em' }}>
              {avg}
            </div>
          </div>
          <div style={{ flex: 1, paddingBottom: 12 }}>
            <div style={{ display: 'flex', gap: 3, height: 40, alignItems: 'flex-end' }}>
              {nums.map((n, i) => (
                <div key={i} style={{ flex: 1, height: `${n * 10}%`, background: n >= 9 ? WXG.amber : n >= 7 ? '#9a6a0d' : '#3a3a3a' }} />
              ))}
            </div>
          </div>
        </div>
      )}

      <button onClick={s.restart} style={{
        marginTop: mobile ? 28 : 40, alignSelf: 'flex-start',
        background: 'transparent', color: WXG.paper, border: `1px solid #2a2a2a`,
        padding: '14px 24px', cursor: 'pointer',
        fontFamily: B_TYPE, fontSize: 14, fontWeight: 600, borderRadius: 0,
      }}>איפוס</button>
    </div>
  );
}

function B_Footer({ s, mobile }) {
  const px = mobile ? 16 : 36;
  if (s.page === 0 || s.page > s.total) {
    return (
      <footer style={{ padding: `${mobile ? 12 : 14}px ${px}px`,
        borderTop: '1px solid #2a2a2a', background: '#222222',
        fontFamily: B_MONO, fontSize: 10, letterSpacing: 1.4, color: '#666', textTransform: 'uppercase',
        display: 'flex', justifyContent: 'space-between' }}>
        <span>© WXG · 2026</span>
        {!mobile && <span>WAXMAN GROUP · ENGINEERING · MANAGEMENT</span>}
      </footer>
    );
  }
  return (
    <footer style={{ padding: `${mobile ? 12 : 18}px ${px}px`,
      borderTop: '1px solid #2a2a2a', background: '#222222',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
      <button onClick={s.goPrev} disabled={s.page <= 1} style={{
        background: 'transparent', color: s.page <= 1 ? '#444' : '#a3a3a3',
        border: 'none', cursor: s.page <= 1 ? 'default' : 'pointer',
        fontFamily: B_TYPE, fontSize: mobile ? 14 : 15, fontWeight: 600,
        display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>← חזרה</button>
      <button onClick={s.goNext} disabled={!s.currentAnswered}
        style={{
          background: s.currentAnswered ? WXG.amber : '#1a1a1a',
          color: s.currentAnswered ? WXG.ink : '#555',
          border: 'none', cursor: s.currentAnswered ? 'pointer' : 'not-allowed',
          fontFamily: B_TYPE, fontSize: mobile ? 14 : 16, fontWeight: 700,
          padding: mobile ? '12px 22px' : '14px 28px',
          display: 'inline-flex', alignItems: 'center', gap: 12, borderRadius: 0,
        }}>
        <span>{s.page === s.total ? 'שליחה' : 'הבא'}</span>
        <span style={{ display: 'inline-block', transform: 'scaleX(-1)' }}>→</span>
      </button>
    </footer>
  );
}

function DirectionB({ mobile = false, initialPage = 0, initialAnswers = null }) {
  const s = useSurvey({ initialPage, initialAnswers });
  return (
    <B_Frame mobile={mobile}>
      <B_Header s={s} mobile={mobile} />
      <B_Progress s={s} mobile={mobile} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
        <div key={s.page} style={{
          flex: 1, display: 'flex', flexDirection: 'column',
          animation: `wxg-slide-${s.direction > 0 ? 'next' : 'prev'} 480ms cubic-bezier(.2,.8,.2,1)`,
        }}>
          {s.page === 0 && <B_Intro mobile={mobile} onStart={s.goNext} />}
          {s.page > 0 && s.page <= s.total && <B_Question s={s} mobile={mobile} />}
          {s.page > s.total && <B_Thanks s={s} mobile={mobile} />}
        </div>
      </div>
      <B_Footer s={s} mobile={mobile} />
    </B_Frame>
  );
}

window.DirectionB = DirectionB;