// Luke phone kit — icons, brand marks, status bar, voice mic. Phone dialect of the TheoCore system.
const Ic = ({ d, size = 24, sw = 1.7, fill = "none" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
    strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: d }} />
);
const pi = {
  calendar: '<rect x="3" y="4.5" width="18" height="16" rx="3.5"/><path d="M3 9.5h18M8 3v3M16 3v3"/>',
  heart: '<path d="M12 20.5s-7.5-4.7-7.5-10A3.9 3.9 0 0 1 12 7a3.9 3.9 0 0 1 7.5 3.5c0 5.3-7.5 10-7.5 10Z"/>',
  people: '<circle cx="9" cy="8" r="3.4"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16.5 5a3.4 3.4 0 0 1 0 6M21.5 20a6.5 6.5 0 0 0-3.5-5.8"/>',
  book: '<path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 1 2-2h13"/>',
  clip: '<path d="M21 8.5 12.5 17a3.5 3.5 0 0 1-5-5l8-8a2.3 2.3 0 0 1 3.3 3.3l-8 8a1.2 1.2 0 0 1-1.7-1.7l7.2-7.2"/>',
  mic: '<rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0"/><path d="M12 17.5V21"/>',
  send: '<path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/>',
  kbd: '<rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h12"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  minus: '<path d="M5 12h14"/>',
  chevL: '<path d="m15 18-6-6 6-6"/>',
  chevR: '<path d="m9 18 6-6-6-6"/>',
  close: '<path d="M6 6l12 12M18 6 6 18"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  list: '<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>',
  search: '<circle cx="11" cy="11" r="7.5"/><path d="m21 21-4.2-4.2"/>',
  chevDown: '<path d="m6 9 6 6 6-6"/>',
  chevUp: '<path d="m6 15 6-6 6 6"/>',
  headphones: '<path d="M4 15v-3a8 8 0 0 1 16 0v3"/><rect x="2.5" y="14.5" width="4.5" height="6" rx="1.6"/><rect x="17" y="14.5" width="4.5" height="6" rx="1.6"/>',
  menu: '<path d="M3 6h18M3 12h18M3 18h18"/>',
  lock: '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>',
  phone: '<path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11 11 0 0 0 3.4.55 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11 11 0 0 0 .55 3.4 1 1 0 0 1-.24 1z"/>',
  message: '<path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.8-.8L3 21l1.9-4.2A8.4 8.4 0 0 1 4 11.5 8.5 8.5 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z"/>',
  edit: '<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7.5V12l3 1.8"/>',
  bookmark: '<path d="M6 3h12a1 1 0 0 1 1 1v17l-7-4-7 4V4a1 1 0 0 1 1-1z"/>',
  pin: '<path d="M12 21s-6-5.7-6-10a6 6 0 0 1 12 0c0 4.3-6 10-6 10z"/><circle cx="12" cy="11" r="2.2"/>',
  bell: '<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
  eyeOff: '<path d="M9.9 4.24A9 9 0 0 1 12 4c7 0 10 8 10 8a18 18 0 0 1-2.16 3.19M6.6 6.6A18 18 0 0 0 2 12s3 8 10 8a9 9 0 0 0 5.4-1.6"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20"/>',
};

function StatusBar({ time = "6:12" }) {
  return (
    <div className="statusbar">
      <span>{time}</span>
      <span className="right">
        <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="7" width="3" height="5" rx="1"/><rect x="5" y="4.5" width="3" height="7.5" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
        <svg width="17" height="12" viewBox="0 0 17 12" fill="currentColor"><path d="M8.5 2.4c2.4 0 4.6.9 6.3 2.4l1.2-1.4A11 11 0 0 0 8.5.4 11 11 0 0 0 1 3.4l1.2 1.4A9.4 9.4 0 0 1 8.5 2.4Zm0 3.4c1.5 0 2.9.6 3.9 1.5l1.2-1.4a7.7 7.7 0 0 0-10.2 0l1.2 1.4c1-.9 2.4-1.5 3.9-1.5Zm0 3.3c.8 0 1.5.3 2 .9l-2 2.1-2-2.1c.5-.6 1.2-.9 2-.9Z"/></svg>
        <svg width="26" height="13" viewBox="0 0 26 13" fill="none"><rect x="1" y="1" width="21" height="11" rx="3" stroke="currentColor" strokeOpacity=".4" strokeWidth="1"/><rect x="2.5" y="2.5" width="18" height="8" rx="1.6" fill="currentColor"/><rect x="23.5" y="4.5" width="1.6" height="4" rx=".8" fill="currentColor" fillOpacity=".4"/></svg>
      </span>
    </div>
  );
}

