// ET Storefront concept — shared chrome (header, tab bar, footer, LINE buttons)
const { Icon, LineGlyph } = window;

const LINE_GREEN = "#06C755";

// ── Top header: menu · centered ET logo · search + bag ─────────────────────
function AppHeader({ nav, cartCount = 0, onMenu }) {
  return (
    <div
      style={{
        position: "sticky",
        top: 0,
        zIndex: 30,
        background: "var(--surface-page)",
        borderBottom: "1px solid var(--line-hairline)",
        paddingTop: 48,
      }}
    >
      <div
        style={{
          height: 50,
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr",
          alignItems: "center",
          padding: "0 16px",
        }}
      >
        <button className="et-icbtn" onClick={onMenu} aria-label="เมนู" style={{ justifySelf: "start" }}>
          <Icon name="menu" size={22} />
        </button>
        <button onClick={() => nav("home")} className="et-logobtn" aria-label="ET หน้าแรก">
          <img src="et-mark-gold.svg" alt="" style={{ height: 24, display: "block" }} />
          <span
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 21,
              letterSpacing: "0.14em",
              lineHeight: 1,
              marginTop: 1,
            }}
          >
            ET
          </span>
        </button>
        <div style={{ display: "flex", gap: 2, justifySelf: "end" }}>
          <button className="et-icbtn" onClick={() => nav("collection")} aria-label="ค้นหา">
            <Icon name="search" size={21} />
          </button>
          <button className="et-icbtn" onClick={() => nav("cart")} aria-label="ตะกร้า" style={{ position: "relative" }}>
            <Icon name="bag" size={21} />
            {cartCount > 0 ? <span className="et-dot">{cartCount}</span> : null}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Bottom tab — home / collection nav (hidden on PDP & cart) ──────────────
function BottomTab({ active, nav, cartCount = 0 }) {
  const items = [
    { id: "home", label: "หน้าแรก", icon: "home" },
    { id: "collection", label: "ช้อป", icon: "grid" },
    { id: "saved", label: "ถูกใจ", icon: "heart" },
    { id: "cart", label: "ตะกร้า", icon: "bag" },
  ];
  return (
    <div
      style={{
        position: "sticky",
        bottom: 0,
        zIndex: 30,
        background: "rgba(251,247,241,0.94)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        borderTop: "1px solid var(--line-hairline)",
        display: "flex",
        padding: "8px 8px 30px",
      }}
    >
      {items.map((it) => {
        const on = active === it.id;
        return (
          <button
            key={it.id}
            onClick={() => nav(it.id === "saved" ? "collection" : it.id)}
            style={{
              flex: 1,
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: 3,
              background: "none",
              border: "none",
              cursor: "pointer",
              color: on ? "var(--et-brown)" : "var(--text-tertiary)",
              position: "relative",
            }}
          >
            <span style={{ position: "relative" }}>
              <Icon name={it.icon} size={21} stroke={on ? "var(--et-brown)" : "var(--text-tertiary)"} />
              {it.id === "cart" && cartCount > 0 ? <span className="et-dot et-dot--tab">{cartCount}</span> : null}
            </span>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.02em" }}>{it.label}</span>
          </button>
        );
      })}
    </div>
  );
}

// ── LINE buttons (third-party brand exception: LINE green) ─────────────────
function LineButton({ children, variant = "solid", onClick, size = "md" }) {
  const pad = size === "lg" ? "14px 18px" : "11px 16px";
  const fs = size === "lg" ? 15 : 14;
  const base = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 9,
    width: "100%",
    border: "none",
    cursor: "pointer",
    borderRadius: "var(--r-2)",
    fontFamily: "var(--font-body)",
    fontWeight: 500,
    fontSize: fs,
    padding: pad,
    letterSpacing: "0.01em",
    whiteSpace: "nowrap",
    transition: "filter var(--dur-1) var(--ease)",
  };
  const skin =
    variant === "outline"
      ? { background: "var(--et-white)", color: "#111", border: "1px solid var(--line-strong)" }
      : { background: LINE_GREEN, color: "#fff" };
  return (
    <button onClick={onClick} style={{ ...base, ...skin }} onMouseDown={(e) => (e.currentTarget.style.filter = "brightness(0.95)")} onMouseUp={(e) => (e.currentTarget.style.filter = "none")} onMouseLeave={(e) => (e.currentTarget.style.filter = "none")}>
      <LineGlyph size={18} color={variant === "outline" ? LINE_GREEN : "#fff"} />
      {children}
    </button>
  );
}

// ── Black inverse footer ───────────────────────────────────────────────────
function Footer({ nav }) {
  const linkCols = [
    { h: "ช้อป", items: ["ของเข้าใหม่", "ของขึ้นหิ้ง", "ของมีชีวิต", "ของหายาก"] },
    { h: "บริการ", items: ["จัดส่ง & ติดตาม", "รับประกันของแท้", "คืน/เปลี่ยนสินค้า", "ถามทาง LINE"] },
    { h: "เกี่ยวกับ", items: ["เรื่องของ ET", "วิธีเราคัดของ", "รีวิวลูกค้า", "ติดต่อเรา"] },
  ];
  return (
    <div style={{ background: "var(--surface-inverse)", color: "var(--text-on-inverse)", padding: "40px 22px 30px" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, textAlign: "center" }}>
        <img src="et-mark-gold.svg" alt="" style={{ height: 46, display: "block" }} />
        <div style={{ fontFamily: "var(--font-display)", fontSize: 28, letterSpacing: "0.16em", color: "var(--et-cream)" }}>ET</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(238,216,195,0.6)" }}>
          By Everything Jinglebell
        </div>
      </div>

      <div style={{ margin: "26px 0", padding: "20px", borderRadius: "var(--r-3)", background: "rgba(238,216,195,0.06)", border: "1px solid rgba(238,216,195,0.12)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--et-cream)", marginBottom: 4 }}>มีของแปลกเข้าใหม่ทุกสัปดาห์</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "rgba(238,216,195,0.66)", lineHeight: 1.6, marginBottom: 14 }}>
          เพิ่มเราเป็นเพื่อนใน LINE รับของเข้าใหม่ก่อนใคร และทักถามได้ทุกชิ้น
        </div>
        <LineButton onClick={() => {}}>เพิ่มเพื่อนใน LINE</LineButton>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18 }}>
        {linkCols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(238,216,195,0.5)", marginBottom: 10 }}>{c.h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              {c.items.map((i) => (
                <a key={i} href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "rgba(255,255,255,0.78)", textDecoration: "none" }}>
                  {i}
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28, paddingTop: 18, borderTop: "1px solid rgba(238,216,195,0.12)", display: "flex", flexDirection: "column", gap: 8 }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {["LINE Pay", "PromptPay", "บัตรเครดit", "ปลายทาง"].map((p) => (
            <span key={p} style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: "rgba(238,216,195,0.7)", border: "1px solid rgba(238,216,195,0.18)", borderRadius: "var(--r-pill)", padding: "4px 11px" }}>{p}</span>
          ))}
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, color: "rgba(238,216,195,0.45)", lineHeight: 1.6 }}>
          © 2026 ET · By Everything Jinglebell · et.co.th · อีที บาย เอเวอรี่ติงเกอเบล
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AppHeader, BottomTab, Footer, LineButton, LINE_GREEN });