/* global React */
// Skillzip Prototype v2 — Path B Screens
// B1 changes: video embed, inline how-to-use prompt, 3 layout options, button fix
const { useState } = React;
const {
  Icon, ScreenHeader, FootBar, BtnPrimary, BtnGhost, BtnMuted, BtnAccent,
  Badge, FileRow, CodeBlock, CheckItem, Tabs,
} = window;

const STEPS_B = ['Download', 'Open Claude', 'Upload', 'Prompt', 'Interview', 'Files', 'Upload back'];

// ── B1 shared constants ─────────────────────────────────────
const PROMPT_TEXT_B1 = `You are my Skillzip Skill Builder.

I am a non-technical expert. Help me turn my knowledge
into a complete Skillzip skill package.

Use the uploaded starter folder as the required structure.

Interview me one question at a time. At the end, generate:
  1. SKILL.md
  2. README.md  — for non-technical buyers
  3. HOW_TO_USE.md — with copy-paste prompts
  4. examples.md — 3–5 use cases

Do not assume I know Markdown or coding.
Give me exact copy-paste instructions.`;

const B1_HOW_IT_WORKS = [
  { state: 's-done',   title: 'Download the starter folder',  desc: 'A ZIP with 6 markdown templates + a Claude prompt. No coding required.' },
  { state: 's-active', title: 'Open Claude and upload it',     desc: "Drag the ZIP into Claude's chat. Claude reads the templates and knows what to write." },
  { state: '',         title: "Answer Claude's questions",     desc: 'Plain language. One question at a time. Claude handles the format.' },
  { state: '',         title: 'Upload back here',              desc: 'Skillzip validates, scans, and creates your listing.' },
];

// ── B1 shared sub-components (module-level to avoid remount) ─
function downloadStarterFolder(componentId = 'starter_folder_download') {
  window.skillzipTrack && window.skillzipTrack('starter_folder_downloaded', { component_id: componentId });
  window.location.href = '/downloads/skillzip-starter-folder.zip';
}

function openClaude(componentId = 'open_claude') {
  window.skillzipTrack && window.skillzipTrack('claude_opened', { component_id: componentId });
  window.open('https://claude.ai/new', '_blank', 'noopener,noreferrer');
}

function copyStarterPrompt(componentId = 'starter_prompt_copy') {
  window.skillzipTrack && window.skillzipTrack('first_prompt_copied', { component_id: componentId });
  return navigator.clipboard.writeText(PROMPT_TEXT_B1);
}

function B1VideoAccordion({ expanded, onToggle }) {
  return (
    <div className="card no-hover" style={{ padding: 0, overflow: 'hidden' }}>
      <div
        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 16px', cursor: 'pointer', userSelect: 'none', background: 'var(--color-bg-sidebar)' }}
        onClick={onToggle}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="play-circle" size={14} color="var(--color-accent-blue)" />
          <span style={{ fontWeight: 500, fontSize: 13.5 }}>How to create a Claude skill</span>
          <Badge variant="opt">Video</Badge>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>{expanded ? 'Collapse' : 'Watch'}</span>
          <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size={15} color="var(--color-text-tertiary)" />
        </div>
      </div>
      {expanded && (
        <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', borderTop: '1px solid var(--color-border-subtle)' }}>
          <iframe
            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
            src="https://www.youtube.com/embed/kS1MJFZWMq4?si=RIRTsllVFtsfZGx7"
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
          />
        </div>
      )}
    </div>
  );
}

