/* global React */
// ============================================================
//  Sample resume data + template metadata + icon set
// ============================================================

// ---- sample resume the prototype boots with ----
const SAMPLE_RESUME = {
  name: "Mira Calloway",
  title: "Product Designer → Design Engineer",
  location: "Brooklyn, NY",
  email: "mira.calloway@email.com",
  phone: "(347) 555-0182",
  website: "miracalloway.com",
  photo: "https://randomuser.me/api/portraits/women/68.jpg",
  summary:
    "Product designer with 6 years shipping consumer apps, now building the interfaces I used to hand off. I pair systems thinking with front-end craft to take ideas from sketch to production, and I care about the details users never consciously notice but always feel.",
  skills: [
    { name: "Figma", level: 5 }, { name: "React", level: 4 }, { name: "Design Systems", level: 5 },
    { name: "Prototyping", level: 5 }, { name: "TypeScript", level: 3 }, { name: "User Research", level: 4 },
    { name: "Motion", level: 4 }, { name: "Accessibility", level: 4 }, { name: "Framer", level: 4 },
    { name: "CSS Architecture", level: 4 }, { name: "Design Tokens", level: 5 }, { name: "Usability Testing", level: 3 },
    { name: "Storybook", level: 4 }, { name: "Product Strategy", level: 3 },
  ],
  experience: [
    {
      id: "e1",
      role: "Senior Product Designer",
      company: "Lumen Labs",
      start: "2022",
      end: "Present",
      location: "Remote",
      bullets: [
        "Led the redesign of the onboarding flow, lifting activation by 34% across 1.2M monthly users.",
        "Built and maintained the company design system adopted by 40+ engineers across six product squads.",
        "Prototyped in code to validate motion and micro-interactions before handoff, cutting design-to-ship time by half.",
        "Mentored three junior designers and ran the weekly design critique that set the bar for craft across the org.",
      ],
    },
    {
      id: "e2",
      role: "Product Designer",
      company: "Northwind",
      start: "2019",
      end: "2022",
      location: "New York, NY",
      bullets: [
        "Owned end-to-end design for the mobile checkout, reducing cart abandonment by 21%.",
        "Ran a weekly research cadence with 200+ customer interviews over two years.",
        "Partnered with engineering to ship a component library that became the team's source of truth.",
      ],
    },
    {
      id: "e3",
      role: "Product Designer",
      company: "Fathom Analytics",
      start: "2018",
      end: "2019",
      location: "New York, NY",
      bullets: [
        "Designed the dashboard and reporting suite used daily by 8,000+ paying teams.",
        "Established the first set of data-visualization patterns and charting guidelines for the product.",
      ],
    },
    {
      id: "e4",
      role: "Junior Designer",
      company: "Studio Mercer",
      start: "2017",
      end: "2018",
      location: "Providence, RI",
      bullets: [
        "Produced brand identities and marketing sites for early-stage startups and local businesses.",
        "Shipped 20+ client projects spanning logo systems, type, and responsive web.",
      ],
    },
  ],
  education: [
    {
      id: "ed1",
      school: "Rhode Island School of Design",
      degree: "BFA, Graphic Design",
      start: "2013",
      end: "2017",
    },
    {
      id: "ed2",
      school: "General Assembly",
      degree: "Front-End Web Development",
      start: "2018",
      end: "2018",
    },
  ],
  projects: [
    { id: "p1", name: "Cadence", desc: "Open-source motion library for React, 4k+ stars on GitHub." },
    { id: "p2", name: "Typescale", desc: "A small tool for generating accessible modular type scales." },
    { id: "p3", name: "Field Notes", desc: "A weekly newsletter on design engineering, 6k subscribers." },
  ],
  certifications: [
    { id: "c1", name: "Google UX Design Certificate", issuer: "Google", year: "2021" },
    { id: "c2", name: "Certified Professional in Accessibility (CPACC)", issuer: "IAAP", year: "2023" },
  ],
  languages: [
    { id: "l1", name: "English", level: "Native" },
    { id: "l2", name: "Spanish", level: "Professional" },
    { id: "l3", name: "Portuguese", level: "Conversational" },
  ],
  awards: [
    { id: "a1", name: "Webby Award — Best Visual Design", issuer: "IADAS", year: "2023" },
    { id: "a2", name: "Design Lead of the Year", issuer: "Lumen Labs", year: "2022" },
  ],
  interests: ["Typography", "Generative art", "Trail running", "Film photography"],
  courses: ["Human–Computer Interaction", "Color Theory", "Data Visualization", "Front-End Architecture"],
  volunteer: [
    {
      id: "v1",
      role: "Design Mentor",
      company: "Out in Tech",
      start: "2020",
      end: "Present",
      location: "",
      bullets: ["Mentor early-career LGBTQ+ designers through portfolio reviews and 1:1 coaching."],
    },
  ],
  publications: [
    { id: "pub1", title: "Designing Motion That Means Something", venue: "Smashing Magazine", year: "2023" },
    { id: "pub2", title: "A Systems Approach to Color Tokens", venue: "A List Apart", year: "2022" },
  ],
  references: [
    { id: "r1", name: "Dr. Elena Ruiz", title: "VP Design, Lumen Labs", contact: "elena@lumenlabs.com" },
  ],
  sectionOrder: ["summary", "experience", "projects", "skills", "certifications", "awards", "languages", "education"],
};

