// Sample resume data — used across preview, beautify, dashboard
const SAMPLE_RESUME = {
  name: "Maya Okafor",
  email: "maya.okafor@gmail.com",
  phone: "(415) 555-0142",
  location: "San Francisco, CA",
  links: ["linkedin.com/in/mayaokafor", "mayaokafor.design"],
  summary: "Senior product designer with 7 years shipping consumer software end-to-end. Strongest at the seam between user research and engineering — translating messy interviews into shipped, measurable interfaces. Previously led design for the onboarding pod at a Series C fintech (3.2M users) and the home tab at a Y-Combinator marketplace.",
  experience: [
    {
      title: "Senior Product Designer",
      company: "Bracket",
      location: "San Francisco, CA",
      dates: "Mar 2023 — Present",
      bullets: [
        "Led end-to-end redesign of the onboarding flow, lifting completion from 41% to 68% over two quarters and adding an estimated $2.1M in annual contribution.",
        "Defined and shipped a 32-component design system in Figma adopted by 14 engineers across three product squads.",
        "Ran weekly user-research sessions with 60+ customers in 2024, translating findings into a 6-month roadmap that shipped on time.",
      ],
    },
    {
      title: "Product Designer",
      company: "Outpost Market",
      location: "Remote",
      dates: "Jun 2020 — Feb 2023",
      bullets: [
        "Owned the redesign of the marketplace home tab; A/B tested four variants and shipped the winner, growing weekly orders 19%.",
        "Partnered with three engineers to migrate the iOS app to a token-based theming system, cutting per-screen design rework by half.",
        "Mentored two junior designers from associate to mid-level, both promoted within 18 months.",
      ],
    },
    {
      title: "UX Designer",
      company: "Hatchet Studio",
      location: "Brooklyn, NY",
      dates: "Aug 2018 — May 2020",
      bullets: [
        "Designed product experiences for six early-stage clients in fintech, climate, and consumer health.",
        "Built and maintained the studio's component library used across all client engagements.",
      ],
    },
  ],
  education: [
    { school: "Rhode Island School of Design", degree: "BFA, Graphic Design", year: "2018" },
  ],
  skills: ["Figma", "Prototyping", "User research", "Design systems", "Accessibility", "Workshop facilitation", "Webflow", "Front-end fluency (HTML/CSS)"],
  projects: [
    { name: "Tilt — a Pomodoro for designers", desc: "Side project. 14k downloads on the Mac App Store.", year: "2024" },
    { name: "The Greyhound Atlas", desc: "Self-published photo book of 50 Greyhound bus stations across the American West.", year: "2022" },
  ],
};

// --- BoringResume — Times-style, ATS-safe ---
function BoringResume({ data = SAMPLE_RESUME, editable, onEdit, busy }) {
  return (
    <div className="resume-doc">
      <h1>{data.name}</h1>
      <div className="contact-line">{[data.location, data.phone, data.email, ...(data.links || [])].filter(Boolean).join(' · ')}</div>

      {data.summary && <><h2>Summary</h2><p>{data.summary}</p></>}

      {(data.experience || []).length > 0 && <>
      <h2>Experience</h2>
      {(data.experience || []).map((e, i) => (
        <div key={i} style={{ marginBottom: 10 }}>
          <div className="job-meta"><span><strong>{e.title}</strong>, {e.company}</span><span>{e.dates}</span></div>
          {e.location && <div style={{ fontSize: 11, color: '#444', fontStyle: 'italic', marginTop: -2, marginBottom: 4 }}>{e.location}</div>}
          <ul>
            {(e.bullets || []).map((b, j) => (
              <li key={j} className={editable ? 'bullet-row' : ''} style={busy === `${i}:${j}` ? { opacity: 0.45 } : undefined}>
                {b}
                {editable && (
                  <span className="bullet-toolbar">
                    <button onClick={()=>onEdit?.('regen', { ei: i, bi: j, text: b })}><Icon.refresh size={12}/> Regenerate</button>
                    <button onClick={()=>onEdit?.('edit', { ei: i, bi: j, text: b })}><Icon.pencil size={12}/> Edit</button>
                    <button onClick={()=>onEdit?.('del', { ei: i, bi: j })}><Icon.x size={12}/> Delete</button>
                  </span>
                )}
              </li>
            ))}
          </ul>
        </div>
      ))}
      </>}

      {(data.education || []).length > 0 && <>
        <h2>Education</h2>
        {data.education.map((ed, i) => (
          <div key={i} className="job-meta" style={{ marginBottom: 4 }}><span><strong>{ed.school}</strong> — {ed.degree}</span><span>{ed.year}</span></div>
        ))}
      </>}

      {(data.skills || []).length > 0 && <><h2>Skills</h2><p>{data.skills.join(' · ')}</p></>}

      {(data.projects || []).length > 0 && <>
        <h2>Projects</h2>
        {data.projects.map((p, i) => (
          <div key={i} className="job-meta" style={{ marginBottom: 4 }}><span><strong>{p.name}</strong> — {p.desc}</span><span>{p.year}</span></div>
        ))}
      </>}
    </div>
  );
}

