// screens1.jsx — Splash, Hero (3 variants), Index, Lounge
// Exposes: SplashScreen, HeroScreen, IndexScreen, LoungeScreen
const { useState, useEffect, useRef } = React;
const tr1 = (o, lang) => (o ? (o[lang] ?? o.de) : '');

// Wordmark used across the app — real SHIKI emblem + LEIPZIG subline
function Wordmark({ size = 1, light = true, kanji = true }) {
  const col = light ? '#ece7df' : '#15100c';
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', color:col, lineHeight:1 }}>
      <Logo height={108 * size} color={col} />
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:10*size, marginTop:16*size }}>
        <span style={{ width:18*size, height:1, background:'var(--gold)', opacity:0.7 }} />
        <span style={{ fontFamily:'var(--sans)', fontSize:10*size, letterSpacing:'0.5em', color:'var(--gold)', paddingLeft:'0.5em' }}>LEIPZIG</span>
        <span style={{ width:18*size, height:1, background:'var(--gold)', opacity:0.7 }} />
      </div>
    </div>
  );
}

// ── Splash ───────────────────────────────────────────────
function SplashScreen({ lang, setLang, onEnter, exiting }) {
  const [ready, setReady] = useState(false);
  useEffect(() => { const t = setTimeout(() => setReady(true), 1700); return () => clearTimeout(t); }, []);
  
  return (
    <div className={`screen splash ${exiting ? 'exiting' : ''}`} onClick={onEnter} style={{
      background:'radial-gradient(120% 100% at 50% 50%, #15100e 0%, #060403 70%)',
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', cursor:'pointer',
      transition: 'opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1)',
      opacity: exiting ? 0 : 1,
      transform: exiting ? 'scale(1.05)' : 'scale(1)',
      pointerEvents: exiting ? 'none' : 'auto',
      zIndex: 80
    }}>
      <button className="hero-lang" style={{ top:'58px', transition: 'opacity 0.4s', opacity: exiting ? 0 : 1 }}
        onClick={(e) => { e.stopPropagation(); setLang(lang === 'de' ? 'en' : 'de'); }} aria-label="language">
        <Icon name="globe" size={13} />
        <span className={lang === 'de' ? 'on' : ''}>DE</span>
        <span className="lang-sep">/</span>
        <span className={lang === 'en' ? 'on' : ''}>EN</span>
      </button>
      <div className="splash-mark" style={{ transition: 'opacity 0.8s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1)', opacity: exiting ? 0 : 1, transform: exiting ? 'translateY(-30px) scale(0.9)' : 'none' }}>
        <Wordmark size={1.15} />
      </div>
      <div className={'splash-enter ' + (ready && !exiting ? 'on' : '')} style={{ transition: 'opacity 0.4s', opacity: exiting ? 0 : '' }}>
        <span>{tr1(SHIKI_STRINGS.enter, lang)}</span>
      </div>
    </div>
  );
}

