/* win95-apps.jsx — application window contents for Cip's Desktop */

const CV_TEXT = `CIPRIAN BLUJDEA - PRODUCT BUILDER
cipblujdea95@gmail.com | +44 7493 042811 | linkedin.com/in/blujdea
London | Romanian & British citizen

=====================================================
 PROFESSIONAL EXPERIENCE
=====================================================

STRIPE (London)                      Aug 2024 - Present
Product Manager - Payment Intelligence
 * Leading a team of 11 eng and data, managing
   Stripe's global authentication suite, processing
   hundreds of billions of dollars in annual payment
   volume with double-digit YoY growth
 * 0-to-1 launch of 3DS for multiprocessors - led
   discovery, roadmap, GTM, sales and adoption;
   securing significant enterprise brands and ARR
 * Protected multi-billion dollar portfolios from
   fraud by launching 3DS capabilities in Japan and
   scaling ML-driven 3DS decisioning to hundreds of
   thousands of merchants, cutting fraud rates by
   double-digit percentages
 * Delivered hundreds of millions in annual payment
   uplift through performance optimizations and
   improving merchant UX over the API and dashboards
   (double-digit basis point uplifts), while
   significantly decreasing ecosystem risk and
   issuer escalations
 * Defined Stripe's authentication multi-year strategy
   and vision; authored "3DS in Regulated Markets";
   contributed to shape Visa's passkeys roadmap for
   more secure commerce

BOLTZBIT AI (London)                 Nov 2023 - Jul 2024
Product Lead
 * Headed Product and Design, leading a team of 5,
   working closely with the founders
 * Grew ARR by 25% in 3 months by discovering and
   launching a product for a new market (bond traders)
 * Built a Gen-AI product automating financial
   workflows: analysing large documents, extracting
   and structuring data from reports and emails

JUNI (London)                        Aug 2021 - Oct 2023
Senior Product Manager
 * 2nd product hire; scaled product org to 15 during
   hypergrowth; led 2 product teams of 6
 * Helped Juni grow 4x in ARR launching and managing
   a portfolio of 8 core products
 * Grew Integrations/User by 5.2x with unique-in-market
   automations: banks, Shopify, Amazon, Google, Meta

MASTERCARD / APT (London)            Aug 2018 - Jul 2021
Product Manager / Engagement Manager
 * Managed Mastercard's SaaS analytics platform,
   driving 30% higher ACV on key accounts
 * PMed 4 teams of 4; Forbes 2000 client relationships,
   e.g. Europe's largest retailers
 * Wrote SQL pipelines and led Python analyses with
   six-figure impact, e.g. churn model with 95%+ acc.

=====================================================
 EDUCATION
=====================================================
 * Data Science Apprenticeship - Mastercard,
   graduated with distinction          2019 - 2021
 * University of Cambridge - MPhil Industrial Systems,
   Manufacturing and Management        2017 - 2018
 * University of Southampton - BEng,
   graduated with First                2014 - 2017

Languages: English, Italian, Romanian, Spanish
`;

/* ---------------- Favorite Podcasts ----------------
   Edit this list to add/remove podcasts. Each becomes a shortcut file that
   opens the show in a new tab. `note` is optional flavour text. */
const PODCASTS = [
  { name: 'Lenny’s Podcast', url: 'https://www.lennyspodcast.com', note: 'Product, growth and career, straight from the people who built it.' },
  { name: 'Acquired', url: 'https://www.acquired.fm', note: 'The stories and strategy behind the world’s greatest companies.' },
  { name: 'The Tim Ferriss Show', url: 'https://tim.blog/podcast', note: 'Deconstructing world-class performers, tactic by tactic.' },
  { name: 'How I Built This', url: 'https://wondery.com/shows/how-i-built-this/', note: 'Founders on the messy reality of building something from nothing.' },
];

/* ---------------- Favorite Blogs / Newsletters ----------------
   Edit this list to add/remove newsletters. Each is an internet shortcut. */
