const { useState: useStateMenu } = React;

function MenuRow({ name, desc, price, tag }) {
  const [h, setH] = useStateMenu(false);
  return (
    <div
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        padding: '18px 14px',
        background: h ? '#E8D4B0' : 'transparent',
        borderBottom: '1.5px dotted rgba(0,0,0,0.3)',
        display: 'grid',
        gridTemplateColumns: '1fr auto',
        alignItems: 'baseline',
        gap: 12,
        transition: 'background 180ms ease-out',
        cursor: 'default',
      }}
    >
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: "'Abril Fatface', serif", fontSize: 28, color: '#000', lineHeight: 1 }}>{name}</div>
          {tag && (
            <span style={{
              fontFamily: 'Inter', fontSize: 9, fontWeight: 700,
              letterSpacing: '0.24em', textTransform: 'uppercase',
              background: '#80B0B0', color: '#000',
              padding: '3px 8px',
            }}>{tag}</span>
          )}
        </div>
        {desc && <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#2A1A04', marginTop: 6, lineHeight: 1.4 }}>{desc}</div>}
      </div>
      <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 34, color: '#000', lineHeight: 1 }}>{price}</div>
    </div>
  );
}

function MenuSection() {
  const [tab, setTab] = useStateMenu('hot');

  const menus = {
    hot: [
      { name: 'Espresso', desc: 'Double shot · Colombian blend', price: '$4.50' },
      { name: 'Flat White', desc: 'Double ristretto · whole milk', price: '$5.50', tag: 'favourite' },
      { name: 'Cortado', desc: 'Equal parts espresso & milk', price: '$5.00' },
      { name: 'Filter', desc: 'Batch brew · Tolima this week', price: '$4.50', tag: 'single origin' },
      { name: 'Long Black', desc: 'Double ristretto, hot water', price: '$5.00' },
      { name: 'Mocha', desc: 'Single origin cacao · whole milk', price: '$6.00' },
      { name: 'Chai Latte', desc: 'Prana chai · honey optional', price: '$6.00' },
    ],
    cold: [
      { name: 'Cold Brew', desc: '16oz · 18hr slow draw', price: '$6.50', tag: 'house' },
      { name: 'Iced Latte', desc: 'Double shot · cold milk', price: '$6.50' },
      { name: 'Iced Mocha', desc: 'Cacao · oat milk', price: '$6.50' },
      { name: 'Affogato', desc: 'Single shot · vanilla gelato', price: '$7.00' },
      { name: 'Sparkling Espresso', desc: 'Tonic · orange peel', price: '$7.50', tag: 'new' },
      { name: 'Iced Chocolate', desc: 'Single origin cacao · cold milk', price: '$6.50' },
    ],
    food: [
      { name: 'Turkey & Cranberry Toastie', desc: 'Sourdough · brie · rocket', price: '$14.50', tag: 'favourite' },
      { name: 'Ham & Cheese Croissant', desc: 'Hot from the press', price: '$9.00' },
      { name: 'Almond Croissant', desc: 'Baked in-house · frangipane', price: '$6.00' },
      { name: 'Banana Bread', desc: 'Toasted · butter', price: '$6.50' },
      { name: 'Ricotta & Raspberry Loaf', desc: 'Cut thick', price: '$7.00' },
      { name: 'Seasonal Toastie', desc: 'Ask at the counter', price: '$13.50' },
    ],
  };

  const labels = { hot: 'Hot Drinks', cold: 'Cold Drinks', food: 'Pastry & Toasties' };

  return (
    <section id="menu" className="m-section-pad" style={{ background: '#D8C098', padding: '96px 40px', borderTop: '1px solid #2B2418' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{
            fontFamily: 'Inter', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.32em', textTransform: 'uppercase',
            color: '#2A1A04',
          }}>The Menu</div>
          <h2 className="m-h2" style={{
            fontFamily: "'Abril Fatface', serif", fontSize: 'clamp(56px, 7vw, 88px)',
            color: '#000', margin: '12px 0 8px', lineHeight: 1.02,
          }}>A short list,<br/>done well.</h2>
          <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 42, color: '#2C4C4C', lineHeight: 1 }}>
            {labels[tab].toLowerCase()}
          </div>
        </div>

        {/* Tabs */}
        <div style={{
          display: 'flex', justifyContent: 'center',
          gap: 4, marginBottom: 40,
          borderBottom: '1.5px solid #2B2418',
          paddingBottom: 0,
        }}>
          {['hot', 'cold', 'food'].map(k => (
            <button key={k} onClick={() => setTab(k)}
              style={{
                fontFamily: 'Inter', fontSize: 12, fontWeight: 700,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                padding: '14px 22px',
                background: tab === k ? '#000' : 'transparent',
                color: tab === k ? '#fff' : '#000',
                border: 'none',
                borderRadius: '2px 2px 0 0',
                cursor: 'pointer',
                transition: 'background 180ms, color 180ms',
              }}
            >{labels[k]}</button>
          ))}
        </div>

        <div className="m-stack m-stack-gap-lg" style={{
          display: 'grid',
          gridTemplateColumns: '1.15fr 1fr',
          gap: 56,
          alignItems: 'start',
        }}>
          <div>
            {menus[tab].map(i => <MenuRow key={i.name} {...i} />)}
          </div>

          {/* Aside: Today's special / ornament */}
          <aside style={{
            background: '#000', color: '#fff',
            padding: 32,
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', inset: 10,
              border: '1px dashed #D9CA8F',
              pointerEvents: 'none',
            }} />
            <div style={{ position: 'relative' }}>
              <div style={{
                fontFamily: 'Inter', fontSize: 10, fontWeight: 700,
                letterSpacing: '0.32em', textTransform: 'uppercase',
                color: '#D9CA8F', marginBottom: 10,
              }}>Today's pour</div>
              <div style={{ fontFamily: "'Yellowtail', cursive", fontSize: 54, color: '#fff', lineHeight: 0.95 }}>
                tolima
              </div>
              <div style={{ fontFamily: "'Abril Fatface', serif", fontSize: 22, color: '#fff', marginTop: 10, lineHeight: 1.2 }}>
                Plum · Cocoa · Long finish.
              </div>

              <div style={{
                height: 1, background: 'linear-gradient(to right, transparent, #D9CA8F, transparent)',
                margin: '20px 0',
              }} />

              <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px 14px', fontSize: 13 }}>
                <span style={rowK}>Origin</span><span style={rowV}>Tolima, Colombia</span>
                <span style={rowK}>Farm</span><span style={rowV}>La Esperanza</span>
                <span style={rowK}>Process</span><span style={rowV}>Washed</span>
                <span style={rowK}>Roast</span><span style={rowV}>Medium · Brisbane</span>
                <span style={rowK}>Altitude</span><span style={rowV}>1,700m</span>
              </div>

              <div style={{ marginTop: 24 }}>
                <a href="https://www.doordash.com/store/la-pola-cafe-ashgrove-29850449/38137782/" target="_blank" rel="noopener" style={{
                  display: 'inline-block',
                  fontFamily: 'Inter', fontSize: 11, fontWeight: 700,
                  letterSpacing: '0.22em', textTransform: 'uppercase',
                  color: '#D9CA8F', textDecoration: 'none',
                  borderBottom: '1px solid #D9CA8F', paddingBottom: 4,
                }}>Order this bean →</a>
              </div>
            </div>
          </aside>
        </div>

        <div style={{
          marginTop: 48, paddingTop: 24, borderTop: '1px solid #2B2418',
          textAlign: 'center',
          fontFamily: 'Inter', fontSize: 13, color: '#2A1A04',
          letterSpacing: '0.04em',
        }}>
          Extra shot <b>$0.50</b> &nbsp;·&nbsp; Alt milks <b>$0.80</b> &nbsp;·&nbsp; Syrups <b>$0.50</b> &nbsp;·&nbsp; Takeaway cup <b>no charge</b>
        </div>
      </div>
    </section>
  );
}

const rowK = { fontFamily: 'Inter', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#D9CA8F', paddingTop: 3 };
const rowV = { fontFamily: 'Inter', fontSize: 14, color: '#fff' };

window.MenuSection = MenuSection;