// site-news.jsx — journal index (stream) + full article renderer.

function NewsIndex({ navigate }) {
  const news = usePublishedNews();
  const [cat, setCat] = React.useState("All");
  const cats = ["All", ...Array.from(new Set(news.map((n) => n.category)))];
  const shown = news.filter((n) => cat === "All" || n.category === cat);
  const lead = shown[0];
  const stream = shown.slice(1);

  return (
    <Page k="news">
      <section className="dark section tight page-hero">
        <div className="wrap">
          <span className="eyebrow">News · Journal · Field Notes</span>
          <h1 className="display" style={{ fontSize: "clamp(48px,10vw,140px)", margin: "16px 0 28px" }}>The Journal</h1>
          <div style={{ display: "flex", gap: 9, flexWrap: "wrap" }}>
            {cats.map((c) => (
              <button key={c} className={`chip ${cat === c ? "on" : ""}`} onClick={() => setCat(c)}
                style={cat === c ? { background: "var(--paper)", borderColor: "var(--paper)", color: "var(--ink)" } : { borderColor: "var(--line-d)", color: "var(--muted-d)" }}>{c}</button>
            ))}
          </div>
        </div>
      </section>

      {shown.length === 0 ? (
        <section className="section"><div className="wrap"><div className="empty-note">No posts in this category yet.</div></div></section>
      ) : (
        <>
          {/* lead */}
          <section className="section tight">
            <div className="wrap">
              <article onClick={() => navigate("/news/" + lead.id)} style={{ cursor: "pointer", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(20px,3vw,48px)", alignItems: "center" }} className="news-lead">
                {(lead.cover || firstBlockImage(lead))
                  ? <div style={{ aspectRatio:"4/3", overflow:"hidden", borderRadius:4 }}><img src={lead.cover||firstBlockImage(lead)} alt={lead.title} style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} /></div>
                  : <Frame seed={lead.title} duo="d-coral" ratio="4/3" style={{ borderRadius: 4 }} corner="LATEST" />
                }
                <div>
                  <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 18 }}>
                    <span className="tag solid">{lead.category}</span>
                    <span className="label muted">{fmtDate(lead.date)}</span>
                  </div>
                  <h2 className="display" style={{ fontSize: "clamp(30px,4.5vw,60px)", fontStretch: "100%", fontWeight: 700 }}>{lead.title}</h2>
                  <p className="lead muted" style={{ marginTop: 20 }}>{firstText(lead)}</p>
                  <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 16 }}>
                    <span className="label muted" style={{ whiteSpace: "nowrap" }}>by {lead.author}</span>
                    <span className="textlink" style={{ fontSize: "clamp(15px,1.6vw,20px)", display: "flex", alignItems: "center", gap: 6 }}>Read <SIcon name="arrowR" style={{ width: 18, height: 18 }} /></span>
                  </div>
                </div>
              </article>
            </div>
          </section>

          {/* stream */}
          <section className="section tight" style={{ paddingTop: 0 }}>
            <div className="wrap">
              {stream.map((n) => (
                <article key={n.id} onClick={() => navigate("/news/" + n.id)}
                  style={{ cursor: "pointer", display: "grid", gridTemplateColumns: "160px 1fr 220px", gap: 28, alignItems: "center", padding: "26px 0", borderTop: "1px solid var(--line)" }} className="news-row">
                  <div>
                    <div className="label muted">{fmtDate(n.date)}</div>
                    <div style={{ marginTop: 8 }}><span className="tag">{n.category}</span></div>
                  </div>
                  <div>
                    <h3 className="display" style={{ fontSize: "clamp(22px,2.6vw,34px)", fontStretch: "100%", fontWeight: 700 }}>{n.title}</h3>
                    <div className="muted" style={{ marginTop: 8, fontSize: 14 }}>by {n.author}</div>
                  </div>
                  {(n.cover || firstBlockImage(n))
                    ? <div style={{ aspectRatio:"16/10", overflow:"hidden", borderRadius:4 }} className="news-row-img"><img src={n.cover||firstBlockImage(n)} alt={n.title} style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} /></div>
                    : <Frame seed={n.title} ratio="16/10" style={{ borderRadius: 4 }} className="news-row-img" />
                  }
                </article>
              ))}
            </div>
          </section>
        </>
      )}
    </Page>
  );
}

