// Store sections — image-led, white, interactive
const { useState: useStateS } = React;
const IMG = window.STORE.img;

function Hero({ t, lang, onReserve }) {
  const go = (id) => { const el=document.getElementById(id); if(el) window.scrollTo({top: el.offsetTop-58, behavior:"smooth"}); };
  return (
    <section style={{ position:"relative", minHeight:"calc(100vh - 64px)", display:"flex", alignItems:"flex-end", overflow:"hidden", background:"#1a1714" }}>
      <img src={IMG.hero} alt="" referrerPolicy="no-referrer" className="kenburns"
        style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }} />
      <div style={{ position:"absolute", inset:0, background:"linear-gradient(180deg,rgba(21,21,21,.46) 0%,rgba(21,21,21,.1) 38%,rgba(21,21,21,.34) 70%,rgba(21,21,21,.82) 100%)" }} />
      <div style={{ position:"relative", zIndex:2, maxWidth:1200, margin:"0 auto", padding:"0 26px 70px", width:"100%" }}>
        <div className="rise" style={{ fontFamily:"var(--font-accent)", fontWeight:700, color:"var(--festival-yellow)", fontSize:14, marginBottom:16, letterSpacing:".05em" }}>{t.heroKicker}</div>
        <h1 className="rise d1" style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".05em", fontSize:"clamp(40px,6.6vw,82px)", lineHeight:1.14, color:"#FFF8EC", margin:0, textShadow:"0 4px 26px rgba(0,0,0,.5)" }}>
          {t.heroTitle[0]}<br/><span style={{ color:"var(--festival-yellow)" }}>{t.heroTitle[1]}</span>
        </h1>
        <p className="rise d2" style={{ fontFamily:"var(--font-body)", fontWeight:500, color:"#F0E2D2", fontSize:16, marginTop:20, maxWidth:480, lineHeight:1.85 }}>{t.heroSub}</p>
        <div className="rise d3" style={{ display:"flex", gap:13, marginTop:28, flexWrap:"wrap" }}>
          <Btn variant="primary" onClick={onReserve}><Icon name="cal" size={18} />{t.heroCta1}</Btn>
          <Btn variant="outlineLight" onClick={()=>go("menu")}>{t.heroCta2}<Icon name="arrR" size={18} /></Btn>
        </div>
      </div>
      <div style={{ position:"absolute", left:0, right:0, bottom:18, textAlign:"center", zIndex:2 }}>
        <span style={{ display:"inline-block", width:1, height:34, background:"rgba(255,255,255,.5)" }} className="scrollcue" />
      </div>
    </section>
  );
}

function Marquee() {
  const words = ["ふわとろ TAKOYAKI","おでん ODEN","ハイボール HIGHBALL","タコパ食べ放題","名古屋・栄／名駅","SINCE 1948"];
  const row = [...words, ...words];
  return (
    <div style={{ background:"var(--charcoal-black)", overflow:"hidden", padding:"14px 0", borderTop:"3px solid var(--primary)" }}>
      <div className="marquee" style={{ display:"flex", gap:0, whiteSpace:"nowrap", width:"max-content" }}>
        {row.map((w,i)=>(
          <span key={i} style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:18, letterSpacing:".08em", color:"#FFF3DF", padding:"0 28px", display:"inline-flex", alignItems:"center", gap:28 }}>
            {w}<span style={{ width:7, height:7, borderRadius:"50%", background:"var(--festival-yellow)" }} /></span>
        ))}
      </div>
    </div>
  );
}

