// screens.jsx — Zapfbräu app screens

// ─────────────────────────────────────────────────────────────
// Opening hours logic (used in HomeScreen + BookScreen)
// ─────────────────────────────────────────────────────────────
const OPEN_HOURS_CONFIG = {
  // 0=So, 1=Mo, 2=Di, 3=Mi, 4=Do, 5=Fr, 6=Sa
  0: [{ open: [11, 30], close: [14, 30] }, { open: [17, 0], close: [21, 0] }],
  1: [], 2: [], 3: [],
  4: [{ open: [17, 0], close: [21, 30] }],
  5: [{ open: [17, 0], close: [21, 30] }],
  6: [{ open: [17, 0], close: [21, 30] }]
};

function getOpenStatus(now = new Date()) {
  const slots = OPEN_HOURS_CONFIG[now.getDay()] || [];
  const hm = now.getHours() * 60 + now.getMinutes();
  for (const s of slots) {
    const o = s.open[0] * 60 + s.open[1];
    const c = s.close[0] * 60 + s.close[1];
    if (hm >= o && hm < c) return { open: true, closes: `${s.close[0]}:${String(s.close[1]).padStart(2, '0')}` };
  }
  return { open: false, next: getNextOpenText(now) };
}

function getNextOpenText(now = new Date()) {
  const shortNames = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
  const hm = now.getHours() * 60 + now.getMinutes();
  for (let d = 0; d <= 7; d++) {
    const check = new Date(now);check.setDate(check.getDate() + d);
    const dow = check.getDay();
    for (const s of OPEN_HOURS_CONFIG[dow] || []) {
      const o = s.open[0] * 60 + s.open[1];
      if (d > 0 || hm < o) {
        const t = `${s.open[0]}:${String(s.open[1]).padStart(2, '0')}`;
        return d === 0 ? `heute ab ${t}` : d === 1 ? `morgen ab ${t}` : `${shortNames[dow]} ab ${t}`;
      }
    }
  }
  return null;
}

// Generates a deterministic daily 4-digit PIN for stamp verification
function getDailyStampCode(date = new Date()) {
  const s = `${date.getFullYear()}${date.getMonth()}${date.getDate()}zapf`;
  let h = 0;for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) & 0xFFFF;
  return String(h % 9000 + 1000);
}

// ─────────────────────────────────────────────────────────────
// Platzampel — live availability status
// ─────────────────────────────────────────────────────────────
const SHEET_URL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRWMbvXvvbpQh_skMEm2S-qSxo0b9cndUNkEf8Dm7sPSjMAK58VSjDlrFUL85myeRFeTemy68Al8I6V/pub?output=csv";

function usePlatzampel(appData) {
  const [sheetData, setSheetData] = React.useState(null);
  React.useEffect(() => {
    fetch(SHEET_URL).
    then((r) => r.text()).
    then((text) => {
      const rows = text.trim().split('\n').
      map((r) => r.split(',')).
      filter((r) => r[0]?.trim()).
      map(([label, status]) => ({ label: label.trim(), status: (status || '').toLowerCase().trim() }));
      setSheetData(rows);
    }).
    catch(() => setSheetData(null));
  }, []);
  return sheetData || appData?.platzampel?.schichten || [];
}

const AMPEL_COLORS = {
  grün: { bg: '#3d5240', light: '#e8ede8', text: '#3d5240', icon: '✓', label: 'Plätze frei' },
  gelb: { bg: '#c97d26', light: '#fef3e2', text: '#a36116', icon: '!', label: 'Fast voll' },
  rot: { bg: '#8b2020', light: '#f9e5e5', text: '#8b2020', icon: '✖', label: 'Leider voll' },
  grau: { bg: '#8a8275', light: '#f3f2f0', text: '#8a8275', icon: '?', label: 'Unbekannt' }
};

const PlatzampelCard = ({ palette, appData }) => {
  const schichten = usePlatzampel(appData);
  if (!schichten.length) return null;
  const kw = (() => {
    const d = new Date();const do_ = new Date(d.getTime() + (3 - (d.getDay() + 6) % 7) * 86400000);
    return Math.ceil(((do_ - new Date(do_.getFullYear(), 0, 1)) / 86400000 + 1) / 7);
  })();
  return (
    <div style={{ padding: '0 22px 6px' }}>
      <SectionLabel palette={palette}>Platzampel · KW {kw}</SectionLabel>
      {/* Grid — 3 top + 2 bottom centered */}
      <div style={{ marginTop: 10, background: palette.paper, borderRadius: 14, padding: '14px 12px 10px', border: `1px solid ${palette.green}15` }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, marginBottom: schichten.length > 3 ? 6 : 0 }}>
          {schichten.slice(0, 3).map((s, i) => <AmpelDot key={i} s={s} palette={palette} />)}
        </div>
        {schichten.length > 3 &&
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6 }}>
            {schichten.slice(3).map((s, i) =>
          <div key={i} style={{ flex: '0 0 calc(33.333% - 4px)' }}>
                <AmpelDot s={s} palette={palette} />
              </div>
          )}
          </div>
        }
        {/* Legende */}
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginTop: 12, paddingTop: 10, borderTop: `1px dashed ${palette.green}18` }}>
          {[['grün', 'Plätze frei'], ['gelb', 'Wenige Plätze'], ['rot', 'Leider voll']].map(([k, lbl]) =>
          <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 10.5, color: palette.muted, fontFamily: 'Manrope' }}>
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: AMPEL_COLORS[k]?.bg, flexShrink: 0 }} />
              {lbl}
            </div>
          )}
        </div>
        <div style={{ textAlign: 'center', fontSize: 9.5, color: palette.muted, opacity: 0.6, marginTop: 6, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em' }}>
          Keine Garantie auf einen Platz
        </div>
      </div>
    </div>);

};

