/* global React, SHELF, WheatMark */
const { useState, useEffect, useRef } = React;

/* ---------- deterministic scroll reveal ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const nodes = [...el.querySelectorAll('.reveal')];
    const check = () => {
      const vh = window.innerHeight;
      nodes.forEach((n) => {
        if (n.classList.contains('in')) return;
        if (n.getBoundingClientRect().top < vh * 0.92) n.classList.add('in');
      });
    };
    check();
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    return () => { window.removeEventListener('scroll', check); window.removeEventListener('resize', check); };
  }, []);
  return ref;
}

/* ---------- Bilingual wordmark ---------- */
function Wordmark({ size = 1 }) {
  return (
    <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, whiteSpace: 'nowrap' }}>
      <span className="serif" style={{ fontStyle: 'italic', fontSize: 22 * size, letterSpacing: '0.005em' }}>Jin Mai</span>
      <span className="cjk" style={{ fontFamily: 'var(--font-cjk)', fontSize: 12.5 * size, letterSpacing: '0.3em', marginTop: 3 * size }}>金麦面包</span>
    </span>
  );
}

/* ===================== NAV ===================== */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  const links = [['BAKERY', '#top'], ['TODAY', '#today'], ['OUR STORY', '#story'], ['VISIT', '#visit']];
  const solid = scrolled || open;
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
      transition: 'all .45s var(--ease)',
      background: solid ? 'rgba(242,229,196,0.94)' : 'transparent',
      backdropFilter: solid ? 'saturate(1.3) blur(12px)' : 'none',
      borderBottom: solid ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 78 }}>
        <a href="#top" onClick={() => setOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
          <WheatMark size={28} color="var(--red)" />
          <Wordmark />
        </a>

        {/* desktop nav */}
        <nav className="nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {links.map(([l, h]) => (
            <a key={l} href={h} className="navlink mono" style={{ textDecoration: 'none', fontSize: 12.5, letterSpacing: '0.12em', fontWeight: 700 }}>{l}</a>
          ))}
          <a href="#visit" className="btn btn-butter" style={{ padding: '11px 20px' }}>Order →</a>
        </nav>

        {/* mobile hamburger */}
        <button
          className="nav-burger"
          aria-label={open ? 'Close menu' : 'Open menu'}
          aria-expanded={open}
          onClick={() => setOpen((o) => !o)}
          style={{
            width: 48, height: 48, alignItems: 'center', justifyContent: 'center',
            background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
          }}>
          <span style={{ position: 'relative', display: 'block', width: 24, height: 16 }}>
            {[0, 1, 2].map((i) => (
              <span key={i} style={{
                position: 'absolute', left: 0, width: 24, height: 2, borderRadius: 2, background: 'var(--ink)',
                transition: 'transform .35s var(--ease), opacity .25s, top .35s var(--ease)',
                top: open ? 7 : i * 7,
                transform: open ? (i === 0 ? 'rotate(45deg)' : i === 2 ? 'rotate(-45deg)' : 'scaleX(0)') : 'none',
                opacity: open && i === 1 ? 0 : 1,
              }}></span>
            ))}
          </span>
        </button>
      </div>

      {/* mobile dropdown panel */}
      <div className="nav-mobile" style={{
        overflow: 'hidden',
        maxHeight: open ? 360 : 0,
        transition: 'max-height .42s var(--ease)',
        borderTop: open ? '1px solid var(--line)' : '1px solid transparent',
      }}>
        <div className="wrap" style={{ display: 'flex', flexDirection: 'column', paddingTop: 8, paddingBottom: 20 }}>
          {links.map(([l, h]) => (
            <a key={l} href={h} onClick={() => setOpen(false)} className="mono"
              style={{ textDecoration: 'none', fontSize: 14, letterSpacing: '0.12em', fontWeight: 700,
                minHeight: 52, display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--line)' }}>{l}</a>
          ))}
          <a href="#visit" onClick={() => setOpen(false)} className="btn btn-butter"
            style={{ justifyContent: 'center', marginTop: 16, minHeight: 50 }}>Order →</a>
        </div>
      </div>
    </header>
  );
}

