// chrome.jsx — Header, Footer, Logo, shared bits
const { useState } = React;

// Tiny inline SVGs for icons
const Icon = ({ name, size = 18 }) => {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "search":return <svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>;
    case "chev":return <svg viewBox="0 0 24 24" {...s}><polyline points="6 9 12 15 18 9" /></svg>;
    case "chev-r":return <svg viewBox="0 0 24 24" {...s}><polyline points="9 6 15 12 9 18" /></svg>;
    case "arrow-r":return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case "mail":return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>;
    case "check":return <svg viewBox="0 0 24 24" {...s} strokeWidth="3"><polyline points="20 6 9 17 4 12" /></svg>;
    case "card":return <svg viewBox="0 0 24 24" {...s}><rect x="4" y="3" width="14" height="18" rx="2" /><path d="M8 8h6M8 12h4" /></svg>;
    case "info":return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="M12 8v.5M11 12h1v5h1" /></svg>;
    case "spark":return <svg viewBox="0 0 24 24" {...s}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" /></svg>;
    case "shield":return <svg viewBox="0 0 24 24" {...s}><path d="M12 3 4 6v6c0 5 3.4 8.6 8 9 4.6-.4 8-4 8-9V6l-8-3z" /></svg>;
    case "doc":return <svg viewBox="0 0 24 24" {...s}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9zM14 3v6h6" /></svg>;
    case "scale":return <svg viewBox="0 0 24 24" {...s}><path d="M12 3v18M5 8h14M7 8l-3 6a4 4 0 0 0 6 0zM17 8l-3 6a4 4 0 0 0 6 0z" /></svg>;
    case "x":return <svg viewBox="0 0 24 24" {...s}><path d="M6 6l12 12M18 6 6 18" /></svg>;
    case "plus":return <svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14" /></svg>;
    case "minus":return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14" /></svg>;
    case "ig":return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r=".5" fill="currentColor" /></svg>;
    case "x-app":return <svg viewBox="0 0 24 24" {...s}><path d="M4 4l16 16M20 4 4 20" /></svg>;
    case "globe":return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z" /></svg>;
    case "lock":return <svg viewBox="0 0 24 24" {...s}><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>;
    case "menu":return <svg viewBox="0 0 24 24" {...s}><path d="M4 7h16M4 12h16M4 17h16" /></svg>;
    case "chev-l":return <svg viewBox="0 0 24 24" {...s}><polyline points="15 6 9 12 15 18" /></svg>;
    default:return null;
  }
};

const Logo = ({ size = "md", reverse }) =>
<div className={"logo" + (size === "lg" ? "" : "")}>
    <div className="logo__mark" style={reverse ? { background: "var(--c-bg)", color: "var(--c-line)" } : {}}>L</div>
    <div className="logo__text">
      Lowsys Card Shop
      <small>CARDS · ONLY · STUDIO</small>
    </div>
  </div>;


const Header = ({ route, go }) => {
  const navItems = [
  { id: "home", label: "ホーム" },
  { id: "shop", label: "商品一覧" },
  { id: "about", label: "ショップについて" },
  { id: "faq", label: "よくある質問" }];
  const [open, setOpen] = useState(false);
  React.useEffect(() => { setOpen(false); }, [route]);

  const isActive = (id) => route === id || id === "shop" && route === "product";

  return (
    <header className={"header" + (open ? " header--open" : "")}>
      <div className="shell header__inner">
        <a onClick={() => go("home")} style={{ cursor: "pointer" }}><Logo /></a>
        <nav className="nav nav--desktop">
          {navItems.map((it) =>
            <a key={it.id}
              className={isActive(it.id) ? "active" : ""}
              onClick={() => go(it.id)}
              style={{ cursor: "pointer" }}>
              {it.label}
            </a>
          )}
        </nav>
        <button className="nav-toggle" onClick={() => setOpen((o) => !o)} aria-label="メニュー" aria-expanded={open}>
          <Icon name={open ? "x" : "menu"} size={22} />
        </button>
      </div>
      <div className={"nav-drawer" + (open ? " nav-drawer--open" : "")} aria-hidden={!open}>
        <div className="shell">
          <nav className="nav-drawer__list">
            {navItems.map((it) =>
              <a key={it.id}
                className={isActive(it.id) ? "active" : ""}
                onClick={() => { go(it.id); setOpen(false); }}>
                {it.label}
                <Icon name="chev-r" size={16} />
              </a>
            )}
          </nav>
        </div>
      </div>
    </header>);

};

const Footer = ({ go }) =>
<footer className="footer" data-screen-label="Footer">
    <div className="shell">
      <div className="footer__grid">
        <div>
          <div className="footer__logo">
            <div className="logo__mark">L</div>
            Lowsys Card Shop
          </div>
          <p className="footer__about">
            紙のカードで遊ぶ、小さなボードゲームを作って販売しています。一つひとつ受注生産で、手元に届くまでを大切に。
          </p>
        </div>
        <div className="footer__col">
          <h4>SHOP</h4>
          <ul>
            <li><a onClick={() => go("home")}>ホーム</a></li>
            <li><a onClick={() => go("shop")}>商品一覧</a></li>
            <li><a onClick={() => go("about")}>ショップについて</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>SUPPORT</h4>
          <ul>
            <li><a onClick={() => go("faq")}>よくある質問</a></li>
            <li><a href="https://forms.google.com/lowsys-card-shop-contact" target="_blank" rel="noopener">お問い合わせ</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>LEGAL</h4>
          <ul>
            <li><a onClick={() => go("tokushoho")}>特定商取引法に基づく表記</a></li>
            <li><a onClick={() => go("privacy")}>プライバシーポリシー</a></li>
            <li><a onClick={() => go("terms")}>利用規約</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <div>© 2026 Lowsys Card Shop. All rights reserved.</div>
        <div className="flex gap-12">
          <span><Icon name="lock" size={12} /> Secured by Stripe</span>
        </div>
      </div>
    </div>
  </footer>;


const MediaPH = ({ label }) =>
<div className="media-ph">
    <div className="media-ph__inner">
      <div style={{ fontSize: 10, opacity: 0.7, marginBottom: 2 }}>// product shot</div>
      {label}
    </div>
  </div>;


window.LCS = Object.assign(window.LCS || {}, { Icon, Logo, Header, Footer, MediaPH });