// Shared chrome + utilities for all template detail pages
// Each template page imports these and supplies its own hero + 12 component previews.

function TplNav({ active = 'Templates' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 36px', borderBottom: '1px solid #d8d4c8', background: '#f6f4ef', color: '#1a1814', flex: '0 0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
        <div style={{ font: '600 16px IBM Plex Mono' }}>·stack.ai</div>
        <div style={{ display: 'flex', gap: 18, fontFamily: 'IBM Plex Mono', fontSize: 12, color: '#3a362d' }}>
          {['Examples','How it works','Architecture','Templates','Pricing','Trust'].map(n => (
            <span key={n} style={{ color: n === active ? '#1a1814' : '#6b6557', fontWeight: n === active ? 600 : 400, borderBottom: n === active ? '1.5px solid #1a1814' : 'none', paddingBottom: 4 }}>{n}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function TplBreadcrumb({ tplId }) {
  return (
    <div style={{ padding: '14px 36px', fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: '#6b6557', letterSpacing: '0.04em', background: '#f6f4ef', flex: '0 0 auto' }}>
      ustack / templates / <span style={{ color: '#1a1814' }}>{tplId}</span>
    </div>
  );
}

function TplFooter({ text }) {
  return (
    <div style={{ padding: '14px 36px', display: 'flex', justifyContent: 'space-between', fontFamily: 'IBM Plex Mono', fontSize: 10.5, color: '#6b6557', background: '#f6f4ef', flex: '0 0 auto', borderTop: '1px solid #d8d4c8' }}>
      <span>{text}</span>
      <span>terms · privacy · trust</span>
    </div>
  );
}

// Why-this-works · 3 columns
function TplWhy({ kicker = '// why this template wins', title, reasons }) {
  return (
    <div style={{ padding: '24px 36px', borderBottom: '1px solid #d8d4c8', background: '#f6f4ef', color: '#1a1814' }}>
      <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>{kicker}</div>
      {title && <h2 style={{ font: '500 26px "IBM Plex Serif", serif', letterSpacing: '-0.015em', marginTop: 2, marginBottom: 14 }}>{title}</h2>}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: title ? 0 : 14 }}>
        {reasons.map(([h, b], i) => (
          <div key={i}>
            <div style={{ font: '600 15px IBM Plex Sans', letterSpacing: '-0.005em' }}>{h}</div>
            <div style={{ fontSize: 13, color: '#3a362d', marginTop: 4, lineHeight: 1.5 }}>{b}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// In-production · 3 cards. Each card receives its own preview JSX as child.
function TplInProduction({ title = 'Three live demos run on this template.', items }) {
  return (
    <div style={{ padding: '28px 36px', borderBottom: '1px solid #d8d4c8', background: '#f6f4ef', color: '#1a1814' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// in production · today</div>
          <h2 style={{ font: '500 26px "IBM Plex Serif", serif', letterSpacing: '-0.015em', marginTop: 2 }}>{title}</h2>
        </div>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>open each ↗</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {items.map((it, i) => (
          <div key={i} style={{ background: '#fbfaf7', border: '1px solid #d8d4c8', borderRadius: 6, overflow: 'hidden' }}>
            <div style={{ position: 'relative', height: 180, overflow: 'hidden' }}>{it.preview}</div>
            <div style={{ padding: '14px 16px' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <span style={{ font: '700 15px IBM Plex Sans', letterSpacing: '-0.005em' }}>{it.name}</span>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#9a9382' }}>· {it.actors} actors</span>
              </div>
              <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#6b6557', letterSpacing: '0.04em', marginTop: 2, textTransform: 'uppercase' }}>{it.industry}</div>
              <div style={{ fontSize: 12, color: '#3a362d', marginTop: 6, lineHeight: 1.45 }}>{it.signature}</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, paddingTop: 8, borderTop: '1px solid #ecebe5' }}>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#6b6557' }}>{it.url}</span>
                <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, fontWeight: 600, color: it.accent || '#1a1814' }}>open ↗</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Tokens section
function TplTokens({ tokens, swatches }) {
  return (
    <div style={{ padding: '28px 36px', borderBottom: '1px solid #d8d4c8', background: '#f6f4ef', color: '#1a1814' }}>
      <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557', marginBottom: 12 }}>// design tokens · what makes it a system, not a one-off</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
        {tokens.map((t, i) => (
          <div key={i} style={{ padding: 12, background: '#fbfaf7', border: '1px solid #d8d4c8', borderRadius: 6 }}>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#9a9382' }}>{t.kind}</div>
            <div style={{ font: '600 13px IBM Plex Sans', marginTop: 4 }}>{t.v}</div>
            <div style={{ fontSize: 11, color: '#6b6557', marginTop: 3, lineHeight: 1.4 }}>{t.sub}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4 }}>
        {swatches.map(([l, c], i) => (
          <div key={i}>
            <div style={{ height: 36, background: c, border: '1px solid #d8d4c8' }} />
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: '#6b6557', marginTop: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{l}</div>
            <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 9, color: '#9a9382' }}>{c}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Final CTA
function TplCTA({ title, ctaColor, ctaLabel }) {
  return (
    <div style={{ padding: '24px 36px', borderBottom: '1px solid #d8d4c8', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, alignItems: 'center', background: '#f6f4ef', color: '#1a1814' }}>
      <div>
        <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// next</div>
        <div style={{ font: '500 22px "IBM Plex Serif", serif', letterSpacing: '-0.01em', marginTop: 4 }}>{title}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <span style={{ padding: '10px 14px', background: ctaColor, color: '#fff', textAlign: 'center', fontFamily: 'IBM Plex Mono', fontSize: 12, borderRadius: 4 }}>{ctaLabel}</span>
        <span style={{ padding: '10px 14px', border: '1px solid #d8d4c8', textAlign: 'center', fontFamily: 'IBM Plex Mono', fontSize: 12, borderRadius: 4 }}>← back to all templates</span>
      </div>
    </div>
  );
}

// Components-grid wrapper. Children = 12 ComponentCard JSX.
function TplComponentsGrid({ children, title = 'Every uStack app ships with these twelve. This template paints them all.' }) {
  return (
    <div style={{ padding: '28px 36px', background: '#f0eee9', borderBottom: '1px solid #d8d4c8', color: '#1a1814' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// design elements · the 12 components</div>
          <h2 style={{ font: '500 26px "IBM Plex Serif", serif', letterSpacing: '-0.015em', marginTop: 2 }}>{title}</h2>
        </div>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6b6557' }}>autobuild™ generates each one from your spec</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>{children}</div>
    </div>
  );
}

// Component card — wraps a single component preview with its title bar and frame
function TplCComp({ no, name, sub, children, bg }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', borderRadius: 6, border: '1px solid #d8d4c8', background: '#fbfaf7', overflow: 'hidden' }}>
      <div style={{ padding: '8px 12px', borderBottom: '1px solid #d8d4c8', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', background: '#f0eee9' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 10, color: '#9a9382', letterSpacing: '0.06em' }}>{no}</span>
          <span style={{ font: '600 12.5px IBM Plex Sans', letterSpacing: '-0.005em' }}>{name}</span>
        </div>
        <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, color: '#9a9382' }}>{sub}</span>
      </div>
      <div style={{ height: 200, position: 'relative', overflow: 'hidden', background: bg || '#fbfaf7' }}>{children}</div>
    </div>
  );
}

// Best-for pills row, used in hero
function TplBestForPills({ items }) {
  return (
    <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
      {items.map(t => (
        <span key={t} style={{ padding: '4px 10px', borderRadius: 4, background: '#fbfaf7', border: '1px solid #d8d4c8', fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#1a1814' }}>{t}</span>
      ))}
    </div>
  );
}

// Sample data referenced by all 5 detail pages
const TPL_SAMPLE = {
  brand: 'Cornerstone Capital',
  persona: 'Marcus Sterling',
  role: 'Lender admin',
  exposure: '$62.6M',
  released: '$127.8K',
  drawId: 'DRAW-2031',
  drawName: 'Riverline Plaza',
  amount: '$142,000',
  actors: [
    ['MS', 'Marcus Sterling', 'Lender admin',  '#2a5a9c'],
    ['AP', 'Aisha Patel',     'Loan officer',  '#7a4ac4'],
    ['DO', 'Diego Ortega',    'GC',            '#3a8a55'],
    ['TR', 'Tom Reyes',       'Subs',          '#7c5a20'],
    ['HM', 'Hank Mendez',     'Inspector',     '#a04030'],
    ['SK', 'Sarah Kim',       'Owner',         '#a05085'],
    ['PA', 'Pedro Alvarez',   'Finance',       '#c05a40'],
    ['JW', 'Janelle Wu',      'Auditor',       '#3a6a8a'],
  ],
  draws: [
    ['DRAW-2080','Southpark Retail',     '$165K','submitted'],
    ['DRAW-2060','Hawthorne Apartments', '$620K','in review'],
    ['DRAW-2055','Northgate Medical',    '$95K', 'in review'],
    ['DRAW-2050','Cypress Creek',        '$88K', 'correction'],
    ['DRAW-2088','Greenfield Townhomes', '$92K', 'approved'],
  ],
  audit: [
    ['18:37','packet generated','M. Sterling',false],
    ['18:21','waiver expired',  'Northwind',  true],
    ['18:14','draw released',   'P. Alvarez', false],
    ['17:58','inspection flag', 'H. Mendez',  true],
    ['17:42','submission',      'D. Ortega',  false],
  ],
};

Object.assign(window, {
  TplNav, TplBreadcrumb, TplFooter, TplWhy, TplInProduction,
  TplTokens, TplCTA, TplComponentsGrid, TplCComp, TplBestForPills,
  TPL_SAMPLE,
});