// DirectionA.jsx — "דוח אכיפה" Editorial Report.
// Clean, white, credibility-first. Stat row → context → district bar + map → duration.
const { useState: useStateA } = React;

function DirectionA() {
  const [filter, setFilter] = useStateA({ year: 2025, month: 0, district: null });
  const k = EI.kpis(filter);
  const rows = EI.byDistrict(filter);
  const buckets = EI.durationBuckets(filter);
  const periodLabel = filter.month ? `${EI.MONTHS[filter.month - 1]} ${filter.year}` : `שנת ${filter.year}`;

  return (
    <div style={{ width: '100%', maxWidth: 1320, margin: '0 auto', fontFamily: "'Assistant',sans-serif", background: '#fff', direction: 'rtl', boxSizing: 'border-box' }}>
      {/* header */}
      <div style={{ padding: '34px 44px 22px', borderBottom: '1px solid #ECECEA', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 6 }}>
            <h1 style={{ margin: 0, fontWeight: 800, fontSize: 40, color: '#D20035', letterSpacing: '-0.02em' }}>{EI.meta.title}</h1>
            <ChainMark size={46} />
          </div>
          <p style={{ margin: 0, fontWeight: 700, fontSize: 19, color: '#1D1D1B' }}>{EI.meta.subtitle}</p>
          <div style={{ width: 96, height: 6, background: '#1D1D1B', marginTop: 12, borderRadius: 2 }} />
        </div>
        <img src="assets/tfht-logo.png" alt="המטה" style={{ height: 70, width: 'auto' }} />
      </div>

      {/* filter + period */}
      <div style={{ padding: '20px 44px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', background: '#FBFBFA', borderBottom: '1px solid #ECECEA' }}>
        <FilterBar filter={filter} setFilter={setFilter} />
        <div style={{ fontWeight: 700, fontSize: 15, color: '#5B5B59' }}>מציג נתונים עבור <span style={{ color: '#D20035' }}>{periodLabel}</span></div>
      </div>

      {/* hero KPI row */}
      <div style={{ padding: '28px 44px 8px' }}>
        <div style={{ display: 'flex', gap: 18 }}>
          <Kpi value={k.closures} label="סגירות מנהליות של בתי בושת" variant="solid" big
            tip="צווי סגירה מנהליים שהוצאו לבתי בושת ברחבי הארץ בתקופה הנבחרת. צו מנהלי מאפשר סגירה מהירה ללא הליך פלילי מלא." />
          <Kpi value={k.fines} label="קנסות שניתנו לצרכני זנות" big
            tip="כתבי אישום וקנסות שניתנו ללקוחות זנות מכוח החוק לאיסור צריכת זנות (2018). מקור: בקשות חופש מידע ממשטרת ישראל." />
          <Kpi value={k.enforcementRate} decimals={2} suffix="%" label="שיעור האכיפה מתוך מעשי הזנות" big
            tip={`סך פעולות האכיפה (קנסות + סגירות) חלקי ההערכה של כ-${eiFmt(k.annual)} מעשי זנות בשנה. שיעור זעום שממחיש את פער האכיפה.`} />
        </div>
      </div>

      {/* context strip */}
      <div style={{ padding: '14px 44px 26px' }}>
        <div style={{ background: '#F6F6F5', borderRadius: 16, padding: '16px 22px', fontWeight: 700, fontSize: 18, color: '#1D1D1B' }}>
          מתוך כ-<span style={{ color: '#D20035', fontWeight: 800 }}>{eiFmt(k.annual)}</span> מעשי זנות בשנה — <Tip label="ההערכה מבוססת על הסקר הלאומי על מצב הזנות בישראל."><Hoverable>מקור הנתון</Hoverable></Tip>
        </div>
      </div>

      {/* bar + map */}
      <div style={{ padding: '0 44px 30px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 36, alignItems: 'start' }}>
        <div>
          <SectionTitle sub="לחצו על מחוז כדי לסנן את כל הנתונים בעמוד">סגירת בתי בושת לפי מחוז</SectionTitle>
          <BarChart rows={rows} metric="closures" filter={filter} setFilter={setFilter} />
          <div style={{ marginTop: 26 }}>
            <SectionTitle>קנסות לצרכנים לפי מחוז</SectionTitle>
            <BarChart rows={rows} metric="fines" filter={filter} setFilter={setFilter} />
          </div>
        </div>
        <div>
          <SectionTitle sub="גודל הסמן יחסי למספר הסגירות">פריסה גאוגרפית</SectionTitle>
          <IsraelMap rows={rows} metric="closures" filter={filter} setFilter={setFilter} height={400} />
        </div>
      </div>

      {/* duration timeline */}
      <div style={{ padding: '6px 44px 30px' }}>
        <div style={{ background: '#FBFBFA', border: '1px solid #ECECEA', borderRadius: 20, padding: '24px 28px' }}>
          <SectionTitle sub={`מתוך ${k.closures} בתי בושת שנסגרו, ${k.reopened} נפתחו בחזרה תוך חודש מפקיעת הצו`}>כמה זמן בית בושת נשאר סגור?</SectionTitle>
          <DurationTimeline buckets={buckets} />
        </div>
      </div>

      <div style={{ padding: '0 44px 32px' }}><SourceNote /></div>
    </div>
  );
}
window.DirectionA = DirectionA;