// ---- résumé templates ----------------------------------------------------
//  Each template is a layout descriptor consumed by the unified render engine
//  (see ResumePreview.jsx). arch: "stack" (header on top) | "sidebar" (left
//  rail). side: section keys routed to the rail / side column (the rest flow
//  in the main column, honoring the user's drag-and-drop section order).
//  skills: how the Skills section renders — tags | pills | bars | rings | list.
// --------------------------------------------------------------------------
const TEMPLATES = [
  // ===== creative / general =====
  {
    id: "spectrum", name: "Spectrum", tag: "Creative",
    blurb: "Bold colored sidebar with a confident two-column body.",
    accent: "#6d5cff", accent2: "#ff5ca8", swatch: ["#6d5cff", "#ff5ca8", "#0f1020"],
    arch: "sidebar", photo: true, skills: "tags",
    side: ["skills", "education", "languages", "certifications", "interests"],
  },
  {
    id: "aurora", name: "Aurora", tag: "Modern",
    blurb: "Gradient banner header with airy, modern sections.",
    accent: "#13b6a8", accent2: "#5b8cff", swatch: ["#13b6a8", "#5b8cff", "#f7fbfb"],
    arch: "stack", head: "banner", skills: "pills",
    side: ["skills", "education", "languages"],
  },
  {
    id: "ember", name: "Ember", tag: "Editorial",
    blurb: "Warm editorial layout with a striking display name.",
    accent: "#f4663a", accent2: "#ffb43d", swatch: ["#f4663a", "#ffb43d", "#fffaf4"],
    arch: "stack", head: "editorial", skills: "tags",
    side: ["skills", "education", "certifications", "languages"],
  },
  {
    id: "mono", name: "Mono", tag: "Minimal",
    blurb: "Minimal typographic single column. Ultra ATS-friendly.",
    accent: "#111111", accent2: "#6b6b6b", swatch: ["#111111", "#6b6b6b", "#ffffff"],
    arch: "stack", head: "labeled", skills: "list", side: [],
  },
  {
    id: "prism", name: "Prism", tag: "Playful",
    blurb: "Playful color-blocked grid for design & creative roles.",
    accent: "#7c3aed", accent2: "#06b6d4", swatch: ["#7c3aed", "#06b6d4", "#fef9c3"],
    arch: "stack", head: "card", skills: "pills",
    side: ["skills", "education", "languages"],
  },
  {
    id: "atlas", name: "Atlas", tag: "Modern",
    blurb: "Oversized letter-spaced name, photo & skill bars. Refined.",
    accent: "#e0b020", accent2: "#2b2b2f", swatch: ["#e0b020", "#1c1c20", "#f5f5f3"],
    arch: "sidebar", photo: true, skills: "bars", rail: "light",
    side: ["skills", "education", "languages", "certifications"],
  },
  {
    id: "onyx", name: "Onyx", tag: "Creative",
    blurb: "Premium dark résumé with skill rings and glass cards.",
    accent: "#7c6cff", accent2: "#3ad6c0", swatch: ["#7c6cff", "#3ad6c0", "#161b29"],
    arch: "stack", head: "dark", photo: true, skills: "rings",
    side: ["education", "projects", "awards", "languages"],
  },
  {
    id: "quill", name: "Quill", tag: "Editorial",
    blurb: "Refined magazine layout with a serif name and drop-cap intro.",
    accent: "#7a2e3a", accent2: "#b08a5a", swatch: ["#7a2e3a", "#b08a5a", "#fbf9f5"],
    arch: "stack", head: "serifCenter", skills: "tags",
    side: ["skills", "education", "languages", "projects"],
  },

  // ===== finance & business =====
  {
    id: "wolfe", name: "Wolfe", tag: "Finance",
    blurb: "Investment-banking standard. Centered serif, dense, one-page, no graphics — exactly what Wall Street recruiters expect.",
    accent: "#14233f", accent2: "#5a6678", swatch: ["#14233f", "#5a6678", "#ffffff"],
    arch: "stack", head: "ibank", skills: "list", side: [],
  },
  {
    id: "ledger", name: "Ledger", tag: "Finance",
    blurb: "Corporate finance & accounting. Conservative two-tone layout with a crisp credentials column.",
    accent: "#20493f", accent2: "#6f8a82", swatch: ["#20493f", "#6f8a82", "#ffffff"],
    arch: "stack", head: "ruled", skills: "list",
    side: ["skills", "certifications", "languages"],
  },
  {
    id: "beacon", name: "Beacon", tag: "Consulting",
    blurb: "Management consulting (MBB). Structured, achievement-first, navy and clean.",
    accent: "#15425c", accent2: "#3f7da0", swatch: ["#15425c", "#3f7da0", "#ffffff"],
    arch: "stack", head: "centered", skills: "list", side: [],
  },
  {
    id: "summit", name: "Summit", tag: "Executive",
    blurb: "C-suite & senior leadership. Elegant serif header with a leadership-forward layout.",
    accent: "#2a2a2e", accent2: "#b8924f", swatch: ["#2a2a2e", "#b8924f", "#faf9f6"],
    arch: "stack", head: "exec", skills: "list",
    side: ["skills", "awards", "education", "languages"],
  },
  {
    id: "bolt", name: "Bolt", tag: "Sales",
    blurb: "Sales & business development. Metrics-forward with a bold accent band and quota highlights.",
    accent: "#ef5b2b", accent2: "#ffb020", swatch: ["#ef5b2b", "#ffb020", "#0e0f14"],
    arch: "stack", head: "band", skills: "bars",
    side: ["skills", "awards", "languages"],
  },

  // ===== tech & engineering =====
  {
    id: "cobalt", name: "Cobalt", tag: "Tech",
    blurb: "FAANG-ready & ATS-safe. Clean single column, literal headers, grouped skills — no columns to confuse the parser.",
    accent: "#2563eb", accent2: "#475569", swatch: ["#2563eb", "#0f172a", "#ffffff"],
    arch: "stack", head: "ats", skills: "list", side: [],
  },
  {
    id: "terminal", name: "Terminal", tag: "Tech",
    blurb: "Monospace developer résumé with command-line section headers.",
    accent: "#1f8a5b", accent2: "#0f8a7a", swatch: ["#1f8a5b", "#0f1b14", "#f3f6f3"],
    arch: "stack", head: "codecard", skills: "tags",
    side: ["skills", "education", "languages"],
  },
  {
    id: "forge", name: "Forge", tag: "Engineering",
    blurb: "Mechanical, civil & hardware engineering. Industrial layout foregrounding skills & certifications.",
    accent: "#c2691c", accent2: "#2b2f36", swatch: ["#c2691c", "#2b2f36", "#f5f5f3"],
    arch: "sidebar", skills: "bars", rail: "light",
    side: ["skills", "certifications", "languages", "education"],
  },
  {
    id: "vertex", name: "Vertex", tag: "Bold",
    blurb: "Bold electric header band with a geometric edge and two-column body.",
    accent: "#2f4bff", accent2: "#00c2ff", swatch: ["#2f4bff", "#00c2ff", "#0a0e1f"],
    arch: "stack", head: "band", skills: "pills",
    side: ["skills", "education", "projects"],
  },

  // ===== academic, legal, healthcare, government =====
  {
    id: "scholar", name: "Scholar", tag: "Academic",
    blurb: "Academic CV for research roles & foreign universities. Serif, multi-page, publications & teaching.",
    accent: "#5b2333", accent2: "#8a6d4f", swatch: ["#5b2333", "#8a6d4f", "#fbf9f6"],
    arch: "stack", head: "cv", skills: "list", side: [],
  },
  {
    id: "statute", name: "Statute", tag: "Legal",
    blurb: "Law & legal practice. Formal centered serif with bar-admission and credentials emphasis.",
    accent: "#20283f", accent2: "#7a3b46", swatch: ["#20283f", "#7a3b46", "#fbfaf7"],
    arch: "stack", head: "legal", skills: "list", side: [],
  },
  {
    id: "vitals", name: "Vitals", tag: "Healthcare",
    blurb: "Medical, nursing & allied health. Clean clinical layout with licenses & certifications up front.",
    accent: "#117a8b", accent2: "#3aa7a0", swatch: ["#117a8b", "#3aa7a0", "#f4fbfb"],
    arch: "stack", head: "clinical", skills: "tags",
    side: ["certifications", "skills", "languages"],
  },
  {
    id: "federal", name: "Federal", tag: "Government",
    blurb: "Government & public sector. Detailed, formal long-form layout built for federal-style applications.",
    accent: "#13315c", accent2: "#8a1f2b", swatch: ["#13315c", "#8a1f2b", "#ffffff"],
    arch: "stack", head: "formal", skills: "list", side: [],
  },

  // ===== marketing, design, service, international =====
  {
    id: "canvas", name: "Canvas", tag: "Marketing",
    blurb: "Marketing, brand & growth. Vibrant two-column layout with room for campaigns and metrics.",
    accent: "#c026d3", accent2: "#f97316", swatch: ["#c026d3", "#f97316", "#fff7fb"],
    arch: "stack", head: "vivid", skills: "pills",
    side: ["skills", "awards", "interests", "languages"],
  },
  {
    id: "pixel", name: "Pixel", tag: "Design",
    blurb: "UX & product design. Modern, minimal and portfolio-friendly.",
    accent: "#5b5bd6", accent2: "#00b3a4", swatch: ["#5b5bd6", "#00b3a4", "#ffffff"],
    arch: "stack", head: "designer", skills: "tags",
    side: ["skills", "education", "interests"],
  },
  {
    id: "connect", name: "Connect", tag: "BPO",
    blurb: "BPO & customer support. Friendly, easy-to-scan layout with languages and skills front and center.",
    accent: "#0e8aa0", accent2: "#16b3b0", swatch: ["#0e8aa0", "#16b3b0", "#f3fbfb"],
    arch: "sidebar", photo: true, skills: "tags",
    side: ["skills", "languages", "certifications", "interests"],
  },
  {
    id: "globe", name: "Globe", tag: "International",
    blurb: "Europass-style international CV. Photo, prominent languages and a structured rail.",
    accent: "#2557a7", accent2: "#2aa39a", swatch: ["#2557a7", "#2aa39a", "#f5f8fc"],
    arch: "sidebar", photo: true, skills: "tags",
    side: ["languages", "skills", "certifications", "interests"],
  },

  // ===== more general layouts =====
  {
    id: "slate", name: "Slate", tag: "Professional",
    blurb: "Traditional centered layout for finance, law & consulting. Conservative and ATS-safe.",
    accent: "#1f3a5f", accent2: "#5a7a9c", swatch: ["#1f3a5f", "#5a7a9c", "#ffffff"],
    arch: "stack", head: "centered", skills: "list", side: [],
  },

  // ===== scale-forward layouts (proficiency "vectors") =====
  {
    id: "meridian", name: "Meridian", tag: "Modern",
    blurb: "Skill-scale showcase. Colored rail with dot-rated tools and languages, photo, and a clean body.",
    accent: "#4f46e5", accent2: "#06b6d4", swatch: ["#4f46e5", "#06b6d4", "#f6f7fb"],
    arch: "sidebar", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education", "interests"],
  },
  {
    id: "quartz", name: "Quartz", tag: "Minimal",
    blurb: "Swiss-minimal single column with quiet segmented proficiency meters. Restrained and precise.",
    accent: "#2d2d33", accent2: "#8a8a94", swatch: ["#2d2d33", "#8a8a94", "#ffffff"],
    arch: "stack", head: "swiss", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "helix", name: "Helix", tag: "Tech",
    blurb: "Startup-engineer résumé with signal-bar skill ratings and a sharp two-column body.",
    accent: "#6d28d9", accent2: "#14b8a6", swatch: ["#6d28d9", "#14b8a6", "#f7f7fb"],
    arch: "stack", head: "techband", skills: "signal", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "marigold", name: "Marigold", tag: "Bold",
    blurb: "Warm, confident banner with segmented skill meters. Great for creative & growth roles.",
    accent: "#ea8c00", accent2: "#e0492b", swatch: ["#ea8c00", "#e0492b", "#fffaf2"],
    arch: "stack", head: "warmband", skills: "segments", scaleWord: true,
    side: ["skills", "languages", "interests"],
  },
  {
    id: "veritas", name: "Veritas", tag: "Professional",
    blurb: "Compact two-column professional layout with dot-rated competencies and credentials.",
    accent: "#0e7490", accent2: "#155e75", swatch: ["#0e7490", "#155e75", "#ffffff"],
    arch: "stack", head: "ruledpro", skills: "dots", scaleWord: true,
    side: ["skills", "certifications", "languages", "education"],
  },
  {
    id: "cascade", name: "Cascade", tag: "Modern",
    blurb: "Timeline experience with a connected spine, paired with dot-rated skills.",
    accent: "#2563eb", accent2: "#7c3aed", swatch: ["#2563eb", "#7c3aed", "#f7f9fc"],
    arch: "stack", head: "timeline", skills: "dots",
    side: ["skills", "education", "languages"],
  },

  // ===== Horizon — accent header band =====
  {
    id: "horizon-azure", name: "Horizon Azure", tag: "Modern",
    blurb: "Bold gradient header band with a crisp two-column body. Confident and current.",
    accent: "#2563eb", accent2: "#06b6d4", swatch: ["#2563eb", "#06b6d4", "#ffffff"],
    arch: "stack", head: "hzn", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "horizon-plum", name: "Horizon Plum", tag: "Bold",
    blurb: "Violet-to-pink header band for creative and product roles with a modern edge.",
    accent: "#7c3aed", accent2: "#db2777", swatch: ["#7c3aed", "#db2777", "#ffffff"],
    arch: "stack", head: "hzn", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "horizon-pine", name: "Horizon Pine", tag: "Modern",
    blurb: "Green gradient banner with a grounded, trustworthy feel. Great for ops & impact.",
    accent: "#0f766e", accent2: "#22c55e", swatch: ["#0f766e", "#22c55e", "#ffffff"],
    arch: "stack", head: "hzn", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },

  // ===== Margin — left accent rule =====
  {
    id: "margin-slate", name: "Margin Slate", tag: "Professional",
    blurb: "A quiet left accent rule and underlined headings. Corporate and composed.",
    accent: "#334155", accent2: "#0ea5e9", swatch: ["#334155", "#0ea5e9", "#ffffff"],
    arch: "stack", head: "mgn", skills: "bars",
    side: ["skills", "certifications", "languages"],
  },
  {
    id: "margin-clay", name: "Margin Clay", tag: "Professional",
    blurb: "Warm clay accent margin with skill bars. Approachable yet structured.",
    accent: "#b45309", accent2: "#ea580c", swatch: ["#b45309", "#ea580c", "#fffdf8"],
    arch: "stack", head: "mgn", skills: "bars",
    side: ["skills", "certifications", "languages"],
  },
  {
    id: "margin-berry", name: "Margin Berry", tag: "Professional",
    blurb: "Berry accent rule with confident underlined sections. Distinctive but clean.",
    accent: "#9d174d", accent2: "#db2777", swatch: ["#9d174d", "#db2777", "#fff8fb"],
    arch: "stack", head: "mgn", skills: "bars",
    side: ["skills", "certifications", "languages"],
  },

  // ===== Tabbed — soft tinted rail =====
  {
    id: "tabbed-indigo", name: "Tabbed Indigo", tag: "Modern",
    blurb: "Soft tinted sidebar with photo and dot-rated skills. Friendly and organized.",
    accent: "#4f46e5", accent2: "#06b6d4", swatch: ["#4f46e5", "#06b6d4", "#f4f5fd"],
    arch: "sidebar", head: "tab", photo: true, skills: "dots", scaleWord: true, rail: "light",
    side: ["skills", "education", "languages", "certifications", "interests"],
  },
  {
    id: "tabbed-teal", name: "Tabbed Teal", tag: "Modern",
    blurb: "Calm teal-tinted rail with photo. Clean scan for service & support roles.",
    accent: "#0d9488", accent2: "#14b8a6", swatch: ["#0d9488", "#14b8a6", "#f1faf9"],
    arch: "sidebar", head: "tab", photo: true, skills: "dots", scaleWord: true, rail: "light",
    side: ["skills", "education", "languages", "certifications", "interests"],
  },
  {
    id: "tabbed-graphite", name: "Tabbed Graphite", tag: "Professional",
    blurb: "Neutral graphite rail with photo. Understated and broadly appropriate.",
    accent: "#374151", accent2: "#6b7280", swatch: ["#374151", "#6b7280", "#f5f6f7"],
    arch: "sidebar", head: "tab", photo: true, skills: "dots", scaleWord: true, rail: "light",
    side: ["skills", "education", "languages", "certifications", "interests"],
  },

  // ===== Underscore — minimal underline =====
  {
    id: "underscore-ink", name: "Underscore Ink", tag: "Minimal",
    blurb: "Minimal single column with short accent underlines. Quiet and ATS-friendly.",
    accent: "#111827", accent2: "#6b7280", swatch: ["#111827", "#6b7280", "#ffffff"],
    arch: "stack", head: "usc", skills: "tags",
    side: ["skills", "education", "interests"],
  },
  {
    id: "underscore-blue", name: "Underscore Blue", tag: "Minimal",
    blurb: "Minimal layout with a single blue accent. Modern, restrained, readable.",
    accent: "#1d4ed8", accent2: "#3b82f6", swatch: ["#1d4ed8", "#3b82f6", "#ffffff"],
    arch: "stack", head: "usc", skills: "tags",
    side: ["skills", "education", "interests"],
  },
  {
    id: "underscore-rose", name: "Underscore Rose", tag: "Minimal",
    blurb: "Minimal type with a warm rose accent. Personable without losing polish.",
    accent: "#be123c", accent2: "#fb7185", swatch: ["#be123c", "#fb7185", "#fffafb"],
    arch: "stack", head: "usc", skills: "tags",
    side: ["skills", "education", "interests"],
  },

  // ===== Postcard — serif display =====
  {
    id: "postcard-bordeaux", name: "Postcard Bordeaux", tag: "Editorial",
    blurb: "Centered serif name framed by hairlines. Editorial warmth with structure.",
    accent: "#7a2e3a", accent2: "#b08a5a", swatch: ["#7a2e3a", "#b08a5a", "#fbf9f5"],
    arch: "stack", head: "pcd", skills: "tags",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "postcard-forest", name: "Postcard Forest", tag: "Editorial",
    blurb: "Refined serif letterhead in deep green. Calm, considered, classic.",
    accent: "#1f4d3a", accent2: "#6f8a82", swatch: ["#1f4d3a", "#6f8a82", "#ffffff"],
    arch: "stack", head: "pcd", skills: "tags",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "postcard-navy", name: "Postcard Navy", tag: "Editorial",
    blurb: "Serif display in navy with framed contacts. Traditional and trusted.",
    accent: "#1e293b", accent2: "#64748b", swatch: ["#1e293b", "#64748b", "#ffffff"],
    arch: "stack", head: "pcd", skills: "tags",
    side: ["skills", "education", "languages", "interests"],
  },

  // ===== Signal — marker + experience spine =====
  {
    id: "signal-violet", name: "Signal Violet", tag: "Tech",
    blurb: "Dotted section markers and a timeline spine, paired with signal-bar skills.",
    accent: "#6d28d9", accent2: "#14b8a6", swatch: ["#6d28d9", "#14b8a6", "#f8f7fc"],
    arch: "stack", head: "sig", skills: "signal", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "signal-amber", name: "Signal Amber", tag: "Bold",
    blurb: "Warm amber markers with an experience spine. Energetic and easy to follow.",
    accent: "#d97706", accent2: "#f59e0b", swatch: ["#d97706", "#f59e0b", "#fffdf7"],
    arch: "stack", head: "sig", skills: "signal", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "signal-cyan", name: "Signal Cyan", tag: "Tech",
    blurb: "Cyan markers and a connected spine. Sharp and contemporary for tech roles.",
    accent: "#0891b2", accent2: "#22d3ee", swatch: ["#0891b2", "#22d3ee", "#f4fdff"],
    arch: "stack", head: "sig", skills: "signal", scaleWord: true,
    side: ["skills", "languages", "education"],
  },

  // ===== FLAMBOYANT — bold, expressive statement designs =====
  {
    id: "nova-magenta", name: "Nova Magenta", tag: "Flamboyant",
    blurb: "Full-bleed gradient masthead with an oversized name and photo. Loud, confident, unforgettable.",
    accent: "#d6249f", accent2: "#fd5949", swatch: ["#d6249f", "#fd5949", "#ffffff"],
    arch: "stack", head: "nova", photo: true, skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "nova-electric", name: "Nova Electric", tag: "Flamboyant",
    blurb: "Electric indigo-to-cyan masthead with a photo and big display name. Modern and high-energy.",
    accent: "#5b3df5", accent2: "#11d0e6", swatch: ["#5b3df5", "#11d0e6", "#ffffff"],
    arch: "stack", head: "nova", photo: true, skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "luxe-gold", name: "Luxe Gold", tag: "Flamboyant",
    blurb: "Dramatic dark sheet with a gradient-gold serif name and glass cards. Pure premium.",
    accent: "#f0c040", accent2: "#e0872f", swatch: ["#f0c040", "#e0872f", "#141019"],
    arch: "stack", head: "luxe", photo: true, skills: "rings",
    side: ["education", "projects", "awards", "languages"],
  },
  {
    id: "luxe-orchid", name: "Luxe Orchid", tag: "Flamboyant",
    blurb: "Near-black sheet with a neon violet-to-pink serif name. Bold luxury for creative leaders.",
    accent: "#b66bff", accent2: "#ff5cc0", swatch: ["#b66bff", "#ff5cc0", "#141019"],
    arch: "stack", head: "luxe", photo: true, skills: "rings",
    side: ["education", "projects", "awards", "languages"],
  },
  {
    id: "pop-punch", name: "Pop Punch", tag: "Flamboyant",
    blurb: "Pop-art color tabs and a giant uppercase name. Playful, bold, impossible to ignore.",
    accent: "#ff2e63", accent2: "#ffb703", swatch: ["#ff2e63", "#ffb703", "#fffdf8"],
    arch: "stack", head: "pop", skills: "pills",
    side: ["skills", "education", "languages"],
  },
  {
    id: "pop-cyan", name: "Pop Cyan", tag: "Flamboyant",
    blurb: "Cyan-and-pink pop tabs with a bold display name. Fresh, fun and confident.",
    accent: "#08a6c2", accent2: "#ff4d8d", swatch: ["#08a6c2", "#ff4d8d", "#fffdf8"],
    arch: "stack", head: "pop", skills: "pills",
    side: ["skills", "education", "languages"],
  },
  {
    id: "mirage", name: "Mirage", tag: "Flamboyant",
    blurb: "Holographic mesh-gradient rail with an oversized photo. A statement sidebar that glows.",
    accent: "#7c3aed", accent2: "#14b8a6", swatch: ["#7c3aed", "#14b8a6", "#14121f"],
    arch: "sidebar", head: "mirage", rail: "color", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education", "interests"],
  },

  // ===== NEW-AGE — contemporary statement systems =====
  {
    id: "brut-ink", name: "Brutalist Ink", tag: "New age",
    blurb: "Raw monospace, hard black rules and // section markers. Confident and unmistakably modern.",
    accent: "#e4002b", accent2: "#16150f", swatch: ["#e4002b", "#16150f", "#f4f3ee"],
    arch: "stack", head: "brut", skills: "segments",
    side: ["skills", "education", "languages"],
  },
  {
    id: "brut-cobalt", name: "Brutalist Cobalt", tag: "New age",
    blurb: "The brutalist mono grid in electric cobalt. Engineering-ready and razor sharp.",
    accent: "#1f4dff", accent2: "#16150f", swatch: ["#1f4dff", "#16150f", "#f4f3ee"],
    arch: "stack", head: "brut", skills: "segments",
    side: ["skills", "education", "languages"],
  },
  {
    id: "zine-rust", name: "Editorial Rust", tag: "New age",
    blurb: "Magazine-grade serif headline, italic accents and a two-column body. Pure editorial polish.",
    accent: "#b6452c", accent2: "#d98a3d", swatch: ["#b6452c", "#d98a3d", "#fbf8f3"],
    arch: "stack", head: "zine", skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "zine-ink", name: "Editorial Ink", tag: "New age",
    blurb: "Big indigo serif headline with refined column flow. Quiet confidence for senior roles.",
    accent: "#3b3a8c", accent2: "#7b79c4", swatch: ["#3b3a8c", "#7b79c4", "#fbf8f3"],
    arch: "stack", head: "zine", skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "neon-acid", name: "Neon Acid", tag: "New age",
    blurb: "Cyber-dark sheet with acid-green glow and mono labels. Loud, technical, futuristic.",
    accent: "#39ff8b", accent2: "#28d0ff", swatch: ["#39ff8b", "#28d0ff", "#0a0e16"],
    arch: "stack", head: "neon", skills: "segments", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "neon-magenta", name: "Neon Pulse", tag: "New age",
    blurb: "Dark cyber sheet with hot-magenta and cyan glow. High-voltage and unforgettable.",
    accent: "#ff2bd6", accent2: "#5cf0ff", swatch: ["#ff2bd6", "#5cf0ff", "#0a0e16"],
    arch: "stack", head: "neon", skills: "segments", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "bauhaus-red", name: "Bauhaus Red", tag: "New age",
    blurb: "Geometric color-block rail with an offset photo shadow. Bold, primary, architectural.",
    accent: "#d62828", accent2: "#f4b400", swatch: ["#d62828", "#f4b400", "#1b1b1b"],
    arch: "sidebar", head: "bau", rail: "color", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education"],
  },
  {
    id: "bauhaus-blue", name: "Bauhaus Blue", tag: "New age",
    blurb: "The geometric block system in cobalt and yellow. Confident, modernist, design-forward.",
    accent: "#1d4ed8", accent2: "#f4b400", swatch: ["#1d4ed8", "#f4b400", "#1b1b1b"],
    arch: "sidebar", head: "bau", rail: "color", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education"],
  },

  // ===== SPLIT — vertical two-tone header =====
  {
    id: "split-indigo", name: "Split Indigo", tag: "Modern",
    blurb: "A vertical two-tone header splits the name onto a solid color field. Architectural and crisp.",
    accent: "#4338ca", accent2: "#22d3ee", swatch: ["#4338ca", "#22d3ee", "#ffffff"],
    arch: "stack", head: "split", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "split-forest", name: "Split Forest", tag: "Professional",
    blurb: "Deep green color field with a clean credentials rail. Grounded and trustworthy.",
    accent: "#166534", accent2: "#84cc16", swatch: ["#166534", "#84cc16", "#ffffff"],
    arch: "stack", head: "split", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "split-crimson", name: "Split Crimson", tag: "Bold",
    blurb: "A bold crimson field anchors the name. Confident and high-impact.",
    accent: "#be123c", accent2: "#fb923c", swatch: ["#be123c", "#fb923c", "#ffffff"],
    arch: "stack", head: "split", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },

  // ===== BLUEPRINT — technical grid =====
  {
    id: "blueprint-cobalt", name: "Blueprint Cobalt", tag: "Engineering",
    blurb: "Drafting-grid header with monospace labels and [bracketed] sections. Built for engineers.",
    accent: "#1f4dff", accent2: "#0ea5e9", swatch: ["#1f4dff", "#0ea5e9", "#f3f6fb"],
    arch: "stack", head: "blueprint", skills: "segments", scaleWord: true,
    side: ["skills", "certifications", "education", "languages"],
  },
  {
    id: "blueprint-slate", name: "Blueprint Slate", tag: "Engineering",
    blurb: "The technical drafting grid in graphite. Precise, methodical, schematic.",
    accent: "#334155", accent2: "#0891b2", swatch: ["#334155", "#0891b2", "#f3f6fb"],
    arch: "stack", head: "blueprint", skills: "segments", scaleWord: true,
    side: ["skills", "certifications", "education", "languages"],
  },

  // ===== GRADRAIL — vertical gradient sidebar =====
  {
    id: "gradrail-sunset", name: "Gradient Sunset", tag: "Bold",
    blurb: "A vertical gradient rail melts orange into pink. Vibrant and contemporary.",
    accent: "#f97316", accent2: "#ec4899", swatch: ["#f97316", "#ec4899", "#ffffff"],
    arch: "sidebar", head: "gradrail", rail: "color", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education", "interests"],
  },
  {
    id: "gradrail-ocean", name: "Gradient Ocean", tag: "Modern",
    blurb: "Blue-to-teal gradient rail with a photo. Cool, calm and current.",
    accent: "#2563eb", accent2: "#14b8a6", swatch: ["#2563eb", "#14b8a6", "#ffffff"],
    arch: "sidebar", head: "gradrail", rail: "color", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education", "interests"],
  },
  {
    id: "gradrail-violet", name: "Gradient Violet", tag: "Creative",
    blurb: "Violet-to-magenta gradient rail with a photo. Creative and self-assured.",
    accent: "#7c3aed", accent2: "#d946ef", swatch: ["#7c3aed", "#d946ef", "#ffffff"],
    arch: "sidebar", head: "gradrail", rail: "color", photo: true, skills: "dots", scaleWord: true,
    side: ["skills", "languages", "certifications", "education", "interests"],
  },

  // ===== BENTO — modular block masthead =====
  {
    id: "bento-indigo", name: "Bento Indigo", tag: "Modern",
    blurb: "A modular block masthead pairs a color name-card with a contact tile. Friendly and systematic.",
    accent: "#4f46e5", accent2: "#fcd34d", swatch: ["#4f46e5", "#fcd34d", "#f2f2f0"],
    arch: "stack", head: "bento", skills: "pills",
    side: ["skills", "education", "languages"],
  },
  {
    id: "bento-teal", name: "Bento Teal", tag: "Modern",
    blurb: "The bento block system in teal and lime. Modern, balanced and approachable.",
    accent: "#0d9488", accent2: "#bef264", swatch: ["#0d9488", "#bef264", "#f2f2f0"],
    arch: "stack", head: "bento", skills: "pills",
    side: ["skills", "education", "languages"],
  },

  // ===== GAZETTE — newspaper masthead =====
  {
    id: "gazette-ink", name: "Gazette Ink", tag: "Editorial",
    blurb: "A newspaper masthead with a double-rule and serif headline. Authoritative and timeless.",
    accent: "#1a1a17", accent2: "#7a2e2e", swatch: ["#1a1a17", "#7a2e2e", "#fbfaf6"],
    arch: "stack", head: "gazette", skills: "tags",
    side: ["skills", "education", "languages"],
  },
  {
    id: "gazette-oxblood", name: "Gazette Oxblood", tag: "Editorial",
    blurb: "The gazette masthead with an oxblood accent. Literary and distinguished.",
    accent: "#7a2e2e", accent2: "#b08a5a", swatch: ["#7a2e2e", "#b08a5a", "#fbfaf6"],
    arch: "stack", head: "gazette", skills: "tags",
    side: ["skills", "education", "languages"],
  },

  // ===== CREST — centered monogram badge =====
  {
    id: "crest-navy", name: "Crest Navy", tag: "Executive",
    blurb: "A centered, framed letterhead with rule-flanked title. Formal and senior.",
    accent: "#1e3a5f", accent2: "#b8924f", swatch: ["#1e3a5f", "#b8924f", "#ffffff"],
    arch: "stack", head: "crest", photo: true, skills: "list",
    side: ["skills", "awards", "education", "languages"],
  },
  {
    id: "crest-burgundy", name: "Crest Burgundy", tag: "Executive",
    blurb: "The centered crest in burgundy and gold. Refined, classic, leadership-ready.",
    accent: "#6d1f33", accent2: "#b8924f", swatch: ["#6d1f33", "#b8924f", "#ffffff"],
    arch: "stack", head: "crest", photo: true, skills: "list",
    side: ["skills", "awards", "education", "languages"],
  },

  // ===== OUTLINE — hollow display name =====
  {
    id: "outline-amber", name: "Outline Amber", tag: "Bold",
    blurb: "An oversized hollow display name on a dark sheet. Editorial, daring, design-forward.",
    accent: "#f59e0b", accent2: "#f59e0b", swatch: ["#f59e0b", "#1f1f25", "#15151a"],
    arch: "stack", head: "outline", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "outline-cyan", name: "Outline Cyan", tag: "Bold",
    blurb: "Hollow outlined type with an electric cyan stroke. Futuristic and confident.",
    accent: "#22d3ee", accent2: "#22d3ee", swatch: ["#22d3ee", "#1f1f25", "#15151a"],
    arch: "stack", head: "outline", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },

  // ===== CARBON — dark tech =====
  {
    id: "carbon-lime", name: "Carbon Lime", tag: "Tech",
    blurb: "A carbon-dark sheet with a diamond-marker system and lime signal. Sharp and technical.",
    accent: "#84cc16", accent2: "#5eead4", swatch: ["#84cc16", "#5eead4", "#111418"],
    arch: "stack", head: "carbon", photo: true, skills: "segments", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "carbon-azure", name: "Carbon Azure", tag: "Tech",
    blurb: "The carbon system in azure and ice. Precise, modern, engineering-grade.",
    accent: "#3b82f6", accent2: "#67e8f9", swatch: ["#3b82f6", "#67e8f9", "#111418"],
    arch: "stack", head: "carbon", photo: true, skills: "segments", scaleWord: true,
    side: ["skills", "languages", "education"],
  },

  // ===== KRAFT — warm paper =====
  {
    id: "kraft-clay", name: "Kraft Clay", tag: "Editorial",
    blurb: "Warm craft-paper sheet with a stamped serif name and ruled headings. Tactile and human.",
    accent: "#a8512c", accent2: "#7a6a3f", swatch: ["#a8512c", "#7a6a3f", "#efe7d6"],
    arch: "stack", head: "kraft", skills: "tags",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "kraft-olive", name: "Kraft Olive", tag: "Editorial",
    blurb: "The kraft-paper look in olive. Earthy, considered and warm.",
    accent: "#5a6b2f", accent2: "#9a7b3f", swatch: ["#5a6b2f", "#9a7b3f", "#efe7d6"],
    arch: "stack", head: "kraft", skills: "tags",
    side: ["skills", "education", "languages", "interests"],
  },

  // ===== PASTEL — soft rounded cards =====
  {
    id: "pastel-lavender", name: "Pastel Lavender", tag: "Creative",
    blurb: "Soft rounded cards on a tinted sheet with pill contacts. Gentle, friendly, modern.",
    accent: "#8b5cf6", accent2: "#f0abfc", swatch: ["#8b5cf6", "#f0abfc", "#f7f4fe"],
    arch: "stack", head: "pastel", skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "pastel-mint", name: "Pastel Mint", tag: "Creative",
    blurb: "Rounded mint cards with airy spacing. Calm, fresh and welcoming.",
    accent: "#10b981", accent2: "#86efac", swatch: ["#10b981", "#86efac", "#f1fbf6"],
    arch: "stack", head: "pastel", skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "pastel-peach", name: "Pastel Peach", tag: "Creative",
    blurb: "Warm peach card system with rounded tiles. Soft, optimistic and personable.",
    accent: "#fb7185", accent2: "#fdba74", swatch: ["#fb7185", "#fdba74", "#fff5f3"],
    arch: "stack", head: "pastel", skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },

  // ===== MEMPHIS — 80s geometric =====
  {
    id: "memphis-pop", name: "Memphis Pop", tag: "Playful",
    blurb: "80s Memphis confetti with geometric markers. Energetic, playful, unforgettable.",
    accent: "#7c3aed", accent2: "#f59e0b", swatch: ["#7c3aed", "#f59e0b", "#fffdf5"],
    arch: "stack", head: "memphis", skills: "pills",
    side: ["skills", "education", "interests", "languages"],
  },
  {
    id: "memphis-electric", name: "Memphis Electric", tag: "Playful",
    blurb: "The Memphis system in electric blue and coral. Fun, bold and confident.",
    accent: "#2563eb", accent2: "#fb7185", swatch: ["#2563eb", "#fb7185", "#fffdf5"],
    arch: "stack", head: "memphis", skills: "pills",
    side: ["skills", "education", "interests", "languages"],
  },

  // ===== DOSSIER — file-folder tab =====
  {
    id: "dossier-navy", name: "Dossier Navy", tag: "Professional",
    blurb: "A file-folder layout with a labeled tab and framed body. Organized and official.",
    accent: "#1e3a5f", accent2: "#5a7a9c", swatch: ["#1e3a5f", "#5a7a9c", "#f6f5f1"],
    arch: "stack", head: "dossier", skills: "list",
    side: ["skills", "certifications", "education", "languages"],
  },
  {
    id: "dossier-espresso", name: "Dossier Espresso", tag: "Professional",
    blurb: "The dossier folder in espresso brown. Warm, professional and tidy.",
    accent: "#5b3a29", accent2: "#a07a55", swatch: ["#5b3a29", "#a07a55", "#f6f5f1"],
    arch: "stack", head: "dossier", skills: "list",
    side: ["skills", "certifications", "education", "languages"],
  },

  // ===== APERTURE — full photo banner =====
  {
    id: "aperture-plum", name: "Aperture Plum", tag: "Creative",
    blurb: "A full-height photo column beside a gradient name banner. Bold, personable, portfolio-ready.",
    accent: "#9333ea", accent2: "#ec4899", swatch: ["#9333ea", "#ec4899", "#ffffff"],
    arch: "stack", head: "aperture", photo: true, skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },
  {
    id: "aperture-azure", name: "Aperture Azure", tag: "Creative",
    blurb: "The photo-banner system in azure and teal. Friendly, modern, presence-forward.",
    accent: "#2563eb", accent2: "#06b6d4", swatch: ["#2563eb", "#06b6d4", "#ffffff"],
    arch: "stack", head: "aperture", photo: true, skills: "pills",
    side: ["skills", "education", "languages", "interests"],
  },

  // ===== RIBBON — diagonal ribbon accent =====
  {
    id: "ribbon-coral", name: "Ribbon Coral", tag: "Modern",
    blurb: "A diagonal gradient ribbon sweeps behind the name. Dynamic and contemporary.",
    accent: "#f43f5e", accent2: "#fb923c", swatch: ["#f43f5e", "#fb923c", "#ffffff"],
    arch: "stack", head: "ribbon", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },
  {
    id: "ribbon-cobalt", name: "Ribbon Cobalt", tag: "Modern",
    blurb: "The diagonal ribbon in cobalt and sky. Sleek, energetic and clean.",
    accent: "#2563eb", accent2: "#38bdf8", swatch: ["#2563eb", "#38bdf8", "#ffffff"],
    arch: "stack", head: "ribbon", skills: "segments", scaleWord: true,
    side: ["skills", "education", "languages"],
  },

  // ===== INDEX — ruled index-card minimal =====
  {
    id: "index-red", name: "Index Red", tag: "Minimal",
    blurb: "A ruled index-card grid with a top accent bar and margin rule. Tidy, precise, ATS-safe.",
    accent: "#dc2626", accent2: "#f87171", swatch: ["#dc2626", "#f87171", "#ffffff"],
    arch: "stack", head: "index", skills: "tags",
    side: ["skills", "education", "languages"],
  },
  {
    id: "index-teal", name: "Index Teal", tag: "Minimal",
    blurb: "The ruled index system in teal. Quiet, organized and readable.",
    accent: "#0d9488", accent2: "#5eead4", swatch: ["#0d9488", "#5eead4", "#ffffff"],
    arch: "stack", head: "index", skills: "tags",
    side: ["skills", "education", "languages"],
  },

  // ===== MESH — gradient-mesh dark card =====
  {
    id: "mesh-aurora", name: "Mesh Aurora", tag: "Bold",
    blurb: "A soft gradient-mesh masthead glows on a dark sheet with pill contacts. Atmospheric and premium.",
    accent: "#6366f1", accent2: "#22d3ee", swatch: ["#6366f1", "#22d3ee", "#0f1117"],
    arch: "stack", head: "mesh", skills: "segments", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
  {
    id: "mesh-magma", name: "Mesh Magma", tag: "Bold",
    blurb: "The gradient mesh in magma tones — magenta into amber. Warm, glowing, unforgettable.",
    accent: "#e11d8f", accent2: "#f59e0b", swatch: ["#e11d8f", "#f59e0b", "#0f1117"],
    arch: "stack", head: "mesh", skills: "segments", scaleWord: true,
    side: ["skills", "languages", "education"],
  },
];

// ---- icon set (stroke, currentColor) ----
const Icon = ({ d, size = 18, fill = false, stroke = 2, children, style }) =>
  React.createElement(
    "svg",
    {
      width: size, height: size, viewBox: "0 0 24 24",
      fill: fill ? "currentColor" : "none",
      stroke: fill ? "none" : "currentColor",
      strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round",
      style,
    },
    children || (d ? React.createElement("path", { d }) : null)
  );

const Icons = {
  spark: (p) => <Icon {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></Icon>,
  magic: (p) => <Icon {...p}><path d="m5 19 7-7M14 6l1.5-1.5M14 6l1 3M14 6l-3-1M14 6l3 1M19 11l.8-.8M19 11l.6 1.6M19 11l-1.6-.6M19 11l1 1.6"/><path d="m5 19 7-7 2 2-7 7-2-2Z"/></Icon>,
  layers: (p) => <Icon {...p}><path d="m12 3 9 5-9 5-9-5 9-5ZM3 13l9 5 9-5M3 17l9 5 9-5"/></Icon>,
  arrow: (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>,
  arrowL: (p) => <Icon {...p}><path d="M19 12H5M11 18l-6-6 6-6"/></Icon>,
  check: (p) => <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>,
  plus: (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>,
  trash: (p) => <Icon {...p}><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></Icon>,
  download: (p) => <Icon {...p}><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></Icon>,
  eye: (p) => <Icon {...p}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></Icon>,
  grid: (p) => <Icon {...p}><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></Icon>,
  pen: (p) => <Icon {...p}><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5Z"/></Icon>,
  user: (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M5.5 21a6.5 6.5 0 0 1 13 0"/></Icon>,
  brief: (p) => <Icon {...p}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18"/></Icon>,
  cap: (p) => <Icon {...p}><path d="m2 8 10-5 10 5-10 5-10-5ZM6 10v5c0 1.5 3 3 6 3s6-1.5 6-3v-5"/></Icon>,
  star: (p) => <Icon {...p}><path d="m12 3 2.6 5.6 6.4.8-4.7 4.3 1.2 6.3L12 17.8 6.5 20.3l1.2-6.3L3 9.7l6.4-.8L12 3Z"/></Icon>,
  tag: (p) => <Icon {...p}><path d="M3 12V5a2 2 0 0 1 2-2h7l9 9-9 9-9-9Z"/><circle cx="7.5" cy="7.5" r="1.2" fill="currentColor" stroke="none"/></Icon>,
  folder: (p) => <Icon {...p}><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z"/></Icon>,
  close: (p) => <Icon {...p}><path d="M18 6 6 18M6 6l12 12"/></Icon>,
  drag: (p) => <Icon {...p}><circle cx="9" cy="6" r="1.4" fill="currentColor" stroke="none"/><circle cx="15" cy="6" r="1.4" fill="currentColor" stroke="none"/><circle cx="9" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="9" cy="18" r="1.4" fill="currentColor" stroke="none"/><circle cx="15" cy="18" r="1.4" fill="currentColor" stroke="none"/></Icon>,
  pin: (p) => <Icon {...p}><path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></Icon>,
  mail: (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></Icon>,
  phone: (p) => <Icon {...p}><path d="M6 3h3l2 5-2.5 1.5a12 12 0 0 0 5 5L16 14l5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2Z"/></Icon>,
  globe: (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z"/></Icon>,
  bolt: (p) => <Icon {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></Icon>,
  refresh: (p) => <Icon {...p}><path d="M21 12a9 9 0 1 1-2.6-6.3M21 4v5h-5"/></Icon>,
  copy: (p) => <Icon {...p}><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></Icon>,
  trophy: (p) => <Icon {...p}><path d="M7 4h10v4a5 5 0 0 1-10 0V4ZM7 6H4v1a3 3 0 0 0 3 3M17 6h3v1a3 3 0 0 1-3 3M9 17h6M8 21h8M12 13v4"/></Icon>,
  book: (p) => <Icon {...p}><path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2V5ZM19 19H6a2 2 0 0 0-2 2"/></Icon>,
  heart: (p) => <Icon {...p}><path d="M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.4-7 10-7 10Z"/></Icon>,
  list: (p) => <Icon {...p}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></Icon>,
  lang: (p) => <Icon {...p}><path d="m5 8 6 6M4 14l6-6 2-3M2 5h12M7 2h1M22 22l-5-10-5 10M14 18h6"/></Icon>,
  cert: (p) => <Icon {...p}><circle cx="12" cy="9" r="6"/><path d="M9 14.5 8 22l4-2 4 2-1-7.5"/></Icon>,
  grip: (p) => <Icon {...p}><circle cx="9" cy="5" r="1.3" fill="currentColor" stroke="none"/><circle cx="15" cy="5" r="1.3" fill="currentColor" stroke="none"/><circle cx="9" cy="12" r="1.3" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1.3" fill="currentColor" stroke="none"/><circle cx="9" cy="19" r="1.3" fill="currentColor" stroke="none"/><circle cx="15" cy="19" r="1.3" fill="currentColor" stroke="none"/></Icon>,
  lock: (p) => <Icon {...p}><rect x="4.5" y="11" width="15" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></Icon>,
  crown: (p) => <Icon {...p}><path d="M3 7l4 4 5-7 5 7 4-4-2 13H5L3 7Z"/></Icon>,
  infinity: (p) => <Icon {...p}><path d="M6.5 8a4 4 0 1 0 0 8c2.5 0 4-3 5.5-4s3-4 5.5-4a4 4 0 1 1 0 8c-2.5 0-4-3-5.5-4"/></Icon>,
};

Object.assign(window, { SAMPLE_RESUME, TEMPLATES, Icon, Icons });