const BLOGS = [
  { name: 'Lenny’s Newsletter', url: 'https://www.lennysnewsletter.com' },
  { name: 'Stratechery — Ben Thompson', url: 'https://stratechery.com' },
  { name: 'Not Boring — Packy McCormick', url: 'https://www.notboring.co' },
  { name: 'The Pragmatic Engineer', url: 'https://newsletter.pragmaticengineer.com' },
];

const CREDITS = [
  { title: 'React95', by: 'react95-io', url: 'https://github.com/react95-io/React95',
    note: 'The Windows 95 design system this whole site is built on — theme tokens, bevels, window chrome and components. Licensed MIT.' },
  { title: '@react95/icons', by: 'react95-io', url: 'https://github.com/react95-io/React95',
    note: 'The pixel-perfect 16px & 32px icons used across the desktop. Licensed MIT.' },
  { title: 'MS Sans Serif (pixel font)', by: 'React95', url: 'https://github.com/react95-io/React95',
    note: 'The bitmap typeface and the LED counter font in Minesweeper.' },
];

const PROJECTS = [
  {
    id: 'breathe', name: 'breatheinwith.me', url: 'https://www.breatheinwith.me', icon: 'heart-32',
    desc: 'Cycling breathing guidance app — paced breathing sessions that keep you calm and powerful on the bike.',
  },
  {
    id: 'shelf', name: 'digitalshelf.me', url: 'https://www.digitalshelf.me/cip', icon: 'book-32',
    desc: 'A shareable library of every book read and film watched — your taste, on one shelf.',
  },
  {
    id: 'tune', name: 'tuneraiderz.com', url: 'https://www.tuneraiderz.com', icon: 'games-32',
    desc: 'Retro-themed music recognition game — name that tune before your friends do.',
  },
  {
    id: 'bday', name: 'bdaymail.me', url: 'https://www.bdaymail.me', icon: 'letter-32',
    desc: 'Email birthday reminders — never forget a birthday again.',
  },
];

const SOCIALS = [
  { icon: 'network2-32', label: 'Entire Network', url: null, gag: true },
  { icon: 'folder-shared-32', label: 'GitHub — cipshadow', url: 'https://github.com/cipshadow' },
  { icon: 'user-32', label: 'LinkedIn — blujdea', url: 'https://www.linkedin.com/in/blujdea' },
  { icon: 'globe-32', label: 'X — @ChipRyan0', url: 'https://x.com/ChipRyan0' },
  { icon: 'file-text-32', label: 'Blog: 3DS Trends in Regulated Markets', url: 'https://stripe.com/blog/3ds-trends-in-regulated-markets' },
  { icon: 'movie-32', label: 'Recording: The Truth About 3DS (Stripe Sessions)', url: 'https://stripe.com/gb/sessions/2026/the-truth-about-3ds' },
];

const COUNTRIES = [
  'Romania', 'Italy', 'United Kingdom', 'Spain', 'United States', 'Canada',
  'France', 'Germany', 'Netherlands', 'Belgium', 'Portugal', 'Switzerland',
  'Austria', 'Ireland', 'Greece', 'Croatia', 'Czech Republic', 'Hungary',
  'Poland', 'Denmark', 'Sweden', 'Norway', 'Finland', 'Bulgaria',
  'Serbia', 'Moldova', 'Malta', 'Monaco', 'San Marino', 'Vatican City',
  'Cyprus', 'Turkey', 'Morocco', 'South Africa', 'Kenya', 'Tanzania',
  'United Arab Emirates', 'China', 'Japan', 'South Korea', 'North Korea',
  'Taiwan', 'Singapore', 'Malaysia', 'Thailand', 'Vietnam', 'Cambodia', 'Laos',
  'Brazil', 'Argentina', 'Chile', 'Peru', 'Bolivia', 'Paraguay', 'Uruguay',
  'Colombia', 'Costa Rica', 'Cuba', 'Dominican Rep.',
];

