// Direction A — Architectural Editorial
// Big editorial typography, blueprint grid, full-bleed amber accents,
// 12-column engineering rule. Hebrew RTL.

const A_TYPE = `'Frank Ruhle Libre', 'Heebo', 'Helvetica Neue', sans-serif`;
const A_BODY = `'Heebo', 'Assistant', 'Helvetica Neue', sans-serif`;
const A_MONO = `'JetBrains Mono', ui-monospace, monospace`;

function A_Frame({ children, mobile = false }) {
  return (
    <div dir="rtl" style={{
      width: '100%', height: '100%', position: 'relative',
      background: WXG.paperWarm, color: WXG.ink,
      fontFamily: A_BODY, overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <BlueprintGrid color={WXG.slate} opacity={0.05} cell={mobile ? 16 : 24} />
      {children}
    </div>
  );
}

function A_Header({ page, total, mobile }) {
  const px = mobile ? 20 : 64;
  return (
    <header style={{
      padding: `${mobile ? 18 : 28}px ${px}px ${mobile ? 14 : 20}px`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${WXG.rule}`, position: 'relative', zIndex: 2,
      background: 'rgba(250,248,244,0.85)', backdropFilter: 'blur(8px)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 10 : 14 }}>
        <WXGMark size={mobile ? 56 : 72} color={WXG.ink} accent={WXG.amber} />
      </div>
      <div style={{
        fontFamily: A_MONO, fontSize: mobile ? 10 : 12, letterSpacing: 1.6,
        color: WXG.slate, textTransform: 'uppercase', display: 'flex', gap: mobile ? 10 : 18,
      }}>
        <span>סקר שביעות רצון</span>
        {!mobile && <span style={{ color: WXG.rule }}>·</span>}
        {!mobile && <span>2026 / Q2</span>}
      </div>
    </header>
  );
}

function A_Progress({ page, total, mobile }) {
  // page 0 = intro; survey pages 1..total
  const isSurveyPage = page >= 1 && page <= total;
  const px = mobile ? 20 : 64;
  return (
    <div style={{
      padding: `${mobile ? 10 : 14}px ${px}px`,
      borderBottom: `1px solid ${WXG.ruleLight}`,
      display: 'flex', alignItems: 'center', gap: mobile ? 12 : 24,
      fontFamily: A_MONO, fontSize: mobile ? 10 : 11, letterSpacing: 1.4,
      color: WXG.slate, textTransform: 'uppercase', position: 'relative', zIndex: 2,
      background: WXG.paper,
    }}>
      <span style={{ color: WXG.ink, fontWeight: 700 }}>
        {isSurveyPage ? `${String(page).padStart(2, '0')} / ${String(total).padStart(2, '0')}` : page === 0 ? 'INTRO' : 'COMPLETE'}
      </span>
      <div style={{ flex: 1, height: 2, background: WXG.ruleLight, position: 'relative' }}>
        <div style={{
          position: 'absolute', insetInlineStart: 0, top: 0, height: '100%',
          width: `${(page / (total + 1)) * 100}%`,
          background: WXG.amber, transition: 'width 600ms cubic-bezier(.2,.8,.2,1)',
        }} />
      </div>
      {!mobile && <span>פרויקט · יבנה צפון</span>}
    </div>
  );
}

function A_Intro({ mobile, onStart }) {
  const px = mobile ? 20 : 64;
  return (
    <div style={{
      padding: mobile ? `28px ${px}px 32px` : `64px ${px}px 64px`,
      display: 'grid',
      gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr',
      gap: mobile ? 24 : 56,
      alignItems: 'stretch', position: 'relative', zIndex: 2, flex: 1,
    }}>
      <div>
        <div style={{
          fontFamily: A_MONO, fontSize: mobile ? 10 : 12, letterSpacing: 2,
          color: WXG.amberDark, textTransform: 'uppercase', marginBottom: mobile ? 18 : 28,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 10, height: 10, background: WXG.amber, display: 'inline-block' }} />
          קולך נבנה לתוך כל פרויקט
        </div>
        <h1 style={{
          fontFamily: A_TYPE,
          fontWeight: 800,
          fontSize: mobile ? 44 : 96,
          lineHeight: 0.95,
          letterSpacing: '-0.025em',
          margin: 0,
          color: WXG.ink,
        }}>
          איך עבדנו<br/>
          <span style={{
            background: `linear-gradient(180deg, transparent 65%, ${WXG.amber} 65%, ${WXG.amber} 90%, transparent 90%)`,
            paddingInline: 4,
          }}>בפועל?</span>
        </h1>
        <p style={{
          fontSize: mobile ? 15 : 19, lineHeight: 1.6, color: WXG.slate,
          marginTop: mobile ? 20 : 32, maxWidth: 540,
        }}>
          בכל פרויקט אנחנו עוצרים, מקשיבים, ומשפרים. חמש שאלות קצרות —
          המשוב שלך משפיע ישירות על הבחירות התכנוניות, הניהוליות והאנושיות
          שלנו במחזור הבא.
        </p>

        <div style={{
          marginTop: mobile ? 32 : 56, display: 'flex',
          flexDirection: mobile ? 'column' : 'row', alignItems: mobile ? 'stretch' : 'center', gap: mobile ? 16 : 28,
        }}>
          <button onClick={onStart} style={{
            background: WXG.ink, color: WXG.paper, border: 'none', cursor: 'pointer',
            fontFamily: A_BODY, fontSize: mobile ? 16 : 18, fontWeight: 600,
            padding: mobile ? '16px 28px' : '20px 36px', display: 'inline-flex', alignItems: 'center', gap: 14,
            borderRadius: 0, transition: 'all .2s', position: 'relative',
          }}
          onMouseOver={e => { e.currentTarget.style.background = WXG.amber; e.currentTarget.style.color = WXG.ink; }}
          onMouseOut={e => { e.currentTarget.style.background = WXG.ink; e.currentTarget.style.color = WXG.paper; }}>
            <span>התחלת הסקר</span>
            <span style={{ display: 'inline-block', transform: 'scaleX(-1)' }}>→</span>
          </button>
          <div style={{ fontFamily: A_MONO, fontSize: 11, letterSpacing: 1.4, color: WXG.slateLight, textTransform: 'uppercase' }}>
            כ-2 דקות · 5 שאלות
          </div>
        </div>

        <div style={{
          marginTop: mobile ? 36 : 80, paddingTop: mobile ? 24 : 32, borderTop: `1px solid ${WXG.rule}`,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: mobile ? 12 : 24,
        }}>
          {[
            ['30+', 'שנות מצוינות'],
            ['400+', 'פרויקטים פעילים'],
            ['100%', 'שקיפות בליווי'],
          ].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: A_TYPE, fontSize: mobile ? 28 : 44, fontWeight: 800, color: WXG.ink, lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
              <div style={{ fontFamily: A_MONO, fontSize: 10, letterSpacing: 1.4, color: WXG.slate, marginTop: 8, textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* right column: project plate + image */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 16 : 20 }}>
        <div style={{
          background: WXG.paper, border: `1px solid ${WXG.rule}`,
          padding: mobile ? '16px 18px' : '20px 24px',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        }}>
          {[
            ['פרויקט', 'מגדלי יבנה צפון'],
            ['אבן דרך', 'אחת לשנה'],
            ['מנהל פרויקט', 'דניאל אבישר'],
            ['חתימה', '05 / 26'],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{ fontFamily: A_MONO, fontSize: 9.5, letterSpacing: 1.4, color: WXG.slateLight, textTransform: 'uppercase', marginBottom: 4 }}>{k}</div>
              <div style={{ fontSize: mobile ? 14 : 16, color: WXG.ink, fontWeight: 600 }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, minHeight: mobile ? 200 : 360, position: 'relative' }}>
          <ArchPlaceholder label="YAVNE NORTH · TOWER 03" tone="warm" />
          <div style={{
            position: 'absolute', top: 14, left: 14, fontFamily: A_MONO, fontSize: 10,
            letterSpacing: 1.4, color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ width: 6, height: 6, background: WXG.amber, borderRadius: '50%', boxShadow: `0 0 0 4px rgba(252,175,23,0.25)` }} />
            LIVE · BUILD ZONE
          </div>
        </div>
      </div>
    </div>
  );
}

function A_Rating({ q, value, onChange, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 24 : 36, width: '100%' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(5, 1fr)',
        gap: mobile ? 6 : 10,
      }}>
        {Array.from({ length: 5 }, (_, i) => {
          const n = i + 6;
          const active = value === n;
          const filled = value != null && n <= value;
          return (
            <button key={n} onClick={() => onChange(n)} style={{
              aspectRatio: '1', border: `1px solid ${active ? WXG.ink : WXG.rule}`,
              background: filled ? (n >= 9 ? WXG.amber : n >= 7 ? WXG.amberMid : WXG.paper) : WXG.paper,
              color: active ? WXG.ink : filled ? WXG.ink : WXG.slate,
              fontFamily: A_TYPE, fontSize: mobile ? 18 : 28, fontWeight: 700,
              cursor: 'pointer', transition: 'all 220ms cubic-bezier(.2,.8,.2,1)',
              transform: active ? 'translateY(-3px)' : 'translateY(0)',
              boxShadow: active ? `0 8px 0 -3px ${WXG.amber}, 0 1px 0 0 ${WXG.ink}` : 'none',
              borderRadius: 0,
            }}
              onMouseEnter={e => { if (!active) e.currentTarget.style.borderColor = WXG.ink; }}
              onMouseLeave={e => { if (!active) e.currentTarget.style.borderColor = WXG.rule; }}
            >{n}</button>
          );
        })}
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between',
        fontFamily: A_MONO, fontSize: mobile ? 10 : 11, letterSpacing: 1.2,
        color: WXG.slate, textTransform: 'uppercase',
      }}>
        <span>{q.minLabel} →</span>
        <span>← {q.maxLabel}</span>
      </div>
    </div>
  );
}

function A_Choice({ q, value, onChange, mobile }) {
  return (
    <div style={{ display: 'grid', gap: mobile ? 8 : 12 }}>
      {q.options.map((o, i) => {
        const active = value === o;
        return (
          <button key={o} onClick={() => onChange(o)} style={{
            display: 'flex', alignItems: 'center', gap: mobile ? 14 : 20,
            padding: mobile ? '14px 18px' : '20px 24px',
            background: active ? WXG.ink : WXG.paper,
            color: active ? WXG.paper : WXG.ink,
            border: `1px solid ${active ? WXG.ink : WXG.rule}`,
            fontFamily: A_BODY, fontSize: mobile ? 15 : 18, fontWeight: 500,
            cursor: 'pointer', textAlign: 'right', borderRadius: 0,
            transition: 'all 200ms ease', position: 'relative',
          }}
            onMouseEnter={e => { if (!active) { e.currentTarget.style.borderColor = WXG.ink; } }}
            onMouseLeave={e => { if (!active) { e.currentTarget.style.borderColor = WXG.rule; } }}>
            <span style={{
              fontFamily: A_MONO, fontSize: 11, letterSpacing: 1, color: active ? WXG.amber : WXG.slateLight,
              minWidth: 24,
            }}>{String(i + 1).padStart(2, '0')}</span>
            <span style={{ flex: 1 }}>{o}</span>
            <span style={{
              width: 20, height: 20,
              border: `1.5px solid ${active ? WXG.amber : WXG.rule}`,
              background: active ? WXG.amber : 'transparent',
              transition: 'all 200ms',
            }} />
          </button>
        );
      })}
    </div>
  );
}

function A_Text({ q, value, onChange, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <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: WXG.paper, border: `1px solid ${WXG.rule}`,
          padding: mobile ? 16 : 22, fontFamily: A_BODY, fontSize: mobile ? 15 : 17,
          color: WXG.ink, lineHeight: 1.6, outline: 'none',
          boxSizing: 'border-box', transition: 'border .15s',
        }}
        onFocus={e => e.currentTarget.style.borderColor = WXG.ink}
        onBlur={e => e.currentTarget.style.borderColor = WXG.rule}
      />
      <div style={{ display: 'flex', justifyContent: 'space-between',
        fontFamily: A_MONO, fontSize: 10, letterSpacing: 1.2, color: WXG.slateLight, textTransform: 'uppercase' }}>
        <span>{(value || '').length} / 500</span>
        <span>אנונימי · מאובטח</span>
      </div>
    </div>
  );
}

function A_QuestionPage({ s, mobile }) {
  const q = s.currentQ;
  if (!q) return null;
  const px = mobile ? 20 : 64;
  return (
    <div style={{
      flex: 1, padding: mobile ? `28px ${px}px 24px` : `56px ${px}px 40px`,
      display: 'grid',
      gridTemplateColumns: mobile ? '1fr' : '0.8fr 1.2fr',
      gap: mobile ? 24 : 56, position: 'relative', zIndex: 2,
    }}>
      <div>
        <div style={{
          fontFamily: A_MONO, fontSize: mobile ? 10 : 12, letterSpacing: 1.8,
          color: WXG.amberDark, textTransform: 'uppercase', marginBottom: 18,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 8, height: 8, background: WXG.amber }} />
          שאלה {String(s.qIdx + 1).padStart(2, '0')} / {String(s.total).padStart(2, '0')}
        </div>
        <h2 style={{
          fontFamily: A_TYPE, fontWeight: 700, fontSize: mobile ? 26 : 44,
          lineHeight: 1.15, letterSpacing: '-0.015em',
          margin: 0, color: WXG.ink,
        }}>{q.text}</h2>
        {q.required && (
          <div style={{ marginTop: 18, fontFamily: A_MONO, fontSize: 11,
            letterSpacing: 1.2, color: WXG.slate, textTransform: 'uppercase' }}>
            * שאלה חובה
          </div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <div style={{ width: '100%' }}>
          {q.kind === 'rating' && <A_Rating q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
          {q.kind === 'choice' && <A_Choice q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
          {q.kind === 'text'   && <A_Text   q={q} value={s.answers[q.id]} onChange={v => s.setAnswer(q.id, v)} mobile={mobile} />}
        </div>
      </div>
    </div>
  );
}

function A_Thanks({ s, mobile }) {
  const avg = (() => {
    const nums = SURVEY_QUESTIONS.filter(q => q.kind === 'rating').map(q => s.answers[q.id]).filter(v => v != null);
    if (!nums.length) return null;
    return (nums.reduce((a, b) => a + b, 0) / nums.length).toFixed(1);
  })();
  const px = mobile ? 20 : 64;
  return (
    <div style={{
      flex: 1, padding: mobile ? `40px ${px}px` : `80px ${px}px`,
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      alignItems: 'flex-start', position: 'relative', zIndex: 2,
    }}>
      <div style={{
        fontFamily: A_MONO, fontSize: 12, letterSpacing: 2,
        color: WXG.amberDark, textTransform: 'uppercase', marginBottom: 24,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ width: 10, height: 10, background: WXG.amber }} />
        משוב התקבל
      </div>
      <h1 style={{
        fontFamily: A_TYPE, fontSize: mobile ? 44 : 96, lineHeight: 0.95,
        margin: 0, fontWeight: 800, letterSpacing: '-0.025em', color: WXG.ink,
      }}>
        תודה.
      </h1>
      <p style={{ fontSize: mobile ? 16 : 22, color: WXG.slate, marginTop: 24, maxWidth: 600, lineHeight: 1.5 }}>
        המשוב שלך נרשם בכרטיס הפרויקט. צוות הניהול יקבל סיכום במחזור הבא,
        ויחזור אליך אישית לכל נקודה שתסומן לטיפול.
      </p>

      {avg && (
        <div style={{
          marginTop: mobile ? 36 : 56, display: 'flex',
          alignItems: mobile ? 'flex-start' : 'baseline',
          flexDirection: mobile ? 'column' : 'row',
          gap: mobile ? 8 : 24,
          paddingTop: 24, borderTop: `1px solid ${WXG.rule}`, width: '100%',
        }}>
          <div style={{ fontFamily: A_MONO, fontSize: 11, letterSpacing: 1.4, color: WXG.slate, textTransform: 'uppercase' }}>
            ממוצע שביעות רצון בסקר
          </div>
          <div style={{ fontFamily: A_TYPE, fontSize: mobile ? 56 : 88, fontWeight: 800, color: WXG.ink, lineHeight: 1, letterSpacing: '-0.03em' }}>
            {avg}<span style={{ color: WXG.amber }}>.</span>
          </div>
        </div>
      )}

      <button onClick={s.restart} style={{
        marginTop: mobile ? 28 : 40, background: 'transparent', color: WXG.ink,
        border: `1px solid ${WXG.ink}`, padding: '14px 24px', cursor: 'pointer',
        fontFamily: A_BODY, fontSize: 15, fontWeight: 600, borderRadius: 0,
      }}>חזרה להתחלה</button>
    </div>
  );
}

function A_Footer({ s, mobile }) {
  const px = mobile ? 20 : 64;
  if (s.page === 0 || s.page > SURVEY_QUESTIONS.length) return (
    <footer style={{
      padding: `${mobile ? 14 : 18}px ${px}px`,
      borderTop: `1px solid ${WXG.rule}`,
      fontFamily: A_MONO, fontSize: 10, letterSpacing: 1.4,
      color: WXG.slateLight, textTransform: 'uppercase',
      display: 'flex', justifyContent: 'space-between', position: 'relative', zIndex: 2,
      background: WXG.paper,
    }}>
      <span>© WXG · WAXMAN GROUP · 2026</span>
      {!mobile && <span>הנדסה · ניהול · ביצוע · 30+ שנים</span>}
    </footer>
  );

  return (
    <footer style={{
      padding: `${mobile ? 14 : 22}px ${px}px`,
      borderTop: `1px solid ${WXG.rule}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      position: 'relative', zIndex: 2, background: WXG.paper,
    }}>
      <button onClick={s.goPrev} disabled={s.page <= 1} style={{
        background: 'transparent', color: s.page <= 1 ? WXG.slateLight : WXG.ink,
        border: 'none', cursor: s.page <= 1 ? 'default' : 'pointer',
        fontFamily: A_BODY, fontSize: mobile ? 14 : 16, fontWeight: 600,
        display: 'inline-flex', alignItems: 'center', gap: 10, padding: 0,
      }}>
        <span>חזרה</span>
      </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: A_BODY, fontSize: mobile ? 14 : 16, fontWeight: 600,
          padding: mobile ? '12px 22px' : '16px 28px',
          display: 'inline-flex', alignItems: 'center', gap: 12,
          transition: 'all .2s', borderRadius: 0,
        }}
        onMouseOver={e => { if (s.currentAnswered) { e.currentTarget.style.background = WXG.amber; e.currentTarget.style.color = WXG.ink; } }}
        onMouseOut={e => { if (s.currentAnswered) { e.currentTarget.style.background = WXG.ink; e.currentTarget.style.color = WXG.paper; } }}>
        <span>{s.page === SURVEY_QUESTIONS.length ? 'שליחת משוב' : 'הבא'}</span>
        <span style={{ display: 'inline-block', transform: 'scaleX(-1)' }}>→</span>
      </button>
    </footer>
  );
}

function DirectionA({ mobile = false, initialPage = 0, initialAnswers = null }) {
  const s = useSurvey({ initialPage, initialAnswers });
  return (
    <A_Frame mobile={mobile}>
      <A_Header page={s.page} total={s.total} mobile={mobile} />
      <A_Progress page={s.page} total={s.total} mobile={mobile} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', 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 && <A_Intro mobile={mobile} onStart={s.goNext} />}
          {s.page > 0 && s.page <= s.total && <A_QuestionPage s={s} mobile={mobile} />}
          {s.page > s.total && <A_Thanks s={s} mobile={mobile} />}
        </div>
      </div>
      <A_Footer s={s} mobile={mobile} />
    </A_Frame>
  );
}

window.DirectionA = DirectionA;