/* Blog index page */
const { useState: useStateB, useEffect: useEffectB } = React;

const BLOG_POSTS = [
  {
    slug: 'best-odoo-partner-usa',
    title: 'Best Odoo Implementation Partner in the USA (2026 Guide)',
    date: 'May 2026',
    readTime: '10 min read',
    excerpt: 'What separates the best Odoo partners from the rest? We break down the criteria that actually matter for mid-market companies choosing an implementation firm in 2026.',
    href: 'blog-best-odoo-partner-usa.html',
  },
  {
    slug: 'how-to-choose-odoo-partner',
    title: 'How to Choose an Odoo Consulting Firm (Without Getting Burned)',
    date: 'May 2026',
    readTime: '9 min read',
    excerpt: 'A practical checklist for evaluating Odoo partners: what to ask, what to watch for, and the red flags that signal trouble before a contract is signed.',
    href: 'blog-how-to-choose-odoo-partner.html',
  },
];

function BlogIndex() {
  return (
    <React.Fragment>
      <Nav active="blog" />

      <section style={{ padding: '160px 0 48px' }}>
        <div className="shell">
          <span className="eyebrow">Blog</span>
          <h1 className="h-display" style={{ marginTop: 32, maxWidth: '18ch' }}>
            Odoo implementation, <span style={{ color: 'var(--moss-400)' }}>demystified</span>.
          </h1>
          <p className="lede" style={{ marginTop: 32, maxWidth: '60ch' }}>
            Practical guides on choosing the right Odoo partner, planning your implementation, and avoiding the mistakes that derail mid-market ERP projects.
          </p>
        </div>
      </section>

      <section style={{ padding: '48px 0 120px' }}>
        <div className="shell">
          <div className="blog-grid">
            {BLOG_POSTS.map((post, i) => (
              <Reveal key={post.slug} delay={i * 80}>
                <a href={post.href} className="blog-card">
                  <div className="blog-card-inner">
                    <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20 }}>
                      <span className="mono" style={{ fontSize: 12, color: 'var(--moss-400)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{post.date}</span>
                      <span style={{ width: 4, height: 4, borderRadius: '50%', background: 'var(--bone-400)' }} />
                      <span className="mono" style={{ fontSize: 12, color: 'var(--bone-400)', letterSpacing: '0.04em' }}>{post.readTime}</span>
                    </div>
                    <h2 className="h3" style={{ marginBottom: 16, color: 'var(--bone-100)' }}>{post.title}</h2>
                    <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--bone-200)', marginBottom: 24 }}>{post.excerpt}</p>
                    <span className="mono" style={{ fontSize: 13, color: 'var(--moss-400)', letterSpacing: '0.06em' }}>
                      Read article <span style={{ marginLeft: 6 }}>→</span>
                    </span>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CTAFinal />
      <Footer />
      <StickyCTA />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BlogIndex />);