/* resume.jsx — 5 one-column, ATS-safe résumé templates via one themed renderer.
   All templates: single column, standard fonts, real headings, no tables/graphics
   columns — so an ATS parser reads them top-to-bottom cleanly. */

const DEFAULT_ORDER = ["experience", "projects", "education", "skills", "certs"];

const TEMPLATES = {
  classic: {
    name: "Meridian",
    badge: "Serif",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "center",
    nameSize: 30, nameWeight: 400, nameCase: "none", nameSpace: ".01em",
    titleStyle: { case: "none", color: "muted", size: 14, weight: 400, italic: true },
    contact: { sep: "•", align: "center", accent: false },
    sec: { case: "uppercase", size: 12.5, weight: 700, space: ".12em", rule: "full", color: "ink", accent: false, mt: 22 },
    body: 13, lh: 1.5, gap: 1, accentName: false,
  },
  modern: {
    name: "Veritas",
    badge: "Sans",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "left",
    nameSize: 30, nameWeight: 700, nameCase: "none", nameSpace: "-.01em",
    titleStyle: { case: "none", color: "accent", size: 14.5, weight: 600, italic: false },
    contact: { sep: "|", align: "left", accent: true },
    sec: { case: "uppercase", size: 12, weight: 700, space: ".13em", rule: "accent", color: "ink", accent: false, mt: 22 },
    body: 13, lh: 1.5, gap: 1, accentName: false,
  },
  minimal: {
    name: "Lumen",
    badge: "Airy",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "left",
    nameSize: 32, nameWeight: 600, nameCase: "none", nameSpace: "-.02em",
    titleStyle: { case: "none", color: "muted", size: 14, weight: 400, italic: false },
    contact: { sep: "·", align: "left", accent: false },
    sec: { case: "uppercase", size: 11, weight: 700, space: ".18em", rule: "none", color: "soft", accent: false, mt: 28 },
    body: 13, lh: 1.6, gap: 1.25, accentName: false,
  },
  executive: {
    name: "Prestige",
    badge: "Refined",
    font: 'Georgia, "Times New Roman", serif',
    headFont: 'Georgia, "Times New Roman", serif',
    align: "center",
    nameSize: 31, nameWeight: 700, nameCase: "uppercase", nameSpace: ".06em",
    titleStyle: { case: "uppercase", color: "accent", size: 12, weight: 600, italic: false, space: ".18em" },
    contact: { sep: "•", align: "center", accent: false },
    sec: { case: "smallcaps", size: 14.5, weight: 700, space: ".02em", rule: "shortAccent", color: "ink", accent: false, mt: 24 },
    body: 13, lh: 1.52, gap: 1.05, accentName: false, headerRule: true,
  },
  technical: {
    name: "Cipher",
    badge: "Engineer",
    font: 'Arial, Helvetica, sans-serif',
    headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "left",
    nameSize: 27, nameWeight: 700, nameCase: "none", nameSpace: "-.01em",
    titleStyle: { case: "none", color: "accent", size: 13.5, weight: 600, italic: false, mono: true },
    contact: { sep: "/", align: "left", accent: true, mono: true },
    sec: { case: "uppercase", size: 12, weight: 700, space: ".08em", rule: "block", color: "ink", accent: true, mt: 20 },
    body: 12.5, lh: 1.5, gap: .9, accentName: false, mono: true,
  },
  novo: {
    name: "Kova",
    badge: "Modern",
    custom: true,
    defaultAccent: "#E0533D",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
  },
  slate: {
    name: "Ashton",
    badge: "Corporate",
    custom: true,
    defaultAccent: "#33414F",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
  },
  academic: {
    name: "Scholars", badge: "Academic", defaultAccent: "#333A47",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif', headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "center", nameSize: 30, nameWeight: 400, nameCase: "uppercase", nameSpace: ".1em",
    titleStyle: { case: "none", color: "muted", size: 13, weight: 400, italic: false },
    contact: { sep: "·", align: "center", accent: false },
    sec: { case: "none", size: 14.5, weight: 700, space: ".01em", rule: "full", color: "ink", mt: 22 },
    body: 13, lh: 1.5, gap: 1, accentName: false,
  },
  cobalt: {
    name: "Harbor", badge: "Bold", defaultAccent: "#2D7DD2",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif', headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "left", nameSplit: true, nameSize: 31, nameWeight: 800, nameCase: "uppercase", nameSpace: "-.01em",
    titleStyle: { case: "none", color: "muted", size: 13.5, weight: 600, italic: false },
    contact: { sep: "|", align: "left", accent: false, bar: true },
    sec: { case: "none", size: 14.5, weight: 700, space: "0", rule: "accent", color: "ink", mt: 20 },
    body: 13, lh: 1.5, gap: 1, accentName: false,
  },
  slab: {
    name: "Forged", badge: "Heavy", defaultAccent: "#1B7FE0",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif', headFont: '"Poppins", "Helvetica Neue", Arial, sans-serif',
    align: "left", nameSize: 31, nameWeight: 800, nameCase: "uppercase", nameSpace: "-.01em",
    titleStyle: { case: "none", color: "accent", size: 14, weight: 700, italic: false },
    contact: { sep: "•", align: "left", accent: true },
    sec: { case: "uppercase", size: 16, weight: 800, space: ".02em", rule: "thick", color: "ink", mt: 22 },
    body: 13, lh: 1.5, gap: 1, accentName: false,
  },
  indigo: {
    name: "Dusk", badge: "Minimal", defaultAccent: "#5B5FCF",
    font: '"Helvetica Neue", Arial, sans-serif', headFont: '"Helvetica Neue", Arial, sans-serif',
    align: "left", nameSize: 31, nameWeight: 700, nameCase: "none", nameSpace: "-.01em",
    titleStyle: { case: "none", color: "soft", size: 14.5, weight: 400, italic: false },
    contact: { sep: "·", align: "left", accent: false },
    sec: { case: "uppercase", size: 12.5, weight: 700, space: ".08em", rule: "none", color: "soft", mt: 24 },
    body: 13, lh: 1.5, gap: 1, accentName: false,
  },
  timeline: {
    name: "Chronicle", badge: "Modern", custom: true, defaultAccent: "#2E8B57",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
  },
  sidebar: {
    name: "Verso", badge: "Two-column", custom: true, defaultAccent: "#1FA89F", side: "left", nameColor: "#2b2d33",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
  },
  split: {
    name: "Duet", badge: "Two-column", custom: true, defaultAccent: "#E8732A", side: "right", nameColor: "#13296B",
    font: '"Poppins", "Helvetica Neue", Arial, sans-serif',
  },
};

function clr(token, accent) {
  if (token === "accent") return accent;
  if (token === "muted") return "#444";
  if (token === "soft") return "#6b7280";
  return "#15171f";
}

function SectionTitle({ t, accent, children }) {
  const s = t.sec;
  const base = {
    fontFamily: t.headFont,
    fontSize: s.size,
    fontWeight: s.weight,
    letterSpacing: s.space,
    textTransform: s.case === "smallcaps" ? "none" : s.case,
    fontVariant: s.case === "smallcaps" ? "small-caps" : "normal",
    color: clr(s.color, accent),
    margin: `${s.mt}px 0 9px`,
    paddingBottom: 5,
    lineHeight: 1.1,
  };
  if (s.rule === "full") { base.borderBottom = "1px solid #c9ced6"; }
  if (s.rule === "thick") { base.borderBottom = "2.5px solid #1c2230"; base.paddingBottom = 6; }
  if (s.rule === "accent") { base.borderBottom = `2px solid ${accent}`; }
  if (s.rule === "shortAccent") {
    return (
      <div style={{ margin: `${s.mt}px 0 9px`, textAlign: t.align === "center" ? "center" : "left" }}>
        <div style={{ ...base, margin: 0, paddingBottom: 4, display: "inline-block" }}>{children}</div>
        <div style={{ width: 46, height: 2.5, background: accent, margin: t.align === "center" ? "5px auto 0" : "5px 0 0" }} />
      </div>
    );
  }
  if (s.rule === "block") {
    return (
      <div style={{ ...base, display: "flex", alignItems: "center", gap: 9, borderBottom: "1px solid #e3e6ef" }}>
        <span style={{ width: 4, height: 14, background: accent, borderRadius: 1, display: "inline-block" }} />
        {children}
      </div>
    );
  }
  return <div style={base}>{children}</div>;
}