function Craft({ t, lang }) {
  const cards = [["flame",t.craft1t,t.craft1b],["star",t.craft2t,t.craft2b],["clock",t.craft3t,t.craft3b]];
  return (
    <section id="craft" style={{ background:"var(--white-plate)", padding:"96px 26px" }}>
      <div style={{ maxWidth:1140, margin:"0 auto", display:"grid", gridTemplateColumns:"1.05fr .95fr", gap:60, alignItems:"center" }} className="craft-grid">
        <Reveal><PhotoSlot src={IMG.takoyaki} zoom h={440} round={20} alt="秘伝のたこ焼き" /></Reveal>
        <Reveal delay={120}>
          <Kicker en={t.craftKicker} jp={t.craftTitle} />
          <p style={{ fontFamily:"var(--font-body)", fontSize:16, lineHeight:2, color:"var(--ink-700)", margin:"0 0 30px", maxWidth:440 }}>{t.craftBody}</p>
          <div style={{ display:"flex", flexDirection:"column", gap:18 }}>
            {cards.map(([ic,h,b],i)=>(
              <div key={i} style={{ display:"flex", gap:16, alignItems:"flex-start" }}>
                <div style={{ flexShrink:0, width:46, height:46, borderRadius:"50%", background:"var(--red-50)", color:"var(--primary)", display:"flex", alignItems:"center", justifyContent:"center" }}><Icon name={ic} size={22} /></div>
                <div>
                  <div style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:16, color:"var(--ink-900)", marginBottom:3 }}>{h}</div>
                  <div style={{ fontSize:13.5, color:"var(--ink-500)", lineHeight:1.7 }}>{b}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Signature({ t, lang, onLightbox }) {
  const items = [
    { src:IMG.takoyaki, h:t.sig1t, b:t.sig1b, big:true },
    { src:IMG.takopa,   h:t.sig2t, b:t.sig2b },
    { src:IMG.oden,     h:t.sig3t, b:t.sig3b },
    { src:IMG.highball, h:t.sig4t, b:t.sig4b },
  ];
  return (
    <section style={{ background:"var(--cream-100)", padding:"96px 26px" }}>
      <div style={{ maxWidth:1140, margin:"0 auto" }}>
        <Reveal><Kicker en={t.sigKicker} jp={t.sigTitle} center /></Reveal>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(12,1fr)", gap:18, marginTop:40 }} className="sig-grid">
          {items.map((it,i)=>(
            <Reveal key={i} delay={i*90} style={{ gridColumn: it.big ? "span 6" : "span 3" }}>
              <div className="sig-card" onClick={()=>onLightbox(it.src)}
                style={{ position:"relative", borderRadius:18, overflow:"hidden", cursor:"pointer", height: it.big?420:420, boxShadow:"var(--shadow-card)" }}>
                <img src={it.src} alt={it.h} referrerPolicy="no-referrer" loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
                <div style={{ position:"absolute", inset:0, background:"linear-gradient(180deg,transparent 38%,rgba(21,21,21,.84) 100%)" }} />
                <div style={{ position:"absolute", left:0, right:0, bottom:0, padding:"22px 22px 24px" }}>
                  <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize: it.big?26:19, color:"#FFF8EC", letterSpacing:".03em", lineHeight:1.3 }}>{it.h}</div>
                  <div style={{ fontFamily:"var(--font-body)", fontSize:13, color:"rgba(255,255,255,.82)", marginTop:6, lineHeight:1.6 }}>{it.b}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlanBanner({ t, onReserve }) {
  return (
    <section id="plan" style={{ background:"var(--charcoal-black)", position:"relative", overflow:"hidden" }}>
      <div style={{ maxWidth:1280, margin:"0 auto", display:"grid", gridTemplateColumns:"1fr 1fr", alignItems:"stretch", minHeight:420 }} className="plan-grid">
        <div className="ph-zoom" style={{ position:"relative", overflow:"hidden", minHeight:300 }}>
          <img src={IMG.takopa} alt="タコパ食べ放題" referrerPolicy="no-referrer" loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
          <div style={{ position:"absolute", inset:0, background:"linear-gradient(90deg,transparent 60%,rgba(21,21,21,.9))" }} className="plan-fade" />
        </div>
        <div style={{ display:"flex", flexDirection:"column", justifyContent:"center", padding:"64px 56px" }}>
          <Reveal>
            <div style={{ display:"inline-block", fontFamily:"var(--font-accent)", fontWeight:700, fontSize:12, letterSpacing:".22em", color:"var(--festival-yellow)", border:"1px solid rgba(247,183,49,.5)", borderRadius:999, padding:"5px 16px", marginBottom:20, width:"fit-content" }}>{t.plan}</div>
            <h2 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".05em", fontSize:"clamp(32px,4.2vw,50px)", color:"#FFF8EC", margin:"0 0 14px" }}>{t.planTitle}</h2>
            <p style={{ fontFamily:"var(--font-body)", fontSize:16, color:"var(--fg-on-dark-2)", lineHeight:1.85, margin:"0 0 26px", maxWidth:420 }}>{t.planSub}</p>
            <div style={{ display:"flex", alignItems:"baseline", gap:8, marginBottom:26 }}>
              <span style={{ fontFamily:"var(--font-latin)", fontWeight:800, fontSize:"clamp(48px,7vw,68px)", color:"var(--festival-yellow)", lineHeight:1 }}>{t.planPrice}</span>
              <span style={{ fontSize:14, color:"var(--fg-on-dark-2)" }}>{t.planUnit}</span>
            </div>
            <div><Btn variant="gold" onClick={onReserve}><Icon name="cal" size={18} />{t.planCta}</Btn></div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Gallery({ t, lang, onLightbox }) {
  const imgs = IMG.g;
  const spans = ["span 6","span 3","span 3","span 4","span 4","span 4","span 6","span 6"];
  return (
    <section style={{ background:"var(--white-plate)", padding:"96px 26px" }}>
      <div style={{ maxWidth:1140, margin:"0 auto" }}>
        <Reveal><Kicker en={t.galleryKicker} jp={t.galleryTitle} center /></Reveal>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(12,1fr)", gap:14, marginTop:40 }} className="gal-grid">
          {imgs.map((src,i)=>(
            <Reveal key={i} delay={(i%4)*70} style={{ gridColumn: spans[i]||"span 3" }}>
              <div className="ph-zoom" onClick={()=>onLightbox(src)} style={{ position:"relative", borderRadius:14, overflow:"hidden", cursor:"pointer", height: spans[i]==="span 6"?260:200, boxShadow:"var(--shadow-card)" }}>
                <img src={src} alt="" referrerPolicy="no-referrer" loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Atmosphere({ t, lang, onReserve }) {
  const stats = [t.atmo1,t.atmo2,t.atmo3,t.atmo4];
  return (
    <section style={{ position:"relative", overflow:"hidden", background:"#1a1714" }}>
      <img src={IMG.g[5]} alt="" referrerPolicy="no-referrer" loading="lazy" style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover", opacity:.42 }} />
      <div style={{ position:"absolute", inset:0, background:"linear-gradient(90deg,rgba(21,21,21,.9) 0%,rgba(21,21,21,.62) 100%)" }} />
      <div style={{ position:"relative", zIndex:2, maxWidth:1140, margin:"0 auto", padding:"96px 26px" }}>
        <Reveal style={{ maxWidth:560 }}>
          <Kicker en={t.atmoKicker} jp={t.atmoTitle} light />
          <p style={{ fontFamily:"var(--font-body)", fontSize:16, color:"rgba(255,248,236,.86)", lineHeight:2, margin:"6px 0 30px" }}>{t.atmoBody}</p>
          <div style={{ display:"flex", flexWrap:"wrap", gap:10, marginBottom:32 }}>
            {stats.map((s,i)=>(
              <span key={i} style={{ fontSize:13, fontWeight:700, color:"#FFF8EC", background:"rgba(255,255,255,.1)", border:"1px solid rgba(255,255,255,.2)", padding:"8px 16px", borderRadius:999 }}>{s}</span>
            ))}
          </div>
          <Btn variant="primary" onClick={onReserve}><Icon name="cal" size={18} />{t.visitCta}</Btn>
        </Reveal>
      </div>
    </section>
  );
}

function Shops({ t, lang, onReserve }) {
  const shops = window.STORE.shops;
  return (
    <section id="shops" style={{ background:"var(--cream-100)", padding:"96px 26px" }}>
      <div style={{ maxWidth:1140, margin:"0 auto" }}>
        <Reveal><Kicker en={t.shopsKicker} jp={t.shopsTitle} center /></Reveal>
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:26, marginTop:40 }} className="shops-grid">
          {shops.map((s,idx)=>(
            <Reveal key={s.id} delay={idx*100}>
              <div style={{ background:"#fff", border:"1px solid var(--line-200)", borderRadius:18, overflow:"hidden", boxShadow:"var(--shadow-card)" }}>
                <PhotoSlot src={IMG.g[idx===0?6:7]} h={180} round={0} label={s.note[lang]} zoom />
                <div style={{ padding:"22px 24px 24px" }}>
                  <h3 style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:22, color:"var(--ink-900)", margin:"0 0 16px", letterSpacing:".03em" }}>{s.name[lang]}</h3>
                  <Info icon="pin" label={t.access} value={s.access[lang]} />
                  <Info icon="clock" label={t.hours} value={s.hours[lang]} latin />
                  <div style={{ fontSize:12.5, color:"var(--ink-400)", margin:"4px 0 16px" }}>{s.addr[lang]}</div>
                  <div style={{ position:"relative", height:120, borderRadius:12, overflow:"hidden", marginBottom:16, background:"#eef1ee",
                    backgroundImage:"repeating-linear-gradient(0deg,#e2e6e1 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,#e2e6e1 0 1px,transparent 1px 26px)" }}>
                    <div style={{ position:"absolute", left:"50%", top:"50%", transform:"translate(-50%,-100%)", color:"var(--primary)" }}><Icon name="pin" size={34} fill="var(--primary)" stroke="#fff" /></div>
                    <span style={{ position:"absolute", left:10, bottom:8, fontSize:11, fontWeight:700, color:"var(--ink-500)", background:"rgba(255,255,255,.85)", padding:"3px 9px", borderRadius:999 }}>Google Map</span>
                  </div>
                  <div style={{ display:"flex", gap:10 }}>
                    <Btn variant="ghost" small onClick={onReserve}><Icon name="cal" size={16} />{t.reserveHere}</Btn>
                    <Btn variant="dark" small as="a" href={"tel:"+window.STORE.tel}><Icon name="phone" size={16} />{window.STORE.tel}</Btn>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
function Info({ icon, label, value, latin }) {
  return (
    <div style={{ display:"flex", gap:9, alignItems:"flex-start", marginBottom:9 }}>
      <span style={{ color:"var(--primary)", flexShrink:0, marginTop:2 }}><Icon name={icon} size={16} /></span>
      <div>
        <span style={{ fontSize:11, fontWeight:700, color:"var(--ink-400)", marginRight:8 }}>{label}</span>
        <span style={{ fontFamily: latin?"var(--font-latin)":"var(--font-body)", fontWeight: latin?700:600, fontSize:13.5, color:"var(--ink-800)" }}>{value}</span>
      </div>
    </div>
  );
}

function Quote({ lang }) {
  return (
    <section className="parallax" style={{ backgroundImage:`linear-gradient(rgba(21,21,21,.58),rgba(21,21,21,.74)),url('${IMG.g[2]}')`, padding:"clamp(96px,16vw,150px) 26px", textAlign:"center" }}>
      <Reveal>
        <div style={{ fontFamily:"var(--font-latin)", fontWeight:700, color:"var(--festival-yellow)", fontSize:13, letterSpacing:".28em", marginBottom:20 }}>LIVE EXPERIENCE</div>
        <h2 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".06em", fontSize:"clamp(28px,4.8vw,54px)", color:"#FFF8EC", margin:0, lineHeight:1.42, textShadow:"0 3px 22px rgba(0,0,0,.55)" }}>
          {lang==="ja" ? <>味は、ライブで決まる。<br/>鉄板を囲む、名古屋の夜。</> : <>Flavor comes alive.<br/>A Nagoya night around the iron plate.</>}
        </h2>
      </Reveal>
    </section>
  );
}

function News({ t, lang }) {
  const news = window.STORE.news;
  const feat = news[0];
  const rest = news.slice(1);
  const isNew = (n) => n.cat.en === "New";
  return (
    <section id="news" style={{ background:"var(--cream-100)", padding:"96px 26px" }}>
      <div style={{ maxWidth:1140, margin:"0 auto" }}>
        <Reveal><Kicker en={t.newsKicker} jp={t.newsTitle} center /></Reveal>
        <div style={{ display:"grid", gridTemplateColumns:"1.1fr 1fr", gap:32, marginTop:40, alignItems:"start" }} className="news-grid">
          <Reveal>
            <div className="ph-zoom" style={{ background:"#fff", border:"1px solid var(--line-200)", borderRadius:18, overflow:"hidden", boxShadow:"var(--shadow-card)" }}>
              <div style={{ position:"relative", height:240, overflow:"hidden" }}>
                <img src={feat.img} referrerPolicy="no-referrer" loading="lazy" alt="" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
                <span style={{ position:"absolute", top:14, left:14, fontFamily:"var(--font-accent)", fontWeight:700, background:"var(--primary)", color:"#fff", padding:"4px 14px", borderRadius:999, fontSize:13 }}>{feat.cat[lang]}</span>
              </div>
              <div style={{ padding:"22px 24px 24px" }}>
                <div style={{ fontFamily:"var(--font-latin)", fontWeight:700, fontSize:13, color:"var(--ink-400)", letterSpacing:".06em" }}>{feat.date}</div>
                <h3 style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:23, color:"var(--ink-900)", letterSpacing:".03em", margin:"8px 0 10px", lineHeight:1.36 }}>{feat.title[lang]}</h3>
                <p style={{ fontFamily:"var(--font-body)", fontSize:14.5, color:"var(--ink-700)", lineHeight:1.8, margin:0 }}>{feat.body[lang]}</p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div>
              {rest.map((n,i)=>(
                <div key={i} style={{ display:"flex", gap:16, padding:"20px 4px", borderBottom:"1px solid var(--line-200)", alignItems:"flex-start" }}>
                  <div style={{ flexShrink:0, textAlign:"center", minWidth:66 }}>
                    <div style={{ fontFamily:"var(--font-latin)", fontWeight:800, fontSize:13, color:"var(--sauce-brown)" }}>{n.date}</div>
                    <span style={{ display:"inline-block", marginTop:6, fontSize:11, fontWeight:700,
                      color: isNew(n) ? "#04A459" : "var(--primary)", background: isNew(n) ? "#E9F7EF" : "var(--red-50)", padding:"3px 10px", borderRadius:999 }}>{n.cat[lang]}</span>
                  </div>
                  <div>
                    <h4 style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:15.5, color:"var(--ink-900)", margin:"0 0 5px", lineHeight:1.45 }}>{n.title[lang]}</h4>
                    <p style={{ fontFamily:"var(--font-body)", fontSize:13, color:"var(--ink-500)", lineHeight:1.7, margin:0 }}>{n.body[lang]}</p>
                  </div>
                </div>
              ))}
              <div style={{ marginTop:18, textAlign:"right" }}>
                <a href={window.STORE.instagram} target="_blank" rel="noopener" style={{ fontFamily:"var(--font-body)", fontWeight:700, fontSize:13, color:"var(--primary)", display:"inline-flex", alignItems:"center", gap:6 }}>{t.newsMore}<Icon name="arrR" size={15} /></a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Lightbox({ src, onClose, t }) {
  if (!src) return null;
  return (
    <div onClick={onClose} style={{ position:"fixed", inset:0, background:"rgba(12,10,9,.92)", zIndex:120, display:"flex", alignItems:"center", justifyContent:"center", padding:"30px" }}>
      <button onClick={onClose} style={{ position:"absolute", top:20, right:24, background:"rgba(255,255,255,.12)", border:0, color:"#fff", width:44, height:44, borderRadius:"50%", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center" }}><Icon name="x" size={24} /></button>
      <img src={src} alt="" referrerPolicy="no-referrer" onClick={e=>e.stopPropagation()} style={{ maxWidth:"min(900px,94vw)", maxHeight:"86vh", borderRadius:14, boxShadow:"0 30px 80px rgba(0,0,0,.6)", objectFit:"contain" }} />
    </div>
  );
}

function ReserveModal({ open, onClose, t, lang }) {
  const [done, setDone] = useStateS(false);
  const [shop, setShop] = useStateS("sakae");
  const [guests, setGuests] = useStateS(2);
  const [time, setTime] = useStateS("19:00");
  const times = ["17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30"];
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position:"fixed", inset:0, background:"rgba(21,21,21,.55)", zIndex:110, display:"flex", alignItems:"center", justifyContent:"center", padding:"20px" }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:"#fff", borderRadius:20, width:"min(520px,96vw)", maxHeight:"92vh", overflowY:"auto", boxShadow:"var(--shadow-hover)" }}>
        <div style={{ position:"relative", padding:"24px 28px", background:"var(--charcoal-black)", borderRadius:"20px 20px 0 0" }}>
          <div style={{ fontFamily:"var(--font-accent)", fontWeight:700, color:"var(--festival-yellow)", fontSize:13, letterSpacing:".2em" }}>{t.reserveKicker}</div>
          <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:26, color:"#FFF8EC", marginTop:4, letterSpacing:".04em" }}>{t.reserveTitle}</div>
          <button onClick={onClose} style={{ position:"absolute", top:20, right:20, background:"transparent", border:0, color:"#EFE6DA", cursor:"pointer" }}><Icon name="x" size={22} /></button>
        </div>
        {done ? (
          <div style={{ padding:"44px 30px", textAlign:"center" }}>
            <div style={{ width:78, height:78, borderRadius:"50%", background:"var(--primary)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", margin:"0 auto 20px", boxShadow:"var(--shadow-pop)" }}><Icon name="check" size={40} /></div>
            <div style={{ fontFamily:"var(--font-display)", fontWeight:700, fontSize:22, color:"var(--ink-900)", marginBottom:12, letterSpacing:".03em" }}>{t.rDone}</div>
            <div style={{ fontSize:14, color:"var(--ink-700)", lineHeight:1.8, maxWidth:340, margin:"0 auto" }}>{t.rDoneSub}</div>
            <div style={{ marginTop:24 }}><Btn variant="ghost" small onClick={()=>{ setDone(false); onClose(); }}>{t.close}</Btn></div>
          </div>
        ) : (
          <div style={{ padding:"24px 28px 28px" }}>
            <FieldS label={t.rShop}>
              <div style={{ display:"flex", gap:8 }}>
                {window.STORE.shops.map(s=>(
                  <button key={s.id} onClick={()=>setShop(s.id)} style={{ flex:1, cursor:"pointer", fontWeight:700, fontSize:13, padding:"11px 8px", borderRadius:12,
                    border:"1.5px solid", borderColor: shop===s.id?"var(--primary)":"var(--line-300)", background: shop===s.id?"var(--red-50)":"#fff", color: shop===s.id?"var(--primary)":"var(--ink-700)" }}>{s.name[lang]}</button>
                ))}
              </div>
            </FieldS>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
              <FieldS label={t.rDate}><input type="date" style={inS} defaultValue="2026-06-20" /></FieldS>
              <FieldS label={t.rGuests}>
                <div style={{ display:"flex", alignItems:"center", gap:12, padding:"7px 14px", border:"1.5px solid var(--line-300)", borderRadius:12, background:"#fff" }}>
                  <button onClick={()=>setGuests(Math.max(1,guests-1))} style={qtyBtn}><Icon name="minus" size={15} /></button>
                  <span style={{ flex:1, textAlign:"center", fontWeight:700 }}>{guests} {t.rGuestsUnit}</span>
                  <button onClick={()=>setGuests(guests+1)} style={qtyBtn}><Icon name="plus" size={15} /></button>
                </div>
              </FieldS>
            </div>
            <FieldS label={t.rTime}>
              <div style={{ display:"flex", gap:7, flexWrap:"wrap" }}>
                {times.map(tm=>(
                  <button key={tm} onClick={()=>setTime(tm)} style={{ cursor:"pointer", fontFamily:"var(--font-latin)", fontWeight:700, fontSize:13, padding:"7px 12px", borderRadius:999,
                    border:"1.5px solid", borderColor: time===tm?"var(--primary)":"var(--line-300)", background: time===tm?"var(--primary)":"#fff", color: time===tm?"#fff":"var(--ink-700)" }}>{tm}</button>
                ))}
              </div>
            </FieldS>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
              <FieldS label={t.rName}><input style={inS} placeholder={lang==="ja"?"名古屋 太郎":"Taro Nagoya"} /></FieldS>
              <FieldS label={t.rTel}><input style={inS} placeholder="090-1234-5678" /></FieldS>
            </div>
            <div style={{ marginTop:8 }}><Btn variant="primary" full onClick={()=>setDone(true)}><Icon name="cal" size={18} />{t.rSubmit}</Btn></div>
          </div>
        )}
      </div>
    </div>
  );
}
const inS = { width:"100%", boxSizing:"border-box", fontFamily:"var(--font-body)", fontSize:15, padding:"11px 14px", border:"1.5px solid var(--line-300)", borderRadius:12, background:"#fff", color:"var(--ink-900)" };
const qtyBtn = { width:28, height:28, borderRadius:"50%", border:"1.5px solid var(--line-300)", background:"#fff", cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"center", color:"var(--ink-700)" };
function FieldS({ label, children }) {
  return (
    <div style={{ marginBottom:16 }}>
      <label style={{ display:"block", fontSize:12.5, fontWeight:700, color:"var(--ink-700)", marginBottom:8 }}>{label}</label>
      {children}
    </div>
  );
}

Object.assign(window, { Hero, Marquee, Craft, Signature, PlanBanner, Gallery, Atmosphere, Shops, Quote, News, Lightbox, ReserveModal });