// ── Hero ─────────────────────────────────────────────────
function HeroScreen({ lang, setLang, layout = 'centered', onBook, onEnter }) {
  const dragStart = useRef(null);
  const onDown = (e) => { dragStart.current = (e.touches ? e.touches[0].clientY : e.clientY); };
  const onUp = (e) => {
    if (dragStart.current == null) return;
    const y = (e.changedTouches ? e.changedTouches[0].clientY : e.clientY);
    if (dragStart.current - y > 48) onEnter();
    dragStart.current = null;
  };

  const langToggle = (
    <button className="hero-lang" onClick={(e) => { e.stopPropagation(); setLang(lang === 'de' ? 'en' : 'de'); }} aria-label="language">
      <Icon name="globe" size={13} />
      <span className={lang === 'de' ? 'on' : ''}>DE</span>
      <span className="lang-sep">/</span>
      <span className={lang === 'en' ? 'on' : ''}>EN</span>
    </button>
  );
  const cta = (
    <button className="cta-primary" onClick={onBook}>
      <span>{tr1(SHIKI_STRINGS.bookCta, lang)}</span>
      <Icon name="chevR" size={16} />
    </button>
  );
  const hint = (
    <button className="hero-hint" onClick={onEnter}>
      <Icon name="chevUp" size={18} />
      <span>{tr1(SHIKI_STRINGS.exploreHint, lang)}</span>
    </button>
  );
  const meta = (
    <div className="hero-meta">
      <div className="hero-tag">{tr1(SHIKI_STRINGS.tagline, lang)}</div>
      <div className="hero-addr">{tr1(SHIKI_STRINGS.address, lang)}</div>
    </div>
  );

  if (layout === 'split') {
    return (
      <div className="screen hero" onMouseDown={onDown} onMouseUp={onUp} onTouchStart={onDown} onTouchEnd={onUp}>
        <Photo kind="robata" src="assets/hero-salmon.jpg" pos="center 70%" style={{ position:'absolute', top:0, left:0, right:0, height:'56%' }} />
        {langToggle}
        <div className="hero-splitfade" />
        <div className="hero-panel">
          <div className="hero-fade-up" style={{ animationDelay:'.1s' }}><Wordmark size={1.0} /></div>
          <div className="hero-fade-up" style={{ animationDelay:'.25s', marginTop:18 }}>{meta}</div>
          <div className="hero-fade-up" style={{ animationDelay:'.4s', width:'100%', marginTop:26 }}>{cta}</div>
        </div>
      </div>
    );
  }

  const alignBottom = layout === 'bottom';
  return (
    <div className="screen hero" onMouseDown={onDown} onMouseUp={onUp} onTouchStart={onDown} onTouchEnd={onUp}>
      <Photo kind="robata" src="assets/hero-salmon.jpg" pos="center 62%" style={{ position:'absolute', inset:0 }} />
      <div className="hero-scrim" />
      {langToggle}
      <div className="hero-content" style={{ justifyContent: alignBottom ? 'flex-end' : 'center' }}>
        <div className="hero-fade-up" style={{ animationDelay:'.15s' }}><Wordmark size={alignBottom ? 1.0 : 1.18} /></div>
        <div className="hero-fade-up" style={{ animationDelay:'.32s', marginTop:18 }}>{meta}</div>
        <div className="hero-fade-up" style={{ animationDelay:'.5s', width:'100%', marginTop: alignBottom ? 22 : 34 }}>{cta}</div>
        {!alignBottom && <div className="hero-fade-up" style={{ animationDelay:'.66s', marginTop:'auto', paddingTop:30 }}>{hint}</div>}
        {alignBottom && <div className="hero-fade-up" style={{ animationDelay:'.66s', marginTop:16 }}>{hint}</div>}
      </div>
    </div>
  );
}

// ── Top bar (kicker + language toggle), shared by inner screens ──
function TopBar({ lang, setLang, kicker, title, jp }) {
  return (
    <div className="topbar">
      <div className="topbar-row">
        <div className="topbar-kicker">{kicker}</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>
      <div className="topbar-title-row">
        <h1 className="topbar-title">{title}</h1>
        {jp && <span className="topbar-jp">{jp}</span>}
      </div>
    </div>
  );
}

// ── Index (Home) ─────────────────────────────────────────
function IndexScreen({ lang, setLang, onNavigate }) {
  return (
    <div className="screen index">
      <TopBar lang={lang} setLang={setLang}
        kicker={tr1(SHIKI_STRINGS.indexKicker, lang)}
        title="SHIKI" jp="四季" />
      <div className="index-sub">{tr1(SHIKI_STRINGS.indexSub, lang)}</div>
      <div className="index-cards">
        {SHIKI_INDEX.map((c, i) => (
          <button key={c.id} className="feat-card stagger" style={{ animationDelay:(0.05*i)+'s' }}
            onClick={() => onNavigate(c.target)}>
            <Photo kind={c.photo} style={{ position:'absolute', inset:0 }} />
            <div className="feat-grad" />
            <div className="feat-body">
              <div className="feat-sub">{tr1(c.sub, lang)}</div>
              <div className="feat-title">{tr1(c.title, lang)}</div>
              <div className="feat-line">{tr1(c.line, lang)}</div>
            </div>
            <div className="feat-go"><Icon name="arrowUp" size={16} style={{ transform:'rotate(45deg)' }} /></div>
          </button>
        ))}
      </div>
    </div>
  );
}

