/* Shared blog article shell: used by every blog post.
   Pass `meta` (header info) and `children` (the prose).
   Renders: hero, sticky aside (meta), prose column, sticky TOC, related strip. */

function BlogArticle({ meta, toc, children, related }) {
  useReveal();
  return (
    <>
      <Header basePath="../"/>

      {/* Hero */}
      <section className="article-hero">
        <div className="container">
          <div className="reveal" style={{maxWidth: "22ch"}}>
            <span className="article-tag" style={{marginBottom: 28, display: "inline-flex"}}>
              <span className="tag-dot"/>{meta.category}
            </span>
          </div>
          <h1 className="display-2 reveal" style={{maxWidth: "20ch", marginBottom: 32}}>
            {meta.title}{meta.italic && <> <span className="h-italic">{meta.italic}</span></>}
          </h1>
          <p className="lead reveal" style={{maxWidth: "62ch", marginBottom: 40}}>{meta.lead}</p>
          <div className="article-meta reveal">
            <span><span className="ochre-dot dot" style={{display:"inline-block", marginRight: 10, verticalAlign: "middle"}}/>By {meta.author || "Auctera"}</span>
            <span className="dot"/>
            <span>{meta.date}</span>
            <span className="dot"/>
            <span>{meta.readTime}</span>
          </div>
        </div>
      </section>

      {/* Body */}
      <section className="section">
        <div className="container">
          <div className="article-grid">
            {/* LEFT: meta sidebar */}
            <aside className="article-aside reveal">
              <div className="group">
                <span className="label">Filed under</span>
                <span className="val">{meta.category}</span>
              </div>
              {meta.tags && (
                <div className="group">
                  <span className="label">Topics</span>
                  <div style={{display:"flex", flexWrap:"wrap", gap:6, marginTop:6}}>
                    {meta.tags.map((t,i)=>(
                      <span key={i} style={{
                        fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em",
                        textTransform:"uppercase", color:"var(--ink-2)",
                        padding:"5px 9px", border:"1px solid var(--line)", borderRadius: 4
                      }}>{t}</span>
                    ))}
                  </div>
                </div>
              )}
              <div className="group">
                <span className="label">Share</span>
                <div style={{display:"flex", gap:10, marginTop:6}}>
                  <ShareLink kind="x" href="#"/>
                  <ShareLink kind="li" href="#"/>
                  <ShareLink kind="link" href="#"/>
                </div>
              </div>
            </aside>

            {/* CENTER: prose */}
            <article className="prose">
              {children}
            </article>

            {/* RIGHT - TOC */}
            <aside className="article-toc-col">
              <nav className="article-toc reveal">
                <div className="toc-eyebrow">In this article</div>
                <ol>
                  {toc.map((t,i)=>(
                    <li key={i}><a href={`#${t.id}`}>{t.label}</a></li>
                  ))}
                </ol>
              </nav>
            </aside>
          </div>
        </div>
      </section>

      {/* Related */}
      {related && related.length > 0 && (
        <section className="section-tight" style={{paddingBottom: "clamp(72px, 10vw, 140px)"}}>
          <div className="container">
            <div style={{marginBottom: 32}} className="reveal">
              <div className="eyebrow eyebrow-dot" style={{marginBottom: 14}}>Keep Reading</div>
              <h3 className="display-3" style={{margin:0}}>Related <span className="h-italic">articles.</span></h3>
            </div>
            <div className="article-related reveal-stagger">
              {related.map((r,i)=>(
                <a key={i} href={r.href}>
                  <span className="ra-cat">{r.category}</span>
                  <span className="ra-title">{r.title}</span>
                  <span className="ra-meta">{r.readTime} · Read →</span>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* CTA */}
      <FinalCTASection
        title="Stop optimizing in the dark."
        italic="Start optimizing on truth."
        body="See how Auctera unifies DSP, affiliate, retargeting, measurement, and brand safety in one operating view: so every channel finally agrees on what's working."
        primary={{ label: "Talk to sales", href: "contact" }}
        secondary={{ label: "Explore the platform", href: "platform-overview" }}
        micro="ENTERPRISE-READY · GDPR · SOC 2 TYPE II"
      />

      <Footer basePath="../"/>
    </>
  );
}

function ShareLink({ kind }) {
  const icons = {
    x: <path d="M3 3l8 9.5L3 21h2l7-7.8L17.5 21H21l-8.4-10L20.5 3H18.5l-6.6 7.4L6.5 3H3z"/>,
    li: <path d="M4 4h3v13H4V4zm1.5-2.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 7h3v1.6c.5-.9 1.7-1.8 3.5-1.8 3.7 0 4.5 2.4 4.5 5.5V17h-3v-4.4c0-1.1 0-2.5-1.6-2.5s-1.9 1.2-1.9 2.4V17h-3V7z"/>,
    link: <path d="M9 13a4 4 0 005.7 0l3-3a4 4 0 10-5.7-5.7l-1 1m-1 9a4 4 0 01-5.7 0 4 4 0 010-5.7l3-3a4 4 0 015.7 0" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  };
  const [copied, setCopied] = React.useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    const url = window.location.href;
    if (kind === "x") {
      window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}`, "_blank");
    } else if (kind === "li") {
      window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`, "_blank");
    } else if (kind === "link") {
      navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
    <a href="#" onClick={handleClick} aria-label={kind} style={{
      width:32, height:32, borderRadius:"50%", border:"1px solid var(--line-strong)",
      display:"grid", placeItems:"center", color: copied ? "var(--ochre)" : "var(--ink-2)",
      transition:"all .2s var(--ease-out)", cursor: "pointer"
    }}
       onMouseEnter={e=>{e.currentTarget.style.background="var(--ink)"; e.currentTarget.style.color="var(--paper)"; e.currentTarget.style.borderColor="var(--ink)";}}
       onMouseLeave={e=>{e.currentTarget.style.background="transparent"; e.currentTarget.style.color=copied ? "var(--ochre)" : "var(--ink-2)"; e.currentTarget.style.borderColor="var(--line-strong)";}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill={kind==="link"?"none":"currentColor"}>{icons[kind]}</svg>
    </a>
  );
}

/* Helpers: small components for prose convenience */
function H2({ id, children }) { return <h2 id={id}>{children}</h2>; }
function H3({ id, children }) { return <h3 id={id}>{children}</h3>; }
function Tldr({ items }) {
  return (
    <div className="tldr">
      <div className="label">TL;DR</div>
      <ul>{items.map((it,i)=><li key={i}>{it}</li>)}</ul>
    </div>
  );
}
function Quote({ children }) { return <blockquote>{children}</blockquote>; }

/* Internal link to another Auctera page (resolved relative to /pages) */
function L({ to, children }) {
  // Map "/platform/foo" → "platform-foo"; "/capabilities/foo" → "capabilities-foo"
  const mapped = to.replace(/^\//, "").replace(/^([^/]+)\/(.+)$/, (m, a, b) => `${a}-${b}`).replace(/\//g, "-");
  return <a href={mapped}>{children}</a>;
}

Object.assign(window, { BlogArticle, H2, H3, Tldr, Quote, L });