// tl-chrome.jsx — shared Button, Nav, Footer, section helpers
const { useState, useEffect } = React;

// ---- Button ----
function Button({ children, variant = "primary", size = "md", onClick, full = false, iconRight = false }) {
  const base = {
    display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
    fontFamily: "var(--sans)", fontWeight: 600, cursor: "pointer",
    borderRadius: "var(--btn-radius)", border: "1px solid transparent",
    transition: "transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease",
    width: full ? "100%" : "auto", whiteSpace: "nowrap", letterSpacing: "-0.01em",
  };
  const sizes = {
    sm: { fontSize: 14, padding: "9px 16px" },
    md: { fontSize: 15.5, padding: "13px 24px" },
    lg: { fontSize: 17, padding: "17px 32px" },
  };
  const variants = {
    primary: { background: "var(--accent)", color: "#fff", boxShadow: "0 1px 2px rgba(40,30,90,.18)" },
    ghost:   { background: "transparent", color: "var(--ink)", borderColor: "var(--line-strong)" },
    soft:    { background: "var(--accent-soft)", color: "var(--accent-ink)", borderColor: "transparent" },
    onAccent:{ background: "#fff", color: "var(--accent-ink)", boxShadow: "0 1px 2px rgba(20,10,60,.2)" },
  };
  const [hover, setHover] = useState(false);
  const hoverStyle = hover
    ? (variant === "primary"
        ? { background: "var(--accent-deep)", transform: "translateY(-1px)", boxShadow: "0 8px 22px rgba(60,40,130,.22)" }
        : variant === "ghost"
        ? { background: "var(--surface-2)", borderColor: "var(--ink)" }
        : variant === "onAccent"
        ? { transform: "translateY(-1px)", boxShadow: "0 8px 22px rgba(20,10,60,.28)" }
        : { background: "var(--accent-soft-2)" })
    : {};
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ ...base, ...sizes[size], ...variants[variant], ...hoverStyle }}
    >
      {children}
      {iconRight && <Icon name="arrow" size={size === "lg" ? 20 : 18} />}
    </button>
  );
}

// ---- Eyebrow / kicker ----
function Kicker({ children, center = false }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10, justifyContent: center ? "center" : "flex-start",
    }}>
      <span style={{ width: 26, height: 1.5, background: "var(--accent)", display: "inline-block" }}></span>
      <span style={{
        fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.18em",
        textTransform: "uppercase", color: "var(--accent-ink)", fontWeight: 600,
      }}>{children}</span>
    </div>
  );
}

const NAV = [
  { id: "home",    label: "홈" },
  { id: "class",   label: "원데이클래스" },
  { id: "story",   label: "브랜드 스토리" },
  { id: "reserve", label: "예약·문의" },
];

