/* JothidaKural mockups — icon set + phone frame */

const I = {
  star: <path fill="currentColor" stroke="none" d="M12 2.5l2.9 5.9 6.5.95-4.7 4.58 1.1 6.47L12 17.9l-5.8 3.06 1.1-6.47-4.7-4.58 6.5-.95z"/>,
  chat: <path d="M21 11.5a8.5 8.5 0 0 1-12.6 7.5L3 21l2-5.4A8.5 8.5 0 1 1 21 11.5z"/>,
  phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>,
  video: <><rect x="2.5" y="6" width="13" height="12" rx="2.5"/><path d="M15.5 10l6-3.2v10.4l-6-3.2z"/></>,
  cal: <><rect x="3" y="4.5" width="18" height="17" rx="2.5"/><path d="M3 9.5h18M8 2.5v4M16 2.5v4"/></>,
  wallet: <><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5H19a2 2 0 0 1 2 2v.5"/><path d="M3 7.5v9A2.5 2.5 0 0 0 5.5 19H19a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2H5.5"/><circle cx="16.5" cy="13" r="1.3" fill="currentColor" stroke="none"/></>,
  shield: <><path d="M12 2.5l8 3v6c0 5-3.4 8.4-8 10-4.6-1.6-8-5-8-10v-6z"/><path d="M9 12l2 2 4-4"/></>,
  arrow: <path d="M5 12h14M13 6l6 6-6 6"/>,
  arrowL: <path d="M19 12H5M11 6l-6 6 6 6"/>,
  check: <path d="M4 12.5l5 5 11-11"/>,
  spark: <path fill="currentColor" stroke="none" d="M12 2l1.8 6.2L20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z"/>,
  trend: <><path d="M3 17l6-6 4 4 8-8"/><path d="M16 7h5v5"/></>,
  bell: <><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></>,
  users: <><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><path d="M16 4.2a3.2 3.2 0 0 1 0 6.1M17 14.2c2.4.7 4 2.9 4 5.8"/></>,
  user: <><circle cx="12" cy="8" r="3.6"/><path d="M4.5 20.5c0-4.1 3.4-7 7.5-7s7.5 2.9 7.5 7"/></>,
  home: <><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5"/></>,
  grid: <><rect x="3" y="3" width="7" height="7" rx="1.6"/><rect x="14" y="3" width="7" height="7" rx="1.6"/><rect x="3" y="14" width="7" height="7" rx="1.6"/><rect x="14" y="14" width="7" height="7" rx="1.6"/></>,
  clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></>,
  sun: <><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M19.1 4.9l-1.8 1.8M6.7 17.3l-1.8 1.8"/></>,
  moon: <path d="M20 14.5A8 8 0 0 1 9.5 4 7 7 0 1 0 20 14.5z"/>,
  mapPin: <><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="2.8"/></>,
  share: <><circle cx="6" cy="12" r="2.6"/><circle cx="17" cy="6" r="2.6"/><circle cx="17" cy="18" r="2.6"/><path d="M8.3 10.8l6.4-3.6M8.3 13.2l6.4 3.6"/></>,
  chevR: <path d="M9 6l6 6-6 6"/>,
  chevL: <path d="M15 6l-6 6 6 6"/>,
  plus: <path d="M12 5v14M5 12h14"/>,
  scroll: <><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H18a2 2 0 0 1 2 2v12.5a2.5 2.5 0 0 0 2.5 2.5"/><path d="M4 5.5v12A2.5 2.5 0 0 0 6.5 20h14"/><path d="M8 8h7M8 12h7"/></>,
  ring: <><circle cx="12" cy="14" r="6"/><path d="M9.5 8.5L8 4h8l-1.5 4.5"/></>,
  heart: <path d="M12 20s-7-4.4-9.2-9C1.3 7.7 3 4.5 6.2 4.5c2 0 3.2 1.2 3.8 2.3.6-1.1 1.8-2.3 3.8-2.3 3.2 0 4.9 3.2 3.4 6.5C19 15.6 12 20 12 20z"/>,
  rupee: <path d="M7 4h10M7 8h10M16 4c0 4-3 5.5-6 5.5H8l6 6.5"/>,
  upi: <><path d="M5 12h3l1.5 7L13 5l1.5 7H19"/></>,
  phoneCall: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>,
  download: <><path d="M12 3v12M7 10l5 5 5-5"/><path d="M4 19h16"/></>,
  message: <path d="M21 11.5a8.5 8.5 0 0 1-12.6 7.5L3 21l2-5.4A8.5 8.5 0 1 1 21 11.5z"/>,
  filter: <path d="M3 5h18M6 12h12M10 19h4"/>,
};

function Icon({ name, size, fill }) {
  const filled = name === "star" || name === "spark";
  return (
    <svg viewBox="0 0 24 24" width={size} height={size}
      fill={filled ? "currentColor" : "none"} stroke={filled ? "none" : "currentColor"}
      strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {I[name]}
    </svg>
  );
}

/* iOS-style status bar (signal/wifi/battery) */
function StatusBar({ time = "9:41" }) {
  return (
    <div className="statusbar">
      <span>{time}</span>
      <span className="sb-r">
        <svg viewBox="0 0 18 12" fill="currentColor" stroke="none">
          <rect x="0" y="8" width="3" height="4" rx="1"/><rect x="5" y="5.5" width="3" height="6.5" rx="1"/>
          <rect x="10" y="3" width="3" height="9" rx="1"/><rect x="15" y="0.5" width="3" height="11.5" rx="1"/>
        </svg>
        <svg viewBox="0 0 18 13" fill="currentColor" stroke="none">
          <path d="M9 2.5c2.6 0 5 1 6.8 2.7l1.5-1.6A11.4 11.4 0 0 0 9 .3 11.4 11.4 0 0 0 .7 3.6l1.5 1.6A9.4 9.4 0 0 1 9 2.5zm0 4c1.5 0 2.9.6 3.9 1.6l1.5-1.6A8 8 0 0 0 9 4.2 8 8 0 0 0 3.6 6.5L5.1 8.1A5.5 5.5 0 0 1 9 6.5zm0 4c.7 0 1.3.3 1.8.8L9 13.1l-1.8-1.8c.5-.5 1.1-.8 1.8-.8z"/>
        </svg>
        <span className="sb-batt"><i></i></span>
      </span>
    </div>
  );
}

/* Phone frame: theme = "dark" | "light" */
function Phone({ theme, time, children }) {
  return (
    <div className={"jk " + theme} style={{ width: 390, height: 812 }}>
      <div className="phone">
        <div className="island"></div>
        <div className="phone-screen">
          <StatusBar time={time} />
          <div className="screen-body">{children}</div>
          <div className="home-ind"></div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, StatusBar, Phone });