// Template detail page — PASTORAL (calm · cream + sage · friendly serif)

const PS_DET = {
  bg:     '#f6f1e6',
  bg2:    '#efe9d6',
  card:   '#fbf7eb',
  ink:    '#2a2620',
  ink2:   '#5a5346',
  dim:    '#7a7064',
  line:   '#e6dfcd',
  accent: '#5a7a4a',
  warn:   '#a04030',
  serif:  'Lora, "Crimson Text", "IBM Plex Serif", Georgia, serif',
  sans:   'IBM Plex Sans, system-ui, sans-serif',
  mono:   'IBM Plex Mono, monospace',
};
const P = PS_DET;
const pUpper = { fontFamily: P.sans, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: P.dim };

function PSC01_Shell() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, color: P.ink, padding: '12px 16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontFamily: P.serif, fontSize: 18, letterSpacing: '-0.005em' }}>DrawRequest</div>
        <div style={{ width: 28, height: 28, borderRadius: '50%', background: P.accent, color: P.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontSize: 12 }}>MS</div>
      </div>
      <div style={{ display: 'flex', gap: 16, marginTop: 14 }}>
        {['Today','Portfolio','Draws','Drafts','Recent'].map((n, i) => (
          <span key={n} style={{ fontFamily: P.serif, fontSize: 13.5, color: i === 0 ? P.ink : P.dim, fontStyle: i === 0 ? 'italic' : 'normal' }}>{n}</span>
        ))}
      </div>
      <div style={{ marginTop: 14, padding: 10, background: P.card, borderRadius: 14, border: '1px solid ' + P.line }}>
        <div style={pUpper}>Friday afternoon</div>
        <div style={{ fontFamily: P.serif, fontSize: 14, lineHeight: 1.1, marginTop: 2 }}>Five things await you.</div>
      </div>
    </div>
  );
}
function PSC02_Signin() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
      <div style={{ width: 240, padding: 18, background: P.card, borderRadius: 18, border: '1px solid ' + P.line, boxShadow: '0 12px 28px rgba(0,0,0,0.06)' }}>
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: P.accent, color: P.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontSize: 16, margin: '0 auto' }}>D</div>
        <div style={{ fontFamily: P.serif, fontSize: 16, textAlign: 'center', marginTop: 8, letterSpacing: '-0.005em' }}>Welcome back.</div>
        <div style={{ fontFamily: P.serif, fontSize: 12, fontStyle: 'italic', color: P.dim, textAlign: 'center', marginTop: 2 }}>We'll email you a sign-in link.</div>
        <div style={{ marginTop: 14, padding: '8px 12px', borderRadius: 10, background: P.bg, border: '1px solid ' + P.line, fontFamily: P.sans, fontSize: 11.5, color: P.ink2 }}>marcus@cornerstone.cap</div>
        <div style={{ marginTop: 8, padding: '9px 12px', borderRadius: 10, background: P.accent, color: P.bg, textAlign: 'center', fontFamily: P.serif, fontSize: 13 }}>Send me the link</div>
      </div>
    </div>
  );
}
function PSC03_Actors() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 12, color: P.ink }}>
      <div style={pUpper}>The people in this app</div>
      <div style={{ fontFamily: P.serif, fontSize: 14, marginTop: 2, fontStyle: 'italic', color: P.dim }}>Tap to act as someone else</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginTop: 10 }}>
        {TPL_SAMPLE.actors.slice(0, 6).map((a, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 8, borderRadius: 12, background: i === 0 ? P.card : 'transparent', border: '1px solid ' + (i === 0 ? P.accent : P.line) }}>
            <div style={{ width: 28, height: 28, borderRadius: '50%', background: a[3], color: P.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontSize: 12 }}>{a[0]}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: P.serif, fontSize: 12.5, lineHeight: 1.1 }}>{a[1].split(' ')[0]}</div>
              <div style={{ fontFamily: P.sans, fontSize: 10, color: P.dim }}>{a[2]}</div>
            </div>
            {i === 0 && <div style={{ width: 6, height: 6, borderRadius: '50%', background: P.accent }} />}
          </div>
        ))}
      </div>
    </div>
  );
}
function PSC04_Home() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 14, color: P.ink }}>
      <div style={pUpper}>Friday afternoon · May 15</div>
      <div style={{ fontFamily: P.serif, fontSize: 22, lineHeight: 1.1, marginTop: 4 }}>Good afternoon, Marcus.</div>
      <div style={{ fontFamily: P.serif, fontSize: 18, fontStyle: 'italic', color: P.accent, marginTop: 2 }}>Five things are waiting for you.</div>
      <div style={{ marginTop: 12, padding: 10, background: P.card, borderRadius: 14, border: '1px solid ' + P.line }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={pUpper}>A small approval</span>
          <span style={{ fontFamily: P.sans, fontSize: 10, color: P.dim }}>now</span>
        </div>
        <div style={{ fontFamily: P.serif, fontSize: 14, marginTop: 2, letterSpacing: '-0.005em' }}>DRAW-2055 · Northgate Medical</div>
        <div style={{ fontFamily: P.serif, fontSize: 11.5, color: P.ink2, fontStyle: 'italic', marginTop: 2 }}>Inspector cleared. $95K, variance under 1%.</div>
      </div>
    </div>
  );
}
function PSC05_List() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 12, color: P.ink }}>
      <div style={pUpper}>Open draws · 8 in flight</div>
      <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {TPL_SAMPLE.draws.map((d, i) => (
          <div key={i} style={{ padding: '8px 12px', background: P.card, borderRadius: 12, border: '1px solid ' + P.line, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: d[3] === 'correction' ? P.warn : P.accent }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: P.serif, fontSize: 12.5, letterSpacing: '-0.005em' }}>{d[1]}</div>
              <div style={{ fontFamily: P.sans, fontSize: 10, color: P.dim }}>{d[0]} · {d[3]}</div>
            </div>
            <span style={{ fontFamily: P.serif, fontSize: 13 }}>{d[2]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
function PSC06_Detail() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 14, color: P.ink }}>
      <div style={pUpper}>This week's draw</div>
      <div style={{ fontFamily: P.serif, fontSize: 22, lineHeight: 1.05, marginTop: 4 }}>Riverline Plaza<br/><span style={{ fontStyle: 'italic', color: P.accent }}>Application 7</span></div>
      <div style={{ marginTop: 12, padding: 12, background: P.card, borderRadius: 14, border: '1px solid ' + P.line }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span style={pUpper}>Requested</span><span style={pUpper}>Net release</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 2 }}>
          <span style={{ fontFamily: P.serif, fontSize: 22 }}>$142,000</span>
          <span style={{ fontFamily: P.serif, fontSize: 22, color: P.accent }}>$127,800</span>
        </div>
        <div style={{ marginTop: 8, height: 6, background: P.line, borderRadius: 99, overflow: 'hidden' }}><div style={{ height: '100%', width: '76%', background: P.accent }} /></div>
        <div style={{ fontFamily: P.serif, fontSize: 11.5, fontStyle: 'italic', color: P.dim, marginTop: 6 }}>76% complete · 5 of 5 waivers · 1 variance noted</div>
      </div>
    </div>
  );
}
function PSC07_Form() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 14, color: P.ink }}>
      <div style={pUpper}>Step 3 of 5</div>
      <div style={{ fontFamily: P.serif, fontSize: 18, marginTop: 2, letterSpacing: '-0.005em' }}>Schedule of values</div>
      <div style={{ fontFamily: P.serif, fontSize: 12.5, fontStyle: 'italic', color: P.dim, marginTop: 2 }}>Add the lines you're billing this period. We'll handle retainage.</div>
      <div style={{ marginTop: 10, display: 'flex', gap: 4 }}>
        {[1,2,3,4,5].map(i => <div key={i} style={{ flex: 1, height: 4, borderRadius: 4, background: i <= 3 ? P.accent : P.line }} />)}
      </div>
      <div style={{ marginTop: 12, padding: 10, background: P.card, borderRadius: 12, border: '1px solid ' + P.line }}>
        {[['03','Concrete','$ 18,400'],['04','Masonry','$ 22,800'],['05','Structural steel','$ 31,200']].map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 80px', gap: 8, padding: '4px 0', borderBottom: i === 2 ? 'none' : '1px solid ' + P.line, fontFamily: P.serif, fontSize: 12 }}>
            <span style={{ color: P.dim }}>{r[0]}</span><span>{r[1]}</span><span style={{ textAlign: 'right' }}>{r[2]}</span>
          </div>
        ))}
      </div>
      <div style={{ position: 'absolute', bottom: 12, right: 14, padding: '6px 14px', borderRadius: 99, background: P.accent, color: P.bg, fontFamily: P.serif, fontSize: 12 }}>Next →</div>
    </div>
  );
}
function PSC08_Workflow() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 14, color: P.ink }}>
      <div style={pUpper}>How this draw moves</div>
      <div style={{ fontFamily: P.serif, fontSize: 14, fontStyle: 'italic', color: P.dim, marginTop: 2 }}>Three people have signed; two to go.</div>
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[['Diego','Contractor','signed', true],['Hank','Inspector','verified', true],['Aisha','Loan officer','approved', true],['Sarah','Owner','waiting on you', false],['Pedro','Finance','—', false]].map(([n, role, st, done], i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', background: done ? P.accent : P.bg2, color: done ? P.bg : P.dim, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontSize: 11 }}>{done ? '✓' : (i + 1)}</span>
            <div style={{ flex: 1, fontFamily: P.serif, fontSize: 12.5, color: done ? P.ink : P.dim }}>{n} <span style={{ color: P.dim, fontStyle: 'italic' }}>· {role}</span></div>
            <div style={{ fontFamily: P.serif, fontSize: 11, fontStyle: 'italic', color: done ? P.accent : P.warn }}>{st}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
function PSC09_Audit() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 14, color: P.ink }}>
      <div style={pUpper}>Recent activity</div>
      <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {TPL_SAMPLE.audit.map((a, i) => (
          <div key={i} style={{ paddingBottom: 6, borderBottom: i === 4 ? 'none' : '1px solid ' + P.line }}>
            <div style={{ fontFamily: P.sans, fontSize: 10, color: P.dim }}>{a[0]}</div>
            <div style={{ fontFamily: P.serif, fontSize: 13, marginTop: 1, lineHeight: 1.3 }}>{a[1]} <span style={{ color: P.dim, fontStyle: 'italic' }}>· {a[2]}</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}
function PSC10_Output() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 12, color: P.ink }}>
      <div style={pUpper}>Ready to share · the packet</div>
      <div style={{ marginTop: 6, height: 152, borderRadius: 12, background: P.card, border: '1px solid ' + P.line, padding: '10px 14px', boxShadow: '0 6px 16px rgba(0,0,0,0.06)', position: 'relative' }}>
        <div style={{ textAlign: 'center', fontFamily: P.sans, fontSize: 8, letterSpacing: '0.14em', color: P.dim, textTransform: 'uppercase' }}>G702 · Application 07</div>
        <div style={{ fontFamily: P.serif, fontSize: 17, textAlign: 'center', marginTop: 4, letterSpacing: '-0.005em' }}>Riverline Plaza</div>
        <div style={{ fontFamily: P.serif, fontSize: 22, textAlign: 'center', color: P.accent, marginTop: 4 }}>$142,000</div>
        <div style={{ marginTop: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
          {[100, 92, 78, 85].map((v, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: P.sans, fontSize: 9 }}>
              <span style={{ width: 12, color: P.dim }}>0{i + 1}</span>
              <div style={{ flex: 1, height: 3, background: P.line, borderRadius: 99 }}><div style={{ height: '100%', width: v + '%', background: P.accent, borderRadius: 99 }} /></div>
              <span style={{ width: 22, textAlign: 'right' }}>{v}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
function PSC11_Settings() {
  const roles = ['Admin','Loan','GC','Sub','Inspector','Owner'];
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, padding: 12, color: P.ink }}>
      <div style={pUpper}>Who can do what</div>
      <div style={{ fontFamily: P.serif, fontSize: 12, fontStyle: 'italic', color: P.dim, marginTop: 2 }}>Adjust permissions any time.</div>
      <div style={{ marginTop: 8, padding: 8, background: P.card, borderRadius: 12, border: '1px solid ' + P.line }}>
        <div style={{ display: 'grid', gridTemplateColumns: '80px repeat(4, 1fr)', padding: '3px 6px', fontFamily: P.sans, fontSize: 9, color: P.dim, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          <span>Role</span>{['read','submit','approve','release'].map(p => <span key={p} style={{ textAlign: 'center' }}>{p}</span>)}
        </div>
        {roles.map((r, i) => (
          <div key={r} style={{ display: 'grid', gridTemplateColumns: '80px repeat(4, 1fr)', padding: '3px 6px', borderTop: '1px solid ' + P.line, fontFamily: P.serif, fontSize: 11, alignItems: 'center' }}>
            <span>{r}</span>
            {[0,1,2,3].map(j => {
              const g = (i === 0) || (j === 0) || (i < 3 && j < 3) || (i === 5 && j === 3);
              return <span key={j} style={{ textAlign: 'center', color: g ? P.accent : P.line, fontSize: 14 }}>{g ? '●' : '○'}</span>;
            })}
          </div>
        ))}
      </div>
    </div>
  );
}
function PSC12_Empty() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: P.bg, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 18, textAlign: 'center', color: P.ink }}>
      <div style={{ width: 64, height: 64, borderRadius: '50%', background: P.card, border: '1px dashed ' + P.line, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontSize: 28, color: P.dim }}>·</div>
      <div style={{ fontFamily: P.serif, fontSize: 18, marginTop: 12, letterSpacing: '-0.005em' }}>Nothing here yet.</div>
      <div style={{ fontFamily: P.serif, fontSize: 12.5, fontStyle: 'italic', color: P.dim, marginTop: 4, maxWidth: 240 }}>Invite a contractor and your first draw will land here. Take your time.</div>
      <span style={{ marginTop: 12, padding: '7px 16px', borderRadius: 99, background: P.accent, color: P.bg, fontFamily: P.serif, fontSize: 12.5 }}>Invite a contractor</span>
    </div>
  );
}