// ---- Top navigation ----
function Nav({ route, go }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const el = document.querySelector("[data-scroll]");
    const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 8);
    const target = el || window;
    target.addEventListener("scroll", onScroll, { passive: true });
    return () => target.removeEventListener("scroll", onScroll);
  }, []);
  const navTo = (id) => { go(id); setOpen(false); };
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "color-mix(in oklab, var(--surface) 88%, transparent)" : "transparent",
      backdropFilter: scrolled ? "saturate(1.1) blur(12px)" : "none",
      borderBottom: `1px solid ${scrolled ? "var(--hairline)" : "transparent"}`,
      transition: "background .25s ease, border-color .25s ease",
    }}>
      <div className="tl-wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
        <button onClick={() => navTo("home")} style={{
          display: "flex", alignItems: "baseline", gap: 8, background: "none", border: "none", cursor: "pointer", padding: 0,
        }}>
          <span style={{ fontFamily: "var(--sans)", fontWeight: 800, fontSize: 21, letterSpacing: "-0.02em", color: "var(--ink)" }}>tintlife</span>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.14em", color: "var(--accent-ink)", textTransform: "uppercase" }}>oneday</span>
        </button>

        <nav className="tl-navlinks" style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {NAV.map((n) => (
            <button key={n.id} onClick={() => navTo(n.id)} style={{
              background: "none", border: "none", cursor: "pointer", padding: "8px 14px",
              fontFamily: "var(--sans)", fontSize: 15, fontWeight: route === n.id ? 700 : 500,
              color: route === n.id ? "var(--ink)" : "var(--muted)", letterSpacing: "-0.01em",
              borderRadius: 8, transition: "color .15s", whiteSpace: "nowrap",
            }}>{n.label}</button>
          ))}
          <div style={{ marginLeft: 8 }}>
            <Button size="sm" onClick={() => navTo("reserve")}>신청하기</Button>
          </div>
        </nav>

        <button className="tl-burger" onClick={() => setOpen(true)} aria-label="menu" style={{
          display: "none", background: "none", border: "none", cursor: "pointer", color: "var(--ink)", padding: 6,
        }}><Icon name="menu" /></button>
      </div>

      {open && (
        <div style={{ position: "fixed", inset: 0, zIndex: 60 }}>
          <div onClick={() => setOpen(false)} style={{ position: "absolute", inset: 0, background: "rgba(20,16,40,.4)" }}></div>
          <div style={{
            position: "absolute", top: 0, right: 0, bottom: 0, width: "min(82vw, 340px)",
            background: "var(--surface)", padding: "20px 22px",
            display: "flex", flexDirection: "column", gap: 6, boxShadow: "-20px 0 60px rgba(20,16,40,.18)",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
              <span style={{ fontFamily: "var(--sans)", fontWeight: 800, fontSize: 19 }}>tintlife</span>
              <button onClick={() => setOpen(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink)" }}><Icon name="close" /></button>
            </div>
            {NAV.map((n) => (
              <button key={n.id} onClick={() => navTo(n.id)} style={{
                textAlign: "left", background: "none", border: "none", cursor: "pointer",
                padding: "14px 6px", borderBottom: "1px solid var(--hairline)",
                fontFamily: "var(--sans)", fontSize: 18, fontWeight: route === n.id ? 700 : 500,
                color: route === n.id ? "var(--accent-ink)" : "var(--ink)",
              }}>{n.label}</button>
            ))}
            <div style={{ marginTop: 16 }}><Button full size="lg" onClick={() => navTo("reserve")} iconRight>원데이클래스 신청</Button></div>
            <a href={`tel:${CONTACT.tel}`} style={{ marginTop: 12, textAlign: "center", fontFamily: "var(--mono)", fontSize: 13, color: "var(--muted)", textDecoration: "none" }}>{CONTACT.tel}</a>
          </div>
        </div>
      )}
    </header>
  );
}

// ---- Footer ----
function Footer({ go }) {
  return (
    <footer style={{ background: "var(--ink)", color: "color-mix(in oklab, #fff 78%, transparent)", marginTop: 0 }}>
      <div className="tl-wrap" style={{ paddingTop: 64, paddingBottom: 40 }}>
        <div className="tl-foot-grid">
          <div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontFamily: "var(--sans)", fontWeight: 800, fontSize: 24, color: "#fff", letterSpacing: "-0.02em" }}>tintlife</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", color: "color-mix(in oklab, var(--accent) 70%, #fff)", textTransform: "uppercase" }}>oneday class</span>
            </div>
            <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.7, maxWidth: 320, color: "color-mix(in oklab, #fff 64%, transparent)" }}>
              빈손으로 와서 내 손으로 직접. 염색 체험부터 창업까지, 틴트라이프 원데이클래스에서 시작하세요.
            </p>
            <div style={{ marginTop: 22 }}>
              <Button variant="onAccent" onClick={() => go("reserve")} iconRight>신청·문의하기</Button>
            </div>
            <a href={CONTACT.instagram} target="_blank" rel="noreferrer" className="tl-ig-card">
              <span className="tl-ig-ic"><Icon name="instagram" size={22} /></span>
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.3 }}>
                <span style={{ fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "color-mix(in oklab,#fff 55%,transparent)" }}>Instagram</span>
                <span style={{ fontSize: 15.5, fontWeight: 700, color: "#fff" }}>{CONTACT.instaHandle}</span>
              </span>
              <span style={{ marginLeft: "auto", color: "color-mix(in oklab,#fff 70%,transparent)" }}><Icon name="arrow" size={18} /></span>
            </a>
          </div>

          <div className="tl-foot-cols">
            <div>
              <h4 style={footH}>바로가기</h4>
              {NAV.map((n) => (
                <button key={n.id} onClick={() => go(n.id)} style={footLink}>{n.label}</button>
              ))}
            </div>
            <div>
              <h4 style={footH}>연락처</h4>
              <a href={`tel:${CONTACT.tel}`} style={footLink}>{CONTACT.tel}</a>
              <a href={`mailto:${CONTACT.email}`} style={footLink}>{CONTACT.email}</a>
              <a href={CONTACT.naver} target="_blank" rel="noreferrer" style={footLink}>네이버 예약</a>
              <a href={CONTACT.more} target="_blank" rel="noreferrer" style={footLink}>전체 링크 →</a>
            </div>
            <div>
              <h4 style={footH}>오시는 길</h4>
              <p style={{ ...footText }}>{CONTACT.address}</p>
              <p style={{ ...footText, marginTop: 10 }}>{CLASS.place}</p>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 48, paddingTop: 22, borderTop: "1px solid color-mix(in oklab, #fff 14%, transparent)",
          display: "flex", flexWrap: "wrap", gap: 8, justifyContent: "space-between",
          fontFamily: "var(--mono)", fontSize: 11.5, color: "color-mix(in oklab, #fff 46%, transparent)", letterSpacing: "0.02em",
        }}>
          <span>상호 {CONTACT.brand} · 사업자등록번호 {CONTACT.bizno}</span>
          <span>© 2020 tintlife. All Rights Reserved.</span>
        </div>
      </div>
    </footer>
  );
}
const footH = { fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "color-mix(in oklab, #fff 50%, transparent)", marginBottom: 14, fontWeight: 600 };
const footLink = { display: "block", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: "5px 0", fontFamily: "var(--sans)", fontSize: 14.5, color: "color-mix(in oklab, #fff 80%, transparent)", textDecoration: "none", whiteSpace: "nowrap" };
const footText = { fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.65, color: "color-mix(in oklab, #fff 66%, transparent)" };

Object.assign(window, { Button, Kicker, Nav, Footer, NAV });