const RECYCLE_FILES = [
  { icon: 'file-text-32', label: 'blockchain_for_birthdays.doc' },
  { icon: 'file-text-32', label: 'nft_business_plan_FINAL_v7.doc' },
  { icon: 'movie-32', label: 'my_mixtape_2003.wav' },
  { icon: 'url-32', label: 'pets.com shortcut' },
  { icon: 'file-text-32', label: 'roadmap_everyone_agreed_on.xls' },
  { icon: 'paint-32', label: 'logo_comic_sans_draft.bmp' },
];

/* ---------------- Notepad: CV ---------------- */
function NotepadCV({ win, common, openDialog }) {
  return (
    <Window {...common} win={win} icon="notepad-16" width={560} minHeight={420}
      menus={[
        { label: 'File', items: [
          { label: 'Download original (.docx)', icon: 'file-text-32', onClick: () => {
            const a = document.createElement('a');
            a.href = 'assets/Ciprian Blujdea CV.docx';
            a.download = 'Ciprian Blujdea CV.docx';
            document.body.appendChild(a); a.click(); a.remove();
          }},
          { sep: true },
          { label: 'Exit', onClick: () => common.onClose(win.id) },
        ]},
        { label: 'Edit', items: [
          { label: 'Copy all', onClick: () => { navigator.clipboard && navigator.clipboard.writeText(CV_TEXT); } },
          { label: 'Word wrap', disabled: true },
        ]},
        { label: 'Help', items: [
          { label: 'About My CV', onClick: () => openDialog({
            title: 'About My CV', icon: 'help-32',
            body: '10+ years of product across payments, fintech and AI. Compressed into one .txt file, as nature intended.',
          })},
        ]},
      ]}
      statusbar={[`${CV_TEXT.split('\n').length} lines`, 'Read-only']}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', padding: 8, height: 340 }}>
        <pre style={{ margin: 0, fontFamily: "'Courier New', monospace", fontSize: 12, fontWeight: 'bold', color: '#000000', lineHeight: 1.45, whiteSpace: 'pre-wrap' }}>{CV_TEXT}</pre>
      </div>
    </Window>
  );
}

/* ---------------- Projects folder ---------------- */
function ProjectsFolder({ win, common, openWindow }) {
  return (
    <Window {...common} win={win} icon="folder-open-16" width={470} minHeight={300}
      menus={[
        { label: 'File', items: [
          { label: 'Open', disabled: true },
          { sep: true },
          { label: 'Close', onClick: () => common.onClose(win.id) },
        ]},
        { label: 'View', items: [
          { label: 'Large icons', icon: 'folder-32', onClick: () => {} },
          { label: 'Details', disabled: true },
        ]},
        { label: 'Help', items: [{ label: 'What am I looking at?', onClick: () => openWindow('about') }]},
      ]}
      statusbar={[`${PROJECTS.length} object(s)`, 'Built after hours']}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start', padding: 8, minHeight: 200 }}>
        {PROJECTS.map((p) => (
          <FileIcon key={p.id} icon={p.icon} label={p.name} onOpen={() => openWindow('project-' + p.id)} />
        ))}
      </div>
    </Window>
  );
}

/* ---------------- Single project window ---------------- */
function ProjectWindow({ project, win, common }) {
  return (
    <Window {...common} win={win} icon="explorer-16" width={470}
      statusbar={[project.url.replace('https://', ''), 'Internet shortcut']}
    >
      <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <image-slot
          id={'shot-' + project.id}
          shape="rect" radius="0"
          placeholder={'Drop a screenshot of ' + project.name}
          style={{ width: '100%', height: 230, boxShadow: 'var(--w95-shadow-input)', background: '#fff' }}
        ></image-slot>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <img src={ICON(project.icon)} style={{ width: 32, height: 32, imageRendering: 'pixelated', flexShrink: 0 }} alt="" />
          <div style={{ lineHeight: 1.5 }}>
            <b>{project.name}</b><br />
            {project.desc}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <W95Button def style={{ minWidth: 110 }} onClick={() => window.open(project.url, '_blank')}>Visit website</W95Button>
          <W95Button style={{ minWidth: 80 }} onClick={() => common.onClose(win.id)}>Close</W95Button>
        </div>
      </div>
    </Window>
  );
}

