// Blog — editorial index page. Pre-launch state: placeholder posts marked DRAFT,
// real content lands when ready. Mirrors About's top-strip + hero treatment.
const { useState: useStateBlog } = React;

function Blog(){
  const goHome     = (e)=>{ e.preventDefault(); window.location.hash = ''; };
  const goWaitlist = (e)=>{ e.preventDefault(); window.location.hash = '#/waitlist'; };
  const goContact  = (e)=>{ e.preventDefault(); window.location.hash = '#/contact'; };

  // Pre-launch: placeholder posts in nautilida's voice. Replace with real entries when ready.
  const posts = [
    {
      tag:'MANIFESTO',
      date:'APRIL 2026',
      title:'The weekly revenue coordination loop, explained.',
      dek:'Monday brief, mid-week execution, Friday recap, compounding memory. The operating rhythm that replaces dashboard anxiety with direction.',
      mins:'9 min',
      status:'live',
      accent:'lime',
      href:'#/blog/weekly-loop',
    },
    {
      tag:'DEFINITION',
      date:'APRIL 2026',
      title:'What is an AI team lead for sales?',
      dek:'A short definition, how it differs from assistants and dashboards, and what it actually does for revenue teams that live on recurring accounts.',
      mins:'7 min',
      status:'live',
      accent:'violet',
      href:'#/blog/ai-team-lead',
    },
  ];

  return (
    <main style={{minHeight:'100vh',background:'var(--bone)',color:'var(--ink)'}}>
      {/* Top strip */}
      <div style={{padding:'24px 28px',display:'flex',alignItems:'center',justifyContent:'space-between',
        borderBottom:'1px solid var(--ink-line)'}}>
        <a href="#" onClick={goHome}>
          <Wordmark size={24} tone="ink"/>
        </a>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <a href="#/contact" onClick={goContact} className="mono"
            style={{fontSize:11,letterSpacing:'.14em',color:'var(--ink-soft)',
              padding:'7px 12px',border:'1px solid var(--ink-line-2)',borderRadius:999}}>
            CONTACT →
          </a>
          <a href="#" onClick={goHome} className="mono"
            style={{fontSize:11,letterSpacing:'.14em',color:'var(--ink-soft)',
              padding:'7px 12px',border:'1px solid var(--ink-line-2)',borderRadius:999}}>
            ← BACK TO SITE
          </a>
        </div>
      </div>

      {/* Hero block */}
      <section style={{padding:'80px 0 48px'}}>
        <div className="container">
          <div className="eyebrow" style={{marginBottom:18}}>[ Notes from the lab ]</div>
          <h1 className="display" style={{margin:'0 0 22px',fontSize:'clamp(56px, 8vw, 116px)',lineHeight:.95,letterSpacing:'-.03em'}}>
            BLOG. <span className="serif-grad" style={{fontSize:'1.02em'}}>the journal.</span>
          </h1>
          <p style={{fontSize:18,color:'var(--ink-soft)',maxWidth:620,lineHeight:1.55,margin:0}}>
            Field notes from building Nauti. Manifestos, memory, and the boring engineering behind a quiet Monday brief. Light cadence, no newsletter spam.
          </p>
        </div>
      </section>

      {/* Pre-launch banner */}
      <section style={{padding:'0 0 32px'}}>
        <div className="container">
          <div style={{
            display:'flex',alignItems:'center',gap:14,flexWrap:'wrap',
            padding:'14px 18px',
            background:'var(--bone-3)',border:'1px dashed var(--ink-line-2)',borderRadius:12,
          }}>
            <span className="mono" style={{
              fontSize:10,letterSpacing:'.16em',color:'var(--violet)',
              background:'var(--violet-soft)',padding:'5px 9px',borderRadius:999,
            }}>// PRE-LAUNCH</span>
            <span style={{fontSize:14,color:'var(--ink-soft)',lineHeight:1.5}}>
              First posts land with our design partners. Want them in your inbox?
            </span>
            <a href="#/waitlist" onClick={goWaitlist} className="btn btn-primary" style={{padding:'8px 14px',fontSize:13,marginLeft:'auto'}}>
              Join the waitlist <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* Posts grid */}
      <section style={{padding:'24px 0 96px'}}>
        <div className="container">
          <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',
            borderTop:'1px solid var(--ink)',borderBottom:'1px solid var(--ink-line)',
            padding:'10px 0',marginBottom:24}}>
            <span className="mono" style={{fontSize:11,letterSpacing:'.16em',display:'inline-flex',alignItems:'center',gap:8}}>
              <span style={{width:6,height:6,borderRadius:999,background:'var(--violet)'}}/>
              JOURNAL <span style={{color:'var(--ink-quiet)',marginLeft:14}}>// 02 ENTRIES</span>
            </span>
            <span className="mono" style={{fontSize:11,color:'var(--ink-quiet)',letterSpacing:'.12em'}}>
              CADENCE · MONTHLY-ISH
            </span>
          </div>

          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))',gap:18}}>
            {posts.map((p,i)=>(
              <PostCard key={i} {...p} i={i}/>
            ))}
          </div>
        </div>
      </section>

      {/* Outro CTA */}
      <section style={{padding:'80px 0',background:'var(--bone-2)',borderTop:'1px solid var(--ink-line)'}}>
        <div className="container" style={{textAlign:'center'}}>
          <h2 className="display" style={{margin:'0 0 18px',fontSize:'clamp(36px, 5vw, 64px)',lineHeight:1.0}}>
            DON'T MISS{' '}
            <span className="serif-grad" style={{fontSize:'1.05em'}}>the first one.</span>
          </h2>
          <p style={{fontSize:16,color:'var(--ink-soft)',margin:'0 auto 28px',maxWidth:520,lineHeight:1.55}}>
            Posts go to the waitlist first. We send when we have something to say — never before.
          </p>
          <div style={{display:'flex',gap:10,alignItems:'center',justifyContent:'center',flexWrap:'wrap'}}>
            <a href="#/waitlist" onClick={goWaitlist} className="btn btn-primary">Join the waitlist <span className="arrow">→</span></a>
            <a href="#/contact"  onClick={goContact} className="btn">Pitch a topic</a>
          </div>
        </div>
      </section>

      <Footer/>
    </main>
  );
}

