// Word Processor
function ModuleWord() {
  const [tab, setTab] = React.useState('Home');
  const tabs = ['File', 'Home', 'Insert', 'Layout', 'References', 'Review', 'View', 'AI Assist'];

  return (
    <div className="ks-module"
         style={{'--mod-current':'var(--mod-word)', '--mod-current-tint':'var(--mod-word-tint)'}}
         data-screen-label="word">
      {/* Doc bar */}
      <div style={{
        padding: '8px 16px',
        background:'var(--white)',
        borderBottom:'1px solid var(--ink-150)',
        display:'flex', alignItems:'center', gap:12,
      }}>
        <div style={{
          width:28, height:28, borderRadius:6,
          background: 'var(--mod-word)', color:'white',
          display:'grid', placeItems:'center', fontWeight:700, fontSize:12,
        }}>W</div>
        <div className="col" style={{lineHeight:1.2}}>
          <div style={{fontWeight:600, fontSize:13.5}}>Cabinet Note — Digital Public Infrastructure Roadmap</div>
          <div className="muted text-xs">MeitY · Draft v14 · Saved 12 min ago · <span style={{color:'var(--ok)'}}>All changes synced</span></div>
        </div>
        <div className="grow"/>
        <div className="row gap-2">
          {['SI','KN','PR','RB'].map((i, idx) => (
            <div key={i} style={{
              width:24, height:24, borderRadius:999,
              background:['#B45309','#0F7A3E','#0B4C8C','#6B4EA0'][idx],
              color:'white', fontSize:10, fontWeight:600,
              display:'grid', placeItems:'center',
              border:'2px solid var(--white)',
              marginLeft: idx === 0 ? 0 : -8,
              boxShadow: '0 0 0 1px var(--ink-200)',
            }} title="Editor">{i}</div>
          ))}
          <button className="btn" style={{marginLeft:8}}>{IC.comment} 4</button>
          <button className="btn">{IC.history} History</button>
          <button className="btn primary">{IC.share} Share</button>
        </div>
      </div>

      {/* Ribbon */}
      <div className="ks-ribbon">
        <div className="ks-ribbon-tabs">
          {tabs.map(t => (
            <button key={t} className={"ks-ribbon-tab " + (tab === t ? 'active' : '')}
                    onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>
        <div className="ks-ribbon-body">
          <div className="ks-ribbon-group">
            <div className="rb-select">Source Serif 4 <span style={{color:'var(--ink-400)'}}>{IC.chevronD}</span></div>
            <div className="rb-select" style={{minWidth:60}}>11 <span style={{color:'var(--ink-400)'}}>{IC.chevronD}</span></div>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn active">{IC.bold}</button>
            <button className="rb-btn">{IC.italic}</button>
            <button className="rb-btn">{IC.underline}</button>
            <button className="rb-btn"><div className="rb-swatch" style={{background:'#000'}}/>{IC.chevronD}</button>
            <button className="rb-btn"><div className="rb-swatch" style={{background:'#FEF3C7'}}/>{IC.chevronD}</button>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">{IC.align}</button>
            <button className="rb-btn">{IC.list}</button>
            <button className="rb-btn">{IC.list}</button>
          </div>
          <div className="ks-ribbon-group">
            <div className="rb-select" style={{minWidth:120}}>Heading 2 <span style={{color:'var(--ink-400)'}}>{IC.chevronD}</span></div>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">{IC.image} Image</button>
            <button className="rb-btn">{IC.table} Table</button>
            <button className="rb-btn">{IC.link} Link</button>
          </div>
          <div className="grow"/>
          <button className="btn ai">{IC.sparkles} Ask AI</button>
        </div>
      </div>

      {/* Document + margin comments */}
      <div style={{
        flex:1, overflow:'auto',
        background: 'var(--ink-100)',
        display:'flex', justifyContent:'center',
        padding: '28px 40px',
      }}>
        <div style={{display:'flex', gap: 24, alignItems:'flex-start'}}>
          {/* Page */}
          <div className="ks-page" style={{
            width: 780,
            minHeight: 1080,
            padding: '72px 88px',
            fontFamily: 'var(--f-serif)',
            fontSize: 14.5,
            lineHeight: 1.7,
            color: '#222',
          }}>
            <div style={{textAlign:'center', marginBottom:24}}>
              <div style={{fontSize: 11, letterSpacing:'0.14em', textTransform:'uppercase', color:'#666'}}>CONFIDENTIAL · CABINET SECRETARIAT</div>
              <h1 style={{fontSize: 22, fontWeight: 700, margin: '10px 0 4px', letterSpacing:'-0.01em'}}>
                Cabinet Note
              </h1>
              <div style={{fontSize:15, color:'#333'}}>Digital Public Infrastructure — National Roadmap 2026 – 2030</div>
              <div style={{fontSize: 12, color:'#666', marginTop: 6}}>File No. MeitY/DPI/2026/044 · 13 July 2026</div>
            </div>

            <div style={{
              display:'grid', gridTemplateColumns:'110px 1fr', gap:'4px 12px',
              fontSize:12.5, background:'#F7F5F2', padding:'12px 14px',
              borderLeft:'3px solid #0B4C8C', marginBottom:24,
            }}>
              <div style={{color:'#555'}}>Submitted by</div><div><b>Ministry of Electronics & Information Technology</b></div>
              <div style={{color:'#555'}}>For decision of</div><div>Cabinet Committee on Economic Affairs (CCEA)</div>
              <div style={{color:'#555'}}>Financial impact</div><div>₹ 42,180 crore (5-year outlay, phased)</div>
              <div style={{color:'#555'}}>Consulted</div><div>NITI Aayog, MoF (DEA), UIDAI, NPCI, RBI, NIC, C-DAC</div>
            </div>

            <h2 style={{fontSize: 16, fontWeight: 700, margin:'20px 0 8px'}}>1. Preamble</h2>
            <p>
              Over the last decade, India has built a set of open, interoperable digital rails —
              Aadhaar, UPI, DigiLocker, CoWIN, ONDC, AA — that today serve as global exemplars of
              population-scale digital public infrastructure. This note proposes the next phase of
              investment, governance, and expansion for the period{' '}
              <span style={{background:'#DBEAFE', padding:'0 2px'}}>2026-27 through 2030-31</span>.
            </p>

            <h2 style={{fontSize: 16, fontWeight: 700, margin:'20px 0 8px'}}>2. Strategic Objectives</h2>
            <ol style={{paddingLeft: 22, margin: '8px 0'}}>
              <li>Universalise access to a verifiable digital identity layer with strong privacy guarantees under the DPDP Act, 2023.</li>
              <li>
                <span style={{textDecoration:'line-through', color:'#B91C1C'}}>Consolidate</span>
                <span style={{color:'#0F7A3E', background:'#E4F3EB', padding:'0 3px', margin:'0 3px'}}>Federate</span>
                fragmented state-level service platforms into a common consent-based fabric.
              </li>
              <li>Extend account aggregator and data-fiduciary infrastructure to health, agriculture, and skilling verticals.</li>
              <li>Establish a sovereign compute and model layer to support Indic-language AI at population scale.</li>
            </ol>

            <h2 style={{fontSize: 16, fontWeight: 700, margin:'20px 0 8px'}}>3. Proposed Interventions</h2>
            <p><b>3.1 Identity & authentication.</b> Modernise Aadhaar authentication APIs to support offline verification, delegated authorisation, and revocable virtual identifiers. A phased rollout across all Central Ministries is proposed by Q2 FY 2027-28.</p>

            <p style={{
              background:'#FEF3C7',
              padding:'8px 12px',
              borderLeft:'3px solid #B45309',
              margin:'8px 0',
              fontSize:13,
            }}>
              <b>3.2 Consent & data-sharing (open for review).</b> Expand the Account Aggregator
              framework to non-financial sectors. Establish independent Consent Managers under a
              statutory oversight body. Data-sharing to be default-off, purpose-bound, and time-limited.
            </p>

            <p><b>3.3 Public compute.</b> Provision 25,000+ GPUs and 4 sovereign data centres (Bengaluru, Mumbai, Hyderabad, Bhubaneswar) through a Public–Private Partnership model. Access to be granted via a peer-reviewed proposal process for research and public-interest applications.</p>

            <h2 style={{fontSize: 16, fontWeight: 700, margin:'20px 0 8px'}}>4. Financial Implications</h2>
            <p>Total outlay of <b>₹ 42,180 crore</b> over five years, phased as under. Non-Plan support of ₹ 1,120 crore for programme management and monitoring is included.</p>
          </div>

          {/* Comment margin */}
          <div className="col gap-3" style={{width: 260, marginTop: 12}}>
            {[
              { who:'S. Iyer', init:'SI', color:'#B45309', when:'2h ago', body:'On 3.2 — recommend we specify that Consent Managers report to a statutory body rather than an executive one. Aligns with DPDP §17.', anchor: 'Consent & data-sharing' },
              { who:'K. Nair', init:'KN', color:'#0F7A3E', when:'4h ago', body:'Should we clarify that "federated" means state autonomy over their citizen datasets? Otherwise this reads like centralisation.', anchor: 'Federate fragmented' },
              { who:'P. Ramesh', init:'PR', color:'#0B4C8C', when:'Yesterday', body:'Financial impact figure needs vetting by MoF-DEA before circulation.', anchor: '₹ 42,180 crore', resolved: true },
              { who:'Karya AI', init:'K', color:'#7C3AED', when:'Suggestion', body:'Section 3.3 could quantify expected utilisation — e.g., "supporting research from 200+ institutions and 40 line ministries." Want me to draft?', ai: true },
            ].map((c, i) => (
              <div key={i} style={{
                background:'var(--white)',
                border:'1px solid var(--ink-200)',
                borderRadius: 'var(--r-md)',
                padding: '10px 12px',
                fontSize: 12.5,
                boxShadow: 'var(--sh-1)',
                opacity: c.resolved ? 0.55 : 1,
              }}>
                <div className="row gap-2" style={{marginBottom:6}}>
                  <div style={{
                    width:22, height:22, borderRadius:999,
                    background: c.color, color:'white',
                    display:'grid', placeItems:'center',
                    fontSize:9.5, fontWeight:600,
                  }}>{c.init}</div>
                  <div className="col" style={{gap:0, lineHeight:1.2, flex:1}}>
                    <div style={{fontSize:12, fontWeight:600}}>{c.who} {c.ai && <span className="chip purple" style={{marginLeft:4, padding:'1px 6px', fontSize:10}}>AI</span>}</div>
                    <div className="muted text-xs">{c.when}</div>
                  </div>
                  {c.resolved && <span className="chip ok" style={{fontSize:10, padding:'1px 6px'}}>✓ Resolved</span>}
                </div>
                {c.anchor && <div style={{
                  fontSize:11, color: c.color, background:'color-mix(in oklab, ' + c.color + ' 12%, white)',
                  padding:'2px 6px', borderRadius:3, marginBottom:6, fontFamily:'var(--f-serif)',
                }}>“{c.anchor}”</div>}
                <div style={{color:'var(--ink-700)', lineHeight:1.5}}>{c.body}</div>
                {!c.resolved && (
                  <div className="row gap-2" style={{marginTop:8}}>
                    <button className="btn ghost" style={{height:24, padding:'0 8px', fontSize:11}}>Reply</button>
                    <button className="btn ghost" style={{height:24, padding:'0 8px', fontSize:11}}>Resolve</button>
                    {c.ai && <button className="btn ai" style={{height:24, padding:'0 8px', fontSize:11}}>Apply</button>}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Status bar */}
      <div style={{
        borderTop:'1px solid var(--ink-150)',
        background:'var(--white)',
        padding:'6px 14px',
        display:'flex', alignItems:'center', gap:16,
        fontSize:11.5, color:'var(--ink-600)',
      }}>
        <span>Page 1 of 12</span>
        <span>2,847 words</span>
        <span className="row gap-2">{IC.check} Grammar clean</span>
        <span className="row gap-2" style={{color:'var(--warn)'}}>{IC.penTool} 3 tracked changes</span>
        <div className="grow"/>
        <span className="row gap-2">{IC.eye} Editing mode</span>
        <span>100%</span>
        <span>{IC.plus} Zoom</span>
      </div>
    </div>
  );
}

window.ModuleWord = ModuleWord;