// About.jsx — two-column about block with stats row
const About = () => {
  return (
    <section id="about" className="psd-section psd-section--about">
      <div className="psd-about-grid">
        <div className="psd-about-art psd-reveal psd-reveal--left">
          <img className="psd-about-storefront" src="assets/storefront.jpg" alt="Puerto Rican Deli storefront in Manchester, CT" loading="lazy" decoding="async" />
          <div className="psd-about-flag" aria-hidden="true">
            <div className="psd-about-stripe psd-about-stripe--red"></div>
            <div className="psd-about-stripe psd-about-stripe--white"></div>
            <div className="psd-about-stripe psd-about-stripe--red"></div>
            <div className="psd-about-stripe psd-about-stripe--white"></div>
            <div className="psd-about-stripe psd-about-stripe--red"></div>
            <div className="psd-about-stripe psd-about-stripe--triangle"></div>
            <div className="psd-about-stripe psd-about-stripe--star">★</div>
          </div>
        </div>
        <div className="psd-about-copy psd-reveal psd-reveal--right">
          <div className="psd-script psd-section-script">From the family</div>
          <h2 className="psd-section-title">A neighborhood deli with Puerto Rican roots.</h2>
          <p>
            We're a family deli in Manchester, CT, making the food we grew up eating —
            <strong> pernil</strong> that's slow-roasted overnight, sobao bread pressed to order,
            and coffee that doesn't quit.
          </p>
          <p>
            Whether you're grabbing a breakfast quesadilla on the way to work or settling in
            with a whole Cubano and a Malta, we want it to taste like home.
          </p>
          <p className="psd-script psd-about-sign">— The Puerto Rican Deli Family</p>

          <div className="psd-about-stats">
            <div>
              <span className="v">12hr</span>
              <span className="l">Pernil slow-roast<br />every night</span>
            </div>
            <div>
              <span className="v">100%</span>
              <span className="l">Family<br />owned &amp; run</span>
            </div>
            <div>
              <span className="v">2026</span>
              <span className="l">Serving Manchester<br />since</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.About = About;