/* ---------------- Network Neighborhood: socials ---------------- */
function NetworkWindow({ win, common, openDialog }) {
  return (
    <Window {...common} win={win} icon="explorer-16" width={440} minHeight={280}
      menus={[
        { label: 'File', items: [{ label: 'Close', onClick: () => common.onClose(win.id) }]},
        { label: 'Help', items: [{ label: 'About the network', onClick: () => openDialog({
          title: 'Network Neighborhood', icon: 'network-32',
          body: 'Places where Cip can be found on the information superhighway. Double-click to connect (28.8k modem not required).',
        })}]},
      ]}
      statusbar={[`${SOCIALS.length} object(s)`, 'Connected at 28.8 kbps']}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start', padding: 8, minHeight: 190 }}>
        {SOCIALS.map((s, i) => (
          <FileIcon key={i} icon={s.icon} label={s.label}
            onOpen={() => s.url ? window.open(s.url, '_blank') : openDialog({
              title: 'Entire Network', icon: 'network2-32',
              body: 'The entire network is unavailable. It is 1995 — there are only 23,500 websites, and four of them are in the Projects folder.',
            })} />
        ))}
      </div>
    </Window>
  );
}

/* ---------------- Mail compose ---------------- */
function MailWindow({ win, common }) {
  const [subject, setSubject] = React.useState('Hello from your desktop');
  const [body, setBody] = React.useState('');
  const send = () => {
    location.href = 'mailto:cipblujdea95@gmail.com?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
  };
  return (
    <Window {...common} win={win} icon="notepad-16" width={440}
      menus={[
        { label: 'File', items: [
          { label: 'Send', icon: 'mail-32', onClick: send },
          { sep: true },
          { label: 'Close', onClick: () => common.onClose(win.id) },
        ]},
      ]}
    >
      <div style={{ padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 8, alignItems: 'center' }}>
          <label>To:</label>
          <input className="w95-input" value="cipblujdea95@gmail.com" readOnly />
          <label>Subject:</label>
          <input className="w95-input" value={subject} onChange={(e) => setSubject(e.target.value)} />
        </div>
        <textarea className="w95-textarea w95-scroll" rows={9} placeholder="Type your message…"
          value={body} onChange={(e) => setBody(e.target.value)} style={{ width: '100%', boxSizing: 'border-box' }} />
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <W95Button def style={{ minWidth: 90 }} onClick={send}>Send</W95Button>
          <W95Button style={{ minWidth: 80 }} onClick={() => common.onClose(win.id)}>Cancel</W95Button>
        </div>
      </div>
    </Window>
  );
}