/* ===================== HERO ===================== */
function Hero() {
  return (
    <section id="top" style={{ paddingTop: 78, position: 'relative', overflow: 'hidden' }}>
      <div className="wrap">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 54, alignItems: 'center', minHeight: 'calc(100vh - 78px)', paddingTop: 30, paddingBottom: 56 }}>
          {/* left */}
          <div>
            <div className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 26, flexWrap: 'wrap', lineHeight: 1.5 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--red)', flexShrink: 0 }}></span>
              CHINESE BAKERY · KINGSWAY · SINCE THE NEIGHBOURHOOD KNEW US
            </div>
            <h1 className="serif" style={{ fontStyle: 'italic', fontSize: 'clamp(40px, 4.6vw, 64px)', letterSpacing: '-0.015em', lineHeight: 1.08, textWrap: 'balance' }}>
              Soft on the inside.<br />
              <span style={{ color: 'var(--red)' }}>Always fresh.</span>
            </h1>
            <p style={{ fontSize: 18.5, color: 'var(--ink-soft)', maxWidth: 480, marginTop: 30, lineHeight: 1.65 }}>
              Jin Mai Bakery (<span className="cjk" style={{ fontFamily: 'var(--font-cjk)', fontSize: '1em' }}>金麦面包</span>) on Kingsway.
              Fresh out at 8:30am, sold out by lunch. The kind of neighbourhood spot where
              you point to what you want. <span style={{ color: 'var(--ink)', fontWeight: 600 }}>4.8★ on 67 Google reviews.</span>
            </p>
            <div style={{ display: 'flex', gap: 13, marginTop: 34, flexWrap: 'wrap' }}>
              <a href="#today" className="btn btn-butter">See today’s shelf →</a>
              <a href="tel:+16043366636" className="btn btn-ghost">Call (604) 336-6636</a>
            </div>
          </div>
          {/* right — image slot */}
          <div style={{ position: 'relative' }}>
            <image-slot id="hero-shot" style={{ width: '100%', height: 540, borderRadius: 20 }}
              shape="rounded" radius="20"
              src="https://images.pexels.com/photos/16107642/pexels-photo-16107642.jpeg?auto=compress&cs=tinysrgb&w=1600"
              placeholder="[golden cocktail buns on parchment, soft warm light, paper bag in background]"></image-slot>
            <div style={{
              position: 'absolute', bottom: 22, left: -20, background: 'var(--paper)',
              border: '1px solid var(--line)', borderRadius: 14, padding: '13px 17px',
              display: 'flex', alignItems: 'center', gap: 11, boxShadow: '0 18px 40px -22px rgba(60,36,21,0.5)'
            }}>
              <WheatMark size={28} color="var(--red)" />
              <div>
                <div className="serif" style={{ fontSize: 18, fontStyle: 'italic' }}>4.8★ · 67 reviews</div>
                <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-soft)', letterSpacing: '0.06em' }}>“love how fluffy their pastry is”</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== TODAY'S SHELF ===================== */