function firstText(article) {
  const b = (article.blocks || []).find((b) => b.type === "text");
  if (!b) return "";
  if (b.html) {
    const tmp = document.createElement("div");
    tmp.innerHTML = b.html;
    return tmp.textContent || "";
  }
  return b.text || "";
}

// ── Full article ──────────────────────────────────────────────────────────────
function Article({ newsId, navigate }) {
  const d = useSite();
  const a = d.news.find((n) => n.id === newsId);
  if (!a) {
    return (
      <Page k="art-missing">
        <section className="section">
          <div className="wrap" style={{ textAlign: "center" }}>
            <h1 className="display" style={{ fontSize: 48 }}>Post not found</h1>
            <button className="btn" onClick={() => navigate("/news")} style={{ marginTop: 16 }}>Back to the journal</button>
          </div>
        </section>
      </Page>
    );
  }
  const more = d.news.filter((n) => n.status === "published" && n.id !== newsId).slice(0, 3);

  return (
    <Page k={"art-" + newsId}>
      <section className="dark section tight">
        <div className="wrap" style={{ maxWidth: 860 }}>
          <span className="textlink" onClick={() => navigate("/news")} style={{ color: "var(--muted-d)", cursor: "pointer" }}>
            <SIcon name="arrowL" /> Journal
          </span>
          <div style={{ display: "flex", gap: 10, alignItems: "center", margin: "28px 0 20px" }}>
            <span className="tag solid">{a.category}</span>
            <span className="label muted">{fmtDate(a.date)}</span>
          </div>
          <h1 className="display" style={{ fontSize: "clamp(34px,6vw,82px)" }}>{a.title}</h1>
          <div className="label muted" style={{ marginTop: 24 }}>By {a.author}</div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          {a.cover
            ? <SitePosImg src={a.cover} posX={a.coverPosX??50} posY={a.coverPosY??50} zoom={a.coverZoom??100} style={{ borderRadius:4, marginBottom:48, marginLeft:"auto", marginRight:"auto", display:"block" }} alt={a.title} />
            : <Frame seed={a.title} duo="d-coral" ratio="21/9" style={{ borderRadius: 4, marginBottom: 48 }} corner="COVER" />
          }
          <div className="article-body">
            {(a.blocks || []).map((b) => <Block key={b.id} b={b} />)}
            {(!a.blocks || a.blocks.length === 0) && <p className="muted">This post has no content yet.</p>}
          </div>
          <div style={{ clear: "both" }} />
          <ArticleFooter article={a} />
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wrap">
          <Kicker>Keep reading</Kicker>
          <div className="grid cols-3">
            {more.map((n) => (
              <article key={n.id} className="film-card" onClick={() => navigate("/news/" + n.id)}>
                {(n.cover || firstBlockImage(n))
                  ? <div style={{ aspectRatio:"16/10", overflow:"hidden", borderRadius:4 }}><img src={n.cover||firstBlockImage(n)} alt={n.title} style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} /></div>
                  : <Frame seed={n.title} ratio="16/10" style={{ borderRadius: 4 }} />
                }
                <div className="meta">
                  <div className="toprow"><span className="tag">{n.category}</span><span className="label muted">{fmtDate(n.date)}</span></div>
                  <div className="title" style={{ fontSize: 22 }}>{n.title}</div>
                  <div className="sub">By {n.author}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </Page>
  );
}

// ── Site carousel widget ─────────────────────────────────────────────────────
function SiteCarousel({ images, renderSlide, style={} }) {
  const [cur, setCur]       = React.useState(0);
  const [phase, setPhase]   = React.useState('idle'); // idle | setup | animating
  const [slotsConf, setSlotsConf] = React.useState([]);
  const [trackX, setTrackX] = React.useState(0);
  const [targetX, setTargetX] = React.useState(0);
  const pendingRef = React.useRef(null);
  const touchX     = React.useRef(null);
  const total = images.length;
  if (!total) return null;

  const navigate = (dir) => {
    if (phase !== 'idle') return;
    const next = cur + (dir === 'next' ? 1 : -1);
    if (next < 0 || next >= total) return;
    pendingRef.current = next;

    if (dir === 'next') {
      // [cur, next] — start at 0, animate to -100
      setSlotsConf([{ idx: cur }, { idx: next }]);
      setTrackX(0);
      setTargetX(-100);
    } else {
      // [prev, cur] — start at -100 (showing cur), animate to 0 (showing prev)
      setSlotsConf([{ idx: next }, { idx: cur }]);
      setTrackX(-100);
      setTargetX(0);
    }
    setPhase('setup');
  };

  // After 'setup' renders the initial position (no transition), kick off animation
  React.useEffect(() => {
    if (phase === 'setup') {
      requestAnimationFrame(() => requestAnimationFrame(() => setPhase('animating')));
    }
  }, [phase]);

  const onTransitionEnd = () => {
    if (phase !== 'animating') return;
    setCur(pendingRef.current);
    pendingRef.current = null;
    setPhase('idle');
    setSlotsConf([]);
  };

  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
  const onTouchEnd   = (e) => {
    if (touchX.current === null) return;
    const delta = e.changedTouches[0].clientX - touchX.current;
    touchX.current = null;
    if (Math.abs(delta) < 40) return;
    navigate(delta < 0 ? 'next' : 'prev');
  };

  const displaySlots = phase === 'idle' ? [{ idx: cur }] : slotsConf;
  const currentX     = phase === 'animating' ? targetX : (phase === 'setup' ? trackX : 0);
  const transition   = phase === 'animating' ? 'transform 0.45s cubic-bezier(0.16,1,0.3,1)' : 'none';

  const arrowStyle = (disabled) => ({
    position:"absolute", top:"50%", transform:"translateY(-50%)", zIndex:2,
    background: disabled ? "rgba(0,0,0,0.25)" : "var(--accent)", color:"#fff",
    border:"none", borderRadius:0, width:32, height:32,
    cursor: disabled ? "default" : "pointer",
    display:"flex", alignItems:"center", justifyContent:"center",
    transition:"background 0.15s",
  });

  return (
    <div style={{ position:"relative", userSelect:"none", width:"100%", overflow:"hidden", ...style }}
      onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
      <div onTransitionEnd={onTransitionEnd}
        style={{ display:"flex", width:"100%", transform:`translateX(${currentX}%)`, transition, willChange:"transform" }}>
        {displaySlots.map((slot, i) => (
          <div key={i} style={{ flexShrink:0, width:"100%" }}>
            {renderSlide(images[slot.idx], slot.idx)}
          </div>
        ))}
      </div>
      {total > 1 && (
        <>
          <button onClick={() => navigate('prev')} disabled={cur===0}
            onMouseEnter={e => { if(cur!==0){ e.currentTarget.style.background="#fff"; e.currentTarget.style.color="var(--ink)"; }}}
            onMouseLeave={e => { e.currentTarget.style.background=cur===0?"rgba(0,0,0,0.25)":"var(--accent)"; e.currentTarget.style.color="#fff"; }}
            style={{ ...arrowStyle(cur===0), left:6 }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{width:14,height:14}}><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <button onClick={() => navigate('next')} disabled={cur===total-1}
            onMouseEnter={e => { if(cur!==total-1){ e.currentTarget.style.background="#fff"; e.currentTarget.style.color="var(--ink)"; }}}
            onMouseLeave={e => { e.currentTarget.style.background=cur===total-1?"rgba(0,0,0,0.25)":"var(--accent)"; e.currentTarget.style.color="#fff"; }}
            style={{ ...arrowStyle(cur===total-1), right:6 }}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{width:14,height:14}}><path d="M9 18l6-6-6-6"/></svg>
          </button>
          <div style={{ position:"absolute", bottom:8, left:"50%", transform:"translateX(-50%)", display:"flex", gap:6, zIndex:2 }}>
            {Array.from({length:total},(_,i) => (
              <span key={i} onClick={() => navigate(i > cur ? 'next' : 'prev')}
                style={{ width:i===cur?16:5, height:5, borderRadius:0, background:i===cur?"var(--accent)":"rgba(255,255,255,.45)", cursor:"pointer", display:"block", transition:"all .2s" }} />
            ))}
          </div>
        </>
      )}
    </div>
  );
}


function SitePosImg({ src, posX=50, posY=50, zoom=100, alt="", aspect="16/9", style={}, forceAspect=false }) {
  const [usedAspect, setUsedAspect] = React.useState(aspect);
  const [naturalW, setNaturalW] = React.useState(null);
  const scale = zoom / 100;
  const { borderRadius, ...containerStyle } = style;
  const onImgLoad = e => {
    const {naturalWidth:w,naturalHeight:h}=e.target;
    if(w&&h) { if(!forceAspect) setUsedAspect(`${w}/${h}`); setNaturalW(w); }
  };
  const maxW = naturalW ? `${naturalW}px` : "none";
  if (scale <= 1 && !forceAspect) {
    return (
      <div style={{ overflow:"hidden", borderRadius, maxWidth:maxW, width:"100%", marginLeft:"auto", marginRight:"auto", ...containerStyle }}>
        <img src={src} alt={alt} onLoad={onImgLoad}
          style={{ display:"block", width:`${scale*100}%`, height:"auto", margin:"0 auto", borderRadius }} />
      </div>
    );
  }
  return (
    <div style={{ position:"relative", aspectRatio: forceAspect ? aspect : usedAspect, overflow:"hidden", borderRadius, maxWidth:maxW, width:"100%", marginLeft:"auto", marginRight:"auto", ...containerStyle }}>
      <img src={src} alt={alt} onLoad={onImgLoad}
        style={{ position:"absolute", width:`${scale*100}%`, height:"auto", left:`${(1-scale)*posX}%`, top:`${(1-scale)*posY}%`, display:"block", maxWidth:"none", borderRadius }} />
    </div>
  );
}

// Helper: get first real image URL from blocks
function firstBlockImage(article) {
  for (const b of (article.blocks || [])) {
    if (b.imageUrl) return b.imageUrl;
    if (b.images && b.images[0] && b.images[0].url) return b.images[0].url;
  }
  return null;
}

function Block({ b }) {

  // Rich text — HTML from the block editor, or legacy plain text
  if (b.type === "text") {
    if (b.html) return <div className="rte-output" dangerouslySetInnerHTML={{ __html: b.html }} />;
    return <p>{b.text}</p>;
  }

  // Standalone heading block
  if (b.type === "heading") {
    const Tag = b.level || "h2";
    return <Tag className={`a-heading a-heading-${b.level || "h2"}`} style={{ fontFamily:b.fontFamily||undefined, fontSize:b.fontSize||undefined, color:b.color||undefined }}>{b.text}</Tag>;
  }

  // Carousel + Text side by side
  if (b.type === "carousel-text") {
    const isLeft = b.imagePos !== "right";
    const w = parseInt(b.imageWidth || "40", 10);
    const cols = isLeft ? `${w}% 1fr` : `1fr ${w}%`;
    const imgs = (b.images && b.images.length) ? b.images.filter(i => i.url) : [];
    const imgEl = (
      <figure className="a-image-text-img" style={{ minWidth:0, maxWidth:"100%" }}>
        {imgs.length > 0
          ? <SiteCarousel images={imgs} style={{ borderRadius:4 }}
              renderSlide={(img, i) => <div onClick={() => openLightbox(imgs.map(im => ({ url:im.url, caption:im.caption })), i)} style={{ cursor:"zoom-in" }}><SitePosImg src={img.url} posX={img.posX??50} posY={img.posY??50} zoom={img.zoom??100} alt="" aspect="4/3" style={{ borderRadius:4 }} /></div>}
            />
          : <Frame seed="carousel" ratio="4/3" style={{ borderRadius:4 }} />
        }
      </figure>
    );
    const txtEl = <div className="rte-output a-image-text-body" dangerouslySetInnerHTML={{ __html: b.html || "" }} />;
    return (
      <div className="a-image-text" style={{ gridTemplateColumns: cols }}>
        {isLeft ? <>{imgEl}{txtEl}</> : <>{txtEl}{imgEl}</>}
      </div>
    );
  }

  // Image + Text side by side
  if (b.type === "image-text") {
    const isLeft = b.imagePos !== "right";
    const w = parseInt(b.imageWidth || "40", 10);
    const cols = isLeft ? `${w}% 1fr` : `1fr ${w}%`;
    const imgEl = (
      <figure className="a-image-text-img" style={{ minWidth:0, maxWidth:"100%" }}>
        {b.imageUrl
          ? <div onClick={() => openLightbox([{ url: b.imageUrl, caption: b.caption }], 0)} style={{ cursor:"zoom-in" }}><SitePosImg src={b.imageUrl} posX={b.posX??50} posY={b.posY??50} zoom={b.zoom??100} alt={b.caption||""} aspect="4/3" style={{ borderRadius:4 }} /></div>
          : <Frame seed={b.html || "photo"} ratio="4/3" style={{ borderRadius: 8 }} />
        }
        {b.caption && <figcaption>{b.caption}</figcaption>}
      </figure>
    );
    const txtEl = (
      <div className="rte-output a-image-text-body"
        dangerouslySetInnerHTML={{ __html: b.html || "" }} />
    );
    return (
      <div className="a-image-text" style={{ gridTemplateColumns: cols }}>
        {isLeft ? <>{imgEl}{txtEl}</> : <>{txtEl}{imgEl}</>}
      </div>
    );
  }

  // Section divider
  if (b.type === "divider") return <hr className="a-divider" />;

  // Pull quote
  if (b.type === "quote") return (
    <blockquote>
      <div className="q" style={{ fontFamily:b.qFontFamily||undefined, fontSize:b.qFontSize||undefined, color:b.qColor||undefined }}>{b.text}</div>
      {b.cite && <div className="c" style={{ fontFamily:b.aFontFamily||undefined, fontSize:b.aFontSize||undefined, color:b.aColor||undefined }}>— {b.cite}</div>}
    </blockquote>
  );

  // Image (full / wide / inset / float left / float right)
  if (b.type === "image") {
    const isFloat = b.layout === "left" || b.layout === "right";
    const ratio = b.layout === "wide" ? "21/9" : "16/9";
    const cls = ["a-figure", b.layout, isFloat ? "float-img" : ""].filter(Boolean).join(" ");
    return (
      <figure className={cls}>
        {b.imageUrl
          ? <div onClick={() => openLightbox([{ url: b.imageUrl, caption: b.caption }], 0)} style={{ cursor:"zoom-in" }}><SitePosImg src={b.imageUrl} posX={b.posX??50} posY={b.posY??50} zoom={b.zoom??100} alt={b.caption||""} aspect={ratio} style={{ borderRadius:4 }} /></div>
          : <Frame seed={b.caption || b.layout} ratio={ratio} style={{ borderRadius: 4 }} />
        }
        {b.caption && <figcaption>{b.caption}</figcaption>}
      </figure>
    );
  }

  // Gallery
  if (b.type === "gallery") {
    const imgs = (b.images && b.images.length) ? b.images : Array.from({length:b.count||0},(_,i)=>({id:i,url:"",posX:50,posY:50,zoom:100}));
    if (b.layout === "carousel") {
      const cw = (b.carouselWidth || "100") + "%";
      const validImgs = imgs.filter(i => i.url);
      return (
        <figure className="a-figure" style={{ margin:"24px 0" }}>
          <div style={{ width:cw, marginLeft:"auto", marginRight:"auto" }}>
          {validImgs.length > 0
            ? <SiteCarousel images={validImgs} style={{ borderRadius:4 }}
                renderSlide={(img, i) => <div onClick={() => openLightbox(validImgs.map(im => ({ url: im.url, caption: im.caption })), i)} style={{ cursor:"zoom-in" }}><SitePosImg src={img.url} posX={img.posX??50} posY={img.posY??50} zoom={img.zoom??100} alt="" aspect="16/9" style={{ borderRadius:4 }} /></div>}
              />
            : <Frame seed="gallery-carousel" ratio="16/9" style={{ borderRadius:4 }} />
          }
          </div>
          {b.caption && <figcaption style={{ textAlign:"center", marginTop:8 }}>{b.caption}</figcaption>}
        </figure>
      );
    }
    const cols = b.layout === "grid" ? 2 : b.layout === "row" ? Math.min(imgs.length||1, 4) : 1;
    const ar = b.layout === "stack" ? "16/9" : "4/3";
    return (
      <figure className="a-figure full">
        <div className="grid" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 10 }}>
          {imgs.map((img, i) => img.url
            ? <div key={img.id||i} onClick={() => openLightbox(imgs.filter(im=>im.url).map(im=>({ url:im.url, caption:im.caption })), imgs.filter(im=>im.url).findIndex(im=>im===img))} style={{ cursor:"zoom-in" }}><SitePosImg src={img.url} posX={img.posX??50} posY={img.posY??50} zoom={img.zoom??100} aspect={ar} style={{ borderRadius:4 }} /></div>
            : <Frame key={img.id||i} seed={(b.label||"g")+i} ratio={ar} style={{ borderRadius: 4 }} />
          )}
        </div>
        {b.caption && <figcaption>{b.caption}</figcaption>}
      </figure>
    );
  }

  return null;
}

