/* ============================================================================
 * BLOG INDEX — Sanity-Integration vorbereitet
 * ----------------------------------------------------------------------------
 * Sobald ihr eure Sanity-Credentials in SANITY_CONFIG eingetragen habt,
 * lädt diese Seite automatisch die echten Blog-Posts.
 * Bis dahin werden Demo-Posts angezeigt, damit die Seite nicht leer wirkt.
 *
 * Sanity-Schema-Vorschlag (in eurem Sanity Studio anlegen):
 *   - post:     title (string), slug (slug), excerpt (text), mainImage (image),
 *               body (array PortableText), publishedAt (datetime), author (ref),
 *               categories (array of refs)
 *   - author:   name (string), picture (image), bio (text)
 *   - category: title (string), slug (slug), color (string)
 * ========================================================================= */

const SANITY_CONFIG = {
  projectId: '1f1sf3dj',
  dataset: 'production',
  apiVersion: '2024-01-01'
};

const DEMO_POSTS = [
  {
    _id: 'demo-1',
    title: 'NIS-2: Was Geschäftsführer 2026 wissen müssen',
    slug: 'nis-2-was-geschaeftsfuehrer-2026-wissen-muessen',
    excerpt: 'Ein Praxisleitfaden zur Umsetzung der NIS-2-Richtlinie für KMU — von der Risikoanalyse bis zur Cyber-Versicherbarkeit.',
    mainImage: null,
    publishedAt: '2026-04-12',
    readTime: 8,
    author: { name: 'Mark Smith', picture: null },
    categories: [{ title: 'Compliance', color: '#FFB703' }, { title: 'NIS-2', color: '#0F52BA' }]
  },
  {
    _id: 'demo-2',
    title: 'Warum viele Cyber-Policen im Schadenfall nicht zahlen',
    slug: 'cyber-policen-zahlen-nicht',
    excerpt: 'Wir zeigen die häufigsten Ablehnungsgründe deutscher Cyber-Versicherer und welche IT-Obliegenheiten typischerweise zur Pflicht gemacht werden.',
    mainImage: null,
    publishedAt: '2026-03-28',
    readTime: 6,
    author: { name: 'Lian Mansar', picture: null },
    categories: [{ title: 'Cyber-Versicherung', color: '#4ade80' }]
  },
  {
    _id: 'demo-3',
    title: 'Ransomware-Wiederherstellung: Die ersten 72 Stunden',
    slug: 'ransomware-72-stunden',
    excerpt: 'Was passiert, wenn das Worst-Case-Szenario eintritt? Ein Tag-für-Tag-Protokoll aus einem realen Incident-Response-Fall in NRW.',
    mainImage: null,
    publishedAt: '2026-03-14',
    readTime: 12,
    author: { name: 'Mark Smith', picture: null },
    categories: [{ title: 'Incident Response', color: '#ff4d4f' }]
  },
  {
    _id: 'demo-4',
    title: 'DORA für IT-Dienstleister: Was sich 2026 ändert',
    slug: 'dora-it-dienstleister-2026',
    excerpt: 'Die EU-Verordnung DORA wirkt sich auch auf IT-Service-Provider aus, die Finanzdienstleister betreuen. Ein praxisnaher Überblick.',
    mainImage: null,
    publishedAt: '2026-02-20',
    readTime: 7,
    author: { name: 'Mark Smith', picture: null },
    categories: [{ title: 'Compliance', color: '#FFB703' }, { title: 'DORA', color: '#9333ea' }]
  }
];

const { useState: useStateB, useEffect: useEffectB } = React;

async function fetchSanityPosts() {
  if (!SANITY_CONFIG.projectId) return null;
  const groq = encodeURIComponent(`*[_type == "post" && defined(publishedAt)] | order(publishedAt desc) [0...20] {
    _id, title, "slug": slug.current, excerpt, "mainImage": mainImage.asset->url,
    publishedAt, "readTime": round(length(pt::text(body)) / 5 / 180),
    "author": author->{ name, "picture": picture.asset->url },
    "categories": categories[]->{ title, color }
  }`);
  const url = `https://${SANITY_CONFIG.projectId}.api.sanity.io/v${SANITY_CONFIG.apiVersion}/data/query/${SANITY_CONFIG.dataset}?query=${groq}`;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error('Sanity ' + res.status);
    const data = await res.json();
    return data.result || [];
  } catch (err) {
    console.warn('[Blog] Sanity-Fetch fehlgeschlagen:', err.message);
    return null;
  }
}