function B1HowToUseAccordion({ expanded, onToggle }) {
  return (
    <div className="card no-hover" style={{ padding: 0, overflow: 'hidden' }}>
      <div
        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 16px', cursor: 'pointer', userSelect: 'none', background: expanded ? 'var(--color-bg-sidebar)' : 'white' }}
        onClick={onToggle}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Icon name="clipboard-list" size={14} color="var(--color-text-secondary)" />
          <span style={{ fontWeight: 500, fontSize: 13.5 }}>How to use</span>
          <Badge variant="neutral">Prompt</Badge>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>{expanded ? 'Collapse' : 'Open'}</span>
          <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size={15} color="var(--color-text-tertiary)" />
        </div>
      </div>
      {expanded && (
        <div style={{ padding: '14px 16px 16px', borderTop: '1px solid var(--color-border-subtle)' }}>
          <p style={{ fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.5, marginBottom: 12 }}>
            Download the starter folder, open Claude, upload it, then paste this prompt to start building your skill.
          </p>
          <CodeBlock>{PROMPT_TEXT_B1}</CodeBlock>
        </div>
      )}
    </div>
  );
}

function B1HowItWorksCard() {
  return (
    <div className="card no-hover">
      <div className="card-title" style={{ marginBottom: 14 }}>How it works</div>
      <div className="steps-list">
        {B1_HOW_IT_WORKS.map((s, i) => (
          <div key={i} className={`step-row ${s.state}`}>
            <div className="step-num">{s.state === 's-done' ? <Icon name="check" size={13} color="#fff" /> : i + 1}</div>
            <div className="step-content">
              <div className="step-row-title">{s.title}</div>
              <div className="step-row-desc">{s.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function B1FilesCards() {
  return (
    <>
      <div className="card no-hover">
        <div className="card-title" style={{ marginBottom: 10 }}>What you'll end up with</div>
        <div className="tree">{`your-skill/\n├── SKILL.md          for Claude\n├── README.md         for buyers\n├── HOW_TO_USE.md     for buyers\n└── examples.md       3–5 use cases`}</div>
        <p style={{ fontSize: 12.5, color: 'var(--color-text-secondary)', marginTop: 10, lineHeight: 1.5 }}>
          We package, validate, and run a safety scan after you upload back.
        </p>
      </div>
      <div className="card tinted no-hover flat">
        <div className="card-title" style={{ marginBottom: 10 }}>What's inside the starter folder</div>
        <div className="filelist">
          <FileRow name="START_HERE.md"                  meta="read first"       status="optional" />
          <FileRow name="PROMPT_TO_CREATE_YOUR_SKILL.md" meta="copy into Claude" status="optional" />
          <FileRow name="SKILL_TEMPLATE.md"              meta="scaffold"         status="optional" />
          <FileRow name="README_TEMPLATE.md"             meta="scaffold"         status="optional" />
          <FileRow name="HOW_TO_USE_TEMPLATE.md"         meta="scaffold"         status="optional" />
          <FileRow name="EXAMPLES_TEMPLATE.md"           meta="scaffold"         status="optional" />
        </div>
      </div>
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B1 — Create From Expertise  [v3 — Variant A locked in]
//   Linear checklist: hero CTA → 4 numbered steps → embedded video.
//   Footer adds "Upload SKILL.md" CTA → A1.
// ══════════════════════════════════════════════════════════════

const PROMPT_SHORT = `You are my Skillzip Skill Builder.
I am a non-technical expert. Help me turn my
knowledge into a complete skill package.`;

// Footer — Back left, Upload SKILL.md bottom-right.
function B1FootBar({ nav }) {
  return (
    <FootBar
      left={<BtnGhost icon="arrow-left" onClick={() => nav('S1')}>Back</BtnGhost>}
      meta="~3.4 KB · 6 markdown files · ~10 min"
      right={
        <div className="row" style={{ gap: 8 }}>
          <BtnMuted size="sm" icon="help-circle">Help</BtnMuted>
          <BtnPrimary onClick={() => nav('A1')} icon="upload">Upload SKILL.md</BtnPrimary>
        </div>
      }
    />
  );
}

function ScreenB1({ nav }) {
  const [copied, setCopied]   = useState(false);
  const [videoOpen, setVideoOpen] = useState(true);

  function handleCopy() {
    window.skillzipTrack && window.skillzipTrack('first_prompt_copied', { component_id: 'screen_b1_prompt_copy' });
    navigator.clipboard.writeText(PROMPT_SHORT).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }).catch(() => {});
  }

  return (
    <>
      <div className="screen-wrap screen-enter" style={{ maxWidth: 720 }}>
        <ScreenHeader
          tag="PATH B · STEP 1"
          title="Turn your know-how into a skill"
          sub="No writing or coding needed — Claude does the writing, you bring the expertise."
        />

        {/* Hero CTA — slim, no icon, no description, no secondary button */}
        <div className="b1a-hero b1a-hero-slim">
          <div className="b1a-hero-body">
            <div className="b1a-hero-eyebrow">Ready to start</div>
            <div className="b1a-hero-title">Download the starter folder</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
              <BtnPrimary onClick={() => downloadStarterFolder('screen_b1_hero')} icon="download">Download starter folder</BtnPrimary>
            </div>
          </div>
        </div>

        {/* Section label */}
        <div className="b1a-section-label">How it works — 4 steps</div>

        {/* Steps */}
        <div className="b1a-steps">
          {/* Step 1 */}
          <div className="b1a-step">
            <div className="b1a-step-num">1</div>
            <div className="b1a-step-body">
              <div className="b1a-step-title">Download the starter folder</div>
              <div className="b1a-step-desc">ZIP with 6 markdown templates Claude reads to know what to write.</div>
              <div className="b1a-inline-action">
                <span className="b1a-inline-need">
                  <Icon name="package" size={13} color="var(--color-text-tertiary)" />
                  You need · the ZIP file
                </span>
                <BtnMuted size="sm" icon="download" onClick={() => downloadStarterFolder('screen_b1_step_1')}>Download ↓</BtnMuted>
              </div>
            </div>
          </div>

          {/* Step 2 — with prompt */}
          <div className="b1a-step">
            <div className="b1a-step-num">2</div>
            <div className="b1a-step-body">
              <div className="b1a-step-title">Open Claude and upload the ZIP</div>
              <div className="b1a-step-desc">Drag the file into Claude&rsquo;s chat, then paste the starter prompt — it tells Claude you&rsquo;re building a Skillzip skill.</div>
              <div className="b1a-inline-action">
                <span className="b1a-inline-need">
                  <Icon name="message-square" size={13} color="var(--color-text-tertiary)" />
                  You need · starter prompt for Claude
                </span>
              </div>
              {/* Inline prompt code block with copy + Copied! tooltip */}
              <div style={{ marginTop: 12, background: 'var(--color-bg-sidebar)', border: '1px solid var(--color-border-subtle)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.7, padding: '11px 14px 10px', whiteSpace: 'pre' }}>{PROMPT_SHORT}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px', borderTop: '1px solid var(--color-border-subtle)', background: 'rgba(0,0,0,0.02)' }}>
                  <span style={{ fontSize: 11.5, color: 'var(--color-text-tertiary)' }}>Paste into Claude after uploading</span>
                  <div style={{ position: 'relative' }}>
                    <button
                      onClick={handleCopy}
                      style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 500, color: copied ? 'var(--color-accent-green)' : 'var(--color-accent-blue)', background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', padding: 0 }}
                    >
                      <Icon name={copied ? 'check' : 'copy'} size={13} color={copied ? 'var(--color-accent-green)' : 'var(--color-accent-blue)'} />
                      {copied ? 'Copied!' : 'Copy'}
                    </button>
                    {copied && <span className="b1a-tooltip">Copied to clipboard</span>}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Step 3 */}
          <div className="b1a-step">
            <div className="b1a-step-num">3</div>
            <div className="b1a-step-body">
              <div className="b1a-step-title">Answer Claude&rsquo;s questions</div>
              <div className="b1a-step-desc">Plain language. One question at a time. Claude handles the markdown and formatting.</div>
            </div>
          </div>

          {/* Step 4 */}
          <div className="b1a-step">
            <div className="b1a-step-num">4</div>
            <div className="b1a-step-body">
              <div className="b1a-step-title">Upload the finished files back here</div>
              <div className="b1a-step-desc">Skillzip validates, runs a safety scan, and creates your listing draft.</div>
            </div>
          </div>
        </div>

        {/* ── Collapsible video embed ── */}
        <div className="b1a-video">
          <div className="b1a-video-head" onClick={() => setVideoOpen(!videoOpen)}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div className="b1a-video-icon"><Icon name="play" size={12} color="#fff" /></div>
              <div>
                <div className="b1a-video-title">How to create a Claude skill</div>
                <div className="b1a-video-meta">Video walkthrough · ~2 min</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--color-text-tertiary)' }}>
              <span style={{ fontSize: 11.5 }}>{videoOpen ? 'Collapse' : 'Expand'}</span>
              <Icon name={videoOpen ? 'chevron-up' : 'chevron-down'} size={14} color="var(--color-text-tertiary)" />
            </div>
          </div>
          {videoOpen && (
            <div className="b1a-video-frame">
              <iframe
                src="https://www.youtube.com/embed/kS1MJFZWMq4?si=RIRTsllVFtsfZGx7"
                title="How to create a Claude skill"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerPolicy="strict-origin-when-cross-origin"
                allowFullScreen
              />
            </div>
          )}
        </div>
      </div>

      <B1FootBar nav={nav} />
    </>
  );
}
// B2 — Start Here (7-step guide)  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB2({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 1"
          title="Start here — your 7-step guide"
          sub="Follow these steps in order. You can come back to this page anytime."
          steps={STEPS_B} step={0}
        />

        <div className="card no-hover" style={{ marginBottom: 16 }}>
          <div className="card-title" style={{ marginBottom: 14 }}>Everything you'll do</div>
          <div className="steps-list">
            {[
              { state: 's-done',   title: 'Download the starter folder',          desc: 'A ZIP with 6 markdown templates. Save it somewhere you can find again.',   cta: null },
              { state: 's-active', title: 'Open Claude',                           desc: 'Go to claude.ai in your browser. No app to install.',                        cta: { label: 'Open Claude →', key: 'B3' } },
              { state: '',         title: 'Upload the starter folder into Claude', desc: "Click the attachment button in Claude's chat input and pick the folder.",  cta: null },
              { state: '',         title: 'Copy the first prompt',                 desc: "We give you the exact words to paste. Don't type your own yet.",           cta: { label: 'See the prompt →', key: 'B5' } },
              { state: '',         title: "Answer Claude's questions",             desc: 'Plain language. Claude asks one question at a time.',                        cta: null },
              { state: '',         title: 'Download the finished files',           desc: 'SKILL.md, README.md, HOW_TO_USE.md, examples.md.',                          cta: null },
              { state: '',         title: 'Upload them back to Skillzip',          desc: 'We validate, scan, and publish.',                                            cta: null },
            ].map((s, i) => (
              <div key={i} className={`step-row ${s.state}`}>
                <div className="step-num">{s.state === 's-done' ? <Icon name="check" size={13} color="#fff" /> : i + 1}</div>
                <div className="step-content">
                  <div className="step-row-title">{s.title}</div>
                  <div className="step-row-desc">{s.desc}</div>
                  {s.cta && (
                    <div className="step-row-cta">
                      <BtnMuted size="sm" onClick={() => {
                        if (s.cta.key === 'B3') openClaude('screen_b2_step_cta');
                        nav(s.cta.key);
                      }}>{s.cta.label}</BtnMuted>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="grid-2">
          <div className="helper-banner" style={{ cursor: 'pointer' }} onClick={() => nav('B5')}>
            <div>
              <div className="helper-title">Copy the first prompt now</div>
              <div className="helper-sub">Grab it ahead of time so Step 4 is instant.</div>
            </div>
            <BtnMuted size="sm">Copy prompt →</BtnMuted>
          </div>
          <div className="helper-banner" style={{ cursor: 'pointer' }} onClick={() => nav('B8')}>
            <div>
              <div className="helper-title">Already finished with Claude?</div>
              <div className="helper-sub">Jump ahead to upload the files Claude made.</div>
            </div>
            <BtnMuted size="sm">Skip to upload →</BtnMuted>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B1')}>Back</BtnGhost>}
        meta="Step 1 of 7 · ~10 min total"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted icon="download" onClick={() => downloadStarterFolder('screen_b2_footer')}>Download starter again</BtnMuted>
            <BtnPrimary onClick={() => nav('B3')} icon="arrow-right">Step 2 — Open Claude</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B3 — Open Claude  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB3({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 2"
          title="Open Claude in a new tab"
          sub="Use Claude Web — the easiest option. No terminal or developer tools needed."
          steps={STEPS_B} step={1}
        />

        <div className="grid-2">
          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 8 }}>
              Recommended · Claude Web
              <Badge variant="ok">easiest</Badge>
            </div>
            <div className="card-sub" style={{ marginBottom: 14 }}>Works in any browser. No install needed. A free Claude account is enough.</div>
            <div style={{ background: 'var(--color-bg-sidebar)', border: '1px solid var(--color-border-subtle)', borderRadius: 'var(--radius-md)', padding: '12px 14px', marginBottom: 14 }}>
              <div style={{ fontSize: 11, color: 'var(--color-text-tertiary)', fontFamily: 'var(--font-mono)', marginBottom: 4 }}>↗ open URL</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--color-text-primary)', fontWeight: 500 }}>https://claude.ai</div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <BtnAccent icon="external-link" onClick={() => openClaude('screen_b3_open_claude')}>Open Claude</BtnAccent>
              <BtnMuted size="sm" icon="copy" onClick={() => navigator.clipboard.writeText('https://claude.ai')}>Copy URL</BtnMuted>
            </div>
          </div>

          <div className="col">
            <div className="card no-hover">
              <div className="card-title" style={{ marginBottom: 10 }}>What to do once it loads</div>
              <ol style={{ paddingLeft: 18, fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
                <li>Sign in (free account is fine).</li>
                <li>Click <strong style={{ color: 'var(--color-text-primary)' }}>New chat</strong>.</li>
                <li>Don't type anything yet — we have a specific prompt for you.</li>
              </ol>
            </div>
            <div className="card tinted no-hover flat">
              <div className="card-title" style={{ marginBottom: 6 }}>You don't need any of this</div>
              <ul style={{ paddingLeft: 16, fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
                <li>A terminal or command line</li>
                <li>A code editor like VS Code</li>
                <li>To know what Markdown is</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B2')}>Back</BtnGhost>}
        meta="Step 2 of 7"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted>Use Claude Code instead</BtnMuted>
            <BtnPrimary onClick={() => nav('B4')} icon="arrow-right">I opened Claude</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B4 — Upload Starter to Claude  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB4({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 3"
          title="Upload the starter folder into Claude"
          sub="Drag the ZIP into Claude's chat box, or click Claude's attachment button."
          steps={STEPS_B} step={2}
        />

        <div className="grid-2">
          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 8 }}>Where to find the upload button</div>
            <div className="card-sub" style={{ marginBottom: 14 }}>It's the paperclip / + icon at the bottom of Claude's chat input.</div>
            <div style={{ height: 200, background: 'var(--color-bg-sidebar)', border: '1px dashed var(--color-border-default)', borderRadius: 'var(--radius-md)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--color-text-tertiary)', fontSize: 13 }}>
              <Icon name="monitor" size={28} color="var(--color-border-default)" />
              <span>Claude chat screenshot — annotated</span>
              <span style={{ fontSize: 11.5, fontFamily: 'var(--font-mono)' }}>↘ arrow points to the + button</span>
            </div>
          </div>

          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 14 }}>Steps in order</div>
            <div className="steps-list">
              {[
                { state: 's-done',   title: 'Click the + or paperclip icon',           desc: "Bottom of Claude's chat input." },
                { state: 's-done',   title: 'Select the starter folder or ZIP',         desc: 'From wherever you saved it — Downloads is common.' },
                { state: 's-active', title: 'Wait for files to finish uploading',       desc: 'Each file shows as a small tile in the chat input.' },
                { state: '',         title: "Don't type anything yet",                  desc: "We'll give you the exact prompt on the next step." },
              ].map((s, i) => (
                <div key={i} className={`step-row ${s.state}`}>
                  <div className="step-num">{s.state === 's-done' ? <Icon name="check" size={13} color="#fff" /> : i + 1}</div>
                  <div className="step-content">
                    <div className="step-row-title">{s.title}</div>
                    <div className="step-row-desc">{s.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="helper-banner" style={{ marginTop: 16 }}>
          <div>
            <div className="helper-title">Can't find the file?</div>
            <div className="helper-sub">No worries — re-download the starter folder from this page.</div>
          </div>
          <BtnMuted size="sm" icon="download" onClick={() => downloadStarterFolder('screen_b4_inline')}>Download again</BtnMuted>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B3')}>Back</BtnGhost>}
        meta="Step 3 of 7"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted icon="download" onClick={() => downloadStarterFolder('screen_b4_footer')}>Download starter again</BtnMuted>
            <BtnPrimary onClick={() => nav('B5')} icon="arrow-right">I uploaded it</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B5 — Copy Prompt  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB5({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 4"
          title="Copy this prompt into Claude"
          sub="Paste exactly. Don't change the words. Claude will take over from there."
          steps={STEPS_B} step={3}
        />

        <div className="card no-hover" style={{ marginBottom: 16 }}>
          <div className="card-title" style={{ marginBottom: 4 }}>Your first prompt</div>
          <div className="card-sub" style={{ marginBottom: 14 }}>Click <strong>Copy</strong>, then paste it into the Claude chat where you uploaded the folder.</div>
          <CodeBlock>{PROMPT_TEXT_B1}</CodeBlock>
          <div className="row" style={{ marginTop: 14, gap: 8 }}>
            <BtnAccent icon="clipboard" onClick={() => copyStarterPrompt('screen_b5_copy_button')}>Copy prompt</BtnAccent>
            <BtnMuted icon="file-text" onClick={() => window.open('/downloads/skillzip-starter-folder/PROMPT_TO_CREATE_YOUR_SKILL.md', '_blank')}>View as plain text</BtnMuted>
          </div>
        </div>

        <div className="grid-2">
          <div className="card tinted no-hover flat">
            <div className="card-title" style={{ marginBottom: 8 }}>
              <Icon name="check-circle" size={14} color="var(--color-accent-green)" />
              What should happen
            </div>
            <ul style={{ paddingLeft: 16, fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
              <li>Claude replies with a single question.</li>
              <li>Usually asks "what is your skill about?"</li>
              <li>Wait for the first question — don't type ahead.</li>
            </ul>
          </div>
          <div className="card tinted no-hover flat">
            <div className="card-title" style={{ marginBottom: 8 }}>
              <Icon name="alert-circle" size={14} color="var(--color-accent-orange)" />
              If Claude doesn't reply
            </div>
            <ul style={{ paddingLeft: 16, fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.8 }}>
              <li>Check files actually uploaded (each shows as a tile).</li>
              <li>Try refreshing the chat and pasting again.</li>
              <li>Use the rescue prompt on the next page.</li>
            </ul>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B4')}>Back</BtnGhost>}
        meta="Step 4 of 7"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted>Need help?</BtnMuted>
            <BtnPrimary onClick={() => nav('B6')} icon="arrow-right">I pasted it into Claude</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B6 — Answer Questions  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB6({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 5"
          title="Answer Claude's questions"
          sub="Claude will interview you one question at a time. Plain language is best."
          steps={STEPS_B} step={4}
        />

        <div className="grid-2" style={{ marginBottom: 16 }}>
          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 14 }}>What Claude will ask you about</div>
            <div className="steps-list">
              {[
                'What is your skill, in one sentence?',
                'Who is the ideal buyer?',
                'What outcome do they get?',
                "Walk me through how you'd do this task",
                "What's a good first example?",
                'What should the skill not do?',
              ].map((q, i) => (
                <div key={i} className="step-row">
                  <div className="step-num" style={{ fontSize: 13, color: 'var(--color-text-tertiary)' }}>·</div>
                  <div className="step-content">
                    <div className="step-row-title">{q}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="col">
            <div className="card no-hover">
              <div className="card-title" style={{ marginBottom: 8 }}>Example — answering plain</div>
              <div className="card-sub" style={{ marginBottom: 12 }}>This is what a great answer looks like. No formatting needed.</div>
              <div style={{ background: 'var(--color-bg-sidebar)', border: '1px solid var(--color-border-subtle)', borderRadius: 'var(--radius-md)', padding: '12px 14px', fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.6 }}>
                <div style={{ fontSize: 10.5, fontFamily: 'var(--font-mono)', color: 'var(--color-text-tertiary)', marginBottom: 6 }}>YOU →</div>
                "My skill helps founders write cold emails to VCs. I usually start by asking who the VC partner is and what they've recently invested in, then I write a 3-line opener, a one-line ask, and a soft close. I never use 'circling back'."
              </div>
            </div>
            <div className="card tinted no-hover flat">
              <div className="card-title" style={{ marginBottom: 8 }}>If Claude gets stuck</div>
              <div className="card-sub" style={{ marginBottom: 10 }}>Copy this rescue prompt and paste it into the same chat.</div>
              <CodeBlock>{`You stalled mid-interview. Pick up from where we were.\nAsk me only the NEXT question — one at a time — until\nyou have enough to write all 4 files.`}</CodeBlock>
            </div>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B5')}>Back</BtnGhost>}
        meta="Step 5 of 7 · usually 8–12 questions"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted icon="clipboard" onClick={() => navigator.clipboard.writeText('Please continue the Skillzip skill builder interview one question at a time. If you need missing context, ask me exactly one question now.')}>Copy rescue prompt</BtnMuted>
            <BtnPrimary onClick={() => nav('B7')} icon="arrow-right">Claude finished my files</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B7 — Download Generated Files  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB7({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 6"
          title="Download the files Claude made"
          sub="Check that all four files came through, then bring them back to Skillzip."
          steps={STEPS_B} step={5}
        />

        <div className="grid-2" style={{ marginBottom: 16 }}>
          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 4 }}>Required files checklist</div>
            <div className="card-sub" style={{ marginBottom: 14 }}>Confirm each one is in your downloads.</div>
            <div className="filelist">
              <FileRow name="SKILL.md"      meta="for Claude" status="required" />
              <FileRow name="README.md"     meta="for buyers" status="required" />
              <FileRow name="HOW_TO_USE.md" meta="for buyers" status="required" />
              <FileRow name="examples.md"   meta="listing"    status="optional" />
            </div>
          </div>

          <div className="col">
            <div className="card no-hover">
              <div className="card-title" style={{ marginBottom: 10 }}>How to download from Claude</div>
              <ol style={{ paddingLeft: 18, fontSize: 13, color: 'var(--color-text-secondary)', lineHeight: 1.85 }}>
                <li>Find each file in Claude's reply.</li>
                <li>Click the <strong style={{ color: 'var(--color-text-primary)' }}>download</strong> icon on the file's tile.</li>
                <li>Save all four into the same folder on your computer.</li>
              </ol>
            </div>
            <div className="card tinted no-hover flat">
              <div className="card-title" style={{ marginBottom: 8 }}>Missing a file?</div>
              <div className="card-sub" style={{ marginBottom: 10 }}>Paste this back into Claude to regenerate it.</div>
              <CodeBlock>{`I'm missing the {FILE_NAME} file. Regenerate just that\nfile using everything I told you. Don't ask more\nquestions — use the conversation so far.`}</CodeBlock>
            </div>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B6')}>Back</BtnGhost>}
        meta="Step 6 of 7"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted icon="clipboard" onClick={() => navigator.clipboard.writeText('Please generate any missing Skillzip package files now: SKILL.md, README.md, HOW_TO_USE.md, and examples.md. Put each file in a separate markdown code block with the filename as the heading.')}>Copy missing-file prompt</BtnMuted>
            <BtnPrimary onClick={() => nav('B8')} icon="arrow-right">I have all files</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// ══════════════════════════════════════════════════════════════
// B8 — Upload Back to Skillzip  [UNCHANGED]
// ══════════════════════════════════════════════════════════════
function ScreenB8({ nav }) {
  return (
    <>
      <div className="screen-wrap screen-enter">
        <ScreenHeader
          tag="PATH B · STEP 7"
          title="Upload your finished skill to Skillzip"
          sub="Same upload as Path A — we'll validate, scan, and create a draft listing."
          steps={STEPS_B} step={6}
        />

        <div className="dropzone" style={{ marginBottom: 16 }}>
          <div className="dz-icon">
            <Icon name="upload-cloud" size={24} color="var(--color-text-secondary)" />
          </div>
          <div className="dz-title">Drop the folder or ZIP Claude made for you</div>
          <div className="dz-sub">or <span className="dz-link">browse files</span> — accepts <code>.zip</code>, folder, or 4 separate <code>.md</code> files</div>
        </div>

        <div className="grid-2">
          <div className="card no-hover">
            <div className="card-title" style={{ marginBottom: 14 }}>What happens next</div>
            <div className="steps-list">
              {[
                { state: 's-active', title: 'We validate the files',    desc: 'Same checks as Path A.' },
                { state: '',         title: 'Skillzip Shield risk scan', desc: 'Catches prompt-injection, credential asks, etc.' },
                { state: '',         title: 'Draft is created',          desc: 'You can preview as a buyer and publish.' },
              ].map((s, i) => (
                <div key={i} className={`step-row ${s.state}`}>
                  <div className="step-num" style={{ fontSize: 12, fontWeight: 600 }}>{String.fromCharCode(97 + i)}</div>
                  <div className="step-content">
                    <div className="step-row-title">{s.title}</div>
                    <div className="step-row-desc">{s.desc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card tinted no-hover flat">
            <div className="card-title" style={{ marginBottom: 10 }}>Stuck somewhere?</div>
            <ul style={{ paddingLeft: 16, fontSize: 12.5, color: 'var(--color-text-secondary)', lineHeight: 1.8, marginBottom: 14 }}>
              <li>Claude's chat got reset — re-upload the starter folder and re-paste the first prompt.</li>
              <li>You only have some files — use the missing-file prompt from Step 6.</li>
              <li>Files won't validate — we'll show exactly what to fix.</li>
            </ul>
            <div className="row" style={{ gap: 8 }}>
              <BtnMuted size="sm" icon="mail">Contact support</BtnMuted>
              <BtnMuted size="sm" icon="book-open">Read FAQ</BtnMuted>
            </div>
          </div>
        </div>
      </div>

      <FootBar
        left={<BtnGhost icon="arrow-left" onClick={() => nav('B7')}>Back</BtnGhost>}
        meta="Step 7 of 7 · last step"
        right={
          <div className="row" style={{ gap: 8 }}>
            <BtnMuted icon="download" onClick={() => downloadStarterFolder('screen_b8_footer')}>Download starter again</BtnMuted>
            <BtnPrimary onClick={() => nav('A1')} icon="arrow-right">Upload completed skill</BtnPrimary>
          </div>
        }
      />
    </>
  );
}

// Register
window.SCREENS = Object.assign(window.SCREENS || {}, {
  B1: ScreenB1, B2: ScreenB2, B3: ScreenB3, B4: ScreenB4,
  B5: ScreenB5, B6: ScreenB6, B7: ScreenB7, B8: ScreenB8,
});