// PDF Studio
function ModulePDF() {
  const [tool, setTool] = React.useState('annotate');

  return (
    <div className="ks-module"
         style={{'--mod-current':'var(--mod-pdf)', '--mod-current-tint':'var(--mod-pdf-tint)'}}
         data-screen-label="pdf">
      <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-pdf)', color:'white', display:'grid', placeItems:'center', fontWeight:700, fontSize:11}}>PDF</div>
        <div className="col" style={{lineHeight:1.2}}>
          <div style={{fontWeight:600, fontSize:13.5}}>Gazette Notification 2026/EL/1129</div>
          <div className="muted text-xs">Signed · PDF/A-3 · 8 pages · <span style={{color:'var(--ok)'}}>Digital signature verified</span></div>
        </div>
        <div className="grow"/>
        <button className="btn">{IC.download} Export</button>
        <button className="btn">{IC.signature} Sign</button>
        <button className="btn primary">{IC.share} Share</button>
      </div>

      <div className="ks-ribbon">
        <div className="ks-ribbon-tabs">
          {['File','Edit','Annotate','Redact','Forms','Compare','Sign','AI'].map(t => (
            <button key={t} className={"ks-ribbon-tab " + (t === 'Annotate' ? 'active' : '')}>{t}</button>
          ))}
        </div>
        <div className="ks-ribbon-body">
          <div className="ks-ribbon-group">
            <button className={"rb-btn " + (tool==='annotate'?'active':'')} onClick={()=>setTool('annotate')}>{IC.penTool} Highlight</button>
            <button className="rb-btn">Underline</button>
            <button className="rb-btn">Strike</button>
            <button className="rb-btn">{IC.comment} Note</button>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">{IC.eraser} Redact</button>
            <button className="rb-btn">Watermark</button>
            <button className="rb-btn">{IC.lock} Encrypt</button>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">Merge</button>
            <button className="rb-btn">Split</button>
            <button className="rb-btn">Rotate</button>
          </div>
          <div className="ks-ribbon-group">
            <button className="rb-btn">Text field</button>
            <button className="rb-btn">Checkbox</button>
            <button className="rb-btn">{IC.signature} Signature field</button>
          </div>
          <div className="grow"/>
          <button className="btn ai">{IC.sparkles} Summarise</button>
        </div>
      </div>

      <div style={{flex:1, display:'flex', overflow:'hidden'}}>
        {/* Thumb rail */}
        <div style={{width:150, background:'var(--ink-50)', borderRight:'1px solid var(--ink-150)', overflow:'auto', padding:'14px 12px'}}>
          <div className="col gap-3">
            {[1,2,3,4,5,6,7,8].map(n => (
              <div key={n} style={{
                aspectRatio:'0.77',
                background:'var(--white)',
                border: n === 1 ? '2px solid var(--mod-pdf)' : '1px solid var(--ink-200)',
                borderRadius:3,
                padding: '10px 8px',
                fontSize: 5,
                position:'relative',
                overflow: 'hidden',
              }}>
                <div style={{height:6, background:'var(--ink-200)', width:'70%', marginBottom:4}}/>
                <div style={{height:2.5, background:'var(--ink-150)', marginBottom:2}}/>
                <div style={{height:2.5, background:'var(--ink-150)', marginBottom:2, width:'90%'}}/>
                <div style={{height:2.5, background:'var(--ink-150)', marginBottom:2, width:'85%'}}/>
                <div style={{height:2.5, background:'var(--ink-150)', marginBottom:2, width:'92%'}}/>
                <div style={{height:2.5, background:'var(--ink-150)', marginBottom:2, width:'70%'}}/>
                <div style={{position:'absolute', bottom:4, right:6, fontSize:8, color:'var(--ink-500)', fontWeight:600}}>{n}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Doc canvas */}
        <div style={{flex:1, overflow:'auto', background:'#4A5568', padding:'28px', display:'flex', justifyContent:'center'}}>
          <div style={{
            width: 720,
            background:'#fefdf8',
            padding: '60px 68px',
            fontFamily:'var(--f-serif)',
            fontSize:12.5,
            lineHeight:1.65,
            color:'#222',
            boxShadow:'0 12px 40px rgba(0,0,0,0.35)',
            position:'relative',
            minHeight: 1000,
          }}>
            {/* Gazette header */}
            <div style={{textAlign:'center', borderBottom:'2px double #666', paddingBottom:14, marginBottom:18}}>
              <div style={{color:'var(--mod-pdf)', fontSize:10, letterSpacing:'0.18em', fontWeight:600}}>REGISTERED · No. DL—(N)04/0007/2003—26</div>
              <h1 style={{fontSize:24, fontWeight:700, margin:'6px 0 2px', color:'#8B0000'}}>The Gazette of India</h1>
              <div style={{fontSize:10, letterSpacing:'0.14em'}}>EXTRAORDINARY · भारत का राजपत्र</div>
              <div style={{fontSize:11, marginTop:8, color:'#555'}}>PART II — Section 3 — Sub-section (i) · PUBLISHED BY AUTHORITY</div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', fontSize:11, marginBottom:14}}>
              <div><b>No. 1129]</b> NEW DELHI, TUESDAY, JULY 13, 2026</div>
              <div style={{textAlign:'right'}}>ASHADHA 22, 1948</div>
            </div>

            <div style={{textAlign:'center', margin:'10px 0'}}>
              <div style={{fontSize:12, letterSpacing:'0.05em', fontWeight:700}}>MINISTRY OF ELECTRONICS AND INFORMATION TECHNOLOGY</div>
              <div style={{fontSize:11, marginTop:2}}>NOTIFICATION</div>
              <div style={{fontSize:11, marginTop:2}}>New Delhi, the 12th July, 2026</div>
            </div>

            <p style={{marginTop:20}}>
              <b>G.S.R. 447(E).—</b> In exercise of the powers conferred by sub-section (1) of section 6 read with
              clause (b) of sub-section (2) of section 6 of the Digital Personal Data Protection Act, 2023
              (11 of 2023), the Central Government hereby makes the following rules, namely:—
            </p>

            <p style={{marginTop:14}}>
              <b>1. Short title and commencement.</b> — (1) These rules may be called the Digital Personal Data
              Protection (Consent Manager) Rules, 2026.
            </p>
            <p style={{marginLeft:20}}>(2) They shall come into force on the date of their publication in the Official Gazette.</p>

            <p style={{marginTop:14}}>
              <b>2. Definitions.</b> — In these rules, unless the context otherwise requires,—
            </p>
            <p style={{marginLeft:20}}>
              (a) “<u>consent artefact</u>” means an electronic record of a Data Principal’s consent, in the
              form specified in the Schedule;
            </p>
            <p style={{marginLeft:20}}>
              (b){' '}
              <span style={{background:'#FEF3C7', padding:'0 3px', outline:'1px solid #B45309', outlineOffset:2}}>
                “<u>Consent Manager</u>” shall have the meaning assigned to it in clause (g) of sub-section (1)
                of section 2 of the Act;
              </span>
              {/* comment pin */}
              <span style={{
                display:'inline-block', width:16, height:16, borderRadius:'50%',
                background:'#B45309', color:'white', fontSize:10, fontWeight:700,
                textAlign:'center', lineHeight:'16px', marginLeft:6, position:'relative', top:-6,
              }}>1</span>
            </p>

            <p style={{marginTop:14}}>
              <b>3. Registration of Consent Managers.</b> — Every entity intending to operate as a Consent
              Manager shall register itself with the Data Protection Board of India in Form-1 of the Schedule
              and shall satisfy the following conditions —
            </p>

            {/* Signature block */}
            <div style={{marginTop:60, paddingTop: 18, borderTop:'1px dashed #999'}}>
              <div style={{display:'grid', gridTemplateColumns:'1fr auto', alignItems:'end', gap:20}}>
                <div style={{fontSize:11, color:'#555'}}>
                  [F. No. MeitY/DPDP/2026/047]<br/>
                  <span style={{marginTop:6, display:'inline-block'}}>Yours faithfully,</span><br/><br/>
                  <b style={{fontFamily:'var(--f-serif)', fontStyle:'italic', fontSize:15}}>P. Ramesh</b><br/>
                  <span>Joint Secretary</span>
                </div>
                <div style={{
                  border:'1.5px solid var(--ok)', borderRadius:8,
                  padding:'8px 12px', fontSize:10.5, color:'var(--ok)',
                  background:'#F0FAF4',
                  minWidth:180,
                  fontFamily:'var(--f-sans)',
                }}>
                  <div className="row gap-2" style={{marginBottom:4}}>
                    {IC.shieldCheck}
                    <b>Digitally signed</b>
                  </div>
                  <div style={{fontSize:10, lineHeight:1.5, color:'#0F7A3E'}}>
                    P. Ramesh (JS, MeitY)<br/>
                    12 Jul 2026, 18:24 IST<br/>
                    NIC-CA (Class 3)<br/>
                    SHA-256 · RSA-4096
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Right: annotations + AI */}
        <div style={{width:280, background:'var(--white)', borderLeft:'1px solid var(--ink-150)', display:'flex', flexDirection:'column', overflow:'hidden'}}>
          <div style={{padding:12, borderBottom:'1px solid var(--ink-150)'}}>
            <div style={{fontSize:12, fontWeight:600}}>Annotations · 6</div>
          </div>
          <div style={{flex:1, overflow:'auto', padding:'8px 12px'}}>
            <div className="col gap-3">
              {[
                {n:1, who:'S. Iyer', p:'Should read "means an entity registered under Rule 3 (1)"'},
                {n:2, who:'K. Nair', p:'Cross-reference to DPDP §17 needed here.'},
                {n:3, who:'AI', p:'Detected PII in Schedule Form-1, Field 3(c). Recommend redaction before public release.'},
              ].map(a => (
                <div key={a.n} style={{padding:10, background:'var(--ink-50)', borderRadius:8, fontSize:12}}>
                  <div className="row gap-2" style={{marginBottom:4}}>
                    <div style={{width:18, height:18, borderRadius:'50%', background:'#B45309', color:'white', fontSize:10, fontWeight:700, display:'grid', placeItems:'center'}}>{a.n}</div>
                    <b>{a.who}</b>
                    {a.who === 'AI' && <span className="chip purple" style={{fontSize:10, padding:'1px 6px'}}>AI</span>}
                  </div>
                  <div style={{color:'var(--ink-700)', lineHeight:1.5}}>{a.p}</div>
                </div>
              ))}
            </div>

            <div style={{marginTop:16, padding:12, background:'linear-gradient(135deg, #F7F3FF, #FCFAFF)', borderRadius:8, border:'1px solid #E4D6FA'}}>
              <div className="row gap-2" style={{marginBottom:6}}>
                <div className="ai-avatar" style={{width:22, height:22, fontSize:10, borderRadius:6}}>K</div>
                <b style={{fontSize:12}}>Summary</b>
              </div>
              <div style={{fontSize:12, lineHeight:1.55, color:'var(--ink-700)'}}>
                This notification operationalises Consent Managers under §6 of the DPDP Act, 2023.
                It defines eligibility, registration process (Form-1), and reporting obligations.
                Cross-references: §2(g), §17.
              </div>
              <div className="row gap-2" style={{marginTop:8, flexWrap:'wrap'}}>
                <button className="chip purple" style={{cursor:'pointer', fontSize:11}}>Compare with draft</button>
                <button className="chip purple" style={{cursor:'pointer', fontSize:11}}>Explain in हिन्दी</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ModulePDF = ModulePDF;