const AmpelDot = ({ s, palette }) => {
  const c = AMPEL_COLORS[s.status] || AMPEL_COLORS.grau;
  return (
    <div style={{ textAlign: 'center', padding: '6px 4px' }}>
      <div style={{
        width: 34, height: 34, borderRadius: '50%', margin: '0 auto',
        background: c.bg, display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: `0 2px 6px ${c.bg}55`
      }}>
        <span style={{ color: '#fff', fontWeight: 700, fontSize: 16 }}>{c.icon}</span>
      </div>
      <div style={{ marginTop: 4, fontSize: 10, fontWeight: 600, color: palette.ink, lineHeight: 1.2 }}>{s.label}</div>
    </div>);

};

// Generates a daily review bonus code (different from stamp code)
function getReviewCode(date = new Date()) {
  const s = `${date.getFullYear()}${date.getMonth()}${date.getDate()}zapf-review`;
  let h = 0;for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) & 0xFFFF;
  return String(h % 9000 + 1000);
}

// Redemption codes for milestone rewards (daily rotating)
function getRedemptionCode(milestone, date = new Date()) {
  const s = `${date.getFullYear()}${date.getMonth()}${date.getDate()}zapf-minus${milestone}`;
  let h = 0;for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) & 0xFFFF;
  return String(h % 9000 + 1000);
}

const PALETTES = {
  wald: { green: '#3d5240', greenDark: '#2a3a2c', greenSoft: '#5a7059', accent: '#c97d26', accentDark: '#a36116', cream: '#f4efe6', paper: '#fbf8f1', ink: '#1f2a1f', muted: '#8a8275' },
  moos: { green: '#2f4534', greenDark: '#1f2f24', greenSoft: '#4d6a52', accent: '#d18a3a', accentDark: '#a86a20', cream: '#f6f1e7', paper: '#fdfaf2', ink: '#1a241c', muted: '#857d6f' },
  abend: { green: '#475c40', greenDark: '#324430', greenSoft: '#67805d', accent: '#b8722a', accentDark: '#925516', cream: '#f1ebde', paper: '#f9f4e8', ink: '#221c14', muted: '#857c6c' }
};

const SEASONS = {
  fruehling: { label: 'Bärlauchwochen', sub: 'Bärlauch-Maultaschen, Wildkräutersalat', icon: '🌿' },
  sommer: { label: 'Im Biergarten', sub: 'Unterm alten Kühlschiff geöffnet', icon: '☀️' },
  herbst: { label: 'Schlachttag-Saison', sub: 'Donnerstags Kesselfleisch & Schlachtplatte', icon: '🍂' },
  winter: { label: 'Bockbier-Anstich', sub: 'Sonderbier solange Vorrat reicht', icon: '❄️' }
};

// ─────────────────────────────────────────────────────────────
// Shared icon set (line, 24px)
// ─────────────────────────────────────────────────────────────
const Icon = ({ name, size = 22, color = 'currentColor', stroke = 1.6 }) => {
  const paths = {
    home: <path d="M3 11l9-8 9 8v10a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V11z" />,
    menu: <><path d="M5 4h14M5 12h14M5 20h14" /></>,
    stamp: <><circle cx="12" cy="12" r="8" /><path d="M8 12l3 3 5-6" /></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 11v5M12 8v.5" /></>,
    bed: <><path d="M3 18V8M3 13h18v5M21 18v-5a3 3 0 00-3-3H9v3" /><circle cx="6.5" cy="11.5" r="1.5" /></>,
    beer: <><path d="M6 4h9v16a1 1 0 01-1 1H7a1 1 0 01-1-1V4zM15 8h2.5a2.5 2.5 0 010 5H15" /><path d="M8 8v9M11 8v9" /></>,
    chevron: <path d="M9 6l6 6-6 6" />,
    chevronDown: <path d="M6 9l6 6 6-6" />,
    arrow: <path d="M5 12h14M13 6l6 6-6 6" />,
    arrowLeft: <path d="M19 12H5M11 6l-6 6 6 6" />,
    pin: <><path d="M12 21s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z" /><circle cx="12" cy="8" r="2.5" /></>,
    phone: <path d="M5 4h3l2 5-2 1a11 11 0 006 6l1-2 5 2v3a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z" />,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    plus: <path d="M12 5v14M5 12h14" />,
    minus: <path d="M5 12h14" />,
    check: <path d="M5 12l5 5 9-11" />,
    qr: <><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><path d="M14 14h3v3M20 14v3M14 20h3M20 20h.01" /></>,
    sparkle: <path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z" />,
    leaf: <path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14zM5 19l8-8" />,
    bike: <><circle cx="6" cy="17" r="3" /><circle cx="18" cy="17" r="3" /><path d="M6 17l4-9h4l3 9M10 8l-1-3h-2" /></>,
    car: <><path d="M5 16h14l-2-7H7l-2 7zM5 16v3M19 16v3" /><circle cx="8" cy="16" r="1.5" /><circle cx="16" cy="16" r="1.5" /></>,
    heart: <path d="M12 20s-7-4.5-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.5-7 10-7 10z" />,
    users: <><circle cx="9" cy="8" r="3" /><path d="M3 20a6 6 0 0112 0M16 11a3 3 0 100-6M21 20a5.5 5.5 0 00-3.5-5.1" /></>,
    moon: <path d="M21 13A9 9 0 1111 3a7 7 0 0010 10z" />,
    sun: <><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>);

};

