// Miss-Scully — Blog Übersicht (Beiträge von miss-scully.ch/blog)
// Lädt nach homepage-sections.jsx + subpages-content.jsx.

const WIX_IMG = 'https://static.wixstatic.com/media/';
const IMG_PARAMS = '/v1/fill/w_640,h_440,fp_0.50_0.50,q_85,enc_avif,quality_auto/';
const POST_BASE = 'https://www.miss-scully.ch/post/';

const BLOG_POSTS = [
{ t: 'Sommerhitze & Abkühlung', d: '3. Juni 2026', img: '11062b_5f127e13862a4da09a6f4d9ac3774eb8~mv2_d_3725_2742_s_4_2.jpg', slug: 'sommerhitze-abkühlung' },
{ t: 'Frühsommer und die Folgen', d: '7. Mai 2026', img: '11062b_f3bb5c66729448d2a2c0540c31545719~mv2.jpg', slug: 'frühsommer-und-die-folgen' },
{ t: 'Bewegung ist nun sehr wichtig', d: '9. April 2026', img: '11062b_9285382a40fb45e185c86a84ad65f249~mv2.jpeg', slug: 'bewegung-ist-nun-sehr-wichtig' },
{ t: 'Der Frühling kommt', d: '5. März 2026', img: '11062b_b8c8f9522e98408ba9dc343d8e6352f2~mv2.jpg', slug: 'der-frühling-kommt' },
{ t: 'Wintergesundheit für Hunde & Katzen', d: '4. Februar 2026', img: '69d063_884e642f6585437cb19621c9c9bff825~mv2.jpg', slug: 'wintergesundheit-für-hunde-katzen' },
{ t: 'Gesund und sicher ins neue Jahr', d: '7. Januar 2026', img: '69d063_86df8d3210734d019ea0e61049baa16d~mv2.jpg', slug: 'gesund-und-sicher-ins-neue-jahr' },
{ t: 'Frohe Weihnachten und ein glückliches neues Jahr für alle Tierfreunde', d: '15. Dezember 2025', img: '69d063_f1bf5fcc50db4002923e48fc219610c0~mv2.jpg', slug: 'frohe-weihnachten-und-ein-glückliches-neues-jahr-für-alle-tierfreunde', byline: '20. Dezember 2025 von Nicolas Piccolo-Leeser', img2: '69d063_73669515c92143859f4bcc5bd17a9bf4~mv2.jpg', tags: ['#FroheWeihnachten', '#Hundezubehör', '#Katzenzubehör', '#Anifit', '#Tierliebe', '#SilvesterTipps', '#WeihnachtenMitHund', '#WeihnachtenMitKatze', '#NeuesJahr', '#MissScully'] },
{ t: 'Weihnachten 2025 – Spenden und Tierschutz', d: '5. Dezember 2025', img: '69d063_28de67b46c89445f935f3e88756b58e5~mv2.jpg', slug: 'weihnachten-2025-spenden-und-tierschutz' },
{ t: 'Spielzeug und Hundezubehör für ein glückliches Hundeleben', d: '30. November 2025', img: '69d063_e22a3e4cd52a45b2a2a645fc0a196e73~mv2.jpg', slug: 'spielzeug-und-hundezubehör-für-ein-glückliches-hundeleben', byline: '30. November 2025 von Nicolas Piccolo-Leeser' },
{ t: 'Animalia Tierversicherung für Hunde & Katzen', d: '30. Oktober 2025', img: '69d063_884e642f6585437cb19621c9c9bff825~mv2.jpg', slug: 'animalia-tierversicherung-für-hunde-katzen', byline: '31. Oktober 2025 von Nicolas Piccolo-Leeser' }];

