// Template × Demo mapping page
// All 13 demos × 6 templates, showing the default assignment + rationale.

const DEMO_MAPPING = [
  { id: 'drawrequest', name: 'DrawRequest', industry: 'Construction draws',     actors: 8, screens: 13, default: 'floorplan',   alt: ['technical','controlroom'] },
  { id: 'inspectkit',  name: 'InspectKit',  industry: 'Field inspections',      actors: 7, screens: 13, default: 'floorplan',   alt: ['technical'] },
  { id: 'auditfield',  name: 'AuditField',  industry: 'Audit fieldwork',        actors: 7, screens: 13, default: 'floorplan',   alt: ['editorial','atelier'] },
  { id: 'venueflow',   name: 'VenueFlow',   industry: 'Event venues',           actors: 7, screens: 14, default: 'atelier',     alt: ['pastoral'] },
  { id: 'policydesk',  name: 'PolicyDesk',  industry: 'Policy + attestation',    actors: 7, screens: 12, default: 'atelier',     alt: ['editorial'] },
  { id: 'grantcycle',  name: 'GrantCycle',  industry: 'Grant lifecycle',         actors: 7, screens: 13, default: 'atelier',     alt: ['editorial','pastoral'] },
  { id: 'dispatchhq',  name: 'DispatchHQ',  industry: 'Trades dispatch',         actors: 7, screens: 13, default: 'controlroom', alt: ['floorplan','pastoral'] },
  { id: 'jobshop',     name: 'JobShop OS',  industry: 'Small manufacturing',     actors: 8, screens: 14, default: 'technical',   alt: ['controlroom'] },
  { id: 'punchops',    name: 'PunchOps',    industry: 'Punch list + QA',          actors: 7, screens: 13, default: 'technical',   alt: ['floorplan'] },
  { id: 'clienthub',   name: 'ClientHub',   industry: 'Agency client portal',     actors: 7, screens: 13, default: 'editorial',   alt: ['pastoral','atelier'] },
  { id: 'rfproom',     name: 'RFPRoom',     industry: 'RFP responses',            actors: 7, screens: 13, default: 'editorial',   alt: ['atelier'] },
  { id: 'campaigngate',name: 'CampaignGate',industry: 'Marketing approval',       actors: 7, screens: 13, default: 'editorial',   alt: ['atelier'] },
  { id: 'kitchenops',  name: 'KitchenOps',  industry: 'Restaurant operations',    actors: 7, screens: 14, default: 'pastoral',    alt: ['atelier','controlroom'] },
];

const TPL_COLOR = {
  floorplan:   { accent: 'oklch(0.50 0.18 30)',  bg: '#f6f1e8',  fg: '#1a1d20' },
  atelier:     { accent: '#1a3d5c',              bg: '#efe5d2',  fg: '#1b1916' },
  controlroom: { accent: 'oklch(0.82 0.20 145)', bg: '#0a0c0d',  fg: '#d7dde6', dark: true },
  technical:   { accent: '#0a0a0a',              bg: '#fafaf6',  fg: '#0a0a0a' },
  editorial:   { accent: '#9a2828',              bg: '#fbf8f1',  fg: '#1a1814' },
  pastoral:    { accent: '#5a7a4a',              bg: '#f6f1e6',  fg: '#2a2620' },
};

function TplPill({ id, large }) {
  if (!id) return null;
  const c = TPL_COLOR[id];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: large ? '4px 10px' : '2px 8px',
      borderRadius: 4,
      background: c.bg,
      color: c.fg,
      border: `1px solid ${c.dark ? '#232830' : '#d8d4c8'}`,
      font: `${large ? 600 : 500} ${large ? 12 : 11}px IBM Plex Mono, monospace`,
      letterSpacing: '0.02em',
    }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.accent, boxShadow: c.dark ? `0 0 6px ${c.accent}` : 'none' }} />
      {id}
    </span>
  );
}

// Rationale for each default pairing — for the table
const RATIONALE = {
  drawrequest: 'Multi-party handoff is the entire workflow. The floorplan visualizes it natively.',
  inspectkit:  'Pins on a building plan + station-shaped findings. The literal floor IS the home.',
  auditfield:  'PBC requests handed off between staff, manager, partner — handoff visualization wins.',
  venueflow:   'The BEO is the marquee document; couples and coordinators sign the paper.',
  policydesk:  'Policies are documents. Attestation chains live in the margins of the page.',
  grantcycle:  'Applications, LOIs, awards — every artifact is a paper document with stamps.',
  dispatchhq:  '24/7 ops. Live dispatch board · tech×schedule · SLA timers. Operator console wins.',
  jobshop:     'Machine routing + dimensional tolerances. Engineering drawing is the native language.',
  punchops:    'Construction QA. Unit-level checklists with measurements and trade callouts.',
  clienthub:   'A client-facing portal that reads like a quarterly. Calm, sophisticated, prestige.',
  rfproom:     'Long-form question/answer with reviewer chains. Editorial column layout is built for this.',
  campaigngate:'Creative review needs a measured, calm voice — and lots of body copy reading space.',
  kitchenops:  '"Good evening, chef" energy. Recipes, plate cards, friendly serifs match the food.',
};

