// book.tsx — Reservations are by phone.
const BOOK_PHONE_DISPLAY = '(02) 9662 8183';
const BOOK_PHONE_DIAL = '+61296628183';

const BookPage: React.FC = () => {
  return (
    <div className="page">
      <div className="call-shell">
        <div className="call-card">
          <div className="call-eyebrow">
            <span className="dot" />
            Reservations &amp; orders
          </div>

          <h1 className="call-title">
            Pick up the <em>phone.</em>
          </h1>

          <p className="call-sub">
            We take bookings, takeaway and large-group orders by phone. One of the team will pick up between 11:00 and 20:30, every day.
          </p>

          <a className="call-number" href={'tel:' + BOOK_PHONE_DIAL} aria-label={'Call Nikko on ' + BOOK_PHONE_DISPLAY}>
            <span className="call-icon" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 6 6L15 14l5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>
              </svg>
            </span>
            <span className="call-digits">{BOOK_PHONE_DISPLAY}</span>
            <span className="call-action">Tap to call →</span>
          </a>

          <div className="call-meta">
            <div className="call-meta-item">
              <div className="k">Open</div>
              <div className="v">Mon · 11:30 — 20:30</div>
              <div className="v">Tue – Sun · 11:10 — 20:30</div>
            </div>
            <div className="call-meta-item">
              <div className="k">Find us</div>
              <div className="v">1/305 Anzac Parade</div>
              <div className="v">Kingsford NSW 2032</div>
            </div>
            <div className="call-meta-item">
              <div className="k">Walk-ins</div>
              <div className="v">Always welcome.</div>
              <div className="v small">First seat, first served.</div>
            </div>
          </div>

          <div className="call-stamp" aria-hidden="true">
            <div className="jp">日光</div>
            <div className="label">Nikko · Kingsford</div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.BookPage = BookPage;