function TemplateDetailPastoral() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#f6f4ef', overflow: 'auto', fontFamily: 'IBM Plex Sans, system-ui', color: '#1a1814' }}>
      <TplNav />
      <TplBreadcrumb tplId="pastoral" />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', borderBottom: '1px solid #d8d4c8' }}>
        <div style={{ padding: '20px 36px 32px', borderRight: '1px solid #d8d4c8' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontFamily: P.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#6b6557' }}>// 06 of 06 · template</span>
            <span style={{ padding: '2px 8px', borderRadius: 99, background: '#fbfaf7', border: '1px solid #d8d4c8', fontFamily: P.mono, fontSize: 10, color: P.accent, display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, borderRadius: '50%', background: P.accent }} /> emotional range</span>
          </div>
          <h1 style={{ fontFamily: P.serif, fontSize: 64, letterSpacing: '-0.025em', lineHeight: 1, marginTop: 12, fontWeight: 500 }}>Pastoral.</h1>
          <div style={{ fontFamily: P.serif, fontSize: 22, fontStyle: 'italic', color: '#6b6557', marginTop: 6, lineHeight: 1.2 }}>"Good afternoon. Five things are waiting for you."</div>
          <p style={{ marginTop: 16, fontSize: 14.5, lineHeight: 1.55, color: '#3a362d', maxWidth: 540 }}>
            Pastoral is the soft side of uStack. Cream paper, sage accents, friendly Lora serifs, generous breathing space, 16px radii on every card. The dashboard greets the user by name, by time of day, by what's actually waiting.
            Operational software that doesn't shout. Built for venues, restaurants, agencies, coordinators — anyone whose business is hospitality, care, or attention.
          </p>
          <TplBestForPills items={['KitchenOps', 'VenueFlow (alt)', 'GrantCycle (alt)', 'ClientHub (alt)']} />
        </div>
        <div style={{ padding: '18px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#f0eee9' }}>
          <div style={{ width: '100%', height: 380, borderRadius: 16, overflow: 'hidden', background: P.bg, boxShadow: '0 16px 44px rgba(28,24,16,0.10)', position: 'relative', padding: '22px 26px', color: P.ink }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
              <div>
                <div style={pUpper}>Friday afternoon · May 15</div>
                <div style={{ fontFamily: P.serif, fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.01em', marginTop: 6 }}>Good afternoon, Marcus.</div>
                <div style={{ fontFamily: P.serif, fontSize: 22, fontStyle: 'italic', color: P.accent, marginTop: 4 }}>Five things are waiting for you.</div>
              </div>
              <div style={{ width: 52, height: 52, borderRadius: '50%', background: P.accent, color: P.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: P.serif, fontSize: 20 }}>MS</div>
            </div>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { kind: 'A small approval',   what: 'DRAW-2055 · Northgate Medical', sub: 'Inspector cleared. $95K, variance under 1%. Should take a minute.', color: P.accent, when: 'now' },
                { kind: 'A larger one',       what: 'DRAW-2060 · Hawthorne · $620K',  sub: 'Above your matrix threshold. Aisha noted you wanted to see this.', color: P.accent, when: 'today' },
                { kind: 'A gentle ask',       what: 'Northwind waiver · 65 days',     sub: "Worth a call before Friday — it's blocking 2070 right now.", color: P.warn,   when: '< 4h' },
              ].map((c, i) => (
                <div key={i} style={{ padding: '12px 14px', background: P.card, border: '1px solid ' + P.line, borderRadius: 14, display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.color, marginTop: 8, flex: '0 0 auto' }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: P.sans, fontSize: 10.5, letterSpacing: '0.04em', textTransform: 'uppercase', color: P.dim }}>{c.kind}</div>
                    <div style={{ fontFamily: P.serif, fontSize: 15, marginTop: 1, letterSpacing: '-0.005em' }}>{c.what}</div>
                    <div style={{ fontFamily: P.serif, fontSize: 12, color: P.ink2, fontStyle: 'italic', marginTop: 3 }}>{c.sub}</div>
                  </div>
                  <span style={{ fontFamily: P.sans, fontSize: 10.5, color: c.color, alignSelf: 'center', whiteSpace: 'nowrap' }}>{c.when} →</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <TplWhy title="Software that respects the person looking at it." reasons={[
        ['Operators are people, not pilots.', 'Coordinators, GMs, owners spend their day caring for clients. The software should care for them — by name, by time, by mood.'],
        ['Generous space lowers the heart rate.','16px radii, soft borders, breathing room, friendly serifs — every micro-choice nudges the page from "operational" to "human."'],
        ['Sage is a quiet color.',          'Accents appear only when something genuinely needs your eyes. The signal lands because it is rare.'],
      ]} />

      <TplInProduction items={[
        { name: 'KitchenOps', industry: 'Restaurant operations', url: 'kitchenops.ustack.ai', actors: 7, signature: 'Plate cost as a card · prep as a list · waste log in margins', accent: P.accent,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: P.bg, color: P.ink, padding: 14 }}>
              <div style={pUpper}>Friday · service in 6h</div>
              <div style={{ fontFamily: P.serif, fontSize: 18, marginTop: 4 }}>Good afternoon, Chef.</div>
              <div style={{ fontFamily: P.serif, fontSize: 14, fontStyle: 'italic', color: P.accent, marginTop: 2 }}>Three things on the prep list need your eyes.</div>
              <div style={{ marginTop: 8, padding: 8, background: P.card, borderRadius: 10, border: '1px solid ' + P.line }}>
                <div style={{ fontFamily: P.sans, fontSize: 9, color: P.dim, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Lamb shank · plate cost</div>
                <div style={{ fontFamily: P.serif, fontSize: 13, marginTop: 1 }}>$ 11.40 · 30.1%</div>
              </div>
            </div>
          ) },
        { name: 'VenueFlow',  industry: 'Event venues · alt',      url: 'venueflow.ustack.ai',  actors: 7, signature: 'Day-of run-of-show · gentle reminders · couple-facing portal', accent: P.accent,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: P.bg, color: P.ink, padding: 14 }}>
              <div style={pUpper}>Saturday · June 22</div>
              <div style={{ fontFamily: P.serif, fontSize: 18, marginTop: 4 }}>Whitfield &amp; Choi</div>
              <div style={{ fontFamily: P.serif, fontSize: 14, fontStyle: 'italic', color: P.accent, marginTop: 2 }}>187 guests · seated dinner · the Alder Barn</div>
              <div style={{ marginTop: 8, padding: 8, background: P.card, borderRadius: 10, border: '1px solid ' + P.line, fontFamily: P.serif, fontSize: 11, fontStyle: 'italic', color: P.ink2 }}>"Floral mock-up Tuesday · Dana wants cream + sage."</div>
            </div>
          ) },
        { name: 'GrantCycle', industry: 'Grant lifecycle · alt',   url: 'grantcycle.ustack.ai', actors: 7, signature: 'Applicants treated kindly · reviewer reminders · grantee portal', accent: P.accent,
          preview: (
            <div style={{ position: 'absolute', inset: 0, background: P.bg, color: P.ink, padding: 14 }}>
              <div style={pUpper}>Hallowell Foundation</div>
              <div style={{ fontFamily: P.serif, fontSize: 17, marginTop: 4, lineHeight: 1.1 }}>Good afternoon, Program Officer.</div>
              <div style={{ fontFamily: P.serif, fontSize: 13, fontStyle: 'italic', color: P.accent, marginTop: 2 }}>14 applications in review. 3 ready to award.</div>
              <div style={{ marginTop: 8, padding: 8, background: P.card, borderRadius: 10, border: '1px solid ' + P.line, fontFamily: P.serif, fontSize: 12 }}>
                Riverside Youth Coalition<br/><span style={{ fontStyle: 'italic', color: P.dim, fontSize: 10.5 }}>$ 120,000 over 18 months</span>
              </div>
            </div>
          ) },
      ]} />

      <TplComponentsGrid title="Twelve canonical components — every one breathing easy.">
        <TplCComp no="01" name="App shell"        sub="warm header · gentle nav">    <PSC01_Shell /></TplCComp>
        <TplCComp no="02" name="Sign-in"          sub="welcome back">                 <PSC02_Signin /></TplCComp>
        <TplCComp no="03" name="Persona switcher" sub="the people in this app">       <PSC03_Actors /></TplCComp>
        <TplCComp no="04" name="Home · dashboard" sub="good-afternoon screen">         <PSC04_Home /></TplCComp>
        <TplCComp no="05" name="Object list"      sub="soft cards · small dots">       <PSC05_List /></TplCComp>
        <TplCComp no="06" name="Object detail"    sub="this week's draw">              <PSC06_Detail /></TplCComp>
        <TplCComp no="07" name="Form · multi-step"sub="kind progression">              <PSC07_Form /></TplCComp>
        <TplCComp no="08" name="Workflow chain"   sub="how this draw moves">           <PSC08_Workflow /></TplCComp>
        <TplCComp no="09" name="Audit feed"       sub="recent activity">               <PSC09_Audit /></TplCComp>
        <TplCComp no="10" name="Generated output" sub="ready to share">                 <PSC10_Output /></TplCComp>
        <TplCComp no="11" name="Settings · admin" sub="who can do what">                <PSC11_Settings /></TplCComp>
        <TplCComp no="12" name="Empty state"      sub="take your time">                 <PSC12_Empty /></TplCComp>
      </TplComponentsGrid>

      <TplTokens
        tokens={[
          { kind: 'TYPE',     v: 'Lora + IBM Plex Sans + Mono', sub: 'friendly serif body · sans for labels · mono for time' },
          { kind: 'COLOR',    v: 'Cream + sage + soft warn',    sub: 'one quiet accent · warm grays · low contrast' },
          { kind: 'DENSITY',  v: 'Generous · breathing',         sub: '16px radii · soft borders · whitespace' },
          { kind: 'CHROME',   v: 'Rounded cards · soft dots',    sub: 'no harsh rules · no sharp corners' },
          { kind: 'TONE',     v: 'Calm · approachable · kind',   sub: 'Things · Notion · Craft energy' },
        ]}
        swatches={[
          ['cream',  P.bg],
          ['cream-2',P.bg2],
          ['card',   P.card],
          ['sage',   P.accent],
          ['warn',   P.warn],
        ]}
      />

      <TplCTA title="Build your app in Pastoral, or browse the other five." ctaColor={P.accent} ctaLabel="Build in Pastoral →" />
      <TplFooter text="© 2026 ustack · pastoral template · all 12 components live" />
    </div>
  );
}

window.TemplateDetailPastoral = TemplateDetailPastoral;