// food.devtzan.com storefront mock — modeled on the actual LandingPage.tsx
// (amber StatusBar + white nav with gold medallion + dark hero in Syne).

function Storefront() {
  return (
    <div className="sf" aria-hidden="true">
      {/* amber status bar */}
      <div className="sf__status">
        <div className="sf__status-l">
          <span className="muted">We are currently</span>
          <b>OPEN</b>
          <span className="muted">(until 9:00 PM)</span>
        </div>
        <div className="sf__status-r">
          <span className="addr">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
            </svg>
            1421 W Lincoln Ave
          </span>
          <span>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
            </svg>
            (312) 555-0149
          </span>
        </div>
      </div>

      {/* white nav with gold medallion */}
      <div className="sf__nav">
        <div className="sf__nav-links">
          <span className="active">Home</span>
          <span>Gallery</span>
          <span>Our Story</span>
        </div>
        <span className="sf__nav-medallion-slot" aria-hidden="true">
          <div className="sf__medallion">
            <img src="assets/fork-and-merge-logo.png" alt="Fork & Merge" />
          </div>
        </span>
        <span className="sf__nav-cta">Order Now</span>
      </div>

      {/* hero with food background */}
      <div className="sf__hero">
        <div className="sf__hero-inner">
          <div className="sf__hero-tag">Family-run since 2009</div>
          <h1 className="sf__hero-name">Fork &amp; Merge</h1>
          <p className="sf__hero-desc">
            Hand-rolled sushi, izakaya plates, and a sake list that knows what it is.
          </p>
          <div className="sf__hero-ctas">
            <span className="sf__hero-primary">Order Online →</span>
            <span className="sf__hero-secondary">Find Us</span>
          </div>
        </div>
        <div className="sf__hero-cue">↓</div>
      </div>
    </div>
  );
}

window.Storefront = Storefront;