// screens4.jsx — RobataScreen: dedicated Robata Grill page (editorial + grill dishes)
// Exposes: RobataScreen
const tr4 = (o, lang) => (o ? (o[lang] ?? o.de) : '');

function TypewriterTextRobata({ text, onComplete }) {
  const [displayed, setDisplayed] = React.useState('');
  const idx = React.useRef(0);
  React.useEffect(() => {
    setDisplayed('');
    idx.current = 0;
    if (!text) { if (onComplete) onComplete(); return; }
    const interval = setInterval(() => {
      setDisplayed(text.substring(0, idx.current + 1));
      idx.current++;
      if (idx.current >= text.length) {
        clearInterval(interval);
        if (onComplete) onComplete();
      }
    }, 15);
    return () => clearInterval(interval);
  }, [text]);
  return <>{displayed}</>;
}

function RobataScreen({ lang, setLang, onBook, onOpenDish, onNavigate }) {
  const cat = SHIKI_MENU.find(c => c.id === 'robata') || { dishes: [] };
  const [showText, setShowText] = React.useState(false);

  React.useEffect(() => {
    const timer = setTimeout(() => setShowText(true), 400); // Start typing after fade in
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="screen robata">
      <Photo kind="robata" src="assets/svc-robata.png" pos="center 45%"
        style={{ position:'absolute', top:0, left:0, right:0, height:320 }} />
      <div className="robata-hero-fade" />
      <div className="robata-hero-text">
        <div className="topbar-row" style={{ marginBottom:'auto', paddingTop:6 }}>
          <div className="topbar-kicker" style={{ display: 'flex', alignItems: 'center', gap: 6, paddingLeft: 0 }}>
            <span style={{ display: 'inline-block', width: 12, height: 1, background: 'var(--gold)' }} />
            BINCHOTAN HOLZKOHLE
          </div>
          <button className="hero-lang" style={{ position: 'relative', top: 'auto', right: 'auto', zIndex: 10, animation: 'none', marginLeft: 'auto' }} onClick={() => setLang(lang==='de'?'en':'de')} aria-label="language">
            <svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true"><circle fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" cx="12" cy="12" r="9"></circle><path fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"></path></svg>
            <span className={lang==='de'?'on':''}>DE</span><span className="lang-sep">/</span><span className={lang==='en'?'on':''}>EN</span>
          </button>
        </div>
        <h1 className="robata-title">Robata Grill</h1>
        <div className="robata-jp">炉端焼き</div>
      </div>
      
      <div className="robata-intro stagger" style={{ animationDelay: '0.1s' }}>
        {showText ? <TypewriterTextRobata text={tr4(SHIKI_STRINGS.robataIntro, lang)} /> : ''}
      </div>

      <div className="about-goldline" style={{ padding: '0 24px', margin: '16px 0 32px' }}>
        <span />
        <div className="about-diamond" />
        <span />
      </div>

      <div className="robata-desktop-wrapper">
        <div className="robata-sec">
          <div className="sec-head">
            <span className="sec-jp">炭火</span>
            <span className="sec-title">{tr4(SHIKI_STRINGS.robataFrom, lang)}</span>
            <span className="sec-rule" />
          </div>
          <div className="robata-dish-grid">
            {cat.dishes.map(d => (
              <button key={d.id} className={`dish ${d.signature ? 'dish-is-signature' : ''}`} onClick={() => onOpenDish && onOpenDish(d)}>
                <Photo kind={d.photo} src={d.src} className="dish-thumb" />
                <div className="dish-body">
                  <div className="dish-top">
                    <span className="dish-name">{tr4(d.name, lang)}</span>
                    <span className="dish-price">{d.price} €</span>
                  </div>
                  {d.signature && <span className="dish-sig">{tr4(SHIKI_STRINGS.signature, lang)}</span>}
                  <div className="dish-desc">{tr4(d.desc, lang)}</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="robata-cta-wrapper">
          <button className="cta-primary robata-cta" onClick={onBook}>
            <span>{tr4(SHIKI_STRINGS.bookCta, lang)}</span><Icon name="chevR" size={16} />
          </button>
        </div>
      </div>
      <SiteFooter lang={lang} onNavigate={onNavigate} />
    </div>
  );
}

Object.assign(window, { RobataScreen });