// home.tsx
type GoTo = (tab: string) => void;

const HomePage: React.FC<{ goTo: GoTo }> = ({ goTo }) => {
  const data = window.useMenu();

  return (
    <div className="page">
      <section className="hero" aria-label="Hero">
        <div className="hero-text">
          <div className="hero-tag">Japanese × Korean Kitchen</div>
          <h1>
            Nikko.<br />
            <span className="red">日本 × 한국</span>
            <em>Kingsford · Sydney</em>
          </h1>
          <p className="hero-sub">
            Japanese and Korean comfort cooking — bibimbap, donburi, ramen, fried chicken and bento — served from a black-and-red corner kitchen on Anzac Parade.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary" onClick={() => goTo('book')}>
              Book by phone <span className="btn-arrow">→</span>
            </button>
            <button className="btn btn-ghost" onClick={() => goTo('menu')}>
              See the menu
            </button>
          </div>
          <div className="hero-meta">
            <div className="meta-item">
              <div className="k">Open daily</div>
              <div className="v">11:30 — 20:30</div>
            </div>
            <div className="meta-item">
              <div className="k">Find us</div>
              <div className="v">1/305 Anzac Pde, Kingsford</div>
            </div>
          </div>
        </div>
        <div className="hero-image">
          <img src="assets/spread.jpeg" alt="Nikko table — Korean and Japanese spread with stone bibimbap, kimchi, fried chicken, and pajeon" />
          <div className="hero-stamp">
            <div className="jp">日光</div>
            <div className="label">Nikko · Kingsford</div>
          </div>
        </div>
      </section>

      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          <span>
            Stone bibimbap <i className="dot"></i> Korean fried chicken <i className="dot"></i> Tonkotsu ramen <i className="dot"></i> Katsu curry <i className="dot"></i> Aged kimchi <i className="dot"></i> Bulgogi don <i className="dot"></i>
            Stone bibimbap <i className="dot"></i> Korean fried chicken <i className="dot"></i> Tonkotsu ramen <i className="dot"></i> Katsu curry <i className="dot"></i> Aged kimchi <i className="dot"></i> Bulgogi don <i className="dot"></i>
          </span>
        </div>
      </div>

      <section className="specials" id="specials" aria-labelledby="specials-h">
        <div className="specials-head">
          <div>
            <div className="label">Lunch Specials · 11:30 – 14:30</div>
            <h2 id="specials-h">Quick, hot, <em>under twenty</em>.</h2>
          </div>
          <p className="pitch">
            Six rotating lunch sets, all <strong>under $20</strong>. Eat in or grab and go. Perfect for the lecture-hall sprint between classes.
          </p>
        </div>
        <div className="specials-grid">
          {data?.specials?.map((s) => (
            <article className="special-card" key={s.id}>
              <div className={'img' + (s.image ? '' : ' empty')}>
                <span className="tag">{s.tag}</span>
                {s.image ? (
                  <img src={s.image} alt={s.name + ' — ' + s.desc} loading="lazy" />
                ) : (
                  <span className="empty-mark">膳</span>
                )}
                <div className="price-tag">${s.price}</div>
              </div>
              <div className="body">
                <h4>{s.name}</h4>
                <div className="desc">{s.desc}</div>
                <div className="days">{s.days}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="feature" aria-label="Why Nikko">
        <div className="feature-grid">
          <div className="feature-card">
            <div className="feature-num">01 — Kitchen</div>
            <h3>Donburi & curry, all day.</h3>
            <p>Japanese rice bowls and curries from open to close — fast, generous, and made to order. Eat in or take away from 11:30am.</p>
          </div>
          <div className="feature-card">
            <div className="feature-num">02 — Korean</div>
            <h3>Honest Korean classics.</h3>
            <p>Bibimbap, bulgogi, kimchi jjigae, and our signature Korean fried chicken — soy garlic, spicy, or half-and-half.</p>
          </div>
          <div className="feature-card">
            <div className="feature-num">03 — Bento</div>
            <h3>Lunch, boxed.</h3>
            <p>Six bento boxes a day. Rice, salad, miso soup, and a generous main — picked up at the counter or delivered to your desk.</p>
          </div>
        </div>
      </section>

      <section className="heritage" aria-label="About Nikko">
        <div className="heritage-inner">
          <div>
            <h2>Built on <em>two histories.</em></h2>
            <p>
              Nikko is a neighbourhood restaurant on Anzac Parade serving the Japanese and Korean food we grew up eating — nothing fused, nothing fancy, just the dishes done properly.
            </p>
            <p>
              Open seven days, with takeaway, dine-in, and delivery.
              <br />Walk in, sit down, order something hot.
            </p>
            <div className="heritage-flags">
              <div className="flag-pill">日本 · Japan</div>
              <div className="flag-pill">한국 · Korea</div>
            </div>
          </div>
          <div className="heritage-img">
            <img src="assets/dining-room.png" alt="Nikko dining room — booth seating, warm pendant lights, leaf-pattern wall" loading="lazy" />
            <div className="heritage-img-label">
              [ dining room ]
              <span className="num">— 1/305 Anzac Pde —</span>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.HomePage = HomePage;