/* global React, Icon */
const POSTS = [
  { id: 'pcf-2026', title: 'How we cut PCF control bundle size by 64%', tag: 'Engineering', date: 'Apr 22, 2026', read: '6 min', excerpt: 'Smart Panel AI used to ship a 412KB bundle. Then we found three things every PCF developer should know about Webpack.', author: 'Shubham Vishwakarma' },
  { id: 'azure-openai', title: 'Why we route Azure OpenAI through your tenant, not ours', tag: 'Trust', date: 'Apr 14, 2026', read: '4 min', excerpt: 'It\'s slightly more work for our customers and a lot more peace of mind. Here\'s the architecture, and why we picked it.', author: 'Marcus Tan' },
  { id: 'kanban-ga', title: 'Kanban Board hits GA — what\'s new in v1.4', tag: 'Product', date: 'Apr 02, 2026', read: '3 min', excerpt: 'Swimlanes by owner, WIP limits, and a sub-100ms drag handler. Plus three things we deliberately left out.', author: 'Jane Cooper' },
  { id: 'mvc-makers', title: 'A field guide for new D365 makers', tag: 'Guide', date: 'Mar 19, 2026', read: '11 min', excerpt: 'If your job description recently grew "and Power Platform" at the end, start here. Eleven things that are non-obvious.', author: 'Shubham Vishwakarma' },
  { id: 'gantt-beta', title: 'Gantt Chart enters beta — calling for testers', tag: 'Product', date: 'Mar 04, 2026', read: '2 min', excerpt: 'Drag-resize, weekend-aware dependencies, and a printable view that doesn\'t look like 2008. Sign up to break it.', author: 'Marcus Tan' },
  { id: 'video-control', title: 'Embedding training videos directly in D365 forms', tag: 'Product', date: 'Feb 21, 2026', read: '5 min', excerpt: 'New hires close their first ticket 2.4× faster when the training is in the form, not in a separate LMS.', author: 'Jane Cooper' },
];

const BlogIndexPage = ({ openPost }) => (
  <div className="page-enter">
    <section className="section">
      <div className="container">
        <span className="eyebrow">Blog</span>
        <h1 style={{ fontSize: 'clamp(36px, 5vw, 56px)', marginBottom: 16 }}>Notes from the toolkit.</h1>
        <p className="lead" style={{ maxWidth: '54ch', marginBottom: 32 }}>Engineering deep-dives, product updates, and field guides from the team building Dynawins.</p>

        {/* Featured */}
        <a href="#" onClick={(e) => { e.preventDefault(); openPost(POSTS[0].id); }} className="card blog-featured-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, padding: 0, overflow: 'hidden', color: 'inherit', marginBottom: 48 }}>
          <div style={{ padding: '40px 40px 40px 40px' }}>
            <span className="chip">{POSTS[0].tag}</span>
            <h2 style={{ fontSize: 32, marginTop: 16, marginBottom: 16 }}>{POSTS[0].title}</h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-3)', marginBottom: 24 }}>{POSTS[0].excerpt}</p>
            <div style={{ fontSize: 13, color: 'var(--ink-4)' }}>{POSTS[0].author} · {POSTS[0].date} · {POSTS[0].read}</div>
          </div>
          <div style={{ background: 'var(--accent-tint)', position: 'relative', minHeight: 280, overflow: 'hidden' }}>
            <img
              src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1200&q=80"
              alt="Developer working on a laptop with code on screen"
              loading="lazy"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
              onError={(e) => { e.currentTarget.style.display = 'none'; }}
            />
          </div>
        </a>

        {/* Grid */}
        <div className="feature-grid">
          {POSTS.slice(1).map((p) => (
            <a key={p.id} href="#" onClick={(e) => { e.preventDefault(); openPost(p.id); }} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14, color: 'inherit' }}>
              <span className="chip" style={{ alignSelf: 'flex-start' }}>{p.tag}</span>
              <h3 style={{ fontSize: 19, lineHeight: 1.3, margin: 0 }}>{p.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-3)', margin: 0 }}>{p.excerpt}</p>
              <div style={{ marginTop: 'auto', fontSize: 12, color: 'var(--ink-4)' }}>{p.date} · {p.read}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  </div>
);