// --- BeautifyResume — designed, with sidebar ---
function BeautifyResume({ data = SAMPLE_RESUME, accent = 'var(--accent-primary)', font = 'sans', density = 'standard', showPhoto = false, template = 'twocol' }) {
  const pad = density === 'compact' ? 28 : density === 'airy' ? 56 : 40;
  const fontFamily = font === 'serif' ? `'Instrument Serif', Georgia, serif` :
                     font === 'mono' ? `'JetBrains Mono', monospace` :
                     `'Poppins', 'Inter', sans-serif`;
  const role = (data.experience && data.experience[0] && data.experience[0].title) || 'Professional';

  if (template === 'classic') {
    return (
      <div style={{ background:'#fff', borderRadius: 4, boxShadow:'var(--shadow-lg)', padding: pad + 8, fontFamily, color:'#1a1a1a' }}>
        <div style={{ borderBottom: `3px solid ${accent}`, paddingBottom: 14, marginBottom: 18 }}>
          <div style={{ fontSize: 32, fontWeight: 700, letterSpacing:'-0.02em' }}>{data.name}</div>
          <div style={{ fontSize: 12, color:'#555', marginTop: 4 }}>{[data.location, data.phone, data.email].filter(Boolean).join(' · ')}</div>
        </div>
        <ResumeBody data={data} accent={accent} />
      </div>
    );
  }

  // Two-column
  const initials = (data.name || 'You').split(' ').map(s=>s[0]).slice(0,2).join('').toUpperCase();
  return (
    <div className="resume-beautify" style={{ '--bf-accent': accent, fontFamily }}>
      <div className="side">
        {showPhoto && <div style={{ width: 100, height: 100, borderRadius: '50%', background:'rgba(255,255,255,0.2)', border:'2px solid rgba(255,255,255,0.3)', margin:'0 auto 20px', display:'flex', alignItems:'center', justifyContent:'center', fontSize: 36, fontWeight: 700 }}>{initials}</div>}
        <div style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.12em', opacity: 0.7, marginBottom: 6 }}>Contact</div>
        <div style={{ fontSize: 11, lineHeight: 1.6, marginBottom: 20 }}>
          {data.location && <div>{data.location}</div>}
          {data.phone && <div>{data.phone}</div>}
          {data.email && <div>{data.email}</div>}
          {(data.links || []).map(l => <div key={l}>{l}</div>)}
        </div>
        <div style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.12em', opacity: 0.7, marginBottom: 6 }}>Skills</div>
        <div style={{ display:'flex', flexWrap:'wrap', gap: 6, marginBottom: 20 }}>
          {(data.skills || []).map(s => <span key={s} style={{ fontSize: 10, padding:'3px 8px', background:'rgba(255,255,255,0.18)', borderRadius: 999 }}>{s}</span>)}
        </div>
        <div style={{ fontSize: 11, textTransform:'uppercase', letterSpacing:'0.12em', opacity: 0.7, marginBottom: 6 }}>Education</div>
        {(data.education || []).map((ed, i) => (
          <div key={i} style={{ fontSize: 11, lineHeight: 1.5, marginBottom: 10 }}>
            <div style={{ fontWeight: 600 }}>{ed.school}</div>
            <div style={{ opacity: 0.8 }}>{ed.degree}</div>
            <div style={{ opacity: 0.7, fontSize: 10 }}>{ed.year}</div>
          </div>
        ))}
      </div>
      <div className="main" style={{ padding: pad }}>
        <div style={{ fontSize: 36, fontWeight: 700, letterSpacing:'-0.02em', lineHeight: 1.05 }}>{data.name}</div>
        <div style={{ fontSize: 13, color: accent, fontWeight: 500, marginTop: 4, marginBottom: 18 }}>{role}</div>

        {data.summary && <Section title="Summary" accent={accent}>
          <p style={{ fontSize: 12, lineHeight: 1.6, color:'#333', margin: 0 }}>{data.summary}</p>
        </Section>}

        {(data.experience || []).length > 0 && <Section title="Experience" accent={accent}>
          {(data.experience || []).map((e, i) => (
            <div key={i} style={{ marginBottom: 14 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{e.title}</div>
                <div style={{ fontSize: 10, color:'#666' }}>{e.dates}</div>
              </div>
              <div style={{ fontSize: 11, color: accent, marginBottom: 6 }}>{[e.company, e.location].filter(Boolean).join(' · ')}</div>
              <ul style={{ paddingLeft: 16, margin: 0 }}>
                {(e.bullets || []).map((b, j) => <li key={j} style={{ fontSize: 11, lineHeight: 1.55, marginBottom: 3, color:'#333' }}>{b}</li>)}
              </ul>
            </div>
          ))}
        </Section>}

        {(data.projects || []).length > 0 && <Section title="Selected Projects" accent={accent}>
          {data.projects.map((p, i) => (
            <div key={i} style={{ fontSize: 11, lineHeight: 1.5, marginBottom: 6 }}>
              <span style={{ fontWeight: 600 }}>{p.name}</span> <span style={{ color:'#666' }}>— {p.desc} ({p.year})</span>
            </div>
          ))}
        </Section>}
      </div>
    </div>
  );
}

function Section({ title, accent, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 10, fontWeight: 700, textTransform:'uppercase', letterSpacing:'0.14em', color: accent, marginBottom: 8 }}>{title}</div>
      {children}
    </div>
  );
}