// ─────────────────────────────────────────────────────────────
// Logo glyph (hops + wheat from brand, simplified for UI)
// ─────────────────────────────────────────────────────────────
const HopGlyph = ({ size = 28, color = '#c97d26' }) =>
<svg width={size} height={size} viewBox="0 0 64 64" fill={color}>
    <g>
      {/* central hop cone */}
      <ellipse cx="32" cy="18" rx="6" ry="9" />
      <ellipse cx="32" cy="28" rx="7" ry="6" />
      <path d="M32 36c-5 0-8-3-8-3s3 7 8 7 8-7 8-7-3 3-8 3z" />
      {/* wheat-left */}
      <g opacity="0.95">
        <ellipse cx="20" cy="28" rx="2" ry="4" transform="rotate(-25 20 28)" />
        <ellipse cx="14" cy="34" rx="2" ry="4" transform="rotate(-30 14 34)" />
        <ellipse cx="9" cy="40" rx="2" ry="4" transform="rotate(-35 9 40)" />
      </g>
      {/* wheat-right */}
      <g opacity="0.95">
        <ellipse cx="44" cy="28" rx="2" ry="4" transform="rotate(25 44 28)" />
        <ellipse cx="50" cy="34" rx="2" ry="4" transform="rotate(30 50 34)" />
        <ellipse cx="55" cy="40" rx="2" ry="4" transform="rotate(35 55 40)" />
      </g>
      <rect x="30" y="38" width="4" height="14" rx="1" />
    </g>
  </svg>;


// ─────────────────────────────────────────────────────────────
// Background paper texture
// ─────────────────────────────────────────────────────────────
const PaperBg = ({ palette, children, style }) =>
<div style={{
  position: 'relative',
  background: palette.cream,
  backgroundImage: `radial-gradient(rgba(31,42,31,0.04) 1px, transparent 1px)`,
  backgroundSize: '8px 8px',
  minHeight: '100%',
  ...style
}}>{children}</div>;


// ─────────────────────────────────────────────────────────────
// Status bar (Android, themed)
// ─────────────────────────────────────────────────────────────
const StatusBar = ({ palette, light = false }) => {
  const c = light ? palette.cream : palette.ink;
  return (
    <div style={{
      height: 38, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 18px', position: 'relative', flexShrink: 0,
      fontFamily: 'Manrope, sans-serif', color: c, fontSize: 13, fontWeight: 600,
      background: light ? palette.green : 'transparent'
    }}>
      <span>9:30</span>
      <div style={{ position: 'absolute', left: '50%', top: 8, transform: 'translateX(-50%)', width: 18, height: 18, borderRadius: '50%', background: '#0d0d0d' }} />
      <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
        <svg width="14" height="10" viewBox="0 0 14 10" fill={c}><path d="M7 9.5L0.5 4.5a8.7 8.7 0 0113 0L7 9.5z" /></svg>
        <svg width="14" height="10" viewBox="0 0 14 10" fill={c}><path d="M13 9.5V0.5L0.5 9.5h12.5z" /></svg>
        <svg width="20" height="10" viewBox="0 0 22 10" fill={c}><rect x="0" y="1" width="18" height="8" rx="1.5" stroke={c} strokeWidth="1" fill="none" /><rect x="2" y="3" width="13" height="4" fill={c} /><rect x="19" y="3.5" width="2" height="3" fill={c} /></svg>
      </div>
    </div>);

};

// ─────────────────────────────────────────────────────────────
// Bottom nav (5 tabs)
// ─────────────────────────────────────────────────────────────
const NavItem = ({ icon, label, active, onClick, palette }) =>
<button onClick={onClick} style={{
  flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
  padding: '8px 0 6px', background: 'transparent', border: 'none', cursor: 'pointer',
  color: active ? palette.green : palette.muted,
  fontFamily: 'Manrope, sans-serif'
}}>
    <div style={{
    width: 44, height: 26, borderRadius: 13, display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: active ? palette.accent + '22' : 'transparent',
    transition: 'all 0.2s'
  }}>
      <Icon name={icon} size={20} color={active ? palette.green : palette.muted} stroke={active ? 2 : 1.6} />
    </div>
    <span style={{ fontSize: 10.5, fontWeight: active ? 700 : 500, letterSpacing: 0.1 }}>{label}</span>
  </button>;


const BottomNav = ({ current, onNav, palette }) =>
<div style={{
  background: palette.paper, borderTop: `1px solid ${palette.green}15`,
  display: 'flex', flexShrink: 0, paddingBottom: 4,
  boxShadow: '0 -8px 24px rgba(31,42,31,0.05)'
}}>
    <NavItem icon="home" label="Heim" active={current === 'home'} onClick={() => onNav('home')} palette={palette} />
    <NavItem icon="menu" label="Karte" active={current === 'menu'} onClick={() => onNav('menu')} palette={palette} />
    <NavItem icon="stamp" label="Stempel" active={current === 'stamp'} onClick={() => onNav('stamp')} palette={palette} />
    <NavItem icon="calendar" label="Buchen" active={current === 'bookie'} onClick={() => onNav('bookie')} palette={palette} />
    <NavItem icon="info" label="Haus" active={current === 'info'} onClick={() => onNav('info')} palette={palette} />
  </div>;


// ─────────────────────────────────────────────────────────────
// Reusable bits
// ─────────────────────────────────────────────────────────────
const SectionLabel = ({ children, palette }) =>
<div style={{
  fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, letterSpacing: '0.16em',
  textTransform: 'uppercase', color: palette.accent, fontWeight: 600,
  display: 'flex', alignItems: 'center', gap: 10
}}>
    <span style={{ width: 14, height: 1, background: palette.accent }} />
    {children}
  </div>;