function TemplatesMapping() {
  // Group by template for the top summary
  const groups = {};
  DEMO_MAPPING.forEach(d => { (groups[d.default] = groups[d.default] || []).push(d); });

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f6f4ef', overflow: 'auto', fontFamily: 'IBM Plex Sans, system-ui', color: '#1a1814' }}>
      {/* Nav (compact) */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 36px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
          <div style={{ font: '600 16px IBM Plex Mono' }}>·stack.ai</div>
          <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 12, color: '#6b6557' }}>ustack / templates / <span style={{ color: '#1a1814' }}>map</span></div>
        </div>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>internal · v1 build mapping</span>
      </div>

      {/* Hero */}
      <div style={{ padding: '24px 36px 24px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// template × demo · default assignments</div>
        <h1 style={{ font: '500 36px "IBM Plex Serif", serif', letterSpacing: '-0.02em', lineHeight: 1.1, marginTop: 8, maxWidth: 880 }}>
          Six templates. Thirteen apps. Each demo has one default and one or two fallbacks.
        </h1>
        <div style={{ marginTop: 10, fontSize: 13.5, color: '#3a362d', maxWidth: 720, lineHeight: 1.55 }}>
          The customer always gets the final say in the questionnaire. This is the seed: when someone types "I run a wedding venue," we propose <b>Atelier</b>. When they say "construction draw management," we propose <b>Floorplan</b>. The agent picks; the customer overrides if they want.
        </div>
      </div>

      {/* Summary by template */}
      <div style={{ padding: '24px 36px', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557', marginBottom: 14 }}>// load distribution · 13 demos · 6 templates</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14 }}>
          {Object.entries(TPL_COLOR).map(([id, c]) => {
            const matches = groups[id] || [];
            return (
              <div key={id} style={{
                background: c.bg, color: c.fg,
                padding: 14, borderRadius: 6,
                border: `1px solid ${c.dark ? '#232830' : '#d8d4c8'}`,
                display: 'flex', flexDirection: 'column', gap: 6, minHeight: 130,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ font: '700 14px IBM Plex Sans', textTransform: 'capitalize', color: c.dark ? '#fff' : c.accent }}>{id}</span>
                  <span style={{ font: '600 24px IBM Plex Mono', color: c.dark ? c.accent : c.fg, opacity: c.dark ? 1 : 0.85, textShadow: c.dark ? `0 0 8px ${c.accent}50` : 'none' }}>{String(matches.length).padStart(2, '0')}</span>
                </div>
                <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, opacity: 0.65 }}>default for</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {matches.map(m => (
                    <div key={m.id} style={{ fontSize: 11.5, lineHeight: 1.3 }}>· {m.name}</div>
                  ))}
                  {matches.length === 0 && <div style={{ fontSize: 11, fontStyle: 'italic', opacity: 0.5 }}>(none — fallback only)</div>}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* The mapping table — 13 demos */}
      <div style={{ padding: '24px 36px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// each demo · default + alternates · rationale</div>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>13 of 13 covered</span>
        </div>

        <div style={{ background: '#fbfaf7', border: '1px solid #d8d4c8', borderRadius: 6, overflow: 'hidden' }}>
          {/* Header */}
          <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr 160px 200px 1fr', borderBottom: '1px solid #d8d4c8', padding: '10px 18px', background: '#f0eee9', fontFamily: 'IBM Plex Mono', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#6b6557' }}>
            <span>Demo</span>
            <span>Industry · actors · screens</span>
            <span>Default template</span>
            <span>Alternates</span>
            <span>Why this pairing</span>
          </div>
          {DEMO_MAPPING.map((d, i) => (
            <div key={d.id} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 160px 200px 1fr', padding: '12px 18px', borderBottom: i === DEMO_MAPPING.length - 1 ? 0 : '1px solid #ecebe5', alignItems: 'center', fontSize: 12.5, color: '#1a1814' }}>
              <span style={{ fontWeight: 600, fontFamily: 'IBM Plex Sans' }}>{d.name}</span>
              <span style={{ color: '#3a362d' }}>
                {d.industry}
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: '#9a9382', marginLeft: 8 }}>· {d.actors} actors · {d.screens} screens</span>
              </span>
              <span><TplPill id={d.default} large /></span>
              <span style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>{d.alt.map(a => <TplPill key={a} id={a} />)}</span>
              <span style={{ color: '#3a362d', lineHeight: 1.45, fontSize: 12 }}>{RATIONALE[d.id]}</span>
            </div>
          ))}
        </div>

        {/* Legend */}
        <div style={{ marginTop: 18, padding: '12px 16px', border: '1px dashed #c8c3b3', borderRadius: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>
            // <b style={{ color: '#1a1814' }}>default</b> = what the agent proposes &nbsp;·&nbsp; <b style={{ color: '#1a1814' }}>alternates</b> = shown in the questionnaire if the customer expands "see other looks"
          </span>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#9a2828' }}>customer always wins · template is a setting</span>
        </div>
      </div>
    </div>
  );
}

window.TemplatesMapping = TemplatesMapping;
window.DEMO_MAPPING = DEMO_MAPPING;
window.TPL_COLOR = TPL_COLOR;
window.TplPill = TplPill;