function ResumeBody({ data, accent }) {
  return (
    <>
      {data.summary && <Section title="Summary" accent={accent}>
        <p style={{ fontSize: 12, lineHeight: 1.6, color:'#333', margin: 0 }}>{data.summary}</p>
      </Section>}
      <Section title="Experience" accent={accent}>
        {(data.experience || []).map((e, i) => (
          <div key={i} style={{ marginBottom: 12 }}>
            <div style={{ display:'flex', justifyContent:'space-between' }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{e.title} · {e.company}</div>
              <div style={{ fontSize: 10, color:'#666' }}>{e.dates}</div>
            </div>
            <ul style={{ paddingLeft: 16, margin: '4px 0 0' }}>
              {(e.bullets || []).map((b, j) => <li key={j} style={{ fontSize: 11, lineHeight: 1.55, marginBottom: 3 }}>{b}</li>)}
            </ul>
          </div>
        ))}
      </Section>
    </>
  );
}

// Tiny thumbnail used in dashboards & landing
function ResumeThumb({ flavor = 'boring', accent = 'var(--accent-primary)' }) {
  if (flavor === 'beautify') {
    return (
      <div className="thumb" style={{ display:'grid', gridTemplateColumns: '32% 68%' }}>
        <div style={{ background: accent, padding: 6 }}>
          <div style={{ height: 12, width: 12, background:'rgba(255,255,255,0.4)', borderRadius:'50%', marginBottom: 6 }}/>
          {[60,80,50,70,60,40,75,55,40,65,80].map((w,i)=>(
            <div key={i} style={{ height: 2, width: `${w}%`, background:'rgba(255,255,255,0.5)', borderRadius: 1, margin: '2px 0' }}/>
          ))}
        </div>
        <div style={{ padding: 6 }}>
          <div className="thumb-line title"/>
          <div className="thumb-line short" style={{ background: accent }}/>
          <div style={{ height: 3 }}/>
          <div className="thumb-line short" style={{ background: accent, height: 2 }}/>
          {[90,80,90,85,70,90,80,85,75,90].map((w,i)=>(<div key={i} className="thumb-line med" style={{ width: `${w}%` }}/>))}
        </div>
      </div>
    );
  }
  return (
    <div className="thumb" style={{ padding: 8 }}>
      <div className="thumb-line title"/>
      <div className="thumb-line short"/>
      <div style={{ height: 6 }}/>
      {[90,80,90,85,70,90,80,85,75,90,82,78,90,80,85,72,88].map((w,i)=>(<div key={i} className="thumb-line med" style={{ width: `${w}%` }}/>))}
    </div>
  );
}

Object.assign(window, { SAMPLE_RESUME, BoringResume, BeautifyResume, ResumeThumb });