const H1 = ({ children, palette, style }) =>
<h1 style={{
  fontFamily: '"DM Serif Display", serif', fontWeight: 400, color: palette.ink,
  fontSize: 34, lineHeight: 1.05, margin: 0, letterSpacing: '-0.01em',
  ...style
}}>{children}</h1>;


const H2 = ({ children, palette, style }) =>
<h2 style={{
  fontFamily: '"DM Serif Display", serif', fontWeight: 400, color: palette.ink,
  fontSize: 24, lineHeight: 1.1, margin: 0, ...style
}}>{children}</h2>;


const Pill = ({ children, palette, light }) =>
<span style={{
  display: 'inline-flex', alignItems: 'center', gap: 6,
  padding: '5px 11px', borderRadius: 100,
  background: light ? palette.cream : palette.green + '14',
  color: palette.green, fontSize: 11, fontWeight: 600,
  fontFamily: 'Manrope, sans-serif', letterSpacing: 0.2
}}>{children}</span>;


const ImagePlaceholder = ({ palette, label, height = 140, accent }) =>
<div style={{
  height, borderRadius: 14, overflow: 'hidden', position: 'relative',
  background: accent ? `linear-gradient(135deg, ${palette.accent}, ${palette.accentDark})` : `linear-gradient(135deg, ${palette.green}, ${palette.greenDark})`,
  backgroundImage: `repeating-linear-gradient(45deg, ${accent ? palette.accentDark : palette.greenDark} 0 8px, transparent 8px 18px), linear-gradient(135deg, ${accent ? palette.accent : palette.green}, ${accent ? palette.accentDark : palette.greenDark})`,
  color: palette.cream, display: 'flex', alignItems: 'flex-end', padding: 12,
  fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: 0.2
}}>
    <span style={{ opacity: 0.85 }}>[ {label} ]</span>
  </div>;


