// Blog page — listing with featured + grid, filter chips, and an individual post layout
// toggled via local state. Footer + nav shared.

const { useState: useBl } = React;

const CATEGORIES = ['All', 'NIS2', 'Threat Intel', 'Product', 'Case Studies'];

// Posts are loaded from posts-data.js (external file, never overwritten by Claude Design exports)
const POSTS = window.VANTUZ_POSTS || [];

function PlaceholderArt({ tone = 'blue', short = false, image = null }) {
  if (image) {
    return (
      <div style={{position:'relative', aspectRatio: short ? '1.6 / 1' : '2.3 / 1', borderRadius:10, overflow:'hidden'}}>
        <img src={image} alt="" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
      </div>
    );
  }
  const palette = tone === 'vinho'
    ? { a: '#3a1018', b: '#6b1e2e', c: '#8a2b3f' }
    : { a: '#0a1238', b: '#2a3aa0', c: '#4a6df5' };
  return (
    <div style={{
      position:'relative',
      aspectRatio: short ? '1.6 / 1' : '2.3 / 1',
      borderRadius: 10,
      overflow:'hidden',
      background: `linear-gradient(135deg, ${palette.a} 0%, ${palette.b} 55%, ${palette.c} 100%)`,
    }}>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage: `repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 12px)`,
      }}/>
      <div style={{
        position:'absolute', inset:0,
        backgroundImage: 'radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.18), transparent 55%)',
        mixBlendMode:'screen',
      }}/>
      <div className="mono" style={{
        position:'absolute', left:18, bottom:14, fontSize:10,
        color:'rgba(255,255,255,.55)', letterSpacing:'.22em', textTransform:'uppercase',
      }}>
        [ field visual · placeholder ]
      </div>
    </div>
  );
}

function FeaturedCard({ post, onOpen }) {
  return (
    <article style={{
      display:'grid', gridTemplateColumns:'minmax(0,1.05fr) minmax(0,1fr)', gap:48,
      padding:'32px 32px', border:'1px solid var(--ink-line)', borderRadius:18,
      background:'linear-gradient(180deg, rgba(74,109,245,.08), rgba(10,12,18,.6))',
      alignItems:'center',
    }} className="featured-grid">
      <PlaceholderArt image={post.image || null}/>
      <div>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:18}}>
          <span className="chip" style={{borderColor:'rgba(108,139,255,.45)', color:'var(--aurora-2)'}}>● FEATURED</span>
          <span className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase'}}>{post.cat}</span>
        </div>
        <h3 className="display" style={{
          fontSize:'clamp(28px, 3.2vw, 46px)', margin:0, color:'#fff',
          letterSpacing:'-.025em', lineHeight:1.05, fontWeight:600,
        }}>
          {post.title}
        </h3>
        <p style={{fontSize:16, lineHeight:1.55, color:'var(--txt-2)', marginTop:18, marginBottom:24, maxWidth:520}}>
          {post.excerpt}
        </p>
        <div style={{display:'flex', alignItems:'center', gap:18}}>
          <button onClick={onOpen} className="btn btn-white btn-sm">Read <span aria-hidden>→</span></button>
          <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.12em'}}>
            {post.date} · {post.read}
          </div>
        </div>
      </div>
    </article>
  );
}

function PostCard({ post, onOpen }) {
  return (
    <article className="card" style={{padding:'22px 22px 24px', display:'flex', flexDirection:'column', gap:14, cursor:'pointer'}}
             onClick={onOpen}>
      <PlaceholderArt short image={post.image || null} tone={post.cat === 'Case Studies' ? 'vinho' : 'blue'}/>
      <div className="mono" style={{fontSize:10, color:'var(--aurora-2)', letterSpacing:'.22em', textTransform:'uppercase'}}>
        {post.cat}
      </div>
      <h4 className="display" style={{fontSize:22, lineHeight:1.15, margin:0, color:'#fff', fontWeight:600, letterSpacing:'-.02em'}}>
        {post.title}
      </h4>
      <p style={{fontSize:14, lineHeight:1.55, color:'var(--txt-2)', margin:0, flex:1}}>
        {post.excerpt}
      </p>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:6}}>
        <div className="mono" style={{fontSize:11, color:'var(--txt-4)', letterSpacing:'.1em'}}>
          {post.date} · {post.read}
        </div>
        <span style={{color:'var(--aurora-2)', fontSize:13}}>Read →</span>
      </div>
    </article>
  );
}

function FilterBar({ value, onChange }) {
  return (
    <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
      {CATEGORIES.map(c => {
        const active = c === value;
        return (
          <button
            key={c}
            onClick={() => onChange(c)}
            style={{
              padding:'10px 18px', borderRadius:999,
              border: active ? '1px solid #fff' : '1px solid var(--ink-line)',
              background: active ? '#fff' : 'transparent',
              color: active ? '#0a0a0a' : 'var(--txt-2)',
              fontSize:13, fontWeight:500,
              transition:'all .18s ease',
            }}
          >
            {c}
          </button>
        );
      })}
    </div>
  );
}

