// Store chrome — white/premium theme, image PhotoSlot, scroll Reveal, header/footer
const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React;

function Btn({ children, variant = "primary", onClick, full, small, as = "button", href }) {
  const base = { fontFamily:"var(--font-body)", fontWeight:700, cursor:"pointer", border:0,
    borderRadius:999, padding: small ? "10px 20px" : "15px 30px", fontSize: small ? 13 : 15,
    width: full ? "100%" : "auto", transition:"all .2s ease", display:"inline-flex",
    alignItems:"center", justifyContent:"center", gap:9, textDecoration:"none", letterSpacing:".02em" };
  const variants = {
    primary: { ...base, background:"var(--primary)", color:"#fff", boxShadow:"0 10px 26px rgba(229,35,31,.26)" },
    ghost:   { ...base, background:"transparent", color:"var(--primary)", border:"2px solid var(--primary)" },
    dark:    { ...base, background:"var(--charcoal-black)", color:"var(--fg-on-dark)" },
    gold:    { ...base, background:"var(--festival-yellow)", color:"var(--sauce-brown)" },
    line:    { ...base, background:"#fff", color:"var(--ink-900)", border:"1.5px solid var(--line-300)" },
    outlineLight: { ...base, background:"rgba(255,255,255,.1)", color:"#fff", border:"1.5px solid rgba(255,255,255,.6)", backdropFilter:"blur(4px)" },
  };
  const [h, setH] = useStateC(false);
  const hov = h ? (variant==="primary" ? { background:"var(--primary-hover)", transform:"translateY(-2px)", boxShadow:"0 14px 30px rgba(229,35,31,.34)" }
    : variant==="gold" ? { transform:"translateY(-2px)", boxShadow:"0 12px 24px rgba(247,183,49,.4)" }
    : variant==="outlineLight" ? { background:"rgba(255,255,255,.2)" }
    : { transform:"translateY(-2px)", borderColor:"var(--primary)", color:"var(--primary)" }) : {};
  const Tag = as;
  return <Tag href={href} style={{ ...variants[variant], ...hov }} onClick={onClick}
    onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}>{children}</Tag>;
}

// Photo: real image when src given, else warm gradient placeholder
function PhotoSlot({ src, label, h = 220, round = 16, tone = "red", style, zoom, children, alt, onClick }) {
  const grads = {
    red:"linear-gradient(135deg,#E5231F,#D9892B)", sauce:"linear-gradient(135deg,#5A2B18,#E5231F)",
    gold:"linear-gradient(135deg,#D9892B,#F7B731)", char:"linear-gradient(135deg,#2A2522,#5A2B18)",
  };
  return (
    <div className={zoom?"ph-zoom":""} onClick={onClick}
      style={{ position:"relative", height:h, borderRadius:round, overflow:"hidden", background:grads[tone], cursor:onClick?"pointer":"default", ...style }}>
      {src
        ? <img src={src} alt={alt||label||""} referrerPolicy="no-referrer" loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }} />
        : <div style={{ position:"absolute", inset:0, opacity:.16, backgroundImage:"radial-gradient(circle at 24% 30%,#fff 8px,transparent 9px),radial-gradient(circle at 70% 66%,#fff 12px,transparent 13px),radial-gradient(circle at 86% 22%,#fff 7px,transparent 8px)" }} />}
      {children}
      {label && <span style={{ position:"absolute", left:12, bottom:12, fontFamily:"var(--font-body)", fontWeight:700, fontSize:12, color:"#fff",
        background:"rgba(0,0,0,.4)", padding:"5px 12px", borderRadius:999, letterSpacing:".03em", zIndex:1 }}>{label}</span>}
    </div>
  );
}

// Scroll-reveal wrapper
function Reveal({ children, style, delay = 0, y = 26 }) {
  const ref = useRefC(null);
  const [vis, setVis] = useStateC(false);
  useEffectC(() => {
    const el = ref.current; if (!el) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setVis(true); return; }
    const o = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setVis(true); o.disconnect(); } }), { threshold:.12, rootMargin:"0px 0px -8% 0px" });
    o.observe(el); return () => o.disconnect();
  }, []);
  return <div ref={ref} style={{ opacity: vis?1:0, transform: vis?"none":`translateY(${y}px)`,
    transition:`opacity .7s ease ${delay}ms, transform .8s cubic-bezier(.2,.7,.2,1) ${delay}ms`, ...style }}>{children}</div>;
}

function Kicker({ en, jp, light, center, sub }) {
  return (
    <div style={{ marginBottom:14, textAlign: center?"center":"left" }}>
      <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:10, justifyContent: center?"center":"flex-start" }}>
        <span style={{ width:7, height:7, borderRadius:"50%", background:"var(--primary)" }} />
        <span style={{ fontFamily:"var(--font-latin)", fontWeight:700, textTransform:"uppercase", whiteSpace:"nowrap",
          letterSpacing:".26em", color:"var(--primary)", fontSize:12 }}>{en}</span>
      </div>
      <h2 style={{ fontFamily:"var(--font-display)", fontWeight:700, letterSpacing:".06em", fontSize:"clamp(28px,3.8vw,46px)", margin:0,
        color: light ? "#fff" : "var(--ink-900)", lineHeight:1.28 }}>{jp}</h2>
      {sub && <p style={{ fontFamily:"var(--font-body)", fontSize:14.5, color: light?"rgba(255,255,255,.8)":"var(--ink-500)", marginTop:12, maxWidth:520, marginLeft:center?"auto":0, marginRight:center?"auto":0, lineHeight:1.8 }}>{sub}</p>}
    </div>
  );
}

