// hf-all.jsx — Single-IIFE combined hf-kit + all 9 category templates.
// Avoids Babel async src-script ordering issues by keeping everything in one scope.
// Exports to window: HMark, HLogo, HBadge, HLines, HField, HSection, HStats,
//   HColorRow, HTable, HChart, HProgRow, HDoc, HDeck, HDeckBody, HSwot, HLane,
//   HB_BRAND, HB_SALES, HB_STRAT, HB_PROD, HB_OPS, HB_HR, HB_FIN, HB_CS, HB_EXEC.

(function () {

  // ════════════════════════════════════════════════════════════════
  // KIT — Hi-fidelity Tatava-branded document primitives
  // ════════════════════════════════════════════════════════════════

  if (!document.getElementById('hf-styles')) {
    const s = document.createElement('style');
    s.id = 'hf-styles';
    s.textContent = `
.hf{font-family:'Open Sans',system-ui,sans-serif;height:100%;width:100%;position:relative;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;-webkit-font-smoothing:antialiased;background:#FFFBF6}
.hf *{box-sizing:border-box}
/* header */
.hf-head{background:#21366C;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.hf-logo{display:inline-flex;align-items:center;gap:7px}
.hf-logo-wm{font-family:'Bebas Neue',Impact,sans-serif;font-size:13px;letter-spacing:1px;line-height:1;color:#FFFBF6}
.hf-badge{font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:rgba(236,122,53,.22);color:#EC7A35;white-space:nowrap}
.hf-badge.navy{background:rgba(255,255,255,.14);color:#FFFBF6}
/* title block */
.hf-title-block{padding:10px 14px 9px;border-bottom:2.5px solid #EC7A35;flex:0 0 auto}
.hf-title{font-family:'Poppins',sans-serif;font-size:15px;font-weight:700;color:#21366C;letter-spacing:-.012em;line-height:1.2}
.hf-cat-label{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(58,58,54,.45);margin-top:2px}
/* body sections */
.hf-body{flex:1;display:flex;flex-direction:column;overflow:hidden}
.hf-sec{padding:7px 14px;border-bottom:1px solid rgba(33,54,108,.07);flex:0 0 auto}
.hf-sec-lbl{font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#21366C;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.hf-sec-lbl::after{content:'';flex:1;height:1px;background:#EC7A35;opacity:.28;border-radius:1px}
/* placeholder lines */
.hf-ln{height:8px;border-radius:2px;background:rgba(33,54,108,.08);display:block;margin-bottom:4px}
.hf-ln:last-child{margin-bottom:0}
/* form field */
.hf-fld{height:25px;border:1.5px solid rgba(33,54,108,.14);border-radius:5px;background:#FFFBF6;margin-bottom:4px}
.hf-fld:last-child{margin-bottom:0}
/* stats strip */
.hf-stats{display:flex;border-bottom:1px solid rgba(33,54,108,.07);flex:0 0 auto}
.hf-stat{flex:1;padding:7px 8px;text-align:center;border-right:1px solid rgba(33,54,108,.07)}
.hf-stat:last-child{border-right:none}
.hf-stat-n{font-size:16px;font-weight:700;color:#21366C;line-height:1}
.hf-stat-l{font-size:7.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(58,58,54,.45);margin-top:2px}
/* color swatches */
.hf-colors{display:flex;gap:8px;padding:8px 14px;border-bottom:1px solid rgba(33,54,108,.07);flex:0 0 auto}
.hf-sw{width:36px;height:36px;border-radius:7px;border:1.5px solid rgba(33,54,108,.1)}
.hf-sw-name{font-size:7.5px;text-align:center;margin-top:2px;color:rgba(58,58,54,.55);font-weight:500}
/* table */
.hf-tbl{border:1.5px solid rgba(33,54,108,.12);border-radius:6px;overflow:hidden;margin:2px 0}
.hf-tbl .hdr{background:#21366C;padding:4px 8px;display:flex;gap:4px;flex:0 0 auto}
.hf-tbl .row{display:flex;gap:4px;padding:4px 8px;border-top:1px solid rgba(33,54,108,.07)}
.hf-tbl .row:nth-child(odd){background:#FFFBF6}
.hf-tl{height:7px;border-radius:2px;background:rgba(255,255,255,.28);display:block}
.hf-tl.d{background:rgba(33,54,108,.1)}
/* chart placeholder */
.hf-chart{background:rgba(33,54,108,.05);border-radius:6px;border:1.5px solid rgba(33,54,108,.1);display:flex;align-items:center;justify-content:center;margin:2px 0}
.hf-chart span{font-size:8px;font-weight:600;letter-spacing:.05em;color:rgba(33,54,108,.3)}
/* progress row */
.hf-prog{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.hf-prog:last-child{margin-bottom:0}
.hf-prog-lbl{font-size:9px;font-weight:500;color:rgba(58,58,54,.65);width:108px;flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-prog-track{flex:1;height:6px;border-radius:3px;background:rgba(33,54,108,.1);overflow:hidden}
.hf-prog-fill{height:100%;border-radius:3px;background:#21366C}
.hf-prog-pct{font-size:8.5px;font-weight:700;color:#EC7A35;width:26px;text-align:right;flex:0 0 auto}
/* footer */
.hf-foot{padding:7px 14px;background:rgba(33,54,108,.05);border-top:1.5px solid rgba(33,54,108,.1);font-size:8px;color:rgba(58,58,54,.45);font-weight:500;flex:0 0 auto;letter-spacing:.01em}
/* 2-col layout */
.hf-2col{display:flex;gap:0;flex:1;overflow:hidden}
.hf-2col .col{flex:1;overflow:hidden;padding:7px 14px;border-right:1px solid rgba(33,54,108,.07)}
.hf-2col .col:last-child{border-right:none}
/* SWOT grid */
.hf-swot{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 14px;flex:1}
.hf-swot-q{border-radius:7px;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.hf-swot-q .ql{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
/* DECK */
.hf-deck{height:100%;width:100%;display:flex;flex-direction:column;background:#21366C;position:relative;overflow:hidden}
.hf-deck.light{background:#FFFBF6}
.hf-deck-bar{height:3px;background:#EC7A35;flex:0 0 auto}
.hf-deck-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 32px;gap:10px}
.hf-deck-kicker{font-size:8.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#EC7A35}
.hf-deck-title{font-family:'Poppins',sans-serif;font-size:26px;font-weight:700;color:#fff;letter-spacing:-.025em;line-height:1.08}
.hf-deck.light .hf-deck-title{color:#21366C}
.hf-deck-sub{font-size:10.5px;color:rgba(255,255,255,.55);line-height:1.5}
.hf-deck.light .hf-deck-sub{color:rgba(58,58,54,.5)}
.hf-deck-foot{padding:11px 32px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.hf-deck.light .hf-deck-foot{border-top-color:rgba(33,54,108,.1)}
.hf-deck-tagline{font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.hf-deck.light .hf-deck-tagline{color:rgba(58,58,54,.3)}
/* deck content slide */
.hf-slide{height:100%;width:100%;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.hf-slide-head{background:#21366C;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.hf-slide-title{font-size:13px;font-weight:700;color:#fff;border-bottom:2px solid #EC7A35;padding-bottom:2px}
.hf-slide-body{flex:1;padding:14px 24px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.hf-bullet{display:flex;gap:9px;align-items:flex-start}
.hf-bullet-dot{width:14px;height:14px;border-radius:3px;background:#EC7A35;flex:0 0 auto;margin-top:1px}
.hf-bullet-lines{display:flex;flex-direction:column;gap:3px;flex:1}
/* roadmap lanes */
.hf-lane-row{display:flex;gap:4px;align-items:center;margin-bottom:5px}
.hf-lane-lbl{font-size:8px;font-weight:700;color:#21366C;width:56px;flex:0 0 auto;letter-spacing:.04em}
.hf-lane-cell{flex:1;height:22px;border-radius:5px;border:1.5px solid rgba(33,54,108,.14)}
    `;
    document.head.appendChild(s);
  }

  // ── Tatava mark ───────────────────────────────────────
  const HMark = ({ size = 18, white = false }) => (
    <svg width={size} height={size} viewBox="0 0 256 256" style={{display:'block',flexShrink:0}}>
      <circle cx="80" cy="58" r="24" fill={white ? '#FFFBF6' : '#EC7A35'} />
      <rect x="40" y="92" width="80" height="28" rx="4" fill={white ? '#FFFBF6' : '#EC7A35'} />
      <rect x="64" y="116" width="32" height="94" rx="4" fill={white ? '#FFFBF6' : '#EC7A35'} />
      <circle cx="176" cy="58" r="24" fill={white ? '#FFFBF6' : '#EC7A35'} />
      <rect x="136" y="92" width="80" height="28" rx="4" fill={white ? '#FFFBF6' : '#EC7A35'} />
      <rect x="160" y="116" width="32" height="94" rx="4" fill={white ? '#FFFBF6' : '#EC7A35'} />
    </svg>
  );
  const HLogo = ({ white = false, size = 18 }) => (
    <span className="hf-logo"><HMark size={size} white={white} /><span className="hf-logo-wm">TATAVA STUDIO</span></span>
  );

  // ── primitives ────────────────────────────────────────
  const HBadge = ({ children, navy = false }) => <span className={'hf-badge' + (navy ? ' navy' : '')}>{children}</span>;
  const HLines = ({ n = 2, last = '68%' }) => (
    <div>{Array.from({length:n}).map((_,i) => <span key={i} className="hf-ln" style={{width:i===n-1?last:'100%'}} />)}</div>
  );
  const HField = () => <div className="hf-fld" />;
  const HSection = ({ label, children, form, n = 2, last = '68%' }) => (
    <div className="hf-sec">
      <div className="hf-sec-lbl">{label}</div>
      {children || (form ? <><HField /><HField /></> : <HLines n={n} last={last} />)}
    </div>
  );
  const HStats = ({ items }) => (
    <div className="hf-stats">
      {items.map((it,i) => <div key={i} className="hf-stat"><div className="hf-stat-n">{it.n}</div><div className="hf-stat-l">{it.l}</div></div>)}
    </div>
  );
  const HColorRow = ({ colors }) => (
    <div className="hf-colors">
      {colors.map(({hex,name}) => (
        <div key={hex} style={{textAlign:'center'}}><div className="hf-sw" style={{background:hex}} /><div className="hf-sw-name">{name}</div></div>
      ))}
    </div>
  );
  const HTable = ({ cols = [40,30,25], rows = 3 }) => (
    <div className="hf-tbl">
      <div className="hdr">{cols.map((w,i) => <span key={i} className="hf-tl" style={{width:`${w}%`}} />)}</div>
      {Array.from({length:rows}).map((_,i) => (
        <div key={i} className="row">{cols.map((w,j) => <span key={j} className="hf-tl d" style={{width:`${w}%`}} />)}</div>
      ))}
    </div>
  );
  const HChart = ({ h = 50, label = 'chart' }) => (
    <div className="hf-chart" style={{height:h}}><span>{label}</span></div>
  );
  const HProgRow = ({ label, pct }) => (
    <div className="hf-prog">
      <span className="hf-prog-lbl">{label}</span>
      <div className="hf-prog-track"><div className="hf-prog-fill" style={{width:`${pct}%`}} /></div>
      <span className="hf-prog-pct">{pct}%</span>
    </div>
  );

  // ── HDoc factory ─────────────────────────────────────
  const HDoc = ({ title, badge = 'Document', cat, sections = [], footer, stats, colors }) => (
    <div className="hf">
      <div className="hf-head"><HLogo white /><HBadge>{badge}</HBadge></div>
      {colors && <HColorRow colors={colors} />}
      {stats && <HStats items={stats} />}
      <div className="hf-title-block">
        <div className="hf-title">{title}</div>
        {cat && <div className="hf-cat-label">{cat}</div>}
      </div>
      <div className="hf-body">
        {sections.map((s, i) => {
          const lbl = typeof s === 'string' ? s : s.label || s.title || '';
          if (typeof s === 'object' && s.form) return <div key={i} className="hf-sec"><div className="hf-sec-lbl">{lbl}</div><HField />{s.extra && <HField />}</div>;
          if (typeof s === 'object' && s.table) return <div key={i} className="hf-sec"><div className="hf-sec-lbl">{lbl}</div><HTable cols={s.cols} rows={s.rows} /></div>;
          if (typeof s === 'object' && s.chart) return <div key={i} className="hf-sec"><div className="hf-sec-lbl">{lbl}</div><HChart h={s.h||48} label={s.chart} /></div>;
          if (typeof s === 'object' && s.children) return <div key={i} className="hf-sec"><div className="hf-sec-lbl">{lbl}</div>{s.children}</div>;
          const n = typeof s === 'object' ? (s.n||2) : (i<2?2:1);
          const last = typeof s === 'object' ? (s.last||'68%') : [72,55,82,66,78,58][i%6]+'%';
          return <HSection key={i} label={lbl} n={n} last={last} />;
        })}
      </div>
      {footer && <div className="hf-foot">{footer}</div>}
    </div>
  );

  // ── HDeck (title slide) ───────────────────────────────
  const HDeck = ({ title, sub, kicker, light = false }) => (
    <div className={'hf-deck' + (light ? ' light' : '')}>
      <div className="hf-deck-bar" />
      <div className="hf-deck-body">
        {kicker && <div className="hf-deck-kicker">{kicker}</div>}
        <div className="hf-deck-title">{title}</div>
        {sub && <div className="hf-deck-sub">{sub}</div>}
      </div>
      <div className="hf-deck-foot">
        <HLogo white={!light} />
        <span className="hf-deck-tagline">Simplifying Wellness</span>
      </div>
    </div>
  );

  // ── HDeckBody (content slide) ─────────────────────────
  const HDeckBody = ({ heading, items = 3, light = false }) => (
    <div className="hf-slide">
      <div className="hf-slide-head"><span className="hf-slide-title">{heading}</span><HMark size={16} white /></div>
      <div className="hf-slide-body">
        {Array.from({length:items}).map((_,i) => (
          <div key={i} className="hf-bullet">
            <div className="hf-bullet-dot" />
            <div className="hf-bullet-lines">
              <span className="hf-ln" style={{width:'74%'}} />
              <span className="hf-ln" style={{width:'58%'}} />
            </div>
          </div>
        ))}
      </div>
      <div style={{padding:'8px 24px',background:'rgba(33,54,108,.04)',borderTop:'1px solid rgba(33,54,108,.08)'}}>
        <HLogo />
      </div>
    </div>
  );

  // ── SWOT 2×2 ─────────────────────────────────────────
  const SWOT_DEFAULT = [
    { label:'Strengths',    bg:'rgba(236,122,53,.1)',  lc:'#EC7A35', hint:'Credentials · 1,000+ sessions · BHF' },
    { label:'Weaknesses',   bg:'rgba(33,54,108,.07)',  lc:'#21366C', hint:'Single-practitioner · new brand' },
    { label:'Opportunities',bg:'rgba(236,122,53,.1)',  lc:'#EC7A35', hint:'Corporate EAP · tele/NRI · content' },
    { label:'Threats',      bg:'rgba(33,54,108,.07)',  lc:'#21366C', hint:'Stigma · low-cost apps · competitor PR' },
  ];
  const HSwot = ({ q = SWOT_DEFAULT }) => (
    <div className="hf-swot">
      {q.map(({ label, bg, lc, hint }) => (
        <div key={label} className="hf-swot-q" style={{ background: bg }}>
          <span className="ql" style={{ color: lc }}>{label}</span>
          <span style={{ fontSize: 8.5, color: 'rgba(58,58,54,.6)', lineHeight: 1.4 }}>{hint}</span>
          <HLines n={2} last="72%" />
        </div>
      ))}
    </div>
  );

  // ── Roadmap lane chart ────────────────────────────────
  const HLane = ({ lanes = [], cols = ['Now','Next','Later'] }) => (
    <div style={{ flex: 1, padding: '6px 14px' }}>
      <div style={{ display: 'flex', gap: 4, marginLeft: 60, marginBottom: 4 }}>
        {cols.map(c => <div key={c} style={{ flex: 1, fontSize: 8, fontWeight: 700, textAlign: 'center', color: '#21366C', opacity: .6 }}>{c}</div>)}
      </div>
      {lanes.map(({ label, fill }, i) => (
        <div key={label} className="hf-lane-row">
          <span className="hf-lane-lbl">{label}</span>
          {fill.map((f, j) => (
            <div key={j} className="hf-lane-cell" style={{ background: f ? '#EC7A35' : 'rgba(33,54,108,.05)', borderColor: f ? 'rgba(236,122,53,.4)' : 'rgba(33,54,108,.14)' }} />
          ))}
        </div>
      ))}
    </div>
  );

  // ── Export kit primitives immediately so individual hf-*.jsx files can read them ──
  Object.assign(window, { HMark, HLogo, HBadge, HLines, HField, HSection, HStats, HColorRow, HTable, HChart, HProgRow, HDoc, HDeck, HDeckBody, HSwot, HLane });

  // ── Shared artboard dimensions ──
  const W = 414, H = 586, WD = 640, HD = 360;

  // ════════════════════════════════════════════════════════════════
  // BRAND & MARKETING
  // ════════════════════════════════════════════════════════════════


  const BrandGuidelines = () => (
    <HDoc title="Brand Guidelines" badge="Reference" cat="Brand & Marketing"
      colors={[{hex:'#EC7A35',name:'Saffron'},{hex:'#21366C',name:'Navy'},{hex:'#FFFBF6',name:'Cream'},{hex:'#3A3A36',name:'Ink'}]}
      sections={[
        'Logo & Lockups',
        'Typography · Poppins + Open Sans',
        'The Orange-Word Technique',
        'Spacing · 4–8–12–16–24–32',
        'Imagery & Do / Don\'t',
        {label:'Approvals', form:true},
      ]}
      footer="Tatava Studio · B-18 Swasthya Vihar, Vikas Marg, New Delhi 110092"
    />
  );
  const BrandPositioning = () => (
    <HDoc title="Brand Positioning" badge="Reference" cat="Brand & Marketing"
      sections={['Brand in One Sentence','Category & Frame of Reference','Funnel Lanes','Strategic Pillars','Proof / Trust Signals','What We Are NOT']} />
  );
  const MessagingFramework = () => (
    <HDoc title="Messaging Framework" badge="Reference" cat="Brand & Marketing"
      sections={['Core Promise','Audience → Message Matrix','Message Hierarchy','Measurable-Signal Rule','Boilerplate (50 / 100 words)']} />
  );
  const ToneOfVoice = () => (
    <HDoc title="Tone of Voice Guide" badge="Reference" cat="Brand & Marketing"
      sections={['Persona','Three Registers','Principles','Prohibitions','Before / After']} />
  );
  const ContentBrief = () => (
    <HDoc title="Content Brief" badge="Operational" cat="Brand & Marketing"
      sections={[
        {label:'Snapshot', form:true},
        {label:'Audience & Intent', form:true},
        {label:'Message', form:true},
        'Brand Checklist',
        {label:'Deliverables & Specs', form:true},
      ]} />
  );
  const LandingPage = () => (
    <HDoc title="Landing Page Template" badge="Public" cat="Brand & Marketing"
      sections={['Page Goal','Section Stack','Copy Fields','Rules']} />
  );
  const BlogPost = () => (
    <HDoc title="Blog Post Template" badge="Public" cat="Brand & Marketing"
      sections={['Meta','Structure','On-brand Checklist','Author Box']} />
  );
  const CaseStudy = () => (
    <HDoc title="Case Study Template" badge="Public" cat="Brand & Marketing"
      stats={[{n:'Outcome',l:'Metric'},{n:'Consent',l:'On file'},{n:'Draft',l:'Status'}]}
      sections={['Header','Narrative (Situation → Approach → Shift)','Signals','Consent & Use']} />
  );
  const PressRelease = () => (
    <HDoc title="Press Release" badge="Reference" cat="Brand & Marketing"
      sections={['Body','Boilerplate','Contact']}
      footer="For media enquiries: +91 85957 48981 · tatavastudio.com" />
  );
  const AdCreativeBrief = () => (
    <HDoc title="Ad Creative Brief" badge="Operational" cat="Brand & Marketing"
      sections={[
        {label:'Campaign', form:true},
        {label:'Audience & Targeting', form:true},
        {label:'Message', form:true},
        'Creative Specs',
        'Compliance',
      ]} />
  );
  const CampaignPlanning = () => (
    <HDoc title="Campaign Planning" badge="Operational" cat="Brand & Marketing"
      sections={['Overview','Audience & Funnel','Channel Plan','Calendar',{label:'Budget & Metrics',table:true,cols:[40,25,25],rows:3}]} />
  );
  const VideoBrief = () => (
    <HDoc title="Video Production Brief" badge="Operational" cat="Brand & Marketing"
      sections={[
        {label:'Project', form:true},
        {label:'Purpose', form:true},
        'Content',
        {label:'Production Specs', form:true},
        'Brand & Compliance',
        {label:'Deliverables', form:true},
      ]} />
  );
  const EmailNewsletter = () => (
    <HDoc title="Email Newsletter" badge="Operational" cat="Brand & Marketing"
      sections={['Setup',{label:'Layout',children:<React.Fragment><div style={{height:32,border:'1.5px solid rgba(33,54,108,.14)',borderRadius:6,background:'#21366C',marginBottom:4}}/>
        <div style={{height:24,border:'1.5px solid rgba(33,54,108,.14)',borderRadius:6,background:'#FFFBF6'}} /></React.Fragment>},'Checklist']} />
  );
  const TestimonialTpl = () => (
    <HDoc title="Customer Testimonial" badge="Public" cat="Brand & Marketing"
      sections={['Collection','Consent',
        {label:'The Testimonial', children:
          <div style={{background:'rgba(236,122,53,.08)',border:'2px solid rgba(236,122,53,.3)',borderRadius:7,padding:'8px 10px'}}>
            <div style={{fontSize:22,color:'#EC7A35',lineHeight:.7,marginBottom:4}}>"</div>
            <div className="hf-ln" style={{width:'92%'}}/><div className="hf-ln" style={{width:'78%'}}/><div className="hf-ln" style={{width:'62%'}}/>
          </div>},
        'Publishing']} />
  );
  const SocialMediaKit = () => (
    <HDoc title="Social Media Kit" badge="Reference" cat="Brand & Marketing"
      sections={['Global Rules','Instagram Carousel (Awareness)','Single Post / Quote','Reel (Awareness→Consideration)','Story (Consideration→Conversion)','Checklist']} />
  );

  window.HB_BRAND = [
    {id:'hbr-01',name:'Brand Guidelines',       w:W,h:H,comp:BrandGuidelines},
    {id:'hbr-02',name:'Brand Positioning',       w:W,h:H,comp:BrandPositioning},
    {id:'hbr-03',name:'Messaging Framework',     w:W,h:H,comp:MessagingFramework},
    {id:'hbr-04',name:'Tone of Voice Guide',     w:W,h:H,comp:ToneOfVoice},
    {id:'hbr-05',name:'Content Brief',           w:W,h:H,comp:ContentBrief},
    {id:'hbr-06',name:'Landing Page Template',   w:W,h:H,comp:LandingPage},
    {id:'hbr-07',name:'Blog Post Template',      w:W,h:H,comp:BlogPost},
    {id:'hbr-08',name:'Case Study Template',     w:W,h:H,comp:CaseStudy},
    {id:'hbr-09',name:'Press Release Template',  w:W,h:H,comp:PressRelease},
    {id:'hbr-10',name:'Ad Creative Brief',       w:W,h:H,comp:AdCreativeBrief},
    {id:'hbr-11',name:'Campaign Planning',       w:W,h:H,comp:CampaignPlanning},
    {id:'hbr-12',name:'Video Production Brief',  w:W,h:H,comp:VideoBrief},
    {id:'hbr-13',name:'Email Newsletter',        w:W,h:H,comp:EmailNewsletter},
    {id:'hbr-14',name:'Customer Testimonial',    w:W,h:H,comp:TestimonialTpl},
    {id:'hbr-15',name:'Social Media Kit',        w:W,h:H,comp:SocialMediaKit},
  ];

  // ════════════════════════════════════════════════════════════════
  // SALES
  // ════════════════════════════════════════════════════════════════


  const SalesDeck_1 = () => <HDeck title="Sales Deck" kicker="Tatava Studio · Simplifying Wellness" sub="Corporate & EAP Programmes · Individual Therapy · Family Counselling" />;
  const SalesDeck_2 = () => <HDeckBody heading="Our Services" items={4} />;
  const SalesDeck_3 = () => <HDeckBody heading="Why Tatava" items={3} />;

  const CompanyOverview_1 = () => <HDeck title="Company Overview" kicker="Tatava Studio · Who We Are" sub="Founded by Aarti Ahuja · MA Applied Psychology · 1,000+ sessions" />;
  const CompanyOverview_2 = () => <HDeckBody heading="Our Approach" items={3} />;

  const PitchDeck_1 = () => <HDeck title="Pitch Deck" kicker="Corporate / EAP Partnership" sub="Improve team wellbeing · reduce absenteeism · build psychological safety" />;
  const PitchDeck_2 = () => <HDeckBody heading="The Problem" items={3} />;
  const PitchDeck_3 = () => <HDeckBody heading="Our Solution" items={4} />;

  const DiscoveryCall = () => (
    <HDoc title="Discovery Call Template" badge="Operational" cat="Sales"
      sections={[
        {label:'Pre-call', form:true},
        {label:'Agenda (25–30 min)', form:true},
        {label:'Qualifying Questions', form:true},
        {label:'Capture', form:true},
      ]} />
  );
  const SalesProposal = () => (
    <HDoc title="Sales Proposal" badge="Operational" cat="Sales"
      sections={['Cover','Your Situation (mirror their words)','Proposed Approach',
        {label:'Scope of Work', table:true, cols:[35,40,20], rows:3},
        'Team · Aarti Ahuja MA','Timeline','Investment','Our Promises','Next Steps']}
      footer="Tatava Studio · +91 85957 48981 · tatavastudio.com" />
  );
  const SOW = () => (
    <HDoc title="Statement of Work" badge="Operational" cat="Sales"
      sections={['Parties','Scope & Deliverables','Out of Scope',{label:'Schedule', table:true, cols:[30,35,25], rows:3},
        'Fees & Payment','Confidentiality','Acceptance Criteria',{label:'Signatures', form:true}]}
      footer="Tatava Studio · B-18 Swasthya Vihar, New Delhi 110092" />
  );
  const Quote = () => (
    <HDoc title="Quote / Estimate" badge="Operational" cat="Sales"
      stats={[{n:'₹ —',l:'Subtotal'},{n:'18%',l:'GST'},{n:'₹ —',l:'Total'}]}
      sections={[
        {label:'Bill To', form:true},
        {label:'Line Items', table:true, cols:[36,28,14,14], rows:4},
        {label:'Notes', form:true},
      ]}
      footer="Due on receipt · Tatava Studio · tatavastudio.com" />
  );
  const Pricing = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Pricing Sheet</HBadge></div>
      <div className="hf-title-block">
        <div className="hf-title">Pricing Sheet</div>
        <div className="hf-cat-label">Tatava Studio · 2025–26</div>
      </div>
      <div style={{flex:1,padding:'10px 14px',display:'flex',flexDirection:'column',gap:8}}>
        {[
          {tier:'Individual Therapy',color:'#21366C',light:false},
          {tier:'Family / Couples',color:'#EC7A35',light:true},
          {tier:'Corporate / EAP',color:'#21366C',light:false},
        ].map(({tier,color,light}) => (
          <div key={tier} style={{border:`2px solid ${light?'#EC7A35':'rgba(33,54,108,.18)'}`,borderRadius:8,padding:'9px 12px',background:light?'rgba(236,122,53,.06)':'#fff'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:6}}>
              <span style={{fontSize:10.5,fontWeight:700,color}}>{tier}</span>
              <span style={{fontSize:14,fontWeight:800,color}}>{light?'₹ ——':'₹ ——'}</span>
            </div>
            {[1,2,3].map(i => (
              <div key={i} style={{display:'flex',gap:6,alignItems:'center',marginBottom:3}}>
                <div style={{width:8,height:8,borderRadius:'50%',background:light?'#EC7A35':'rgba(33,54,108,.3)',flexShrink:0}}/>
                <span className="hf-ln" style={{flex:1}} />
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="hf-foot">Taxes noted · +91 85957 48981 · B-18 Swasthya Vihar, New Delhi</div>
    </div>
  );
  const Comparison = () => (
    <HDoc title="Competitor Comparison" badge="Internal" cat="Sales"
      sections={[
        {label:'Competitor Matrix', table:true, cols:[32,22,22,20], rows:5},
        'Talk-track',
        'Positioning Gaps for Tatava',
      ]} />
  );
  const FollowUp = () => (
    <HDoc title="Sales Follow-up Email" badge="Operational" cat="Sales"
      sections={[
        {label:'After a discovery call', form:true},
        {label:'After an inquiry (no reply)', form:true},
        {label:'Variables', form:true},
      ]} />
  );
  const ObjectionGuide = () => (
    <HDoc title="Objection Handling Guide" badge="Internal" cat="Sales"
      sections={['Common Objections (8)','Response Framework','Proof Points · 1,000+ sessions, 4.9★','Competitor Deflection','Closing Moves']} />
  );
  const OnboardCheck = () => (
    <HDoc title="Client Onboarding" badge="Operational" cat="Sales"
      sections={[
        {label:'Pre-first-session', form:true},
        {label:'First session', form:true},
        {label:'Corporate / EAP add-ons', form:true},
        {label:'Handoff', form:true},
      ]} />
  );

  window.HB_SALES = [
    {id:'hsl-01',name:'Sales Deck',              w:WD,h:HD,isDeck:true,slides:[SalesDeck_1,SalesDeck_2,SalesDeck_3]},
    {id:'hsl-02',name:'Company Overview Deck',   w:WD,h:HD,isDeck:true,slides:[CompanyOverview_1,CompanyOverview_2]},
    {id:'hsl-03',name:'Pitch Deck',              w:WD,h:HD,isDeck:true,slides:[PitchDeck_1,PitchDeck_2,PitchDeck_3]},
    {id:'hsl-04',name:'Discovery Call Template', w:W, h:H, comp:DiscoveryCall},
    {id:'hsl-05',name:'Sales Proposal',          w:W, h:H, comp:SalesProposal},
    {id:'hsl-06',name:'Statement of Work (SOW)', w:W, h:H, comp:SOW},
    {id:'hsl-07',name:'Quote / Estimate',        w:W, h:H, comp:Quote},
    {id:'hsl-08',name:'Pricing Sheet',           w:W, h:H, comp:Pricing},
    {id:'hsl-09',name:'Competitor Comparison',   w:W, h:H, comp:Comparison},
    {id:'hsl-10',name:'Sales Follow-up Email',   w:W, h:H, comp:FollowUp},
    {id:'hsl-11',name:'Objection Handling Guide',w:W, h:H, comp:ObjectionGuide},
    {id:'hsl-12',name:'Client Onboarding',       w:W, h:H, comp:OnboardCheck},
  ];

  // ════════════════════════════════════════════════════════════════
  // STRATEGY & PLANNING
  // ════════════════════════════════════════════════════════════════


  const BusinessPlan = () => (
    <HDoc title="Business Plan" badge="Operational" cat="Strategy & Planning"
      sections={['Executive Summary','Company','Services','Market','Competitive Edge','Operations',
        {label:'Financials', chart:'Revenue projection', h:44},'Risks']} />
  );
  const StrategicPlan = () => (
    <HDoc title="Strategic Plan" badge="Operational" cat="Strategy & Planning"
      sections={['Vision (3–5 yr)','Mission','Strategic Themes','Objectives by Theme','Big Bets & Trade-offs','Review cadence']} />
  );
  const AnnualOp = () => (
    <HDoc title="Annual Operating Plan" badge="Operational" cat="Strategy & Planning"
      stats={[{n:'FY 26',l:'Year'},{n:'3',l:'Pillars'},{n:'12',l:'Initiatives'}]}
      sections={['Year / Theme','Goals → Quarters',{label:'Functional Plans',table:true,cols:[30,28,28],rows:4},
        'Headcount & Capacity','Budget Summary','Key Risks & Dependencies']} />
  );
  const QuarterlyPlan = () => (
    <HDoc title="Quarterly Planning" badge="Operational" cat="Strategy & Planning"
      sections={['Last Quarter Recap',{label:'This Quarter Priorities',form:true},
        'OKRs',{label:'Initiatives & Owners',table:true,cols:[38,28,22],rows:3},'Capacity & Budget','Risks']} />
  );
  const OKR = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>OKR Template</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">OKR Template</div><div className="hf-cat-label">Strategy & Planning · Q2</div></div>
      <div className="hf-body">
        {[
          {level:'Company Objective', label:'Simplifying Wellness across India', krs:[{l:'Booking growth',p:68},{l:'NPS ≥ 9',p:42},{l:'Corp EAP deals',p:25}]},
          {level:'Team Objective', label:'Aarti Ahuja · Operations', krs:[{l:'Session capacity',p:80},{l:'Content reach',p:55}]},
        ].map((obj,oi) => (
          <div key={oi} className="hf-sec">
            <div className="hf-sec-lbl">{obj.level}</div>
            <div style={{fontSize:9.5,fontWeight:600,color:'#21366C',marginBottom:6}}>{obj.label}</div>
            {obj.krs.map((kr,ki) => <HProgRow key={ki} label={`KR${ki+1} · ${kr.l}`} pct={kr.p} />)}
          </div>
        ))}
        <div className="hf-sec"><div className="hf-sec-lbl">Scoring (end of period)</div><HField /></div>
      </div>
    </div>
  );
  const KPI = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>KPI Dashboard</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">KPI Dashboard</div><div className="hf-cat-label">Tatava Studio · Live metrics</div></div>
      <HStats items={[{n:'↑18%',l:'Bookings'},{n:'94%',l:'Retention'},{n:'4.9★',l:'Rating'}]} />
      <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,padding:'8px 14px',overflow:'hidden'}}>
        {['Funnel','Delivery','Revenue','BHF Impact'].map(t => (
          <div key={t} className="hf-sec" style={{margin:0,border:'1.5px solid rgba(33,54,108,.1)',borderRadius:7}}>
            <div className="hf-sec-lbl" style={{marginBottom:3}}>{t}</div>
            <HChart h={44} label="chart" />
          </div>
        ))}
      </div>
    </div>
  );
  const SWOT = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>SWOT Analysis</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">SWOT Analysis</div><div className="hf-cat-label">Tatava Studio · Strategic snapshot</div></div>
      <HSwot />
      <div className="hf-sec"><div className="hf-sec-lbl">So-What / Actions</div><HLines n={2} last="65%" /></div>
    </div>
  );
  const Roadmap = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Roadmap</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Roadmap Template</div><div className="hf-cat-label">Tatava Studio · Rolling quarters</div></div>
      <HLane cols={['Now','Next','Later']} lanes={[
        {label:'Tatava Connect',fill:[true,true,false]},
        {label:'Brand',fill:[true,false,false]},
        {label:'Content',fill:[true,true,false]},
        {label:'Operations',fill:[false,true,true]},
        {label:'Infra',fill:[false,false,true]},
      ]} />
      <div className="hf-sec"><div className="hf-sec-lbl">Themes · Out of Scope</div><HLines n={1} last="60%" /></div>
    </div>
  );
  const MarketResearch = () => (
    <HDoc title="Market Research Report" badge="Operational" cat="Strategy & Planning"
      sections={['Objective & Questions','Method & Sources','Market Size & Trends','Audience Insights','Competitive Landscape','Implications for Tatava','Recommendations']} />
  );
  const CompAnalysis = () => (
    <HDoc title="Competitor Analysis" badge="Internal" cat="Strategy & Planning"
      sections={['Competitor Profiles',{label:'Comparison Matrix',table:true,cols:[30,23,23,20],rows:5},
        'Positioning Gaps for Tatava','Recommended Moves']} />
  );
  const GtmPlan = () => (
    <HDoc title="Go-To-Market Plan" badge="Operational" cat="Strategy & Planning"
      sections={['Target & Problem','Positioning & Message','Channels & Tactics','Pricing & Offer','Funnel & Assets Needed','Metrics & Milestones']} />
  );
  const LaunchPlan = () => (
    <HDoc title="Product Launch Plan" badge="Operational" cat="Strategy & Planning"
      sections={['Goals & Success Metrics','Audience & Messaging',{label:'Workstreams',table:true,cols:[30,28,28],rows:3},
        'Timeline','Risks & Rollback','Post-launch review']} />
  );
  const RiskMatrix = () => (
    <HDoc title="Risk Assessment Matrix" badge="Operational" cat="Strategy & Planning"
      sections={[{label:'Register',table:true,cols:[28,15,15,20,16],rows:4},'Heat Guide','Review cadence']} />
  );

  window.HB_STRAT = [
    {id:'hst-01',name:'Business Plan',          w:W, h:H, comp:BusinessPlan},
    {id:'hst-02',name:'Strategic Plan',         w:W, h:H, comp:StrategicPlan},
    {id:'hst-03',name:'Annual Operating Plan',  w:W, h:H, comp:AnnualOp},
    {id:'hst-04',name:'Quarterly Planning',     w:W, h:H, comp:QuarterlyPlan},
    {id:'hst-05',name:'OKR Template',           w:W, h:H, comp:OKR},
    {id:'hst-06',name:'KPI Dashboard',          w:WD,h:HD,comp:KPI},
    {id:'hst-07',name:'SWOT Analysis',          w:W, h:H, comp:SWOT},
    {id:'hst-08',name:'Market Research Report', w:W, h:H, comp:MarketResearch},
    {id:'hst-09',name:'Competitor Analysis',    w:W, h:H, comp:CompAnalysis},
    {id:'hst-10',name:'Go-To-Market Plan',      w:W, h:H, comp:GtmPlan},
    {id:'hst-11',name:'Product Launch Plan',    w:W, h:H, comp:LaunchPlan},
    {id:'hst-12',name:'Risk Assessment Matrix', w:W, h:H, comp:RiskMatrix},
    {id:'hst-13',name:'Roadmap Template',       w:WD,h:HD,comp:Roadmap},
  ];

  // ════════════════════════════════════════════════════════════════
  // PRODUCT & DEV
  // ════════════════════════════════════════════════════════════════


  const PRD = () => (
    <HDoc title="Product Requirements (PRD)" badge="Operational" cat="Product & Dev"
      sections={['Problem',{label:'Users & Use Cases · Clients / Admin / Associates',n:2,last:'72%'},
        'Goals / Non-Goals',{label:'Requirements',table:true,cols:[8,36,22,28],rows:4},
        'UX Notes · ≥44px tap target, mobile-first','Success Metrics','Milestones']} />
  );
  const FeatureSpec = () => (
    <HDoc title="Feature Specification" badge="Operational" cat="Product & Dev"
      sections={['Summary',{label:'User Flow',chart:'flow diagram',h:52},'Acceptance Criteria','Edge Cases & Errors','Dependencies']} />
  );
  const UserStory = () => (
    <HDoc title="User Story Template" badge="Operational" cat="Product & Dev"
      sections={[
        {label:'Story · As a… I want…', form:true},
        {label:'Acceptance Criteria', form:true, extra:true},
        {label:'Details', form:true},
        {label:'Notes', form:true},
      ]} />
  );
  const ProductRoadmap = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Product Roadmap</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Product Roadmap</div><div className="hf-cat-label">Tatava Studio · Tatava Connect</div></div>
      <HLane cols={['Now','Next','Later']} lanes={[
        {label:'Booking',  fill:[true,true,false]},
        {label:'Client Portal',fill:[true,false,false]},
        {label:'Analytics',fill:[false,true,true]},
        {label:'Infra',    fill:[false,false,true]},
        {label:'AI',       fill:[false,false,true]},
      ]} />
      <div className="hf-sec"><div className="hf-sec-lbl">Themes · Out of Scope</div><HLines n={1} last="55%" /></div>
    </div>
  );
  const Sprint = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Sprint Planning</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Sprint Planning</div><div className="hf-cat-label">Product & Dev · 2-week sprint</div></div>
      <div style={{flex:1,display:'flex',padding:'8px 10px',gap:8,overflow:'hidden'}}>
        {[{col:'To Do',n:3,accent:false},{col:'In Progress',n:2,accent:true},{col:'Done',n:2,accent:false}].map(({col,n,accent})=>(
          <div key={col} style={{flex:1,display:'flex',flexDirection:'column',gap:5}}>
            <div style={{fontSize:8.5,fontWeight:700,letterSpacing:'.08em',textTransform:'uppercase',color:accent?'#EC7A35':'#21366C',marginBottom:2}}>{col}</div>
            {Array.from({length:n}).map((_,i)=>(
              <div key={i} style={{border:`1.5px solid ${accent?'rgba(236,122,53,.4)':'rgba(33,54,108,.12)'}`,borderRadius:6,padding:'7px 9px',background:accent?'rgba(236,122,53,.04)':'#fff'}}>
                <span className="hf-ln" style={{width:'88%'}} /><span className="hf-ln" style={{width:'62%'}} />
                <div style={{display:'flex',justifyContent:'flex-end',marginTop:4}}>
                  <div style={{width:16,height:16,borderRadius:'50%',background:'rgba(33,54,108,.15)'}} />
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="hf-sec"><div className="hf-sec-lbl">Capacity · Stretch · Definition of Done</div><HLines n={1} last="65%" /></div>
    </div>
  );
  const BugReport = () => (
    <HDoc title="Bug Report Template" badge="Operational" cat="Product & Dev"
      sections={[
        {label:'Summary', form:true},
        {label:'Environment · Version · Browser', form:true},
        {label:'Steps to Reproduce', form:true, extra:true},
        {label:'Expected Behaviour', form:true},
        {label:'Actual Behaviour', form:true},
        {label:'Severity · Priority', form:true},
      ]} />
  );
  const QATestPlan = () => (
    <HDoc title="QA Test Plan" badge="Operational" cat="Product & Dev"
      sections={['Scope',{label:'Test Cases',table:true,cols:[8,36,22,22],rows:4},'Cross-checks','Pass / Fail Criteria','Sign-off']} />
  );
  const ReleaseNotes = () => (
    <HDoc title="Release Notes" badge="Operational" cat="Product & Dev"
      stats={[{n:'v2.1',l:'Version'},{n:'9 Jun',l:'Released'},{n:'3',l:'New features'}]}
      sections={[
        {label:'✨ New Features', n:3, last:'70%'},
        {label:'🐛 Bug Fixes', n:2, last:'65%'},
        {label:'⚠ Known Issues', n:1, last:'55%'},
        {label:'🔄 Migration Steps', form:true},
      ]} />
  );
  const TechDesign = () => (
    <HDoc title="Technical Design Document" badge="Operational" cat="Product & Dev"
      sections={['Context & Goals',{label:'Architecture',chart:'system diagram',h:50},'APIs / Integrations','Rollout & Monitoring']} />
  );
  const ApiDoc = () => (
    <HDoc title="API Documentation" badge="Reference" cat="Product & Dev"
      sections={[
        {label:'Endpoints', table:true, cols:[14,38,42], rows:4},
        {label:'Request · Example', form:true},
        {label:'Errors', table:true, cols:[16,28,52], rows:3},
        {label:'Notes / Rate limits', n:1, last:'70%'},
      ]} />
  );
  const ChangeRequest = () => (
    <HDoc title="Change Request" badge="Operational" cat="Product & Dev"
      sections={[
        {label:'Change & Reason', form:true, extra:true},
        {label:'Impact Assessment', form:true},
        {label:'Approvals', form:true},
      ]} />
  );

  window.HB_PROD = [
    {id:'hpd-01',name:'Product Requirements (PRD)',w:W, h:H, comp:PRD},
    {id:'hpd-02',name:'Feature Specification',     w:W, h:H, comp:FeatureSpec},
    {id:'hpd-03',name:'User Story Template',       w:W, h:H, comp:UserStory},
    {id:'hpd-04',name:'Product Roadmap',           w:WD,h:HD,comp:ProductRoadmap},
    {id:'hpd-05',name:'Sprint Planning',           w:WD,h:HD,comp:Sprint},
    {id:'hpd-06',name:'Bug Report Template',       w:W, h:H, comp:BugReport},
    {id:'hpd-07',name:'QA Test Plan',              w:W, h:H, comp:QATestPlan},
    {id:'hpd-08',name:'Release Notes Template',    w:W, h:H, comp:ReleaseNotes},
    {id:'hpd-09',name:'Technical Design Document', w:W, h:H, comp:TechDesign},
    {id:'hpd-10',name:'API Documentation',         w:WD,h:HD,comp:ApiDoc},
    {id:'hpd-11',name:'Change Request Template',   w:W, h:H, comp:ChangeRequest},
  ];

  // ════════════════════════════════════════════════════════════════
  // OPERATIONS
  // ════════════════════════════════════════════════════════════════


  const SOP = () => (
    <HDoc title="SOP" badge="Operational" cat="Operations"
      sections={['Purpose & Scope','Roles',
        {label:'Procedure (numbered, exact)', form:true, extra:true},
        'Quality Checks','Revision History']}
      footer="Tatava Studio · Review annually or on change" />
  );
  const ProcessDoc = () => (
    <HDoc title="Process Documentation" badge="Operational" cat="Operations"
      sections={['Overview & Trigger',{label:'Steps',table:true,cols:[8,42,36],rows:4},
        'Handoffs','Pain points / improvements','Linked SOPs']} />
  );
  const Workflow = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Workflow Diagram</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Workflow Diagram</div><div className="hf-cat-label">Operations · Process map</div></div>
      <div style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6,padding:'10px 24px'}}>
        {[
          {label:'Trigger',round:true,color:'#21366C',text:'#fff'},
          {label:'Step 1',round:false,color:'rgba(33,54,108,.07)',text:'#21366C'},
          {label:'Decision?',round:false,color:'rgba(236,122,53,.12)',text:'#EC7A35',diamond:true},
          {label:'Step 2',round:false,color:'rgba(33,54,108,.07)',text:'#21366C'},
          {label:'End',round:true,color:'#21366C',text:'#fff'},
        ].map((n,i)=>(
          <React.Fragment key={n.label}>
            <div style={{padding:'6px 18px',borderRadius:n.round?999:7,background:n.color,color:n.text,fontSize:10.5,fontWeight:700,minWidth:100,textAlign:'center',border:`1.5px solid ${n.round?n.color:'rgba(33,54,108,.18)'}`}}>{n.label}</div>
            {i<4&&<div style={{width:1,height:10,background:'rgba(33,54,108,.2)'}}/>}
          </React.Fragment>
        ))}
      </div>
      <div className="hf-sec"><div className="hf-sec-lbl">Legend & Notes</div><HLines n={1} last="55%" /></div>
    </div>
  );
  const MeetingAgenda = () => (
    <HDoc title="Meeting Agenda" badge="Operational" cat="Operations"
      sections={[
        {label:'Objective', form:true},
        {label:'Attendees', form:true},
        {label:'Agenda', table:true, cols:[44,28,22], rows:4},
        {label:'Pre-reads', form:true},
        {label:'Desired outcomes / decisions', form:true},
      ]} />
  );
  const MeetingNotes = () => (
    <HDoc title="Meeting Notes" badge="Operational" cat="Operations"
      stats={[{n:'Date',l:'When'},{n:'N',l:'Attendees'},{n:'0',l:'Actions'}]}
      sections={[
        {label:'Attendees', form:true},
        {label:'Discussion (by topic)', form:true, extra:true},
        {label:'Decisions', form:true},
        {label:'Next meeting', form:true},
      ]} />
  );
  const DecisionLog = () => (
    <HDoc title="Decision Log" badge="Operational" cat="Operations"
      sections={[{label:'Log', table:true, cols:[28,14,16,26,14], rows:5},'Notes']} />
  );
  const ProjectCharter = () => (
    <HDoc title="Project Charter" badge="Operational" cat="Operations"
      sections={['Purpose & Business Case','Objectives & Success Criteria','Scope (In / Out)',
        {label:'Stakeholders & Roles (RACI)', table:true, cols:[30,18,18,18,14], rows:3},
        'Milestones','Budget & Resources','Risks & Assumptions']} />
  );
  const ProjectPlan = () => (
    <HDoc title="Project Plan" badge="Operational" cat="Operations"
      stats={[{n:'0%',l:'Complete'},{n:'—',l:'Due'},{n:'0',l:'Blockers'}]}
      sections={[{label:'Phases & Milestones', table:true, cols:[36,20,18,18], rows:5},
        'Dependencies · Resourcing · Risk register']} />
  );
  const StatusReport = () => (
    <HDoc title="Status Report" badge="Operational" cat="Operations"
      stats={[{n:'🟢',l:'On Track'},{n:'0',l:'Risks'},{n:'0',l:'Actions'}]}
      sections={['Summary','Progress (since last)','Metrics / KPIs','Risks & Blockers','Next period priorities','Asks / decisions needed']} />
  );
  const Retro = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Retrospective</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Retrospective Template</div><div className="hf-cat-label">Operations · Sprint / Quarter</div></div>
      <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,padding:'8px 14px',overflow:'hidden'}}>
        {[
          {label:'What went well',bg:'rgba(236,122,53,.08)',bc:'rgba(236,122,53,.3)'},
          {label:'What didn\'t',bg:'rgba(33,54,108,.06)',bc:'rgba(33,54,108,.18)'},
          {label:'What we learned',bg:'rgba(33,54,108,.06)',bc:'rgba(33,54,108,.18)'},
          {label:'Action items',bg:'rgba(236,122,53,.08)',bc:'rgba(236,122,53,.3)'},
        ].map(({label,bg,bc})=>(
          <div key={label} style={{background:bg,border:`1.5px solid ${bc}`,borderRadius:8,padding:'8px 10px',display:'flex',flexDirection:'column',gap:5}}>
            <div style={{fontSize:8,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'#21366C'}}>{label}</div>
            {[1,2].map(i=>(
              <div key={i} style={{background:'rgba(255,255,255,.7)',borderRadius:5,padding:'5px 7px'}}>
                <span className="hf-ln" style={{width:i===1?'86%':'66%'}} />
              </div>
            ))}
          </div>
        ))}
      </div>
      <div className="hf-sec"><div className="hf-sec-lbl">Shout-outs</div><HLines n={1} last="55%" /></div>
    </div>
  );
  const IncidentReport = () => (
    <HDoc title="Incident Report" badge="Operational" cat="Operations"
      sections={[
        {label:'Summary', form:true},
        {label:'Timeline', form:true, extra:true},
        {label:'Impact', form:true},
        {label:'Resolution & Containment', form:true, extra:true},
        {label:'Sign-off', form:true},
      ]} />
  );

  window.HB_OPS = [
    {id:'hop-01',name:'SOP Template',            w:W, h:H, comp:SOP},
    {id:'hop-02',name:'Process Documentation',   w:W, h:H, comp:ProcessDoc},
    {id:'hop-03',name:'Workflow Diagram',         w:W, h:H, comp:Workflow},
    {id:'hop-04',name:'Meeting Agenda',           w:W, h:H, comp:MeetingAgenda},
    {id:'hop-05',name:'Meeting Notes',            w:W, h:H, comp:MeetingNotes},
    {id:'hop-06',name:'Decision Log',             w:WD,h:HD,comp:DecisionLog},
    {id:'hop-07',name:'Project Charter',          w:W, h:H, comp:ProjectCharter},
    {id:'hop-08',name:'Project Plan',             w:WD,h:HD,comp:ProjectPlan},
    {id:'hop-09',name:'Status Report',            w:W, h:H, comp:StatusReport},
    {id:'hop-10',name:'Retrospective Template',   w:WD,h:HD,comp:Retro},
    {id:'hop-11',name:'Incident Report',          w:W, h:H, comp:IncidentReport},
  ];

  // ════════════════════════════════════════════════════════════════
  // HR
  // ════════════════════════════════════════════════════════════════


  const JobDescription = () => (
    <HDoc title="Job Description" badge="Public" cat="HR"
      sections={['About Tatava Studio · Simplifying Wellness','The Role','Responsibilities','Requirements','What We Offer','How to Apply']}
      footer="Tatava Studio · B-18 Swasthya Vihar, New Delhi · tatavastudio.com" />
  );
  const InterviewScorecard = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Interview Scorecard</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Interview Scorecard</div><div className="hf-cat-label">HR · Candidate assessment</div></div>
      <div className="hf-sec">
        <div className="hf-sec-lbl">Candidate</div>
        <div style={{display:'flex',gap:10,alignItems:'center'}}>
          <div style={{width:32,height:32,borderRadius:'50%',background:'rgba(33,54,108,.12)',border:'2px solid rgba(33,54,108,.2)',flexShrink:0}}/>
          <div style={{flex:1}}><span className="hf-ln" style={{width:'68%'}}/><span className="hf-ln" style={{width:'46%'}}/></div>
        </div>
      </div>
      <div className="hf-body">
        {['Communication','Problem Solving','Culture Fit','Clinical Knowledge','Leadership Potential'].map((comp,i)=>(
          <div key={comp} className="hf-sec" style={{display:'flex',alignItems:'center',gap:8}}>
            <span style={{fontSize:9.5,fontWeight:500,color:'rgba(58,58,54,.7)',flex:1}}>{comp}</span>
            <div style={{display:'flex',gap:3}}>
              {[1,2,3,4,5].map(s=><div key={s} style={{width:13,height:13,borderRadius:3,background:s<=4-(i%2)?'#21366C':'rgba(33,54,108,.1)'}}/>)}
            </div>
          </div>
        ))}
        <div className="hf-sec"><div className="hf-sec-lbl">Overall · Panel Scores · Decision</div><HField /></div>
      </div>
    </div>
  );
  const CandidateEval = () => (
    <HDoc title="Candidate Evaluation" badge="Internal" cat="HR"
      sections={[
        {label:'Panel Scores', table:true, cols:[36,22,22,16], rows:4},
        {label:'Strengths / Concerns', form:true, extra:true},
        {label:'Reference checks', form:true},
        {label:'Decision', form:true},
      ]} />
  );
  const OfferLetter = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge navy>Offer Letter</HBadge></div>
      <div className="hf-title-block">
        <div className="hf-title">Offer Letter</div>
        <div className="hf-cat-label">Tatava Studio · B-18 Swasthya Vihar, New Delhi 110092</div>
      </div>
      <div className="hf-body">
        <div className="hf-sec"><div className="hf-sec-lbl">Terms</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:6}}>
            {['Role Title','Start Date','Compensation (₹)','Benefits'].map(f=>(
              <div key={f}><div style={{fontSize:7.5,fontWeight:600,color:'rgba(33,54,108,.5)',marginBottom:2,letterSpacing:'.06em'}}>{f}</div><HField /></div>
            ))}
          </div>
        </div>
        <div className="hf-sec"><div className="hf-sec-lbl">Conditions</div><HLines n={3} last="60%" /></div>
        <div className="hf-sec"><div className="hf-sec-lbl">Acceptance</div>
          <div style={{display:'flex',gap:12,marginTop:4}}>
            {['Candidate','Aarti Ahuja · Tatava Studio'].map(sig=>(
              <div key={sig} style={{flex:1}}>
                <div style={{height:1,background:'rgba(33,54,108,.2)',marginBottom:4}}/>
                <div style={{fontSize:8,color:'rgba(58,58,54,.45)'}}>{sig}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
  const Handbook = () => (
    <HDoc title="Employee Handbook" badge="Reference" cat="HR"
      sections={['Welcome & Mission','Our Values','Code of Conduct','Working Norms','Policies','Tools & Security','Acknowledgement']}
      footer="Tatava Studio · Simplifying Wellness · Version 1.0 · 2025" />
  );
  const OnboardPlan = () => (
    <HDoc title="Onboarding Plan" badge="Operational" cat="HR"
      sections={[
        {label:'Before Day 1', form:true},
        {label:'Week 1', form:true, extra:true},
        {label:'30 / 60 / 90 Goals', form:true, extra:true},
        {label:'Check-ins', form:true},
      ]} />
  );
  const PerfReview = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Performance Review</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Performance Review</div><div className="hf-cat-label">HR · Annual · Tatava Studio</div></div>
      <div className="hf-body">
        {['Self-Assessment','Competencies','Strengths / Growth Areas','Development Plan','Rating & Next Goals'].map((s,i)=>(
          <div key={s} className="hf-sec">
            <HProgRow label={s} pct={[85,72,90,60,78][i]} />
          </div>
        ))}
        <div className="hf-sec"><div className="hf-sec-lbl">Behavioural examples</div><HLines n={2} last="65%" /></div>
      </div>
    </div>
  );
  const CareerDev = () => (
    <HDoc title="Career Development Plan" badge="Operational" cat="HR"
      sections={[
        {label:'Aspirations', form:true},
        {label:'Current Strengths', form:true},
        {label:'Growth Areas', form:true},
        {label:'Goals (12 mo)', form:true, extra:true},
        {label:'Learning & Mentorship', form:true},
      ]} />
  );
  const ExitInterview = () => (
    <HDoc title="Exit Interview Form" badge="Operational" cat="HR"
      sections={[
        {label:'Reason for Leaving', form:true},
        {label:'What Worked / Didn\'t', form:true, extra:true},
        {label:'Management & Culture', form:true},
        {label:'Would You Recommend Tatava?', form:true},
        {label:'Suggestions', form:true},
        {label:'Offboarding Checklist', form:true},
      ]} />
  );
  const TrainingPlan = () => (
    <HDoc title="Training Plan" badge="Operational" cat="HR"
      sections={['Objectives',{label:'Modules',table:true,cols:[32,28,22,14],rows:4},'Schedule','Resources & Budget','Success Measures']} />
  );

  window.HB_HR = [
    {id:'hhr-01',name:'Job Description',        w:W,h:H,comp:JobDescription},
    {id:'hhr-02',name:'Interview Scorecard',     w:W,h:H,comp:InterviewScorecard},
    {id:'hhr-03',name:'Candidate Evaluation',    w:W,h:H,comp:CandidateEval},
    {id:'hhr-04',name:'Offer Letter',            w:W,h:H,comp:OfferLetter},
    {id:'hhr-05',name:'Employee Handbook',       w:W,h:H,comp:Handbook},
    {id:'hhr-06',name:'Onboarding Plan',         w:W,h:H,comp:OnboardPlan},
    {id:'hhr-07',name:'Performance Review',      w:W,h:H,comp:PerfReview},
    {id:'hhr-08',name:'Career Development Plan', w:W,h:H,comp:CareerDev},
    {id:'hhr-09',name:'Exit Interview Form',     w:W,h:H,comp:ExitInterview},
    {id:'hhr-10',name:'Training Plan',           w:W,h:H,comp:TrainingPlan},
  ];

  // ════════════════════════════════════════════════════════════════
  // FINANCE
  // ════════════════════════════════════════════════════════════════


  const Budget = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Budget Template</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Budget Template</div><div className="hf-cat-label">Finance · Tatava Studio · FY 2025–26</div></div>
      <div className="hf-sec">
        <div className="hf-tbl">
          <div className="hdr">
            {[26,13,13,13,13,13].map((w,i)=><span key={i} className="hf-tl" style={{width:`${w}%`}}/>)}
          </div>
          {[{l:'Income',bold:false},{l:'Expenses',bold:false},{l:'Net',bold:true}].map(({l,bold})=>(
            <div key={l} className="row" style={{fontWeight:bold?700:400}}>
              <span style={{width:'26%',fontSize:9.5,fontWeight:bold?700:500,color:bold?'#21366C':'rgba(58,58,54,.7)'}}>{l}</span>
              {[1,2,3,4,5].map(j=>(
                <span key={j} className="hf-tl d" style={{width:'13%',background:bold?'rgba(236,122,53,.25)':'rgba(33,54,108,.1)'}}/>
              ))}
            </div>
          ))}
        </div>
      </div>
      <div className="hf-sec"><div className="hf-sec-lbl">Assumptions · Scenarios</div><HLines n={2} last="58%" /></div>
    </div>
  );
  const Forecast = () => (
    <HDoc title="Forecast Template" badge="Operational" cat="Finance"
      sections={['Assumptions',{label:'Revenue Forecast',chart:'chart',h:44},'Expense Forecast',{label:'Scenarios', form:true}]} />
  );
  const PL = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>P&L Statement</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">P&L Statement</div><div className="hf-cat-label">Finance · Tatava Studio</div></div>
      <div className="hf-body">
        <div className="hf-sec" style={{paddingBottom:4}}>
          <div style={{display:'flex',gap:6,marginBottom:4,paddingLeft:'38%'}}>
            {['Apr–Jun','Jul–Sep'].map(p=><span key={p} style={{flex:1,fontSize:8,fontWeight:700,color:'#21366C',textAlign:'center',letterSpacing:'.04em'}}>{p}</span>)}
          </div>
          {[
            {l:'Revenue',indent:false,bold:false,color:'inherit'},
            {l:'Cost of Services',indent:true,bold:false,color:'rgba(58,58,54,.6)'},
            {l:'Gross Profit',indent:false,bold:true,color:'#21366C'},
            {l:'Operating Expenses',indent:true,bold:false,color:'rgba(58,58,54,.6)'},
            {l:'Net Profit',indent:false,bold:true,color:'#EC7A35'},
          ].map(({l,indent,bold,color})=>(
            <div key={l} style={{display:'flex',alignItems:'center',gap:6,paddingLeft:indent?12:0,borderTop:bold?'1.5px solid rgba(33,54,108,.12)':'none',paddingTop:bold?4:0,paddingBottom:4}}>
              <span style={{flex:1,fontSize:9.5,fontWeight:bold?700:400,color}}>{l}</span>
              {[0,1].map(j=><span key={j} className="hf-ln" style={{width:56,background:bold?'rgba(33,54,108,.15)':'rgba(33,54,108,.08)'}}/>)}
            </div>
          ))}
        </div>
        <div className="hf-sec"><div className="hf-sec-lbl">Runway · Notes</div><HLines n={1} last="55%" /></div>
      </div>
    </div>
  );
  const CashFlow = () => (
    <HDoc title="Cash Flow Report" badge="Operational" cat="Finance"
      stats={[{n:'₹ —',l:'Open'},{n:'₹ —',l:'Close'},{n:'—',l:'Runway'}]}
      sections={['Receivables / Payables','Operating Activities','Investing Activities','Financing Activities','Runway']} />
  );
  const ExpenseReport = () => (
    <HDoc title="Expense Report" badge="Operational" cat="Finance"
      sections={[
        {label:'Employee · Period', form:true},
        {label:'Expense Line Items (₹)', table:true, cols:[16,36,14,18,14], rows:4},
        {label:'Receipts Attached', form:true},
        {label:'Total & Approval', form:true},
      ]}
      footer="Tatava Studio · Submit within 30 days of expense" />
  );
  const Invoice = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Invoice</HBadge></div>
      <div className="hf-title-block">
        <div className="hf-title">Invoice</div>
        <div className="hf-cat-label">Tatava Studio · B-18 Swasthya Vihar, Vikas Marg, New Delhi 110092</div>
      </div>
      <div className="hf-body">
        <div className="hf-sec">
          <div style={{display:'flex',gap:10}}>
            <div style={{flex:1}}><div className="hf-sec-lbl">Bill To</div><HLines n={3} last="60%" /></div>
            <div style={{flex:1}}><div className="hf-sec-lbl">Invoice # · Date · Due</div><HLines n={3} last="55%" /></div>
          </div>
        </div>
        <div style={{padding:'0 14px 6px'}}>
          <div className="hf-tbl">
            <div className="hdr">{[8,40,12,16,18].map((w,i)=><span key={i} className="hf-tl" style={{width:`${w}%`}}/>)}</div>
            {[1,2,3].map(i=>(
              <div key={i} className="row">{[8,40,12,16,18].map((w,j)=><span key={j} className="hf-tl d" style={{width:`${w}%`}}/>)}</div>
            ))}
          </div>
        </div>
        <div className="hf-sec">
          <div style={{display:'flex',justifyContent:'flex-end',gap:8}}>
            <div className="hf-sec-lbl" style={{margin:0}}>GST · Subtotal · Total ₹</div>
          </div>
          <div style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:3,marginTop:4}}>
            <span className="hf-ln" style={{width:80}}/><span className="hf-ln" style={{width:80}}/>
            <span className="hf-ln" style={{width:96,background:'rgba(236,122,53,.3)'}}/>
          </div>
        </div>
        <div className="hf-foot">Payment · UPI / Bank · Due on receipt · +91 85957 48981</div>
      </div>
    </div>
  );
  const PO = () => (
    <HDoc title="Purchase Order" badge="Operational" cat="Finance"
      sections={[
        {label:'Vendor', form:true},
        {label:'Deliver To · Tatava Studio', form:true},
        {label:'Items', table:true, cols:[40,14,18,22], rows:3},
        {label:'Terms', form:true},
      ]}
      footer="Tatava Studio · B-18 Swasthya Vihar, New Delhi 110092" />
  );
  const VendorEval = () => (
    <HDoc title="Vendor Evaluation" badge="Internal" cat="Finance"
      sections={['Vendor Profiles',{label:'Scoring Criteria',table:true,cols:[36,22,22,18],rows:4},'Recommendation']} />
  );
  const FinDash = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Financial Dashboard</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Financial Dashboard</div><div className="hf-cat-label">Finance · Tatava Studio · Live</div></div>
      <HStats items={[{n:'₹ X.XL',l:'Revenue'},{n:'32%',l:'Margin'},{n:'₹ X.XL',l:'Pipeline'}]} />
      <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,padding:'8px 14px',overflow:'hidden'}}>
        {['Funnel','Delivery','Revenue','BHF Impact'].map(t=>(
          <div key={t} style={{border:'1.5px solid rgba(33,54,108,.1)',borderRadius:7,padding:'7px 9px'}}>
            <div style={{fontSize:8,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'#21366C',marginBottom:4}}>{t}</div>
            <HChart h={40} label="chart" />
          </div>
        ))}
      </div>
      <div className="hf-sec"><div className="hf-sec-lbl">Notes & actions</div><HLines n={1} last="60%" /></div>
    </div>
  );

  window.HB_FIN = [
    {id:'hfn-01',name:'Budget Template',     w:WD,h:HD,comp:Budget},
    {id:'hfn-02',name:'Forecast Template',   w:W, h:H, comp:Forecast},
    {id:'hfn-03',name:'P&L Statement',       w:W, h:H, comp:PL},
    {id:'hfn-04',name:'Cash Flow Report',    w:W, h:H, comp:CashFlow},
    {id:'hfn-05',name:'Expense Report',      w:W, h:H, comp:ExpenseReport},
    {id:'hfn-06',name:'Invoice Template',    w:W, h:H, comp:Invoice},
    {id:'hfn-07',name:'Purchase Order',      w:W, h:H, comp:PO},
    {id:'hfn-08',name:'Vendor Evaluation',   w:W, h:H, comp:VendorEval},
    {id:'hfn-09',name:'Financial Dashboard', w:WD,h:HD,comp:FinDash},
  ];

  // ════════════════════════════════════════════════════════════════
  // CUSTOMER SUCCESS
  // ════════════════════════════════════════════════════════════════


  const Kickoff = () => (
    <HDoc title="Client Kickoff Document" badge="Operational" cat="Customer Success"
      sections={['Goals & Success Definition','Scope & Cadence','Points of Contact',
        {label:'Logistics', form:true},'Promises','First Milestones']}
      footer="Tatava Studio · +91 85957 48981 · tatavastudio.com" />
  );
  const OnboardGuide = () => (
    <HDoc title="Onboarding Guide" badge="Public" cat="Customer Success"
      sections={['Welcome','How Sessions Work','Our Promises','Policies','Reach Us']}
      footer="Tatava Studio · B-18 Swasthya Vihar, Vikas Marg, New Delhi 110092" />
  );
  const SuccessPlan = () => (
    <HDoc title="Success Plan" badge="Operational" cat="Customer Success"
      sections={[
        {label:'Desired Outcomes (client-defined)', form:true, extra:true},
        {label:'Plan / Cadence', form:true},
        {label:'Signals of Progress (honest, non-guaranteed)', form:true, extra:true},
        {label:'Risks / Barriers', form:true},
        {label:'Review dates', form:true},
      ]} />
  );
  const HealthCheck = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Health Check</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Health Check Report</div><div className="hf-cat-label">Customer Success · Anonymised metrics</div></div>
      <HStats items={[{n:'89%',l:'Utilisation'},{n:'2',l:'Tickets'},{n:'8.4',l:'NPS'}]} />
      <div className="hf-body">
        {[
          {l:'Utilisation (anonymised)',color:'#EC7A35',status:'On Track'},
          {l:'Sentiment / Feedback themes',color:'#EC7A35',status:'Positive'},
          {l:'Risks',color:'rgba(180,120,0,1)',status:'Watch'},
          {l:'Recommendations & Next steps',color:'#21366C',status:'Action'},
        ].map(({l,color,status})=>(
          <div key={l} className="hf-sec" style={{display:'flex',alignItems:'center',gap:8}}>
            <div style={{width:9,height:9,borderRadius:'50%',background:color,flexShrink:0}}/>
            <span style={{flex:1,fontSize:9.5,color:'rgba(58,58,54,.75)'}}>{l}</span>
            <span style={{fontSize:8.5,fontWeight:700,color}}>{status}</span>
          </div>
        ))}
        <div className="hf-sec"><div className="hf-sec-lbl">Recommendations & Next steps</div><HLines n={2} last="68%" /></div>
      </div>
    </div>
  );
  const QBR = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Quarterly Review</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Quarterly Business Review</div><div className="hf-cat-label">Customer Success · Q2 2025</div></div>
      <HStats items={[{n:'Q2 2025',l:'Period'},{n:'↑18%',l:'Growth'},{n:'96%',l:'CSAT'}]} />
      <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:6,padding:'8px 14px',overflow:'hidden'}}>
        {['Recap & Goals','Outcomes (anonymised)','Wins / Challenges','Renewal / Expansion'].map(t=>(
          <div key={t} style={{border:'1.5px solid rgba(33,54,108,.1)',borderRadius:7,padding:'7px 9px'}}>
            <div style={{fontSize:8,fontWeight:700,letterSpacing:'.08em',textTransform:'uppercase',color:'#21366C',marginBottom:4}}>{t}</div>
            <HChart h={38} label="metrics" />
          </div>
        ))}
      </div>
      <div className="hf-sec"><div className="hf-sec-lbl">Roadmap for Next Quarter · Actions & Owners</div><HLines n={2} last="60%" /></div>
    </div>
  );
  const FeedbackSurvey = () => (
    <div className="hf" style={{background:'#FFFBF6'}}>
      <div className="hf-head"><HLogo white /><HBadge>Feedback Survey</HBadge></div>
      <div className="hf-title-block"><div className="hf-title">Customer Feedback Survey</div><div className="hf-cat-label">Customer Success · Tatava Studio</div></div>
      <div className="hf-body">
        <div className="hf-sec">
          <div className="hf-sec-lbl">NPS · How likely to recommend Tatava?</div>
          <div style={{display:'flex',gap:2.5,justifyContent:'center',marginTop:4}}>
            {[0,1,2,3,4,5,6,7,8,9,10].map(n=>(
              <div key={n} style={{width:20,height:20,borderRadius:4,fontSize:8,fontWeight:700,display:'flex',alignItems:'center',justifyContent:'center',background:n>=9?'#21366C':n>=7?'rgba(33,54,108,.15)':'rgba(33,54,108,.07)',color:n>=9?'#fff':'#21366C'}}>{n}</div>
            ))}
          </div>
        </div>
        {['Overall satisfaction with your therapist','Session accessibility & booking ease','Did you feel heard and respected?'].map((q,i)=>(
          <div key={i} className="hf-sec">
            <div style={{fontSize:9.5,color:'rgba(58,58,54,.75)',marginBottom:5}}>{q}</div>
            <div style={{display:'flex',gap:4}}>
              {[1,2,3,4,5].map(s=><div key={s} style={{flex:1,height:20,borderRadius:4,background:s<=4?'rgba(33,54,108,.12)':'rgba(33,54,108,.05)',border:`1.5px solid ${s<=4?'rgba(33,54,108,.2)':'rgba(33,54,108,.1)'}`}}/>)}
            </div>
          </div>
        ))}
        <div className="hf-sec"><div className="hf-sec-lbl">What could we improve? · Consent</div><HField /></div>
      </div>
    </div>
  );
  const Escalation = () => (
    <HDoc title="Escalation Process" badge="Internal" cat="Customer Success"
      sections={[
        {label:'Triggers', form:true},
        {label:'Path', form:true, extra:true},
        {label:'Owners & Contacts', form:true},
      ]} />
  );
  const Renewal = () => (
    <HDoc title="Renewal Proposal" badge="Operational" cat="Customer Success"
      stats={[{n:'12mo',l:'Tenure'},{n:'96%',l:'CSAT'},{n:'↑18%',l:'Growth'}]}
      sections={['Value Delivered (anonymised)','Proposed Renewal','Why Continue']}
      footer="Tatava Studio · +91 85957 48981 · tatavastudio.com" />
  );

  window.HB_CS = [
    {id:'hcs-01',name:'Client Kickoff Document',   w:W, h:H, comp:Kickoff},
    {id:'hcs-02',name:'Onboarding Guide',          w:W, h:H, comp:OnboardGuide},
    {id:'hcs-03',name:'Success Plan',              w:W, h:H, comp:SuccessPlan},
    {id:'hcs-04',name:'Health Check Report',       w:W, h:H, comp:HealthCheck},
    {id:'hcs-05',name:'Quarterly Business Review', w:WD,h:HD,comp:QBR},
    {id:'hcs-06',name:'Customer Feedback Survey',  w:W, h:H, comp:FeedbackSurvey},
    {id:'hcs-07',name:'Escalation Process',        w:W, h:H, comp:Escalation},
    {id:'hcs-08',name:'Renewal Proposal',          w:W, h:H, comp:Renewal},
  ];

  // ════════════════════════════════════════════════════════════════
  // EXECUTIVE
  // ════════════════════════════════════════════════════════════════


  // Board Deck — 3 slides
  const Board_1 = () => <HDeck title="Board Deck" kicker="Board of Directors · Tatava Studio" sub="Aarti Ahuja · MA Applied Psychology · NLP Trainer · 1,000+ sessions" />;
  const Board_2 = () => (
    <div className="hf-slide">
      <div className="hf-slide-head"><span className="hf-slide-title">Financial Performance</span><HLogo white={false} size={14} /></div>
      <div className="hf-slide-body" style={{gap:6}}>
        <div style={{display:'flex',gap:8}}>
          {[{n:'₹ X.XL',l:'Revenue'},{n:'28%',l:'Growth'},{n:'₹ X.XL',l:'EBITDA'}].map(s=>(
            <div key={s.l} style={{flex:1,background:'rgba(33,54,108,.06)',border:'1.5px solid rgba(33,54,108,.12)',borderRadius:8,padding:'8px 10px',textAlign:'center'}}>
              <div style={{fontSize:16,fontWeight:800,color:'#21366C'}}>{s.n}</div>
              <div style={{fontSize:8,fontWeight:700,letterSpacing:'.08em',textTransform:'uppercase',color:'rgba(33,54,108,.5)',marginTop:2}}>{s.l}</div>
            </div>
          ))}
        </div>
        {['Revenue YTD','Pipeline Health','Burn Rate','Headcount'].map(t=>(
          <div key={t} style={{display:'flex',alignItems:'center',gap:8}}>
            <span style={{width:100,fontSize:9.5,fontWeight:500,color:'rgba(58,58,54,.7)',flexShrink:0}}>{t}</span>
            <div style={{flex:1,height:22,background:'rgba(33,54,108,.05)',border:'1.5px solid rgba(33,54,108,.1)',borderRadius:5}}/>
          </div>
        ))}
      </div>
    </div>
  );
  const Board_3 = () => <HDeckBody heading="Strategic Updates" items={4} />;

  // Investor Update — 3 slides
  const Inv_1 = () => <HDeck title="Investor Update" kicker="Tatava Studio · Q2 2025" sub="Building India's most trusted mental wellness practice" />;
  const Inv_2 = () => (
    <div className="hf-slide">
      <div className="hf-slide-head"><span className="hf-slide-title">Key Metrics</span><HLogo white={false} size={14} /></div>
      <div className="hf-slide-body">
        <div style={{display:'flex',gap:6,marginBottom:4}}>
          {[{n:'₹1.8L',l:'ARR'},{n:'142',l:'Clients'},{n:'94%',l:'NRR'},{n:'4.9★',l:'Rating'}].map(s=>(
            <div key={s.l} style={{flex:1,background:'rgba(33,54,108,.06)',border:'1.5px solid rgba(33,54,108,.12)',borderRadius:7,padding:'7px 8px',textAlign:'center'}}>
              <div style={{fontSize:14,fontWeight:800,color:'#21366C'}}>{s.n}</div>
              <div style={{fontSize:7.5,fontWeight:700,color:'rgba(33,54,108,.45)',marginTop:1}}>{s.l}</div>
            </div>
          ))}
        </div>
        <HChart h={80} label="ARR Growth trend" />
        <HChart h={60} label="Pipeline by channel" />
      </div>
    </div>
  );
  const Inv_3 = () => (
    <div className="hf-deck">
      <div className="hf-deck-bar"/>
      <div className="hf-deck-body" style={{alignItems:'center',textAlign:'center'}}>
        <div className="hf-deck-kicker">The Ask</div>
        <div style={{fontSize:42,fontWeight:800,color:'#EC7A35',lineHeight:.9,margin:'6px 0'}}>₹ X.X Cr</div>
        <div className="hf-deck-sub">Seed round to expand capacity, brand & Tatava Connect</div>
        {['Product & Engineering 45%','Sales & Marketing 35%','Working Capital 20%'].map((u,i)=>(
          <div key={u} style={{display:'flex',alignItems:'center',gap:8,width:'80%',marginTop:4}}>
            <span style={{fontSize:9,color:'rgba(255,255,255,.6)',flex:1,textAlign:'left'}}>{u}</span>
            <div style={{width:`${[45,35,20][i]}%`,height:12,borderRadius:3,background:'#EC7A35',opacity:.6+i*.12}}/>
          </div>
        ))}
      </div>
      <div className="hf-deck-foot"><HLogo white /><span className="hf-deck-tagline">Simplifying Wellness</span></div>
    </div>
  );

  const MBR = () => (
    <HDoc title="Monthly Business Review" badge="Internal" cat="Executive"
      stats={[{n:'On Track',l:'Goals'},{n:'↑12%',l:'Revenue'},{n:'3',l:'Risks'}]}
      sections={['Month Highlights','Revenue & Pipeline','Operations','People & Culture','Next Month Priorities']} />
  );
  const ExecSummary = () => (
    <HDoc title="Executive Summary" badge="Internal" cat="Executive"
      sections={['Business Overview','Key Results This Period','Challenges & Risks','Strategic Outlook','Decisions Required']} />
  );
  const DecisionMemo = () => (
    <HDoc title="Decision Memo" badge="Internal" cat="Executive"
      sections={[
        {label:'Decision Required', form:true},
        {label:'Background & Context', form:true, extra:true},
        {label:'Options Evaluated', form:true, extra:true},
        {label:'Recommendation & Rationale', form:true, extra:true},
        {label:'Approval & Sign-off', form:true},
      ]} />
  );
  const Partnership = () => (
    <HDoc title="Partnership Proposal" badge="Operational" cat="Executive"
      sections={['Executive Summary','Partner Profile & Fit','Opportunity Overview','Proposed Structure & Terms','Next Steps']}
      footer="Tatava Studio · +91 85957 48981 · tatavastudio.com" />
  );
  const DueDiligence = () => (
    <HDoc title="Due Diligence Checklist" badge="Internal" cat="Executive"
      sections={[
        {label:'Corporate & Legal', form:true},
        {label:'Financial Records', form:true},
        {label:'Product & Technology', form:true},
        {label:'Team & HR', form:true},
        {label:'Commercial & Customers', form:true},
      ]} />
  );

  window.HB_EXEC = [
    {id:'hex-01',name:'Board Deck',              w:WD,h:HD,isDeck:true,slides:[Board_1,Board_2,Board_3]},
    {id:'hex-02',name:'Investor Update',         w:WD,h:HD,isDeck:true,slides:[Inv_1,Inv_2,Inv_3]},
    {id:'hex-03',name:'Monthly Business Review', w:W, h:H, comp:MBR},
    {id:'hex-04',name:'Executive Summary',       w:W, h:H, comp:ExecSummary},
    {id:'hex-05',name:'Decision Memo',           w:W, h:H, comp:DecisionMemo},
    {id:'hex-06',name:'Partnership Proposal',    w:W, h:H, comp:Partnership},
    {id:'hex-07',name:'Due Diligence Checklist', w:W, h:H, comp:DueDiligence},
  ];

  // ── Export primitives to window for any external consumers ──
  Object.assign(window, { HMark, HLogo, HBadge, HLines, HField, HSection, HStats,
    HColorRow, HTable, HChart, HProgRow, HDoc, HDeck, HDeckBody, HSwot, HLane });

})();
