// WORTH platform sweep — abstract device frames.
// No hardware bezels/notches — clean rounded frames floating on warm paper,
// each carrying authentic per-OS SOFTWARE chrome (iOS status bar + home
// indicator, Android status bar + gesture pill, macOS window controls).
// The app's own nav (tab bar / nav rail / FAB) lives in the SCREEN content,
// not here — that's where platform fidelity is expressed.

const PAPER_BACKDROP =
  "radial-gradient(1100px 560px at 50% -8%, #f0ede2, #e6e1d4 60%, #ddd7c8)";
const PAPER_BACKDROP_DARK =
  "radial-gradient(1100px 560px at 50% -8%, #1b1b18, #121210 60%, #0c0c0a)";

// Device + artboard dimensions (artboard = device + 28px floating margin).
const DEVICE = {
  phoneIOS:        { w: 384, h: 832, abW: 412, abH: 860, radius: 46, statusH: 52, footerH: 26 },
  phoneAndroid:    { w: 400, h: 858, abW: 428, abH: 886, radius: 34, statusH: 32, footerH: 26 },
  tabletPortrait:  { w: 744, h: 1010, abW: 776, abH: 1042, radius: 30, statusH: 28, footerH: 0 },
  tabletLandscape: { w: 1024, h: 744, abW: 1056, abH: 776, radius: 30, statusH: 28, footerH: 0 },
  desktop:         { w: 1280, h: 800, abW: 1312, abH: 832, radius: 14, statusH: 40, footerH: 0 },
};

// ── Status-bar glyphs ────────────────────────────────────────────────────
function CellularGlyph({ color }) {
  return (
    <svg width="17" height="11" viewBox="0 0 17 11" fill={color} style={{ display: "block" }}>
      <rect x="0" y="7" width="3" height="4" rx="1" />
      <rect x="4.6" y="5" width="3" height="6" rx="1" />
      <rect x="9.2" y="2.6" width="3" height="8.4" rx="1" />
      <rect x="13.8" y="0" width="3" height="11" rx="1" />
    </svg>
  );
}
function WifiGlyph({ color }) {
  return (
    <svg width="16" height="11" viewBox="0 0 16 11" fill="none" stroke={color} strokeWidth="1.4" style={{ display: "block" }}>
      <path d="M1 3.2A11 11 0 0 1 15 3.2" strokeLinecap="round" />
      <path d="M3.4 5.7A7 7 0 0 1 12.6 5.7" strokeLinecap="round" />
      <path d="M5.9 8.2A3.2 3.2 0 0 1 10.1 8.2" strokeLinecap="round" />
      <circle cx="8" cy="10" r="0.9" fill={color} stroke="none" />
    </svg>
  );
}
function BatteryGlyph({ color, fill = 0.82, fillColor }) {
  return (
    <svg width="26" height="13" viewBox="0 0 26 13" style={{ display: "block" }}>
      <rect x="0.6" y="0.6" width="22" height="11.8" rx="3.2" fill="none" stroke={color} strokeOpacity="0.5" strokeWidth="1.1" />
      <rect x="2.2" y="2.2" width={18.8 * fill} height="8.6" rx="1.8" fill={fillColor || color} />
      <rect x="24" y="4" width="1.6" height="5" rx="0.8" fill={color} fillOpacity="0.5" />
    </svg>
  );
}

// ── iOS status bar ───────────────────────────────────────────────────────
function IOSStatusBar({ ink, time = "9:41" }) {
  return (
    <div style={{
      height: DEVICE.phoneIOS.statusH, flexShrink: 0, display: "flex", alignItems: "center",
      justifyContent: "space-between", padding: "0 30px 0 34px", fontFamily: "var(--font-text)",
    }}>
      <div style={{ fontSize: 16, fontWeight: 600, color: ink, letterSpacing: "0.01em", fontVariantNumeric: "tabular-nums" }}>{time}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
        <CellularGlyph color={ink} />
        <WifiGlyph color={ink} />
        <BatteryGlyph color={ink} fill={0.78} fillColor={ink} />
      </div>
    </div>
  );
}

// ── Android status bar (Material 3 — clock left, status icons right) ───────
function AndroidStatusBar({ ink, time = "9:41" }) {
  return (
    <div style={{
      height: DEVICE.phoneAndroid.statusH, flexShrink: 0, display: "flex", alignItems: "center",
      justifyContent: "space-between", padding: "0 18px 0 22px", fontFamily: "var(--font-text)",
    }}>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: ink, fontVariantNumeric: "tabular-nums" }}>{time}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <WifiGlyph color={ink} />
        <CellularGlyph color={ink} />
        <BatteryGlyph color={ink} fill={0.7} fillColor={ink} />
      </div>
    </div>
  );
}