/* ---------------- About Cip (System Properties style) ---------------- */
function AboutWindow({ win, common }) {
  const [tab, setTab] = React.useState(0);
  const skills = [
    ['Product strategy & discovery', 95],
    ['Payments, 3DS & fraud', 98],
    ['Data — SQL / Python', 85],
    ['Team leadership', 92],
    ['Gen-AI products', 88],
    ['Over-engineering the heck out of harnesses', 100],
  ];
  const xp = [
    ['Stripe', 'Product Manager — Payment Intelligence', '2024 – now'],
    ['Boltzbit AI', 'Product Lead', '2023 – 2024'],
    ['Juni', 'Senior Product Manager', '2021 – 2023'],
    ['Mastercard / APT', 'Product / Engagement Manager', '2018 – 2021'],
  ];
  return (
    <Window {...common} win={win} icon="computer-16" width={420}>
      <div style={{ padding: '10px 10px 4px' }}>
        <div className="w95-tabs">
          {['General', 'Skills', 'Experience'].map((t, i) => (
            <div key={t} className={'w95-tab' + (tab === i ? ' w95-tab--active' : '')} onClick={() => setTab(i)}>{t}</div>
          ))}
        </div>
        <div className="w95-tab-body" style={{ minHeight: 250 }}>
          {tab === 0 && (
            <div style={{ display: 'flex', gap: 14 }}>
              <image-slot id="portrait" shape="rect" src="assets/cip3.png" placeholder="Drop a photo of Cip"
                style={{ width: 150, height: 190, flexShrink: 0, boxShadow: 'var(--w95-shadow-input)', background: '#fff', imageRendering: 'pixelated' }}></image-slot>
              <div style={{ lineHeight: 1.7 }}>
                <b>System:</b><br />
                &nbsp;&nbsp;Cip Blujdea 95<br />
                &nbsp;&nbsp;Product Builder<br /><br />
                <b>Registered to:</b><br />
                &nbsp;&nbsp;London, UK<br />
                &nbsp;&nbsp;Barcelona, Spain<br />
                <div style={{ display: 'flex', gap: 5, margin: '8px 0 0 2px' }}>
                  <img src={ICON('flag-ro')} title="Romania" style={{ width: 27, height: 18, imageRendering: 'pixelated' }} alt="Romania" />
                  <img src={ICON('flag-it')} title="Italy" style={{ width: 27, height: 18, imageRendering: 'pixelated' }} alt="Italy" />
                  <img src={ICON('flag-gb')} title="United Kingdom" style={{ width: 27, height: 18, imageRendering: 'pixelated' }} alt="United Kingdom" />
                  <img src={ICON('flag-es')} title="Spain" style={{ width: 27, height: 18, imageRendering: 'pixelated' }} alt="Spain" />
                </div>
              </div>
            </div>
          )}
          {tab === 1 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {skills.map(([s, v]) => (
                <div key={s}>
                  <div style={{ marginBottom: 3 }}>{s}</div>
                  <div className="w95-progress"><div className="w95-progress-fill" style={{ width: v + '%' }}></div></div>
                </div>
              ))}
            </div>
          )}
          {tab === 2 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {xp.map(([co, role, when]) => (
                <div key={co} style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '5px 2px' }}>
                  <img src={ICON('folder-exe-32')} style={{ width: 24, height: 24, imageRendering: 'pixelated' }} alt="" />
                  <div style={{ lineHeight: 1.35 }}>
                    <b>{co}</b> <span style={{ color: '#444' }}>· {when}</span><br />
                    <span style={{ fontSize: 11 }}>{role}</span>
                  </div>
                </div>
              ))}
              <div style={{ fontSize: 11, marginTop: 8, color: '#444' }}>Full detail in My CV.txt on the desktop.</div>
            </div>
          )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, padding: '8px 0' }}>
          <W95Button def style={{ minWidth: 80 }} onClick={() => common.onClose(win.id)}>OK</W95Button>
        </div>
      </div>
    </Window>
  );
}

/* ---------------- My Computer ---------------- */
function MyComputerWindow({ win, common, openWindow, openDialog }) {
  const items = [
    { icon: 'folder-exe-32', label: 'Career (C:)', open: () => openWindow('cv') },
    { icon: 'folder-32', label: 'Projects (D:)', open: () => openWindow('projects') },
    { icon: 'help-32', label: 'Credits', open: () => openWindow('credits') },
  ];
  return (
    <Window {...common} win={win} icon="computer-16" width={420} minHeight={270}
      menus={[
        { label: 'File', items: [{ label: 'Close', onClick: () => common.onClose(win.id) }]},
        { label: 'Help', items: [{ label: 'About this PC', onClick: () => openDialog({
          title: 'System Properties', icon: 'computer-32',
          body: '486DX2 running at 66 MHz · 8 MB RAM · Product-Manager co-processor installed. Performance status: shipping.',
        })}]},
      ]}
      statusbar={[`${items.length} object(s)`]}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start', padding: 8, minHeight: 170 }}>
        {items.map((it, i) => <FileIcon key={i} icon={it.icon} label={it.label} onOpen={it.open} />)}
      </div>
    </Window>
  );
}

