/* global React, Icon, Icons */

/* ---------- Event specials (from the Feastival flyer) ---------- */
function SpecialsBand() {
  const pages = [
    {
      id: 'p1', img: window.__resources.spec01,
      alt: 'Event specials, page 1: custom 10x10 pop-up tents from $695, back and side walls from $165, 14 ft feather flags $169, wheeled storage bag $75. Free delivery on all products.',
    },
    {
      id: 'p2', img: window.__resources.spec02,
      alt: 'Event specials, page 2: table covers from $155, retractable banners $195, double-sided light box displays $627, plus full graphic design services.',
    },
  ];
  const pdf = 'assets/specials/your-sign-guy-event-specials.pdf';

  return (
    <section className="specials" id="specials">
      <div className="container">
        <div className="specials-head">
          <span className="zigzag" aria-hidden="true"></span>
          <h2>Specials</h2>
          <span className="zigzag" aria-hidden="true"></span>
        </div>
        <p className="specials-sub">Custom event &amp; trade show packages — tents, flags, banners, table covers &amp; more.</p>

        <div className="specials-pages">
          {pages.map(p => (
            <a className="specials-page" key={p.id} href={p.img} target="_blank" rel="noopener">
              <img src={p.img} alt={p.alt} loading="lazy"/>
            </a>
          ))}
        </div>

        <div className="specials-note">
          <p>
            <strong>Every order is customized to your brand,</strong> so final pricing can vary.
            Please call for an exact quote.
          </p>
          <div className="specials-actions">
            <a className="btn btn-red" href="tel:7209251172">
              <Icon d={Icons.Phone} size={16}/> Call 720·925·1172
            </a>
            <a className="btn btn-outline" href={pdf} target="_blank" rel="noopener" download>
              Download Specials (PDF)
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SpecialsBand = SpecialsBand;