const FONTS = [
  { key: "poppins", label: "Poppins", stack: '"Poppins", "Helvetica Neue", Arial, sans-serif', note: "Default" },
  { key: "auto", label: "Template default", stack: null },
  { key: "arial", label: "Arial", stack: 'Arial, Helvetica, sans-serif' },
  { key: "helvetica", label: "Helvetica", stack: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
  { key: "calibri", label: "Calibri", stack: 'Calibri, Carlito, "Segoe UI", sans-serif' },
  { key: "verdana", label: "Verdana", stack: 'Verdana, Geneva, sans-serif' },
  { key: "georgia", label: "Georgia", stack: 'Georgia, "Times New Roman", serif' },
  { key: "times", label: "Times New Roman", stack: '"Times New Roman", Times, serif' },
  { key: "garamond", label: "Garamond", stack: 'Garamond, "Palatino Linotype", Georgia, serif' },
  { key: "ubuntu", label: "Ubuntu", stack: '"Ubuntu", "Segoe UI", Arial, sans-serif', note: "Novoresume" },
  { key: "lato", label: "Lato", stack: '"Lato", "Helvetica Neue", Arial, sans-serif' },
  { key: "roboto", label: "Roboto", stack: '"Roboto", Arial, sans-serif' },
  { key: "opensans", label: "Open Sans", stack: '"Open Sans", "Segoe UI", Arial, sans-serif' },
];
const FONT_STACKS = Object.fromEntries(FONTS.map((f) => [f.key, f.stack]));
window.FONTS = FONTS;
const RESUME_ACCENTS = ["#0A0E39", "#1C9BE6", "#34C77F", "#0E7490", "#6D5AE0", "#475569", "#C2410C", "#BE185D", "#111827"];

function NovoResume({ data, accent = "#E0533D", design = {}, sectionOrder = DEFAULT_ORDER }) {
  const { basics = {}, summary, experience = [], education = [], skills = [], projects = [], certs = [], custom = [], languages = [], activities = [], profdegrees = [], references = [], refsOnRequest } = data;
  const f = design.scale === "small" ? 0.93 : design.scale === "large" ? 1.09 : 1;
  const sp = design.spacing === "compact" ? 0.9 : design.spacing === "relaxed" ? 1.14 : 1;
  const fontOverride = design.font && design.font !== "auto" ? FONT_STACKS[design.font] : null;
  const font = fontOverride || '"Poppins", "Helvetica Neue", Arial, sans-serif';
  const lh = +(1.5 * sp).toFixed(3);
  const body = 13.2 * f;

  const STEEL = "#7E94A8";        // skill pills
  const STEEL_DK = "#2E4A63";     // leading section diamond
  const LINE = "#C4CDD7";         // divider line + end diamonds
  const INK = "#2b2d33";
  const SUB = "#54565c";

  const Dia = ({ s = 9, color = LINE, fill = "none", sw = 1.4 }) => (
    <svg width={s} height={s} viewBox="0 0 12 12" style={{ flexShrink: 0 }}>
      <rect x="1.4" y="1.4" width="9.2" height="9.2" transform="rotate(45 6 6)" fill={fill} stroke={color} strokeWidth={sw} />
    </svg>
  );

  const SectionHead = ({ children }) => (
    <div style={{ display: "flex", alignItems: "center", gap: 12, margin: `${26 * sp}px 0 ${14 * sp}px` }}>
      <svg width={24 * f} height={24 * f} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
        <rect x="3" y="3" width="18" height="18" rx="2" transform="rotate(45 12 12)" fill="none" stroke={STEEL_DK} strokeWidth="1.5" />
        <rect x="8" y="8" width="8" height="8" transform="rotate(45 12 12)" fill={STEEL_DK} />
      </svg>
      <h2 style={{ margin: 0, fontSize: 16.5 * f, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase", color: INK, whiteSpace: "nowrap" }}>{children}</h2>
      <div style={{ flex: 1, display: "flex", alignItems: "center", gap: 5, marginLeft: 4 }}>
        <Dia color={LINE} />
        <span style={{ flex: 1, height: 1.5, background: LINE }} />
        <Dia color={LINE} />
      </div>
    </div>
  );

  const Bullet = ({ children }) => (
    <div style={{ display: "flex", gap: 8, alignItems: "flex-start", margin: `0 0 ${6 * sp}px` }}>
      <span style={{ flexShrink: 0, color: SUB, lineHeight: lh }}>•</span>
      <span style={{ flex: 1, lineHeight: lh, color: SUB }}>{children}</span>
    </div>
  );

  const Bullets = ({ items }) => (items || []).filter(Boolean).map((b, i) => <Bullet key={i}>{b}</Bullet>);

  const contact = [
    basics.email && { icon: "mail", text: basics.email },
    basics.phone && { icon: "phone", text: basics.phone },
    basics.location && { icon: "pin", text: basics.location },
    basics.website && { icon: "globe", text: basics.website },
    basics.linkedin && { icon: "link", text: basics.linkedin },
  ].filter(Boolean);

  const skillItems = skills.flatMap((g) => g.items || []);

  const Entry = ({ title, sub, date, children }) => (
    <div style={{ marginBottom: 15 * sp, breakInside: "avoid" }}>
      <div style={{ fontSize: body + 1.5, fontWeight: 700, color: INK, lineHeight: 1.2 }}>{title}</div>
      {sub && <div style={{ fontSize: body, color: INK, marginTop: 1 }}>{sub}</div>}
      {date && <div style={{ fontSize: body - 1.5, fontStyle: "italic", color: accent, margin: "3px 0 7px" }}>{date}</div>}
      {children}
    </div>
  );

  return (
    <div style={{ fontFamily: font, fontSize: body, lineHeight: lh, color: INK, padding: `${52}px ${56}px ${60}px`, minHeight: 1056 }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "flex-start", gap: 24 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h1 style={{ margin: 0, fontSize: 41 * f, fontWeight: 300, color: INK, letterSpacing: "0", lineHeight: 1.05 }}>{basics.name || "Your Name"}</h1>
          {basics.title && <div style={{ fontSize: 19 * f, color: accent, marginTop: 4, fontWeight: 400 }}>{basics.title}</div>}
        </div>
        {basics.photo && <img src={basics.photo} alt="" style={{ width: 92, height: 92, objectFit: "cover", borderRadius: 8, flexShrink: 0 }} />}
      </div>

      {summary && <p style={{ margin: "16px 0 0", fontSize: body, lineHeight: lh, color: SUB }}>{summary}</p>}

      {contact.length > 0 && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "11px 28px", marginTop: 20 }}>
          {contact.map((c, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 11 }}>
              <span style={{ width: 26, height: 26, borderRadius: 5, background: accent, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, color: "#fff" }}>
                <Icon name={c.icon} size={14} strokeWidth={1.9} />
              </span>
              <span style={{ fontSize: body - .5, color: SUB, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.text}</span>
            </div>
          ))}
        </div>
      )}

      {skillItems.length > 0 && (
        <section>
          <SectionHead>Areas of Expertise</SectionHead>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
            {skillItems.map((s, i) => (
              <span key={i} style={{ background: STEEL, color: "#fff", fontSize: 12.5 * f, fontWeight: 500, padding: "6px 13px", borderRadius: 6, lineHeight: 1.25 }}>{s}</span>
            ))}
          </div>
        </section>
      )}

      {sectionOrder.map(key => {
        if (key === "experience" && experience.length > 0) return (
          <section key="experience">
            <SectionHead>Work Experience</SectionHead>
            {experience.map((x, i) => (
              <Entry key={i} title={x.role} sub={x.company + (x.location ? `, ${x.location}` : "")} date={`${x.start} - ${x.end}`}>
                <Bullets items={x.bullets} />
              </Entry>
            ))}
          </section>
        );
        if (key === "projects" && projects.length > 0) return (
          <section key="projects">
            <SectionHead>Projects</SectionHead>
            {projects.map((p, i) => (
              <Entry key={i} title={p.name} sub={p.tech} date="">
                {p.detail && <div style={{ color: SUB, marginBottom: 5 }}>{p.detail}</div>}
                <Bullets items={p.bullets} />
              </Entry>
            ))}
          </section>
        );
        if (key === "education" && education.length > 0) return (
          <section key="education">
            <SectionHead>Education</SectionHead>
            {education.map((e, i) => (
              <Entry key={i} title={e.degree} sub={e.school + (e.location ? `, ${e.location}` : "")} date={`${e.start} - ${e.end}`}>
                {e.detail && <div style={{ color: SUB, fontSize: body - 1 }}>{e.detail}</div>}
              </Entry>
            ))}
          </section>
        );
        if (key === "certs" && certs.length > 0) return (
          <section key="certs">
            <SectionHead>Certifications</SectionHead>
            {certs.filter(Boolean).map((c, i) => <Bullet key={i}>{c}</Bullet>)}
          </section>
        );
        if (key === "languages" && languages.length > 0) return (
          <section key="languages">
            <SectionHead>Languages</SectionHead>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 20px" }}>
              {languages.filter(l => l.lang).map((l, i) => <span key={i} style={{ fontSize: body, color: SUB }}><strong style={{ color: INK }}>{l.lang}</strong>{l.level ? ` - ${l.level}` : ""}</span>)}
            </div>
          </section>
        );
        if (key === "activities" && activities.length > 0) return (
          <section key="activities">
            <SectionHead>Extracurricular Activities</SectionHead>
            {activities.map((a, i) => (
              <div key={i} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ fontWeight: 700, color: INK }}>{a.title}{a.org ? ` - ${a.org}` : ""}</span>
                  {a.dates && <span style={{ fontSize: body - 1, color: SUB, fontStyle: "italic" }}>{a.dates}</span>}
                </div>
                {a.detail && <div style={{ color: SUB, marginTop: 3 }}>{a.detail}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "profdegrees" && profdegrees.length > 0) return (
          <section key="profdegrees">
            <SectionHead>Professional Credentials</SectionHead>
            {profdegrees.filter(Boolean).map((c, i) => <Bullet key={i}>{c}</Bullet>)}
          </section>
        );
        if (key === "references") return (
          <section key="references">
            <SectionHead>References</SectionHead>
            {refsOnRequest || !references.length ? (
              <div style={{ color: SUB, fontStyle: "italic", fontSize: body }}>Available upon request</div>
            ) : (
              <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
                {references.filter(r => r.name).map((r, i) => (
                  <div key={i} style={{ minWidth: 180, fontSize: body, color: SUB }}>
                    <div style={{ fontWeight: 700, color: INK }}>{r.name}</div>
                    {r.title && <div>{r.title}{r.company ? `, ${r.company}` : ""}</div>}
                    {r.email && <div>{r.email}</div>}
                    {r.phone && <div>{r.phone}</div>}
                  </div>
                ))}
              </div>
            )}
          </section>
        );
        return null;
      })}
      {custom.filter((c) => (c.heading && c.heading.trim()) || (c.body && c.body.replace(/<[^>]*>/g, "").trim())).map((c) => (
        <section key={c.id}>
          <SectionHead>{c.heading || "Section"}</SectionHead>
          <div className="resume-rte" style={{ lineHeight: lh, color: SUB }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(c.body || "") }} />
        </section>
      ))}
    </div>
  );
}

function SlateResume({ data, accent = "#33414F", design = {}, sectionOrder = DEFAULT_ORDER }) {
  const { basics = {}, summary, experience = [], education = [], skills = [], projects = [], certs = [], custom = [], languages = [], activities = [], profdegrees = [], references = [], refsOnRequest } = data;
  const f = design.scale === "small" ? 0.93 : design.scale === "large" ? 1.09 : 1;
  const sp = design.spacing === "compact" ? 0.9 : design.spacing === "relaxed" ? 1.14 : 1;
  const fontOverride = design.font && design.font !== "auto" ? FONT_STACKS[design.font] : null;
  const font = fontOverride || '"Poppins", "Helvetica Neue", Arial, sans-serif';
  const lh = +(1.5 * sp).toFixed(3);
  const body = 13.2 * f;
  const PAD = 56;
  const INK = "#2b2d33";
  const SUB = "#54565c";
  const META = "#8a8d94";

  const contact = [
    basics.email && { icon: "mail", text: basics.email },
    basics.phone && { icon: "phone", text: basics.phone },
    basics.location && { icon: "pin", text: basics.location },
    basics.linkedin && { icon: "link", text: basics.linkedin },
    basics.website && { icon: "globe", text: basics.website },
  ].filter(Boolean);

  const skillItems = skills.flatMap((g) => g.items || []);

  const SectionHead = ({ children }) => (
    <h2 style={{ margin: `${26 * sp}px 0 ${13 * sp}px`, fontSize: 17 * f, fontWeight: 700, letterSpacing: ".03em", textTransform: "uppercase", color: accent }}>{children}</h2>
  );

  const Ring = () => (
    <svg width={9} height={9} viewBox="0 0 12 12" style={{ flexShrink: 0, marginTop: 5.5 }}>
      <circle cx="6" cy="6" r="4" fill="none" stroke={accent} strokeWidth="1.6" />
    </svg>
  );
  const Bullets = ({ items }) => (items || []).filter(Boolean).map((b, i) => (
    <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", margin: `0 0 ${5 * sp}px` }}>
      <span style={{ flexShrink: 0, color: SUB, lineHeight: lh }}>•</span>
      <span style={{ flex: 1, lineHeight: lh, color: SUB }}>{b}</span>
    </div>
  ));

  const Entry = ({ title, sub, dateL, dateR, children }) => (
    <div style={{ display: "flex", gap: 14, marginBottom: 15 * sp, breakInside: "avoid" }}>
      <span style={{ width: 20, height: 2, background: accent, flexShrink: 0, marginTop: 9 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: body + 1.5, fontWeight: 700, color: INK, lineHeight: 1.2 }}>{title}</div>
        {sub && <div style={{ fontSize: body, color: INK, marginTop: 1 }}>{sub}</div>}
        {(dateL || dateR) && (
          <div style={{ display: "flex", justifyContent: "space-between", gap: 12, fontSize: body - 1.5, fontStyle: "italic", color: META, margin: "3px 0 7px" }}>
            <span>{dateL}</span><span>{dateR}</span>
          </div>
        )}
        {children}
      </div>
    </div>
  );

  return (
    <div style={{ fontFamily: font, fontSize: body, lineHeight: lh, color: INK, padding: `${44}px ${PAD}px ${52}px`, minHeight: 1056 }}>
      <h1 style={{ margin: 0, fontSize: 44 * f, fontWeight: 700, color: INK, lineHeight: 1.04, letterSpacing: "-.01em" }}>{basics.name || "Your Name"}</h1>
      {basics.title && <div style={{ fontSize: 21 * f, color: SUB, marginTop: 2, fontWeight: 400 }}>{basics.title}</div>}
      {summary && <p style={{ margin: "14px 0 0", fontSize: body, lineHeight: lh, color: SUB }}>{summary}</p>}

      {/* Dark full-width contact bar */}
      {contact.length > 0 && (
        <div style={{ margin: `22px ${-PAD}px 4px`, padding: `13px ${PAD}px`, background: accent, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, flexWrap: "wrap" }}>
          {contact.map((c, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 9, color: "#fff" }}>
              <Icon name={c.icon} size={15} strokeWidth={1.9} style={{ opacity: .92 }} />
              <span style={{ fontSize: body - .8, whiteSpace: "nowrap" }}>{c.text}</span>
            </span>
          ))}
        </div>
      )}

      {skillItems.length > 0 && (
        <section>
          <SectionHead>Skills</SectionHead>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: `${11 * sp}px 18px` }}>
            {skillItems.map((s, i) => <div key={i} style={{ fontSize: body, color: "#3a3d44" }}>{s}</div>)}
          </div>
        </section>
      )}

      {sectionOrder.map(key => {
        if (key === "experience" && experience.length > 0) return (
          <section key="experience">
            <SectionHead>Work Experience</SectionHead>
            {experience.map((x, i) => (
              <Entry key={i} title={x.role} sub={x.company} dateL={`${x.start} - ${x.end}`} dateR={x.location}>
                <Bullets items={x.bullets} />
              </Entry>
            ))}
          </section>
        );
        if (key === "projects" && projects.length > 0) return (
          <section key="projects">
            <SectionHead>Projects</SectionHead>
            {projects.map((p, i) => (
              <Entry key={i} title={p.name} sub={p.tech} dateL="" dateR="">
                {p.detail && <div style={{ color: SUB, marginBottom: 5 }}>{p.detail}</div>}
                <Bullets items={p.bullets} />
              </Entry>
            ))}
          </section>
        );
        if (key === "education" && education.length > 0) return (
          <section key="education">
            <SectionHead>Education</SectionHead>
            {education.map((e, i) => (
              <Entry key={i} title={e.degree} sub={e.school} dateL={`${e.start} - ${e.end}`} dateR={e.location}>
                {e.detail && <div style={{ color: SUB, fontSize: body - 1 }}>{e.detail}</div>}
              </Entry>
            ))}
          </section>
        );
        if (key === "certs" && certs.length > 0) return (
          <section key="certs">
            <SectionHead>Certifications</SectionHead>
            <Bullets items={certs} />
          </section>
        );
        if (key === "languages" && languages.length > 0) return (
          <section key="languages"><SectionHead>Languages</SectionHead>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 20px" }}>
              {languages.filter(l => l.lang).map((l, i) => <span key={i} style={{ fontSize: body, color: SUB }}><strong style={{ color: INK }}>{l.lang}</strong>{l.level ? ` - ${l.level}` : ""}</span>)}
            </div>
          </section>
        );
        if (key === "activities" && activities.length > 0) return (
          <section key="activities"><SectionHead>Extracurricular Activities</SectionHead>
            {activities.map((a, i) => (
              <div key={i} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                  <span style={{ fontWeight: 700, color: INK }}>{a.title}{a.org ? ` - ${a.org}` : ""}</span>
                  {a.dates && <span style={{ fontSize: body - 1, color: SUB, fontStyle: "italic" }}>{a.dates}</span>}
                </div>
                {a.detail && <div style={{ color: SUB, marginTop: 3 }}>{a.detail}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "profdegrees" && profdegrees.length > 0) return (
          <section key="profdegrees"><SectionHead>Professional Credentials</SectionHead>
            <Bullets items={profdegrees} />
          </section>
        );
        if (key === "references") return (
          <section key="references"><SectionHead>References</SectionHead>
            {refsOnRequest || !references.length ? (
              <div style={{ color: SUB, fontStyle: "italic", fontSize: body }}>Available upon request</div>
            ) : (
              <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
                {references.filter(r => r.name).map((r, i) => (
                  <div key={i} style={{ minWidth: 180, fontSize: body, color: SUB }}>
                    <div style={{ fontWeight: 700, color: INK }}>{r.name}</div>
                    {r.title && <div>{r.title}{r.company ? `, ${r.company}` : ""}</div>}
                    {r.email && <div>{r.email}</div>}
                    {r.phone && <div>{r.phone}</div>}
                  </div>
                ))}
              </div>
            )}
          </section>
        );
        return null;
      })}
      {custom.filter((c) => (c.heading && c.heading.trim()) || (c.body && c.body.replace(/<[^>]*>/g, "").trim())).map((c) => (
        <section key={c.id}>
          <SectionHead>{c.heading || "Section"}</SectionHead>
          <div className="resume-rte" style={{ lineHeight: lh, color: SUB }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(c.body || "") }} />
        </section>
      ))}
    </div>
  );
}

function makeContact(basics) {
  return [
    basics.phone && { icon: "phone", text: basics.phone },
    basics.email && { icon: "mail", text: basics.email },
    basics.linkedin && { icon: "link", text: basics.linkedin },
    basics.website && { icon: "globe", text: basics.website },
    basics.location && { icon: "pin", text: basics.location },
  ].filter(Boolean);
}

function TimelineResume({ data, accent = "#2E8B57", design = {}, sectionOrder = DEFAULT_ORDER }) {
  const { basics = {}, summary, experience = [], education = [], skills = [], projects = [], certs = [], custom = [], languages = [], activities = [], profdegrees = [], references = [], refsOnRequest } = data;
  const f = design.scale === "small" ? 0.93 : design.scale === "large" ? 1.09 : 1;
  const sp = design.spacing === "compact" ? 0.9 : design.spacing === "relaxed" ? 1.14 : 1;
  const fontOverride = design.font && design.font !== "auto" ? FONT_STACKS[design.font] : null;
  const font = fontOverride || '"Poppins", "Helvetica Neue", Arial, sans-serif';
  const lh = +(1.5 * sp).toFixed(3);
  const body = 13.2 * f;
  const PAD = 54, INK = "#2b2d33", SUB = "#54565c", META = "#6b7280";
  const contact = makeContact(basics);
  const skillItems = skills.flatMap((g) => g.items || []);

  const SectionHead = ({ children }) => (
    <h2 style={{ margin: `${24 * sp}px 0 ${13 * sp}px`, fontSize: 18 * f, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".02em", color: accent }}>{children}</h2>
  );
  const Bullets = ({ items }) => (items || []).filter(Boolean).map((b, i) => (
    <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", margin: `0 0 ${4 * sp}px` }}>
      <span style={{ flexShrink: 0, color: SUB, lineHeight: lh }}>•</span>
      <span style={{ flex: 1, lineHeight: lh, color: SUB }}>{b}</span>
    </div>
  ));
  const TLItem = ({ dateL, loc, role, org, last, children }) => (
    <div style={{ display: "flex" }}>
      <div style={{ width: 138 * f, flexShrink: 0, paddingRight: 16 }}>
        <div style={{ fontWeight: 700, color: INK, fontSize: body - .5 }}>{dateL}</div>
        {loc && <div style={{ color: META, fontSize: body - 1.5, marginTop: 3 }}>{loc}</div>}
      </div>
      <div style={{ position: "relative", width: 22, flexShrink: 0, display: "flex", justifyContent: "center" }}>
        <span style={{ width: 9, height: 9, borderRadius: "50%", background: accent, marginTop: 5, zIndex: 1 }} />
        {!last && <span style={{ position: "absolute", top: 10, bottom: -10, width: 2, background: "#dfe3ea" }} />}
      </div>
      <div style={{ flex: 1, minWidth: 0, paddingLeft: 14, paddingBottom: 16 * sp }}>
        <div style={{ fontSize: body + 3, color: accent, fontWeight: 500, lineHeight: 1.15 }}>{role}</div>
        {org && <div style={{ fontWeight: 700, color: accent, fontSize: body, marginTop: 2 }}>{org}</div>}
        {children && <div style={{ marginTop: 6 }}>{children}</div>}
      </div>
    </div>
  );

  return (
    <div style={{ fontFamily: font, fontSize: body, lineHeight: lh, color: INK, padding: `${46}px ${PAD}px ${52}px`, minHeight: 1056 }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 22 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h1 style={{ margin: 0, fontSize: 37 * f, fontWeight: 700, color: accent, lineHeight: 1.05, textTransform: "uppercase", letterSpacing: ".01em" }}>{basics.name || "Your Name"}</h1>
          {basics.title && <div style={{ fontSize: 17 * f, color: accent, fontWeight: 600, marginTop: 3 }}>{basics.title}</div>}
          {contact.length > 0 && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: "5px 18px", marginTop: 11 }}>
              {contact.map((c, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: body - .5, color: SUB }}>
                  <Icon name={c.icon} size={14} strokeWidth={1.9} style={{ color: accent }} /><span>{c.text}</span>
                </span>
              ))}
            </div>
          )}
        </div>
        {basics.photo && <img src={basics.photo} alt="" style={{ width: 92, height: 92, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />}
      </div>

      {summary && (<section><SectionHead>Summary</SectionHead><p style={{ margin: 0, lineHeight: lh, color: SUB }}>{summary}</p></section>)}

      {sectionOrder.map(key => {
        if (key === "experience" && experience.length > 0) return (
          <section key="experience"><SectionHead>Experience</SectionHead>
            {experience.map((x, i) => (
              <TLItem key={i} dateL={`${x.start} - ${x.end}`} loc={x.location} role={x.role} org={x.company} last={i === experience.length - 1}>
                <Bullets items={x.bullets} />
              </TLItem>
            ))}
          </section>
        );
        if (key === "education" && education.length > 0) return (
          <section key="education"><SectionHead>Education</SectionHead>
            {education.map((e, i) => (
              <TLItem key={i} dateL={`${e.start} - ${e.end}`} loc={e.location} role={e.degree} org={e.school} last={i === education.length - 1}>
                {e.detail && <div style={{ color: SUB, fontSize: body - 1 }}>{e.detail}</div>}
              </TLItem>
            ))}
          </section>
        );
        if (key === "projects" && projects.length > 0) return (
          <section key="projects"><SectionHead>Projects</SectionHead>
            {projects.map((p, i) => (
              <div key={i} style={{ marginBottom: 11 * sp }}>
                <div style={{ fontSize: body + 1.5, color: accent, fontWeight: 600 }}>{p.name}{p.tech && <span style={{ color: META, fontWeight: 400, fontSize: body - 1 }}> · {p.tech}</span>}</div>
                {p.detail && <div style={{ color: SUB, marginTop: 2 }}>{p.detail}</div>}
                <Bullets items={p.bullets} />
              </div>
            ))}
          </section>
        );
        if (key === "skills" && skillItems.length > 0) return (
          <section key="skills"><SectionHead>Skills</SectionHead><div style={{ color: SUB, lineHeight: lh }}>{skillItems.join(", ")}</div></section>
        );
        if (key === "certs" && certs.length > 0) return (
          <section key="certs"><SectionHead>Certifications</SectionHead><Bullets items={certs} /></section>
        );
        if (key === "languages" && languages.length > 0) return (
          <section key="languages"><SectionHead>Languages</SectionHead>
            <div style={{ color: SUB, lineHeight: lh }}>{languages.filter(l => l.lang).map((l, i) => `${l.lang}${l.level ? ` (${l.level})` : ""}`).join(" · ")}</div>
          </section>
        );
        if (key === "activities" && activities.length > 0) return (
          <section key="activities"><SectionHead>Extracurricular Activities</SectionHead>
            {activities.map((a, i) => (
              <div key={i} style={{ marginBottom: 9 }}>
                <div style={{ fontWeight: 600, color: INK }}>{a.title}{a.org ? ` - ${a.org}` : ""}{a.dates ? <span style={{ fontWeight: 400, color: META, fontSize: body - 1 }}> · {a.dates}</span> : ""}</div>
                {a.detail && <div style={{ color: SUB, marginTop: 2 }}>{a.detail}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "profdegrees" && profdegrees.length > 0) return (
          <section key="profdegrees"><SectionHead>Professional Credentials</SectionHead><Bullets items={profdegrees} /></section>
        );
        if (key === "references") return (
          <section key="references"><SectionHead>References</SectionHead>
            {refsOnRequest || !references.length ? (
              <div style={{ color: SUB, fontStyle: "italic" }}>Available upon request</div>
            ) : references.filter(r => r.name).map((r, i) => (
              <div key={i} style={{ marginBottom: 10, color: SUB }}>
                <div style={{ fontWeight: 700, color: INK }}>{r.name}</div>
                {r.title && <div>{r.title}{r.company ? `, ${r.company}` : ""}</div>}
                {r.email && <div>{r.email}</div>}
              </div>
            ))}
          </section>
        );
        return null;
      })}
      {custom.filter((c) => (c.heading && c.heading.trim()) || (c.body && c.body.replace(/<[^>]*>/g, "").trim())).map((c) => (
        <section key={c.id}><SectionHead>{c.heading || "Section"}</SectionHead>
          <div className="resume-rte" style={{ lineHeight: lh, color: SUB }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(c.body || "") }} /></section>
      ))}
    </div>
  );
}

function TwoColResume({ data, accent = "#1FA89F", design = {}, side = "left", nameColor = "#2b2d33", sectionOrder = DEFAULT_ORDER, sidebarSections = DEFAULT_SIDEBAR }) {
  const { basics = {}, summary, experience = [], education = [], skills = [], projects = [], certs = [], custom = [], languages = [], activities = [], profdegrees = [], references = [], refsOnRequest } = data;
  const f = design.scale === "small" ? 0.93 : design.scale === "large" ? 1.09 : 1;
  const sp = design.spacing === "compact" ? 0.9 : design.spacing === "relaxed" ? 1.14 : 1;
  const fontOverride = design.font && design.font !== "auto" ? FONT_STACKS[design.font] : null;
  const font = fontOverride || '"Poppins", "Helvetica Neue", Arial, sans-serif';
  const lh = +(1.5 * sp).toFixed(3);
  const body = 12.6 * f;
  const PAD = 46, SUB = "#54565c", META = "#7c828c";
  const contact = makeContact(basics);
  const skillItems = skills.flatMap((g) => g.items || []);
  const inSidebar = (id) => sidebarSections.includes(id);

  const Head = ({ children, small }) => (
    <h2 style={{ margin: `0 0 ${11 * sp}px`, fontSize: (small ? 12 : 13) * f, fontWeight: 600, letterSpacing: ".07em", textTransform: "uppercase", color: META, borderBottom: "1px solid #d7dbe2", paddingBottom: 5 }}>{children}</h2>
  );
  const Bullets = ({ items }) => (items || []).filter(Boolean).map((b, i) => (
    <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", margin: `0 0 ${4 * sp}px` }}>
      <span style={{ flexShrink: 0, color: SUB, lineHeight: lh }}>•</span>
      <span style={{ flex: 1, lineHeight: lh, color: SUB }}>{b}</span>
    </div>
  ));
  const meta = (txt, icon) => <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: body - 1, color: META }}><Icon name={icon} size={12} strokeWidth={1.9} />{txt}</span>;

  const ExpBlock = ({ items }) => items.map((x, i) => (
    <div key={i} style={{ marginBottom: 13 * sp, breakInside: "avoid" }}>
      <div style={{ fontSize: body + 2.5, fontWeight: 600, color: nameColor, lineHeight: 1.15 }}>{x.role}</div>
      <div style={{ color: accent, fontWeight: 600, fontSize: body, margin: "1px 0 3px" }}>{x.company}</div>
      <div style={{ display: "flex", gap: 16, marginBottom: 4 }}>{meta(`${x.start} - ${x.end}`, "calendar")}{x.location && meta(x.location, "pin")}</div>
      <Bullets items={x.bullets} />
    </div>
  ));

  const Main = (
    <div style={{ minWidth: 0 }}>
      {summary && (<section style={{ marginBottom: 20 }}><Head>Summary</Head><p style={{ margin: 0, lineHeight: lh, color: SUB }}>{summary}</p></section>)}
      {sectionOrder.filter(id => !inSidebar(id)).map(key => {
        if (key === "experience" && experience.length > 0) return (
          <section key="experience" style={{ marginBottom: 20 }}><Head>Experience</Head><ExpBlock items={experience} /></section>
        );
        if (key === "education" && education.length > 0) return (
          <section key="education" style={{ marginBottom: 20 }}><Head>Education</Head>
            {education.map((e, i) => (
              <div key={i} style={{ marginBottom: 10 }}>
                <div style={{ fontSize: body + 2, fontWeight: 600, color: nameColor }}>{e.degree}</div>
                <div style={{ color: accent, fontWeight: 600 }}>{e.school}</div>
                <div style={{ display: "flex", gap: 16, marginTop: 2 }}>{meta(`${e.start} - ${e.end}`, "briefcase")}{e.location && meta(e.location, "pin")}</div>
              </div>
            ))}
          </section>
        );
        if (key === "projects" && projects.length > 0) return (
          <section key="projects" style={{ marginBottom: 20 }}><Head>Projects</Head>
            {projects.map((p, i) => (
              <div key={i} style={{ marginBottom: 9 }}>
                <div style={{ fontSize: body + 1, fontWeight: 600, color: nameColor }}>{p.name}</div>
                {p.detail && <div style={{ color: SUB, marginTop: 1 }}>{p.detail}</div>}
                <Bullets items={p.bullets} />
              </div>
            ))}
          </section>
        );
        if (key === "skills" && skillItems.length > 0) return (
          <section key="skills" style={{ marginBottom: 20 }}><Head>Skills</Head>
            <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
              {skillItems.map((s, i) => (
                <div key={i} style={{ fontSize: body, color: nameColor, fontWeight: 500, padding: "5px 0", borderBottom: "1px solid #eceef2" }}>{s}</div>
              ))}
            </div>
          </section>
        );
        if (key === "certs" && certs.length > 0) return (
          <section key="certs" style={{ marginBottom: 20 }}><Head>Training &amp; Courses</Head>
            {certs.filter(Boolean).map((c, i) => <div key={i} style={{ color: accent, fontWeight: 600, fontSize: body, marginBottom: 8 }}>{c}</div>)}
          </section>
        );
        if (key === "languages" && languages.length > 0) return (
          <section key="languages" style={{ marginBottom: 20 }}><Head>Languages</Head>
            {languages.filter(l => l.lang).map((l, i) => <div key={i} style={{ fontSize: body, color: nameColor, fontWeight: 500, padding: "5px 0", borderBottom: "1px solid #eceef2" }}>{l.lang}{l.level ? ` - ${l.level}` : ""}</div>)}
          </section>
        );
        if (key === "activities" && activities.length > 0) return (
          <section key="activities" style={{ marginBottom: 20 }}><Head>Extracurricular Activities</Head>
            {activities.map((a, i) => (
              <div key={i} style={{ marginBottom: 9 }}>
                <div style={{ fontWeight: 600, color: nameColor }}>{a.title}{a.org ? ` - ${a.org}` : ""}</div>
                {a.dates && <div style={{ color: META, fontSize: body - 1 }}>{a.dates}</div>}
                {a.detail && <div style={{ color: SUB, marginTop: 2 }}>{a.detail}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "profdegrees" && profdegrees.length > 0) return (
          <section key="profdegrees" style={{ marginBottom: 20 }}><Head>Professional Credentials</Head>
            {profdegrees.filter(Boolean).map((c, i) => <div key={i} style={{ color: accent, fontWeight: 600, fontSize: body, marginBottom: 8 }}>{c}</div>)}
          </section>
        );
        if (key === "references") return (
          <section key="references" style={{ marginBottom: 20 }}><Head>References</Head>
            {refsOnRequest || !references.length ? (
              <div style={{ color: SUB, fontStyle: "italic" }}>Available upon request</div>
            ) : references.filter(r => r.name).map((r, i) => (
              <div key={i} style={{ marginBottom: 10 }}>
                <div style={{ fontWeight: 700, color: nameColor }}>{r.name}</div>
                {r.title && <div style={{ color: SUB }}>{r.title}{r.company ? `, ${r.company}` : ""}</div>}
                {r.email && <div style={{ color: accent, fontSize: body - 0.5 }}>{r.email}</div>}
              </div>
            ))}
          </section>
        );
        return null;
      })}
    </div>
  );

  const Side = (
    <div style={{ minWidth: 0 }}>
      {sectionOrder.filter(id => inSidebar(id)).map(key => {
        if (key === "skills" && skillItems.length > 0) return (
          <section key="skills" style={{ marginBottom: 20 }}><Head small>Skills</Head>
            <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
              {skillItems.map((s, i) => (
                <div key={i} style={{ fontSize: body, color: nameColor, fontWeight: 500, padding: "5px 0", borderBottom: "1px solid #eceef2" }}>{s}</div>
              ))}
            </div>
          </section>
        );
        if (key === "certs" && certs.length > 0) return (
          <section key="certs" style={{ marginBottom: 20 }}><Head small>Training &amp; Courses</Head>
            {certs.filter(Boolean).map((c, i) => <div key={i} style={{ color: accent, fontWeight: 600, fontSize: body, marginBottom: 8 }}>{c}</div>)}
          </section>
        );
        if (key === "education" && education.length > 0) return (
          <section key="education" style={{ marginBottom: 20 }}><Head small>Education</Head>
            {education.map((e, i) => (
              <div key={i} style={{ marginBottom: 10 }}>
                <div style={{ fontSize: body + 1, fontWeight: 600, color: nameColor, lineHeight: 1.2 }}>{e.degree}</div>
                <div style={{ color: accent, fontWeight: 600 }}>{e.school}</div>
                <div style={{ color: META, fontSize: body - 1, marginTop: 2 }}>{e.start} - {e.end}{e.location ? ` · ${e.location}` : ""}</div>
              </div>
            ))}
          </section>
        );
        if (key === "experience" && experience.length > 0) return (
          <section key="experience" style={{ marginBottom: 20 }}><Head small>Experience</Head><ExpBlock items={experience} /></section>
        );
        if (key === "projects" && projects.length > 0) return (
          <section key="projects" style={{ marginBottom: 20 }}><Head small>Projects</Head>
            {projects.map((p, i) => (
              <div key={i} style={{ marginBottom: 9 }}>
                <div style={{ fontSize: body + 1, fontWeight: 600, color: nameColor }}>{p.name}</div>
                {p.detail && <div style={{ color: SUB, marginTop: 1 }}>{p.detail}</div>}
                <Bullets items={p.bullets} />
              </div>
            ))}
          </section>
        );
        if (key === "languages" && languages.length > 0) return (
          <section key="languages" style={{ marginBottom: 20 }}><Head small>Languages</Head>
            {languages.filter(l => l.lang).map((l, i) => <div key={i} style={{ fontSize: body, color: nameColor, fontWeight: 500, padding: "4px 0", borderBottom: "1px solid #eceef2" }}>{l.lang}{l.level ? ` - ${l.level}` : ""}</div>)}
          </section>
        );
        if (key === "activities" && activities.length > 0) return (
          <section key="activities" style={{ marginBottom: 20 }}><Head small>Extracurricular Activities</Head>
            {activities.map((a, i) => (
              <div key={i} style={{ marginBottom: 8 }}>
                <div style={{ fontWeight: 600, color: nameColor, fontSize: body }}>{a.title}{a.org ? ` - ${a.org}` : ""}</div>
                {a.dates && <div style={{ color: META, fontSize: body - 1 }}>{a.dates}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "profdegrees" && profdegrees.length > 0) return (
          <section key="profdegrees" style={{ marginBottom: 20 }}><Head small>Professional Credentials</Head>
            {profdegrees.filter(Boolean).map((c, i) => <div key={i} style={{ color: accent, fontWeight: 600, fontSize: body, marginBottom: 8 }}>{c}</div>)}
          </section>
        );
        if (key === "references") return (
          <section key="references" style={{ marginBottom: 20 }}><Head small>References</Head>
            {refsOnRequest || !references.length ? (
              <div style={{ color: SUB, fontStyle: "italic", fontSize: body }}>Available upon request</div>
            ) : references.filter(r => r.name).map((r, i) => (
              <div key={i} style={{ marginBottom: 8 }}>
                <div style={{ fontWeight: 700, color: nameColor }}>{r.name}</div>
                {r.title && <div style={{ color: SUB, fontSize: body - 0.5 }}>{r.title}</div>}
                {r.email && <div style={{ color: accent, fontSize: body - 0.5 }}>{r.email}</div>}
              </div>
            ))}
          </section>
        );
        return null;
      })}
      {custom.filter((c) => (c.heading && c.heading.trim()) || (c.body && c.body.replace(/<[^>]*>/g, "").trim())).map((c) => (
        <section key={c.id} style={{ marginBottom: 20 }}><Head small>{c.heading || "Section"}</Head>
          <div className="resume-rte" style={{ lineHeight: lh, color: SUB }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(c.body || "") }} /></section>
      ))}
    </div>
  );

  return (
    <div style={{ fontFamily: font, fontSize: body, lineHeight: lh, color: nameColor, padding: `${42}px ${PAD}px ${48}px`, minHeight: 1056 }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 22, marginBottom: 24 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <h1 style={{ margin: 0, fontSize: 35 * f, fontWeight: 700, color: nameColor, lineHeight: 1.05, textTransform: "uppercase", letterSpacing: ".01em" }}>{basics.name || "Your Name"}</h1>
          {basics.title && <div style={{ fontSize: 16 * f, color: accent, fontWeight: 600, marginTop: 3 }}>{basics.title}</div>}
          {contact.length > 0 && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: "5px 16px", marginTop: 10 }}>
              {contact.map((c, i) => (
                <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: body - .5, color: META }}>
                  <Icon name={c.icon} size={13} strokeWidth={1.9} style={{ color: accent }} /><span>{c.text}</span>
                </span>
              ))}
            </div>
          )}
        </div>
        {basics.photo && <img src={basics.photo} alt="" style={{ width: 88, height: 88, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: side === "left" ? "33% 1fr" : "1fr 33%", gap: 30 }}>
        {side === "left" ? <>{Side}{Main}</> : <>{Main}{Side}</>}
      </div>
    </div>
  );
}

const DEFAULT_SIDEBAR = ["skills", "certs", "education"];

function Resume({ data, template = "classic", accent = "#1C9BE6", design = {}, sectionOrder = DEFAULT_ORDER, sidebarSections = DEFAULT_SIDEBAR }) {
  if (template === "novo") return <NovoResume data={data} accent={accent} design={design} sectionOrder={sectionOrder} />;
  if (template === "slate") return <SlateResume data={data} accent={accent} design={design} sectionOrder={sectionOrder} />;
  if (template === "timeline") return <TimelineResume data={data} accent={accent} design={design} sectionOrder={sectionOrder} />;
  if (template === "sidebar" || template === "split") {
    const cfg = TEMPLATES[template];
    return <TwoColResume data={data} accent={accent} design={design} side={cfg.side} nameColor={cfg.nameColor} sectionOrder={sectionOrder} sidebarSections={sidebarSections} />;
  }
  const t0 = TEMPLATES[template] || TEMPLATES.classic;
  const f = design.scale === "small" ? 0.93 : design.scale === "large" ? 1.09 : 1;
  const sp = design.spacing === "compact" ? 0.9 : design.spacing === "relaxed" ? 1.14 : 1;
  const fontOverride = design.font && design.font !== "auto" ? FONT_STACKS[design.font] : null;
  const t = {
    ...t0,
    font: fontOverride || t0.font,
    headFont: fontOverride || t0.headFont,
    mono: fontOverride ? false : t0.mono,
    nameSize: t0.nameSize * f,
    body: t0.body * f,
    lh: +(t0.lh * sp).toFixed(3),
    gap: t0.gap * sp,
    sec: { ...t0.sec, size: t0.sec.size * f },
    titleStyle: { ...t0.titleStyle, size: t0.titleStyle.size * f, mono: fontOverride ? false : t0.titleStyle.mono },
    contact: { ...t0.contact, mono: fontOverride ? false : t0.contact.mono },
    contactSize: (t0.contact.mono && !fontOverride ? 11.5 : 12.2) * f,
  };
  const { basics = {}, summary, experience = [], education = [], skills = [], projects = [], certs = [], custom = [], languages = [], activities = [], profdegrees = [], references = [], refsOnRequest } = data;
  const pad = template === "minimal" ? 64 : template === "technical" ? 48 : 56;
  const g = t.gap;

  const contactItems = [
    basics.location, basics.phone, basics.email, basics.website, basics.linkedin,
  ].filter(Boolean);

  const linkColor = t.contact.accent ? accent : clr("ink", accent);

  const wrapStyle = {
    fontFamily: t.font,
    fontSize: t.body,
    lineHeight: t.lh,
    color: "#15171f",
    padding: `${pad}px ${pad}px ${pad + 8}px`,
    minHeight: 1056,
  };

  const Bullets = ({ items }) => (
    <ul style={{ margin: "5px 0 0", paddingLeft: 18 }}>
      {(items || []).filter(Boolean).map((b, i) => (
        <li key={i} style={{ margin: `0 0 ${3 * g}px`, lineHeight: t.lh }}>{b}</li>
      ))}
    </ul>
  );

  const photo = basics.photo;
  const avatarRadius = (template === "classic" || template === "executive") ? "50%" : "10px";
  const Avatar = photo ? (
    <img src={photo} alt="" style={{ width: 86, height: 86, objectFit: "cover", borderRadius: avatarRadius, border: "1px solid #e2e5ee", flexShrink: 0 }} />
  ) : null;

  const Header = () => {
    const TextBlock = (
      <div style={{ flex: t.align === "center" ? undefined : 1, minWidth: 0 }}>
        <h1 style={{
          fontFamily: t.headFont, fontSize: t.nameSize, fontWeight: t.nameWeight,
          textTransform: t.nameCase, letterSpacing: t.nameSpace, margin: 0,
          color: t.accentName ? accent : "#0f1117", lineHeight: 1.1,
        }}>{t.nameSplit ? (() => { const parts = (basics.name || "Your Name").split(" "); const last = parts.length > 1 ? parts.pop() : ""; return (<>{parts.join(" ")}{last && <span style={{ color: accent }}> {last}</span>}</>); })() : (basics.name || "Your Name")}</h1>
        {basics.title && (
          <div style={{
            fontFamily: t.titleStyle.mono ? '"Geist Mono", monospace' : t.font,
            fontSize: t.titleStyle.size, fontWeight: t.titleStyle.weight,
            fontStyle: t.titleStyle.italic ? "italic" : "normal",
            textTransform: t.titleStyle.case, letterSpacing: t.titleStyle.space || "normal",
            color: clr(t.titleStyle.color, accent), marginTop: 5,
          }}>{basics.title}</div>
        )}
        {!t.contact.bar && (
        <div style={{
          marginTop: 9, fontSize: t.contactSize,
          fontFamily: t.contact.mono ? '"Geist Mono", monospace' : t.font,
          color: "#3a3d49",
          display: "flex", flexWrap: "wrap", gap: "3px 9px",
          justifyContent: t.contact.align === "center" ? "center" : "flex-start",
        }}>
          {contactItems.map((c, i) => {
            const isLink = c === basics.email || c === basics.website || c === basics.linkedin;
            return (
              <span key={i} style={{ display: "inline-flex", gap: "9px" }}>
                <span style={{ color: isLink ? linkColor : "#3a3d49" }}>{c}</span>
                {i < contactItems.length - 1 && <span style={{ color: "#b8bdc9" }}>{t.contact.sep}</span>}
              </span>
            );
          })}
        </div>
        )}
      </div>
    );
    if (t.align === "center") {
      return (
        <header style={{ marginBottom: 6, textAlign: "center" }}>
          {Avatar && <div style={{ marginBottom: 12 }}>{Avatar}</div>}
          {TextBlock}
          {t.headerRule && <div style={{ borderBottom: "1.5px solid #2c2f3a", marginTop: 14 }} />}
        </header>
      );
    }
    return (
      <header style={{ marginBottom: 6 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
          {TextBlock}
          {Avatar}
        </div>
        {t.contact.bar && contactItems.length > 0 && (
          <div style={{ background: "#15171f", color: "#fff", display: "flex", flexWrap: "wrap", gap: "4px 16px",
            margin: `13px ${-pad}px 4px`, padding: `8px ${pad}px`, fontSize: t.contactSize, fontWeight: 600 }}>
            {contactItems.map((c, i) => (
              <span key={i} style={{ display: "inline-flex", gap: 16 }}>
                <span>{c}</span>{i < contactItems.length - 1 && <span style={{ opacity: .45 }}>{t.contact.sep}</span>}
              </span>
            ))}
          </div>
        )}
        {t.headerRule && <div style={{ borderBottom: "1.5px solid #2c2f3a", marginTop: 14 }} />}
      </header>
    );
  };

  const ExpItem = (x, i) => (
    <div key={i} style={{ marginBottom: 13 * g, breakInside: "avoid" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
        <div style={{ fontWeight: 700, color: "#15171f", fontSize: t.body + .5 }}>{x.role}</div>
        <div style={{ fontSize: t.body - .5, color: "#5a6072", whiteSpace: "nowrap", fontWeight: 500 }}>{x.start} – {x.end}</div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, marginTop: 1 }}>
        <div style={{ color: accent, fontWeight: 600, fontSize: t.body }}>{x.company}</div>
        <div style={{ fontSize: t.body - .5, color: "#5a6072", whiteSpace: "nowrap" }}>{x.location}</div>
      </div>
      <Bullets items={x.bullets} />
    </div>
  );

  return (
    <div style={wrapStyle}>
      <Header />

      {summary && (
        <section>
          <SectionTitle t={t} accent={accent}>{template === "executive" ? "Profile" : "Summary"}</SectionTitle>
          <p style={{ margin: 0, lineHeight: t.lh, color: "#2a2d38" }}>{summary}</p>
        </section>
      )}

      {sectionOrder.map(key => {
        if (key === "experience" && experience.length > 0) return (
          <section key="experience">
            <SectionTitle t={t} accent={accent}>Experience</SectionTitle>
            {experience.map(ExpItem)}
          </section>
        );
        if (key === "projects" && projects.length > 0) return (
          <section key="projects">
            <SectionTitle t={t} accent={accent}>Projects</SectionTitle>
            {projects.map((p, i) => (
              <div key={i} style={{ marginBottom: 11 * g }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                  <div style={{ fontWeight: 700, color: "#15171f" }}>{p.name}</div>
                  {p.tech && <div style={{ fontSize: t.body - 1, color: accent, fontFamily: t.mono ? '"Geist Mono", monospace' : t.font }}>{p.tech}</div>}
                </div>
                {p.detail && <div style={{ marginTop: 2, color: "#2a2d38" }}>{p.detail}</div>}
                <Bullets items={p.bullets} />
              </div>
            ))}
          </section>
        );
        if (key === "education" && education.length > 0) return (
          <section key="education">
            <SectionTitle t={t} accent={accent}>Education</SectionTitle>
            {education.map((e, i) => (
              <div key={i} style={{ marginBottom: 9 * g }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                  <div style={{ fontWeight: 700, color: "#15171f" }}>{e.school}</div>
                  <div style={{ fontSize: t.body - .5, color: "#5a6072", whiteSpace: "nowrap" }}>{e.start} – {e.end}</div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, marginTop: 1 }}>
                  <div style={{ color: "#3a3d49" }}>{e.degree}</div>
                  <div style={{ fontSize: t.body - .5, color: "#5a6072", whiteSpace: "nowrap" }}>{e.location}</div>
                </div>
                {e.detail && <div style={{ marginTop: 3, color: "#5a6072", fontSize: t.body - .5 }}>{e.detail}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "skills" && skills.length > 0) return (
          <section key="skills">
            <SectionTitle t={t} accent={accent}>Skills</SectionTitle>
            {skills.map((grp, i) => (
              <div key={i} style={{ marginBottom: 5 * g, display: "flex", gap: 8, lineHeight: t.lh }}>
                {grp.group && (
                  <span style={{ fontWeight: 700, color: "#15171f", minWidth: 118, flexShrink: 0,
                    fontFamily: t.mono ? '"Geist Mono", monospace' : t.font, fontSize: t.mono ? t.body - .5 : t.body }}>
                    {grp.group}
                  </span>
                )}
                <span style={{ color: "#2a2d38" }}>{(grp.items || []).join("  •  ")}</span>
              </div>
            ))}
          </section>
        );
        if (key === "certs" && certs.length > 0) return (
          <section key="certs">
            <SectionTitle t={t} accent={accent}>Certifications</SectionTitle>
            <ul style={{ margin: "5px 0 0", paddingLeft: 18 }}>
              {certs.map((c, i) => <li key={i} style={{ marginBottom: 3 * g }}>{c}</li>)}
            </ul>
          </section>
        );
        if (key === "languages" && languages.length > 0) return (
          <section key="languages">
            <SectionTitle t={t} accent={accent}>Languages</SectionTitle>
            <div style={{ display: "flex", flexWrap: "wrap", gap: `${4 * g}px ${18 * g}px`, marginTop: 4 * g }}>
              {languages.filter(l => l.lang).map((l, i) => (
                <span key={i} style={{ fontSize: t.body }}><strong>{l.lang}</strong>{l.level ? ` - ${l.level}` : ""}</span>
              ))}
            </div>
          </section>
        );
        if (key === "activities" && activities.length > 0) return (
          <section key="activities">
            <SectionTitle t={t} accent={accent}>Extracurricular Activities</SectionTitle>
            {activities.map((a, i) => (
              <div key={i} style={{ marginBottom: 10 * g }}>
                <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap" }}>
                  <span style={{ fontWeight: 600, fontSize: t.body + 0.5 }}>{a.title}{a.org ? ` - ${a.org}` : ""}</span>
                  {a.dates && <span style={{ fontSize: t.body - 1, color: "#666", fontStyle: "italic" }}>{a.dates}</span>}
                </div>
                {a.detail && <div style={{ fontSize: t.body, color: "#444", marginTop: 3 * g }}>{a.detail}</div>}
              </div>
            ))}
          </section>
        );
        if (key === "profdegrees" && profdegrees.length > 0) return (
          <section key="profdegrees">
            <SectionTitle t={t} accent={accent}>Professional Credentials</SectionTitle>
            <ul style={{ margin: `${5 * g}px 0 0`, paddingLeft: 18 }}>
              {profdegrees.filter(Boolean).map((c, i) => <li key={i} style={{ marginBottom: 3 * g }}>{c}</li>)}
            </ul>
          </section>
        );
        if (key === "references") return (
          <section key="references">
            <SectionTitle t={t} accent={accent}>References</SectionTitle>
            {refsOnRequest || !references.length ? (
              <p style={{ margin: `${4 * g}px 0 0`, fontSize: t.body, color: "#555", fontStyle: "italic" }}>Available upon request</p>
            ) : (
              <div style={{ display: "flex", flexWrap: "wrap", gap: 16 * g }}>
                {references.filter(r => r.name).map((r, i) => (
                  <div key={i} style={{ minWidth: 180, fontSize: t.body }}>
                    <div style={{ fontWeight: 700 }}>{r.name}</div>
                    {r.title && <div>{r.title}{r.company ? `, ${r.company}` : ""}</div>}
                    {r.email && <div style={{ color: accent }}>{r.email}</div>}
                    {r.phone && <div>{r.phone}</div>}
                  </div>
                ))}
              </div>
            )}
          </section>
        );
        return null;
      })}
      {custom.filter(c => (c.heading && c.heading.trim()) || (c.body && c.body.replace(/<[^>]*>/g, "").trim())).map((c) => (
        <section key={c.id}>
          <SectionTitle t={t} accent={accent}>{c.heading || "Section"}</SectionTitle>
          <div className="resume-rte" style={{ lineHeight: t.lh, color: "#2a2d38" }}
            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(c.body || "") }} />
        </section>
      ))}
    </div>
  );
}

Object.assign(window, { Resume, TEMPLATES, FONTS, RESUME_ACCENTS });