// ─── WelcomeScreen.jsx ───────────────────────────────────────
// Empty state. Gold gradient icon → serif title → suggestion grid.

// Inline mini-illustrations (subset of the 12-motif language).
const W_ILL = {
  scales: (
    <svg width="40" height="40" viewBox="0 0 200 140" aria-hidden="true">
      <line x1="100" y1="20" x2="100" y2="115" stroke="#0f172a" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="100" y1="115" x2="78"  y2="125" stroke="#0f172a" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="100" y1="115" x2="122" y2="125" stroke="#0f172a" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="30"  y1="36"  x2="170" y2="36"  stroke="#0f172a" strokeWidth="2.2" strokeLinecap="round"/>
      <path d="M 25 60 Q 40 78 55 60 Q 47 70 40 70 Q 33 70 25 60 Z" fill="#bf9b30" opacity="0.85"/>
      <path d="M 145 60 Q 160 78 175 60 Q 167 70 160 70 Q 153 70 145 60 Z" fill="#bf9b30" opacity="0.85"/>
      <circle cx="100" cy="20" r="3" fill="#0f172a"/>
    </svg>
  ),
  lantern: (
    <svg width="40" height="40" viewBox="0 0 200 140" aria-hidden="true">
      <line x1="100" y1="10" x2="100" y2="22" stroke="#0f172a" strokeWidth="2"/>
      <path d="M 80 22 L 120 22 L 124 32 L 76 32 Z" fill="#0f172a"/>
      <rect x="76" y="32" width="48" height="4" fill="#0f172a"/>
      <path d="M 78 36 Q 78 70 70 90 L 130 90 Q 122 70 122 36 Z" fill="none" stroke="#0f172a" strokeWidth="2"/>
      <path d="M 100 44 Q 92 52 96 62 Q 100 56 100 50 Q 100 56 104 62 Q 108 52 100 44 Z" fill="#bf9b30"/>
      <rect x="70" y="90" width="60" height="6" fill="#0f172a"/>
    </svg>
  ),
  book: (
    <svg width="40" height="40" viewBox="0 0 200 140" aria-hidden="true">
      <path d="M 30 38 Q 100 26 170 38 L 170 110 Q 100 98 30 110 Z" fill="none" stroke="#0f172a" strokeWidth="2.2" strokeLinejoin="round"/>
      <line x1="100" y1="32" x2="100" y2="104" stroke="#0f172a" strokeWidth="2"/>
      <line x1="42" y1="52" x2="92" y2="48" stroke="#0f172a" strokeWidth="1.2" opacity="0.7"/>
      <line x1="108" y1="48" x2="158" y2="52" stroke="#0f172a" strokeWidth="1.2" opacity="0.7"/>
      <path d="M 64 38 L 64 80 L 70 76 L 76 80 L 76 38 Z" fill="#bf9b30"/>
    </svg>
  ),
};

function WelcomeScreen({ onPick }) {
  const suggestions = [
    { illust: W_ILL.scales,
      tag:    'CONTRACTS',
      title:  'פרשנות תכליתית של חוזה לפי הלכת אפרופים',
      sub:    'דוקטרינה: חוזים · 6,229 פסקי דין',
    },
    { illust: W_ILL.lantern,
      tag:    'LABOR',
      title:  'פיטורים ללא שימוע בעובד שעבד 3 חודשים',
      sub:    'דוקטרינה: עבודה · 2,948 פסקי דין',
    },
    { illust: W_ILL.book,
      tag:    'REMEDIES',
      title:  'תרופות בשל הפרת חוזה — אכיפה או פיצויים',
      sub:    'דוקטרינה: חוזים · 6,229 פסקי דין',
    },
  ];

  return (
    <div className="le-welcome">
      <div className="le-welcome-icon">
        <LogoMarkAnimated size={84}/>
      </div>
      <h1 className="le-welcome-title">איך אפשר לעזור?</h1>
      <p className="le-welcome-subtitle">
        פסיקה רלוונטית עם ציטוטים <b>מילה במילה</b> — וציון חוזק לכל טענה.
      </p>

      <div className="le-welcome-resume">
        <div className="le-welcome-resume-head">
          <span>// המשיכו מהמקום שבו עצרתם</span>
          <button className="le-welcome-resume-clear" title="נקה">×</button>
        </div>
        <button
          className="le-welcome-resume-card"
          onClick={() => onPick && onPick('אחריות מעוולים יחד לנזיקין')}
        >
          <div className="le-welcome-resume-q">אחריות מעוולים יחד לנזיקין</div>
          <div className="le-welcome-resume-meta">
            <span>נזיקין</span>
            <span>4 מקורות · ביטחון 87</span>
            <span className="le-welcome-resume-ago">לפני 3 ימים</span>
          </div>
        </button>
      </div>

      <div className="le-welcome-suggestions">
        {suggestions.map((s, i) => (
          <button
            key={i}
            className="le-welcome-card"
            onClick={() => onPick && onPick(s.title)}
          >
            <div className="le-welcome-card-illust">{s.illust}</div>
            <div className="le-welcome-card-tag">{s.tag}</div>
            <div className="le-welcome-card-title">{s.title}</div>
            <div className="le-welcome-card-sub">{s.sub}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

window.WelcomeScreen = WelcomeScreen;