/* Rust Truck — Drinks. The full list is being finalised, so this page
   is intentionally a clean "coming soon" placeholder for now. */
(function () {
  const { Eyebrow, Button } = window.RustTruckDesignSystem_a832c6;

  function MenuScreen({ lang, onNavigate }) {
    const el = lang === 'EL';
    const bp = window.useViewport();
    const wrap = { maxWidth: 'var(--container-md)', margin: '0 auto', padding: bp.mobile ? '0 20px' : '0 32px' };

    return (
      <div style={{ background: 'var(--paper-100)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)' }}>
        {/* header */}
        <section style={{ background: 'var(--brick-700)', backgroundImage: 'var(--grain)', backgroundSize: 'var(--grain-size)', color: 'var(--paper-50)', textAlign: 'center' }}>
          <div style={{ ...wrap, padding: bp.mobile ? '52px 20px' : '64px 32px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <Eyebrow align="center" color="var(--amber-400)">{el ? 'Η λίστα' : 'The list'}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(40px,6vw,76px)', lineHeight: 0.9, margin: '16px 0 0' }}>
              {el ? 'Ποτά' : 'Drinks'}
            </h1>
            <p style={{ fontFamily: 'var(--font-script)', fontSize: bp.mobile ? 26 : 30, color: 'var(--brick-100)', margin: '12px 0 0' }}>
              {el ? 'φτιαγμένα στο φορτηγό' : 'mixed on the truck'}
            </p>
          </div>
        </section>

        {/* placeholder body */}
        <section>
          <div style={{ ...wrap, padding: bp.mobile ? '72px 20px' : '110px 32px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ fontFamily: 'var(--font-label)', fontSize: 'var(--text-2xs)', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--brick-600)' }}>
              {el ? 'Σύντομα κοντά σας' : 'Coming soon'}
            </div>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(28px,4vw,44px)', color: 'var(--ink-900)', margin: '16px 0 0', lineHeight: 1, maxWidth: '18ch' }}>
              {el ? 'Στήνουμε ακόμη τη λίστα' : 'We’re still mixing the list'}
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: bp.mobile ? 16.5 : 18, lineHeight: 1.6, color: 'var(--ink-700)', margin: '18px 0 0', maxWidth: '46ch', textWrap: 'pretty' }}>
              {el
                ? 'Η πλήρης λίστα έρχεται σύντομα. Στο μεταξύ, πες μας για την εκδήλωσή σου και προσαρμόζουμε τα ποτά σε εσένα.'
                : 'The full menu lands here soon. In the meantime, tell us about your event and we’ll tailor the drinks to you.'}
            </p>
            <div style={{ marginTop: 32 }}>
              <Button variant="primary" withArrow onClick={() => onNavigate && onNavigate('book')}>{el ? 'Κλείσε το φορτηγό' : 'Book the truck'}</Button>
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.RTMenuScreen = MenuScreen;
})();