/* Berlin Döner Rauma — main app */
const THEME_URL = (document.getElementById('berlin-doner-app-js')?.src.replace('/assets/app.jsx', '').split('?')[0]) || 'https://berlin2.demowpsite.com/wp-content/themes/berlin-doner-rauma';

const { useState, useEffect, useMemo, useRef } = React;

// ==================== HELPERS ====================
function fmtEUR(n) {
  return n.toFixed(2).replace('.', ',');
}

function getStatus() {
  const now = new Date();
  const day = now.getDay();
  const mins = now.getHours() * 60 + now.getMinutes();
  const today = HOURS.find(h => h.dayIdx === day);
  if (!today) return { open: false, label: 'Closed' };
  const [oh, om] = today.open.split(':').map(Number);
  const [ch, cm] = today.close.split(':').map(Number);
  const oMin = oh * 60 + om;
  const cMin = ch * 60 + cm;
  if (mins >= oMin && mins < cMin) {
    return { open: true, label: `Open until ${today.close}` };
  }
  return { open: false, label: `Opens ${today.open}` };
}

// ==================== NAV ====================
const overlayLinkStyle = {
  fontFamily: "Anton, 'Bebas Neue', sans-serif",
  fontSize: 'clamp(2.5rem, 8vw, 4rem)',
  color: '#f5f1e8',
  textDecoration: 'none',
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
  transition: 'color 0.2s',
};
const hamburgerStyle = {
  width: 40, height: 40, borderRadius: 8,
  border: '1px solid rgba(245,241,232,0.3)',
  background: 'transparent',
  color: '#7dddd8', fontSize: 18,
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  cursor: 'pointer',
};

