frontend/src/components/BlogLayout.js

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ArrowLeft, Github, ExternalLink } from 'lucide-react';

export const BlogLayout = ({ children }) => {
  const navigate = useNavigate();
  return (
    <div style={{ background: '#060810', minHeight: '100vh' }}>
      {/* Blog Nav */}
      <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(6,8,16,0.95)', backdropFilter: 'blur(20px)', borderBottom: '1px solid #1E2B45' }}>
        <div className="section-container flex items-center justify-between h-16">
          <button data-testid="blog-back-button" onClick={() => navigate('/')} className="flex items-center gap-2" style={{ background: 'none', border: 'none', color: '#8A9BC4', cursor: 'pointer', fontSize: 14 }}>
            <ArrowLeft size={18} /> CircuitScope
          </button>
          <div className="flex items-center gap-4">
            <button onClick={() => navigate('/blog')} style={{ background: 'none', border: 'none', color: '#00D9C0', cursor: 'pointer', fontSize: 13, fontWeight: 600 }}>All Posts</button>
            <div className="flex items-center gap-2">
              <svg width="22" height="22" viewBox="0 0 28 28" fill="none">
                <line x1="14" y1="2" x2="14" y2="26" stroke="url(#tgB)" strokeWidth="2" />
                <line x1="6" y1="8" x2="14" y2="8" stroke="#00D9C0" strokeWidth="1.5" />
                <line x1="6" y1="14" x2="14" y2="14" stroke="#4A9EFF" strokeWidth="1.5" />
                <circle cx="6" cy="8" r="2" fill="#00D9C0" />
                <circle cx="6" cy="14" r="2" fill="#4A9EFF" />
                <defs><linearGradient id="tgB" x1="14" y1="2" x2="14" y2="26"><stop stopColor="#00D9C0" /><stop offset="1" stopColor="#4A9EFF" /></linearGradient></defs>
              </svg>
              <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 16, color: '#E8EEF8' }}>CircuitScope</span>
            </div>
          </div>
        </div>
      </nav>

      {children}

      {/* Footer */}
      <footer style={{ borderTop: '1px solid #1E2B45', padding: '24px 0' }}>
        <div className="section-container flex items-center justify-between flex-wrap gap-4" style={{ fontSize: 12, color: '#4A5A7A' }}>
          <span>CircuitScope — Mechanistic Interpretability Research</span>
          <a href="https://github.com/Gaurav711cgu" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1" style={{ color: '#4A5A7A', textDecoration: 'none' }}><Github size={12} /> GitHub</a>
        </div>
      </footer>
    </div>
  );
};

/* ─── Reusable Article Sub-Components ─── */
export const Section = ({ num, title, children }) => (
  <section className="mb-12">
    {title && (
      <h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 24, color: '#E8EEF8', marginBottom: 16 }}>
        {num !== 'References' && num && <span style={{ color: '#00D9C0', marginRight: 8 }}>{num}.</span>}
        {title}
        {num === 'References' && <span style={{ color: '#E8EEF8' }}>References</span>}
      </h2>
    )}
    {children}
  </section>
);

export const SubSection = ({ title, children }) => (
  <div className="mb-8">
    <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 18, color: '#E8EEF8', marginBottom: 12 }}>{title}</h3>
    {children}
  </div>
);

export const P = ({ children, style = {} }) => (
  <p style={{ fontSize: 15, color: '#C0C8DC', lineHeight: 1.85, marginBottom: 16, ...style }}>{children}</p>
);

export const CodeBlock = ({ children }) => (
  <div className="code-block mb-4" style={{ fontSize: 13, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
    <span style={{ color: '#8A9BC4' }}>{children}</span>
  </div>
);

export const ArticleHeader = ({ badges, title, meta }) => (
  <>
    <div className="flex items-center gap-2 mb-4 flex-wrap">
      {badges.map((b, i) => <span key={i} className={`badge-${b.color}`}>{b.text}</span>)}
    </div>
    <h1 data-testid="blog-title" style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 'clamp(28px, 5vw, 42px)', lineHeight: 1.1, color: '#E8EEF8', marginBottom: 16 }}>
      {title}
    </h1>
    <div className="flex items-center gap-4 flex-wrap mb-8" style={{ fontSize: 13, color: '#4A5A7A' }}>
      {meta.map((m, i) => <span key={i} className="flex items-center gap-1">{m}</span>)}
    </div>
    <div style={{ borderBottom: '1px solid #1E2B45', marginBottom: 40 }} />
  </>
);

export const RefList = ({ refs }) => (
  <Section num="References" title="">
    <div className="space-y-3" style={{ fontSize: 13, color: '#8A9BC4', lineHeight: 1.6 }}>
      {refs.map((ref, i) => (
        <div key={i} style={{ paddingLeft: 16, borderLeft: '2px solid #1E2B45' }}>
          <span style={{ color: '#E8EEF8' }}>{ref.authors}</span> ({ref.year}). <em>{ref.title}</em>. {ref.venue}.{' '}
          {ref.url && <a href={ref.url} target="_blank" rel="noopener noreferrer" style={{ color: '#00D9C0', textDecoration: 'none' }}>[Link] <ExternalLink size={10} style={{ display: 'inline' }} /></a>}
        </div>
      ))}
    </div>
  </Section>
);

export const BackCTA = () => {
  const navigate = useNavigate();
  return (
    <div style={{ borderTop: '1px solid #1E2B45', paddingTop: 32, marginTop: 40 }}>
      <div className="flex items-center gap-4 flex-wrap">
        <button onClick={() => navigate('/blog')} className="btn-primary flex items-center gap-2" style={{ fontSize: 14 }}><ArrowLeft size={16} /> All Posts</button>
        <button onClick={() => navigate('/')} className="btn-ghost flex items-center gap-2" style={{ fontSize: 14 }}>Back to CircuitScope</button>
        <a href="https://github.com/Gaurav711cgu" target="_blank" rel="noopener noreferrer" className="btn-ghost flex items-center gap-2" style={{ fontSize: 14 }}><Github size={16} /> GitHub</a>
      </div>
    </div>
  );
};