// Resources.jsx — section header + horizontal carousel of resource cards (one featured)

function ResourceCard({ tag, title, body, img, featured }) {
  return (
    <article className={"rd-rcard" + (featured ? " is-featured" : "")}>
      <div className="rd-rcard__img" style={{ backgroundImage: `url(${img})` }}>
        {tag && <span className="rd-rcard__tag">{tag}</span>}
      </div>
      <div className="rd-rcard__body">
        <h3>{title}</h3>
        <p>{body}</p>
        <a href="#" className="rd-rcard__cta">
          Read More <img src="assets/icon-arrow-right.svg" alt="" />
        </a>
      </div>
    </article>
  );
}

function Resources() {
  const items = [
    { title: "The Future of Aluminum Repair", body: "Discover how specialized structural calibration is revolutionizing high-end body restoration for modern electric vehicles.", img: "assets/resource-aluminum.png" },
    { title: "Precision Paint Matching",       body: "Our master artisans explain the science behind spectral analysis and 4-stage pearl coat application for a factory finish.", img: "assets/services-car.png" },
    { title: "5 things you should know about ICBC", tag: "FEATURED GUIDE", body: "Comprehensive guide to ensuring your vehicle's safety sensors and radar systems are perfectly aligned post-collision.", img: "assets/resource-featured.png", featured: true },
    { title: "EV Frame Integrity",              body: "Understanding the critical nature of battery housing and skate-board chassis alignment in electric performance vehicles.", img: "assets/services-detail.png" },
    { title: "Carbon Fiber Restoration",        body: "The delicate process of weaving and bonding exotic composites for hyper-car bodywork.", img: "assets/services-car.png" },
  ];
  return (
    <section className="rd-resources" data-screen-label="01 Home / Resources">
      <header>
        <h2>Resources</h2>
        <div className="rd-bar" />
        <p>Stay informed with the latest insights from our master technicians and industry experts.</p>
      </header>
      <div className="rd-resources__rail">
        {items.map((it, i) => <ResourceCard key={i} {...it} />)}
      </div>
      <div className="rd-resources__cta">
        <button className="btn-primary">See ALL Resources</button>
      </div>
    </section>
  );
}

window.Resources = Resources;