const CasesPage = ({ navigate }) => {
  const wins = [
    { tag: 'Suspension Recovery', title: 'Misrepresentation, Suspended Thursday, Live Friday', desc: "A client came to us with a misrepresentation suspension, one of Google's strictest flags. We reviewed Thursday morning, implemented the full compliance fix, and resubmitted. By Friday afternoon the account was live.", metric: '<24h', label: 'Reinstatement', icon: 'refresh' },
    { tag: 'New Approval', title: 'Dutch Dropshipping Store, Approved in 6 Days', desc: 'A new e-commerce store had been rejected twice before coming to us. We ran a full policy audit, restructured the product feed, updated website policy pages, and resubmitted. Approved in 6 business days.', metric: '6 days', label: 'Approval Time', icon: 'check' },
    { tag: 'Google Shopping', title: '4.2× ROAS Scaling a Fashion Store', desc: 'After getting the client approved on GMC, we took over their Shopping campaigns. Within 8 weeks we had stable 4.2× ROAS on €33K monthly spend, generating over €138K/month revenue, while protecting margins.', metric: '4.2×', label: 'ROAS Achieved', icon: 'trending' },
  ];

  return (
    <div className="page-wrap">
      <section style={{ background: 'linear-gradient(160deg,#f0fdf4 0%,white 60%)', padding: '96px 32px 80px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 20 }}><Badge>Results & Case Studies</Badge></div>
          <h1 style={{ fontSize: 52, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.1, marginBottom: 20 }}>Real Results.<br /><span style={{ color: '#10b981' }}>Proven Track Record.</span></h1>
          <p style={{ fontSize: 17, color: '#64748b', lineHeight: 1.7 }}>75+ successful GMC approvals, zero failures, and growing Shopping campaigns. Here's what that looks like in practice.</p>
        </div>
      </section>

      <section style={{ background: 'white', padding: '56px 32px', borderBottom: '1px solid #e2e8f0' }}>
        <div className="four-col" style={{ maxWidth: 900, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 28 }}>
          {[['75+','GMCs Approved','Across all niches'],['100%','Success Rate','Every single case'],['€2.4M+','Revenue Generated','For our clients'],['4.6','Trustpilot Score','21 verified reviews']].map(([v,l,s],i) => (
            <div key={l} style={{ textAlign: 'center', padding: '0 20px', borderRight: i < 3 ? '1px solid #f1f5f9' : 'none' }}>
              <div style={{ fontSize: 40, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>{v}</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#0a0f1e', marginTop: 8 }}>{l}</div>
              <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 4 }}>{s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Case studies — now with EQUAL green boxes */}
      <section style={{ padding: '96px 32px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <SectionHeader badge="Case Studies" title="Featured Wins" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            {wins.map((w, i) => (
              <div key={i} className="win-card" style={{ background: 'white', borderRadius: 22, padding: '36px', boxShadow: '0 4px 24px rgba(0,0,0,0.06)', border: '1px solid #f1f5f9', display: 'grid', gridTemplateColumns: '1fr 200px', gap: 32, alignItems: 'stretch' }}>
                <div>
                  <div style={{ marginBottom: 12 }}><span style={{ background: '#d1fae5', color: '#065f46', fontSize: 11, fontWeight: 800, padding: '4px 12px', borderRadius: 50, letterSpacing: 0.5 }}>{w.tag}</span></div>
                  <h3 style={{ fontSize: 20, fontWeight: 800, color: '#0a0f1e', marginBottom: 12 }}>{w.title}</h3>
                  <p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.72 }}>{w.desc}</p>
                </div>
                <div className="win-metric" style={{ background: 'linear-gradient(135deg,#ecfdf5,#d1fae5)', borderRadius: 18, padding: '28px 20px', textAlign: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: 200, minHeight: 180 }}>
                  <IcBox icon={w.icon} size={40} style={{ margin: '0 auto 14px' }} />
                  <div style={{ fontSize: 34, fontWeight: 900, color: '#059669', lineHeight: 1, marginTop: 10 }}>{w.metric}</div>
                  <div style={{ fontSize: 12, color: '#064e3b', marginTop: 8, fontWeight: 600 }}>{w.label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 32px', background: 'white' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
            <SectionHeader badge="Trustpilot Reviews" title="What Our Clients Say" center={false} />
            <a href="https://nl.trustpilot.com/review/etherealsolutions.nl" target="_blank" rel="noopener noreferrer"
              style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#f8fafc', borderRadius: 16, padding: '14px 20px', border: '1px solid #e2e8f0', textDecoration: 'none', flexShrink: 0, marginBottom: 52 }}>
              <span style={{ color: '#f59e0b', fontSize: 18, letterSpacing: 2 }}>★★★★★</span>
              <div>
                <div style={{ fontWeight: 800, fontSize: 14, color: '#00b67a' }}>See all reviews on Trustpilot</div>
                <div style={{ fontSize: 12, color: '#64748b' }}>21 verified · 4.6/5</div>
              </div>
            </a>
          </div>
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
            {TESTIMONIALS.map(t => <TestimonialCard key={t.name} {...t} />)}
          </div>
        </div>
      </section>

      <CTABanner navigate={navigate} />
    </div>
  );
};

const PricingPage = ({ navigate }) => {
  // Order: Monitoring (left) → GMC Approval (middle, highlighted) → Suspension Recovery (right)
  const gmcPlans = [
    { icon: 'eye', name: 'Monthly Upkeep', price: '€250', period: '/month', desc: 'Complete peace of mind. Your GMC and webshop stay compliant without you having to lift a finger.', features: ['Preventive policy risk checks','Immediate action on suspension threats','Realtime support & weekly reports','Future-proof optimisation advice','No approval fee on a misrep','Free new merchant if permanently suspended'], cta: 'Start Monthly Upkeep', highlight: false },
    { icon: 'check', name: 'GMC Approval', price: '€949', period: 'one-time', desc: 'Complete setup and guaranteed approval in 5-10 business days. No cure, no pay.', features: ['Full compliance audit','Policy violation fixes','Product feed setup','Website compliance review','Submission & follow-up','30-day post-approval monitoring'], cta: 'Get Approved', highlight: true, badge: 'Most Popular' },
    { icon: 'refresh', name: 'Suspension Recovery', price: '€1,250', period: 'one-time', desc: 'Full reinstatement for any suspension type. No cure, no pay guarantee.', features: ['Suspension cause analysis','Full compliance overhaul','Appeal preparation','Google liaison support','Reinstatement tracking','30-day post-recovery monitoring'], cta: 'Recover My GMC', highlight: false },
  ];

  const exclusivePlans = [
    { icon: 'lock', name: 'Insider Service', price: 'On request', desc: 'Exclusive high-end service for stores with a persistent misrepresentation. For cases where other attempts have failed. 100% success rate, variable pricing.', features: ['For complex misrep cases','100% reinstatement record','Fully bespoke approach','Personal account manager'], cta: 'Contact us', badge: 'Exclusive' },
    { icon: 'store', name: 'Pre-Approved GMC Store', price: 'From €2,000', desc: 'Buy a ready-made, pre-approved GMC webshop. Transferred to your name within 2 days, initial misrep already cleared, start advertising immediately.', features: ['Live within 2 days','Transferred to your name','Initial misrep already cleared','Custom builds on request'], cta: 'View available stores', badge: 'New' },
  ];

  return (
    <div className="page-wrap">
      <section style={{ background: 'white', padding: '96px 32px 56px', textAlign: 'center' }}>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <div style={{ marginBottom: 20 }}><Badge>Pricing</Badge></div>
          <h1 style={{ fontSize: 50, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.1, marginBottom: 16 }}>Simple, <span style={{ color: '#10b981' }}>Transparent</span> Pricing</h1>
          <p style={{ fontSize: 16, color: '#64748b', lineHeight: 1.7 }}>No hidden costs, no unclear packages. Pay for exactly what you need.</p>
        </div>
      </section>

      <section style={{ padding: '20px 32px 80px', background: 'white' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <SectionHeader badge="GMC Services" title="Google Merchant Center" />
          <div className="three-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, alignItems: 'stretch' }}>
            {gmcPlans.map(p => (
              <div key={p.name} style={{ borderRadius: 22, padding: '36px 28px', background: p.highlight ? 'linear-gradient(155deg,#0a0f1e,#052e16)' : 'white', boxShadow: p.highlight ? '0 24px 60px rgba(0,0,0,0.18)' : '0 4px 20px rgba(0,0,0,0.06)', border: p.highlight ? 'none' : '1px solid #e2e8f0', position: 'relative', transform: p.highlight ? 'scale(1.03)' : 'none', display: 'flex', flexDirection: 'column' }}>
                {p.badge && <div style={{ position: 'absolute', top: -13, left: '50%', transform: 'translateX(-50%)' }}><span style={{ background: 'linear-gradient(135deg,#059669,#10b981)', color: 'white', fontSize: 11, fontWeight: 800, padding: '5px 16px', borderRadius: 50 }}>{p.badge}</span></div>}
                <IcBox icon={p.icon} size={50} bg={p.highlight ? 'rgba(16,185,129,0.15)' : undefined} color={p.highlight ? '#10b981' : '#059669'} />
                <div style={{ fontWeight: 800, fontSize: 19, color: p.highlight ? 'white' : '#0a0f1e', marginTop: 18, marginBottom: 10 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.6)' : '#64748b', lineHeight: 1.65, marginBottom: 20, minHeight: 66 }}>{p.desc}</div>
                <div style={{ marginBottom: 24 }}><span style={{ fontSize: 40, fontWeight: 900, color: '#10b981' }}>{p.price}</span><span style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.4)' : '#94a3b8', marginLeft: 4 }}>{p.period}</span></div>
                <div style={{ marginBottom: 28, flexGrow: 1 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                      <div style={{ marginTop: 2, flexShrink: 0 }}><Ic name="check" size={14} color="#10b981" sw={2.5} /></div>
                      <span style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,0.75)' : '#475569', lineHeight: 1.55 }}>{f}</span>
                    </div>
                  ))}
                </div>
                <Btn variant={p.highlight ? 'primary' : 'outline'} onClick={() => navigate('contact')} style={{ width: '100%', justifyContent: 'center' }}>{p.cta} →</Btn>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 28 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#ecfdf5', borderRadius: 50, padding: '12px 24px', border: '1px solid #a7f3d0' }}>
              <Ic name="shield" size={16} color="#059669" />
              <span style={{ fontWeight: 700, color: '#065f46', fontSize: 14 }}>No Cure, No Pay on all GMC services. Not approved? No cost.</span>
            </div>
          </div>
        </div>
      </section>

      {/* Exclusive Services */}
      <section style={{ padding: '60px 32px 80px', background: '#f8fafc' }}>
        <div style={{ maxWidth: 1000, margin: '0 auto' }}>
          <SectionHeader badge="Exclusive Services" title="For Complex Cases & Fast Starters" sub="Two specialist services for entrepreneurs who need to go beyond the standard path." />
          <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22, alignItems: 'stretch' }}>
            {exclusivePlans.map(p => (
              <div key={p.name} style={{ borderRadius: 22, padding: '36px 28px', background: 'white', boxShadow: '0 4px 20px rgba(0,0,0,0.06)', border: '1px solid #e2e8f0', position: 'relative', display: 'flex', flexDirection: 'column' }}>
                {p.badge && <div style={{ position: 'absolute', top: -13, left: 28 }}><span style={{ background: 'linear-gradient(135deg,#059669,#10b981)', color: 'white', fontSize: 11, fontWeight: 800, padding: '5px 14px', borderRadius: 50 }}>{p.badge}</span></div>}
                <IcBox icon={p.icon} size={50} />
                <div style={{ fontWeight: 800, fontSize: 19, color: '#0a0f1e', marginTop: 18, marginBottom: 10 }}>{p.name}</div>
                <div style={{ fontSize: 13, color: '#64748b', lineHeight: 1.65, marginBottom: 20 }}>{p.desc}</div>
                <div style={{ marginBottom: 24 }}><span style={{ fontSize: 28, fontWeight: 900, color: '#10b981' }}>{p.price}</span></div>
                <div style={{ marginBottom: 28, flexGrow: 1 }}>
                  {p.features.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
                      <div style={{ marginTop: 2, flexShrink: 0 }}><Ic name="check" size={14} color="#10b981" sw={2.5} /></div>
                      <span style={{ fontSize: 13, color: '#475569', lineHeight: 1.55 }}>{f}</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <Btn variant="outline" onClick={() => navigate('contact')} style={{ flex: 1, justifyContent: 'center' }}>{p.cta} →</Btn>
                  <Btn variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={15} color="white" /></Btn>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Shopping pricing */}
      <section style={{ padding: '80px 32px 96px', background: 'linear-gradient(135deg,#020c1b,#052e16)' }}>
        <div style={{ maxWidth: 820, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 20 }}><Badge>Google Shopping Ads</Badge></div>
          <h2 style={{ fontSize: 44, fontWeight: 900, color: 'white', lineHeight: 1.1, marginBottom: 14 }}>One Simple Fee. Zero Conflicts.</h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.55)', marginBottom: 48 }}>We charge 10% of your monthly ad spend. That's it.</p>
          <div style={{ background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 24, padding: '48px 40px', backdropFilter: 'blur(10px)' }}>
            <div style={{ fontSize: 80, fontWeight: 900, color: '#10b981', lineHeight: 1 }}>10%</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: 'white', marginTop: 10, marginBottom: 8 }}>of Monthly Ad Spend</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.4)', marginBottom: 44 }}>No setup fees. No retainers. No lock-in contracts.</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 40, textAlign: 'left' }}>
              {['Full campaign setup & structure','Performance Max & Standard Shopping','Feed optimisation','Bid strategy & scaling','CRO consultancy','Weekly performance reports','Direct WhatsApp access','Cancel anytime'].map(f => (
                <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                  <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: '50%', background: 'rgba(16,185,129,0.18)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginTop: 1 }}>
                    <Ic name="check" size={11} color="#10b981" sw={3} />
                  </span>
                  <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.72)', lineHeight: 1.5 }}>{f}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <Btn size="lg" onClick={() => navigate('contact')}>Start Your Campaign →</Btn>
              <Btn size="lg" variant="calendly" href="https://calendly.com/etherealsolutions/30min"><Ic name="calendar" size={16} color="white" /> Book Strategy Call</Btn>
            </div>
          </div>
          <p style={{ color: 'rgba(255,255,255,0.3)', fontSize: 13, marginTop: 20 }}>Minimum recommended ad spend: €3,000/month</p>
        </div>
      </section>

      <CTABanner navigate={navigate} />
    </div>
  );
};

const LAUNCHMIND_API_KEY = 'lm_ethereal-solutions_0e81f578443493c9b6c59277';
const LAUNCHMIND_URL = `https://launchmind.io/api/blog/customer?api_key=${LAUNCHMIND_API_KEY}`;

// Module-level cache so navigating between list and post doesn't re-fetch
let _lmCache = null;

const BlogPage = ({ navigate, blogSlug }) => {
  const [posts, setPosts] = React.useState(_lmCache);
  const [activeTag, setActiveTag] = React.useState('All');

  React.useEffect(() => {
    if (_lmCache) return;
    let cancelled = false;
    (async () => {
      try {
        const r = await fetch(LAUNCHMIND_URL, { headers: { 'Accept': 'application/json' } });
        if (!r.ok) { if (!cancelled) setPosts([]); return; }
        const data = await r.json();
        const arr = Array.isArray(data) ? data : (data.posts || []);
        _lmCache = arr;
        if (!cancelled) setPosts(arr);
      } catch (e) {
        if (!cancelled) setPosts([]);
      }
    })();
    return () => { cancelled = true; };
  }, []);

  const formatDate = (d) => {
    if (!d) return '';
    try { return new Date(d).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }); } catch { return ''; }
  };

  // Single post view
  if (blogSlug) {
    const post = posts && posts.find(p => p.slug === blogSlug);
    return <BlogPostView post={post} loading={posts === null} navigate={navigate} formatDate={formatDate} />;
  }

  // List view
  const allPosts = posts || [];
  const allTagCounts = {};
  allPosts.forEach(p => (p.tags || []).forEach(t => { allTagCounts[t] = (allTagCounts[t] || 0) + 1; }));
  const topTags = ['All', ...Object.keys(allTagCounts).sort((a, b) => allTagCounts[b] - allTagCounts[a]).slice(0, 6)];
  const filtered = activeTag === 'All' ? allPosts : allPosts.filter(p => (p.tags || []).includes(activeTag));
  const featured = filtered[0];
  const rest = filtered.slice(1);

  return (
    <div className="page-wrap">
      <section style={{ background: 'linear-gradient(160deg,#f0fdf4 0%,white 60%)', padding: '96px 32px 60px' }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 20 }}><Badge>Blog & Resources</Badge></div>
          <h1 style={{ fontSize: 50, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.1, marginBottom: 16 }}>Insights on GMC &<br /><span style={{ color: '#10b981' }}>Google Shopping</span></h1>
          <p style={{ fontSize: 16, color: '#64748b', lineHeight: 1.7 }}>Practical guides from operators who manage GMC approvals and Shopping campaigns every day.</p>
        </div>
      </section>

      <section style={{ padding: '20px 32px 80px', background: 'white' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>

          {/* Tag filter */}
          {allPosts.length > 0 && topTags.length > 1 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginBottom: 40 }}>
              {topTags.map(tag => (
                <button key={tag} onClick={() => setActiveTag(tag)}
                  style={{ background: activeTag === tag ? '#0a0f1e' : '#f8fafc', color: activeTag === tag ? 'white' : '#475569', border: '1px solid', borderColor: activeTag === tag ? '#0a0f1e' : '#e2e8f0', fontSize: 13, fontWeight: 600, padding: '9px 18px', borderRadius: 50, cursor: 'pointer', fontFamily: 'Plus Jakarta Sans, sans-serif', transition: 'all 0.15s' }}>
                  {tag}
                </button>
              ))}
            </div>
          )}

          {/* Loading */}
          {posts === null && (
            <div className="three-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
              {[0,1,2].map(i => (
                <div key={i} style={{ background: '#f8fafc', borderRadius: 22, height: 360, border: '1px solid #e2e8f0', position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)', animation: 'shimmer 1.6s infinite' }} />
                </div>
              ))}
            </div>
          )}
          <style>{`@keyframes shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(100%) } }`}</style>

          {/* Empty */}
          {posts !== null && filtered.length === 0 && (
            <div style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: 22, padding: '64px 32px', textAlign: 'center' }}>
              <IcBox icon="book" size={56} />
              <h3 style={{ fontSize: 22, fontWeight: 800, color: '#0a0f1e', marginTop: 16, marginBottom: 10 }}>No posts found</h3>
              <p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.7, maxWidth: 440, margin: '0 auto 24px' }}>New articles are published regularly. Have a GMC or Shopping question in the meantime?</p>
              <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
                <Btn variant="whatsapp" href="https://wa.me/31615232684"><Ic name="wa" size={15} color="white" /> WhatsApp us</Btn>
                <Btn variant="outline" onClick={() => navigate('contact')}>Get in touch</Btn>
              </div>
            </div>
          )}

          {/* Featured */}
          {featured && (
            <a onClick={(e) => { e.preventDefault(); navigate('blog', { slug: featured.slug }); }} href={`/blog/${featured.slug}`}
              style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 0, background: 'white', borderRadius: 22, overflow: 'hidden', border: '1px solid #e2e8f0', boxShadow: '0 8px 40px rgba(0,0,0,0.06)', marginBottom: 48, textDecoration: 'none', transition: 'transform 0.2s, box-shadow 0.2s', cursor: 'pointer' }}
              className="two-col"
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 12px 48px rgba(0,0,0,0.10)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 8px 40px rgba(0,0,0,0.06)'; }}>
              <div style={{ background: featured.coverImage ? `url(${featured.coverImage}) center/cover` : 'linear-gradient(135deg,#059669,#10b981)', minHeight: 320 }} />
              <div style={{ padding: '44px 40px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 11, fontWeight: 800, color: '#059669', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 14 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#10b981' }} /> Featured
                </div>
                <h2 style={{ fontSize: 28, fontWeight: 800, color: '#0a0f1e', lineHeight: 1.2, marginBottom: 14 }}>{featured.title}</h2>
                {featured.excerpt && <p style={{ fontSize: 15, color: '#475569', lineHeight: 1.7, marginBottom: 22 }}>{featured.excerpt.length > 200 ? featured.excerpt.slice(0, 200) + '…' : featured.excerpt}</p>}
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 13, color: '#94a3b8', flexWrap: 'wrap' }}>
                  {featured.author && <span style={{ fontWeight: 600, color: '#475569' }}>{featured.author}</span>}
                  {featured.author && featured.publishedAt && <span style={{ width: 3, height: 3, borderRadius: '50%', background: '#cbd5e1' }} />}
                  {featured.publishedAt && <span>{formatDate(featured.publishedAt)}</span>}
                  {featured.wordCount && <><span style={{ width: 3, height: 3, borderRadius: '50%', background: '#cbd5e1' }} /><span>{Math.ceil(featured.wordCount / 225)} min read</span></>}
                </div>
              </div>
            </a>
          )}

          {/* Grid */}
          {rest.length > 0 && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 24 }}>
              {rest.map((p) => (
                <a key={p.id || p.slug} onClick={(e) => { e.preventDefault(); navigate('blog', { slug: p.slug }); }} href={`/blog/${p.slug}`}
                  style={{ background: 'white', borderRadius: 18, overflow: 'hidden', border: '1px solid #e2e8f0', textDecoration: 'none', display: 'flex', flexDirection: 'column', transition: 'transform 0.2s, box-shadow 0.2s', cursor: 'pointer' }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 10px 30px rgba(0,0,0,0.08)'; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
                  <div style={{ height: 180, background: p.coverImage ? `url(${p.coverImage}) center/cover` : 'linear-gradient(135deg,#d1fae5,#a7f3d0)' }} />
                  <div style={{ padding: '22px 22px 24px', flex: 1, display: 'flex', flexDirection: 'column' }}>
                    {p.tags && p.tags[0] && (
                      <div style={{ fontSize: 11, fontWeight: 700, color: '#059669', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>{p.tags[0]}</div>
                    )}
                    <h3 style={{ fontSize: 17, fontWeight: 800, color: '#0a0f1e', lineHeight: 1.3, marginBottom: 10 }}>{p.title}</h3>
                    {p.excerpt && <p style={{ fontSize: 13, color: '#64748b', lineHeight: 1.6, marginBottom: 16, flex: 1 }}>{p.excerpt.length > 130 ? p.excerpt.slice(0, 130) + '…' : p.excerpt}</p>}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: '#94a3b8', marginTop: 'auto' }}>
                      {p.publishedAt && <span>{formatDate(p.publishedAt)}</span>}
                      {p.wordCount && <><span style={{ width: 3, height: 3, borderRadius: '50%', background: '#cbd5e1' }} /><span>{Math.ceil(p.wordCount / 225)} min</span></>}
                    </div>
                  </div>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>

      <CTABanner navigate={navigate} />
    </div>
  );
};

const BlogPostView = ({ post, loading, navigate, formatDate }) => {
  if (loading) {
    return (
      <div className="page-wrap">
        <section style={{ padding: '120px 32px 80px', background: 'white', maxWidth: 780, margin: '0 auto' }}>
          <div style={{ background: '#f8fafc', borderRadius: 14, height: 32, width: 140, marginBottom: 24, position: 'relative', overflow: 'hidden' }}><div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)', animation: 'shimmer 1.6s infinite' }} /></div>
          <div style={{ background: '#f8fafc', borderRadius: 14, height: 56, marginBottom: 18, position: 'relative', overflow: 'hidden' }}><div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)', animation: 'shimmer 1.6s infinite' }} /></div>
          <div style={{ background: '#f8fafc', borderRadius: 14, height: 56, width: '70%', marginBottom: 40, position: 'relative', overflow: 'hidden' }}><div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)', animation: 'shimmer 1.6s infinite' }} /></div>
          <div style={{ background: '#f8fafc', borderRadius: 14, height: 280, position: 'relative', overflow: 'hidden' }}><div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)', animation: 'shimmer 1.6s infinite' }} /></div>
        </section>
      </div>
    );
  }

  if (!post) {
    return (
      <div className="page-wrap">
        <section style={{ padding: '120px 32px 80px', maxWidth: 640, margin: '0 auto', textAlign: 'center' }}>
          <IcBox icon="book" size={56} />
          <h1 style={{ fontSize: 30, fontWeight: 900, color: '#0a0f1e', marginTop: 20, marginBottom: 12 }}>Post not found</h1>
          <p style={{ fontSize: 15, color: '#64748b', marginBottom: 28 }}>The article you're looking for doesn't exist or may have moved.</p>
          <Btn onClick={() => navigate('blog')}><Ic name="arrowRight" size={14} color="white" /> Back to blog</Btn>
        </section>
      </div>
    );
  }

  const readMin = post.wordCount ? Math.ceil(post.wordCount / 225) : null;

  return (
    <div className="page-wrap">
      <style>{`
        .blog-body { font-size: 17px; line-height: 1.78; color: #334155; font-family: 'Plus Jakarta Sans', sans-serif; }
        .blog-body > * + * { margin-top: 1.15em; }
        .blog-body h2 { font-size: 28px; font-weight: 800; color: #0a0f1e; line-height: 1.25; margin-top: 2em; margin-bottom: 0.6em; letter-spacing: -0.01em; }
        .blog-body h3 { font-size: 21px; font-weight: 800; color: #0a0f1e; line-height: 1.3; margin-top: 1.75em; margin-bottom: 0.5em; }
        .blog-body p { color: #334155; }
        .blog-body strong { color: #0a0f1e; font-weight: 700; }
        .blog-body a { color: #059669; text-decoration: underline; text-decoration-color: rgba(5,150,105,0.35); text-underline-offset: 3px; transition: text-decoration-color 0.15s; }
        .blog-body a:hover { text-decoration-color: #059669; }
        .blog-body ul, .blog-body ol { padding-left: 1.4em; }
        .blog-body li { margin-bottom: 0.55em; }
        .blog-body img { width: 100%; height: auto; border-radius: 16px; margin: 2em 0; border: 1px solid #e2e8f0; display: block; }
        .blog-body table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 15px; border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; }
        .blog-body th { background: #0a0f1e; color: white; text-align: left; padding: 14px 18px; font-weight: 700; font-size: 13px; letter-spacing: 0.3px; }
        .blog-body td { padding: 13px 18px; border-top: 1px solid #f1f5f9; color: #475569; vertical-align: top; }
        .blog-body tr:nth-child(even) td { background: #f8fafc; }
        .blog-body .lm-sources { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid #e2e8f0; }
        .blog-body .lm-sources h3 { font-size: 14px !important; font-weight: 800 !important; color: #94a3b8 !important; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px !important; margin-top: 0 !important; }
        .blog-body .lm-sources ul { padding-left: 0; list-style: none; }
        .blog-body .lm-sources li { font-size: 13px; color: #64748b; margin-bottom: 6px; }
        .blog-body .lm-powered-by { display: none; }
        .blog-body blockquote { border-left: 3px solid #10b981; padding: 4px 0 4px 20px; margin: 1.5em 0; color: #475569; font-style: italic; }
      `}</style>

      <article>
        {/* Header */}
        <header style={{ padding: '80px 32px 40px', background: 'linear-gradient(180deg,#f0fdf4 0%,white 100%)' }}>
          <div style={{ maxWidth: 760, margin: '0 auto' }}>
            <button onClick={() => navigate('blog')}
              style={{ background: 'none', border: 'none', color: '#059669', fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'Plus Jakarta Sans,sans-serif', padding: '8px 0', marginBottom: 28, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
              All articles
            </button>

            {post.tags && post.tags.length > 0 && (
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
                {post.tags.slice(0, 4).map(t => (
                  <span key={t} style={{ background: '#ecfdf5', color: '#065f46', fontSize: 11, fontWeight: 700, padding: '5px 12px', borderRadius: 50, letterSpacing: 0.3 }}>{t}</span>
                ))}
              </div>
            )}

            <h1 style={{ fontSize: 44, fontWeight: 900, color: '#0a0f1e', lineHeight: 1.12, letterSpacing: -0.02, marginBottom: 20 }}>{post.title}</h1>
            {post.excerpt && <p style={{ fontSize: 18, color: '#64748b', lineHeight: 1.6, marginBottom: 28, maxWidth: 640 }}>{post.excerpt}</p>}

            <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 14, color: '#64748b', flexWrap: 'wrap' }}>
              {post.author && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg,#059669,#10b981)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontWeight: 800, fontSize: 13 }}>{post.author.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
                  <span style={{ fontWeight: 700, color: '#0a0f1e' }}>{post.author}</span>
                </div>
              )}
              {post.publishedAt && <><span style={{ width: 3, height: 3, borderRadius: '50%', background: '#cbd5e1' }} /><span>{formatDate(post.publishedAt)}</span></>}
              {readMin && <><span style={{ width: 3, height: 3, borderRadius: '50%', background: '#cbd5e1' }} /><span>{readMin} min read</span></>}
            </div>
          </div>
        </header>

        {/* Cover */}
        {post.coverImage && (
          <div style={{ maxWidth: 960, margin: '0 auto', padding: '0 32px 40px' }}>
            <div style={{ borderRadius: 22, overflow: 'hidden', border: '1px solid #e2e8f0', boxShadow: '0 10px 40px rgba(0,0,0,0.08)' }}>
              <img src={post.coverImage} alt={post.title} style={{ width: '100%', height: 'auto', display: 'block' }} />
            </div>
          </div>
        )}

        {/* Body */}
        <div style={{ maxWidth: 760, margin: '0 auto', padding: '20px 32px 80px' }}>
          <div className="blog-body" dangerouslySetInnerHTML={{ __html: post.html || '' }} />
        </div>
      </article>

      <CTABanner navigate={navigate} />
    </div>
  );
};

Object.assign(window, { CasesPage, PricingPage, BlogPage, BlogPostView });