/* ---------------- Recycle Bin ---------------- */
function RecycleBinWindow({ win, common, openDialog }) {
  return (
    <Window {...common} win={win} icon="explorer-16" width={460} minHeight={290}
      menus={[
        { label: 'File', items: [
          { label: 'Empty Recycle Bin', onClick: () => openDialog({
            title: 'Confirm File Delete', icon: 'warning-32',
            body: 'These ideas have already been deleted once. Some things deserve a second deletion — but history must be preserved.',
          })},
          { sep: true },
          { label: 'Close', onClick: () => common.onClose(win.id) },
        ]},
      ]}
      statusbar={[`${RECYCLE_FILES.length} object(s)`, 'Ideas that didn’t make it']}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start', padding: 8, minHeight: 190 }}>
        {RECYCLE_FILES.map((f, i) => (
          <FileIcon key={i} icon={f.icon} label={f.label} onOpen={() => openDialog({
            title: f.label, icon: 'warning-32',
            body: 'This file was deleted for a reason. Restoring it would be a product decision Cip is not prepared to defend.',
          })} />
        ))}
      </div>
    </Window>
  );
}

/* ---------------- Favorite Podcasts folder ---------------- */
function PodcastsFolder({ win, common, openDialog }) {
  return (
    <Window {...common} win={win} icon="folder-open-16" width={470} minHeight={300}
      menus={[
        { label: 'File', items: [
          { label: 'Open', disabled: true },
          { sep: true },
          { label: 'Close', onClick: () => common.onClose(win.id) },
        ]},
        { label: 'Help', items: [{ label: 'About this folder', onClick: () => openDialog({
          title: 'Favorite Podcasts', icon: 'folder-32',
          body: 'Shows Cip listens to on repeat. Double-click any one to open it in a new tab.',
        })}]},
      ]}
      statusbar={[`${PODCASTS.length} object(s)`, 'In Cip’s headphones']}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start', padding: 8, minHeight: 200 }}>
        {PODCASTS.map((p, i) => (
          <FileIcon key={i} icon="movie-32" label={p.name} onOpen={() => openDialog({
            title: p.name, icon: 'movie-32',
            body: (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ lineHeight: 1.5 }}>{p.note || 'A podcast Cip recommends.'}</div>
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <W95Button def style={{ minWidth: 90 }} onClick={() => window.open(p.url, '_blank')}>Listen</W95Button>
                </div>
              </div>
            ),
          })} />
        ))}
      </div>
    </Window>
  );
}

/* ---------------- Favorite Blogs folder ---------------- */
function BlogsFolder({ win, common, openDialog }) {
  return (
    <Window {...common} win={win} icon="folder-open-16" width={470} minHeight={300}
      menus={[
        { label: 'File', items: [
          { label: 'Open', disabled: true },
          { sep: true },
          { label: 'Close', onClick: () => common.onClose(win.id) },
        ]},
        { label: 'Help', items: [{ label: 'About this folder', onClick: () => openDialog({
          title: 'Favorite Blogs', icon: 'folder-32',
          body: 'Newsletters worth the inbox space. Double-click to read — each is an internet shortcut.',
        })}]},
      ]}
      statusbar={[`${BLOGS.length} object(s)`, 'Internet shortcuts']}
    >
      <div className="w95-sunken w95-scroll" style={{ flexGrow: 1, overflow: 'auto', display: 'flex', flexWrap: 'wrap', alignContent: 'flex-start', padding: 8, minHeight: 200 }}>
        {BLOGS.map((b, i) => (
          <FileIcon key={i} icon="url-32" label={b.name} onOpen={() => window.open(b.url, '_blank')} />
        ))}
      </div>
    </Window>
  );
}

