/* global React */
const { useState, useEffect, useRef } = React;

/* ---------- iPad frame: designs are authored at 820×1180 and scaled ---------- */
function IPad({ width = 500, children }) {
  const BASE_W = 820, BASE_H = 1180;
  const scale = width / BASE_W;
  const screenW = width;
  const screenH = Math.round(BASE_H * scale);
  const pad = Math.round(width * 0.028);
  const radius = Math.round(width * 0.085);
  return (
    <div className="ipad" style={{ "--r": radius + "px", "--pad": pad + "px", width: screenW + pad * 2 }}>
      <div className="ipad-cam"></div>
      <div className="ipad-screen" style={{ width: screenW, height: screenH }}>
        <div className="ipad-surface" style={{ zoom: scale, width: BASE_W, height: BASE_H }}>
          {children}
        </div>
      </div>
    </div>
  );
}

/* ---------- status bar ---------- */
function StatusBar({ time = "9:41", light = false }) {
  return (
    <div className={"statusbar" + (light ? " light" : "")}>
      <span>{time}</span>
      <span className="sb-icons">
        {/* wifi */}
        <svg width="26" height="20" viewBox="0 0 26 20" fill="currentColor"><path d="M13 4.2c3.7 0 7.1 1.4 9.6 3.8l1.7-1.8C21.3 3.3 17.3 1.7 13 1.7S4.7 3.3 1.7 6.2L3.4 8C5.9 5.6 9.3 4.2 13 4.2zm0 4.6c2.4 0 4.6.9 6.3 2.5l1.7-1.8C18.9 7.5 16.1 6.3 13 6.3S7.1 7.5 5 9.5l1.7 1.8C8.4 9.7 10.6 8.8 13 8.8zm0 4.6c1.1 0 2.2.5 3 1.3l1.7-1.8c-1.2-1.3-2.9-2-4.7-2s-3.5.7-4.7 2l1.7 1.8c.8-.8 1.9-1.3 3-1.3zm0 4.4l2.2-2.3c-.6-.6-1.4-1-2.2-1s-1.6.4-2.2 1L13 18.4z"/></svg>
        {/* battery */}
        <svg width="32" height="16" viewBox="0 0 32 16" fill="none"><rect x="1" y="2" width="25" height="12" rx="3" stroke="currentColor" strokeWidth="1.4" opacity="0.45"/><rect x="3" y="4" width="19" height="8" rx="1.5" fill="currentColor"/><rect x="28" y="5.5" width="2.5" height="5" rx="1.2" fill="currentColor" opacity="0.55"/></svg>
      </span>
    </div>
  );
}

/* ---------- app icon (brandish colored tile + glyph) ---------- */
const APPS = {
  youtube:   { bg: "#e7322a", fg: "#fff", glyph: "▶", label: "YouTube" },
  shorts:    { bg: "#e7322a", fg: "#fff", glyph: "S",  label: "YouTube Shorts" },
  x:         { bg: "#16140f", fg: "#fff", glyph: "𝕏", label: "X" },
  tiktok:    { bg: "#16140f", fg: "#fff", glyph: "♪", label: "TikTok" },
  instagram: { bg: "linear-gradient(135deg,#f9a13b,#e23478 45%,#9b35c9)", fg: "#fff", glyph: "◎", label: "Instagram" },
  reels:     { bg: "linear-gradient(135deg,#f9a13b,#e23478 45%,#9b35c9)", fg: "#fff", glyph: "▶", label: "Instagram Reels" },
  facebook:  { bg: "#3c66c4", fg: "#fff", glyph: "f", label: "Facebook" },
  market:    { bg: "linear-gradient(135deg,#23c0e8,#3c66c4)", fg: "#fff", glyph: "⌂", label: "Marketplace" },
};
function AppIcon({ app, className = "ico", size }) {
  const a = APPS[app] || { bg: "#999", fg: "#fff", glyph: "?" };
  const st = { background: a.bg };
  if (size) Object.assign(st, { width: size, height: size, flex: `0 0 ${size}px`, fontSize: size * 0.42 });
  return <span className={className} style={st}>{a.glyph}</span>;
}

/* small inline icons */
const Icon = {
  lock: (p) => <svg width="17" height="17" viewBox="0 0 24 24" fill="none" {...p}><rect x="4.5" y="10.5" width="15" height="11" rx="2.5" stroke="currentColor" strokeWidth="1.8"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" stroke="currentColor" strokeWidth="1.8"/></svg>,
  back: (p) => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" {...p}><path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  sun: (p) => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="4.2" stroke="currentColor" strokeWidth="1.8"/><path d="M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5.1 5.1l1.7 1.7M17.2 17.2l1.7 1.7M18.9 5.1l-1.7 1.7M6.8 17.2l-1.7 1.7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>,
  home: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" {...p}><path d="M4 11.5L12 5l8 6.5M6 10v9h12v-9" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  shield: (p) => <svg width="26" height="26" viewBox="0 0 24 24" fill="none" {...p}><path d="M12 3l7 2.5v5.5c0 4.6-3 8-7 9.5-4-1.5-7-4.9-7-9.5V5.5L12 3z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>,
  check: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><path d="M5 13l4 4 10-11" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  clock: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M12 7v5.2l3.4 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

Object.assign(window, { IPad, StatusBar, AppIcon, APPS, Icon });