// ─────────────────────────────────────────────────────────────────
// Phase 5 — Advertising (2) + Affiliate (1) = 3 screens
// ─────────────────────────────────────────────────────────────────

// ── AD-1 · Campaign Builder ──────────────────────────────────────
const AdCampaignBuilderScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="New campaign" left={<I.X size={22} />} right={<Overline style={{ color: "var(--accent)" }}>DRAFT</Overline>} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>STEP 2 OF 4 · TARGET</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>Who sees this?</div>

      <Overline style={{ color: "var(--text-secondary)", marginTop: 20 }}>CAMPAIGN</Overline>
      <div style={{ marginTop: 8 }}>
        {[["NAME", "Open Mat capsule · launch"], ["OBJECTIVE", "Drive store visits"], ["FORMAT", "Feed card · 16:9"]].map(([l, v]) => (
          <div key={l} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{l}</Overline>
            <span className="t-body-bold" style={{ maxWidth: 200, textAlign: "right" }}>{v}</span>
          </div>
        ))}
      </div>

      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>AUDIENCE</Overline>
      <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }}>
        {[
          { l: "Wrestlers · 65 FS / 70 FS / 74 FS", on: true },
          { l: "USA · TX / IA / OH / PA", on: true },
          { l: "Followed by 12+ sponsors", on: false },
          { l: "Posted match in last 90d", on: true },
          { l: "Subscribed to Cael Sanderson", on: false },
        ].map((c) => (
          <div key={c.l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 14px", border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)" }}>
            <span className="t-body">{c.l}</span>
            <span style={{ width: 18, height: 18, border: c.on ? "none" : "1.5px solid var(--border-default)", background: c.on ? "var(--text-primary)" : "transparent", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--bg-primary)" }}>
              {c.on && <I.Check size={12} />}
            </span>
          </div>
        ))}
      </div>

      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>REACH ESTIMATE</Overline>
      <div style={{ marginTop: 12, padding: 18, border: "1px solid var(--border-default)", borderRadius: "var(--r-sm)" }}>
        <div className="t-h2">28-42K</div>
        <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 4 }}>impressions over 7 days · $480 budget</div>
        <div style={{ marginTop: 16, display: "flex", gap: 8, alignItems: "flex-end" }}>
          {[18, 32, 28, 44, 38, 52, 46, 36, 28].map((h, i) => (
            <div key={i} style={{ flex: 1, height: h, background: i === 5 ? "var(--accent)" : "var(--border-default)" }} />
          ))}
        </div>
        <Overline style={{ color: "var(--text-tertiary)", marginTop: 8 }}>DAILY IMPRESSIONS · 7 DAY SPAN</Overline>
      </div>
    </div>
    <div style={{ padding: "12px 20px 28px", background: "var(--bg-primary)", borderTop: "1px solid var(--border-subtle)", display: "flex", gap: 10 }}>
      <div style={{ flex: 1 }}><Button label="BACK" fullWidth size="large" tone="mono" variant="secondary" /></div>
      <div style={{ flex: 1 }}><Button label="NEXT · BUDGET" fullWidth size="large" tone="mono" rightIcon={<I.ArrowRight />} /></div>
    </div>
  </div>
);