function TypewriterTextLounge({ 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 LoungeScreen({ lang, setLang, onBook, onNavigate }) {
  const highlights = [
    { id: 'sushi', icon: 'utensils', title: SHIKI_STRINGS.hlSushi, desc: SHIKI_STRINGS.hlSushiDesc },
    { id: 'bar', icon: 'circle-x', title: SHIKI_STRINGS.hlBar, desc: SHIKI_STRINGS.hlBarDesc },
    { id: 'private', icon: 'users', title: SHIKI_STRINGS.hlPrivate, desc: SHIKI_STRINGS.hlPrivateDesc }
  ];
  const galleryItems = [
    { src: 'assets/lounge-cocktail.png', category: 'Drinks & Bar', type: 'tall', title: 'Signature Cocktail' },
    { src: 'assets/lounge-sashimi.jpg', category: 'Omakase', type: 'large', title: 'Premium Sashimi' },
    { src: 'assets/lounge-tuna-prep.jpg', category: 'Omakase', type: 'regular', title: 'Tuna Preparation' },
    { src: 'assets/lounge-tuna-plate.jpg', category: 'Omakase', type: 'wide', title: 'Tuna Platter' },
    { src: 'assets/lounge-wine.jpg', category: 'Drinks & Bar', type: 'regular', title: 'Fine Wine' },
    { src: 'assets/lounge-sushi-box1.jpg', category: 'Omakase', type: 'large', title: 'Sushi Box' },
    { src: 'assets/lounge-sushi-box2.png', category: 'Omakase', type: 'regular', title: 'Sushi Selection' },
    { src: 'assets/lounge-sushi-box3.jpg', category: 'Omakase', type: 'tall', title: 'Sushi Set' },
    { src: 'assets/lounge-extra1.png', category: 'Robata Grill', type: 'regular', title: 'Grilled Specialties' },
    { src: 'assets/lounge-extra2.png', category: 'Ambiance', type: 'wide', title: 'Lounge Interior' },
    { src: 'assets/lounge-extra3.jpg', category: 'Robata Grill', type: 'large', title: 'Robata Selections' },
    { src: 'assets/lounge-extra4.jpg', category: 'Drinks & Bar', type: 'tall', title: 'Craft Cocktails' },
    { src: 'assets/lounge-extra5.jpg', category: 'Ambiance', type: 'regular', title: 'Elegant Dining' },
    { src: 'assets/lounge-more1.jpg', category: 'Robata Grill', type: 'regular', title: 'Robata Delicacy' },
    { src: 'assets/lounge-more2.jpg', category: 'Omakase', type: 'regular', title: 'Chef Special' },
    { src: 'assets/lounge-more3.jpg', category: 'Drinks & Bar', type: 'wide', title: 'Bar Atmosphere' },
    { src: 'assets/lounge-more4.jpg', category: 'Robata Grill', type: 'tall', title: 'Premium Cut' },
    { src: 'assets/lounge-more5.jpg', category: 'Ambiance', type: 'large', title: 'Shiki Experience' },
    { src: 'assets/lounge-more6.jpg', category: 'Omakase', type: 'regular', title: 'Nigiri Selection' },
    { src: 'assets/lounge-more7.jpg', category: 'Robata Grill', type: 'wide', title: 'Charcoal Grilled' },
    { src: 'assets/lounge-more8.jpg', category: 'Drinks & Bar', type: 'regular', title: 'Mixology' },
    { src: 'assets/lounge-more9.jpg', category: 'Ambiance', type: 'tall', title: 'Intimate Setting' },
    { src: 'assets/lounge-more10.jpg', category: 'Omakase', type: 'regular', title: 'Fresh Catch' },
    { src: 'assets/lounge-more11.jpg', category: 'Robata Grill', type: 'large', title: 'Wagyu Beef' },
    { src: 'assets/lounge-more12.png', category: 'Drinks & Bar', type: 'regular', title: 'Aperitif' },
    { src: 'assets/lounge-more13.jpg', category: 'Ambiance', type: 'wide', title: 'Dining Room' },
    { src: 'assets/lounge-more14.jpg', category: 'Omakase', type: 'tall', title: 'Art of Sushi' },
    { src: 'assets/lounge-more15.jpg', category: 'Robata Grill', type: 'regular', title: 'Seafood Grill' },
    { src: 'assets/lounge-more16.jpg', category: 'Drinks & Bar', type: 'large', title: 'Sake Collection' },
    { src: 'assets/lounge-more17.jpg', category: 'Omakase', type: 'wide', title: 'Omakase Course' },
    { src: 'assets/lounge-more18.jpg', category: 'Ambiance', type: 'regular', title: 'Lighting Details' },
    { src: 'assets/lounge-more19.jpg', category: 'Robata Grill', type: 'tall', title: 'Fire Cooking' },
    { src: 'assets/lounge-more20.png', category: 'Drinks & Bar', type: 'regular', title: 'Evening Drinks' }
  ];

  const [selectedImage, setSelectedImage] = React.useState(null);
  const [mounted, setMounted] = React.useState(false);
  const [showText, setShowText] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        setMounted(true);
        setTimeout(() => setShowText(true), 200); // start typing after fade in begins
      });
    });
  }, []);

  return (
    <div className={`screen lounge ${mounted ? 'mounted' : ''}`}>
      <Photo kind="lounge" src="assets/hero-interior.png" className="lounge-hero-img" style={{ position:'absolute', top:0, left:0, right:0 }} />
      <div className="lounge-hero-fade" />
      <div className="lounge-hero-text" style={{
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(-15px)',
        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out'
      }}>
        <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)' }} />
            {tr1(SHIKI_STRINGS.loungeKicker, lang)}
          </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="lounge-title">{tr1(SHIKI_STRINGS.loungeTitle, lang)}</h1>
        <div className="lounge-jp">ラウンジ</div>
      </div>
      
      <div className="lounge-desc" style={{
        opacity: mounted ? 1 : 0,
        transform: mounted ? 'translateY(0)' : 'translateY(20px)',
        transition: 'opacity 0.8s ease-out 0.1s, transform 0.8s ease-out 0.1s'
      }}>
        {showText ? <TypewriterTextLounge text={tr1(SHIKI_STRINGS.loungeDesc, lang)} /> : ''}
      </div>

      <div className="lounge-desktop-wrapper">
        <div className="vt-card" style={{
          opacity: mounted ? 1 : 0,
          transform: mounted ? 'translateY(0)' : 'translateY(20px)',
          transition: 'opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s'
        }}>
          <Photo kind="vt" src="assets/vt-clean.jpg" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <div className="vt-play-btn"><Icon name="play" size={24} style={{ fill: 'var(--gold)', stroke: 'none', marginLeft: 4 }} /></div>
          <div className="vt-content">
            <div className="vt-title">{tr1(SHIKI_STRINGS.virtualTour, lang)}</div>
            <div className="vt-desc">{tr1(SHIKI_STRINGS.virtualTourDesc, lang)}</div>
            <div style={{ alignSelf: 'flex-start' }}>
              <button className="cta-outline" style={{ background: 'rgba(10,7,6,0.5)', backdropFilter: 'blur(10px)', padding: '6px 16px', fontSize: 10, borderWidth: 1 }}>
                <span>{tr1(SHIKI_STRINGS.explore3d, lang)}</span>
              </button>
            </div>
          </div>
        </div>

        <div className="hl-section">
          <div className="hl-header" style={{
            opacity: mounted ? 1 : 0,
            transform: mounted ? 'translateY(0)' : 'translateY(20px)',
            transition: 'opacity 0.8s ease-out 0.3s, transform 0.8s ease-out 0.3s'
          }}>{tr1(SHIKI_STRINGS.highlights, lang)}</div>
          <div className="hl-list">
            {highlights.map((hl, i) => (
              <div key={hl.id} className="hl-card" style={{
                opacity: mounted ? 1 : 0,
                transform: mounted ? 'translateY(0)' : 'translateY(20px)',
                transition: `opacity 0.8s ease-out ${0.4 + i * 0.1}s, transform 0.8s ease-out ${0.4 + i * 0.1}s`
              }}>
                <div className="hl-icon-wrap"><Icon name={hl.icon} size={20} /></div>
                <div>
                  <div className="hl-title">{tr1(hl.title, lang)}</div>
                  <div className="hl-desc">{tr1(hl.desc, lang)}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="gallery-section" style={{
          paddingBottom: '80px',
          opacity: mounted ? 1 : 0,
          transform: mounted ? 'translateY(0)' : 'translateY(20px)',
          transition: 'opacity 0.8s ease-out 0.7s, transform 0.8s ease-out 0.7s'
        }}>
          <div className="gallery-header">
            <h2 className="gallery-title">{tr1(SHIKI_STRINGS.gallery, lang)}</h2>
          </div>
          <div className="gallery-row bento-grid">
            {galleryItems.map((item, i) => (
              <button key={i} className={`gallery-btn span-${item.type}`} onClick={() => setSelectedImage(item.src)}>
                <Photo kind={`gal${i}`} src={item.src} className="gallery-img" />
                <div className="gallery-overlay">
                  <span className="gallery-item-title">{item.title}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      <SiteFooter lang={lang} onNavigate={onNavigate} />

      {selectedImage && (
        <div className="lightbox-overlay" onClick={() => setSelectedImage(null)}>
          <button className="lightbox-close" onClick={() => setSelectedImage(null)}>
            <Icon name="close" size={32} />
          </button>
          <img src={selectedImage} alt="Gallery view" className="lightbox-img" onClick={(e) => e.stopPropagation()} />
        </div>
      )}
    </div>
  );
}

Object.assign(window, { SplashScreen, HeroScreen, IndexScreen, LoungeScreen, TopBar, Wordmark });