/* global React, Button, Badge, HandNote, KeyDivider, OliveVine, useHappyHour, useOpenStatus, OPENTABLE_URL */

function Hero() {
  const hh = useHappyHour();
  const openStatus = useOpenStatus();
  return (
    <section id="top" className="dh-hero">
      <div className="dh-hero-topvine" aria-hidden="true">
        <OliveVine />
      </div>
      <div className="dh-hero-centered">
        <span className="dh-eyebrow" style={{ marginBottom: 8 }}>Jupiter / Tequesta · Now Open</span>
        <img
          className="dh-hero-logo"
          src="logo-dimis-cropped-olive800.png"
          alt="Dimi's Greek House"
          style={{ margin: '12px auto 28px' }}
        />
        <p className="dh-hero-lead" style={{ maxWidth: 640, margin: '0 auto 12px' }}>
          <strong>A Piece of the Greek Islands, Set on the Florida Coast.</strong>
        </p>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--ink-600)', maxWidth: 560, margin: '0 auto 36px', fontStyle: 'italic' }}>
          Where fresh Mediterranean flavors, handcrafted cocktails, and genuine Greek hospitality come together.
        </p>
        <div className="dh-hero-cta" style={{ justifyContent: 'center', marginBottom: 28 }}>
          <Button variant="primary" as="a" href={OPENTABLE_URL} target="_blank" rel="noopener">Reserve on OpenTable</Button>
          <Button variant="ghost" as="a" href="#menu">See the menu</Button>
        </div>
        <div className="dh-hero-meta" style={{ justifyContent: 'center' }}>
          {openStatus.isNow
            ? <Badge tone="olive-soft" dot>{openStatus.label}</Badge>
            : <Badge tone="olive-outline" dot>{openStatus.label}</Badge>}
          {hh.isNow
            ? <Badge tone="terra">{hh.label}</Badge>
            : <Badge tone="terra-outline">{hh.label}</Badge>}
        </div>
      </div>
      <div className="dh-hero-divider" aria-hidden="true">
        <KeyDivider />
      </div>
    </section>
  );
}

window.Hero = Hero;