// Article.jsx — Verigo Global: article detail page (reads ?id=X from URL)
const { V: AV, MAXW: AMW, FONT: AFT } = window;

const CAT_COLORS = { Strategy:'#4B4FD9', 'CMMC 2.0':'#E8622A', 'SOC 2':'#4B4FD9', HITRUST:'#E8622A', 'ISO 27001':'#4B4FD9', 'Risk Management':'#6B7280', 'NIST CSF':'#6B7280', 'Cross-framework':'#3F1E68' };
const STD_TK = { soc2:'soc2', iso27001:'iso27001', cmmc:'cmmc', hitrust:'hitrust', nist:'nist' };

const ArticlePage = ({ onNav }) => {
  const params = new URLSearchParams(window.location.search);
  const id = params.get('id') || 'a1';
  const article = (window.ARTICLES_FULL || []).find(a => a.id === id);

  if (!article) return (
    <window.Section bg="#fff" pad="120px 0">
      <div style={{ maxWidth:AMW, margin:'0 auto', padding:'0 32px', textAlign:'center' }}>
        <h2 style={{ fontSize:32, fontWeight:800, color:AV.black, fontFamily:AFT }}>Article not found</h2>
        <window.Btn kind="primary" onClick={() => onNav('resources')} style={{ marginTop:24 }}>Back to Resources</window.Btn>
      </div>
    </window.Section>
  );

  const catColor = CAT_COLORS[article.cat] || AV.purple;
  const others = (window.ARTICLES_FULL || []).filter(a => a.id !== id).slice(0, 3);

  return (
    <div>
      {/* Hero */}
      <section style={{ background:AV.g50, borderBottom:`1px solid ${AV.g200}`, padding:'56px 0 60px', position:'relative', overflow:'hidden' }}>
        <window.HeroWatermark variant="stack" color={AV.purpleDark} opacity={0.12} style={{ top:-20, right:-20, width:440, height:400 }} />
        <div style={{ maxWidth:860, margin:'0 auto', padding:'0 32px', position:'relative', zIndex:1 }}>
          {/* Breadcrumb */}
          <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:13, fontWeight:600, color:AV.g500, marginBottom:22, fontFamily:AFT }}>
            <button onClick={() => onNav('resources')} style={{ background:'none', border:'none', cursor:'pointer', color:'#7A7A8A', fontSize:13, fontWeight:600, padding:0, fontFamily:AFT }}>Resources</button>
            <span style={{ color:AV.g300 }}>/</span>
            <button onClick={() => onNav('resources')} style={{ background:'none', border:'none', cursor:'pointer', color:'#7A7A8A', fontSize:13, fontWeight:600, padding:0, fontFamily:AFT }}>Articles</button>
            <span style={{ color:AV.g300 }}>/</span>
            <span style={{ color:AV.purple }}>Article</span>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:20 }}>
            <span style={{ fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:catColor, background:catColor+'1A', padding:'4px 12px' }}>{article.cat}</span>
            <span style={{ fontSize:13, color:AV.g400 }}>{article.date}</span>
            <span style={{ fontSize:13, color:AV.g400, fontFamily:"'JetBrains Mono',monospace", fontWeight:600 }}>{article.read} read</span>
          </div>
          <h1 className="vg-hero-title" style={{ fontSize:48, fontWeight:800, letterSpacing:'-0.03em', color:AV.black, margin:'0 0 20px', lineHeight:1.06, fontFamily:AFT, maxWidth:720 }}>{article.title}</h1>
          <p style={{ fontSize:18, color:AV.g600, lineHeight:1.65, margin:0, maxWidth:680 }}>{article.excerpt}</p>
        </div>
      </section>

      {/* Key Takeaways */}
      <div style={{ maxWidth:860, margin:'0 auto', padding:'48px 32px 0' }}>
        <div style={{ background:AV.purpleSubtle, border:`1px solid ${AV.purpleLight}22`, padding:'28px 32px', marginBottom:48 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:AV.purple, marginBottom:14 }}>Key takeaways</div>
          <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
            {(article.keyTakeaways || []).map((t, i) => (
              <div key={i} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                <span style={{ width:22, height:22, borderRadius:'50%', background:AV.purple, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:800, flexShrink:0, marginTop:1 }}>{i+1}</span>
                <p style={{ fontSize:15, color:AV.g800, lineHeight:1.55, margin:0, fontWeight:500 }}>{t}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Body sections */}
        <div style={{ maxWidth:720 }}>
          {(article.sections || []).map((sec, i) => (
            <div key={i} style={{ marginBottom:40 }}>
              <h2 style={{ fontSize:26, fontWeight:800, letterSpacing:'-0.02em', color:AV.black, margin:'0 0 14px', fontFamily:AFT, lineHeight:1.2 }}>{sec.heading}</h2>
              {sec.body.split('\n\n').map((para, j) => (
                <p key={j} style={{ fontSize:16.5, color:AV.g700, lineHeight:1.75, margin:'0 0 18px' }}>{para}</p>
              ))}
            </div>
          ))}
        </div>

        {/* Related resources */}
        {(article.relatedToolkit || article.relatedStandard) && (
          <div style={{ borderTop:`1px solid ${AV.g200}`, paddingTop:40, marginBottom:48 }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:AV.g400, marginBottom:16 }}>Related resources</div>
            <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
              {article.relatedToolkit && (
                <button onClick={() => onNav('toolkit:' + article.relatedToolkit)} style={{ display:'inline-flex', alignItems:'center', gap:8, background:AV.purpleSubtle, border:`1px solid ${AV.purple}33`, padding:'10px 16px', cursor:'pointer', fontFamily:AFT, fontSize:14, fontWeight:700, color:AV.purple }}>
                  <window.Icon name="layers" size={16} color={AV.purple} />{article.relatedToolkit.toUpperCase().replace('ISO27001','ISO 27001').replace('SOC2','SOC 2')} Toolkit <window.Icon name="arrow" size={14} color={AV.purple} />
                </button>
              )}
              {article.relatedStandard && (
                <button onClick={() => onNav('standard:' + article.relatedStandard)} style={{ display:'inline-flex', alignItems:'center', gap:8, background:AV.g50, border:`1px solid ${AV.g200}`, padding:'10px 16px', cursor:'pointer', fontFamily:AFT, fontSize:14, fontWeight:700, color:AV.g700 }}>
                  <window.Icon name="globe" size={16} color={AV.g500} />Learn about {article.relatedStandard.toUpperCase().replace('ISO27001','ISO 27001').replace('SOC2','SOC 2')} <window.Icon name="arrow" size={14} color={AV.g500} />
                </button>
              )}
              <button onClick={() => onNav('resources')} style={{ display:'inline-flex', alignItems:'center', gap:8, background:AV.g50, border:`1px solid ${AV.g200}`, padding:'10px 16px', cursor:'pointer', fontFamily:AFT, fontSize:14, fontWeight:700, color:AV.g700 }}>
                <window.Icon name="doc" size={16} color={AV.g500} />More articles <window.Icon name="arrow" size={14} color={AV.g500} />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* CTA */}
      <div style={{ background:AV.charcoal, position:'relative', overflow:'hidden', margin:'0 0 80px' }}>
        <window.GeoWatermark color={AV.orange} style={{ top:-30, right:40, width:320, height:300, opacity:0.12 }} />
        <div style={{ position:'relative', zIndex:1, maxWidth:860, margin:'0 auto', padding:'52px 32px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:32, flexWrap:'wrap' }}>
          <div>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)', marginBottom:10 }}>Ready to act on this?</div>
            <h2 style={{ fontSize:30, fontWeight:800, color:'#fff', margin:0, fontFamily:AFT, letterSpacing:'-0.02em', lineHeight:1.15, maxWidth:480 }}>Have a practitioner walk through your specific situation.</h2>
          </div>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
            <window.Btn kind="accent" onClick={() => onNav('contact')}>Start a Conversation <window.Icon name="arrow" size={16} color="#fff" /></window.Btn>
            {article.relatedToolkit && <window.Btn kind="ghostLight" onClick={() => onNav('toolkit:' + article.relatedToolkit)}>Explore the toolkit</window.Btn>}
          </div>
        </div>
      </div>

      {/* More articles */}
      {others.length > 0 && (
        <div style={{ maxWidth:AMW, margin:'0 auto', padding:'0 32px 80px' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:AV.g400, marginBottom:20 }}>More articles</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
            {others.map(a => {
              const cc = CAT_COLORS[a.cat] || AV.purple;
              return (
                <div key={a.id} style={{ background:'#fff', border:`1px solid ${AV.g200}`, padding:'22px', cursor:'pointer', transition:'all 150ms' }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor=AV.purple; e.currentTarget.style.boxShadow='0 6px 20px rgba(0,0,0,0.07)'; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor=AV.g200; e.currentTarget.style.boxShadow='none'; }}
                  onClick={()=>{ window.location.href='Article.html?id='+a.id; }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
                    <span style={{ fontSize:10.5, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:cc, background:cc+'1A', padding:'3px 8px' }}>{a.cat}</span>
                    <span style={{ fontSize:11.5, color:AV.g400, fontFamily:"'JetBrains Mono',monospace" }}>{a.read}</span>
                  </div>
                  <h3 style={{ fontSize:15.5, fontWeight:700, color:AV.black, margin:'0 0 8px', fontFamily:AFT, letterSpacing:'-0.01em', lineHeight:1.3 }}>{a.title}</h3>
                  <div style={{ fontSize:12, color:AV.g400 }}>{a.date}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { ArticlePage });