// /blog — index and article shell. Per masterplan §5.6.

// ARTICLE METADATA — single source of truth for all 3 launch articles.
const BLOG_ARTICLES = [
  {
    slug: 'gentle-spay-explained',
    href: '/blog-gentle-spay-explained.html',
    cat: 'מדריך',
    title: 'מה זה עיקור לפרוסקופי ולמה זה שונה מעיקור מסורתי?',
    excerpt: 'החלטתם לעקר את הכלבה. בעולם, יש שתי דרכים — אחת ישנה ואחת חדשה. ההבדל ביניהן הוא לא רק בכלים, הוא בתוצאה.',
    readTime: '8 דק׳',
    date: '15 באפריל 2026',
    photoAlt: 'גולדן רטריבר חוזרת לפארק 24 שעות אחרי העיקור העדין של לומיווט',
    image: 'https://static.wixstatic.com/media/b1e7f1_927907b8a50d43f5bce8d0a8bcb6d504~mv2.png',
  },
  {
    slug: 'gastropexy-preventive',
    href: '/blog-gastropexy-preventive.html',
    cat: 'מניעה',
    title: 'גסטרופקסי מניעתית: הפרוצדורה שיכולה להציל את חיי הכלב שלכם',
    excerpt: 'GDV (התפתלות קיבה) הוא אחד ממצבי החירום הקטלניים ביותר בכלבים גדולים. הפרוצדורה הזו, שעושים פעם אחת, מורידה את הסיכון לכמעט אפס.',
    readTime: '11 דק׳',
    date: '3 באפריל 2026',
    photoAlt: 'גרייט דיין רגוע בפארק — גזע בסיכון גבוה ל־GDV שניתן למנוע בלפרוסקופיה',
    image: 'https://static.wixstatic.com/media/b1e7f1_04a90172758a495bbb6faca678252ed6~mv2.png',
  },
  {
    slug: 'foreign-body-endoscopy',
    href: '/blog-foreign-body-endoscopy.html',
    cat: 'חירום',
    title: 'הכלב שלכם בלע משהו: מתי אנדוסקופיה מצילה חיים?',
    excerpt: 'גרב, אבן, חתיכת עצם. הוא בלע — ועכשיו? איך תדעו מתי לחכות, מתי לרוץ למרפאה, ולמה אנדוסקופיה חוסכת ניתוח בטן פתוח.',
    readTime: '7 דק׳',
    date: '22 במרץ 2026',
    photoAlt: 'כלב מצויל נרגע אצל ד״ר דורפמן לפני הוצאת גוף זר באנדוסקופיה — ללא חתך',
    image: 'https://static.wixstatic.com/media/b1e7f1_25b46b1a3fe24c3b9ca611363ea2056a~mv2.jpg',
  },
];

// ═══════ INDEX ═══════

const BlogBreadcrumb = () => (
  <nav className="blog-breadcrumb container" aria-label="breadcrumb">
    <a href="/index.html">לומיווט</a>
    <span>›</span>
    <span className="cur">בלוג</span>
  </nav>
);

const BlogHero = () => (
  <section className="blog-hero">
    <div className="container">
      <span className="eyebrow">הבלוג של לומיווט</span>
      <h1>רפואה זעיר־פולשנית, בעברית פשוטה.</h1>
      <p className="lead">
        מדריכים, הסברים ותשובות לשאלות שאנחנו מקבלים הכי הרבה — על עיקור עדין, גסטרופקסי מניעתית,
        אנדוסקופיה ועוד. ללא ז׳רגון, ללא תמונות מפחידות. רק מה שצריך לדעת.
      </p>
    </div>
  </section>
);

