// TIM "Agente de Contas" prototype — device frame, status bar, brand icons.
// Faithful to the attached Figma (375px screen width, exact TIM colors).

const TIM = {
  blue:   "#0026D9",
  navy:   "#002E46",
  red:    "#EB0028",
  blue2:  "#3152EF",
  grayBg: "#F0F1F2",
  border: "#E5E5E5",
  stroke: "#BABABA",
  txtGray:"#696969",
  pink:   "#FBCCD4",
  yellow: "#FAB932",
  yellowBg:"#FEF5E0",
};

// ── Brand mark: TAIS smile (two eyes + smile), red. ──────────────
function SmileLogo({ size = 28, color = TIM.red }) {
  return (
    <svg width={size} height={size} viewBox="0 0 28 28" fill="none" aria-label="TIM" role="img">
      <rect x="6.5" y="9" width="6" height="2.6" rx="1.3" fill={color} />
      <rect x="15.5" y="9" width="6" height="2.6" rx="1.3" fill={color} />
      <path d="M6 15.2c1.3 3.2 4.3 5.3 8 5.3s6.7-2.1 8-5.3" stroke={color} strokeWidth="2.8" strokeLinecap="round" fill="none" />
    </svg>
  );
}

// ── TIM logo: four-square mark (home dark header), monochrome. ───
function TimSquares({ size = 30, color = "#fff" }) {
  const u = size / 3.4, g = u * 0.18;
  const sq = (x, y) => <rect x={x} y={y} width={u} height={u} rx={u * 0.16} fill={color} />;
  const o = (size - (u * 2 + g)) / 2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label="TIM">
      {sq(o, o)}{sq(o + u + g, o)}
      {sq(o, o + u + g)}{sq(o + u + g, o + u + g)}
    </svg>
  );
}

const Ic = {
  close: (c = "#000", s = 24) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke={c} strokeWidth="2" strokeLinecap="round"/></svg>
  ),
  chevR: (c = "#000", s = 24) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M9 5l7 7-7 7" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  chevDown: (c = "#fff", s = 20) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  menu: (c = "#fff", s = 24) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3 6h18M3 12h18M3 18h18" stroke={c} strokeWidth="2" strokeLinecap="round"/></svg>
  ),
  thumbUp: (c = TIM.txtGray, s = 20, fill = "none") => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={fill === "none" ? "none" : c}><path d="M7 10v10H4a1 1 0 01-1-1v-8a1 1 0 011-1h3zm0 0l4.5-7a2 2 0 013.7 1.2L14.5 9H20a2 2 0 012 2.3l-1.3 7A2 2 0 0118.7 20H7" stroke={c} strokeWidth="1.7" strokeLinejoin="round" fill={fill}/></svg>
  ),
  thumbDown: (c = TIM.txtGray, s = 20, fill = "none") => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={fill === "none" ? "none" : c}><path d="M17 14V4h3a1 1 0 011 1v8a1 1 0 01-1 1h-3zm0 0l-4.5 7a2 2 0 01-3.7-1.2L9.5 15H4a2 2 0 01-2-2.3l1.3-7A2 2 0 015.3 4H17" stroke={c} strokeWidth="1.7" strokeLinejoin="round" fill={fill}/></svg>
  ),
  alertTri: (c = TIM.red, s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3.5L22 20H2L12 3.5z" stroke={c} strokeWidth="2" strokeLinejoin="round"/><path d="M12 10v4" stroke={c} strokeWidth="2" strokeLinecap="round"/><circle cx="12" cy="17" r="1.1" fill={c}/></svg>
  ),
  clock: (c = TIM.yellow, s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={c} strokeWidth="2"/><path d="M12 7v5l3.5 2" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  refresh: (c = "#000", s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M4 7h11a4 4 0 014 4M20 17H9a4 4 0 01-4-4" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><path d="M12 4l3 3-3 3M12 14l-3 3 3 3" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
  ),
  info: (c = TIM.blue, s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={c} strokeWidth="2"/><path d="M12 11v5" stroke={c} strokeWidth="2" strokeLinecap="round"/><circle cx="12" cy="7.8" r="1.2" fill={c}/></svg>
  ),
  pix: (c = TIM.navy, s = 26) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3.2l3.4 3.4a2 2 0 010 2.8L12 12.8 8.6 9.4a2 2 0 010-2.8L12 3.2z" fill={c}/><path d="M6.6 9.4L3.2 12.8a2 2 0 000 2.8l3.4 3.4 2.4-2.4a2 2 0 010-2.8L6.6 9.4zM17.4 9.4l-2.4 2.4a2 2 0 010 2.8l2.4 2.4 3.4-3.4a2 2 0 000-2.8L17.4 9.4zM12 14.4l-2.2 2.2 2.2 2.2 2.2-2.2L12 14.4z" fill={c} opacity="0.55"/></svg>
  ),
  share: (c = TIM.stroke, s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="18" cy="5.5" r="2.4" stroke={c} strokeWidth="1.8"/><circle cx="6" cy="12" r="2.4" stroke={c} strokeWidth="1.8"/><circle cx="18" cy="18.5" r="2.4" stroke={c} strokeWidth="1.8"/><path d="M8.1 10.9l7.8-4M8.1 13.1l7.8 4" stroke={c} strokeWidth="1.8"/></svg>
  ),
  copy: (c = TIM.txtGray, s = 18) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="11" height="11" rx="2.5" stroke={c} strokeWidth="1.8"/><path d="M15 9V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7a2 2 0 002 2h3" stroke={c} strokeWidth="1.8"/></svg>
  ),
  whatsapp: (c = "#000", s = 24) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3.5 20.5l1.3-4.6A8 8 0 1112 20a8 8 0 01-4-1.1l-4.5 1.6z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/><path d="M9.2 8.2c.2-.5.4-.5.6-.5h.5c.2 0 .4 0 .6.5l.7 1.6c.1.2 0 .4 0 .5l-.5.6c-.1.2-.2.3 0 .6.3.5.8 1.2 1.5 1.7.8.6 1.2.7 1.4.6l.6-.6c.2-.2.4-.1.6 0l1.5.8c.2.1.4.2.4.4 0 .5-.2 1.3-.6 1.5-.4.3-1.4.7-2.6.3-1.4-.5-3-1.4-4.3-3.2-.9-1.2-1.4-2.5-1.4-3.5 0-.8.4-1.3.5-1.6z" fill={c}/></svg>
  ),
  bars: (c = "#000", s = 22) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><rect x="4" y="6" width="6" height="3" rx="1.2" fill={c}/><rect x="13" y="6" width="6" height="3" rx="1.2" fill={c}/><rect x="4" y="13" width="6" height="3" rx="1.2" fill={c}/><rect x="13" y="13" width="6" height="3" rx="1.2" fill={c}/></svg>
  ),
};

