/* global React, M */

// ====================================================================
// B2 — Reputation deep-dive
// ====================================================================
function ReputationDeepDive() {
  const { MScreen, MTopBar, Eyebrow, Perf, Glyph } = window.M;

  const trend = [4, 5, 4, 6, 5, 7, 6, 8, 7, 9, 7, 8];
  const months = ["JUN","JUL","AUG","SEP","OCT","NOV","DEC","JAN","FEB","MAR","APR","MAY"];

  return (
    <MScreen>
      <MTopBar right={<button style={{ width: 36, height: 36, borderRadius: 18, background: "transparent", border: "none", color: "var(--text-2)", cursor: "pointer" }}><Glyph.Share/></button>}/>

      {/* Hero */}
      <div style={{ padding: "8px 24px 28px" }}>
        <Eyebrow>Your reputation · last 12 months</Eyebrow>
        <h1 className="serif" style={{ fontSize: 30, lineHeight: 1.18, letterSpacing: "-0.012em", margin: "12px 0 0", textWrap: "pretty" }}>
          You've met <span className="serif-i" style={{ color: "var(--accent)" }}>38 different</span> people, made <span className="serif-i" style={{ color: "var(--accent)" }}>14 connections</span> for them, and held a <span className="serif-i" style={{ color: "var(--accent)" }}>4.8</span> quality rating.
        </h1>
        <div className="muted" style={{ fontSize: 13, marginTop: 14 }}>Among the top 12% of active members on 1to1.</div>
      </div>

      {/* Big stat strip */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: "1px solid var(--border-soft)", borderBottom: "1px solid var(--border-soft)" }}>
        {[
          ["47", "1to1s", "+8"],
          ["38", "Reach", "+5"],
          ["14", "Connections made", "+3"],
          ["4.8", "Quality avg", "+0.2"],
        ].map(([n, l, d], i) => (
          <div key={i} style={{ padding: "20px 24px", borderRight: i % 2 === 0 ? "1px solid var(--border-soft)" : "none", borderBottom: i < 2 ? "1px solid var(--border-soft)" : "none" }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <span className="mono" style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em" }}>{n}</span>
              <span className="mono" style={{ fontSize: 11, color: "var(--accent)" }}>{d}</span>
            </div>
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>

      {/* Rhythm history */}
      <div style={{ padding: "26px 24px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <Eyebrow>Rhythm</Eyebrow>
        <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 12 }}>
          <span className="mono" style={{ fontSize: 56, fontWeight: 500, letterSpacing: "-0.03em" }}>12</span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase" }}>Weeks running</span>
        </div>
        <div style={{ display: "flex", gap: 4, marginTop: 18, alignItems: "flex-end" }}>
          {Array(4).fill(0).map((_, i) => (
            <div key={"r"+i} style={{ flex: 1, height: 22, border: "1px dashed var(--border)", borderRadius: 3 }}/>
          ))}
          {Array(12).fill(0).map((_, i) => (
            <div key={"f"+i} style={{ flex: 1, height: 28 + (i%3)*4, background: "var(--accent)", opacity: 0.55 + (i/24), borderRadius: 3 }}/>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
          <span className="mono" style={{ fontSize: 9, color: "var(--text-3)", letterSpacing: "0.1em" }}>BUILD</span>
          <span className="mono" style={{ fontSize: 9, color: "var(--accent)", letterSpacing: "0.1em" }}>12 WEEKS HELD</span>
        </div>
        <div className="muted" style={{ fontSize: 12, marginTop: 14 }}>Longest Rhythm: 14 weeks (Jan–Apr 2026).</div>
      </div>

      {/* Trend chart */}
      <div style={{ padding: "26px 24px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
          <Eyebrow>Trend · 1to1s</Eyebrow>
          <div style={{ display: "flex", gap: 4 }}>
            {["1to1s", "Reach", "Conn"].map((l, i) => (
              <span key={i} style={{ padding: "4px 9px", borderRadius: 999, fontSize: 10.5, background: i === 0 ? "var(--accent-soft)" : "transparent", border: i === 0 ? "none" : "1px solid var(--border)", color: i === 0 ? "var(--accent)" : "var(--text-2)" }}>{l}</span>
            ))}
          </div>
        </div>
        <svg viewBox="0 0 360 180" style={{ width: "100%", marginTop: 14 }} preserveAspectRatio="none">
          <line x1="0" y1="170" x2="360" y2="170" stroke="var(--border-soft)" strokeWidth="1"/>
          <polygon
            points={`0,170 ${trend.map((v, i) => `${(i/(trend.length-1))*360},${170 - (v/10)*150}`).join(" ")} 360,170`}
            fill="var(--accent)" opacity="0.08"
          />
          <polyline
            points={trend.map((v, i) => `${(i/(trend.length-1))*360},${170 - (v/10)*150}`).join(" ")}
            fill="none" stroke="var(--accent)" strokeWidth="1.5"
          />
          {trend.map((v, i) => (
            <circle key={i} cx={(i/(trend.length-1))*360} cy={170 - (v/10)*150} r="1.8" fill="var(--accent)"/>
          ))}
        </svg>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
          {months.filter((_, i) => i%3===0 || i===months.length-1).map((m, i) => (
            <span key={i} className="mono" style={{ fontSize: 9, color: "var(--text-3)", letterSpacing: "0.1em" }}>{m}</span>
          ))}
        </div>
      </div>

      {/* Diversity */}
      <div style={{ padding: "26px 24px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <h3 style={{ font: "italic 400 22px/1 var(--serif)", color: "var(--accent)", margin: "0 0 18px", letterSpacing: "-0.005em" }}>Diversity</h3>

        <div style={{ marginBottom: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <span style={{ fontSize: 13 }}>Industries met</span>
            <span className="mono" style={{ fontSize: 14, fontWeight: 500 }}>12</span>
          </div>
          <div style={{ height: 4, background: "var(--surface-3)", borderRadius: 2, overflow: "hidden" }}>
            <div style={{ width: "78%", height: "100%", background: "var(--accent)" }}/>
          </div>
          <div className="mono muted-2" style={{ fontSize: 9.5, letterSpacing: "0.1em", marginTop: 6 }}>SHANNON ENTROPY · 0.78</div>
        </div>

        <div style={{ marginBottom: 18 }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
            <span style={{ fontSize: 13 }}>Internal vs external</span>
            <span className="mono muted-2" style={{ fontSize: 11 }}>62 · 38</span>
          </div>
          <div style={{ height: 4, background: "var(--surface-3)", borderRadius: 2, overflow: "hidden", display: "flex" }}>
            <div style={{ width: "62%", height: "100%", background: "var(--accent)" }}/>
            <div style={{ width: "38%", height: "100%", background: "var(--text-3)" }}/>
          </div>
          <div className="mono muted-2" style={{ fontSize: 9.5, letterSpacing: "0.1em", marginTop: 6 }}>62% YOUR GROUPS · 38% WIDER NETWORK</div>
        </div>

        <div>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
            <span style={{ fontSize: 13 }}>Repeat ratio</span>
            <span className="mono" style={{ fontSize: 14, fontWeight: 500 }}>2.3<span className="muted-2" style={{ fontSize: 11 }}> ×</span></span>
          </div>
          <div className="muted" style={{ fontSize: 11.5 }}>meetings per person on average</div>
        </div>
      </div>

      {/* Connections received */}
      <div style={{ padding: "26px 24px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <h3 style={{ font: "italic 400 22px/1 var(--serif)", color: "var(--accent)", margin: "0 0 18px" }}>Connections attributed to you</h3>
        {[
          ["12 APR", "Eliza Hart", "Brand strategist · Salt & Sail", "Intro to Coast Ledger — turned into a retainer."],
          ["28 MAR", "James Whitford", "Accountant · Coast Ledger", "Sent a buyer for The Pier development."],
          ["14 MAR", "Devon Park", "Commercial agent · Ray White", "First-commercial buyer, Burleigh."],
          ["02 MAR", "Priya Anand", "Mortgage broker · Stride Finance", "Two SME buyers, both closed."],
          ["18 FEB", "Felix Aoki", "Copywriter · Aoki & Co.", "Brand work for Mermaid Foods."],
        ].map(([d, n, r, q], i) => (
          <div key={i} style={{ padding: "14px 0", borderBottom: i < 4 ? "1px solid var(--border-soft)" : "none" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)" }}>{d}</div>
              <span style={{ fontSize: 12, fontWeight: 500 }}>{n}</span>
            </div>
            <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{r}</div>
            <div className="serif-i" style={{ fontSize: 14, lineHeight: 1.45, color: "var(--text)", marginTop: 6 }}>"{q}"</div>
          </div>
        ))}
        <div style={{ marginTop: 14 }}><span style={{ color: "var(--accent)", fontSize: 13, cursor: "pointer" }}>See all 14 →</span></div>
      </div>

      {/* Recent meetings */}
      <div style={{ padding: "26px 24px 24px", borderBottom: "1px solid var(--border-soft)" }}>
        <h3 style={{ font: "italic 400 22px/1 var(--serif)", color: "var(--accent)", margin: "0 0 18px" }}>Recent 1to1s</h3>
        {[
          ["02 MAY", "Priya Anand", "Mortgage broker · Stride Finance", 5, "✓ Submitted"],
          ["28 APR", "James Whitford", "Accountant · Coast Ledger", 5, "✓ Submitted"],
          ["22 APR", "Sienna Kovač", "Financial planner · Kovač Wealth", 4, "✓ Submitted"],
          ["18 APR", "Felix Aoki", "Copywriter · Aoki & Co.", 5, "Pending"],
          ["10 APR", "Devon Park", "Commercial agent · Ray White", 5, "✓ Submitted"],
        ].map(([d, n, r, q, s], i) => (
          <div key={i} style={{ padding: "12px 0", borderBottom: i < 4 ? "1px solid var(--border-soft)" : "none", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)" }}>{d}</div>
              <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{n}</div>
              <div className="muted" style={{ fontSize: 11.5 }}>{r}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ display: "flex", gap: 2, justifyContent: "flex-end" }}>
                {Array(5).fill(0).map((_, j) => (
                  <span key={j} style={{ width: 5, height: 5, borderRadius: "50%", background: j < q ? "var(--accent)" : "var(--surface-3)", display: "inline-block" }}/>
                ))}
              </div>
              <div className="mono" style={{ fontSize: 10, color: s.startsWith("✓") ? "var(--accent)" : "var(--text-3)", marginTop: 4, letterSpacing: "0.1em" }}>{s.toUpperCase()}</div>
            </div>
          </div>
        ))}
        <div style={{ marginTop: 14 }}><span style={{ color: "var(--accent)", fontSize: 13, cursor: "pointer" }}>See all →</span></div>
      </div>

      {/* Footer notes */}
      <div style={{ padding: "24px 24px 40px" }}>
        <div className="muted" style={{ fontSize: 11.5, lineHeight: 1.6, marginBottom: 8 }}>
          Your reputation only counts confirmed attributions. You can't claim connections — they have to be given to you.
        </div>
        <div className="muted" style={{ fontSize: 11.5, lineHeight: 1.6 }}>
          Diversity is weighted: meeting the same person again counts toward 1to1s but not Reach.
        </div>
      </div>
    </MScreen>
  );
}

// Trend chart isolated detail
function ReputationTrendDetail() {
  const { Eyebrow } = window.M;
  const trend = [4, 5, 4, 6, 5, 7, 6, 8, 7, 9, 7, 8];
  return (
    <div style={{ width: "100%", height: "100%", padding: 32, background: "var(--bg)", color: "var(--text)" }}>
      <Eyebrow>Trend chart · isolated</Eyebrow>
      <div className="serif" style={{ fontSize: 24, marginTop: 8, letterSpacing: "-0.01em" }}>1to1s · last <span className="serif-i" style={{ color: "var(--accent)" }}>12 months</span></div>
      <svg viewBox="0 0 480 220" style={{ width: "100%", marginTop: 24 }} preserveAspectRatio="none">
        <line x1="0" y1="200" x2="480" y2="200" stroke="var(--border-soft)" strokeWidth="1"/>
        <polygon
          points={`0,200 ${trend.map((v, i) => `${(i/(trend.length-1))*480},${200 - (v/10)*180}`).join(" ")} 480,200`}
          fill="var(--accent)" opacity="0.10"
        />
        <polyline
          points={trend.map((v, i) => `${(i/(trend.length-1))*480},${200 - (v/10)*180}`).join(" ")}
          fill="none" stroke="var(--accent)" strokeWidth="1.5"
        />
        {trend.map((v, i) => (
          <circle key={i} cx={(i/(trend.length-1))*480} cy={200 - (v/10)*180} r="2" fill="var(--accent)"/>
        ))}
      </svg>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
        {["JUN","SEP","DEC","MAR","MAY"].map((m, i) => <span key={i} className="mono muted-2" style={{ fontSize: 10, letterSpacing: "0.12em" }}>{m}</span>)}
      </div>
    </div>
  );
}

// Rhythm history isolated detail
function RhythmHistoryDetail() {
  const { Eyebrow } = window.M;
  return (
    <div style={{ width: "100%", height: "100%", padding: 32, background: "var(--bg)", color: "var(--text)" }}>
      <Eyebrow>Rhythm history · isolated</Eyebrow>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 12 }}>
        <span className="mono" style={{ fontSize: 80, fontWeight: 500, letterSpacing: "-0.03em" }}>12</span>
        <span className="mono" style={{ fontSize: 12, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase" }}>Weeks running</span>
      </div>
      <div style={{ display: "flex", gap: 5, marginTop: 22, alignItems: "flex-end", height: 56 }}>
        {Array(4).fill(0).map((_, i) => (
          <div key={"r"+i} style={{ flex: 1, height: 28, border: "1px dashed var(--border)", borderRadius: 3 }}/>
        ))}
        {Array(12).fill(0).map((_, i) => (
          <div key={"f"+i} style={{ flex: 1, height: 36 + (i%3)*5, background: "var(--accent)", opacity: 0.55 + (i/24), borderRadius: 3 }}/>
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
        <span className="mono muted-2" style={{ fontSize: 10, letterSpacing: "0.1em" }}>4-WEEK BUILD</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.1em" }}>12 WEEKS HELD</span>
      </div>
      <div className="muted" style={{ fontSize: 12, marginTop: 18, lineHeight: 1.55 }}>
        Longest Rhythm: 14 weeks (Jan–Apr 2026). Reset once after a deliberate pause around Easter.
      </div>
    </div>
  );
}

window.ReputationDeepDive = ReputationDeepDive;
window.ReputationTrendDetail = ReputationTrendDetail;
window.RhythmHistoryDetail = RhythmHistoryDetail;
