// Blog / Journal section
const Blog = () => {
  return (
    <Section
      id="blog"
      label="05 / Journal"
      kicker="Field notes from active builds"
      title="What we're thinking about."
      subtitle="Engineering essays, post-mortems, and the occasional half-baked idea. Posted when there's something to say — not on a content calendar."
    >
      <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:24}}>
        <FeaturedPost p={POSTS[0]}/>
        <div style={{display:'flex',flexDirection:'column',gap:16}}>
          {POSTS.slice(1).map(p => <PostRow key={p.id} p={p}/>)}
        </div>
      </div>

      <div style={{marginTop:48, padding:'24px 32px', border:'1px solid var(--line)', borderRadius:'var(--radius)',
        background:'linear-gradient(135deg, rgba(212,255,58,0.04), transparent)',
        display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, flexWrap:'wrap'}}>
        <div>
          <div style={{fontSize:18,fontWeight:500,letterSpacing:'-0.01em',marginBottom:6}}>The Atoms newsletter</div>
          <div style={{fontSize:14,color:'var(--ink-3)',maxWidth:480}}>
            One essay, one tool, one case-study link. Sent the Friday after we ship anything worth talking about.
          </div>
        </div>
        <div style={{display:'flex',gap:8,minWidth:340}}>
          <input type="email" placeholder="you@company.com" style={{
            flex:1, padding:'12px 14px', borderRadius:8, background:'var(--bg-3)',
            border:'1px solid var(--line-2)', color:'var(--ink)', fontSize:13, fontFamily:'var(--sans)', outline:'none'
          }}/>
          <button className="btn btn-primary" style={{padding:'10px 16px',fontSize:13}}>Subscribe</button>
        </div>
      </div>
    </Section>
  );
};

const FeaturedPost = ({ p }) => (
  <article className="card clickable" style={{padding:0, overflow:'hidden', display:'grid', gridTemplateRows:'auto 1fr'}}>
    <div style={{aspectRatio:'16/9', position:'relative', background:`linear-gradient(135deg, ${p.cover}33 0%, #0a0a0a 80%)`, borderBottom:'1px solid var(--line)'}}>
      <svg style={{position:'absolute',inset:0,width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="postPat" width="32" height="32" patternUnits="userSpaceOnUse">
            <path d="M0 16 L32 16 M16 0 L16 32" stroke={p.cover} strokeWidth="0.5" opacity="0.18"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#postPat)"/>
        <text x="32" y="36" fontFamily="JetBrains Mono" fontSize="11" fill={p.cover} opacity="0.7" letterSpacing="0.08em">JOURNAL · {p.category.toUpperCase()}</text>
      </svg>
      <div style={{position:'absolute', bottom:24, left:24, right:24, display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
        <div style={{display:'flex',gap:6}}>
          <Tag accent>Featured</Tag>
          <Tag>{p.category}</Tag>
        </div>
        <span className="mono" style={{fontSize:11, color:'var(--ink-2)', background:'rgba(0,0,0,0.5)', padding:'4px 8px', borderRadius:6, letterSpacing:'0.04em'}}>{p.read}</span>
      </div>
    </div>
    <div style={{padding:'28px 32px 32px'}}>
      <h3 style={{fontSize:28, letterSpacing:'-0.025em', fontWeight:500, lineHeight:1.15, marginBottom:14}}>{p.title}</h3>
      <p style={{color:'var(--ink-2)', fontSize:15, lineHeight:1.55, marginBottom:20}}>{p.excerpt}</p>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:18, borderTop:'1px solid var(--line)'}}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <span style={{width:28,height:28,borderRadius:'50%',background:`linear-gradient(135deg, ${p.cover}55, ${p.cover}22)`,border:`1px solid ${p.cover}44`}}/>
          <div>
            <div style={{fontSize:13, fontWeight:500}}>{p.author}</div>
            <div className="mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:'0.06em'}}>{p.date.toUpperCase()}</div>
          </div>
        </div>
        <span style={{color:'var(--ink-3)'}}>{Icon.arrow()}</span>
      </div>
    </div>
  </article>
);

const PostRow = ({ p }) => (
  <article className="card clickable" style={{padding:20, display:'grid', gridTemplateColumns:'80px 1fr', gap:18, alignItems:'center'}}>
    <div style={{aspectRatio:'1', borderRadius:8, position:'relative', overflow:'hidden',
      background:`linear-gradient(135deg, ${p.cover}44 0%, #0a0a0a 80%)`, border:'1px solid var(--line)'}}>
      <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center'}}>
        <span className="mono" style={{fontSize:10, color:p.cover, letterSpacing:'0.06em'}}>{p.category.slice(0,2).toUpperCase()}</span>
      </div>
    </div>
    <div>
      <div style={{display:'flex', gap:8, marginBottom:8}}>
        <Tag>{p.category}</Tag>
        <span className="mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:'0.06em', alignSelf:'center'}}>{p.read} · {p.date}</span>
      </div>
      <h4 style={{fontSize:16, fontWeight:500, lineHeight:1.3, letterSpacing:'-0.01em', marginBottom:6}}>{p.title}</h4>
      <div style={{fontSize:12, color:'var(--ink-3)'}}>by {p.author}</div>
    </div>
  </article>
);

window.Blog = Blog;