// ── AD-2 · Analytics ─────────────────────────────────────────────
const AdAnalyticsScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Analytics" left={<I.ArrowLeft size={22} />} right={<I.Filter size={20} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "12px 20px 32px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>CAMPAIGN · OPEN MAT CAPSULE</Overline>
      <div className="t-h3" style={{ marginTop: 6 }}>Day 4 of 7</div>

      <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        {[
          { l: "IMPRESSIONS", v: "21,408", d: "+12%" },
          { l: "CTR", v: "3.4%", d: "+0.4 pp" },
          { l: "STORE VISITS", v: "728", d: "+18%" },
          { l: "ATTRIBUTED $", v: "$1,840", d: "+22%" },
        ].map((m) => (
          <div key={m.l} style={{ border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)", padding: 14 }}>
            <Overline style={{ color: "var(--text-tertiary)" }}>{m.l}</Overline>
            <div className="t-h4" style={{ marginTop: 6 }}>{m.v}</div>
            <Overline style={{ color: "var(--success)", marginTop: 4 }}>↑ {m.d}</Overline>
          </div>
        ))}
      </div>

      {/* Sparkline */}
      <div style={{ marginTop: 24, padding: 14, border: "1px solid var(--border-subtle)", borderRadius: "var(--r-sm)" }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <Overline style={{ color: "var(--text-secondary)" }}>IMPRESSIONS · 7D</Overline>
          <Overline style={{ color: "var(--text-tertiary)" }}>21,408 / 42K</Overline>
        </div>
        <svg viewBox="0 0 280 80" style={{ width: "100%", height: 90, marginTop: 10 }} preserveAspectRatio="none">
          <polyline fill="none" stroke="var(--accent)" strokeWidth="2" points="0,60 40,52 80,48 120,32 160,24 200,28 240,18 280,12" />
          <line x1="160" x2="160" y1="0" y2="80" stroke="var(--text-tertiary)" strokeWidth="1" strokeDasharray="2 3" />
        </svg>
      </div>

      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>TOP AUDIENCE</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { l: "65 FS · Wrestlers", v: "38%" },
          { l: "Iowa · Region", v: "24%" },
          { l: "Coaches", v: "18%" },
          { l: "Parents", v: "12%" },
        ].map((a, i) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <div style={{ flex: 1 }}>
              <div className="t-body">{a.l}</div>
              <div style={{ marginTop: 6, height: 3, background: "var(--bg-tertiary)" }}>
                <div style={{ height: "100%", width: a.v, background: "var(--accent)" }} />
              </div>
            </div>
            <Overline style={{ color: "var(--text-tertiary)", marginLeft: 12, alignSelf: "flex-start" }}>{a.v}</Overline>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ── AFF-1 · Affiliate Dashboard ──────────────────────────────────
const AffiliateDashboardScreen = () => (
  <div style={{ position: "absolute", inset: 0, background: "var(--bg-primary)", display: "flex", flexDirection: "column" }}>
    <TopBar title="Affiliate" left={<I.ArrowLeft size={22} />} right={<I.Share size={20} />} />
    <div style={{ flex: 1, overflow: "auto", padding: "16px 20px 32px" }} className="no-scrollbar">
      <Overline style={{ color: "var(--accent)" }}>YOUR CODE</Overline>
      <div style={{ marginTop: 8, padding: 20, border: "2px solid var(--border-strong)", borderRadius: "var(--r-sm)", position: "relative" }}>
        <CornerMark corner="TL" /><CornerMark corner="TR" /><CornerMark corner="BL" /><CornerMark corner="BR" />
        <div className="t-h2" style={{ fontFamily: "ui-monospace, monospace", letterSpacing: "0.06em" }}>RIVERA15</div>
        <div className="t-caption-lg" style={{ color: "var(--text-secondary)", marginTop: 6 }}>15% off for fans · 10% commission to you</div>
      </div>

      <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
        {[
          { l: "CLICKS", v: "1,284" },
          { l: "ORDERS", v: "82" },
          { l: "COMMISSION", v: "$612" },
        ].map((m) => (
          <div key={m.l} style={{ borderLeft: "2px solid var(--module-store)", paddingLeft: 8 }}>
            <div className="t-h5">{m.v}</div>
            <Overline style={{ color: "var(--text-tertiary)", marginTop: 4 }}>{m.l}</Overline>
          </div>
        ))}
      </div>

      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>RECENT ORDERS</Overline>
      <div style={{ marginTop: 8 }}>
        {[
          { d: "MAY 14", buyer: "K. Park · TX", t: "$58", c: "$5.80" },
          { d: "MAY 13", buyer: "S. Brand · IA", t: "$110", c: "$11.00" },
          { d: "MAY 13", buyer: "M. Lopez · CA", t: "$78", c: "$7.80" },
          { d: "MAY 12", buyer: "T. Cole · OH", t: "$32", c: "$3.20" },
          { d: "MAY 12", buyer: "D. Hahn · PA", t: "$132", c: "$13.20" },
        ].map((o, i) => (
          <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)" }}>
            <div>
              <Overline style={{ color: "var(--text-tertiary)" }}>{o.d}</Overline>
              <div className="t-caption-lg" style={{ color: "var(--text-primary)", marginTop: 2 }}>{o.buyer}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="t-caption-lg" style={{ color: "var(--text-secondary)" }}>{o.t}</div>
              <div className="t-body-bold" style={{ color: "var(--accent)", marginTop: 2 }}>{o.c}</div>
            </div>
          </div>
        ))}
      </div>

      <Overline style={{ color: "var(--text-secondary)", marginTop: 24 }}>SHARE</Overline>
      <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
        {["Instagram", "TikTok", "Copy link", "QR"].map((s) => <Tag key={s}>{s.toUpperCase()}</Tag>)}
      </div>
    </div>
  </div>
);

Object.assign(window, {
  AdCampaignBuilderScreen,
  AdAnalyticsScreen,
  AffiliateDashboardScreen,
});