/* global React, Button, HandNote, Badge, useHappyHour, OPENTABLE_URL */

function HappyHour() {
  const hh = useHappyHour();
  return (
    <section id="happy-hour" className="dh-happyhour">
      <div className="dh-happyhour-inner">
        <span className="dh-eyebrow" style={{ color: "var(--terracotta-300)" }}>
          {hh.isNow ? "Happening now · until 6" : ""}
        </span>
        <h2 className="dh-happyhour-title">Happy Hour</h2>
        <p style={{color:'var(--terracotta-300)',fontFamily:'var(--font-display)',fontSize:17,letterSpacing:'0.12em',margin:'0 0 16px'}}>Daily · 3–6pm · Closed Mondays</p>
        <div className="dh-happyhour-grid">
          <div className="dh-happyhour-card">
            <div className="dh-happyhour-price" style={{fontSize:'2.2em'}}>50% off</div>
            <div>Select wines &amp; spirits</div>
          </div>
          <div className="dh-happyhour-card">
            <div className="dh-happyhour-price" style={{fontSize:'2.2em'}}>$10</div>
            <div>Small bites</div>
          </div>
          <div className="dh-happyhour-card">
            <div className="dh-happyhour-price" style={{fontSize:'2.2em'}}>$10</div>
            <div>Handcrafted cocktails</div>
          </div>
        </div>

        <div className="dh-happyhour-cta">
          <p className="dh-happyhour-lead" style={{marginBottom:16}}>Book a table or pull up a stool at the bar. Opa!</p>
          <Button variant="primary" as="a" href={OPENTABLE_URL} target="_blank" rel="noopener">Reserve a table</Button>
        </div>
      </div>
    </section>
  );
}

window.HappyHour = HappyHour;