/* global React */
// FirstTakes — marketing mockup primitives.
// Reuses the real app screens (../app/chrome.jsx + ../app/screens.jsx) inside
// device frames sized for App Store / Google Play / web. Load AFTER those two.

const FTM = window.FirstTakesDesignSystem_adb0cc;
const { Icon, RecordButton } = FTM;

// ---- A mid-record still (RecordScreen is stateful; this is the frozen frame) --
// Matches the app's record screen: preview letterboxed to the 4:5 feed crop
// with solid black bars, the prompt at the very top over the black bar, the
// status pill + option pills under the segment bar, grid inside the frame.
function RecordStill() {
  const progress = 0.62;
  const remaining = Math.ceil((1 - progress) * 5); // 2
  const PROMPT = (window.FTMedia && window.FTMedia.prompt) ||
    "Show us your \u2018just woke up\u2019 face \u2014 messy hair, groggy, the real thing.";
  return (
    <div style={{ position: "absolute", inset: 0, background: "#000", display: "flex", flexDirection: "column" }}>
      {/* camera preview, black-barred to the 4:5 feed crop */}
      <div style={{ position: "absolute", left: 0, right: 0, top: "50%", transform: "translateY(-50%)", aspectRatio: "4 / 5", overflow: "hidden", background: "radial-gradient(130% 100% at 50% 0%, #2c2c2c 0%, #141414 70%, #000 100%)" }}>
        {(() => {
          const m = window.FTMedia;
          const u = m && m.enabled ? m.record : null;
          return u ? <img src={u} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: m.bw ? "grayscale(1)" : "none" }} /> : null;
        })()}
        {/* rule-of-thirds grid \u2014 only inside the visible 4:5 band */}
        {[1, 2].map((n) => (
          <React.Fragment key={n}>
            <div style={{ position: "absolute", top: 0, bottom: 0, left: `${(n * 100) / 3}%`, width: 1, background: "rgba(255,255,255,0.22)" }} />
            <div style={{ position: "absolute", left: 0, right: 0, top: `${(n * 100) / 3}%`, height: 1, background: "rgba(255,255,255,0.22)" }} />
          </React.Fragment>
        ))}
      </div>
      <window.StatusBar />
      <div style={{ position: "relative", flex: 1, display: "flex", flexDirection: "column", padding: 20 }}>
        {/* challenge prompt \u2014 top of the screen, over the black crop bar */}
        <div style={{ alignSelf: "stretch", background: "rgba(0,0,0,0.5)", border: "1px solid var(--border)", borderRadius: "var(--radius-field)", padding: "8px 12px" }}>
          <span style={{ font: "var(--text-caption)", color: "#fff" }}>{PROMPT}</span>
        </div>
        <div style={{ height: 4, borderRadius: 999, background: "rgba(255,255,255,0.24)", overflow: "hidden", marginTop: 12 }}>
          <div style={{ height: "100%", width: `${progress * 100}%`, background: "var(--accent)" }} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 12 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(0,0,0,0.5)", borderRadius: 999, padding: "6px 10px" }}>
            <Icon name="fiber_manual_record" size={10} fill color="var(--live)" />
            <span className="ft-num" style={{ color: "#fff", fontSize: 13 }}>0:0{remaining}</span>
          </span>
          <div style={{ display: "flex", gap: 8 }}>
            {[["timer_off", "#fff"], ["flash_off", "#fff"], ["grid_3x3", "var(--accent)"]].map(([ic, color]) => (
              <span key={ic} style={{ display: "inline-flex", background: "rgba(0,0,0,0.5)", borderRadius: 999, padding: 8 }}>
                <Icon name={ic} size={18} color={color} />
              </span>
            ))}
          </div>
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", justifyContent: "center" }}>
          <div style={{ display: "flex", gap: 2, background: "rgba(0,0,0,0.4)", borderRadius: 999, padding: 4 }}>
            {["0.5\u00d7", "1\u00d7", "2\u00d7"].map((z, i) => (
              <span key={z} style={{ width: 36, height: 36, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: i === 1 ? "#fff" : "transparent", color: i === 1 ? "#000" : "#fff", font: "500 11px/1 var(--font-ui)" }}>{z}</span>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 16, marginBottom: 8 }}>
          <Icon name="close" size={26} color="#fff" />
          <RecordButton recording progress={progress} />
          <Icon name="cameraswitch" size={26} color="#fff" />
        </div>
      </div>
    </div>
  );
}

