export default function StainPromo() {
  return (
    <section className="stain-section">
      <div className="stain-bg"></div>
      <div className="stain-layout">
        <div className="reveal">
          <div className="stain-badge">New - High Margin Product Line</div>
          <h2 className="stain-h2">Expert Stain<br /><span>& Seal</span></h2>
          <p className="stain-desc">Professional-grade wood care products built for contractors. Maximum results with less labor — now available in Ontario through VG Fence Products with contractor pricing and bulk ordering.</p>
          
          <div className="stain-pills">
            <div className="stain-pill"><strong>Product 1</strong>Stain &amp; Seal</div>
            <div className="stain-pill"><strong>Product 2</strong>Clean &amp; Bright</div>
          </div>

          <div className="stain-promo-eyebrow">WHO ORDERS FROM US</div>
          <div className="stain-target-list">
            {[
              "Deck & fence staining contractors",
              "Exterior painters & handymen",
              "Pressure washing companies",
              "Property maintenance companies",
              "Wood restoration contractors",
              "DIY homeowners (decks & fences)"
            ].map((item, index) => (
              <div key={index} className="stain-target">
                <div className="stain-target-dot"></div>
                <div className="stain-target-txt">{item}</div>
              </div>
            ))}
          </div>
          <a href="/contact" className="btn-primary mt-32 d-inline-block">GET STAIN PRODUCT PRICING →</a>
        </div>

        <div className="stain-img-wrap reveal">
          <img src="/images/staining-hero.png" alt="Expert Stain & Seal Products" />
        </div>
      </div>
    </section>
  );
}