function PostView({ post, onBack }) {
  return (
    <>
      <PageHero
        eyebrow={`${post.cat.toUpperCase()} · ${post.read.toUpperCase()}`}
        title={post.title}
        subtitle={post.excerpt}
      >
        <button
          onClick={onBack}
          className="btn btn-outline-white btn-sm"
          style={{marginTop:8}}
        >
          ← All field notes
        </button>
      </PageHero>

      <section className="bg-ink" style={{padding:'100px 0 140px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'minmax(0,.28fr) minmax(0,1fr)', gap:64, alignItems:'flex-start'}} className="post-grid">
            {/* Sidebar */}
            <aside style={{position:'sticky', top:120}}>
              <div style={{display:'flex', flexDirection:'column', gap:24}}>
                <div>
                  <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:6}}>Category</div>
                  <div style={{fontSize:14, color:'var(--aurora-2)'}}>{post.cat}</div>
                </div>
                <div>
                  <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:6}}>Published</div>
                  <div style={{fontSize:14, color:'#fff'}}>{post.date}</div>
                </div>
                <div>
                  <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:6}}>Read time</div>
                  <div style={{fontSize:14, color:'#fff'}}>{post.read}</div>
                </div>
                {post.tags && (
                  <div>
                    <div className="mono" style={{fontSize:10, color:'var(--txt-4)', letterSpacing:'.22em', textTransform:'uppercase', marginBottom:8}}>Tags</div>
                    <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
                      {post.tags.map(t => (
                        <span key={t} className="mono" style={{
                          fontSize:11, padding:'4px 10px', border:'1px solid var(--ink-line)',
                          borderRadius:999, color:'var(--txt-2)', letterSpacing:'.05em',
                        }}>
                          {t}
                        </span>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </aside>

            {/* Body */}
            <div style={{maxWidth: 720}}>
              <div style={{marginBottom:40}}>
                <PlaceholderArt image={post.image || null}/>
              </div>

              <div
                className="post-body"
                dangerouslySetInnerHTML={{__html: post.content || '<p>Coming soon.</p>'}}
              />

              <div style={{marginTop:64, paddingTop:32, borderTop:'1px solid var(--ink-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:18}}>
                <a href="https://app.vantuz.co/login" className="btn btn-white">Deploy your first honeytoken <span aria-hidden>→</span></a>
                <button onClick={onBack} className="btn btn-outline-white btn-sm">← All field notes</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function ListView({ onOpen }) {
  const [filter, setFilter] = useBl('All');
  const featured = POSTS.find(p => p.featured);
  const rest = POSTS.filter(p => !p.featured).filter(p => filter === 'All' || p.cat === filter);

  return (
    <>
      <PageHero
        eyebrow="FIELD NOTES · THREAT INTEL"
        title={<>Field notes.</>}
        subtitle="Threat intelligence, NIS2 compliance, and deception security — written for practitioners."
      />

      <section className="bg-ink" style={{padding:'80px 0 60px', borderTop:'1px solid var(--ink-line)', position:'relative'}}>
        <div className="wrap">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:48, gap:24, flexWrap:'wrap'}}>
            <FilterBar value={filter} onChange={setFilter}/>
            <div className="mono" style={{fontSize:11, color:'var(--txt-3)', letterSpacing:'.15em', textTransform:'uppercase'}}>
              {rest.length + (featured && (filter === 'All' || featured.cat === filter) ? 1 : 0)} posts
            </div>
          </div>

          {filter === 'All' && featured && (
            <div style={{marginBottom:48}}>
              <FeaturedCard post={featured} onOpen={() => onOpen(featured)}/>
            </div>
          )}

          <div style={{display:'grid', gridTemplateColumns:'repeat(3, minmax(0,1fr))', gap:18}} className="blog-grid">
            {rest.map(p => <PostCard key={p.id} post={p} onOpen={() => onOpen(p)}/>)}
          </div>

          {rest.length === 0 && (
            <div style={{textAlign:'center', padding:'60px 0', color:'var(--txt-3)'}}>
              No posts in this category yet. Check back soon.
            </div>
          )}
        </div>
      </section>

      <PageCTA
        kicker="FILE № 09 · DEPLOY"
        title={<>Stop reading.<br/>Start watching.</>}
        primary="Deploy your first token"
        primaryHref="https://app.vantuz.co/login"
        secondary="Get in touch"
      />
    </>
  );
}

function BlogPage() {
  const [openPost, setOpenPost] = useBl(null);

  React.useEffect(() => {
    if (openPost) window.scrollTo({top:0, behavior:'instant'});
  }, [openPost]);

  return (
    <>
      <Nav current="Blog"/>
      {openPost
        ? <PostView post={openPost} onBack={() => setOpenPost(null)}/>
        : <ListView onOpen={setOpenPost}/>
      }
      <FooterSection/>

      <style>{`
        @media (max-width: 1100px){
          .featured-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
          .blog-grid     { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
          .post-grid     { grid-template-columns: 1fr !important; gap: 40px !important; }
          /* Sticky sidebar overlaps body text once the column stacks. */
          .post-grid > aside { position: static !important; top: auto !important; }
        }
        @media (max-width: 640px){
          .blog-grid     { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BlogPage/>);