// ─────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────
const HomeScreen = ({ palette, tweaks, goto, stamps, appData, openInApp }) => {
  const season = SEASONS[tweaks.showSeason] || SEASONS.fruehling;
  const today = new Date();
  const weekday = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'][today.getDay()];
  const breweryName = appData?.home?.name || 'Brauerei Zapf';
  const openStatus = getOpenStatus(today);
  const dayKey = ['so', 'mo', 'di', 'mi', 'do', 'fr', 'sa'][today.getDay()];
  const todaySpecials = appData?.wochenkarte?.[dayKey] || [];
  const news = appData?.news || { icon: 'bike', text: 'Sechs E-Bike-Ladestationen', sub: 'Kostenfrei am Hof — Kabel bitte mitbringen.' };

  return (
    <PaperBg palette={palette}>
      {/* Hero with green band */}
      <div style={{ background: palette.green, color: palette.cream, padding: '20px 22px 40px', position: 'relative', overflow: 'hidden' }}>
        {/* building watermark - detailed line art */}
        <img src="uploads/Logo Zur Alten Brauerei Zapf_ohne weiß.png"
          style={{ position:'absolute', right:-40, top:-10, width:280, opacity:0.1,
            filter:'invert(1)', pointerEvents:'none', userSelect:'none' }}
          alt=""/>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="uploads/Logo Zur Alten Brauerei Zapf_ohne weiß.png"
              style={{ height:34, width:'auto', filter:'invert(1)', opacity:0.9 }}
              alt="Brauerei Zapf"/>
            <div style={{ fontFamily: '"DM Serif Display", serif', letterSpacing: '0.03em', lineHeight: 1.15, fontWeight: "400", fontSize: "20px" }}>{breweryName}</div>
          </div>
          <button style={{
            background: palette.cream + '15', border: `1px solid ${palette.cream}30`, color: palette.cream,
            width: 38, height: 38, borderRadius: 19, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer'
          }}>
            <Icon name="users" size={18} />
          </button>
        </div>

        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', color: palette.accent, marginBottom: 8 }}>
          ⌁ {weekday.toUpperCase()} · UETTINGEN
        </div>
        <H1 palette={{ ...palette, ink: palette.cream }} style={{ fontSize: 36, marginBottom: 6 }}>
          Grüß Gott,<br /><i style={{ color: palette.accent }}>lieber Gast.</i>
        </H1>
        <div style={{ fontSize: 14, color: palette.cream, opacity: 0.78, marginTop: 10, lineHeight: 1.5 }}>
          Familiengeführt seit 1883.<br />
          Frisch g'zapft, frisch g'kocht.
        </div>

        {/* Open / Closed status */}
        <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 7,
          padding: '6px 14px', borderRadius: 20,
          background: openStatus.open ? 'rgba(34,197,94,0.18)' : 'rgba(255,255,255,0.12)',
          border: `1px solid ${openStatus.open ? 'rgba(34,197,94,0.45)' : 'rgba(255,255,255,0.28)'}`
        }}>
          <div style={{ width: 7, height: 7, borderRadius: '50%',
            background: openStatus.open ? '#22c55e' : palette.cream,
            boxShadow: openStatus.open ? '0 0 0 3px rgba(34,197,94,0.25)' : 'none'
          }} />
          <span style={{ fontFamily: 'Manrope', fontSize: 11.5, fontWeight: 600, color: palette.cream, letterSpacing: 0.1 }}>
            {openStatus.open ?
            `Jetzt geöffnet · Küche bis ${openStatus.closes} Uhr` :
            `Geschlossen${openStatus.next ? ` · öffnet ${openStatus.next}` : ''}`}
          </span>
        </div>
      </div>

      {/* Stamp progress card — pulled up, z-index above hero */}
      <div style={{ padding: '0 18px', marginTop: -24, position: 'relative', zIndex: 2 }}>
        <button onClick={() => goto('stamp')} style={{
          width: '100%', textAlign: 'left', cursor: 'pointer', border: 'none',
          background: palette.paper,
          borderRadius: 18, padding: 16,
          boxShadow: `0 8px 24px ${palette.ink}20, 0 1px 0 ${palette.cream} inset`,
          display: 'flex', alignItems: 'center', gap: 14,
          fontFamily: 'Manrope, sans-serif'
        }}>
          {/* Mini stamp ring */}
          <div style={{ position: 'relative', width: 56, height: 56, flexShrink: 0 }}>
            <svg width="56" height="56" viewBox="0 0 56 56">
              <circle cx="28" cy="28" r="24" fill="none" stroke={palette.green + '20'} strokeWidth="4" />
              <circle cx="28" cy="28" r="24" fill="none" stroke={palette.accent} strokeWidth="4"
              strokeDasharray={`${stamps / 20 * 150.8} 150.8`} strokeDashoffset="0"
              transform="rotate(-90 28 28)" strokeLinecap="round" />
            </svg>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: '"DM Serif Display", serif', fontSize: 20, color: palette.green
            }}>{stamps}</div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <SectionLabel palette={palette}>Wirtshaus-Pass</SectionLabel>
            <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 18, color: palette.ink, marginTop: 4, lineHeight: 1.15 }}>
              {(() => {
                const next = MILESTONES.find((m) => stamps < m.at) || MILESTONES[MILESTONES.length - 1];
                const remaining = Math.max(0, next.at - stamps);
                return <>Noch {remaining} Besuche bis <i style={{ color: palette.accent }}>{next.label}</i></>;
              })()}
            </div>
          </div>
          <Icon name="chevron" size={18} color={palette.muted} />
        </button>
      </div>

      {/* Platzampel */}
      <div style={{ marginTop: 16 }}>
        <PlatzampelCard palette={palette} appData={appData} />
      </div>

      {/* Today section */}
      <div style={{ padding: '24px 22px 6px' }}>
        <SectionLabel palette={palette}>Heute bei uns</SectionLabel>
        {todaySpecials.length > 0 ?
        <div style={{ marginTop: 10 }}>
            <div style={{ marginBottom: 8, display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <H2 palette={palette}>{appData?.wochenkarte?.kw ? `KW ${appData.wochenkarte.kw}` : 'Wochenkarte'}</H2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {todaySpecials.map((d, i) =>
            <div key={i} style={{
              display: 'flex', justifyContent: 'space-between', gap: 12,
              padding: '12px 14px', borderRadius: 12,
              background: palette.paper, border: `1px solid ${palette.green}15`
            }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 16, color: palette.ink }}>{d.name}</div>
                    {d.desc && <div style={{ fontSize: 12, color: palette.muted, marginTop: 2, lineHeight: 1.4 }}>{d.desc}</div>}
                  </div>
                  {d.price && <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 15, color: palette.green, whiteSpace: 'nowrap' }}>{d.price} €</div>}
                </div>
            )}
            </div>
          </div> :
        null}

        {/* Featured beer — only when Sonderbier is set */}
        {appData?.sonderbier?.name &&
        <div style={{
          display: 'flex', gap: 14, padding: 14, marginTop: todaySpecials.length > 0 ? 14 : 0,
          border: `1px solid ${palette.green}18`, borderRadius: 16,
          background: palette.paper, position: 'relative', overflow: 'hidden'
        }}>
            <div style={{ flex: 1 }}>
              <Pill palette={palette}>Sonderbier</Pill>
              <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 19, color: palette.ink, marginTop: 6, lineHeight: 1.15 }}>
                {appData.sonderbier.name}
              </div>
              {appData.sonderbier.desc && <div style={{ fontSize: 12.5, color: palette.muted, marginTop: 3, lineHeight: 1.4 }}>{appData.sonderbier.desc}</div>}
              {appData.sonderbier.price && <div style={{ color: palette.green, fontWeight: 600, fontSize: 13, marginTop: 4 }}>0,5 l · {appData.sonderbier.price} €</div>}
            </div>
          </div>
        }
      </div>

      {/* Quick tiles + Gutschein */}
      <div style={{ padding: '20px 22px 18px' }}>
        <SectionLabel palette={palette}>Was möchtest du tun?</SectionLabel>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
          <Tile palette={palette} icon="calendar" title="Tisch reservieren" sub="In Wirtsstube oder Biergarten" onClick={() => goto('bookie')} accent />
          <Tile palette={palette} icon="bed" title="Zimmer buchen" sub="11 Gästezimmer" onClick={() => goto('rooms')} />
          <Tile palette={palette} icon="menu" title="Speisekarte" sub="Wochenkarte & Klassiker" onClick={() => goto('menu')} />
          <Tile palette={palette} icon="beer" title="Unsere Biere" sub="Gottlieb, Elsa, Hanna" onClick={() => goto('beer')} />
        </div>
        {/* Gutschein — always visible, full width */}
        <button onClick={() => openInApp('https://giftcards.sumup.com/order/MDQSLXHG', 'Gutschein kaufen')} style={{
          marginTop: 10, width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer',
          borderRadius: 14, padding: '14px 16px',
          background: `linear-gradient(135deg, ${palette.accentDark} 0%, ${palette.accent} 100%)`,
          display: 'flex', alignItems: 'center', gap: 14,
          boxShadow: `0 4px 16px ${palette.accent}40`
        }}>
          <div style={{ fontSize: 28, flexShrink: 0 }}>🎁</div>
          <div style={{ flex: 1, textAlign: 'left' }}>
            <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 17, color: palette.cream, lineHeight: 1.1 }}>Gutschein verschenken</div>
            <div style={{ fontSize: 12, color: palette.cream, opacity: 0.85, marginTop: 3 }}>Online kaufen — ideal als Geschenk</div>
          </div>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.7)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6" /></svg>
        </button>
      </div>

      {/* Aktuell */}
      <div style={{ padding: '6px 22px 28px' }}>
        <SectionLabel palette={palette}>Aktuell</SectionLabel>
        <div style={{
          marginTop: 12, padding: 14, borderRadius: 14,
          background: palette.green, color: palette.cream,
          display: 'flex', alignItems: 'center', gap: 12
        }}>
          <div style={{ flex: 1, fontSize: 13, lineHeight: 1.4 }}>
            <b>{news.text}</b><br />
            <span style={{ opacity: 0.8 }}>{news.sub}</span>
          </div>
        </div>
      </div>
    </PaperBg>);

};