function Shelf() {
  const ref = useReveal();
  return (
    <section id="today" ref={ref} style={{ padding: '96px 0 30px' }}>
      <div className="wrap">
        <div className="reveal" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', marginBottom: 34 }}>
          <div>
            <span className="eyebrow">Today’s shelf</span>
            <h2 className="serif" style={{ fontSize: 'clamp(34px, 4.4vw, 56px)', marginTop: 12, fontStyle: 'italic' }}>Point to what you want.</h2>
          </div>
          <p className="mono" style={{ fontSize: 12.5, color: 'var(--ink-soft)', letterSpacing: '0.04em', maxWidth: 280 }}>
            Out at 8:30am · what’s gone is gone
          </p>
        </div>

        <div className="shelf-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {SHELF.map((p) => (
            <article key={p.en} className="reveal shelf-card" style={{
              background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 16,
              overflow: 'hidden', display: 'flex', flexDirection: 'column',
              transition: 'transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s',
            }}>
              <image-slot id={'shelf-' + p.en.toLowerCase().replace(/\s/g, '-')} style={{ width: '100%', height: 220 }}
                shape="rect" src={p.img}
                placeholder={'[' + p.en.toLowerCase() + ' — warm bakery photo]'}></image-slot>
              <div style={{ padding: '20px 22px 24px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
                  <h3 className="serif" style={{ fontSize: 24, letterSpacing: '0.01em' }}>{p.en}</h3>
                  <span className="serif" style={{ fontSize: 22, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{p.price}</span>
                </div>
                <div className="cjk" style={{ fontFamily: 'var(--font-cjk)', fontSize: 18, marginTop: 4 }}>{p.zh}</div>
                <p style={{ fontSize: 15, color: 'var(--ink-soft)', margin: '12px 0 0', lineHeight: 1.5 }}>{p.note}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== BAKING SCHEDULE ===================== */
function Schedule() {
  const items = ['8:30AM FRESH OUT', 'NOON RESTOCK', 'SOLD OUT BY 4PM'];
  return (
    <section style={{ padding: '54px 0' }}>
      <div className="wrap">
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap',
          gap: '14px 26px', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', padding: '26px 0',
        }}>
          {items.map((t, i) => (
            <React.Fragment key={t}>
              {i > 0 && <WheatMark size={20} color="var(--red)" />}
              <span className="mono" style={{ fontSize: 'clamp(13px, 1.5vw, 17px)', letterSpacing: '0.12em', fontWeight: 700 }}>{t}</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===================== OUR STORY ===================== */
function Story() {
  const ref = useReveal();
  return (
    <section id="story" ref={ref} style={{ padding: '80px 0 96px' }}>
      <div className="wrap">
        <div className="story-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 56, alignItems: 'center' }}>
          <div className="reveal ph" style={{ height: 420, borderRadius: 18, position: 'relative', overflow: 'hidden' }}>
            <img src="https://images.pexels.com/photos/28399241/pexels-photo-28399241.jpeg?auto=compress&cs=tinysrgb&w=1600" alt="Bakery display shelves" loading="lazy" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} onError={(e) => { e.currentTarget.style.display = 'none'; }} />
          </div>
          <div className="reveal">
            <span className="eyebrow" style={{ color: 'var(--red)' }}>Our story</span>
            <p className="serif" style={{ fontStyle: 'italic', fontSize: 'clamp(24px, 3vw, 34px)', lineHeight: 1.4, marginTop: 18, color: 'var(--ink)', textWrap: 'pretty' }}>
              Jin Mai means golden wheat. The bakery has been on Kingsway long enough that
              most of the neighborhood walks in without looking at the menu. Buns come out at 8:30.
              Bring a paper bag.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 28 }}>
              <WheatMark size={30} color="var(--red)" />
              <span className="mono" style={{ fontSize: 12, letterSpacing: '0.1em', color: 'var(--ink-soft)', textTransform: 'uppercase' }}>金麦面包 · Kingsway, Vancouver</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== VISIT ===================== */
function Visit() {
  const ref = useReveal();
  return (
    <section id="visit" ref={ref} style={{ padding: '0 0 90px' }}>
      <div className="wrap">
        <div className="reveal visit-card" style={{
          background: 'var(--ink)', color: 'var(--cream)', borderRadius: 24, overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1.1fr 1fr',
        }}>
          <div style={{ padding: 'clamp(36px, 4vw, 60px)' }}>
            <span className="eyebrow" style={{ color: 'var(--butter)' }}>Visit</span>
            <h2 className="serif" style={{ fontSize: 'clamp(38px, 4.6vw, 62px)', marginTop: 16, fontStyle: 'italic', color: 'var(--cream)' }}>
              2229 Kingsway<br />Vancouver BC.
            </h2>
            <div className="mono" style={{ fontSize: 13.5, color: 'rgba(251,243,222,0.72)', marginTop: 10, letterSpacing: '0.04em' }}>V5N 0E5</div>

            <div style={{ marginTop: 34, display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--butter)', marginBottom: 5 }}>Hours</div>
                <div className="mono" style={{ fontSize: 17, letterSpacing: '0.04em' }}>DAILY 8:30AM – [VERIFY CLOSE]</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--butter)', marginBottom: 5 }}>Phone</div>
                <a href="tel:+16043366636" className="serif" style={{ fontSize: 26, color: 'var(--cream)', textDecoration: 'none' }}>(604) 336-6636</a>
              </div>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 32, color: 'rgba(251,243,222,0.66)' }}>
              <span className="serif" style={{ fontSize: 19, fontStyle: 'italic' }}>4.8★</span>
              <span className="mono" style={{ fontSize: 12, letterSpacing: '0.05em' }}>on 67 Google reviews</span>
            </div>
          </div>
          <div style={{ minHeight: 380, position: 'relative' }}>
            <iframe
              title="Map — Jin Mai Bakery, 2229 Kingsway, Vancouver BC"
              src="https://maps.google.com/maps?q=2229+Kingsway+Vancouver+BC&output=embed&z=15"
              frameBorder="0"
              loading="lazy"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, display: 'block' }}
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===================== FOOTER ===================== */
function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '40px 0 48px' }}>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 22, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
          <WheatMark size={34} color="var(--red)" />
          <Wordmark />
        </div>
        <p className="mono" style={{ fontSize: 11.5, color: 'var(--ink-soft)', letterSpacing: '0.04em', textAlign: 'right', margin: 0, lineHeight: 1.7 }}>
          © Jin Mai Bakery · <span className="cjk" style={{ fontFamily: 'var(--font-cjk)', fontSize: '1em' }}>金麦面包</span> · Kingsway, Vancouver BC<br />
          Concept by X9 Lab Media · 2026
        </p>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Shelf, Schedule, Story, Visit, Footer });
