// devices.jsx - premium product mockups (phone, tablet, laptop) and the
// authentic Bisoux app screens rendered inside them. Exported to window.Bx*.
(function () {
  const { KissMark } = window.BisouxDesignSystem_144cac;
  const Ic = window.BxIcon;

  // --- small shared bits ---------------------------------------------------
  function Avatar({ initial, ring, size = 30, photo }) {
    const isImg = photo && !photo.startsWith("#");
    return (
      <span className={"ava" + (ring ? " ring" : "")} style={{
        width: size, height: size, fontSize: size * 0.42,
        background: isImg ? `var(--surface-sunken) url(${photo}) center/cover` : (photo || undefined),
      }}>
        {photo ? null : initial}
      </span>
    );
  }

  function StatusBar() {
    return (
      <div className="statusbar">
        <span>9:41</span>
        <span className="sb-dots">
          <Ic.signal size={16} /><Ic.wifi size={16} /><Ic.battery size={16} />
        </span>
      </div>
    );
  }

  // ===== APP SCREENS ========================================================

  // Home screen, parameterized by which partner it's "about" (whose glimpses /
  // gratitude / bisou). Hero uses the Daria variant; the Ritual uses Mathis.
  const HOME_PEOPLE = {
    daria:  { name: "Daria",  glimpses: ["site/assets/photos/daria-1.png", "site/assets/photos/daria-2.png", "site/assets/photos/daria-3.png"],  viewer: "mathis" },
    mathis: { name: "Mathis", glimpses: ["site/assets/photos/mathis-1.png", "site/assets/photos/mathis-2.png", "site/assets/photos/mathis-3.png"], viewer: "daria" },
  };
  const PORTRAIT = { daria: "site/assets/photos/portrait-daria.png", mathis: "site/assets/photos/portrait-mathis.png" };

  function AppHomeBase({ about }) {
    const p = HOME_PEOPLE[about];
    const glimpses = p.glimpses;
    return (
      <div className="appscreen bx-paper" style={{ padding: "42px 20px 60px" }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <p className="app-label">Just us</p>
            <h1 className="app-title" style={{ fontSize: 24, marginTop: 4 }}>You two, today.</h1>
          </div>
          <div style={{ display: "flex" }}>
            <Avatar size={34} photo={PORTRAIT[about]} />
            <Avatar ring size={34} photo={PORTRAIT[p.viewer]} />
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, padding: "4px 0 16px" }}>
          <div className="bx-bloom" style={{ width: 84, height: 84, borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <KissMark tone="accent" size={40} />
          </div>
          <p style={{ color: "var(--text-secondary)", fontSize: 13, margin: 0 }}>Tap to send {p.name} a bisou.</p>
        </div>

        <div className="app-card" style={{ padding: 16, display: "flex", flexDirection: "column", gap: 7 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
            <span className="app-label" style={{ whiteSpace: "nowrap" }}>Today's gratitude</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--accent)", whiteSpace: "nowrap", flex: "0 0 auto" }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }}></span>1 to write
            </span>
          </div>
          <p style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--text)", margin: 0, lineHeight: 1.25 }}>
            One thing you're grateful to {p.name} for today.
          </p>
          <span style={{ color: "var(--text-secondary)", fontSize: 12.5 }}>Write yours →</span>
        </div>

        <div style={{ marginTop: 14 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
            <span className="app-label" style={{ whiteSpace: "nowrap" }}>{p.name}'s glimpses</span>
            <span style={{ fontSize: 11.5, color: "var(--text-secondary)", whiteSpace: "nowrap" }}>fades tonight</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 7 }}>
            {glimpses.map((t, i) => (
              <div key={i} style={{ position: "relative", aspectRatio: "1 / 1", borderRadius: 10, backgroundImage: `url(${t})`, backgroundSize: "cover", backgroundPosition: "center", overflow: "hidden" }}>
                {i === 0 && (
                  <span style={{ position: "absolute", top: 6, left: 6, display: "inline-flex", alignItems: "center", gap: 5, fontSize: 9.5, color: "#fff", background: "var(--accent)", padding: "2px 7px", borderRadius: 999 }}>
                    <span style={{ width: 4, height: 4, borderRadius: 999, background: "#fff" }}></span>now
                  </span>
                )}
              </div>
            ))}
          </div>
        </div>

        <TabBar active="home" />
      </div>
    );
  }
  // Hero (first screen) is about Daria; the Ritual stage is about Mathis.
  function AppHome() { return <AppHomeBase about="daria" />; }
  function AppHomeMathis() { return <AppHomeBase about="mathis" />; }

  // Gratitude - two small thank-yous, side by side.
  function AppGratitude() {
    return (
      <div className="appscreen bx-paper" style={{ padding: "46px 20px 64px" }}>
        <p className="app-label" style={{ marginBottom: 4 }}>Daily gratitude</p>
        <h1 className="app-title" style={{ fontSize: 23, marginBottom: 18 }}>Two small thank-yous, side by side.</h1>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            { who: "Daria", ring: true, photo: "site/assets/photos/portrait-daria.png", text: "For the tea you left by the door, still warm." },
            { who: "Mathis", initial: "M", photo: "site/assets/photos/portrait-mathis.png", text: "For calling just to hear me, not for any reason." },
          ].map((g, i) => (
            <div key={i} className="app-card" style={{ padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <Avatar initial={g.initial} ring={g.ring} photo={g.photo} size={26} />
                <span style={{ fontSize: 12.5, color: "var(--text-secondary)" }}>{g.who}</span>
              </div>
              <p className="emotive" style={{ fontFamily: "var(--font-emotive)", fontSize: 18, lineHeight: 1.35, margin: 0, color: "var(--text)" }}>
                “{g.text}”
              </p>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 18 }}>
          <KissMark tone="accent" size={24} />
        </div>
        <TabBar active="home" />
      </div>
    );
  }

  // Today - your two days, side by side (great on the tablet's width).
  function AppToday() {
    const cols = [
      { who: "Daria", ring: true, photo: "site/assets/photos/portrait-daria.png", items: ["Studio until 1", "Run by the river", "Call you at 6", "Pasta, the good wine"] },
      { who: "Mathis", initial: "M", photo: "site/assets/photos/portrait-mathis.png", items: ["Early train", "Two meetings", "Market on the way home", "Gym"] },
    ];
    return (
      <div className="appscreen bx-paper" style={{ padding: "30px 30px 30px" }}>
        <div style={{ textAlign: "center", marginBottom: 22 }}>
          <p className="app-label">Today</p>
          <h1 className="app-title" style={{ fontSize: 27, marginTop: 6 }}>In each other's day, even apart.</h1>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {cols.map((c, i) => (
            <div key={i} className="app-card" style={{ padding: 18 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
                <Avatar initial={c.initial} ring={c.ring} photo={c.photo} size={30} />
                <span style={{ fontSize: 14, fontFamily: "var(--font-display)", color: "var(--text)" }}>{c.who}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {c.items.map((it, j) => (
                  <div key={j} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: j === 2 ? "var(--accent)" : "var(--border)", flex: "0 0 auto" }}></span>
                    <span style={{ fontSize: 14, color: j === 2 ? "var(--text)" : "var(--text-secondary)" }}>{it}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, marginTop: 20 }}>
          <KissMark tone="ink" size={20} />
          <span style={{ fontSize: 13, color: "var(--text-secondary)" }}>A bisou from Mathis, a moment ago.</span>
        </div>
      </div>
    );
  }

  // Moments / Kept - glimpses that fade; a bisou keeps one forever (wide layout).
  // Mathis's photos fill some tiles; the rest wait, quietly, for Daria's.
  function AppMoments() {
    const tiles = [
      { src: "site/assets/photos/mathis-4.png", kept: true },
      { src: "site/assets/photos/daria-4.png" },
      { src: "site/assets/photos/mathis-5.png" },
      { src: "site/assets/photos/daria-5.png", kept: true },
      { src: "site/assets/photos/mathis-6.png" },
      { src: "site/assets/photos/daria-6.png" },
    ];
    return (
      <div className="appscreen bx-paper" style={{ padding: "26px 30px", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <p className="app-label">Moments · Kept</p>
            <h1 className="app-title" style={{ fontSize: 25, marginTop: 5 }}>Kept with a kiss.</h1>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <Avatar ring photo="site/assets/photos/portrait-daria.png" size={30} />
            <Avatar initial="M" photo="site/assets/photos/portrait-mathis.png" size={30} />
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, flex: 1 }}>
          {tiles.map((t, i) => (
            t.empty ? (
              <div key={i} style={{ position: "relative", borderRadius: 12, minHeight: 86, background: "var(--surface-sunken)", border: "1px dashed var(--border)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <span style={{ opacity: 0.34, display: "flex" }}><KissMark tone="ink" size={20} /></span>
              </div>
            ) : (
              <div key={i} style={{ position: "relative", borderRadius: 12, backgroundImage: `url(${t.src})`, backgroundSize: "cover", backgroundPosition: t.pos || "center 22%", overflow: "hidden", minHeight: 86 }}>
                {t.kept && (
                  <span style={{ position: "absolute", top: 8, right: 8, width: 26, height: 26, borderRadius: 999, background: "rgba(255,255,255,0.82)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <KissMark tone="red" size={15} />
                  </span>
                )}
              </div>
            )
          ))}
        </div>
        <p style={{ textAlign: "center", color: "var(--text-secondary)", fontSize: 12.5, marginTop: 14 }}>
          A glimpse fades in a day. A bisou keeps it here, forever.
        </p>
      </div>
    );
  }

  // Send a bisou - the signature moment, full screen (phone option).
  function AppBisou() {
    return (
      <div className="appscreen bx-paper" style={{ padding: "52px 24px 64px", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 20 }}>
        <p className="app-label">Send a bisou</p>
        <h1 className="app-title" style={{ fontSize: 26 }}>Send Mathis a bisou.</h1>
        <div style={{ width: 150, height: 150, borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-accent)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <KissMark tone="red" size={78} />
        </div>
        <p style={{ color: "var(--text-secondary)", fontSize: 14, maxWidth: 210, lineHeight: 1.5, margin: 0 }}>
          One tap. It presses in and blooms open on her screen.
        </p>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 16px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", fontSize: 13.5, color: "var(--text)" }}>
          <Ic.sparkle size={15} /> Add a soft word
        </span>
        <TabBar active="home" />
      </div>
    );
  }

  // Paired - the warm welcome moment (tablet option).
  function AppWelcome() {
    return (
      <div className="appscreen bx-paper" style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "40px", gap: 18 }}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <Avatar ring photo="site/assets/photos/portrait-daria.png" size={58} />
          <span style={{ marginLeft: -16, display: "inline-flex" }}><Avatar initial="M" photo="site/assets/photos/portrait-mathis.png" size={58} /></span>
        </div>
        <KissMark tone="accent" size={40} />
        <h1 className="app-title" style={{ fontSize: 31, maxWidth: 380, lineHeight: 1.12 }}>Mathis is here. Your space is ready.</h1>
        <p style={{ color: "var(--text-secondary)", fontSize: 15.5, maxWidth: 320, lineHeight: 1.55, margin: 0 }}>
          A private world for two - just the two of you, from today.
        </p>
        <span style={{ marginTop: 8, padding: "12px 24px", borderRadius: 999, background: "var(--accent)", color: "#F4EFE5", fontSize: 14.5, fontWeight: 500 }}>
          Open our space
        </span>
      </div>
    );
  }

  function TabBar({ active }) {
    const tabs = [
      { id: "home", label: "Home", I: Ic.heart },
      { id: "today", label: "Today", I: Ic.sun },
      { id: "moments", label: "Moments", I: Ic.camera },
      { id: "us", label: "Us", I: Ic.settings },
    ];
    return (
      <div className="app-tabbar">
        {tabs.map((t) => (
          <div key={t.id} className={"tab" + (t.id === active ? " active" : "")}>
            <t.I size={22} {...(t.id === active ? { fill: "currentColor" } : {})} />
            <span>{t.label}</span>
          </div>
        ))}
      </div>
    );
  }

  // ===== DEVICE FRAMES ======================================================
  // NOTE: frames take (props) + omit instead of `{ children, ...rest }` -
  // Babel standalone's script-tag mode downlevels rest-destructuring into a
  // top-level `const _excluded` helper that collides across modules and
  // breaks the page with a SyntaxError.
  function omitChildren(props) {
    const rest = {};
    for (const k in props) if (k !== "children") rest[k] = props[k];
    return rest;
  }
  function PhoneFrame(props) {
    const children = props.children, rest = omitChildren(props);
    return (
      <div className="phone" {...rest}>
        <div className="device-screen">
          <div className="device-glare"></div>
          <StatusBar />
          {children}
        </div>
        <div className="notch"></div>
      </div>
    );
  }
  function TabletFrame(props) {
    const children = props.children, rest = omitChildren(props);
    return (
      <div className="tablet" {...rest}>
        <div className="device-screen">
          <div className="device-glare"></div>
          {children}
        </div>
      </div>
    );
  }
  function LaptopFrame(props) {
    const children = props.children, rest = omitChildren(props);
    return (
      <div className="laptop" {...rest}>
        <div className="lid">
          <div className="camera"></div>
          <div className="device-screen">
            <div className="device-glare"></div>
            {children}
          </div>
        </div>
        <div className="base"></div>
      </div>
    );
  }

  Object.assign(window, {
    BxPhoneFrame: PhoneFrame, BxTabletFrame: TabletFrame, BxLaptopFrame: LaptopFrame,
    BxAppHome: AppHome, BxAppHomeMathis: AppHomeMathis, BxAppGratitude: AppGratitude, BxAppToday: AppToday, BxAppMoments: AppMoments,
    BxAppBisou: AppBisou, BxAppWelcome: AppWelcome,
    BxAvatar: Avatar,
  });
})();