/* ============================================================
   Shared parts: icons, phone frame, store badges, check items
   Exposed on window for the other babel scripts.
   ============================================================ */

/* ---------- Lucide-style inline icons (1.75 stroke, 24 grid) ---------- */
function Ic({ name, size = 24, color = "currentColor", sw = 1.75, style }) {
  const p = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round",
    style,
  };
  const paths = {
    "graduation-cap": <><path d="M22 10 12 5 2 10l10 5 10-5Z"/><path d="M6 12v5c0 1 2.5 3 6 3s6-2 6-3v-5"/><path d="M22 10v6"/></>,
    "list-checks": <><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></>,
    "play": <><path d="m6 3 14 9-14 9V3Z"/></>,
    "play-circle": <><circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4V8Z"/></>,
    "bell": <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></>,
    "calendar": <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    "lock": <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    "arrow-right": <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    "check": <><path d="M20 6 9 17l-5-5"/></>,
    "folder": <><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></>,
    "trophy": <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></>,
    "target": <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>,
    "wifi": <><path d="M5 12.55a11 11 0 0 1 14 0"/><path d="M8.5 16.1a6 6 0 0 1 7 0"/><path d="M2 8.82a15 15 0 0 1 20 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
    "book-open": <><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3Z"/></>,
    "sparkles": <><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><path d="m6.3 6.3 2.4 2.4M15.3 15.3l2.4 2.4M17.7 6.3l-2.4 2.4M8.7 15.3l-2.4 2.4"/></>,
    "puzzle": <><path d="M19.4 13.6a2 2 0 1 0 0-3.2V8a2 2 0 0 0-2-2h-2.4a2 2 0 1 0-3.2 0H9a2 2 0 0 0-2 2v1.4a2 2 0 1 0 0 3.2V16a2 2 0 0 0 2 2h1.4a2 2 0 1 0 3.2 0H17a2 2 0 0 0 2-2v-2.4Z"/></>,
    "menu": <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    "x": <><path d="M18 6 6 18M6 6l12 12"/></>,
  };
  return <svg {...p} aria-hidden="true">{paths[name] || null}</svg>;
}

/* ---------- store glyphs ---------- */
function AppleGlyph({ s = 20, c = "#fff" }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c} aria-hidden="true">
      <path d="M17.05 12.04c-.03-2.6 2.12-3.85 2.22-3.91-1.21-1.77-3.1-2.01-3.77-2.04-1.6-.16-3.13.94-3.94.94-.81 0-2.07-.92-3.4-.9-1.75.03-3.36 1.02-4.26 2.58-1.82 3.16-.47 7.83 1.3 10.39.86 1.25 1.89 2.66 3.24 2.61 1.3-.05 1.79-.84 3.36-.84 1.57 0 2.01.84 3.39.81 1.4-.02 2.29-1.28 3.15-2.54.99-1.46 1.4-2.87 1.42-2.94-.03-.01-2.72-1.05-2.75-4.16zM14.6 4.7c.72-.87 1.2-2.08 1.07-3.28-1.03.04-2.28.69-3.02 1.55-.66.77-1.24 2-1.08 3.18 1.15.09 2.32-.58 3.03-1.45z"/>
    </svg>
  );
}
function PlayGlyph({ s = 20 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
      <path d="M3.6 2.3 13.3 12 3.6 21.7c-.36-.2-.6-.58-.6-1.05V3.35c0-.47.24-.85.6-1.05Z" fill="#34d27d"/>
      <path d="M16.9 8.4 13.3 12l3.6 3.6 3.5-2.02c.86-.5.86-1.66 0-2.16L16.9 8.4Z" fill="#ffcf3d"/>
      <path d="m3.6 2.3 9.7 9.7 3.6-3.6L5.4 1.6c-.7-.4-1.45-.04-1.8.7Z" fill="#ff5e5b"/>
      <path d="m13.3 12-9.7 9.7c.35.74 1.1 1.1 1.8.7L16.9 15.6 13.3 12Z" fill="#3aa3ff"/>
    </svg>
  );
}
function ChromeGlyph({ s = 20 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="10" fill="#fff"/>
      <circle cx="12" cy="12" r="4" fill="#4285F4"/>
      <path d="M12 8h8.66A10 10 0 0 0 3.34 7l4.4 7.6A4 4 0 0 1 12 8Z" fill="#EA4335"/>
      <path d="M16 12a4 4 0 0 1-7.6 1.73L4.1 21A10 10 0 0 0 20.2 16.5L16 12Z" fill="#34A853" opacity="0.9"/>
      <path d="M20.66 8H12a4 4 0 0 1 3.66 5.73L20.2 16.5A10 10 0 0 0 20.66 8Z" fill="#FBBC05"/>
      <circle cx="12" cy="12" r="3.4" fill="#4285F4"/>
    </svg>
  );
}