// ── Article footer — category + social share ──────────────────────────────────
function ArticleFooter({ article }) {
  const [copied, setCopied] = React.useState(false);

  const pageUrl = () => {
    if (location.protocol === "file:") return "https://ljmumashortfilmfestival.org/og.php?id=" + encodeURIComponent(article.id);
    const base = location.href.split("#")[0].replace(/\/[^/]*$/, "/");
    return base + "og.php?id=" + encodeURIComponent(article.id);
  };

  const share = (platform) => {
    const url = encodeURIComponent(pageUrl());
    const txt = encodeURIComponent(article.title + " — LJMU MA Short Film Festival");
    const targets = {
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
      linkedin:  `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${txt}`,
      bluesky:   `https://bsky.app/intent/compose?text=${txt}%20${url}`,
      threads:   `https://www.threads.net/intent/post?text=${txt}%20${url}`,
    };
    window.open(targets[platform], "_blank", "width=620,height=480,noopener");
  };

  const copyLink = async () => {
    const url = pageUrl();
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true); setTimeout(() => setCopied(false), 2000);
    } catch {
      try {
        const el = document.createElement("textarea");
        el.value = url; el.style.cssText = "position:fixed;opacity:0;top:0;left:0";
        document.body.appendChild(el); el.select();
        document.execCommand("copy"); document.body.removeChild(el);
        setCopied(true); setTimeout(() => setCopied(false), 2000);
      } catch {}
    }
  };

  const PLATFORMS = [
    { id: "facebook", label: "Facebook",  icon: "M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" },
    { id: "linkedin", label: "LinkedIn",  icon: "M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2zM4 6a2 2 0 100-4 2 2 0 000 4z" },
    { id: "bluesky",  label: "Bluesky",   icon: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V9h2v7zm4 0h-2V9h2v7z" },
    { id: "threads",  label: "Threads",   icon: "M12 2a10 10 0 100 20A10 10 0 0012 2zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" },
  ];

  return (
    <div className="article-foot">
      {/* Category */}
      <div className="article-foot-meta">
        <span className="label muted">Category:</span>
        <span className="tag solid" style={{ cursor: "default" }}>{article.category}</span>
      </div>

      {/* Share bar */}
      <div className="article-foot-share">
        <span className="label muted" style={{ letterSpacing: ".14em", textTransform: "uppercase" }}>Share</span>
        <div className="share-btns">
          {PLATFORMS.map(p => (
            <button key={p.id} className="share-btn" onClick={() => share(p.id)} title={`Share on ${p.label}`}>
              <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                <path d={p.icon} />
              </svg>
              <span>{p.label}</span>
            </button>
          ))}
          <button className="share-btn copy-btn" onClick={copyLink} title="Copy link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="15" height="15">
              <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
            </svg>
            <span>{copied ? "Copied!" : "Copy link"}</span>
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NewsIndex, Article, firstBlockImage });