const Tile = ({ palette, icon, title, sub, onClick, accent }) =>
<button onClick={onClick} style={{
  background: accent ? palette.accent : palette.paper,
  color: accent ? palette.cream : palette.ink,
  border: accent ? 'none' : `1px solid ${palette.green}18`,
  borderRadius: 16, padding: 14, textAlign: 'left', cursor: 'pointer',
  display: 'flex', flexDirection: 'column', gap: 8, minHeight: 110,
  fontFamily: 'Manrope, sans-serif'
}}>
    <Icon name={icon} size={22} color={accent ? palette.cream : palette.green} />
    <div style={{ marginTop: 'auto' }}>
      <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 16, lineHeight: 1.1 }}>{title}</div>
      <div style={{ fontSize: 11.5, opacity: 0.75, marginTop: 3 }}>{sub}</div>
    </div>
  </button>;


// ─────────────────────────────────────────────────────────────
// SPEISEKARTE
// ─────────────────────────────────────────────────────────────
const MENU_DATA = {
  dofr: {
    label: 'Do & Fr',
    sub: 'Donnerstag und Freitag',
    sections: [
    { name: 'Suppe', items: [
      { n: 'Leberklößchensuppe', d: 'mit Schwimmerle', p: '3,90' }]
    },
    { name: 'Hauptgericht', items: [
      { n: 'Paniertes Schweineschnitzel', d: 'mit Pommes frites und Beilagensalat', p: '18,50' },
      { n: 'Bauernbraten', d: 'mit Zwiebel, Speck und Rahmpilzen, Kartoffelklöße und Wirsing', p: '18,90' },
      { n: 'Putensteak', d: 'mit Pfefferrahm- oder Champignonrahmsauce, Rösti und Salat', p: '20,50' },
      { n: 'Gekochtes Rindfleisch', d: 'mit Meerrettichgemüse und Preiselbeeren, Bandnudeln', p: '21,00' },
      { n: 'Halbes Hähnchen', d: 'mit Pommes frites und Beilagensalat', p: '16,90' }]
    },
    { name: '1. Donnerstag im Monat', items: [
      { n: 'Gebackene Schweineleber', d: 'mit gedämpften Zwiebeln, Kartoffelpüree und Salat', tags: ['spezial'] }]
    },
    { name: 'Letzter Donnerstag im Monat', items: [
      { n: 'Spare Ribs', d: 'mit BBQ-Sauce und Pommes frites', tags: ['spezial'] }]
    }]

  },
  saso: {
    label: 'Sa & So',
    sub: 'Samstag und Sonntag',
    sections: [
    { name: 'Suppe', items: [
      { n: 'Leberklößchensuppe', d: 'mit Schwimmerle', p: '3,90' }]
    },
    { name: 'Hauptgericht', items: [
      { n: 'Ofenfrisches Schäufele', d: 'mit Kartoffelklößen und Wirsing (Vorbestellung möglich)', p: '21,90', tags: ['beliebt'] },
      { n: 'Cordon Bleu', d: 'mit Pommes frites und Beilagensalat', p: '19,50' },
      { n: 'Gekochtes Rindfleisch', d: 'mit Meerrettichgemüse und Preiselbeeren, Bandnudeln', p: '21,00' },
      { n: 'Putensteak', d: 'mit Pfefferrahm- oder Champignonrahmsauce, Rösti und Salat', p: '20,50' },
      { n: 'Halbes Hähnchen', d: 'mit Pommes frites und Beilagensalat', p: '16,90' }]
    }]

  },
  immer: {
    label: 'Immer',
    sub: 'Täglich · Burger Fr & So ab 17 Uhr',
    sections: [
    { name: 'Vegetarisch', items: [
      { n: 'Gemüsetaler', d: 'mit Sauce Bernaise, Kartoffeln und Beilagensalat', p: '16,90', tags: ['vegetarisch'] },
      { n: 'Bunter Salatteller', d: 'mit veg. Frühlingsröllchen, Sweet-Chili-Dip & Baguette', p: '15,50', tags: ['vegetarisch'] },
      { n: 'Bunter Salatteller', d: 'mit Rote Beete-Knusperecken, Fetawürfel & Baguette', p: '15,90', tags: ['vegetarisch'] }]
    },
    { name: 'Burger · Fr & So ab 17 Uhr', items: [
      { n: 'Klassik', d: '200g Rind, Cheddar, Tomate, Gurke, Salat, Kren Mayo, Burger Sauce', p: '15,50' },
      { n: 'Bacon', d: '200g Rind, Bacon, Cheddar, Bierteig-Zwiebeln, Tomate, Kren Mayo', p: '16,90' },
      { n: 'BBQ', d: '200g Rind, Cheddar, Schmorzwiebel, Tomate, hausgem. BBQ-Sauce', p: '15,90' },
      { n: 'Alm', d: '200g Rind, Rösti, Emmentaler, Schmorzwiebel im Kartoffelteigbrötchen', p: '16,90' },
      { n: 'Chicken', d: '135g crispy Chicken, Rucola, Curry-Mango-Sauce im Weizenbrötchen', p: '15,50' },
      { n: 'Veggi', d: 'Gemüsepatty, Tomate, Gurke, Salat, Sesam Mayo', p: '14,90', tags: ['vegetarisch'] }]
    },
    { name: 'Süßes', items: [
      { n: 'Warmes Schokoküchle', d: 'mit Vanilleeis und Sahne', p: '6,90' },
      { n: 'Kaiserschmarrn', d: 'mit Apfelmus', p: '7,50' },
      { n: 'Amarenabecher', d: 'Vanilleeis mit Amarenakirschen, Sahne und Mandelblättchen', p: '6,50' },
      { n: 'Nussknacker mit Schuss', d: 'Vanille- und Schokoeis, Eierlikör, geröstete Haselnüsse', p: '6,90' }]
    },
    { name: 'Kindergerichte', items: [
      { n: 'Chicken Nuggets mit Pommes', d: '', p: '7,50' },
      { n: 'Putenschnitzel mit Pommes', d: '', p: '7,90' },
      { n: "Kloß mit Soß'", d: '', p: '3,00' },
      { n: 'Nudeln mit Soße', d: '', p: '4,00' }]
    }]

  },
  abholung: {
    label: '🥡 To Go',
    sub: 'Alle Gerichte zum Mitnehmen',
    sections: []
  }
};