/* ---------------- Credits ---------------- */
function CreditsWindow({ win, common }) {
  return (
    <Window {...common} win={win} icon="help-32" width={440}
      statusbar={['With thanks', 'MIT licensed']}
    >
      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <img src={ICON('chip-flag-64')} style={{ width: 40, height: 40, imageRendering: 'pixelated', flexShrink: 0 }} alt="" />
          <div style={{ lineHeight: 1.5 }}>
            <b>Windows Chip 95</b> is hand-built by Cip Blujdea, but it stands on the
            shoulders of an open-source project. Credit where it’s due:
          </div>
        </div>
        <fieldset className="w95-fieldset">
          <span className="w95-fieldset-legend">Built with</span>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 4 }}>
            {CREDITS.map((c, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <img src={ICON('folder-shared-32')} style={{ width: 28, height: 28, imageRendering: 'pixelated', flexShrink: 0 }} alt="" />
                <div style={{ lineHeight: 1.45 }}>
                  <b>{c.title}</b> <span style={{ color: '#444', fontSize: 11 }}>· {c.by}</span><br />
                  <span style={{ fontSize: 11 }}>{c.note}</span>
                </div>
              </div>
            ))}
          </div>
        </fieldset>
        <div style={{ fontSize: 11, lineHeight: 1.5, color: '#333' }}>
          Thank you to the <b>React95</b> team for making the web feel like 1995 again.
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
          <W95Button style={{ minWidth: 110 }} onClick={() => window.open('https://github.com/react95-io/React95', '_blank')}>Visit React95</W95Button>
          <W95Button def style={{ minWidth: 80 }} onClick={() => common.onClose(win.id)}>OK</W95Button>
        </div>
      </div>
    </Window>
  );
}

/* ---------------- Travel ---------------- */
function TravelWindow({ win, common }) {
  return (
    <Window {...common} win={win} icon="earth-32" width={560} minHeight={420}
      menus={[
        { label: 'File', items: [{ label: 'Close', onClick: () => common.onClose(win.id) }]},
        { label: 'View', items: [{ label: 'Large icons', disabled: true }, { label: 'List', icon: 'earth-32', onClick: () => {} }]},
      ]}
      statusbar={[`${COUNTRIES.length} countries visited`, 'Passport: well-stamped']}
    >
      <div className="w95-scroll" style={{ flexGrow: 1, overflow: 'auto', padding: 10, display: 'flex', flexDirection: 'column', gap: 10, height: 380 }}>
        <div className="w95-sunken" style={{ padding: 4, background: '#000' }}>
          <img src="assets/travel-map-pixel.png" alt="World map of countries visited"
            style={{ width: '100%', display: 'block', imageRendering: 'pixelated' }} />
        </div>
        <fieldset className="w95-fieldset">
          <span className="w95-fieldset-legend">Countries travelled</span>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(130px, 1fr))', gap: '3px 10px', paddingTop: 4 }}>
            {COUNTRIES.map((c) => (
              <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, lineHeight: 1.4 }}>
                <span style={{ width: 6, height: 6, background: '#ff5a1f', boxShadow: 'inset 0.5px 0.5px 0 #fff', flexShrink: 0 }}></span>
                {c}
              </div>
            ))}
          </div>
        </fieldset>
      </div>
    </Window>
  );
}

Object.assign(window, {
  CV_TEXT, PROJECTS, SOCIALS, RECYCLE_FILES, COUNTRIES, PODCASTS, BLOGS, CREDITS,
  NotepadCV, ProjectsFolder, ProjectWindow, NetworkWindow, MailWindow,
  AboutWindow, MyComputerWindow, RecycleBinWindow, PodcastsFolder, BlogsFolder,
  CreditsWindow, TravelWindow,
});