/* ---------- store badge ---------- */
const STORE_META = {
  apple:  { glyph: AppleGlyph,  t: "Download on the", b: "App Store" },
  google: { glyph: PlayGlyph,   t: "GET IT ON",       b: "Google Play" },
  chrome: { glyph: ChromeGlyph, t: "Available in the", b: "Chrome Web Store" },
};
function StoreBadge({ store, href, ghost = false, size = 20 }) {
  const m = STORE_META[store];
  const G = m.glyph;
  return (
    <a className={"store-badge" + (ghost ? " store-badge--ghost" : "")}
       href={href || "#"} target="_blank" rel="noopener noreferrer">
      <G s={size} />
      <span style={{ display: "flex", flexDirection: "column" }}>
        <span className="store-badge__t">{m.t}</span>
        <span className="store-badge__b">{m.b}</span>
      </span>
    </a>
  );
}

/* ---------- phone frame with drop-in screenshot slot ---------- */
function PhoneFrame({ w = 258, id, placeholder = "Drop screenshot", island = true }) {
  const screenH = Math.round(w * 2.04);
  return (
    <div className="phone" style={{ width: w + 22, padding: 11 }}>
      <div className="phone__screen">
        {island && <div className="phone__island" />}
        <image-slot
          id={id}
          placeholder={placeholder}
          shape="rect"
          fit="cover"
          style={{ width: w + "px", height: screenH + "px" }}
        ></image-slot>
      </div>
    </div>
  );
}

/* ---------- check / feature item ---------- */
function CheckItem({ children, tone = "forest" }) {
  const bg = tone === "sand" ? "var(--tss-sand)" : "var(--tss-forest-100)";
  const fg = tone === "sand" ? "var(--tss-pine)" : "var(--tss-forest)";
  return (
    <div className="check">
      <span className="check__ic" style={{ background: bg, color: fg }}>
        <Ic name="check" size={15} sw={2.4} />
      </span>
      <span>{children}</span>
    </div>
  );
}

function FeatureRow({ icon, title, body, tone = "forest" }) {
  const onDark = tone === "sand";
  const bg = onDark ? "rgba(217,198,171,0.22)" : "var(--tss-forest-100)";
  const fg = onDark ? "var(--tss-sand-200)" : "var(--tss-forest)";
  const titleColor = onDark ? "#FFFFFF" : "var(--tss-pine)";
  const bodyColor = onDark ? "rgba(255,255,255,0.78)" : "var(--tss-fg-muted)";
  return (
    <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
      <span style={{ flex: "0 0 auto", width: 46, height: 46, borderRadius: 13, background: bg, color: fg, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Ic name={icon} size={22} />
      </span>
      <div>
        <div style={{ fontFamily: "var(--tss-font-heading)", fontWeight: 700, fontSize: 18, color: titleColor, marginBottom: 3 }}>{title}</div>
        <div style={{ fontFamily: "var(--tss-font-body)", fontSize: 15.5, lineHeight: 1.55, color: bodyColor }}>{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Ic, AppleGlyph, PlayGlyph, ChromeGlyph, StoreBadge, PhoneFrame, CheckItem, FeatureRow, STORE_META });