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

const { useState, useEffect, useRef } = React;

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)' : '#7dddd8'}`,
    background: disabled ? 'transparent' : '#7dddd8',
    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: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: '0.15em', color: '#7dddd8', textTransform: 'uppercase', marginBottom: 16 }}>
          Our Selection
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 20, flexWrap: 'wrap', gap: 16 }}>
          <h2 style={{ fontFamily: "Anton, 'Bebas Neue', sans-serif", color: '#f5f1e8', fontSize: 'clamp(2.2rem, 5vw, 4.5rem)', lineHeight: 1.05, textTransform: 'uppercase', margin: 0 }}>
            Premium Flavours.
          </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>
        <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}
                style={{
                  width: cardWidth, flexShrink: 0,
                  background: '#1a1a1a',
                  border: '1px solid rgba(245,241,232,0.12)',
                  borderRadius: 6,
                  padding: 20,
                  cursor: 'default',
                }}
              >
                <img
                  src={`${THEME_URL}/${item.img}`}
                  alt={item.name}
                  style={{ width: '100%', height: 200, objectFit: 'contain', background: 'transparent', display: 'block' }}
                />
                <div style={{ fontFamily: "Anton, 'Bebas Neue', sans-serif", fontSize: 20, textTransform: 'uppercase', marginTop: 12, textAlign: 'center', color: '#f5f1e8' }}>
                  {item.name}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

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

  return (
    <div style={{ background: '#0a0a0a', fontFamily: 'Inter, sans-serif' }}>

      {/* HERO */}
      <section style={{ background: '#0a0a0a', padding: isMobile ? '60px 24px' : '80px 32px' }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 40 : 64,
          alignItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: '0.75rem', letterSpacing: '0.15em', color: '#7dddd8', textTransform: 'uppercase', marginBottom: 20 }}>
              Berlin Döner × Minetti
            </div>
            <h1 style={{ fontFamily: "Anton, 'Bebas Neue', sans-serif", fontSize: 'clamp(3rem, 7vw, 6rem)', lineHeight: 1, textTransform: 'uppercase', marginBottom: 24, margin: '0 0 24px' }}>
              <span style={{ color: '#f5f1e8', display: 'block' }}>Döner from Germany.</span>
              <span style={{ color: '#f5e6a8', display: 'block' }}>Ice cream from Italy.</span>
            </h1>
            <p style={{ color: '#b8b3a8', lineHeight: 1.7, fontSize: '1rem', maxWidth: 480, margin: 0 }}>
              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. First-class döner meets premium level ice cream.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <img src={`${THEME_URL}/assets/icecream/minetti-1.png`} alt="Minetti Ice Cream" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 4, display: 'block' }} />
            <img src={`${THEME_URL}/assets/icecream/minetti-2.png`} alt="Minetti Ice Cream" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 4, display: 'block' }} />
            <img src={`${THEME_URL}/assets/icecream/minetti-3.png`} alt="Minetti Ice Cream" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 4, display: 'block' }} />
            <img src={`${THEME_URL}/assets/icecream/minetti-4.png`} alt="Minetti Ice Cream" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 4, display: 'block' }} />
          </div>
        </div>
      </section>

      {/* PHOTO STRIP */}
      <div style={{ display: 'flex', width: '100%', overflow: 'hidden' }}>
        <img src={`${THEME_URL}/assets/icecream/minetti-3.png`} alt="Minetti Ice Cream" style={{ flex: 1, height: 300, objectFit: 'cover', display: 'block' }} />
        <img src={`${THEME_URL}/assets/icecream/minetti-4.png`} alt="Minetti Ice Cream" style={{ flex: 1, height: 300, objectFit: 'cover', display: 'block' }} />
        <img src={`${THEME_URL}/assets/icecream/minetti-5.png`} alt="Minetti Ice Cream" style={{ flex: 1, height: 300, objectFit: 'cover', display: 'block' }} />
      </div>

      {/* ICE CREAM FLAVOURS */}
      <IceCream />

      {/* CTA */}
      <section style={{ background: '#0a0a0a', padding: '80px 24px', textAlign: 'center' }}>
        <h2 style={{ fontFamily: "Anton, 'Bebas Neue', sans-serif", fontSize: 'clamp(2.5rem, 6vw, 5rem)', color: '#f5e6a8', textTransform: 'uppercase', lineHeight: 1, margin: '0 0 16px' }}>
          Come taste the difference.
        </h2>
        <p style={{ color: '#b8b3a8', marginBottom: 32, fontSize: '1rem', lineHeight: 1.7 }}>
          Find us at Savilankatu 6, Rauma. Open 7 days a week.
        </p>
        <a href="/contact" style={{ display: 'inline-block', padding: '16px 36px', background: '#7dddd8', color: '#0a0a0a', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', textDecoration: 'none', borderRadius: 999 }}>
          Find Us →
        </a>
      </section>

    </div>
  );
}

const el = document.getElementById('icecream-root');
if (el) ReactDOM.createRoot(el).render(<IceCreamPage />);