// 內 UCHI web — shared shell + atoms

// ---- brushed EN mark ----
let _uwMark = null;
function useMark() {
  const [s, set] = React.useState(_uwMark);
  React.useEffect(() => { if (_uwMark) return; fetch("assets/en-logo-mark.svg").then(r => r.text()).then(t => { _uwMark = t; set(t); }); }, []);
  return s;
}
function Brush({ size = 40, color = "currentColor", style = {} }) {
  const svg = useMark();
  return <div className="mark" style={{ width: size, height: size, color, ...style }}
    dangerouslySetInnerHTML={svg ? { __html: svg } : undefined} />;
}
function Wordmark({ size = 17, mark = 22, color }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 10, color }}>
      <Brush size={mark} color="var(--accent)" />
      <span style={{ fontWeight: 900, fontSize: size, letterSpacing: ".26em" }}>EN&nbsp;HOUSE</span>
    </span>
  );
}
function Kanji({ ch = "縁", size = 360, style }) {
  return <div style={{ position: "absolute", fontWeight: 900, fontSize: size, lineHeight: 1,
    color: "color-mix(in srgb, var(--ink) 4%, transparent)", pointerEvents: "none", userSelect: "none", ...style }}>{ch}</div>;
}

function Eyebrow({ children, accent, style }) {
  return <div className={"eyebrow" + (accent ? " accent" : "")} style={style}>{children}</div>;
}

function Button({ variant = "primary", children, onClick, disabled, icon, block, style, as, href }) {
  const cls = "btn btn--" + variant + (block ? " btn--block" : "");
  const inner = <>{children}{icon && <Icon name={icon} size={17} />}</>;
  if (as === "a") return <a className={cls} href={href} style={style}>{inner}</a>;
  return <button className={cls} onClick={onClick} disabled={disabled} style={style}>{inner}</button>;
}

function Spinner({ size = 18 }) {
  return <div style={{ width: size, height: size, borderRadius: 999, border: "2px solid var(--line-2)",
    borderTopColor: "var(--accent)", animation: "uw-spin .7s linear infinite" }} />;
}

function Card({ children, hover, onClick, style, className = "" }) {
  return <div className={"card " + (hover ? "hover " : "") + className} onClick={onClick}
    style={{ padding: 22, ...style }}>{children}</div>;
}

function Photo({ ground = "dim", height = 200, label, children, style, radius = 4 }) {
  return <div className={"photo photo--" + ground} style={{ height, borderRadius: radius, ...style }}>
    {children}{label && <div className="photo__label">{label}</div>}</div>;
}

function Tag({ children, tone = "accent", style }) {
  return <span className={"tag tag--" + tone} style={style}>{children}</span>;
}

function Steps({ n, i }) {
  return <div style={{ display: "flex", gap: 6, width: "100%" }}>
    {Array.from({ length: n }).map((_, k) =>
      <div key={k} style={{ height: 2, flex: 1, background: k <= i ? "var(--accent)" : "var(--line-2)", transition: "background .3s ease" }} />)}
  </div>;
}

function Field({ label, v, on, ph, hint, type = "text", textarea, rows = 4 }) {
  return (
    <div>
      {label && <label className="label">{label}</label>}
      {textarea
        ? <textarea className="field" rows={rows} value={v} placeholder={ph} onChange={e => on(e.target.value)} />
        : <input className="field" type={type} value={v} placeholder={ph} onChange={e => on(e.target.value)} />}
      {hint && <div className="hint">{hint}</div>}
    </div>
  );
}