// Voice mic with a calm breathing ring. hero = filled olive (primary), else soft olive tint.
function MicButton({ size = 46, hero = false }) {
  const ring = { position: "absolute", inset: -7, borderRadius: "50%", border: "2px solid var(--brand)", pointerEvents: "none" };
  return (
    <span style={{ position: "relative", display: "inline-flex", flexShrink: 0 }}>
      <span className="luke-ring" style={ring} />
      <span className="luke-ring" style={{ ...ring, animationDelay: "1.3s" }} />
      <span style={{ width: size, height: size, borderRadius: "50%", display: "grid", placeItems: "center",
        background: hero ? "var(--brand)" : "var(--olive-100)", color: hero ? "#fff" : "var(--olive-700)",
        boxShadow: hero ? "0 6px 18px rgba(68,78,39,.28)" : "none" }}>
        <Ic d={pi.mic} size={Math.round(size * 0.42)} sw={1.8} />
      </span>
    </span>
  );
}

function LukeMark({ h = 22 }) {
  const s = { height: h, width: "auto", display: "block" };
  return (
    <span style={{ display: "inline-flex" }}>
      <img className="wm-ink" src={window.logoSrc("luke_logo_ink.svg")} alt="Luke" style={s} />
      <img className="wm-pale" src={window.logoSrc("luke_logo_white.svg")} alt="Luke" style={s} />
    </span>
  );
}

// Wax-seal disc with a lock — the focal mark on the PIN moment.
function Seal({ s = 46 }) {
  return (
    <span style={{ width: s, height: s, borderRadius: "50%", background: "var(--olive-100)", border: "1px solid var(--olive-300)", display: "grid", placeItems: "center", flexShrink: 0, color: "var(--olive-700)" }}>
      <Ic d={pi.lock} size={Math.round(s * 0.5)} sw={1.8} />
    </span>
  );
}

// Shared PIN pad — sensitive content stays sealed until entered. Blooms from the bottom, glass.
function PinPad({ onClose, onUnlock, note }) {
  const [val, setVal] = React.useState("");
  const [show, setShow] = React.useState(false);
  React.useEffect(() => { const id = requestAnimationFrame(() => setShow(true)); return () => cancelAnimationFrame(id); }, []);
  const push = (d) => { if (val.length >= 4) return; const nv = val + d; setVal(nv); if (nv.length === 4) setTimeout(onUnlock, 220); };
  const key = { width: 66, height: 66, borderRadius: "50%", border: "none", background: "var(--surface)", color: "var(--text-strong)", fontFamily: "var(--font-serif)", fontSize: 26, cursor: "pointer", display: "grid", placeItems: "center" };
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(38,44,23,.34)", opacity: show ? 1 : 0, transition: "opacity .3s ease", zIndex: 90, borderRadius: "0 0 49px 49px" }} />
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, zIndex: 95, display: "flex", flexDirection: "column", alignItems: "center", padding: "8px 24px 30px",
        transform: show ? "translateY(0)" : "translateY(103%)", transition: "transform .44s cubic-bezier(.32,.72,0,1)",
        background: "var(--glass-bg)", backdropFilter: "blur(var(--glass-blur))", WebkitBackdropFilter: "blur(var(--glass-blur))",
        borderTop: "1px solid var(--glass-border)", borderRadius: "28px 28px 49px 49px", boxShadow: "var(--glass-shadow)" }}>
        <div style={{ width: 44, height: 5, borderRadius: 3, background: "var(--parchment-edge)", margin: "2px auto 18px" }} />
        <Seal s={46} />
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, color: "var(--text-strong)", marginTop: 14 }}>Enter your PIN</div>
        <div style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-muted)", textAlign: "center", marginTop: 5, maxWidth: 250, lineHeight: 1.45 }}>{note || "This note is kept private. Only you can open it."}</div>
        <div style={{ display: "flex", gap: 16, margin: "20px 0 22px" }}>
          {[0, 1, 2, 3].map((i) => <span key={i} style={{ width: 13, height: 13, borderRadius: "50%", border: "1.5px solid var(--olive-400)", background: i < val.length ? "var(--brand)" : "transparent", transition: "background .15s" }} />)}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }}>
          {["1", "2", "3", "4", "5", "6", "7", "8", "9"].map((d) => <button key={d} style={key} onClick={() => push(d)}>{d}</button>)}
          <span />
          <button style={key} onClick={() => push("0")}>0</button>
          <button style={{ ...key, background: "transparent" }} onClick={() => setVal(val.slice(0, -1))} aria-label="Delete"><Ic d={pi.chevL} size={22} sw={2} /></button>
        </div>
      </div>
    </React.Fragment>
  );
}