function Nav({ status }) {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') setMenuOpen(false); }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <nav className="nav">
        <div className="nav-left">
          <a href="/"><img className="nav-logo nav-logo-img" src={`${THEME_URL}/assets/logo.png`} alt="Berlin Döner Rauma" /></a>
          <div className="nav-links" style={{ fontSize: 15, letterSpacing: '0.08em' }}>
            <a href="/about">About</a>
            <a href="/menu">Menu</a>
            <a href="/ice-cream">Ice Cream</a>
            <a href="/gallery">Gallery</a>
            <a href="/contact">Contact</a>
          </div>
        </div>
        <div className="nav-right">
          <a href={window.WOLT_URL} target="_blank" className="nav-cart nav-wolt-btn">
            <span>Order on Wolt →</span>
          </a>
          <button className="nav-hamburger" onClick={() => setMenuOpen(true)} aria-label="Open menu" style={hamburgerStyle}>☰</button>
        </div>
      </nav>

      {menuOpen && (
        <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', background: 'rgba(10,10,10,0.97)', zIndex: 2000, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '2rem' }}>
          <button onClick={() => setMenuOpen(false)} aria-label="Close menu" style={{ ...hamburgerStyle, position: 'absolute', top: 20, right: 20 }}>✕</button>
          <a href="/about" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>About</a>
          <a href="/menu" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Menu</a>
          <a href="/ice-cream" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Ice Cream</a>
          <a href="/gallery" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Gallery</a>
          <a href="/contact" onClick={() => setMenuOpen(false)} style={overlayLinkStyle}
            onMouseEnter={e => e.currentTarget.style.color = '#7dddd8'}
            onMouseLeave={e => e.currentTarget.style.color = '#f5f1e8'}>Contact</a>
          <a href={window.WOLT_URL} target="_blank" style={{ marginTop: '1rem', padding: '14px 28px', background: '#7dddd8', color: '#0a0a0a', textDecoration: 'none', borderRadius: 999, fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Order on Wolt →</a>
        </div>
      )}
    </>
  );
}

// ==================== HERO ====================
function Hero({ status, onOrder }) {
  return (
    <section className="hero">
      <div className="hero-bg"></div>
      <div className="hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="line"></span>
            <span>Est. Rauma · Authentic Berlin Recipe</span>
          </div>
          <h1 className="display hero-title">
            Berlin<br/>
            <span className="stroke">Döner</span><br/>
            <span className="accent">in&nbsp;Rauma.</span>
          </h1>
          <p className="hero-sub">
            Hand-carved döner stacked into our house-baked sesame flatbread —
            built on a recipe straight out of Berlin, served fresh on Savilankatu.
          </p>
          <div className="hero-cta-row">
            <a href="#menu" className="btn btn-primary">
              See the Menu →
            </a>
            <a href="#order" className="btn btn-ghost">
              Order Now
            </a>
          </div>
        </div>
        <div className="hero-image-stack">
          <div className="hero-img-main" style={{ backgroundImage: `url(${THEME_URL}/assets/food/meat-bread.avif)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }}></div>
          <div className="hero-img-tag">
            <div className="label">From</div>
            <div className="price">€12,90</div>
          </div>
        </div>
      </div>

      <div className="hero-meta-bar">
        <div className="hero-meta-cell hl">
          <div className="k">★ Rating</div>
          <div className="v">4.9 / 5.0</div>
          <div className="sub">Based on 281 reviews</div>
        </div>
        <div className="hero-meta-cell">
          <div className="k">Address</div>
          <div className="v">Savilankatu 6</div>
          <div className="sub">26100 Rauma, Finland</div>
        </div>
        <div className="hero-meta-cell">
          <div className="k">Today</div>
          <div className="v">{status.label}</div>
          <div className="sub">Dine-in · Takeaway · Delivery</div>
        </div>
        <div className="hero-meta-cell">
          <div className="k">Reserve</div>
          <div className="v"><a href="tel:+358413262052" style={{color: 'inherit', textDecoration: 'none'}}>+358 41 3262052</a></div>
          <div className="sub">Walk-ins welcome</div>
        </div>
      </div>
    </section>
  );
}

// ==================== MARQUEE ====================
function Marquee() {
  const items = ['Authentic Berlin Recipe', 'Hand-Carved Daily', 'House-Baked Bread', '100% Fresh', 'Made in Rauma', 'Since Day One', 'Crew of Two Bears'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {[...items, ...items, ...items].map((t, i) => (
          <React.Fragment key={i}>
            <span className={i % 3 === 1 ? 'hl' : ''}>{t}</span>
            <span className="dot">✦</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ==================== STORY ====================
function Story({ showStamp }) {
  return (
    <section id="story" className="story">
      <div>
        <div className="section-eyebrow">
          <span className="num">01 /</span>
          <span className="line"></span>
          <span>Our Story</span>
        </div>
        <h2 className="display story-title">
          From Berlin<br/>
          <span className="it">to Rauma.</span>
        </h2>
        <p className="story-body">
          The Berlin döner isn't just a sandwich — it's a 1970s Berlin invention,
          a city's after-work ritual, a street-food icon. We brought that exact recipe
          to Rauma's Savilankatu: vertical-spit roasted meat, sesame-crusted bread baked
          in-house, the same chili and yogurt sauces a Berlin kebabçı would recognize.
        </p>
        <div className="story-stats">
          <div className="story-stat">
            <div className="n">100%</div>
            <div className="l">Fresh ingredients</div>
          </div>
          <div className="story-stat">
            <div className="n">7</div>
            <div className="l">Days a week</div>
          </div>
          <div className="story-stat">
            <div className="n">4.9★</div>
            <div className="l">Customer rating</div>
          </div>
          <div className="story-stat">
            <div className="n">€12,90</div>
            <div className="l">Starting price</div>
          </div>
        </div>
      </div>
      <div className="story-art">
        <div className="story-art-img" style={{ backgroundImage: `url(${THEME_URL}/assets/food/meat-bread-meal.avif)`, backgroundSize: 'cover' }}></div>
        {showStamp && (
          <div className="story-art-stamp">
            <div>
              <div className="stamp-inner">Authentic<br/>Berlin<br/>Recipe</div>
              <div className="stamp-sub">★ ★ ★ ★ ★</div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ==================== MENU ====================
function MenuSection() {
  const [tab, setTab] = useState('signature');
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    function update() { setIsMobile(window.innerWidth <= 768); }
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  const groups = {
    signature: { title: 'Signature Döners', items: MENU.signature, num: '02' },
    meals: { title: 'Combo Meals', items: MENU.meals, num: '03' },
    drinks: { title: 'Drinks', items: MENU.drinks, num: '04' },
  };

  const g = groups[tab];
  const gap = 16;
  const visibleCount = isMobile ? 1 : 3;
  const cardWidth = isMobile ? Math.round(window.innerWidth * 0.85) : 320;
  const maxIndex = Math.max(0, g.items.length - visibleCount);
  const safeIndex = Math.min(currentIndex, maxIndex);
  const translateX = safeIndex * (cardWidth + gap);

  function switchTab(k) {
    setTab(k);
    setCurrentIndex(0);
  }

  const prev = () => setCurrentIndex(i => Math.max(0, i - 1));
  const next = () => setCurrentIndex(i => Math.min(maxIndex, i + 1));

  const arrowStyle = (disabled) => ({
    width: 44, height: 44, borderRadius: '50%',
    border: `1px solid ${disabled ? 'rgba(255,255,255,0.1)' : 'var(--cyan)'}`,
    background: disabled ? 'transparent' : 'var(--cyan)',
    color: disabled ? 'rgba(255,255,255,0.25)' : '#0a0a0a',
    fontSize: 22, cursor: disabled ? 'not-allowed' : 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 0.2s', lineHeight: 1,
  });

  return (
    <section id="menu" className="menu">
      <div className="menu-head">
        <div>
          <div className="section-eyebrow">
            <span className="num">{g.num} /</span>
            <span className="line"></span>
            <span>The Menu</span>
          </div>
          <h2 className="display menu-title">
            <span className="accent">{g.title}.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-end' }}>
          <div className="menu-tabs">
            {Object.entries(groups).map(([k, v]) => (
              <button key={k} className={`menu-tab ${tab === k ? 'active' : ''}`} onClick={() => switchTab(k)}>
                {v.title.split(' ')[0]}
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button onClick={prev} disabled={currentIndex === 0} style={arrowStyle(currentIndex === 0)} aria-label="Previous">‹</button>
            <button onClick={next} disabled={currentIndex >= maxIndex} style={arrowStyle(currentIndex >= maxIndex)} aria-label="Next">›</button>
          </div>
        </div>
      </div>

      <div style={{ overflow: 'hidden' }}>
        <div style={{
          display: 'flex',
          gap: gap,
          transform: `translateX(-${translateX}px)`,
          transition: 'transform 0.35s ease',
        }}>
          {g.items.map((item, i) => (
            <div key={item.id} style={{ width: cardWidth, flexShrink: 0 }}>
              <MenuItem item={item} num={i + 1} compact={tab === 'drinks'} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MenuItem({ item, num, compact }) {
  const tagClass = item.tag === 'Hot' ? 'hot' : item.tag === 'Light' ? 'veg' : '';
  return (
    <div className="menu-item">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span className="menu-item-num">N°{String(num).padStart(2, '0')}</span>
        {item.tag && !compact && <span className={`menu-item-tag ${tagClass}`} style={{ position: 'static' }}>{item.tag}</span>}
      </div>
      <div className="menu-item-img-wrap">
        <div className="menu-item-img" style={{ backgroundImage: `url(${THEME_URL}/${item.img})` }}></div>
      </div>
      <div>
        <div className="menu-item-name">{item.name}</div>
        <div className="menu-item-desc" style={{ marginTop: 8 }}>{item.desc}</div>
      </div>
      <div className="menu-item-foot">
        <div className="menu-item-price"><span className="cur">€</span>{fmtEUR(item.price)}</div>
      </div>
    </div>
  );
}

// ==================== ORDER STRIP ====================
function OrderStrip() {
  return (
    <section id="order" className="order-strip">
      <div className="order-card wolt">
        <div className="order-card-eyebrow">→ Delivery</div>
        <h3 className="display order-card-title">Order on Wolt.<br/>To your door.</h3>
        <p className="order-card-body">
          Hot, fast, fresh — we deliver across Rauma through Wolt. Sesame bread still warm by the time it reaches you.
        </p>
        <div className="order-card-cta">
          <a href={window.WOLT_URL} target="_blank" className="btn btn-primary">
            Order via Wolt →
          </a>
        </div>
        <div className="order-card-deco">Wolt</div>
      </div>
      <div className="order-card call">
        <div className="order-card-eyebrow">→ Takeaway</div>
        <h3 className="display order-card-title">Call ahead.<br/>Skip the wait.</h3>
        <p className="order-card-body">
          Phone in your order and we'll have it carved, packed and ready for pickup at Savilankatu 6.
        </p>
        <div className="order-card-cta">
          <a href="tel:+358413262052" className="btn btn-red">
            Call +358 41 326 2052
          </a>
        </div>
        <div className="order-card-deco">Call</div>
      </div>
    </section>
  );
}

// ==================== INFO / VISIT ====================
function Info({ status }) {
  const todayIdx = new Date().getDay();
  return (
    <section id="visit" className="info">
      <div>
        <div className="section-eyebrow">
          <span className="num">05 /</span>
          <span className="line"></span>
          <span>Visit</span>
        </div>
        <h2 className="display info-title">Find us.<br/>Eat well.</h2>
        <div className="contact-block">
          <div className="contact-row">
            <div className="k">Address</div>
            <div className="v">
              Savilankatu 6
              <small>26100 Rauma, Finland</small>
            </div>
          </div>
          <div className="contact-row">
            <div className="k">Phone</div>
            <div className="v">
              <a href="tel:+358413262052">+358 41 326 2052</a>
              <small>Walk-ins welcome — call ahead for large orders</small>
            </div>
          </div>
          <div className="contact-row">
            <div className="k">Social</div>
            <div className="v">
              <a href="https://www.facebook.com/p/Berlin-D%C3%B6ner-Rauma-61579870075803/" target="_blank">Facebook</a>
              {' · '}
              <a href="https://www.tiktok.com/@berlin.doner.rauma" target="_blank">TikTok</a>
              <small>Follow for daily specials and what's coming off the spit</small>
            </div>
          </div>
          <div className="contact-row">
            <div className="k">Map</div>
            <div className="v">
              <a href="https://maps.app.goo.gl/wqXgSwQwwL8fBn2i6" target="_blank">Open in Google Maps →</a>
              <small>2 min walk from Rauma centre</small>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div className="section-eyebrow" style={{ marginBottom: 24 }}>
          <span className="num">06 /</span>
          <span className="line"></span>
          <span>Opening Hours</span>
        </div>
        <div className="hours-list">
          {HOURS.map(h => {
            const isToday = h.dayIdx === todayIdx;
            return (
              <div key={h.day} className={`hours-row ${isToday ? 'today' : ''}`}>
                <div className="day">
                  {h.day}
                  {h.badge && <span className="badge">{h.badge}</span>}
                </div>
                <div className="time">{h.open}–{h.close}</div>
                <div className={`status ${isToday && status.open ? 'open' : isToday ? 'closed' : ''}`}>
                  {isToday ? (status.open ? 'OPEN' : 'CLOSED') : ''}
                </div>
              </div>
            );
          })}
        </div>

        <div className="map-card" style={{ marginTop: 32 }}>
          <div className="map-streets">
            <div className="map-street" style={{ left: 0, right: 0, top: '40%', height: 3 }}></div>
            <div className="map-street" style={{ left: 0, right: 0, top: '70%', height: 2 }}></div>
            <div className="map-street" style={{ top: 0, bottom: 0, left: '30%', width: 2 }}></div>
            <div className="map-street" style={{ top: 0, bottom: 0, left: '60%', width: 3 }}></div>
            <div className="map-street" style={{ top: '20%', bottom: '60%', left: '45%', width: 1.5, transform: 'rotate(20deg)' }}></div>
          </div>
          <div className="map-pin">
            <div className="pin-label">Savilankatu 6</div>
            <div className="pin-dot"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ==================== FOOTER ====================
function Footer() {
  return (
    <footer style={{ background: '#0a0a0a', borderTop: '1px solid rgba(245,241,232,0.1)', padding: '4rem 2rem 2rem', fontFamily: 'Inter, sans-serif' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="wp-footer-grid" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: '3rem', marginBottom: '3rem' }}>

          {/* Column 1 — Logo + tagline + social */}
          <div>
            <a href="/"><img src={`${THEME_URL}/assets/logo.png`} className="footer-logo-img" style={{ marginBottom: '1rem' }} alt="Berlin Döner Rauma" /></a>
            <p style={{ color: '#6e6a62', fontSize: '0.85rem', lineHeight: 1.6, marginBottom: '1.5rem' }}>Hand-carved döner. Straight from our house-baked seasons tradition — built on a recipe straight out of Berlin, served fresh in Savilankatu.</p>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="https://www.facebook.com/p/Berlin-D%C3%B6ner-Rauma-61579870075803/" target="_blank" style={{ color: '#7dddd8', fontSize: '0.8rem', fontFamily: "'JetBrains Mono', monospace", textDecoration: 'none' }}>Facebook</a>
              <a href="https://www.tiktok.com/@berlin.doner.rauma" target="_blank" style={{ color: '#7dddd8', fontSize: '0.8rem', fontFamily: "'JetBrains Mono', monospace", textDecoration: 'none' }}>TikTok</a>
            </div>
          </div>

          {/* Column 2 — Visit Us + Map */}
          <div className="footer-visit-map">
            <div>
              <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem', letterSpacing: '0.15em', color: '#7dddd8', textTransform: 'uppercase', marginBottom: '1rem' }}>Visit Us</p>
              <a href="https://maps.app.goo.gl/wqXgSwQwwL8fBn2i6" target="_blank" rel="noopener noreferrer" style={{textDecoration:'none'}}>
                <span style={{display:'block', fontFamily:"Anton, 'Bebas Neue', sans-serif", fontSize:'1.8rem', color:'#f5f1e8', lineHeight:1.1, marginBottom:'4px'}}>Savilankatu 6</span>
                <span style={{display:'block', color:'#b8b3a8', fontSize:'0.9rem', lineHeight:1.6}}>26100 Rauma<br/>Finland</span>
              </a>
            </div>
            <div className="footer-map-box">
              <a href="https://maps.app.goo.gl/wqXgSwQwwL8fBn2i6" target="_blank" rel="noopener noreferrer" style={{textDecoration:'none', display:'block'}}>
                <div style={{border:'1px solid rgba(245,241,232,0.28)', borderRadius:4, overflow:'hidden', position:'relative', width:'100%', aspectRatio:'16/10', background:'#1a2a2a', backgroundImage:'linear-gradient(rgba(125,221,216,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(125,221,216,0.08) 1px, transparent 1px)', backgroundSize:'19px 19px'}}>
                  <div style={{position:'absolute', inset:0, pointerEvents:'none'}}>
                    <div style={{position:'absolute', left:0, right:0, top:'40%', height:2, background:'rgba(125,221,216,0.18)'}}></div>
                    <div style={{position:'absolute', left:0, right:0, top:'70%', height:1, background:'rgba(125,221,216,0.18)'}}></div>
                    <div style={{position:'absolute', top:0, bottom:0, left:'30%', width:1, background:'rgba(125,221,216,0.18)'}}></div>
                    <div style={{position:'absolute', top:0, bottom:0, left:'60%', width:2, background:'rgba(125,221,216,0.18)'}}></div>
                    <div style={{position:'absolute', top:'20%', bottom:'60%', left:'45%', width:1, background:'rgba(125,221,216,0.18)', transform:'rotate(20deg)'}}></div>
                  </div>
                  <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%, -100%)', display:'flex', flexDirection:'column', alignItems:'center'}}>
                    <div style={{background:'#7dddd8', color:'#0a0a0a', padding:'3px 7px', fontFamily:"'JetBrains Mono', monospace", fontSize:7, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', borderRadius:2, marginBottom:4, whiteSpace:'nowrap'}}>Savilankatu 6</div>
                    <div style={{width:9, height:9, borderRadius:'50%', background:'#7dddd8', boxShadow:'0 0 0 3px rgba(125,221,216,0.2), 0 0 0 7px rgba(125,221,216,0.1)'}}></div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          {/* Column 3 — Contact */}
          <div>
            <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem', letterSpacing: '0.15em', color: '#7dddd8', textTransform: 'uppercase', marginBottom: '1rem' }}>Contact</p>
            <div>
              <p style={{fontFamily:"Anton, 'Bebas Neue', sans-serif", fontSize:'1.4rem', color:'#f5f1e8', marginBottom:'4px'}}>
                <a href="tel:+358413262052" style={{color:'inherit', textDecoration:'none'}}>+358 41 3262052</a>
              </p>
              <p style={{color:'#b8b3a8', fontSize:'0.9rem'}}>
                <a href="mailto:info@berlindoner.fi" style={{color:'#b8b3a8', textDecoration:'none'}}>info@berlindoner.fi</a>
              </p>
            </div>
          </div>

          {/* Column 4 — Opening Hours */}
          <div>
            <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.7rem', letterSpacing: '0.15em', color: '#7dddd8', textTransform: 'uppercase', marginBottom: '1rem' }}>Opening Hours</p>
            <p style={{ color: '#b8b3a8', fontSize: '0.9rem', lineHeight: 1.8 }}>
              Monday: 10:30–21:00<br />
              Tuesday: 10:30–21:00<br />
              Wednesday: 10:30–21:00<br />
              Thursday: 10:30–21:00<br />
              Friday: 10:30–22:00<br />
              Saturday: 11:00–22:00<br />
              Sunday: 11:00–21:00
            </p>
          </div>

        </div>

        {/* Bottom bar */}
        <div style={{ borderTop: '1px solid rgba(245,241,232,0.1)', paddingTop: '1.5rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
          <p style={{ color: '#6e6a62', fontSize: '0.8rem' }}>© 2026 Berlin Döner Rauma. All Rights Reserved.</p>
          <nav style={{ display: 'flex', gap: '1.5rem' }}>
            <a href="/about" style={{ color: '#6e6a62', fontSize: '0.8rem', textDecoration: 'none' }}>About</a>
            <a href="/menu" style={{ color: '#6e6a62', fontSize: '0.8rem', textDecoration: 'none' }}>Menu</a>
            <a href="/ice-cream" style={{ color: '#6e6a62', fontSize: '0.8rem', textDecoration: 'none' }}>Ice Cream</a>
            <a href="/gallery" style={{ color: '#6e6a62', fontSize: '0.8rem', textDecoration: 'none' }}>Gallery</a>
            <a href="/contact" style={{ color: '#6e6a62', fontSize: '0.8rem', textDecoration: 'none' }}>Contact</a>
          </nav>
        </div>
      </div>
    </footer>
  );
}

// ==================== CART DRAWER ====================
function CartDrawer({ open, onClose, cart, onChange }) {
  const subtotal = cart.reduce((s, l) => s + l.price * l.qty, 0);
  const items = cart.reduce((s, l) => s + l.qty, 0);
  return (
    <>
      <div className={`cart-overlay ${open ? 'open' : ''}`} onClick={onClose}></div>
      <aside className={`cart-drawer ${open ? 'open' : ''}`}>
        <div className="cart-head">
          <h3>Your Order</h3>
          <button className="cart-close" onClick={onClose}>✕</button>
        </div>
        <div className="cart-body">
          {cart.length === 0 ? (
            <div className="cart-empty">
              <div className="ico">∅</div>
              <div>Your basket is empty.</div>
              <div style={{ fontSize: 12, marginTop: 6 }}>Add a döner to get started.</div>
            </div>
          ) : (
            cart.map(line => (
              <div key={line.id} className="cart-line">
                <div className="img" style={{ backgroundImage: `url(${THEME_URL}/${line.img})` }}></div>
                <div>
                  <div className="nm">{line.name}</div>
                  <div className="pr">€{fmtEUR(line.price)}</div>
                  <div className="qty">
                    <button onClick={() => onChange(line.id, line.qty - 1)}>−</button>
                    <span>{line.qty}</span>
                    <button onClick={() => onChange(line.id, line.qty + 1)}>+</button>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="total">€{fmtEUR(line.price * line.qty)}</div>
                  <div className="rm" onClick={() => onChange(line.id, 0)}>Remove</div>
                </div>
              </div>
            ))
          )}
        </div>
        {cart.length > 0 && (
          <div className="cart-foot">
            <div className="row"><span className="k">Items</span><span className="v">{items}</span></div>
            <div className="row"><span className="k">Subtotal</span><span className="v">€{fmtEUR(subtotal)}</span></div>
            <div className="row total"><span className="k">Total</span><span className="v">€{fmtEUR(subtotal)}</span></div>
            <button className="checkout">Continue to Checkout →</button>
            <div className="note">Pickup at Savilankatu 6 · or order via Wolt for delivery</div>
          </div>
        )}
      </aside>
    </>
  );
}

// ==================== SCROLL TO TOP ====================
function ScrollToTop() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return visible ? (
    <button
      className="scroll-to-top"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      style={{
        position: 'fixed', bottom: '2rem', right: '2rem', zIndex: 999,
        width: 48, height: 48, borderRadius: '50%',
        background: 'var(--cyan)', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 22, color: '#0a0a0a', boxShadow: '0 4px 16px rgba(0,0,0,0.4)'
      }}
    >↑</button>
  ) : null;
}

// ==================== ICE CREAM ====================
const ICE_CREAM = [
  { name: 'Cherry', img: 'assets/icecream/Cherry-kirsikka.png' },
  { name: 'Mango Yogurt', img: 'assets/icecream/Mango yogurt-mangojogurtti-etusivu.png' },
  { name: 'Chili Chocolate Orange', img: 'assets/icecream/Chili chocolate orange-chili-suklaa-appelsiini.png' },
  { name: 'Superman', img: 'assets/icecream/SUPERMAN-Superman-Azzurro.png' },
  { name: 'Licorice', img: 'assets/icecream/Licorice-lakritsi.png' },
  { name: 'Creme Brulee', img: 'assets/icecream/Creme Brulee-Creme-Brulee-Crema-Catalana.png' },
  { name: 'Stracciatella', img: 'assets/icecream/Stracciatella-Stracciatella.png' },
  { name: 'Orange', img: 'assets/icecream/Orange-Appelsiini.png' },
];

function IceCream() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isMobile, setIsMobile] = useState(false);
  const containerRef = useRef(null);
  const [containerWidth, setContainerWidth] = useState(0);

  useEffect(() => {
    function update() {
      setIsMobile(window.innerWidth <= 768);
      if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
    }
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);

  const gap = 16;
  const visibleCount = isMobile ? 1 : 3;
  const maxIndex = ICE_CREAM.length - visibleCount;
  const cardWidth = containerWidth > 0 ? (containerWidth - (visibleCount - 1) * gap) / visibleCount : 220;
  const translateX = currentIndex * (cardWidth + gap);

  const prev = () => setCurrentIndex(i => Math.max(0, i - 1));
  const next = () => setCurrentIndex(i => Math.min(maxIndex, i + 1));

  const arrowStyle = (disabled) => ({
    width: 44, height: 44, borderRadius: '50%',
    border: `1px solid ${disabled ? 'rgba(255,255,255,0.1)' : 'var(--cyan)'}`,
    background: disabled ? 'transparent' : 'var(--cyan)',
    color: disabled ? 'rgba(255,255,255,0.25)' : '#0a0a0a',
    fontSize: 22, cursor: disabled ? 'not-allowed' : 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 0.2s', lineHeight: 1,
  });

  return (
    <section style={{ background: '#131313', padding: '80px 0', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ fontFamily: 'monospace', fontSize: 12, letterSpacing: '0.15em', color: 'var(--cyan)', textTransform: 'uppercase', marginBottom: 16 }}>
          New at Berlin Döner
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 20, flexWrap: 'wrap', gap: 16 }}>
          <h2 className="display" style={{ color: 'var(--cream)', fontSize: 'clamp(2.2rem, 5vw, 4.5rem)', lineHeight: 1.05 }}>
            Döner from Germany.<br />
            Ice cream from Italy.
          </h2>
          <div style={{ display: 'flex', gap: 10 }}>
            <button onClick={prev} disabled={currentIndex === 0} style={arrowStyle(currentIndex === 0)} aria-label="Previous">‹</button>
            <button onClick={next} disabled={currentIndex >= maxIndex} style={arrowStyle(currentIndex >= maxIndex)} aria-label="Next">›</button>
          </div>
        </div>
        <p style={{ color: 'var(--ink-dim)', maxWidth: 560, marginBottom: 40, lineHeight: 1.7 }}>
          We brought the best of both worlds to Rauma. Premium Minetti ice cream — one of the most respected brands on the market — now available alongside our döner.
        </p>
        <div ref={containerRef} style={{ overflow: 'hidden' }}>
          <div style={{
            display: 'flex',
            gap: gap,
            transform: `translateX(-${translateX}px)`,
            transition: 'transform 0.35s ease',
          }}>
            {ICE_CREAM.map(item => (
              <div
                key={item.name}
                className="menu-item"
                style={{ width: cardWidth, flexShrink: 0, cursor: 'default' }}
              >
                <img
                  src={`${THEME_URL}/${item.img}`}
                  alt={item.name}
                  style={{ width: '100%', height: 200, objectFit: 'contain', background: 'transparent', display: 'block' }}
                />
                <div className="menu-item-name" style={{ marginTop: 12, textAlign: 'center' }}>{item.name}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ==================== APP ====================
function App() {
  const status = useMemo(() => getStatus(), []);

  React.useEffect(() => {
    document.querySelectorAll('*').forEach(el => {
      if (el.getBoundingClientRect().right > window.innerWidth + 5) {
        el.style.maxWidth = '100%';
        el.style.overflowX = 'hidden';
      }
    });
  }, []);

  return (
    <>
      <Nav status={status} />
      <Hero status={status} />
      <Marquee />
      <Story showStamp={true} />
      <MenuSection />
      <OrderStrip />
      <IceCream />
      <Footer />
      <ScrollToTop />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);