// Variant 6 - POLISHED: Recruiter Brief, print-ready, responsive
// Accepts: data (RESUME or RESUME_EN), accent (hex), darkSidebar (bool), density ("compact"|"normal"), photoSrc
function RecruiterBriefResume(props) {
  const R = props.data || window.RESUME;
  const Icon = window.Icon;
  const accent = props.accent || "#0b6e4f";
  const darkSidebar = props.darkSidebar !== false;
  const density = props.density || "normal";
  const photoSrc = props.photoSrc || null;

  // density tokens
  const D = density === "compact"
    ? { sectGap: 18, line: 1.5, body: 12, mainPad: 24, sidePad: 22, sideW: 280 }
    : { sectGap: 26, line: 1.6, body: 13, mainPad: 30, sidePad: 26, sideW: 300 };

  // Color tokens - accent-derived
  const C = {
    paper: "#ffffff",
    inkSide: darkSidebar ? "#0f1115" : "#f5f4ef",
    inkSideFg: darkSidebar ? "#dde1ea" : "#1a1a1a",
    inkSideMute: darkSidebar ? "#9aa3b2" : "#5d5b50",
    sideRule: darkSidebar ? "#2b313c" : "#d8d4c5",
    chipBgSide: darkSidebar ? "#1a1d24" : "#ebe8db",
    ink: "#11131a",
    soft: "#525866",
    rule: "#e3e6ec",
    accent,
    accentSoft: accent + "1a",
    chipBg: "#f3f5f9",
  };

  const sans = "'Inter', system-ui, sans-serif";
  const mono = "'JetBrains Mono', ui-monospace, Menlo, monospace";

  const T = R.ui;

  // Section header (main column)
  const H = ({ children, hint, ic: Ic }) => (
    <div className="brf-h" style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      marginTop: D.sectGap + 8, marginBottom: 10, gap: 10,
    }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        fontFamily: sans, fontSize: 12, letterSpacing: 1.8,
        textTransform: "uppercase", color: accent, fontWeight: 700,
        paddingBottom: 8, borderBottom: `2px solid ${accent}`,
      }}>
        {Ic && <Ic size={14} />}
        {children}
      </div>
      {hint && <div style={{ fontFamily: mono, fontSize: 10.5, color: C.soft, letterSpacing: 0.4 }}>{hint}</div>}
    </div>
  );

  // Sidebar header
  const HSide = ({ children, ic: Ic }) => (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      fontFamily: sans, fontSize: 11, letterSpacing: 1.8,
      textTransform: "uppercase", color: C.inkSideMute, fontWeight: 700,
      paddingBottom: 8, borderBottom: `1px solid ${C.sideRule}`,
      marginTop: 22, marginBottom: 12, width: "100%",
    }}>
      {Ic && <Ic size={13} />}
      {children}
    </div>
  );

  // Map skill group → icon
  const SkillIcon = ({ group, size }) => {
    if (/infra|system/i.test(group)) return <Icon.Server size={size} />;
    if (/network|dpi|dpdk/i.test(group)) return <Icon.Network size={size} />;
    if (/automat|observab/i.test(group)) return <Icon.Wrench size={size} />;
    if (/secur/i.test(group)) return <Icon.Shield size={size} />;
    return <Icon.Code size={size} />;
  };

  return (
    <div className="brf-root" style={{
      background: C.paper, color: C.ink, fontFamily: sans, width: "100%", minHeight: "100%",
      display: "grid", gridTemplateColumns: `${D.sideW}px 1fr`,
      "--brf-accent": accent,
    }}>
      {/* ============== SIDEBAR ============== */}
      <aside className="brf-side" style={{
        background: C.inkSide, color: C.inkSideFg,
        padding: `34px ${D.sidePad}px`,
        position: "relative",
      }}>
        {/* photo */}
        <div style={{
          width: 138, height: 138, borderRadius: "50%", overflow: "hidden",
          background: darkSidebar
            ? `repeating-linear-gradient(45deg, #2b313c 0 8px, #1f242d 8px 16px)`
            : `repeating-linear-gradient(45deg, #ddd6c1 0 8px, #e6e0ce 8px 16px)`,
          border: `4px solid ${accent}`, margin: "0 auto",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: mono, fontSize: 11, color: C.inkSideMute,
          boxShadow: `0 0 0 1px ${C.sideRule}, 0 6px 18px rgba(0,0,0,0.18)`,
        }}>
          {photoSrc ? (
            <img src={photoSrc} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          ) : "фото"}
        </div>

        <div style={{ textAlign: "center", marginTop: 14 }}>
          <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.4, lineHeight: 1.15 }}>{R.name}</div>
          <div style={{ fontSize: 12.5, color: C.inkSideMute, marginTop: 2, fontFamily: mono }}>
            {R.nameLat}
          </div>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            marginTop: 12, padding: "5px 12px",
            background: accent, color: "#fff",
            borderRadius: 999, fontSize: 11.5, fontWeight: 600, letterSpacing: 0.4,
            whiteSpace: "nowrap",
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: "50%", background: "#fff",
              boxShadow: "0 0 8px rgba(255,255,255,0.7)",
            }} />
            {T.openToWork}
          </div>
          <div style={{ fontSize: 11, color: C.inkSideMute, marginTop: 8, fontFamily: mono }}>
            {R.availability}
          </div>
        </div>

        <HSide ic={Icon.Mail}>{T.contact}</HSide>
        <div style={{ fontSize: 12.5, color: C.inkSideFg, display: "grid", gap: 8 }}>
          {[
            { ic: Icon.Mail, t: R.email, href: `mailto:${R.email}` },
            { ic: Icon.Github, t: `github.com/${R.github}`, href: `https://github.com/${R.github}` },
            { ic: Icon.Globe, t: R.domain, href: `https://${R.domain}` },
            { ic: Icon.MapPin, t: R.location },
          ].map((c, i) => (
            <a key={i} href={c.href} target="_blank" rel="noreferrer"
              className="brf-contact"
              data-umami-event="resume_contact_click"
              data-umami-event-method={c.href ? (c.href.startsWith("mailto:") ? "email" : c.href.includes("github.com") ? "github" : "website") : "location"}
              style={{
                display: "flex", gap: 10, alignItems: "center",
                color: C.inkSideFg, textDecoration: "none",
                padding: "4px 0",
              }}>
              <span style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                width: 26, height: 26, borderRadius: 6,
                background: C.chipBgSide, color: accent, flexShrink: 0,
              }}>
                <c.ic size={13} />
              </span>
              <span style={{ overflowWrap: "break-word", wordBreak: "break-word", minWidth: 0 }}>{c.t}</span>
            </a>
          ))}
        </div>

        <HSide ic={Icon.Cpu}>{T.stack}</HSide>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
          {R.keywords.map((k, i) => (
            <span key={i} style={{
              padding: "4px 9px", background: C.chipBgSide, color: C.inkSideFg,
              border: `1px solid ${C.sideRule}`, borderRadius: 4,
              fontFamily: mono, fontSize: 10.5, fontWeight: 500,
            }}>{k}</span>
          ))}
        </div>

        <HSide ic={Icon.Book}>{T.edu}</HSide>
        <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{R.education.school}</div>
        <div style={{ fontSize: 12, color: C.inkSideMute, marginTop: 2 }}>{R.education.major}</div>
        <div style={{ fontFamily: mono, fontSize: 11, color: C.inkSideMute, marginTop: 4 }}>
          {R.education.period} · {R.education.city}
        </div>

        <HSide ic={Icon.Lang}>{T.langs}</HSide>
        <div style={{ display: "grid", gap: 0 }}>
          {R.langs.map((l, i) => (
            <div key={i} style={{
              display: "flex", justifyContent: "space-between", fontSize: 12.5,
              padding: "5px 0",
              borderBottom: i < R.langs.length - 1 ? `1px dashed ${C.sideRule}` : "none",
            }}>
              <span>{l.l}</span>
              <span style={{ color: C.inkSideMute, fontFamily: mono, fontSize: 11.5 }}>{l.v}</span>
            </div>
          ))}
        </div>

        <HSide ic={Icon.Award}>{T.certs}</HSide>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span style={{ fontSize: 32, fontWeight: 700, color: accent, lineHeight: 1, letterSpacing: -1 }}>
            {R.certsCount}
          </span>
          <span style={{ color: C.inkSideMute, fontSize: 11.5, lineHeight: 1.35 }}>{T.certsHint}</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 3, marginTop: 10 }}>
          {Array.from({ length: R.certsCount }).map((_, i) => (
            <div key={i} title={`Сертификат ${i + 1}`} style={{
              aspectRatio: "1 / 1.4",
              background: darkSidebar
                ? `repeating-linear-gradient(0deg, #2b313c 0 2px, #1f242d 2px 4px)`
                : `repeating-linear-gradient(0deg, #ddd6c1 0 2px, #e6e0ce 2px 4px)`,
              border: `1px solid ${C.sideRule}`,
            }} />
          ))}
        </div>
      </aside>

      {/* ============== MAIN ============== */}
      <main className="brf-main" style={{ padding: `34px ${D.mainPad}px 34px ${D.mainPad}px`, minWidth: 0 }}>
        {/* eyebrow row */}
        <div className="brf-head" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
        }}>
          <div style={{
            fontFamily: mono, fontSize: 10.5, color: accent,
            letterSpacing: 2, textTransform: "uppercase", fontWeight: 700,
          }}>
            {T.role}
          </div>
          <div className="brf-yearpill" style={{
            display: "inline-flex", alignItems: "baseline", gap: 6,
            border: `1px solid ${C.rule}`, padding: "5px 11px", borderRadius: 999,
            flexShrink: 0,
          }}>
            <span style={{ fontSize: 18, fontWeight: 700, color: accent, lineHeight: 1, letterSpacing: -0.5 }}>
              {R.yearsExp}
            </span>
            <span style={{ fontSize: 9.5, color: C.soft, letterSpacing: 1.3, textTransform: "uppercase", fontWeight: 600 }}>
              {T.years}
            </span>
          </div>
        </div>
        <h1 style={{
          fontSize: 34, fontWeight: 700, lineHeight: 1.08,
          letterSpacing: -0.8, margin: "6px 0 0",
        }}>
          {R.role.split(" & ")[0]}{" "}
          <span style={{ color: accent }}>&</span>{" "}
          {R.role.split(" & ")[1]}
        </h1>

        {/* hook */}
        <div style={{
          marginTop: 16, padding: "14px 18px",
          background: C.accentSoft, borderLeft: `3px solid ${accent}`, borderRadius: "0 6px 6px 0",
          fontSize: 13.5, lineHeight: 1.55, color: C.ink, fontWeight: 500,
        }}>
          {R.hook}
        </div>

        {/* metric grid - 3×2 on A4 width */}
        <div className="brf-metrics" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginTop: 14 }}>
          {R.metrics.map((m, i) => (
            <div key={i} style={{
              border: `1px solid ${C.rule}`, padding: "12px 14px", borderRadius: 6,
              position: "relative", overflow: "hidden",
              minHeight: 80,
            }}>
              <div style={{
                position: "absolute", top: 0, left: 0, width: 3, height: "100%",
                background: i === 0 || i === 2 ? accent : "transparent",
              }} />
              <div style={{ fontSize: 24, fontWeight: 700, color: C.ink, lineHeight: 1, letterSpacing: -0.5 }}>{m.v}</div>
              <div style={{ fontSize: 11.5, color: C.ink, fontWeight: 600, marginTop: 6, lineHeight: 1.25 }}>{m.l}</div>
              <div style={{ fontSize: 10.5, color: C.soft, fontFamily: mono, marginTop: 2, lineHeight: 1.25 }}>{m.sub}</div>
            </div>
          ))}
        </div>

        {/* About */}
        <H hint={T.aboutHint} ic={Icon.Book}>{T.about}</H>
        <div style={{ fontSize: D.body, lineHeight: D.line, color: C.ink, marginBottom: 12 }}>{R.about}</div>
        <div className="brf-pillars" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
          {R.pillars.map((p, i) => {
            const icons = [Icon.Trend, Icon.Wrench, Icon.Code, Icon.Network];
            const Ic = icons[i] || Icon.Check;
            return (
              <div key={i} style={{
                borderTop: `2px solid ${accent}`, paddingTop: 8,
                background: "transparent",
              }}>
                <div style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: 24, height: 24, borderRadius: 5, background: C.accentSoft, color: accent,
                  marginBottom: 6,
                }}>
                  <Ic size={14} />
                </div>
                <div style={{ fontWeight: 700, fontSize: 13.5 }}>{p.t}</div>
                <div style={{ fontSize: 11.5, color: C.soft, lineHeight: 1.45, marginTop: 2 }}>{p.d}</div>
              </div>
            );
          })}
        </div>

        {/* Experience */}
        <H hint={T.experienceHint} ic={Icon.Server}>{T.experience}</H>
        <div className="brf-exp">
          {R.experience.map((e, i) => {
            const outs = R.outcomes[e.company] || e.bullets;
            return (
              <div key={i} style={{
                marginBottom: 16, paddingBottom: 12,
                borderBottom: i < R.experience.length - 1 ? `1px solid ${C.rule}` : "none",
                pageBreakInside: "avoid",
              }}>
                <div style={{
                  display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12,
                }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 16.5, fontWeight: 700, color: C.ink, lineHeight: 1.2 }}>{e.role}</div>
                    <div style={{ fontSize: 13, color: accent, fontWeight: 600, marginTop: 2 }}>{e.company}</div>
                  </div>
                  <div style={{
                    fontFamily: mono, fontSize: 11, color: C.soft,
                    background: C.chipBg, padding: "3px 9px", borderRadius: 4,
                    whiteSpace: "nowrap", flexShrink: 0,
                  }}>{e.period}</div>
                </div>
                <ul style={{ margin: "10px 0 0", padding: 0, listStyle: "none" }}>
                  {outs.map((b, j) => (
                    <li key={j} style={{
                      fontSize: D.body, lineHeight: D.line, padding: "3px 0 3px 24px",
                      position: "relative", color: C.ink,
                    }}>
                      <span style={{
                        position: "absolute", left: 0, top: 5,
                        width: 14, height: 14, borderRadius: 3, background: accent, color: "#fff",
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                      }}>
                        <Icon.Check size={10} />
                      </span>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>

        {/* Projects */}
        <H hint={T.projectsHint} ic={Icon.Code}>{T.projects}</H>
        <div className="brf-projects" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10 }}>
          {R.projects.map((p, i) => {
            const live = p.status.includes("Ongoing");
            return (
              <div key={i} style={{
                border: `1px solid ${C.rule}`, borderRadius: 6, padding: 14,
                pageBreakInside: "avoid",
                background: "#fff",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "flex-start" }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: C.ink, lineHeight: 1.25 }}>{p.name}</div>
                  <span style={{
                    display: "inline-flex", alignItems: "center", gap: 4,
                    fontFamily: mono, fontSize: 10, fontWeight: 600,
                    color: live ? "#b35106" : accent,
                    background: live ? "#fff3e0" : C.accentSoft,
                    padding: "2px 7px", borderRadius: 4, whiteSpace: "nowrap", flexShrink: 0,
                  }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: "50%",
                      background: live ? "#b35106" : accent,
                    }} />
                    {live ? T.live : T.done}
                  </span>
                </div>
                <div style={{ fontSize: 12, color: C.soft, lineHeight: 1.5, marginTop: 6 }}>{p.desc}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 8 }}>
                  {p.tags.map((t, j) => (
                    <span key={j} style={{
                      fontFamily: mono, fontSize: 10.5, color: C.ink,
                      background: C.chipBg, padding: "2px 7px", borderRadius: 3,
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        {/* Skills detail */}
        <H hint={T.skillsHint} ic={Icon.Cpu}>{T.skills}</H>
        <div className="brf-skills" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 8 }}>
          {R.skills.map((s, i) => (
            <div key={i} style={{
              padding: "10px 12px", background: C.chipBg, borderRadius: 6,
              pageBreakInside: "avoid",
            }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                fontSize: 11.5, fontWeight: 700, color: accent,
                letterSpacing: 0.6, textTransform: "uppercase",
              }}>
                <SkillIcon group={s.group} size={13} />
                {s.group}
              </div>
              <div style={{ fontSize: 12.5, color: C.ink, lineHeight: 1.55, marginTop: 5 }}>
                {s.items.join(" · ")}
              </div>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div style={{
          marginTop: 26, borderTop: `1px solid ${C.rule}`, paddingTop: 12,
          display: "flex", justifyContent: "space-between", gap: 14, flexWrap: "wrap",
          fontFamily: mono, fontSize: 11, color: C.soft, letterSpacing: 0.5,
        }}>
          <span>{R.email} · github/{R.github} · {R.domain}</span>
          <span>{T.updated} · 14.05.2026</span>
        </div>
      </main>
    </div>
  );
}
window.RecruiterBriefResume = RecruiterBriefResume;