// ---- responsive top nav ----
function Nav({ active, onNav, links, onAccount, member, onSignOut }) {
  const [open, setOpen] = React.useState(false);
  const [acc, setAcc] = React.useState(false);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, height: "var(--nav-h)",
      display: "flex", alignItems: "center", borderBottom: "1px solid var(--line)",
      background: "color-mix(in srgb, var(--bg) 82%, transparent)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)" }}>
      <div className="container" style={{ display: "flex", alignItems: "center", gap: 28, width: "100%" }}>
        <button onClick={() => onNav("home")} style={{ background: "none", border: "none", cursor: "pointer", padding: 0, color: "var(--ink)" }}>
          <Wordmark />
        </button>

        {/* desktop links */}
        <nav className="nav-links" style={{ display: "flex", gap: 4, flex: 1, marginLeft: 12 }}>
          {links.map(l => (
            <button key={l.id} onClick={() => onNav(l.id)} style={{
              background: "none", border: "none", cursor: "pointer", fontFamily: "inherit",
              fontSize: 14, fontWeight: 600, padding: "8px 14px", position: "relative",
              color: active === l.id ? "var(--ink)" : "var(--ink-2)" }}>
              {l.t}
              {active === l.id && <span style={{ position: "absolute", left: 14, right: 14, bottom: 0, height: 2, background: "var(--accent)" }} />}
            </button>
          ))}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 12, marginLeft: "auto" }}>
          <div style={{ position: "relative" }}>
            <button onClick={() => setAcc(a => !a)} aria-label="conta" style={{ width: 40, height: 40, borderRadius: 999, cursor: "pointer",
              background: "transparent", border: "1px solid var(--line-2)", color: "var(--ink)",
              display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 14 }}>
              {member.initials}
            </button>
            {acc && (
              <>
                <div onClick={() => setAcc(false)} style={{ position: "fixed", inset: 0, zIndex: 1 }} />
                <div className="rise" style={{ position: "absolute", right: 0, top: 50, zIndex: 2, width: 230,
                  background: "var(--surface)", border: "1px solid var(--line-2)", borderRadius: 4, boxShadow: "var(--shadow-2)", overflow: "hidden" }}>
                  <div style={{ padding: "16px 18px", borderBottom: "1px solid var(--line)" }}>
                    <div className="h3">{member.name}</div>
                    <div className="cap" style={{ marginTop: 4 }}>{member.tier} · {member.no}</div>
                  </div>
                  <MenuItem onClick={() => { setAcc(false); onAccount("card"); }}>O meu cartão</MenuItem>
                  <MenuItem onClick={() => { setAcc(false); onNav("account"); }}>Conta & preferências</MenuItem>
                  <MenuItem onClick={() => { setAcc(false); onSignOut(); }} dim>Terminar sessão</MenuItem>
                </div>
              </>
            )}
          </div>
          <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="menu" style={{ display: "none",
            width: 40, height: 40, borderRadius: 999, cursor: "pointer", background: "transparent",
            border: "1px solid var(--line-2)", color: "var(--ink)", alignItems: "center", justifyContent: "center" }}>
            <Icon name={open ? "x" : "menu"} size={20} />
          </button>
        </div>
      </div>

      {/* mobile drawer */}
      {open && (
        <div className="rise" style={{ position: "absolute", top: "var(--nav-h)", left: 0, right: 0, zIndex: 40,
          background: "var(--bg-2)", borderBottom: "1px solid var(--line-2)", padding: "10px 0 16px" }}>
          <div className="container" style={{ display: "flex", flexDirection: "column" }}>
            {links.map(l => (
              <button key={l.id} onClick={() => { onNav(l.id); setOpen(false); }} style={{ background: "none", border: "none",
                cursor: "pointer", fontFamily: "inherit", textAlign: "left", padding: "13px 4px", fontSize: 16, fontWeight: 600,
                color: active === l.id ? "var(--accent)" : "var(--ink)", borderBottom: "1px solid var(--line)" }}>{l.t}</button>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}
function MenuItem({ children, onClick, dim }) {
  return <button onClick={onClick} style={{ display: "block", width: "100%", textAlign: "left", background: "none",
    border: "none", cursor: "pointer", fontFamily: "inherit", fontSize: 14, fontWeight: 600, padding: "13px 18px",
    color: dim ? "var(--ink-3)" : "var(--ink)" }}>{children}</button>;
}

// ---- modal ----
function Modal({ children, onClose, wide }) {
  React.useEffect(() => {
    const h = e => e.key === "Escape" && onClose();
    window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
  }, []);
  return (
    <div className="fade" onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(8,4,2,0.66)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 20, overflowY: "auto" }}>
      <div className="rise" onClick={e => e.stopPropagation()} style={{ position: "relative", width: "100%",
        maxWidth: wide ? 760 : 460, maxHeight: "92vh", overflowY: "auto", background: "var(--surface)",
        border: "1px solid var(--line-2)", borderRadius: 6, boxShadow: "var(--shadow-2)" }} className="noscroll">
        <button onClick={onClose} aria-label="fechar" style={{ position: "absolute", top: 16, right: 16, zIndex: 3,
          width: 36, height: 36, borderRadius: 999, cursor: "pointer", background: "color-mix(in srgb, var(--bg) 60%, transparent)",
          border: "1px solid var(--line-2)", color: "var(--ink)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="x" size={17} /></button>
        {children}
      </div>
    </div>
  );
}

// ---- section header ----
function SectionHead({ eyebrow, title, sub, action, style }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 20, marginBottom: 24, ...style }}>
      <div>
        {eyebrow && <Eyebrow accent style={{ marginBottom: 12 }}>{eyebrow}</Eyebrow>}
        <h2 className="h2">{title}</h2>
        {sub && <p className="body" style={{ marginTop: 10, maxWidth: 520 }}>{sub}</p>}
      </div>
      {action}
    </div>
  );
}

Object.assign(window, { Brush, Wordmark, Kanji, Eyebrow, Button, Spinner, Card, Photo, Tag, Steps, Field, Nav, MenuItem, Modal, SectionHead, useMark });