// Direction C — Premium Minimal
// Maximum whitespace, single accent moments, refined geometry. Hebrew RTL.

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

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

function C_Topbar({ s, mobile }) {
  const px = mobile ? 22 : 80;
  return (
    <div style={{
      padding: `${mobile ? 18 : 28}px ${px}px`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <WXGMark size={mobile ? 52 : 64} color={WXG.ink} accent={WXG.amber} />
      <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 10 : 18 }}>
        {/* dot progress */}
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          {Array.from({ length: s.total + 1 }, (_, i) => {
            const filled = i < s.page;
            const cur = i === s.page;
            return <span key={i} style={{
              width: cur ? 22 : 6, height: 6, borderRadius: 3,
              background: filled || cur ? WXG.ink : WXG.rule,
              transition: 'all 350ms cubic-bezier(.2,.8,.2,1)',
            }} />;
          })}
        </div>
      </div>
    </div>
  );
}

function C_Intro({ mobile, onStart }) {
  const px = mobile ? 22 : 80;
  return (
    <div style={{
      flex: 1, padding: mobile ? `0 ${px}px 32px` : `0 ${px}px 80px`,
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      <div style={{ fontFamily: C_MONO, fontSize: mobile ? 11 : 12, letterSpacing: 2.4,
        color: WXG.slate, textTransform: 'uppercase', marginBottom: 32 }}>
        סקר שביעות רצון · 2026
      </div>
      <h1 style={{
        fontSize: mobile ? 44 : 104, fontWeight: 300, letterSpacing: '-0.04em',
        lineHeight: 0.98, margin: 0, color: WXG.ink,
        fontFeatureSettings: '"ss01"',
      }}>
        חמש דקות.<br/>
        <span style={{ fontWeight: 700 }}>הרבה מאוד</span> השפעה.
      </h1>
      <p style={{ fontSize: mobile ? 16 : 22, lineHeight: 1.55, color: WXG.slate,
        marginTop: mobile ? 24 : 40, maxWidth: 640, fontWeight: 300 }}>
        מנהלי הפרויקטים שלנו מקבלים את התשובות שלך אישית.
        כל פידבק נקרא, מתועד, ומועבר למחזור הבא.
      </p>

      <div style={{ marginTop: mobile ? 36 : 64, display: 'flex',
        flexDirection: mobile ? 'column-reverse' : 'row',
        alignItems: mobile ? 'stretch' : 'center', gap: mobile ? 18 : 32 }}>
        <button onClick={onStart} style={{
          background: WXG.ink, color: WXG.paper, border: 'none', cursor: 'pointer',
          fontFamily: C_TYPE, fontSize: mobile ? 16 : 17, fontWeight: 500,
          padding: mobile ? '16px 28px' : '18px 32px',
          borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 14,
          transition: 'all .25s', alignSelf: mobile ? 'stretch' : 'flex-start',
          justifyContent: 'center',
        }}
        onMouseOver={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 12px 24px rgba(0,0,0,0.15)`; }}
        onMouseOut={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
          <span>בואו נתחיל</span>
          <span style={{
            width: 28, height: 28, borderRadius: '50%', background: WXG.amber,
            color: WXG.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 14, fontWeight: 700, transform: 'scaleX(-1)',
          }}>→</span>
        </button>
        <div style={{ fontFamily: C_MONO, fontSize: 11, letterSpacing: 1.4,
          color: WXG.slateLight, textTransform: 'uppercase' }}>
          5 שאלות &nbsp;·&nbsp; ~2 דקות &nbsp;·&nbsp; אנונימי
        </div>
      </div>

      <div style={{ marginTop: mobile ? 48 : 96, paddingTop: 24,
        borderTop: `1px solid ${WXG.ruleLight}`, display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: WXG.amber }} />
          <span style={{ fontSize: 14, color: WXG.slate }}>מגדלי יבנה צפון · אבן דרך שנתית</span>
        </div>
        <span style={{ fontFamily: C_MONO, fontSize: 11, letterSpacing: 1.4,
          color: WXG.slateLight, textTransform: 'uppercase' }}>05 / 2026</span>
      </div>
    </div>
  );
}

function C_Rating({ q, value, onChange, mobile }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between',
        fontFamily: C_MONO, fontSize: 10.5, letterSpacing: 1.6,
        color: WXG.slateLight, textTransform: 'uppercase', marginBottom: 14 }}>
        <span>1 · {q.minLabel}</span>
        <span>{q.maxLabel} · 10</span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
        gap: mobile ? 4 : 8 }}>
        {Array.from({ length: 5 }, (_, i) => {
          const n = i + 6;
          const active = value === n;
          return (
            <button key={n} onClick={() => onChange(n)} style={{
              aspectRatio: '1', borderRadius: '50%',
              border: `1.5px solid ${active ? WXG.ink : WXG.rule}`,
              background: active ? WXG.ink : WXG.paper,
              color: active ? WXG.paper : WXG.ink,
              fontFamily: C_TYPE, fontSize: mobile ? 14 : 18, fontWeight: 500,
              cursor: 'pointer', transition: 'all 220ms cubic-bezier(.2,.8,.2,1)',
              transform: active ? 'scale(1.12)' : 'scale(1)',
              position: 'relative',
            }}>
              {n}
              {active && (
                <span style={{
                  position: 'absolute', top: -6, insetInlineEnd: -6,
                  width: 14, height: 14, borderRadius: '50%', background: WXG.amber,
                  border: `2px solid ${WXG.paper}`,
                }} />
              )}
            </button>
          );
        })}
      </div>

      {value != null && (
        <div style={{ marginTop: 24, fontSize: mobile ? 13 : 15, color: WXG.slate,
          display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 18, height: 1, background: WXG.amber }} />
          <span>הציון שלך: <strong style={{ color: WXG.ink }}>{value} / 10</strong></span>
        </div>
      )}
    </div>
  );
}

function C_Choice({ q, value, onChange, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      {q.options.map((o, i) => {
        const active = value === o;
        return (
          <button key={o} onClick={() => onChange(o)} style={{
            display: 'flex', alignItems: 'center', gap: 18,
            padding: mobile ? '14px 4px' : '18px 8px',
            background: 'transparent', textAlign: 'right',
            border: 'none', borderBottom: `1px solid ${active ? WXG.ink : WXG.ruleLight}`,
            color: WXG.ink, fontFamily: C_TYPE, fontSize: mobile ? 16 : 19, fontWeight: active ? 600 : 400,
            cursor: 'pointer', transition: 'all 200ms', borderRadius: 0,
          }}
          onMouseEnter={e => { if (!active) e.currentTarget.style.borderBottomColor = WXG.slate; }}
          onMouseLeave={e => { if (!active) e.currentTarget.style.borderBottomColor = WXG.ruleLight; }}>
            <span style={{
              width: 20, height: 20, borderRadius: '50%',
              border: `1.5px solid ${active ? WXG.ink : WXG.rule}`,
              background: active ? WXG.ink : 'transparent',
              position: 'relative', flexShrink: 0,
            }}>
              {active && <span style={{
                position: 'absolute', inset: 4, borderRadius: '50%', background: WXG.amber,
              }} />}
            </span>
            <span style={{ flex: 1 }}>{o}</span>
            <span style={{ fontFamily: C_MONO, fontSize: 11, color: WXG.slateLight, letterSpacing: 1 }}>
              {String(i + 1).padStart(2, '0')}
            </span>
          </button>
        );
      })}
    </div>
  );
}

function C_Text({ q, value, onChange, mobile }) {
  return (
    <div>
      <textarea value={value || ''} onChange={e => onChange(e.target.value)}
        placeholder={q.placeholder} dir="rtl" rows={mobile ? 6 : 7}
        style={{
          width: '100%', resize: 'none',
          background: 'transparent', border: 'none', borderBottom: `1px solid ${WXG.rule}`,
          padding: '8px 0', fontFamily: C_TYPE, fontSize: mobile ? 17 : 22,
          color: WXG.ink, lineHeight: 1.5, outline: 'none',
          boxSizing: 'border-box', transition: 'border .2s', borderRadius: 0,
          fontWeight: 300,
        }}
        onFocus={e => e.currentTarget.style.borderBottomColor = WXG.ink}
        onBlur={e => e.currentTarget.style.borderBottomColor = WXG.rule}
      />
      <div style={{ marginTop: 14, fontFamily: C_MONO, fontSize: 11, letterSpacing: 1.2,
        color: WXG.slateLight, textTransform: 'uppercase' }}>
        {(value || '').length} / 500
      </div>
    </div>
  );
}

function C_Question({ s, mobile }) {
  const q = s.currentQ;
  if (!q) return null;
  const px = mobile ? 22 : 80;
  return (
    <div style={{ flex: 1, padding: mobile ? `0 ${px}px 24px` : `0 ${px}px 64px`,
      display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 1100, alignSelf: 'center', width: '100%' }}>
      <div style={{ fontFamily: C_MONO, fontSize: 11, letterSpacing: 2,
        color: WXG.slate, textTransform: 'uppercase', marginBottom: mobile ? 18 : 24,
        display: 'flex', alignItems: 'center', gap: 12 }}>
        <span style={{ width: 24, height: 1, background: WXG.amber }} />
        שאלה {String(s.qIdx + 1).padStart(2, '0')} מתוך {String(s.total).padStart(2, '0')}
      </div>
      <h2 style={{
        fontSize: mobile ? 26 : 44, fontWeight: 400,
        lineHeight: 1.25, letterSpacing: '-0.015em',
        margin: '0 0 ' + (mobile ? 32 : 56) + 'px 0', color: WXG.ink,
        textWrap: 'pretty', maxWidth: 900,
      }}>{q.text}</h2>

      {q.kind === 'rating' && <C_Rating q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
      {q.kind === 'choice' && <C_Choice q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
      {q.kind === 'text'   && <C_Text   q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
    </div>
  );
}

function C_Thanks({ s, mobile }) {
  const px = mobile ? 22 : 80;
  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 ? `0 ${px}px 32px` : `0 ${px}px 80px`,
      display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' }}>
      <div style={{
        width: mobile ? 56 : 80, height: mobile ? 56 : 80, borderRadius: '50%',
        background: WXG.amber, display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 32,
        animation: 'wxg-pop 600ms cubic-bezier(.2,.8,.2,1)',
      }}>
        <svg width={mobile ? 24 : 32} height={mobile ? 24 : 32} viewBox="0 0 24 24" fill="none">
          <path d="M5 12.5L10 17.5L19 7.5" stroke={WXG.ink} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <h1 style={{ fontSize: mobile ? 44 : 96, fontWeight: 300, letterSpacing: '-0.04em',
        lineHeight: 0.98, margin: 0, color: WXG.ink }}>
        תודה <span style={{ fontWeight: 700 }}>שעצרת</span><br/>
        להגיד לנו.
      </h1>
      <p style={{ fontSize: mobile ? 16 : 20, color: WXG.slate, marginTop: mobile ? 20 : 32,
        maxWidth: 580, lineHeight: 1.55, fontWeight: 300 }}>
        המשוב שלך נשמר ומשולב בסקירת הצוות הרבעונית הבאה.
        אם סימנת נקודה לטיפול דחוף — ניצור קשר תוך 14 יום.
      </p>

      {avg && (
        <div style={{ marginTop: mobile ? 36 : 64, paddingTop: 32,
          borderTop: `1px solid ${WXG.ruleLight}`, width: '100%',
          display: 'flex', alignItems: 'baseline', gap: 16 }}>
          <span style={{ fontFamily: C_MONO, fontSize: 11, letterSpacing: 1.6,
            color: WXG.slateLight, textTransform: 'uppercase' }}>הציון הכולל שלך</span>
          <span style={{ fontSize: mobile ? 36 : 56, fontWeight: 700, color: WXG.ink, letterSpacing: '-0.02em' }}>
            {avg}<span style={{ color: WXG.amber }}>.</span>
          </span>
        </div>
      )}

      <button onClick={s.restart} style={{
        marginTop: mobile ? 28 : 40, background: 'transparent', color: WXG.slate,
        border: 'none', padding: 0, cursor: 'pointer',
        fontFamily: C_TYPE, fontSize: 14, fontWeight: 500,
        textDecoration: 'underline', textUnderlineOffset: 4,
      }}>אפשר להגיב שוב</button>
    </div>
  );
}

function C_Bottom({ s, mobile }) {
  const px = mobile ? 22 : 80;
  if (s.page === 0 || s.page > s.total) {
    return (
      <div style={{ padding: `${mobile ? 14 : 22}px ${px}px`,
        fontFamily: C_MONO, fontSize: 10.5, letterSpacing: 1.6, color: WXG.slateLight, textTransform: 'uppercase',
        display: 'flex', justifyContent: 'space-between' }}>
        <span>WXG · WAXMAN GROUP</span>
        {!mobile && <span>ENGINEERING · MANAGEMENT · 30 YEARS</span>}
        <span>2026</span>
      </div>
    );
  }
  return (
    <div style={{ padding: `${mobile ? 16 : 24}px ${px}px`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
      <button onClick={s.goPrev} disabled={s.page <= 1} style={{
        background: 'transparent', color: s.page <= 1 ? WXG.rule : WXG.slate,
        border: 'none', cursor: s.page <= 1 ? 'default' : 'pointer',
        fontFamily: C_TYPE, fontSize: mobile ? 14 : 15, fontWeight: 500,
        padding: 0, display: 'inline-flex', alignItems: 'center', gap: 8,
      }}>חזרה</button>
      <button onClick={s.goNext} disabled={!s.currentAnswered} style={{
        background: s.currentAnswered ? WXG.ink : WXG.ruleLight,
        color: s.currentAnswered ? WXG.paper : WXG.slateLight,
        border: 'none', cursor: s.currentAnswered ? 'pointer' : 'not-allowed',
        fontFamily: C_TYPE, fontSize: mobile ? 14 : 16, fontWeight: 500,
        padding: mobile ? '12px 22px' : '16px 28px',
        borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 12,
        transition: 'all .2s',
      }}>
        <span>{s.page === s.total ? 'סיום ושליחה' : 'הבא'}</span>
        <span style={{
          width: 22, height: 22, borderRadius: '50%',
          background: s.currentAnswered ? WXG.amber : 'transparent',
          color: s.currentAnswered ? WXG.ink : WXG.slateLight,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 12, fontWeight: 700, transform: 'scaleX(-1)',
        }}>→</span>
      </button>
    </div>
  );
}

function DirectionC({ mobile = false, initialPage = 0, initialAnswers = null }) {
  const s = useSurvey({ initialPage, initialAnswers });
  return (
    <C_Frame mobile={mobile}>
      <C_Topbar 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-fade-slide-${s.direction > 0 ? 'next' : 'prev'} 520ms cubic-bezier(.2,.8,.2,1)`,
        }}>
          {s.page === 0 && <C_Intro mobile={mobile} onStart={s.goNext} />}
          {s.page > 0 && s.page <= s.total && <C_Question s={s} mobile={mobile} />}
          {s.page > s.total && <C_Thanks s={s} mobile={mobile} />}
        </div>
      </div>
      <C_Bottom s={s} mobile={mobile} />
    </C_Frame>
  );
}

window.DirectionC = DirectionC;