/* global React */

/* ───────── HEADER (sticky) ───────── */
function HHHeader({ onOrderClick }) {
  return (
    <header className="hh-header">
      <a href="#top" className="hh-brand">
        <img src={(window.__resources && window.__resources.logo) || "assets/hungry-hub-logo.png"} alt="Hungry Hub charcoal chicken Warrawong logo" fetchpriority="high" decoding="async" className="hh-brand-logo" />
      </a>
      <nav className="hh-nav" aria-label="Primary">
        <a href="#about">About</a>
        <a href="#menu">Menu</a>
        <a href="#order">Order</a>
        <a href="#find">Find Us</a>
      </nav>
      <button className="hh-btn-red hh-btn-sm" onClick={onOrderClick}>Order Now →</button>
    </header>);

}

/* ───────── HERO A — TYPE-LED ───────── */
function HHHero({ onOrder }) {
  return (
    <section className="hh-hero" id="top">
      <div className="hh-hero-eyebrow">Warrawong NSW · Charcoal Cooked Daily</div>
      <h1 className="hh-hero-title">Real<br />Coals.<br />Real Feeds.</h1>
      <p className="hh-hero-sub">Slow-cooked chickens, big burgers, loaded fries.<br />Walk in, ring ahead, or get it delivered.</p>
      <div className="hh-hero-ctas">
        <button className="hh-btn-red hh-btn-lg" onClick={onOrder}>Order Now →</button>
        <a href="#menu" className="hh-btn-yellow hh-btn-lg">View Menu</a>
      </div>
      <div className="hh-stripe" aria-hidden="true"></div>
    </section>);

}

