// ============================================================
// PRODUCT MOCKS — Static (non-interactive) renderings of the
// Process Builder UI, reusing styles.css classes so the visuals
// match the real app pixel-for-pixel.
// ============================================================

const D = window.DATA;

// —— Tiny inline icons used in mocks
const MockIcon = ({ name, size = 14 }) => {
  const paths = {
    chevDown: <polyline points="6 9 12 15 18 9" />,
    search:   <g><circle cx="11" cy="11" r="7" /><line x1="16.5" y1="16.5" x2="21" y2="21" /></g>,
    bell:     <g><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.7 21a2 2 0 0 1-3.4 0" /></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

function MockHeader({ compact }) {
  const t = D.tenant;
  return (
    <div className="header" style={compact ? { height: 48, padding: '0 18px' } : null}>
      <div className="header__brand">
        <div className="header__logo">PB</div>
        <div className="header__name">Process Builder</div>
      </div>
      <div className="header__sep">/</div>
      <div className="header__product">Workspace</div>
      <div className="header__nav">
        <a className="is-active" href="#">Map</a>
        <a href="#">Roles</a>
        <a href="#">Admin</a>
      </div>
      <div className="header__spacer" />
      <div className="tenant-switcher">
        <div className="tenant-switcher__trigger">
          <div className="tenant-switcher__swatch" style={{ background: t.accent }} />
          <div className="tenant-switcher__name">{t.name}</div>
          <span className="tenant-switcher__chev"><MockIcon name="chevDown" size={12} /></span>
        </div>
      </div>
    </div>
  );
}

function MockFilterBar() {
  return (
    <div className="filterbar">
      <span className="filterbar__label">FILTER</span>
      <button className="fchip">
        <span className="fchip__label">Format:</span>
        <span className="fchip__value">All</span>
        <span className="fchip__chev"><MockIcon name="chevDown" size={11} /></span>
      </button>
      <button className="fchip is-active">
        <span className="fchip__label">Tier:</span>
        <span className="fchip__value">Premium</span>
        <span className="fchip__chev"><MockIcon name="chevDown" size={11} /></span>
      </button>
      <button className="fchip">
        <span className="fchip__label">Role:</span>
        <span className="fchip__value">All</span>
        <span className="fchip__chev"><MockIcon name="chevDown" size={11} /></span>
      </button>
      <div className="filterbar__right">
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-faint)', letterSpacing: '0.04em' }}>
          26 / 34 steps
        </span>
      </div>
    </div>
  );
}

// —— Status badge (static)
function MockBadge({ status }) {
  const label = { stable: 'Stable', draft: 'Draft', gap: 'Gap', review: 'Review' }[status] || status;
  return <span className={`badge badge--${status}`}>{label}</span>;
}

// —— Stage card (no nav)
function MockStageCard({ stage }) {
  const phase = D.phases.find(p => p.id === stage.phase);
  const allRoles = D.roles;
  const stepsAll = D.steps.filter(s => s.stage === stage.id);
  const coveredRoles = new Set(stage.roles);
  const phaseVar = `var(--phase-${phase.color})`;
  return (
    <div
      className="stage-card"
      style={{ '--phase-c': phaseVar, cursor: 'default' }}
    >
      <div>
        <div className="stage-card__top">
          <div className="stage-card__order">
            <span>{String(stage.order).padStart(2, '0')} · </span>
            <span>{phase.name}</span>
          </div>
          <MockBadge status={stage.status} />
        </div>
        <div className="stage-card__name">{stage.name}</div>
        <div className="stage-card__desc">{stage.desc}</div>
        <div className="stage-card__meta">
          <span className="stage-card__steps">
            <strong>{stepsAll.length}</strong> step{stepsAll.length === 1 ? '' : 's'}
          </span>
          <div className="coverage">
            <div className="coverage__bar">
              {allRoles.map(r => (
                <span key={r.id} className={'coverage__cell' + (coveredRoles.has(r.id) ? ' is-on' : '')} />
              ))}
            </div>
            <span className="coverage__label">{coveredRoles.size}/{allRoles.length}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// —— Full Process Map (3 columns)
function MockProcessMap({ showHeader = true, showFilter = true }) {
  return (
    <div>
      {showHeader && <MockHeader />}
      {showFilter && <MockFilterBar />}
      <div className="page" style={{ padding: '32px 32px 40px' }}>
        <div className="page__eyebrow">Process Builder · 3 phases · {D.stages.length} stages</div>
        <h1 className="page__title" style={{ fontSize: 26 }}>The process, from inquiry to long tail.</h1>
        <p className="page__subtitle">
          Every stage of bringing an Inicio Press title to market, organized by phase. Click any stage to drill into its steps.
        </p>
        <div className="map-grid" style={{ gap: 16 }}>
          {D.phases.map(phase => {
            const phaseStages = D.stages.filter(s => s.phase === phase.id);
            const phaseVar = `var(--phase-${phase.color})`;
            return (
              <div className="map-col" key={phase.id} style={{ '--phase-c': phaseVar }}>
                <div className="map-col__head">
                  <div className="map-col__title">
                    <span className="map-col__rule" />
                    {phase.name}
                  </div>
                  <span className="map-col__count">{phaseStages.length} stages</span>
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)', marginBottom: 14, marginTop: -4 }}>
                  {phase.tagline}
                </div>
                <div className="map-col__list">
                  {phaseStages.map(s => <MockStageCard key={s.id} stage={s} />)}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// —— Step Detail (just the hero card + sidebar)
function MockStepDetail() {
  const step = D.steps.find(s => s.id === 's16');
  const stage = D.stages.find(s => s.id === step.stage);
  const phase = D.phases.find(p => p.id === stage.phase);
  const role = D.roles.find(r => r.id === step.role);
  const docs = D.linkedDocs[step.id] || [];

  return (
    <div>
      <MockHeader />
      <div className="step-page" style={{ padding: '24px 32px 40px', gridTemplateColumns: 'minmax(0, 1fr) 260px', gap: 32 }}>
        <div>
          <div className="crumbs">
            <a>Process Map</a>
            <span className="crumbs__sep">›</span>
            <a>{phase.name}</a>
            <span className="crumbs__sep">›</span>
            <a>{stage.name}</a>
            <span className="crumbs__sep">›</span>
            <span className="crumbs__current">Step {step.order}</span>
          </div>
          <div className="step-hero" style={{ marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <span className="phase-tag" style={{ '--phase-c': `var(--phase-${phase.color})` }}>{phase.name}</span>
              <span className="role-tag" style={{ '--role-c': role.color }}>
                <span className="role-tag__dot" /> {role.name}
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', letterSpacing: '0.06em' }}>
                STEP {String(step.order).padStart(2, '0')}
              </span>
            </div>
            <h1 className="step-hero__title" style={{ fontSize: 28, margin: '8px 0 12px' }}>{step.title}</h1>
            <div className="step-hero__meta" style={{ paddingBottom: 12, gap: 6 }}>
              <span className="vchip">Paperback</span>
              <span className="vchip">Ebook</span>
              <span className="vchip vchip--all">All tiers</span>
            </div>
          </div>
          <div className="prose" style={{ fontSize: 13.5, lineHeight: 1.6 }}>
            <h2 style={{ fontSize: 18, margin: '0 0 8px' }}>When this step starts</h2>
            <p>
              The manuscript has cleared developmental edit and the author has signed off on the chapter structure. We do <strong>not</strong> start cover work before that — too many last-minute cuts shift the spine width.
            </p>
            <h2 style={{ fontSize: 18, margin: '20px 0 8px' }}>Deliverables</h2>
            <p>Three distinct cover concepts, delivered as 1500×2400 JPEGs in a single Figma file:</p>
            <ul style={{ margin: '0 0 12px', paddingLeft: 20 }}>
              <li>A <strong>type-led</strong> concept (no imagery, all typographic mood)</li>
              <li>A <strong>photographic</strong> concept (licensed or commissioned)</li>
              <li>A <strong>conceptual</strong> concept (illustration or abstraction)</li>
            </ul>
            <blockquote style={{ margin: '12px 0', padding: '4px 14px', fontSize: 13.5 }}>
              The worst covers come from designers who tried to please. The best come from designers who made a confident call and let the author push back.
            </blockquote>
          </div>
        </div>
        <div>
          <div className="rail__title">Linked documents</div>
          {docs.map(d => (
            <div className="linked-card" key={d.id} style={{ padding: '8px 12px' }}>
              <div className="linked-card__type">
                <span>{d.icon}</span>
                <span>{d.type}</span>
              </div>
              <div className="linked-card__title" style={{ fontSize: 12.5 }}>{d.title}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// —— A miniature "step" card used inside Hero A's floating small frame
function MockMiniStep() {
  const step = D.steps.find(s => s.id === 's16');
  const role = D.roles.find(r => r.id === step.role);
  return (
    <div className="lp-mini-step">
      <div className="lp-mini-step__crumbs">PRODUCTION · STEP 04</div>
      <div className="lp-mini-step__title">{step.title}</div>
      <div className="lp-mini-step__meta">
        <span className="role-tag" style={{ '--role-c': role.color, fontSize: 11, padding: '2px 7px' }}>
          <span className="role-tag__dot" /> Cover Designer
        </span>
        <span className="vchip" style={{ fontSize: 10 }}>Paperback</span>
        <span className="vchip" style={{ fontSize: 10 }}>Ebook</span>
      </div>
      <div className="lp-mini-step__line" style={{ width: '100%' }} />
      <div className="lp-mini-step__line" style={{ width: '92%' }} />
      <div className="lp-mini-step__line" style={{ width: '78%' }} />
    </div>
  );
}

// Expose globally for landing.jsx
Object.assign(window, {
  MockHeader,
  MockFilterBar,
  MockStageCard,
  MockProcessMap,
  MockStepDetail,
  MockMiniStep,
});