// Blog index — real posts, written in-house, about the actual product and
// the actual problem it solves. No fake bylines, no fake stats, no
// fabricated case studies — same rule as the rest of the site.

const BLOG_POSTS = [
  {
    slug: 'blog-why-we-built-fire-your-agency.html',
    tag: 'Product',
    title: 'Why We Built Fire Your Agency',
    excerpt: "The pitch for firing your agency isn't \"AI is cheaper.\" It's that your own WooCommerce data was always the better brief — no agency ever had it.",
    read: '5 min read',
  },
  {
    slug: 'blog-outgrown-your-agency.html',
    tag: 'Strategy',
    title: '5 Signs Your WooCommerce Store Has Outgrown Its Marketing Agency',
    excerpt: 'Paying for hours instead of results, creative that takes days, attribution that\'s a guess — none of these are personal. They\'re structural.',
    read: '4 min read',
  },
  {
    slug: 'blog-ai-ad-copy-explained.html',
    tag: 'How it works',
    title: 'How AI Ad Copy Actually Works Here (and Where Human Review Still Matters)',
    excerpt: 'Claude doesn\'t write into a void — it writes from your actual product data and your actual campaign history. Here\'s the real pipeline.',
    read: '6 min read',
  },
];

const InfernoBlog = () => (
  <div style={{ background: '#FFF4E8', minHeight: '100vh' }}>
    <InfernoNav active="Blog"/>
    <section className="sec-pad" style={{ background: '#1A0D08', color: '#FFF4E8', padding: '72px 48px 64px', borderBottom: '2px solid #1A0D08' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#FF7A1A' }}>Blog</div>
        <h1 style={{ fontSize: 'clamp(32px, 6vw, 64px)', fontWeight: 900, letterSpacing: '-0.035em', lineHeight: 1, margin: '18px 0 0' }}>Blog</h1>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: '#A88770', maxWidth: 560, marginTop: 20 }}>
          Notes on WooCommerce marketing, AI-generated creative, and what it's actually like to run campaigns without an agency in the loop.
        </p>
      </div>
    </section>
    <div className="sec-pad" style={{ maxWidth: 1100, margin: '0 auto', padding: '56px 48px 96px' }}>
      <div style={{ display: 'grid', gap: 20 }}>
        {BLOG_POSTS.map(post => (
          <a key={post.slug} href={post.slug} style={{
            display: 'block', textDecoration: 'none', color: 'inherit',
            background: '#fff', border: '2px solid #1A0D08', borderRadius: 20,
            padding: '28px 30px', boxShadow: '5px 5px 0 #1A0D08', transition: 'transform 0.12s',
          }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translate(-2px,-2px)'; e.currentTarget.style.boxShadow = '7px 7px 0 #E5421A'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '5px 5px 0 #1A0D08'; }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', background: '#FFF4E8', border: '1px solid #1A0D08', borderRadius: 999, padding: '4px 10px', color: '#1A0D08' }}>{post.tag}</span>
              <span style={{ fontSize: 12.5, color: '#A88770' }}>{post.read}</span>
            </div>
            <h2 style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: '#1A0D08', margin: '0 0 10px' }}>{post.title}</h2>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: '#5C3D28', margin: 0, maxWidth: 720 }}>{post.excerpt}</p>
            <div style={{ marginTop: 16, fontSize: 13.5, fontWeight: 700, color: '#E5421A' }}>Read →</div>
          </a>
        ))}
      </div>
    </div>
    <InfernoFooter/>
  </div>
);

Object.assign(window, { InfernoBlog });