function BlogPage() {
  return (
    <PageShell active="">
      <PageHero
        kicker="Tierblog"
        title="Tipps für Hunde & Katzen"
        lede="Ernährungs- und Pflege-Tipps, Trainingsempfehlungen und Ratgeber rund ums gesunde Tierleben – von Nicolas & Scully.">
      </PageHero>

      <section className="blog-section" data-screen-label="Blog Beiträge">
        <div className="blog-grid">
          {BLOG_POSTS.map((p, i) =>
          <a
            key={p.slug}
            className="blog-card"
            href={'Blog Post.html?p=' + encodeURIComponent(p.slug)}
            data-reveal
            style={{ transitionDelay: i % 3 * 60 + 'ms' }}>
              <span className="blog-img">
                <img src={WIX_IMG + p.img + IMG_PARAMS + p.img.replace(/\.(jpe?g)$/, '.webp')} alt={p.t} loading="lazy"></img>
              </span>
              <span className="blog-meta">{p.d} · Nicolas Piccolo-Leeser</span>
              <strong>{p.t}</strong>
              <span className="pillar-link">Artikel lesen →</span>
            </a>
          )}
        </div>
      </section>

      <PageCTA
        title="Keine Tipps mehr verpassen?"
        text="Folgen Sie Miss-Scully oder schreiben Sie uns – wir beraten Sie gerne persönlich."
        primaryLabel="E-Mail schreiben"
        primaryHref="mailto:info@miss-scully.ch"
        secondaryLabel="Anrufen"
        secondaryHref="tel:+41449742626">
      </PageCTA>
    </PageShell>);

}

function BlogPostCard({ p }) {
  return (
    <a className="blog-card" href={'Blog Post.html?p=' + encodeURIComponent(p.slug)}>
      <span className="blog-img">
        <img src={WIX_IMG + p.img + IMG_PARAMS + p.img.replace(/\.(jpe?g)$/, '.webp')} alt={p.t} loading="lazy"></img>
      </span>
      <span className="blog-meta">{p.d} · Nicolas Piccolo-Leeser</span>
      <strong>{p.t}</strong>
      <span className="pillar-link">Artikel lesen →</span>
    </a>);

}

function BlogPostPage() {
  const params = new URLSearchParams(window.location.search);
  const slug = params.get('p');
  const post = BLOG_POSTS.find((p) => p.slug === slug) || BLOG_POSTS[0];
  const others = BLOG_POSTS.filter((p) => p.slug !== post.slug).slice(0, 3);
  React.useEffect(() => {
    document.title = post.t + ' | Miss-Scully';
  }, [post.t]);
  return (
    <PageShell active="">
      <article className="post-article" data-screen-label="Blogartikel">
        <a className="post-back" href="Blog.html">← Alle Beiträge</a>
        <h1>{post.t}</h1>
        <p className="blog-meta">{post.d} · Nicolas Piccolo-Leeser</p>
        <img
          className="post-cover"
          src={WIX_IMG + post.img + '/v1/fill/w_1200,h_800,fp_0.50_0.50,q_85,enc_avif,quality_auto/' + post.img.replace(/\.(jpe?g)$/, '.webp')}
          alt={post.t}>
        </img>
        {post.byline ? <p className="post-byline"><strong>{post.byline}</strong></p> : null}
        {post.img2 ?
        <img
          className="post-cover"
          src={WIX_IMG + post.img2 + '/v1/fill/w_1200,h_800,fp_0.50_0.50,q_85,enc_avif,quality_auto/' + post.img2.replace(/\.(jpe?g)$/, '.webp')}
          alt={post.t}>
        </img> :
        null}
        {post.tags ?
        <p className="post-tags">
            {post.tags.map((tg) => <span key={tg} className="breed-chip">{tg}</span>)}
          </p> :
        null}
      </article>
      <section className="post-more" data-screen-label="Weitere Beiträge">
        <div className="section-head" data-reveal>
          <p className="kicker">Aktuelle Beiträge</p>
          <h2>Mehr aus dem Tierblog</h2>
        </div>
        <div className="blog-grid">
          {others.map((p) => <BlogPostCard key={p.slug} p={p}></BlogPostCard>)}
        </div>
      </section>
      <PageCTA
        title="Fragen zu Futter, GPS oder Versicherung?"
        text="Wir beraten Sie gerne persönlich – kostenlos und unverbindlich."
        primaryLabel="E-Mail schreiben"
        primaryHref="mailto:info@miss-scully.ch"
        secondaryLabel="Anrufen"
        secondaryHref="tel:+41449742626">
      </PageCTA>
    </PageShell>);

}

window.BlogPage = BlogPage;
window.BlogPostPage = BlogPostPage;