export default function StainPromo() {
  return (
    <section className="stain-section">
      <div className="stain-bg"></div>
      <div className="stain-layout">
        <div>
          <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. Two products, maximum results — now available through VG Fence Products with contractor pricing and bulk ordering.</p>
          <div className="product-pills">
            <div className="product-pill"><strong>Product 1</strong>Stain & Seal</div>
            <div className="product-pill"><strong>Product 2</strong>Clean & Bright</div>
          </div>
        </div>
        <div className="stain-targets">
          <div style={{ fontFamily: 'var(--font-display)', fontSize: '14px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,.4)', marginBottom: '4px' }}>Who orders from us</div>
          {[
            "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>
          ))}
          <a href="#quote" className="btn-primary" style={{ marginTop: '8px', textAlign: 'center', display: 'block' }}>Get stain product pricing →</a>
        </div>
      </div>
    </section>
  );
}