function TabletStatusBar({ ink, os, time = "9:41 AM" }) {
  const ios = os === "ios";
  return (
    <div style={{
      height: DEVICE.tabletPortrait.statusH, flexShrink: 0, display: "flex", alignItems: "center",
      justifyContent: "space-between", padding: "0 26px", fontFamily: "var(--font-text)",
    }}>
      <div style={{ fontSize: 14, fontWeight: 600, color: ink, fontVariantNumeric: "tabular-nums" }}>{ios ? time : "9:41"}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <WifiGlyph color={ink} />
        <CellularGlyph color={ink} />
        <BatteryGlyph color={ink} fill={0.8} fillColor={ink} />
      </div>
    </div>
  );
}

// ── Footers ────────────────────────────────────────────────────────────────
function HomeIndicator({ ink }) {
  return (
    <div style={{ height: DEVICE.phoneIOS.footerH, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ width: 134, height: 5, borderRadius: 3, background: ink, opacity: 0.85 }} />
    </div>
  );
}
function GesturePill({ ink }) {
  return (
    <div style={{ height: DEVICE.phoneAndroid.footerH, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ width: 118, height: 4, borderRadius: 2, background: ink, opacity: 0.55 }} />
    </div>
  );
}

// ── Device shells ──────────────────────────────────────────────────────────
function Shell({ d, theme, children }) {
  const dark = theme === "dark";
  return (
    <div className={dark ? "dark" : undefined} style={{
      width: "100%", height: "100%", boxSizing: "border-box",
      background: dark ? PAPER_BACKDROP_DARK : PAPER_BACKDROP,
      display: "grid", placeItems: "center", padding: 14,
    }}>
      <div style={{
        width: d.w, height: d.h, background: "var(--paper)", borderRadius: d.radius,
        border: "1px solid var(--line)", boxShadow: "0 22px 70px rgba(31,28,20,0.22)",
        overflow: "hidden", display: "flex", flexDirection: "column", position: "relative",
      }}>
        {children}
      </div>
    </div>
  );
}

function PhoneFrame({ os = "ios", theme = "light", time, children }) {
  const dark = theme === "dark";
  const ink = dark ? "#fcfcfc" : "#171713";
  const d = os === "ios" ? DEVICE.phoneIOS : DEVICE.phoneAndroid;
  return (
    <Shell d={d} theme={theme}>
      {os === "ios" ? <IOSStatusBar ink={ink} time={time} /> : <AndroidStatusBar ink={ink} time={time} />}
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", position: "relative" }}>
        {children}
      </div>
      {os === "ios" ? <HomeIndicator ink={ink} /> : <GesturePill ink={ink} />}
    </Shell>
  );
}

function TabletFrame({ os = "ios", orientation = "landscape", theme = "light", children }) {
  const dark = theme === "dark";
  const ink = dark ? "#fcfcfc" : "#171713";
  const d = orientation === "landscape" ? DEVICE.tabletLandscape : DEVICE.tabletPortrait;
  return (
    <Shell d={d} theme={theme}>
      <TabletStatusBar ink={ink} os={os} />
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", position: "relative" }}>
        {children}
      </div>
    </Shell>
  );
}

// macOS-style desktop window (abstract, no browser tab bar — native-app feel)
function DesktopFrame({ theme = "light", title = "WORTH", children }) {
  const dark = theme === "dark";
  const d = DEVICE.desktop;
  return (
    <div className={dark ? "dark" : undefined} style={{
      width: "100%", height: "100%", boxSizing: "border-box",
      background: dark ? PAPER_BACKDROP_DARK : PAPER_BACKDROP,
      display: "grid", placeItems: "center", padding: 16,
    }}>
      <div style={{
        width: d.w, height: d.h, background: "var(--paper)", borderRadius: d.radius,
        border: "1px solid var(--line)", boxShadow: "0 30px 90px rgba(31,28,20,0.30)",
        overflow: "hidden", display: "flex", flexDirection: "column",
      }}>
        <div style={{
          height: d.statusH, flexShrink: 0, display: "flex", alignItems: "center", padding: "0 16px",
          background: dark ? "#161616" : "#f4f1e8", borderBottom: "1px solid var(--line)", gap: 8,
        }}>
          <div style={{ display: "flex", gap: 8 }}>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: "#ff5f57" }} />
            <span style={{ width: 12, height: 12, borderRadius: 6, background: "#febc2e" }} />
            <span style={{ width: 12, height: 12, borderRadius: 6, background: "#28c840" }} />
          </div>
          <div style={{
            flex: 1, textAlign: "center", fontFamily: "var(--font-text)", fontSize: 13,
            fontWeight: 600, color: "var(--muted)", letterSpacing: "0.02em",
          }}>{title}</div>
          <div style={{ width: 52 }} />
        </div>
        <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", position: "relative" }}>
          {children}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DEVICE, PhoneFrame, TabletFrame, DesktopFrame, CellularGlyph, WifiGlyph, BatteryGlyph });