// Bespoke Reader mark (Bill + Silas, 2026-07-22) — bookmark-in-book glyph. Filled, inherits currentColor.
const READER_GLYPH_D = "M12910.944,954.86l0,12019.186l-9100.171,0c-347.391,117.763 -541.433,328.898 -581.478,633.41c-42.326,620.708 192.087,967.674 703.243,1040.897l385.155,-2.277l0,669.219l-717.896,3.712c-672.311,-120.95 -1062.028,-616.412 -1169.14,-1486.318l10.743,-11160.642c-15.301,-877.882 441.157,-1450.279 1369.374,-1717.186l9100.171,0Zm-9743.835,1419.577l2.929,10202.828c66.093,-77.451 161.81,-147.225 287.16,-209.279l0,-10345.073c-166.373,72.798 -263.068,189.972 -290.089,351.524Zm9051.009,-739.286l-8000.049,0l0,10611.98l8000.049,0l0,-10611.98Zm-1450.866,1175.482c15.991,-2.021 154.984,-19.559 200.922,-16.123c164.172,12.227 236.866,44.014 145.765,181.084c-225.821,339.833 -1458.323,1109.566 -1414.358,895.677c13.1,-63.654 29.763,-55.863 520.9,-623.243c239.61,-276.82 227.613,-396.471 546.771,-437.395Zm-5395.189,3158.79c1.364,-647.733 1.693,-839.781 103.954,-1043.907c125.32,-250.146 316.774,-405.904 607.45,-508.559c697.581,-246.382 3352.706,30.488 4344.496,-184.208c213.461,-46.2 348.561,-159.029 354.098,-47.433c43.143,869.429 -412.379,1168.01 -530.878,1254.296c-573.495,417.539 -1869.945,204.817 -3025.89,334.015c-1466.408,163.894 -1538.478,1028.229 -1565.432,1214.572c-35.203,243.275 -46.134,248.222 -28.697,259.76c58.296,38.54 67.599,-313.341 690.135,-546.722c849.492,-318.435 2782.632,-19.838 3930.654,-270.214c340.621,-74.27 475.885,-231.394 520.786,-149.561c26.905,49.026 1.562,383.863 -8.25,453.68c-149.314,1061.13 -1121.317,1136.52 -1453.621,1173.812c-562.549,63.144 -2149.969,-83.098 -2828.945,230.506c-212.542,98.168 -298.745,129.691 -513.818,355.086c-183.106,191.865 -335.379,587.153 -335.033,904.7c0.065,75.175 41.942,24.045 88.85,-34.038c365.374,-452.382 726.409,-558.654 1540.35,-599.297c1414.259,-70.59 2610.898,82.242 3340.626,-274.274c111.168,-54.302 177.977,-121.292 180.361,3.09c15.549,811.576 -263.13,1128.894 -551.437,1337.558c-542.07,392.328 -1319.05,292.697 -2215.596,315.016c-846.369,21.071 -1663.682,-65.1 -2311.824,596.275c-110.857,113.108 -273.78,418.723 -323.102,250.277c-30.718,-104.906 -14.676,-4956.816 -9.236,-5024.432Zm949.877,9335.487l0,-670.817l6614.07,-39.461l0,676.091l-6614.07,34.187Zm-2128.289,-1635.725l8061.583,0l0,407.781l-6203.198,0l0,2699.255l-222.693,-222.76l-488.364,-488.3l-488.364,488.3l-270.881,270.846l0,-2747.34l-388.084,0c-110.697,0 -201.208,-90.507 -201.208,-201.204l0,-5.373c0,-110.661 90.511,-201.204 201.208,-201.204Z";
const ReaderGlyph = ({ size = 22 }) => (
  <svg height={size} width={size * 15367 / 17780} viewBox="0 0 15367 17780" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}><path d={READER_GLYPH_D} /></svg>
);

window.LukePhoneKit = { Ic, pi, StatusBar, MicButton, LukeMark, Seal, PinPad, ReaderGlyph };