// ---- The screen stack inside the bezel (status bar + screen + floating nav) --
// The nav is the app's floating pill: it overlays the tab content, and its
// centre button reflects the challenge lifecycle per state \u2014 "Record" while
// the window is open and unposted, a check once posted (still labelled "Today"
// — the icon carries the state, the label names the destination).
function PhoneScreen({ state }) {
  const { StatusBar, FloatingNav, FeedScreen, FriendsScreen, ProfileScreen, PromptBoardScreen } = window;
  if (state === "record") return <RecordStill />;
  // The board is a modal sheet: it covers the floating nav, so it renders
  // full-bleed with only the status bar above it.
  if (state === "board") {
    return (
      <React.Fragment>
        <StatusBar />
        <div style={{ flex: 1, overflow: "hidden" }}><PromptBoardScreen /></div>
      </React.Fragment>
    );
  }

  let body, tab, center;
  if (state === "today") { body = <FeedScreen posted={false} onRecord={() => {}} onOpenChallenge={() => {}} />; tab = "today"; center = "record"; }
  else if (state === "feed") { body = <FeedScreen posted={true} onRecord={() => {}} onOpenChallenge={() => {}} />; tab = "today"; center = "done"; }
  else if (state === "friends") { body = <FriendsScreen />; tab = "friends"; center = "record"; }
  else { body = <ProfileScreen />; tab = "profile"; center = "done"; }

  return (
    <React.Fragment>
      <StatusBar />
      <div style={{ flex: 1, overflow: "hidden" }}>{body}</div>
      <FloatingNav active={tab} center={center} friendsBadge={state === "friends" ? 1 : 0} onChange={() => {}} />
    </React.Fragment>
  );
}

// ---- Device bezels -----------------------------------------------------------
// Screen canvas is the app's native 390×844; we scale the whole bezel up.
const SCREEN_W = 390, SCREEN_H = 844;

function IPhoneBezel({ scale, state }) {
  const border = 11;
  return (
    <div style={{ width: (SCREEN_W + border * 2) * scale, height: (SCREEN_H + border * 2) * scale, flex: "none" }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: "top left", width: SCREEN_W + border * 2, height: SCREEN_H + border * 2 }}>
        <div style={{ width: SCREEN_W, height: SCREEN_H, background: "var(--bg)", borderRadius: 52, border: `${border}px solid #000`, position: "relative", overflow: "hidden", boxSizing: "content-box" }}>
          <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 128, height: 30, background: "#000", borderRadius: "0 0 18px 18px", zIndex: 30 }} />
          <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
            <PhoneScreen state={state} />
          </div>
        </div>
      </div>
    </div>
  );
}

function AndroidBezel({ scale, state }) {
  const border = 9;
  return (
    <div style={{ width: (SCREEN_W + border * 2) * scale, height: (SCREEN_H + border * 2) * scale, flex: "none" }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: "top left", width: SCREEN_W + border * 2, height: SCREEN_H + border * 2 }}>
        <div style={{ width: SCREEN_W, height: SCREEN_H, background: "var(--bg)", borderRadius: 38, border: `${border}px solid #000`, position: "relative", overflow: "hidden", boxSizing: "content-box" }}>
          {/* punch-hole camera */}
          <div style={{ position: "absolute", top: 11, left: "50%", transform: "translateX(-50%)", width: 11, height: 11, borderRadius: "50%", background: "#000", zIndex: 30 }} />
          <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column" }}>
            <PhoneScreen state={state} />
          </div>
        </div>
      </div>
    </div>
  );
}

function MarketingPhone({ scale = 2.45, state = "today", android = false }) {
  return android ? <AndroidBezel scale={scale} state={state} /> : <IPhoneBezel scale={scale} state={state} />;
}

// ---- Headline with the brand's amber full-stop -------------------------------
// lines: array of strings; an asterisk in a line marks where the amber period goes.
function Headline({ lines, size = 92 }) {
  return (
    <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size, lineHeight: 1.04, letterSpacing: "-0.03em", color: "var(--text)" }}>
      {lines.map((ln, i) => {
        const dot = ln.endsWith(".");
        const text = dot ? ln.slice(0, -1) : ln;
        return (
          <span key={i} style={{ display: "block" }}>
            {text}{dot && <span style={{ color: "var(--accent)" }}>.</span>}
          </span>
        );
      })}
    </h2>
  );
}

function Eyebrow({ children }) {
  return (
    <div style={{ textTransform: "uppercase", fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 22, letterSpacing: "3px", color: "var(--text-muted)" }}>
      {children}
    </div>
  );
}

Object.assign(window, { MarketingPhone, RecordStill, PhoneScreen, Headline, Eyebrow });