// ── iOS status bar (color adapts per screen). ───────────────────
function StatusBar({ tone = "dark" }) {
  const c = tone === "dark" ? "#fff" : "#000";
  return (
    <div style={{
      height: 54, display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 30px 0 34px", position: "relative", zIndex: 6, flexShrink: 0,
    }}>
      <span style={{ fontSize: 16, fontWeight: 700, color: c, letterSpacing: "-0.2px", fontFamily: "'Hanken Grotesk', system-ui" }}>9:41</span>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <svg width="18" height="12" viewBox="0 0 18 12"><rect x="0" y="7" width="3" height="5" rx="0.7" fill={c}/><rect x="5" y="4.5" width="3" height="7.5" rx="0.7" fill={c}/><rect x="10" y="2" width="3" height="10" rx="0.7" fill={c}/><rect x="15" y="0" width="3" height="12" rx="0.7" fill={c}/></svg>
        <svg width="16" height="12" viewBox="0 0 16 12"><path d="M8 2.7c2 0 3.9.8 5.3 2.1l1-1A9 9 0 008 1a9 9 0 00-6.3 2.8l1 1A7.4 7.4 0 018 2.7z" fill={c}/><path d="M8 6c1 0 2 .4 2.7 1.1l1-1A6 6 0 008 4.4 6 6 0 004.3 6l1 1A4 4 0 018 6z" fill={c}/><circle cx="8" cy="9.4" r="1.4" fill={c}/></svg>
        <svg width="25" height="12" viewBox="0 0 25 12"><rect x="0.5" y="0.5" width="21" height="11" rx="3" stroke={c} strokeOpacity="0.4" fill="none"/><rect x="2" y="2" width="18" height="8" rx="1.6" fill={c}/><rect x="23" y="4" width="1.5" height="4" rx="0.75" fill={c} fillOpacity="0.5"/></svg>
      </div>
    </div>
  );
}

// ── Realistic iPhone frame with dynamic island + home indicator. ─
function Phone({ statusTone = "dark", children }) {
  return (
    <div className="device" style={{
      width: 399, height: 836, borderRadius: 56, padding: 12, boxSizing: "border-box",
      background: "linear-gradient(150deg,#2b2b2e,#0d0d0f 55%)",
      boxShadow: "0 50px 90px -20px rgba(0,0,0,0.55), 0 0 0 1.5px rgba(255,255,255,0.08), inset 0 0 0 2px #000",
      position: "relative", flexShrink: 0,
    }}>
      <div style={{
        width: 375, height: 812, borderRadius: 45, overflow: "hidden",
        position: "relative", background: "#fff", display: "flex", flexDirection: "column",
      }}>
        {/* dynamic island */}
        <div style={{
          position: "absolute", top: 11, left: "50%", transform: "translateX(-50%)",
          width: 118, height: 34, borderRadius: 20, background: "#000", zIndex: 40, pointerEvents: "none",
        }} />
        <div style={{ position: "absolute", top: 0, left: 0, right: 0, zIndex: 30 }}>
          <StatusBar tone={statusTone} />
        </div>
        {children}
        {/* home indicator */}
        <div style={{
          position: "absolute", bottom: 7, left: "50%", transform: "translateX(-50%)",
          width: 134, height: 5, borderRadius: 100, zIndex: 41,
          background: statusTone === "dark" ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.32)", pointerEvents: "none",
        }} />
      </div>
    </div>
  );
}

Object.assign(window, { TIM, SmileLogo, TimSquares, Ic, StatusBar, Phone });