/* ───────── ABOUT ───────── */
function HHAbout() {
  return (
    <section className="hh-about" id="about">
      <div className="hh-about-inner">
        <div className="hh-about-copy">
          <div className="hh-eyebrow">Our story</div>
          <h2 className="hh-h2">Warrawong's Chicken Shop.</h2>
          <p>Hungry Hub is a family-run charcoal chicken shop in the heart of Warrawong. Every chicken on the rotisserie is cooked over real coals; slow, smoky, the way it should be.</p>
          <p>We do the classics properly. Whole chickens for the family. Big burgers, fat wraps, loaded fries piled high. Smoothies and cold-pressed juices for the after-work crowd. Kids welcome, parking out front.</p>
          <p>Dine-in, takeaway, or order through DoorDash and Uber Eats. We're here Tuesday through Sunday, closed Mondays so the team can rest up.</p>
        </div>
        <div className="hh-about-aside">
          <div className="hh-stat-card">
            <div className="hh-stat-num">6</div>
            <div className="hh-stat-lbl">Days a week<br />(closed Monday)</div>
          </div>
          <div className="hh-stat-card hh-stat-card--red">
            <div className="hh-stat-num">100%</div>
            <div className="hh-stat-lbl">Charcoal-fired<br />chickens, daily</div>
          </div>
          <div className="hh-stat-card">
            <div className="hh-stat-num">$75</div>
            <div className="hh-stat-lbl">Chicken Family Deal<br />feeds the whole table</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ───────── MENU ITEM ROW ───────── */
function HHMenuItem({ item }) {
  const hasVariants = item.variants && item.variants.length > 0;
  return (
    <div className="hh-mi">
      <div className="hh-mi-main">
        <div className="hh-mi-name">{item.name}
          {item.tags?.includes('popular') && <span className="hh-tag hh-tag--red">Popular</span>}
          {item.tags?.includes('signature') && <span className="hh-tag hh-tag--red">Signature</span>}
          {item.tags?.includes('spicy') && <span className="hh-tag hh-tag--maroon">Spicy</span>}
          {item.tags?.includes('feast') && <span className="hh-tag hh-tag--red">Feast</span>}
        </div>
        {item.description && <div className="hh-mi-desc">{item.description}</div>}
      </div>
      <div className="hh-mi-right">
        {hasVariants ? <div className="hh-mi-variants">
            {item.variants.map((v, i) =>
          <div key={i} className="hh-mi-variant">
                <span className="hh-mi-variant-lbl">{v.label}</span>
                <span className="hh-mi-variant-price">${formatPrice(v.price)}</span>
              </div>
          )}
          </div> :

        <div className="hh-mi-price">${formatPrice(item.price)}</div>
        }
      </div>
    </div>);

}
function formatPrice(n) {return Number.isInteger(n) ? n : n.toFixed(2);}

/* ───────── MENU SECTION ───────── */
function HHMenuSection({ category, items, illustration }) {
  return (
    <div className="hh-cat" id={`cat-${category.id}`}>
      <div className="hh-cat-head">
        <div>
          <h3 className="hh-cat-title">{category.title}</h3>
          {category.subtitle && <div className="hh-cat-sub">{category.subtitle}</div>}
        </div>
        {illustration && <div className="hh-cat-illus" aria-hidden="true">{illustration}</div>}
      </div>
      <div className="hh-cat-items">
        {items.map((it) => <HHMenuItem key={it.id} item={it} />)}
      </div>
    </div>);

}

/* ───────── MENU (full) ───────── */
function HHMenu({ menu, categories }) {
  const grouped = categories.map((c) => ({ cat: c, items: menu.filter((m) => m.category === c.id) }));
  return (
    <section className="hh-menu" id="menu">
      <div className="hh-menu-head">
        <div className="hh-eyebrow">The full menu</div>
        <h2 className="hh-h1">Menu.</h2>
        <p className="hh-menu-intro">Everything we serve. In-store prices. Delivery prices on the platforms.</p>
        <nav className="hh-menu-nav" aria-label="Menu categories">
          {categories.map((c) =>
          <a key={c.id} href={`#cat-${c.id}`} className="hh-menu-nav-link">{c.title}</a>
          )}
        </nav>
      </div>
      <div className="hh-menu-grid">
        {grouped.map(({ cat, items }, i) =>
        <HHMenuSection key={cat.id} category={cat} items={items}
        illustration={catIllustration(cat.id)} />

        )}
      </div>
    </section>);

}

/* tiny inline line-art for category headers — red strokes on yellow, brand-true */
function catIllustration(id) {
  const stroke = "var(--hh-red)";
  const props = { fill: "none", stroke, strokeWidth: "3.2", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (id) {
    case 'charcoal':return (
        <svg viewBox="0 0 80 64" width="80" height="64">
        <g {...props}>
          <path d="M40 8 C 24 12, 16 24, 18 38 C 20 50, 30 56, 40 56 C 50 56, 60 50, 62 38 C 64 24, 56 12, 40 8 Z" />
          <path d="M40 8 C 38 6, 36 4, 32 4 C 30 6, 30 8, 32 10" />
          <path d="M28 28 q 2 -2, 4 0" /><path d="M48 28 q 2 -2, 4 0" />
          <path d="M32 40 q 8 4, 16 0" />
        </g>
      </svg>);

    case 'deals':
    case 'family':return (
        <svg viewBox="0 0 80 64" width="80" height="64">
        <g {...props}>
          <path d="M8 32 L 72 32" />
          <path d="M14 18 L 14 46 M 26 14 L 26 50 M 40 12 L 40 52 M 54 14 L 54 50 M 66 18 L 66 46" />
          <path d="M10 24 q 4 -8, 12 0" />
        </g>
      </svg>);

    case 'burgers':return (
        <svg viewBox="0 0 80 64" width="80" height="64">
        <g {...props}>
          <path d="M10 24 Q 40 6, 70 24" />
          <path d="M8 30 L 72 30" />
          <path d="M10 36 Q 18 42, 26 36 Q 34 42, 42 36 Q 50 42, 58 36 Q 66 42, 70 36" />
          <path d="M10 44 Q 40 56, 70 44" />
          <path d="M22 22 q -2 -2, 0 -4 M 36 20 q -2 -2, 0 -4 M 50 22 q -2 -2, 0 -4" />
        </g>
      </svg>);

    case 'wraps':return (
        <svg viewBox="0 0 80 64" width="80" height="64">
        <g {...props}>
          <path d="M14 14 L 60 14 L 70 32 L 60 50 L 14 50 Z" />
          <path d="M22 22 L 56 22 M 22 32 L 56 32 M 22 42 L 56 42" />
        </g>
      </svg>);

    case 'loaded':
    case 'sides':return (
        <svg viewBox="0 0 80 64" width="80" height="64">
        <g {...props}>
          <path d="M22 24 L 22 56 L 58 56 L 58 24 Z" />
          <path d="M28 24 L 28 8 M 36 24 L 36 4 M 44 24 L 44 6 M 52 24 L 52 10" />
        </g>
      </svg>);

    case 'drinks':return (
        <svg viewBox="0 0 80 64" width="80" height="64">
        <g {...props}>
          <path d="M22 14 L 58 14 L 54 56 L 26 56 Z" />
          <path d="M28 22 L 52 22" />
          <path d="M40 8 L 40 14 M 36 6 L 44 6" />
        </g>
      </svg>);

    default:return null;
  }
}

/* ───────── ORDER ONLINE ───────── */
function HHOrder() {
  return (
    <section className="hh-order" id="order">
      <div className="hh-order-inner">
        <div className="hh-eyebrow hh-eyebrow--on-red">Get it delivered</div>
        <h2 className="hh-h1 hh-h1--yellow">Order Online.</h2>
        <p className="hh-order-intro">Two ways to get Hungry Hub to your door. Pick your platform.</p>
        <div className="hh-order-cards">
          <a className="hh-order-card hh-order-card--doordash" href="https://www.doordash.com/en-AU/store/hungry-hub-warrawong-33130349/55655947/" target="_blank" rel="noopener noreferrer">
            <div className="hh-order-card-stub"></div>
            <div className="hh-order-card-body">
              <div className="hh-order-card-platform">
                <span className="hh-doordash-logo">DoorDash</span>
              </div>
              <div className="hh-order-card-tag">Order ahead, skip the line</div>
              <div className="hh-order-card-cta">
                <span>Open DoorDash</span>
                <span className="hh-arrow">↗</span>
              </div>
            </div>
          </a>
          <a className="hh-order-card hh-order-card--ubereats" href="https://www.ubereats.com/au/store/hungry-hub/PtaoS9mMW0OvBoOup1doMw" target="_blank" rel="noopener noreferrer">
            <div className="hh-order-card-stub"></div>
            <div className="hh-order-card-body">
              <div className="hh-order-card-platform">
                <span className="hh-ubereats-logo">
                  <span className="hh-ubereats-uber">Uber</span><span className="hh-ubereats-eats">Eats</span>
                </span>
              </div>
              <div className="hh-order-card-tag">Delivered hot, straight to the door</div>
              <div className="hh-order-card-cta">
                <span>Open Uber Eats</span>
                <span className="hh-arrow">↗</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>);

}

/* ───────── FIND US ───────── */
function HHFind() {
  return (
    <section className="hh-find" id="find">
      <div className="hh-find-inner">
        <div className="hh-find-left">
          <div className="hh-eyebrow">Visit us</div>
          <h2 className="hh-h1">Find Us.</h2>
          <div className="hh-find-block">
            <div className="hh-find-lbl">Address</div>
            <div className="hh-find-val">Unit 5, 32–40 King Street<br />Warrawong NSW 2502</div>
            <a className="hh-link-arrow" href="https://maps.google.com/?q=Unit+5%2C+32-40+King+Street+Warrawong+NSW+2502" target="_blank" rel="noopener noreferrer">Get directions →</a>
          </div>
          <div className="hh-find-block">
            <div className="hh-find-lbl">Phone</div>
            <a className="hh-find-val hh-find-phone" href="tel:+61242741089">(02) 4274 1089</a>
          </div>
          <div className="hh-find-block">
            <div className="hh-find-lbl">Hours</div>
            <table className="hh-hours">
              <tbody>
                <tr><td>Monday</td><td className="hh-hours-closed">Closed</td></tr>
                <tr><td>Tuesday</td><td>10am – 8pm</td></tr>
                <tr><td>Wednesday</td><td>10am – 8pm</td></tr>
                <tr><td>Thursday</td><td>10am – 8pm</td></tr>
                <tr><td>Friday</td><td>10am – 8pm</td></tr>
                <tr><td>Saturday</td><td>10am – 8pm</td></tr>
                <tr><td>Sunday</td><td>10am – 8pm</td></tr>
              </tbody>
            </table>
          </div>
          <div className="hh-find-tags">
            <span className="hh-pill">Dine-in</span>
            <span className="hh-pill">Takeaway</span>
            <span className="hh-pill">Delivery</span>
            <span className="hh-pill">Kid-friendly</span>
            <span className="hh-pill">Free parking</span>
            <span className="hh-pill">Cards accepted</span>
          </div>
        </div>
        <div className="hh-find-map">
          <iframe
            title="Map to Hungry Hub Warrawong"
            src="https://www.google.com/maps?q=Unit+5%2C+32-40+King+Street+Warrawong+NSW+2502&output=embed"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade">
          </iframe>
        </div>
      </div>
    </section>);

}

/* ───────── FOOTER ───────── */
function HHFooter() {
  return (
    <footer className="hh-footer">
      <div className="hh-footer-inner">
        <div className="hh-footer-brand">
          <div className="hh-footer-mark">Hungry<br />Hub.</div>
          <div className="hh-footer-tag">Charcoal Chicken · Warrawong NSW</div>
        </div>
        <div className="hh-footer-cols">
          <div>
            <div className="hh-footer-h">Visit</div>
            <div className="hh-footer-l">Unit 5, 32–40 King Street</div>
            <div className="hh-footer-l">Warrawong NSW 2502</div>
            <a className="hh-footer-l hh-footer-link" href="tel:+61242741089">(02) 4274 1089</a>
          </div>
          <div>
            <div className="hh-footer-h">Hours</div>
            <div className="hh-footer-l">Tue – Sun</div>
            <div className="hh-footer-l">10am – 8pm</div>
            <div className="hh-footer-l hh-footer-l--dim">Closed Monday</div>
          </div>
          <div>
            <div className="hh-footer-h">Follow</div>
            <a className="hh-footer-l hh-footer-link" href="https://instagram.com/hungryhubtakeaway" target="_blank" rel="noopener noreferrer">@hungryhubtakeaway →</a>
          </div>
        </div>
      </div>
      <div className="hh-footer-bottom">
        <div>© Hungry Hub. Charcoal-fired in Warrawong.</div>
        <div className="hh-footer-bottom-r">{"Made with love <3"}</div>
      </div>
    </footer>);

}

Object.assign(window, {
  HHHeader, HHHero, HHAbout, HHMenuItem, HHMenuSection, HHMenu, HHOrder, HHFind, HHFooter
});