const BlogFeatured = () => {
  const a = BLOG_ARTICLES[0];
  return (
    <section className="blog-featured">
      <div className="container">
        <div className="blog-featured-card">
          <a href={a.href} className="blog-featured-photo" aria-label={a.title}>
            <img src={a.image} alt={a.photoAlt} loading="eager" />
          </a>
          <div className="blog-featured-body">
            <div className="blog-featured-meta">
              <span className="cat">⭐ מאמר החודש</span>
              <span>{a.cat}</span>
              <span className="read"><ClockIcon size={14} />{a.readTime}</span>
            </div>
            <h2>{a.title}</h2>
            <p>{a.excerpt}</p>
            <a href={a.href} className="btn btn-primary">
              לקריאת המאמר
              <ArrowIcon size={16} style={{ transform: 'scaleX(-1)' }} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const BlogGrid = () => {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? BLOG_ARTICLES : BLOG_ARTICLES.filter(a => a.cat === filter);
  return (
    <section className="blog-grid-section">
      <div className="container">
        <div className="blog-grid-head">
          <h2>כל המאמרים</h2>
          <div className="blog-filter">
            <button className={filter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>הכל</button>
            <button className={filter === 'מדריך' ? 'active' : ''} onClick={() => setFilter('מדריך')}>מדריכים</button>
            <button className={filter === 'מניעה' ? 'active' : ''} onClick={() => setFilter('מניעה')}>מניעה</button>
            <button className={filter === 'חירום' ? 'active' : ''} onClick={() => setFilter('חירום')}>חירום</button>
          </div>
        </div>

        <div className="blog-grid">
          {filtered.map(a => (
            <a key={a.slug} href={a.href} className="blog-card">
              <div className="blog-card-photo">
                <img src={a.image} alt={a.photoAlt} loading="lazy" />
                <span className="blog-card-cat">{a.cat}</span>
              </div>
              <div className="blog-card-body">
                <h3>{a.title}</h3>
                <p>{a.excerpt}</p>
                <div className="blog-card-meta">
                  <span>{a.date}</span>
                  <span className="dot" />
                  <span>{a.readTime}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const BlogNewsletter = () => (
  <section className="blog-newsletter">
    <div className="container">
      <div>
        <span className="eyebrow on-dark">הצטרפו</span>
        <h2>מאמר חדש פעם בחודש. ישירות למייל.</h2>
        <p>ללא ספאם, ללא קידום מכירות. רק התוכן הרפואי החדש — בעברית פשוטה.</p>
      </div>
      <form onSubmit={e => { e.preventDefault(); alert('תודה! נרשמתם.'); }}>
        <input type="email" placeholder="כתובת אימייל" required />
        <button type="submit">הצטרפו</button>
      </form>
    </div>
  </section>
);

// ═══════ ARTICLE SHELL ═══════
// Each article HTML imports this and passes its data + body.

const ArticleBreadcrumb = ({ title }) => (
  <nav className="blog-breadcrumb container" aria-label="breadcrumb">
    <a href="/index.html">לומיווט</a>
    <span>›</span>
    <a href="/blog.html">בלוג</a>
    <span>›</span>
    <span className="cur">{title}</span>
  </nav>
);

const ArticleHero = ({ cat, title, lead, readTime, date, image, alt }) => (
  <section className="article-hero">
    <div className="container">
      <div className="article-meta">
        <span className="cat">{cat}</span>
        <span className="meta-dot" />
        <span>{date}</span>
        <span className="meta-dot" />
        <span className="read-time"><ClockIcon size={13} />{readTime} קריאה</span>
      </div>
      <h1>{title}</h1>
      <p className="article-lead">{lead}</p>
      <div className="article-hero-image">
        <img src={image} alt={alt} loading="eager" />
      </div>
    </div>
  </section>
);

const ArticleInlineCTA = ({ title, body, href, label }) => (
  <div className="article-inline-cta">
    <div>
      <h3>{title}</h3>
      <p>{body}</p>
    </div>
    <a href={href} className="btn btn-on-dark">
      {label}
      <ArrowIcon size={16} style={{ transform: 'scaleX(-1)' }} />
    </a>
  </div>
);

const ArticleCallout = ({ title, children }) => (
  <div className="article-callout">
    {title && <strong>{title}</strong>}
    {children}
  </div>
);

const ArticleQuote = ({ text, attr }) => (
  <div className="article-quote">
    <q>{text}</q>
    {attr && <div className="article-quote-attr">— {attr}</div>}
  </div>
);

const ArticleAuthor = () => (
  <section className="article-author">
    <div className="container">
      <div className="article-author-card">
        <div className="article-author-photo">
          <img src="https://static.wixstatic.com/media/b1e7f1_56f493e5c832467aa6aaa24359510fc6~mv2.png" alt="ד״ר דניאל דורפמן" />
        </div>
        <div>
          <h4>ד״ר דניאל דורפמן · מנתח וטרינרי</h4>
          <p>
            הקים את לומיווט כדי להביא את הסטנדרט העולמי של כירורגיה זעיר־פולשנית לחיות מחמד בישראל.
            כל פרוצדורה מבוצעת על ידו אישית.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const ArticleRelated = ({ currentSlug }) => {
  const others = BLOG_ARTICLES.filter(a => a.slug !== currentSlug);
  return (
    <section className="article-related">
      <div className="container">
        <div className="article-related-head">
          <span className="eyebrow">להמשך קריאה</span>
          <h2>מאמרים נוספים</h2>
        </div>
        <div className="article-related-grid">
          {others.map(a => (
            <a key={a.slug} href={a.href} className="blog-card">
              <div className="blog-card-photo">
                <img src={a.image} alt={a.photoAlt} loading="lazy" />
                <span className="blog-card-cat">{a.cat}</span>
              </div>
              <div className="blog-card-body">
                <h3>{a.title}</h3>
                <p>{a.excerpt}</p>
                <div className="blog-card-meta">
                  <span>{a.date}</span>
                  <span className="dot" />
                  <span>{a.readTime}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {
  BLOG_ARTICLES,
  BlogBreadcrumb,
  BlogHero,
  BlogFeatured,
  BlogGrid,
  BlogNewsletter,
  ArticleBreadcrumb,
  ArticleHero,
  ArticleInlineCTA,
  ArticleCallout,
  ArticleQuote,
  ArticleAuthor,
  ArticleRelated,
});