/* Ersatzteile partner block · Blog / News */

function Ersatzteile({onNav}){
  const p=D.parts;
  return (
    <section className="sec on-surface parts-sec" id="ersatzteile">
      <div className="wrap">
        <div className="section-kicker"><span className="num">03</span><span className="line"/></div>
        <div className="parts-grid">
          <div className="parts-copy reveal">
            <span className="eyebrow">{p.eyebrow}</span>
            <h2 style={{marginTop:16}}>{p.title.split("\n").map((l,i)=> <React.Fragment key={i}>{l}{i===0&&<br/>}</React.Fragment>)}</h2>
            <p>{p.desc}</p>
            <div className="parts-points">
              {p.points.map(pt=>(
                <div className="parts-point" key={pt}><span className="pp-ic">{I.check()}</span>{pt}</div>
              ))}
            </div>
            <div className="parts-actions">
              <a className="btn btn-dark" href={"tel:"+D.contact.telHref}>{I.phone()} Teil anfragen</a>
              <a className="btn btn-outline" href={"mailto:"+D.contact.email}>{I.mail()} Per E-Mail</a>
            </div>
          </div>
          <div className="parts-card reveal">
            <div className="parts-card-head">
              <span className="pc-label">{p.partnerLabel}</span>
              <span className="pc-net">8 Vertragsmarken · 1 Teile-Hub</span>
            </div>
            <div className="parts-stats">
              <div className="ps"><div className="ps-v">8</div><div className="ps-k">Marken</div></div>
              <div className="ps"><div className="ps-v">24–48h</div><div className="ps-k">Express</div></div>
              <div className="ps"><div className="ps-v">100%</div><div className="ps-k">Original</div></div>
            </div>
            <div className="parts-track">
              {["Filter & Öle","Bremsen","Reifen","Akkus & E-Teile","Verschleißteile","Helme & Bekleidung"].map(t=>(
                <span className="pt-chip" key={t}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Blog(){
  return (
    <section className="sec on-dark" id="news">
      <div className="wrap">
        <div className="section-kicker"><span className="num">05</span><span className="line"/></div>
        <div className="inv-head" style={{marginBottom:34}}>
          <div>
            <h2 style={{color:"#fff"}}>News &amp;<br/>aus dem Laden</h2>
            <p style={{color:"#9a9a9e"}}>Neuheiten, Aktionen und Geschichten aus Hannover-Hainholz.</p>
          </div>
          <a className="btn btn-outline btn-sm" href="#news" onClick={(e)=>e.preventDefault()}>Alle Beiträge</a>
        </div>
        <div className="blog-grid">
          {D.posts.map((post,i)=>(
            <article className={"post"+(i===0?" feat":"")} key={post.title}>
              <div className="post-media"><img src={post.img} alt={post.title} loading="lazy"/></div>
              <div className="post-body">
                <div className="post-meta"><span className="post-tag">{post.tag}</span><span className="post-date">{post.date}</span></div>
                <h3>{post.title}</h3>
                <p>{post.excerpt}</p>
                <span className="btn-ghost">Weiterlesen <span className="arr">{I.arrow()}</span></span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Ersatzteile=Ersatzteile; window.Blog=Blog;