const MenuScreen = ({ palette, appData }) => {
  const [tab, setTab] = React.useState('dofr');
  const wochenbild = appData?.wochenkarte?.bild;
  const kwLabel = appData?.wochenkarte?.kw ? `KW ${appData.wochenkarte.kw}` : 'Wochenkarte';
  const data = MENU_DATA[tab];

  return (
    <PaperBg palette={palette}>
      <div style={{ padding: '22px 22px 8px' }}>
        <SectionLabel palette={palette}>Speise- & Getränkekarte</SectionLabel>
        <H1 palette={palette} style={{ fontSize: 30, marginTop: 6 }}>Aus der <i style={{ color: palette.accent }}>Wirtschaft</i></H1>
        <div style={{ fontSize: 13, color: palette.muted, marginTop: 6, lineHeight: 1.45 }}>
          Regional, viel Bio, kurze Wege. Allergeninfos auf Anfrage.
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 4, padding: '14px 22px 4px', position: 'sticky', top: 0, background: palette.cream, zIndex: 5, overflowX: 'auto' }}>
        {/* Wochenkarte tab — always shown first */}
        <button onClick={() => setTab('__woche')} style={{
          flexShrink: 0, padding: '9px 10px', borderRadius: 10, cursor: 'pointer',
          background: tab === '__woche' ? palette.accent : 'transparent',
          color: tab === '__woche' ? palette.cream : palette.accent,
          border: tab === '__woche' ? 'none' : `1px solid ${palette.accent}40`,
          fontFamily: 'Manrope, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: 0.2,
          whiteSpace: 'nowrap'
        }}>{kwLabel}</button>
        {Object.entries(MENU_DATA).map(([k, v]) =>
        <button key={k} onClick={() => setTab(k)} style={{
          flexShrink: 0, padding: '9px 10px', borderRadius: 10, cursor: 'pointer',
          background: tab === k ? palette.green : 'transparent',
          color: tab === k ? palette.cream : palette.green,
          border: tab === k ? 'none' : `1px solid ${palette.green}30`,
          fontFamily: 'Manrope, sans-serif', fontSize: 12, fontWeight: 700, letterSpacing: 0.2,
          whiteSpace: 'nowrap'
        }}>{v.label}</button>
        )}
      </div>

      {tab === '__woche' ?
      <div style={{ padding: '14px 22px 28px' }}>
          {wochenbild ?
        <img src={wochenbild} alt="Wochenkarte" style={{ width: '100%', borderRadius: 14, display: 'block', boxShadow: `0 4px 16px ${palette.ink}15` }} /> :
        (() => {
          const wk = appData?.wochenkarte || {};
          const doList = wk.do || [];const frList = wk.fr || [];
          const saList = wk.sa || [];const soList = wk.so || [];
          const same = (a, b) => JSON.stringify(a.map((x) => x.name)) === JSON.stringify(b.map((x) => x.name));
          const groups = [];
          if (same(doList, frList) && doList.length > 0 && frList.length > 0) {
            groups.push({ label: 'Donnerstag & Freitag', items: doList });
          } else {
            if (doList.length > 0) groups.push({ label: 'Donnerstag', items: doList });
            if (frList.length > 0) groups.push({ label: 'Freitag', items: frList });
          }
          if (same(saList, soList) && saList.length > 0 && soList.length > 0) {
            groups.push({ label: 'Samstag & Sonntag', items: saList });
          } else {
            if (saList.length > 0) groups.push({ label: 'Samstag', items: saList });
            if (soList.length > 0 && !same(saList, soList)) groups.push({ label: 'Sonntag', items: soList });else
            if (soList.length > 0 && saList.length === 0) groups.push({ label: 'Sonntag', items: soList });
          }
          if (groups.length === 0) return (
            <div style={{ textAlign: 'center', padding: '40px 20px', background: palette.paper, borderRadius: 14, border: `1px dashed ${palette.green}30` }}>
                <div style={{ fontSize: 32, marginBottom: 12 }}>📋</div>
                <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 18, color: palette.ink, marginBottom: 6 }}>Noch keine Gerichte eingetragen</div>
                <div style={{ fontSize: 13, color: palette.muted, lineHeight: 1.5 }}>Im <b>Bearbeiten → Wochenkarte</b> Gerichte eintragen oder Foto hochladen.</div>
              </div>);

          return (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                {appData?.wochenkarte?.kw &&
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: palette.muted }}>
                    KW {appData.wochenkarte.kw} · solange der Vorrat reicht
                  </div>
              }
                {groups.map(({ label, items }) =>
              <div key={label}>
                    <H2 palette={palette} style={{ fontSize: 18, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 6, height: 6, borderRadius: 3, background: palette.accent }} />
                      {label}
                    </H2>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                      {items.map((d, i) =>
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                          <div style={{ flex: 1 }}>
                            <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 16, color: palette.ink }}>{d.name}</div>
                            {d.desc && <div style={{ fontSize: 12.5, color: palette.muted, marginTop: 2, lineHeight: 1.4 }}>{d.desc}</div>}
                            {d.beilage && <div style={{ fontSize: 12, color: palette.green, marginTop: 2 }}>Beilagen: {d.beilage}</div>}
                          </div>
                          {d.price && <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 15, color: palette.green, whiteSpace: 'nowrap' }}>{d.price} €</div>}
                        </div>
                  )}
                    </div>
                  </div>
              )}
              </div>);

        })()}
        </div> :
      tab === 'abholung' ?
      <div style={{ padding: '16px 22px 28px' }}>
          <div style={{ background: palette.accent + '14', border: `1px solid ${palette.accent}30`, borderRadius: 14, padding: 14, marginBottom: 14 }}>
            <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 17, color: palette.ink, marginBottom: 4 }}>🍗 Knusprige Hähnchen</div>
            <div style={{ fontSize: 13, color: palette.muted, lineHeight: 1.5 }}>Unser Bestseller zum Mitnehmen. Zubereitungszeit ca. 25 Minuten — am besten kurzfristig telefonisch bestellen.</div>
            <a href="tel:093698221" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 10, padding: '8px 14px', borderRadius: 20, background: palette.accent, color: palette.cream, textDecoration: 'none', fontFamily: 'Manrope', fontWeight: 700, fontSize: 13 }}>
              <Icon name="phone" size={14} color={palette.cream} /> 09369 8221
            </a>
          </div>
          <div style={{ fontSize: 13, color: palette.ink, lineHeight: 1.6, marginBottom: 14 }}>
            Alle Gerichte unserer Karte können Sie auch für zu Hause mitnehmen.
          </div>
          <div style={{ background: palette.paper, border: `1px solid ${palette.green}15`, borderRadius: 14, padding: 14 }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: palette.muted, marginBottom: 10 }}>Verpackungshinweis · seit 2023</div>
            {[
          { icon: '♻️', label: 'Mehrwegbehälter', info: '5,00 € Pfand pro Stück' },
          { icon: '📦', label: 'Einwegverpackung (Alu/Plastik)', info: '0,50 € pro Stück' }].
          map((r, i) =>
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: i === 0 ? `1px dashed ${palette.green}18` : 'none' }}>
                <span style={{ fontSize: 13, color: palette.ink }}>{r.icon} {r.label}</span>
                <span style={{ fontFamily: '"DM Serif Display", serif', fontSize: 14, color: palette.green, whiteSpace: 'nowrap' }}>{r.info}</span>
              </div>
          )}
            <div style={{ marginTop: 12, padding: '8px 12px', borderRadius: 8, background: palette.green + '10', fontSize: 12, color: palette.green, lineHeight: 1.4 }}>
              💡 Bringen Sie eigene Behälter mit — am saubersten und günstigsten!
            </div>
          </div>
        </div> :

      <div style={{ padding: '14px 22px 22px' }}>
          <div style={{ fontSize: 11.5, fontFamily: 'JetBrains Mono, monospace', color: palette.muted, marginBottom: 16, letterSpacing: 0.1 }}>
            {data && data.sub}
          </div>
          {data && data.sections.map((sec) =>
        <div key={sec.name} style={{ marginBottom: 26 }}>
              <H2 palette={palette} style={{ fontSize: 19, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: palette.accent }} />
                {sec.name}
              </H2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {sec.items.map((it) =>
            <div key={it.n} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 16, color: palette.ink, lineHeight: 1.2 }}>{it.n}</div>
                      {(it.tags || []).length > 0 &&
                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 4 }}>
                          {(it.tags || []).map((t) =>
                  <span key={t} style={{
                    fontSize: 9, fontFamily: 'JetBrains Mono, monospace', textTransform: 'uppercase',
                    letterSpacing: 0.2, color: palette.accent, padding: '2px 6px',
                    background: palette.accent + '12', borderRadius: 4
                  }}>{t}</span>
                  )}
                        </div>
                }
                      <div style={{ fontSize: 12.5, color: palette.muted, marginTop: 3, lineHeight: 1.4 }}>{it.d}</div>
                    </div>
                    <div style={{ fontFamily: '"DM Serif Display", serif', fontSize: 16, color: palette.green, whiteSpace: 'nowrap' }}>{it.p && `${it.p} €`}</div>
                  </div>
            )}
              </div>
            </div>
        )}
        </div>
      }
    </PaperBg>);

};


Object.assign(window, {
  PALETTES, SEASONS, OPEN_HOURS_CONFIG, getDailyStampCode, getRedemptionCode, getReviewCode, getOpenStatus, getNextOpenText,
  Icon, HopGlyph, PaperBg, StatusBar, BottomNav,
  SectionLabel, H1, H2, Pill, ImagePlaceholder,
  HomeScreen, MenuScreen, Tile
});