function PostCard({tag, date, title, dek, mins, status, accent, href, i}){
  const [hover, setHover] = useStateBlog(false);
  const isDraft = status === 'draft';
  const accentColor = accent === 'violet' ? 'var(--violet)' : 'var(--lime)';
  const onClick = ()=>{ if (!isDraft && href) window.location.hash = href; };
  return (
    <article
      onClick={onClick}
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        background: hover && !isDraft ? 'var(--bone-3)' : 'var(--bone)',
        border:'1.5px solid var(--ink)',borderRadius:14,
        padding:'24px 24px 22px',
        boxShadow: hover && !isDraft ? '8px 8px 0 var(--violet)' : '6px 6px 0 var(--ink)',
        transform: hover && !isDraft ? 'translate(-2px,-2px)' : 'none',
        transition:'transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .2s ease',
        display:'flex',flexDirection:'column',gap:14,
        cursor: isDraft ? 'not-allowed' : 'pointer',
        position:'relative',
      }}>
      {/* Top row — tag + date */}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10,flexWrap:'wrap'}}>
        <span className="mono" style={{
          fontSize:10,letterSpacing:'.14em',color:'var(--ink)',
          padding:'4px 9px',background:accentColor,borderRadius:999,
          border:'1px solid var(--ink)',
        }}>{tag}</span>
        <span className="mono" style={{fontSize:10,letterSpacing:'.14em',color:'var(--ink-quiet)'}}>{date}</span>
      </div>

      {/* Title + dek */}
      <h3 className="display" style={{
        margin:'4px 0 0',fontSize:'clamp(22px, 2.5vw, 28px)',
        lineHeight:1.1,letterSpacing:'-.01em',
      }}>{title}</h3>
      <p style={{margin:0,fontSize:14,color:'var(--ink-soft)',lineHeight:1.55}}>{dek}</p>

      {/* Footer row — mins + read indicator */}
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10,marginTop:'auto',paddingTop:14,borderTop:'1px solid var(--ink-line)'}}>
        <span className="mono" style={{fontSize:10,letterSpacing:'.12em',color:'var(--ink-quiet)'}}>· {mins} read</span>
        {isDraft ? (
          <span className="mono" style={{
            fontSize:10,letterSpacing:'.14em',color:'var(--ink-quiet)',
            border:'1px dashed var(--ink-line-2)',padding:'4px 9px',borderRadius:999,
          }}>DRAFT</span>
        ) : (
          <span className="mono" style={{
            fontSize:11,letterSpacing:'.1em',color:'var(--violet)',
            display:'inline-flex',alignItems:'center',gap:6,
          }}>READ <span style={{transform:hover?'translateX(3px)':'none',transition:'transform .25s ease'}}>→</span></span>
        )}
      </div>
    </article>
  );
}

Object.assign(window, {Blog});