// Blog components for GEOKlar

const BLOG_POSTS = [
  {
    slug: 'blog-post-1',
    title: 'Sådan ranker danske revisorer i ChatGPT',
    category: 'Guide',
    date: 'April 2026',
    desc: 'En gennemgang af de signaler ChatGPT bruger til at vælge hvilke revisorer der nævnes — og hvad du konkret kan gøre ved det.',
    imgBg: 'linear-gradient(135deg, #0a1f44 0%, #1a3668 60%, #2e4a7d 100%)',
  },
  {
    slug: 'blog-post-2',
    title: 'AEO vs. SEO: Hvad er forskellen?',
    category: 'Grundbegreber',
    date: 'Marts 2026',
    desc: 'Answer Engine Optimization og Search Engine Optimization overlapper — men måler vidt forskellige ting. Her er hvad du bør vide.',
    imgBg: 'linear-gradient(135deg, #1a3668 0%, #8a6f2d 100%)',
  },
  {
    slug: 'blog-post-3',
    title: '10 ChatGPT-prompts dine kunder bruger til at finde en revisor',
    category: 'Praktisk',
    date: 'Marts 2026',
    desc: 'Disse 10 søgeformuleringer går igen, når danskere bruger ChatGPT til at finde revisorhjælp. Er dit navn i svarene?',
    imgBg: 'linear-gradient(135deg, #7a5520 0%, #b8944a 100%)',
  },
  {
    slug: 'blog-post-4',
    title: 'Hvad er llms.txt — og hvorfor skal din revisionsvirksomhed have en?',
    category: 'Teknisk',
    date: 'Februar 2026',
    desc: 'llms.txt-filen er AI-crawlernes instruktionsmanual til din hjemmeside. Sådan sætter du den op på under en time.',
    imgBg: 'linear-gradient(135deg, #050f22 0%, #0a1f44 100%)',
  },
  {
    slug: 'blog-post-5',
    title: 'Derfor finder AI din konkurrent — ikke dig',
    category: 'Analyse',
    date: 'Februar 2026',
    desc: 'Vi analyserede 500 AI-svar i revisionsbranchen. Her er mønsteret bag hvilke firmaer der nævnes — og hvilke der bliver glemt.',
    imgBg: 'linear-gradient(135deg, #0f2654 0%, #1e3a6e 60%, #2e4a7d 100%)',
  },
];

// ── BlogCard ─────────────────────────────────────────────────────────────────
function BlogCard({ post }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a
      href={`${post.slug}.html`}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        display: 'flex',
        flexDirection: 'column',
        background: 'white',
        border: `1px solid ${hov ? 'var(--line-2)' : 'var(--line)'}`,
        borderRadius: 12,
        overflow: 'hidden',
        textDecoration: 'none',
        transition: 'transform .15s ease, box-shadow .15s ease, border-color .15s ease',
        transform: hov ? 'translateY(-3px)' : 'none',
        boxShadow: hov ? 'var(--sh-lg)' : 'var(--sh-sm)',
        cursor: 'pointer',
      }}
    >
      {/* Coloured image header */}
      <div style={{
        height: 152,
        background: post.imgBg || 'linear-gradient(135deg, #0a1f44 0%, #1a3668 100%)',
        position: 'relative',
        flexShrink: 0,
        overflow: 'hidden',
      }}>
        {/* subtle grid overlay matching site pattern */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
          backgroundSize: '20px 20px',
        }}/>
        {/* category pill bottom-left */}
        <div style={{
          position: 'absolute', bottom: 14, left: 18,
          fontSize: 10, fontWeight: 600, letterSpacing: '0.10em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.92)',
          background: 'rgba(255,255,255,0.14)', backdropFilter: 'blur(6px)',
          padding: '3px 10px', borderRadius: 100, border: '1px solid rgba(255,255,255,0.22)',
        }}>{post.category}</div>
      </div>

      {/* Card body */}
      <div style={{ padding: '22px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <span style={{ fontSize: 12, color: 'var(--ink-4)', marginBottom: 10, display: 'block' }}>{post.date}</span>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
          color: 'var(--navy)', lineHeight: 1.3, letterSpacing: '-0.01em',
          marginBottom: 10, flex: 1,
        }}>{post.title}</h3>
        <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6, marginBottom: 18 }}>{post.desc}</p>
        <div style={{
          fontSize: 13, fontWeight: 500,
          color: hov ? 'var(--gold-dark)' : 'var(--navy)',
          display: 'inline-flex', alignItems: 'center', gap: 6,
          transition: 'color .15s ease',
        }}>
          Læs mere <Icon.arrow style={{ width: 14, height: 14 }}/>
        </div>
      </div>
    </a>
  );
}

// ── BlogPreview — 2-card strip for index.html ────────────────────────────────
function BlogPreview() {
  return (
    <section className="section" style={{ background: 'var(--bg-alt)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <span className="eyebrow" style={{ marginBottom: 12, display: 'inline-block' }}>Blog</span>
            <h2 className="h2" style={{ margin: 0 }}>Viden om GEO og AI-synlighed</h2>
          </div>
          <a href="blog.html" className="btn btn-outline" style={{ flexShrink: 0 }}>
            Se alle indlæg <Icon.arrow/>
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {BLOG_POSTS.slice(0, 2).map(post => (
            <BlogCard key={post.slug} post={post}/>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── BlogListing — full page for blog.html ────────────────────────────────────
const BLOG_BG = "linear-gradient(to right, rgba(10,31,68,0.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(10,31,68,0.03) 1px, transparent 1px) 0 0 / 20px 20px, radial-gradient(ellipse at center, #f6f5f0 0%, #ebe7da 100%)";

function BlogListing() {
  return (
    <>
      {/* Hero */}
      <section style={{
        padding: '72px 0 64px',
        background: BLOG_BG,
        borderBottom: '1px solid var(--line)',
      }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <span className="eyebrow" style={{ marginBottom: 16, display: 'inline-block' }}>Blog</span>
          <h1 className="h1" style={{ marginBottom: 20, fontSize: 'clamp(32px, 4.5vw, 52px)' }}>
            Viden om GEO og AI-synlighed
          </h1>
          <p className="lede" style={{ margin: '0 auto', fontSize: 17 }}>
            Guides, analyser og praktiske råd til revisorer der vil blive valgt af AI.
          </p>
        </div>
      </section>

      {/* Cards grid */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="wrap">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 24,
          }}>
            {BLOG_POSTS.map(post => (
              <BlogCard key={post.slug} post={post}/>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { BLOG_POSTS, BlogCard, BlogPreview, BlogListing });