function DemoBar({ lang, setLang }) {
  return (
    <div className="demobar">
      <a className="back" href="../index.html"><span style={{fontSize:15}}>&larr;</span> ご提案に戻る</a>
      <span className="tier">PREMIUM ¥150,000</span>
      <span className="aeo" title="schema.org 構造化データ（Restaurant / Menu / FAQ）でAI検索・Googleに対応"><span className="d"></span>AI検索対応 (AEO)</span>
      <span style={{color:"#8a807a",fontWeight:500}} className="demo-label">店舗サイト プレビュー</span>
      <span className="langtoggle">
        <button className={lang==="ja"?"on":""} onClick={()=>setLang("ja")}>日本語</button>
        <button className={lang==="en"?"on":""} onClick={()=>setLang("en")}>EN</button>
      </span>
    </div>
  );
}

function Header({ t, lang, setLang, cartCount, onCart, onReserve }) {
  const [scr, setScr] = useStateC(false);
  useEffectC(() => {
    const f = () => setScr(window.scrollY > 40);
    window.addEventListener("scroll", f, { passive:true }); f();
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [["menu",t.navMenu],["craft",t.navCraft],["plan",t.navPlan],["news",t.navNews],["shops",t.navShops]];
  const go = (id) => { const el=document.getElementById(id); if(el) window.scrollTo({top: el.offsetTop-58, behavior:"smooth"}); };
  return (
    <header style={{ position:"sticky", top:0, zIndex:50, background:"rgba(255,255,255,.92)", backdropFilter:"blur(10px)",
      borderBottom:"1px solid "+(scr?"var(--line-200)":"transparent"), boxShadow: scr?"0 2px 18px rgba(90,43,24,.07)":"none", transition:"all .25s ease" }}>
      <div style={{ maxWidth:1200, margin:"0 auto", padding:"0 24px", height:64, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
        <div style={{ display:"flex", alignItems:"center", gap:12, cursor:"pointer" }} onClick={()=>window.scrollTo({top:0,behavior:"smooth"})}>
          <div style={{ width:40, height:40, borderRadius:"50%", border:"2px solid var(--primary)", display:"flex", alignItems:"center", justifyContent:"center",
            fontFamily:"var(--font-display)", fontWeight:700, color:"var(--primary)", fontSize:13, background:"#fff" }}>たこ</div>
          <span style={{ fontFamily:"var(--font-display)", fontWeight:700, color:"var(--ink-900)", fontSize:21, letterSpacing:".05em" }}>たこスタ</span>
        </div>
        <nav style={{ display:"flex", alignItems:"center", gap:2 }} className="hp-nav">
          {links.map(([k,l]) => (
            <a key={k} onClick={()=>go(k)} style={{ cursor:"pointer", padding:"8px 14px", fontFamily:"var(--font-body)", fontWeight:700, fontSize:14, borderRadius:999, color:"var(--ink-700)" }}>{l}</a>
          ))}
          <span className="langtoggle light" style={{marginLeft:8}}>
            <button className={lang==="ja"?"on":""} onClick={()=>setLang("ja")}>JP</button>
            <button className={lang==="en"?"on":""} onClick={()=>setLang("en")}>EN</button>
          </span>
          <button onClick={onCart} style={{ position:"relative", background:"transparent", border:0, color:"var(--ink-900)", cursor:"pointer", padding:"8px 10px", marginLeft:4 }} aria-label="cart">
            <Icon name="cart" size={22} />
            {cartCount>0 && <span style={{ position:"absolute", top:0, right:2, background:"var(--primary)", color:"#fff", fontSize:11, fontWeight:800, minWidth:18, height:18, borderRadius:999, display:"flex", alignItems:"center", justifyContent:"center", padding:"0 4px" }}>{cartCount}</span>}
          </button>
          <Btn variant="primary" small onClick={onReserve}>{t.reserve}</Btn>
        </nav>
      </div>
    </header>
  );
}

function Footer({ t }) {
  return (
    <footer style={{ background:"var(--charcoal-black)", color:"var(--fg-on-dark-2)", padding:"56px 24px 32px", textAlign:"center" }}>
      <div style={{ fontFamily:"var(--font-display)", fontWeight:700, color:"var(--festival-yellow)", fontSize:26, letterSpacing:".05em", marginBottom:16 }}>{t.footTag}</div>
      <div style={{ display:"flex", gap:14, justifyContent:"center", margin:"20px 0 22px" }}>
        <a href={"tel:"+window.STORE.tel} style={{ width:44, height:44, borderRadius:"50%", border:"1.5px solid #4a423b", color:"#EFE6DA", display:"flex", alignItems:"center", justifyContent:"center" }}><Icon name="phone" size={18} /></a>
        <a href={window.STORE.instagram} target="_blank" rel="noopener" style={{ width:44, height:44, borderRadius:"50%", border:"1.5px solid #4a423b", color:"#EFE6DA", display:"flex", alignItems:"center", justifyContent:"center" }}><Icon name="insta" size={18} /></a>
      </div>
      <div style={{ fontFamily:"var(--font-latin)", fontWeight:700, letterSpacing:".05em", fontSize:15, color:"#EFE6DA" }}>{window.STORE.tel}</div>
      <div style={{ fontSize:12, marginTop:16, color:"#7a6f64" }}>株式会社Y.N.N.Y　名古屋市中区栄3-9-10 三星ビル2F</div>
      <div style={{ fontSize:12, marginTop:6, color:"#5e554c" }}>© 株式会社Y.N.N.Y. All Rights Reserved.</div>
    </footer>
  );
}

Object.assign(window, { Btn, PhotoSlot, Reveal, Kicker, DemoBar, Header, Footer });