function formatDate(iso) {
  if (!iso) return '';
  const d = new Date(iso);
  return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
}

function BlogCard({ post, featured }) {
  return (
    <a href={`#${post.slug}`} className={`blog-card ${featured ? 'blog-card--featured' : ''}`}>
      <div className="blog-card-image">
        {post.mainImage ? (
          <img src={post.mainImage} alt={post.title} loading="lazy"/>
        ) : (
          <div className="blog-card-image-fallback">
            <span>{post.title.slice(0, 2).toUpperCase()}</span>
          </div>
        )}
      </div>
      <div className="blog-card-body">
        <div className="blog-card-cats">
          {(post.categories || []).map((c, i) => (
            <span key={i} className="blog-card-cat" style={{ '--cat-color': c.color || '#FFB703' }}>{c.title}</span>
          ))}
        </div>
        <h3 className="blog-card-title">{post.title}</h3>
        <p className="blog-card-excerpt">{post.excerpt}</p>
        <div className="blog-card-meta">
          <span>{formatDate(post.publishedAt)}</span>
          {post.readTime > 0 && <><span className="dot">·</span><span>{post.readTime} Min. Lesezeit</span></>}
          {post.author?.name && <><span className="dot">·</span><span>{post.author.name}</span></>}
        </div>
      </div>
    </a>
  );
}

function BlogPage() {
  const [posts, setPosts] = useStateB(DEMO_POSTS);
  const [source, setSource] = useStateB('demo');

  useEffectB(() => {
    if (!SANITY_CONFIG.projectId) return;
    fetchSanityPosts().then((live) => {
      if (live && live.length) {
        setPosts(live);
        setSource('sanity');
      }
    });
  }, []);

  const [featured, ...rest] = posts;

  return (
    <React.Fragment>
      <SiteHeader active="blog"/>

      {/* Hero */}
      <section className="blog-hero">
        <div className="hero-grid-bg"/>
        <div className="container">
          <span className="eyebrow"><Icon.Document size={14}/> &nbsp;MaliTech Wissen</span>
          <h1 className="blog-h1">Blog</h1>
          <p className="blog-lead">
            Praxiswissen zu Cyber-Sicherheit, IT-Compliance und Versicherbarkeit — kompakt aufbereitet für Geschäftsführer und IT-Entscheider.
          </p>
          {source === 'demo' && !SANITY_CONFIG.projectId && (
            <div className="blog-demo-notice">
              <Icon.AlertTriangle size={14}/>
              <span>
                <strong>Demo-Inhalt</strong> — sobald die Sanity-Verbindung konfiguriert ist (<code>page-blog.jsx</code> → <code>SANITY_CONFIG.projectId</code>),
                werden hier eure echten Posts geladen.
              </span>
            </div>
          )}
        </div>
      </section>

      {/* Posts */}
      <section className="section blog-section">
        <div className="container">
          {featured && (
            <div className="blog-featured-wrap">
              <span className="blog-section-label">Aktuell</span>
              <BlogCard post={featured} featured/>
            </div>
          )}

          {rest.length > 0 && (
            <>
              <span className="blog-section-label" style={{ marginTop: 64 }}>Weitere Beiträge</span>
              <div className="blog-grid">
                {rest.map((p) => <BlogCard key={p._id} post={p}/>)}
              </div>
            </>
          )}
        </div>
      </section>

      <CtaStrip
        heading="IT-Compliance konkret machen."
        sub="Wir verbinden Praxiswissen mit konkretem Setup — von der ersten Analyse bis zur versicherbaren Infrastruktur."
        primary="Termin buchen"
        primaryHref="kontakt.html"/>

      <SiteFooter/>
    </React.Fragment>
  );
}

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