const BlogPostPage = ({ id, back }) => {
  const post = POSTS.find((p) => p.id === id) || POSTS[0];
  return (
    <div className="page-enter">
      <article className="section" style={{ paddingTop: 64 }}>
        <div className="container" style={{ maxWidth: 760 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); back(); }} style={{ fontSize: 13, color: 'var(--ink-4)', display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 32 }}>
            <span style={{ transform: 'rotate(180deg)', display: 'inline-block' }}><Icon name="arrow-right" size={14}/></span> Back to blog
          </a>
          <span className="chip">{post.tag}</span>
          <h1 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 16, marginBottom: 20, lineHeight: 1.1 }}>{post.title}</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 40, fontSize: 14, color: 'var(--ink-4)' }}>
            <div style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--accent-tint)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13 }}>{post.author.split(' ').map(n => n[0]).join('')}</div>
            <span style={{ color: 'var(--ink-2)', fontWeight: 500 }}>{post.author}</span>
            <span>·</span>
            <span>{post.date}</span>
            <span>·</span>
            <span>{post.read} read</span>
          </div>

          <div style={{ fontSize: 18, lineHeight: 1.7, color: 'var(--ink-2)', display: 'flex', flexDirection: 'column', gap: 24 }}>
            <p style={{ fontSize: 22, fontWeight: 500, color: 'var(--ink-1)', lineHeight: 1.45, margin: 0 }}>{post.excerpt}</p>
            <p style={{ margin: 0 }}>When we shipped Smart Panel AI v1.0, the managed solution clocked in at 412 KB gzipped. That sounds reasonable — until you remember that PCF controls load on every form render, often inside a sub-iframe, and the user is staring at a blank panel until you're done.</p>
            <h2 style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.01em', marginTop: 16, marginBottom: 0 }}>1. Stop bundling React.</h2>
            <p style={{ margin: 0 }}>The PowerApps Component Framework already ships React 16. We were re-bundling 18, all 138 KB of it, for no reason. Marking <code>react</code> and <code>react-dom</code> as <code>externals</code> in <code>webpack.config.js</code> shaved 41% off the bundle in a single commit.</p>
            <pre style={{ background: 'var(--ink-1)', color: '#A3A3A3', padding: 20, borderRadius: 'var(--radius-2)', overflow: 'auto', fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>
{`module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};`}
            </pre>
            <h2 style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.01em', marginTop: 16, marginBottom: 0 }}>2. Tree-shake your icon library.</h2>
            <p style={{ margin: 0 }}>We were importing the entire Lucide library for the four icons we actually use. Switching to per-icon imports + a transformer plugin took us from 38 KB to 1.2 KB of icon code.</p>
            <h2 style={{ fontSize: 28, fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.01em', marginTop: 16, marginBottom: 0 }}>3. Lazy-load the AI client.</h2>
            <p style={{ margin: 0 }}>The Azure OpenAI SDK is heavy and only runs after the user actually asks something. We deferred its <code>import()</code> until the first keystroke in the input box, hiding ~80 KB of cold-load weight behind interaction.</p>
            <p style={{ margin: 0 }}>End result: <strong>148 KB gzipped, a 64% drop, and a perceptible reduction in time-to-first-paint inside D365.</strong> If you're shipping a PCF control today, do these three things first.</p>
          </div>

          <div style={{ marginTop: 64, padding: 32, background: 'var(--surface-2)', borderRadius: 'var(--radius-3)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 20 }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--accent-tint)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>{post.author.split(' ').map(n => n[0]).join('')}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600, fontSize: 15 }}>Written by {post.author}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>Co-founder, Dynawins. Ships PCF controls so you don't have to.</div>
            </div>
          </div>
        </div>
      </article>
    </div>
  );
};

window.BlogIndexPage = BlogIndexPage;
window.BlogPostPage = BlogPostPage;