/* BLOG / latest news */

function Blog() {
  const isMobile = useWindowWidth() < 768;
  const featured = {
    cat: 'UI/UX', cat2: 'Shopify Development',
    title: 'From Click to Client: Mastering the Customer Journey',
    author: 'Vishal Choudhary', read: '5 min read', date: 'Jul 26, 2026',
    hue: 60,
  };
  const top = [
    { cat: 'Web Design',  cat2: 'Copywriting',  title: 'Why Copywriting Is Your Secret Growth Weapon',           author: 'Tanuj Rajput', read: '4 min read', date: 'Jul 14, 2026', hue: 0 },
    { cat: 'Web Design',  cat2: 'Performance',  title: '10 Proven Ways to Increase Your Website\'s Performance', author: 'Yashdeep T.',  read: '6 min read', date: 'Jul 10, 2026', hue: 220 },
  ];
  const bottom = [
    { cat: 'UI/UX',   cat2: 'Brand',   title: 'Why Your Branding Isn\'t Working And How to Fix It',          read: '5 min read', date: 'Jul 2, 2026',  hue: 200 },
    { cat: 'Marketing', cat2: 'CRO',   title: 'Designing Landing Pages That Convert in 2026',               read: '8 min read', date: 'May 1, 2026',  hue: 30  },
    { cat: 'Finance', cat2: 'Retail',  title: 'The Evolution of Paid Ads: What Works Now',                  read: '6 min read', date: 'Feb 16, 2026', hue: 350 },
    { cat: 'Marketing', cat2: 'Design',title: 'Beyond Aesthetics: Why Smart Design Drives Business Growth', read: '4 min read', date: 'Jun 3, 2026',  hue: 130 },
  ];

  return (
    <section data-screen-label="14 Blog" id="blog" style={{ paddingTop: 64, paddingBottom: 64, background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 56, alignItems: 'end', marginBottom: 40 }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>From the blog</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Latest news and updates</h2>
          </div>
          <p className="lead">
            Stay ahead with strategies that blend design, tech and marketing to drive measurable business results.
          </p>
        </div>

        {/* Top row: 1 big + 2 small */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr 1fr', gap: 18, marginBottom: 18 }}>
          <BlogCard post={featured} size="lg" />
          {top.map(p => <BlogCard key={p.title} post={p} size="md" />)}
        </div>

        {/* Bottom row: 4 cards */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 18 }}>
          {bottom.map(p => <BlogCard key={p.title} post={p} size="sm" />)}
        </div>
      </div>
    </section>
  );
}

function BlogCard({ post, size }) {
  const heights = { lg: 360, md: 200, sm: 160 };
  return (
    <Reveal className="card" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ position: 'relative' }}>
        <PostArtwork hue={post.hue} height={heights[size]} title={post.title} />
        <a href="/blogs.html" style={{
          position: 'absolute', top: 12, right: 12,
          width: 36, height: 36, borderRadius: '50%',
          background: 'white', color: 'var(--ink)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 8px 16px -8px rgba(10,15,12,.3)',
        }}>
          <Icon.Arrow size={14} />
        </a>
      </div>

      <div style={{ padding: size === 'lg' ? 20 : 16, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', border: '1px solid var(--hairline)', borderRadius: 999, color: 'var(--ink-soft)', letterSpacing: '0.06em' }}>{post.cat}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', border: '1px solid var(--hairline)', borderRadius: 999, color: 'var(--ink-soft)', letterSpacing: '0.06em' }}>{post.cat2}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '4px 10px', borderRadius: 999, color: 'var(--muted)', marginLeft: 'auto' }}>
            <Icon.Calendar size={10} /> {post.date}
          </span>
        </div>

        <h3 style={{
          margin: 0,
          fontSize: size === 'lg' ? 22 : size === 'md' ? 17 : 15,
          fontWeight: 600, letterSpacing: '-0.015em', lineHeight: 1.25,
        }}>{post.title}</h3>

        {post.author && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', marginTop: 'auto' }}>
            <Avatar name={post.author} size={20} hue={post.hue} />
            {post.author} · {post.read}
          </div>
        )}
        {!post.author && (
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', marginTop: 'auto' }}>{post.read}</div>
        )}
      </div>
    </Reveal>
  );
}

/* Stylized blog cover artwork — abstract, color-driven, no faux brand assets */
function PostArtwork({ hue = 60, height = 200, title }) {
  // pick a layout deterministically from hue
  const variant = hue % 4;
  if (variant === 0) {
    return (
      <div style={{ height, background: `linear-gradient(135deg, oklch(0.85 0.04 ${hue}), oklch(0.65 0.06 ${hue}))`, position: 'relative', overflow: 'hidden' }}>
        {/* concentric arcs */}
        <svg width="100%" height="100%" viewBox="0 0 200 100" preserveAspectRatio="xMidYMid slice">
          {[40, 60, 80, 100, 120].map(r => (
            <circle key={r} cx="160" cy="50" r={r} fill="none" stroke={`oklch(0.4 0.05 ${hue})`} strokeWidth="0.8" opacity="0.3" />
          ))}
        </svg>
      </div>
    );
  }
  if (variant === 1) {
    return (
      <div style={{ height, background: `oklch(0.92 0.02 ${hue})`, position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg viewBox="0 0 200 100" style={{ width: '85%', height: '70%' }}>
          {/* abstract chart bars */}
          {[1,2,3,4,5,6,7,8,9,10].map(i => (
            <rect key={i} x={i*18 - 14} y={100 - (Math.sin(i+hue)*30 + 50)} width="12" height={Math.sin(i+hue)*30 + 50} fill={`oklch(0.5 0.08 ${hue})`} rx="2" opacity={i % 2 ? 0.85 : 0.55} />
          ))}
        </svg>
      </div>
    );
  }
  if (variant === 2) {
    return (
      <div style={{ height, background: `oklch(0.32 0.05 ${hue})`, position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg viewBox="0 0 200 100" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id={`gp-${hue}`} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={`oklch(0.75 0.1 ${hue})`} stopOpacity="0.6" />
              <stop offset="100%" stopColor={`oklch(0.75 0.1 ${hue})`} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M 0,80 C 30,40 50,60 80,40 C 110,20 140,55 200,30 L 200,100 L 0,100 Z" fill={`url(#gp-${hue})`} />
          <path d="M 0,80 C 30,40 50,60 80,40 C 110,20 140,55 200,30" fill="none" stroke={`oklch(0.85 0.12 ${hue})`} strokeWidth="1.5" />
        </svg>
      </div>
    );
  }
  return (
    <div style={{ height, background: `oklch(0.92 0.02 ${hue})`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: `repeating-linear-gradient(135deg, transparent 0 18px, oklch(0.5 0.06 ${hue} / 0.18) 18px 19px)` }}></div>
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '40%', aspectRatio: '1', borderRadius: '50%', background: `oklch(0.45 0.1 ${hue})`, boxShadow: `0 30px 50px -10px oklch(0.45 0.1 ${hue} / 0.5)` }}></div>
    </div>
  );
}

window.Blog = Blog;