// Long-scroll product sections below the workstation
function DocSections() {
  return (
    <div className="doc">
      <StripDivider items={[
        'Enterprise GIS Platform',
        'AI-powered Geospatial Analytics',
        'OGC + NSDI Compliant',
        'Digital India Ready',
        'Sovereign Cloud Deployable'
      ]}/>

      <ModulesSection />
      <AISection />
      <ThreeDSection />
      <MobileSection />
      <AnalyticsSection />
      <DashboardSection />
      <IoTSection />
      <IntegrationsSection />
      <DeploymentSection />
      <SecuritySection />
      <ReportingSection />
      <ComplianceSection />
      <TechStackSection />
      <UseCaseSection />
      <IndustriesSection />
      <Footer />
    </div>
  );
}

// ------------------ Strip Divider ------------------
function StripDivider({ items }) {
  return (
    <div className="strip">
      {items.map((t, i) => (
        <span className="strip-item" key={i}>
          <span className="amber">◆</span>{t}
        </span>
      ))}
    </div>
  );
}

// ------------------ Section: Modules ------------------
function ModulesSection() {
  return (
    <div className="doc-section" data-screen-label="02 Modules">
      <div className="section-eyebrow">Section 01 · Platform Modules</div>
      <h2 className="section-title">Ten core modules covering the full <span className="amber">spatial data lifecycle</span> — from collection to decision support.</h2>
      <p className="section-lede">Every module ships enabled. Configure per-role access, deploy incrementally, and swap components without disturbing your data pipelines. Built for the scale of state and national programmes.</p>

      <div className="modules-grid">
        {window.MODULES.map(m => (
          <div className="mod-card" key={m.num}>
            <div className="mod-num">MODULE · {m.num}</div>
            <div className="mod-icon"><ModIcon num={m.num}/></div>
            <div className="mod-name">{m.name}</div>
            <div className="mod-desc">{m.desc}</div>
            <div className="mod-tags">
              {m.tags.slice(0, 5).map(t => <div className="mod-tag" key={t}>{t}</div>)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ModIcon({ num }) {
  const common = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const s = { width: 36, height: 36 };
  switch (num) {
    case '01': return <svg style={s} viewBox="0 0 32 32" {...common}><polygon points="4 8 12 4 20 8 28 4 28 24 20 28 12 24 4 28"/><path d="M12 4v20M20 8v20"/></svg>;
    case '02': return <svg style={s} viewBox="0 0 32 32" {...common}><ellipse cx="16" cy="7" rx="10" ry="3.5"/><path d="M6 7v18a10 3.5 0 0020 0V7"/><path d="M6 16a10 3.5 0 0020 0"/></svg>;
    case '03': return <svg style={s} viewBox="0 0 32 32" {...common}><path d="M22 4l6 6-14 14H8v-6z"/><path d="M18 8l6 6"/></svg>;
    case '04': return <svg style={s} viewBox="0 0 32 32" {...common}><rect x="4" y="8" width="10" height="16"/><rect x="14" y="4" width="14" height="20"/><path d="M8 12v4M8 20v0M18 8v4M18 16v4M24 8v4M24 16v4"/></svg>;
    case '05': return <svg style={s} viewBox="0 0 32 32" {...common}><path d="M16 4l3 6h6l-5 4 2 7-6-4-6 4 2-7-5-4h6z"/><circle cx="16" cy="24" r="3"/></svg>;
    case '06': return <svg style={s} viewBox="0 0 32 32" {...common}><path d="M4 26l6-14h12l6 14M8 26h16M14 12V6h4v6"/></svg>;
    case '07': return <svg style={s} viewBox="0 0 32 32" {...common}><circle cx="8" cy="8" r="3"/><circle cx="24" cy="8" r="3"/><circle cx="8" cy="24" r="3"/><circle cx="24" cy="24" r="3"/><circle cx="16" cy="16" r="3"/><path d="M11 8h10M8 11v10M24 11v10M11 24h10M13 13l-2-2M19 13l2-2M13 19l-2 2M19 19l2 2"/></svg>;
    case '08': return <svg style={s} viewBox="0 0 32 32" {...common}><circle cx="16" cy="16" r="10"/><path d="M6 16h20M16 6a14 14 0 010 20M16 6a14 14 0 000 20"/></svg>;
    case '09': return <svg style={s} viewBox="0 0 32 32" {...common}><circle cx="6" cy="6" r="2.5"/><circle cx="26" cy="6" r="2.5"/><circle cx="6" cy="26" r="2.5"/><circle cx="26" cy="26" r="2.5"/><rect x="12" y="12" width="8" height="8"/><path d="M8 8l4 4M24 8l-4 4M8 24l4-4M24 24l-4-4"/></svg>;
    case '10': return <svg style={s} viewBox="0 0 32 32" {...common}><path d="M4 22l12-8 12 8-12 6z"/><path d="M4 22v-6l12-8 12 8v6M16 14v6M16 20v8"/></svg>;
    default: return null;
  }
}

// ------------------ Section: AI ------------------
function AISection() {
  return (
    <div className="doc-section dark" data-screen-label="03 AI">
      <div className="section-eyebrow">Section 02 · GeoAI</div>
      <h2 className="section-title">AI models trained on <span className="amber">Indian terrain, crops, and cadastre</span> — running inside your cloud, or fully offline.</h2>
      <p className="section-lede">Sixteen production model classes cover automatic detection, segmentation, change detection, and prediction. Every inference is auditable — source imagery, model version, confidence, and a chain-of-evidence attach to the geometry.</p>

      <div className="bento">
        {/* Feature detection viz */}
        <div className="bento-cell" style={{ gridColumn: 'span 3', gridRow: 'span 2', padding: 0 }}>
          <AIDetectionViz />
        </div>

        {window.AI_FEATURES.slice(0, 6).map((f, i) => (
          <div className="bento-cell" key={f.name} style={{ gridColumn: 'span 3' }}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
              <h3>{f.name}</h3>
              <span className="chip amber mono">{f.kpi}</span>
            </div>
            <p>{f.desc}</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24, fontFamily:'var(--font-mono)' }}>
        {[
          { k: '2.4M', v: 'features detected · last 30 days' },
          { k: '96.3%',v: 'mean model precision (mAP@0.5)' },
          { k: '18',   v: 'production model classes' },
          { k: '<220ms', v: 'inference · single tile (GPU)' },
        ].map(s => (
          <div key={s.k} style={{ borderTop: '1px solid var(--navy-700)', paddingTop: 16 }}>
            <div style={{ fontSize: 32, fontWeight: 600, color: 'var(--amber-400)' }}>{s.k}</div>
            <div style={{ fontSize: 11, color: 'var(--navy-300)', marginTop: 4, textTransform:'uppercase', letterSpacing: '0.06em' }}>{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AIDetectionViz() {
  // Mock satellite tile with AI overlays
  return (
    <div style={{ position:'relative', width:'100%', height:'100%', overflow:'hidden' }}>
      <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style={{position:'absolute', inset:0, width:'100%', height:'100%', display:'block'}}>
        <defs>
          <pattern id="crop-a" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(15)">
            <rect width="20" height="20" fill="#3a5a2e"/>
            <line x1="0" y1="10" x2="20" y2="10" stroke="#4d7038" strokeWidth="1.5"/>
          </pattern>
          <pattern id="crop-b" width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(-40)">
            <rect width="14" height="14" fill="#6b7a3a"/>
            <line x1="0" y1="7" x2="14" y2="7" stroke="#8a9848" strokeWidth="1.2"/>
          </pattern>
          <pattern id="urban" width="8" height="8" patternUnits="userSpaceOnUse">
            <rect width="8" height="8" fill="#4a3e35"/>
            <rect x="1" y="1" width="2" height="2" fill="#6a5a48"/>
            <rect x="5" y="4" width="2" height="2" fill="#7a6a55"/>
          </pattern>
        </defs>
        {/* Sat imagery background — mixture of crops, urban, water */}
        <rect x="0" y="0" width="400" height="300" fill="#2a3a2a"/>
        <polygon points="0,0 220,0 240,180 0,200" fill="url(#crop-a)"/>
        <polygon points="220,0 400,0 400,140 240,180" fill="url(#crop-b)"/>
        <polygon points="0,200 240,180 260,300 0,300" fill="url(#urban)"/>
        <polygon points="240,180 400,140 400,300 260,300" fill="#334148"/>
        {/* River */}
        <path d="M-10,90 Q90,110 160,140 T400,200" stroke="#4a90c8" strokeWidth="14" fill="none" opacity="0.85"/>
        <path d="M-10,90 Q90,110 160,140 T400,200" stroke="#6fb0d8" strokeWidth="4" fill="none" opacity="0.6"/>

        {/* AI detection bboxes */}
        <g fill="none" strokeWidth="1.3">
          <rect x="30" y="40" width="80" height="60" stroke="#e8a33d" strokeDasharray="4 3"/>
          <text x="30" y="34" fontSize="9" fill="#e8a33d" fontFamily="var(--font-mono)">CROP_KHARIF · 0.96</text>

          <rect x="140" y="20" width="70" height="55" stroke="#e8a33d" strokeDasharray="4 3"/>
          <text x="140" y="14" fontSize="9" fill="#e8a33d" fontFamily="var(--font-mono)">CROP_KHARIF · 0.94</text>

          <rect x="250" y="30" width="90" height="70" stroke="#7bc38c" strokeDasharray="4 3"/>
          <text x="250" y="24" fontSize="9" fill="#7bc38c" fontFamily="var(--font-mono)">CROP_RABI · 0.89</text>

          <rect x="60" y="210" width="130" height="70" stroke="#ff8560" strokeDasharray="4 3"/>
          <text x="60" y="204" fontSize="9" fill="#ff8560" fontFamily="var(--font-mono)">BUILT_UP · 0.99</text>

          <rect x="280" y="220" width="90" height="70" stroke="#5a9adc" strokeDasharray="4 3"/>
          <text x="280" y="214" fontSize="9" fill="#5a9adc" fontFamily="var(--font-mono)">WATER · 0.98</text>

          <rect x="200" y="120" width="60" height="42" stroke="#ff5a5a" strokeDasharray="2 2" strokeWidth="1.6"/>
          <text x="200" y="115" fontSize="9" fill="#ff8080" fontFamily="var(--font-mono)">ENCROACH · 0.91</text>
        </g>

        {/* Segmentation contour overlay */}
        <g opacity="0.5" fill="none" stroke="#e8a33d" strokeWidth="0.6">
          <path d="M 30 40 L 110 40 L 110 100 L 30 100 Z"/>
          <path d="M 250 30 Q 290 60 340 100 L 250 100 Z"/>
        </g>
      </svg>

      {/* Overlaid caption */}
      <div style={{ position:'absolute', bottom: 16, left: 16, right: 16, display:'flex', gap: 16, alignItems:'flex-end' }}>
        <div>
          <div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'#e8a33d', textTransform:'uppercase', letterSpacing:'0.08em' }}>Sentinel-2 · 2026-07-11 · GeoAI v2.7</div>
          <div style={{ fontSize: 18, fontWeight: 600, color: '#f5f1e8', marginTop: 4, maxWidth: 420 }}>Automatic classification of crops, water, built-up and encroachment — with pixel-level attribution.</div>
        </div>
      </div>
    </div>
  );
}

// ------------------ Section: 3D & Twin ------------------
function ThreeDSection() {
  return (
    <div className="doc-section paper" data-screen-label="04 3D">
      <div className="section-eyebrow">Section 03 · 3D & Digital Twin</div>
      <h2 className="section-title">Cities and infrastructure — modelled to <span className="amber">building level of detail</span>, integrated with BIM and IoT.</h2>
      <p className="section-lede">Fuse Survey-of-India terrain, drone-derived meshes, and BIM models into a single navigable twin. Slice underground utilities, inspect building interiors, run viewshed and shadow analysis at city scale.</p>

      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap: 24 }}>
        <div style={{ height: 460, background:'var(--paper-50)', border:'1px solid var(--paper-300)', position:'relative', overflow:'hidden' }}>
          <IsoCity />
          <div style={{ position:'absolute', bottom: 16, left: 16, fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-500)' }}>
            <div style={{fontSize:9, color:'var(--amber-500)', letterSpacing:'0.1em'}}>DIGITAL TWIN · LIVE</div>
            <div style={{fontSize:14, color:'var(--navy-900)', marginTop:2, fontFamily:'var(--font-sans)', fontWeight:600}}>Pune Municipal Digital Twin</div>
            <div>Buildings: 12,842 · BIM linked: 217 · IoT: 1,204</div>
          </div>
          <div style={{ position:'absolute', top: 16, right: 16, display:'flex', gap: 6 }}>
            {['LOD1','LOD2','LOD3','BIM'].map(l => (
              <span key={l} className="chip navy" style={{fontFamily:'var(--font-mono)', fontSize:10}}>{l}</span>
            ))}
          </div>
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          {[
            { k: '3D Terrain',            v: 'SRTM 30m, CartoDEM 10m, LiDAR 0.5m' },
            { k: 'City Models',           v: 'CityGML LOD1 → LOD3' },
            { k: 'BIM Integration',       v: 'IFC 4, Revit, ArchiCAD' },
            { k: 'Indoor Mapping',        v: 'Floor plans, wayfinding, POIs' },
            { k: 'Underground Utilities', v: 'Depth-aware pipe & cable models' },
            { k: 'Viewshed & Shadow',     v: 'Real-time solar and line-of-sight' },
            { k: 'Rendering Engine',      v: 'CesiumJS · Three.js · WebGPU ready' },
          ].map(row => (
            <div key={row.k} style={{ display:'grid', gridTemplateColumns:'140px 1fr', gap: 12, paddingBottom: 12, borderBottom: '1px solid var(--paper-200)' }}>
              <div style={{ fontSize: 11, fontFamily:'var(--font-mono)', color:'var(--amber-600)', textTransform:'uppercase', letterSpacing:'0.06em' }}>{row.k}</div>
              <div style={{ fontSize: 13, color:'var(--ink-900)' }}>{row.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function IsoCity() {
  // Isometric city — grid of buildings with random heights
  const buildings = [];
  const cols = 14, rows = 9;
  const seed = (x, y) => ((x * 73856093) ^ (y * 19349663)) >>> 0;
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const r = (seed(x, y) % 100) / 100;
      if (r > 0.14) {
        const h = 20 + (r * 70);
        const w = 24;
        buildings.push({ x, y, h, w, tone: r });
      }
    }
  }
  const isoX = (x, y) => 80 + (x - y) * 26;
  const isoY = (x, y) => 200 + (x + y) * 14;

  return (
    <svg viewBox="0 0 640 460" style={{width:'100%', height:'100%', display:'block'}}>
      <defs>
        <linearGradient id="gnd" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#e8dfc9"/>
          <stop offset="1" stopColor="#d4c8ab"/>
        </linearGradient>
      </defs>
      {/* Ground plane */}
      <polygon points="80,200 480,440 640,340 240,100" fill="url(#gnd)" stroke="#a89870" strokeWidth="0.5"/>
      {/* Grid */}
      {Array.from({length: cols+1}, (_,i) => (
        <line key={'gx'+i} x1={isoX(i, 0)} y1={isoY(i, 0)} x2={isoX(i, rows)} y2={isoY(i, rows)} stroke="#b8a880" strokeWidth="0.3" opacity="0.5"/>
      ))}
      {Array.from({length: rows+1}, (_,i) => (
        <line key={'gy'+i} x1={isoX(0, i)} y1={isoY(0, i)} x2={isoX(cols, i)} y2={isoY(cols, i)} stroke="#b8a880" strokeWidth="0.3" opacity="0.5"/>
      ))}
      {/* Roads */}
      <polygon points={`${isoX(0,4)},${isoY(0,4)} ${isoX(cols,4)},${isoY(cols,4)} ${isoX(cols,4.6)},${isoY(cols,4.6)} ${isoX(0,4.6)},${isoY(0,4.6)}`} fill="#5a5a5a"/>
      <polygon points={`${isoX(6,0)},${isoY(6,0)} ${isoX(6,rows)},${isoY(6,rows)} ${isoX(6.6,rows)},${isoY(6.6,rows)} ${isoX(6.6,0)},${isoY(6.6,0)}`} fill="#5a5a5a"/>

      {/* Buildings sorted by depth */}
      {buildings
        .sort((a, b) => (a.x + a.y) - (b.x + b.y))
        .map((b, i) => {
          const baseX = isoX(b.x, b.y);
          const baseY = isoY(b.x, b.y);
          const isBIM = b.tone > 0.85;
          const isIoT = b.tone > 0.6 && b.tone < 0.7;
          const roof = isBIM ? '#e8a33d' : isIoT ? '#7bc38c' : '#c9d0d6';
          const light = isBIM ? '#c98a20' : isIoT ? '#5a9c6d' : '#a8b0b8';
          const dark = isBIM ? '#a06a10' : isIoT ? '#3d7048' : '#7c848c';
          const top =    [[baseX, baseY - b.h], [baseX + 26, baseY - b.h - 14], [baseX + 52, baseY - b.h], [baseX + 26, baseY - b.h + 14]];
          const front =  [[baseX + 26, baseY + 14], [baseX + 52, baseY], [baseX + 52, baseY - b.h], [baseX + 26, baseY - b.h + 14]];
          const right =  [[baseX, baseY], [baseX + 26, baseY + 14], [baseX + 26, baseY - b.h + 14], [baseX, baseY - b.h]];
          return (
            <g key={i}>
              <polygon points={front.map(p => p.join(',')).join(' ')} fill={dark}/>
              <polygon points={right.map(p => p.join(',')).join(' ')} fill={light}/>
              <polygon points={top.map(p => p.join(',')).join(' ')} fill={roof} stroke="rgba(0,0,0,0.25)" strokeWidth="0.4"/>
              {/* Window dots */}
              {Array.from({length: Math.floor(b.h / 12)}, (_, k) => (
                <g key={k}>
                  <rect x={baseX + 30} y={baseY - 10 - k*12} width="3" height="3" fill="rgba(255,255,255,0.35)"/>
                  <rect x={baseX + 38} y={baseY - 10 - k*12} width="3" height="3" fill="rgba(255,255,255,0.35)"/>
                  <rect x={baseX + 46} y={baseY - 8 - k*12} width="3" height="3" fill="rgba(255,255,255,0.35)"/>
                </g>
              ))}
              {isIoT && (
                <circle cx={baseX + 26} cy={baseY - b.h} r="2.5" fill="#7bc38c" opacity="0.9">
                  <animate attributeName="opacity" values="0.9;0.3;0.9" dur="1.8s" repeatCount="indefinite"/>
                </circle>
              )}
            </g>
          );
        })
      }
      {/* Legend */}
      <g fontSize="9" fontFamily="var(--font-mono)">
        <rect x="14" y="14" width="8" height="8" fill="#e8a33d"/><text x="26" y="21" fill="#0a1a35">BIM-linked (217)</text>
        <rect x="14" y="28" width="8" height="8" fill="#7bc38c"/><text x="26" y="35" fill="#0a1a35">IoT sensor (1,204)</text>
        <rect x="14" y="42" width="8" height="8" fill="#c9d0d6"/><text x="26" y="49" fill="#0a1a35">LOD2 mesh</text>
      </g>
    </svg>
  );
}

// ------------------ Section: Mobile & Field ------------------
function MobileSection() {
  return (
    <div className="doc-section" data-screen-label="05 Mobile">
      <div className="section-eyebrow">Section 04 · Mobile & Field GIS</div>
      <h2 className="section-title">Field-first data collection for <span className="amber">low-connectivity environments</span> — from a village survey to a defense mission.</h2>
      <p className="section-lede">Offline-first Android and iOS apps sync back to the enterprise on demand. Digital forms, geo-tagged photos, voice notes, QR/barcode, and integrated GPS/DGPS/RTK devices.</p>

      <div className="mobile-showcase">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20 }}>
          {[
            { t: 'Offline Basemaps',   d: 'Pre-cache MBTiles, GeoTIFF, and WMTS pyramids to device. Downloads resume on flaky links; storage capped per project.' },
            { t: 'Digital Forms',      d: 'Drag-drop form builder with conditional logic, mandatory geo-tag, offline validation, and multi-language (12 Indian languages).' },
            { t: 'GPS / DGPS / RTK',   d: 'Bluetooth pairing with external receivers · <2 cm accuracy via NTRIP corrections · logs raw NMEA for audit.' },
            { t: 'Media Capture',      d: 'Geo-tagged photos with heading, voice notes, video walkarounds. All EXIF signed and hashed for chain-of-evidence.' },
            { t: 'QR / Barcode',       d: 'Scan asset tags to auto-populate the feature ID · works with utility RFID and standard EAN-13.' },
            { t: 'Sync & Conflict',    d: 'Delta sync back to PostGIS · three-way merge on conflict · admin arbitration UI on the desktop.' },
          ].map(x => (
            <div key={x.t} style={{ padding:'16px 0', borderTop:'1px solid var(--paper-300)' }}>
              <div style={{ fontFamily:'var(--font-mono)', color:'var(--amber-500)', fontSize: 10, textTransform:'uppercase', letterSpacing:'0.1em' }}>▸</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 6, color:'var(--navy-900)' }}>{x.t}</div>
              <div style={{ fontSize: 12, color:'var(--ink-500)', lineHeight: 1.55, marginTop: 4 }}>{x.d}</div>
            </div>
          ))}
        </div>

        <PhoneMock />
      </div>
    </div>
  );
}

function PhoneMock() {
  return (
    <div className="phone-frame">
      <div className="phone-notch"></div>
      <div className="phone-screen">
        {/* Status bar */}
        <div style={{ height: 30, background:'var(--navy-900)', color:'var(--paper-100)', padding:'8px 20px 0', display:'flex', justifyContent:'space-between', fontSize: 10, fontFamily:'var(--font-mono)' }}>
          <span>09:41</span>
          <span style={{display:'flex', gap:6}}><span>OFFLINE</span><span>●●●</span></span>
        </div>
        {/* App header */}
        <div style={{ padding: '10px 14px', background:'var(--navy-800)', color:'var(--paper-100)' }}>
          <div style={{ fontSize: 9, color:'var(--amber-400)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Field Survey · v3.4</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>KA-LIS · Parcel Verification</div>
        </div>
        {/* Mini map */}
        <div style={{ height: 200, background:'linear-gradient(135deg, #d8dfe6, #b5c2d0)', position:'relative', overflow:'hidden' }}>
          <svg viewBox="0 0 200 200" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
            {/* parcels */}
            {[
              [20,30,50,40],[70,30,40,60],[110,30,60,50],
              [20,70,50,45],[70,90,55,50],[130,80,45,55],
              [20,115,60,55],[80,140,55,50],[135,135,45,50],
            ].map((p, i) => (
              <rect key={i} x={p[0]} y={p[1]} width={p[2]} height={p[3]} fill={i===4?'#e8a33d':'#e8e0c8'} stroke="#8a9670" strokeWidth="0.5" opacity={i===4?0.7:0.9}/>
            ))}
            {/* road */}
            <path d="M 0 90 Q 60 100 100 105 T 200 130" stroke="#c94a3a" strokeWidth="3" fill="none" opacity="0.7"/>
            {/* current position */}
            <circle cx="100" cy="115" r="18" fill="rgba(45,90,160,0.2)"/>
            <circle cx="100" cy="115" r="6" fill="#2d5aa0" stroke="white" strokeWidth="2"/>
          </svg>
        </div>
        {/* Form */}
        <div style={{ padding: '12px 14px', display:'flex', flexDirection:'column', gap: 8, flex: 1, background:'var(--paper-50)' }}>
          <div style={{ fontSize: 10, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.08em', fontFamily:'var(--font-mono)' }}>Survey Form</div>

          <div style={{padding:'8px 10px', background:'white', border:'1px solid var(--paper-300)', borderRadius:3}}>
            <div style={{fontSize:9, color:'var(--ink-500)', textTransform:'uppercase'}}>Survey No.</div>
            <div style={{fontSize:13, fontWeight:500, fontFamily:'var(--font-mono)'}}>142/3B</div>
          </div>
          <div style={{padding:'8px 10px', background:'white', border:'1px solid var(--paper-300)', borderRadius:3}}>
            <div style={{fontSize:9, color:'var(--ink-500)', textTransform:'uppercase'}}>Owner</div>
            <div style={{fontSize:13, fontWeight:500}}>Ramesh K.</div>
          </div>
          <div style={{padding:'8px 10px', background:'white', border:'1px solid var(--paper-300)', borderRadius:3, display:'flex', justifyContent:'space-between'}}>
            <div>
              <div style={{fontSize:9, color:'var(--ink-500)', textTransform:'uppercase'}}>GPS (RTK)</div>
              <div style={{fontSize:11, fontFamily:'var(--font-mono)'}}>12.9716° N, 77.5946° E</div>
            </div>
            <span className="chip ok" style={{fontSize:9, alignSelf:'flex-start'}}>±1.2cm</span>
          </div>
          <button style={{padding:'10px', background:'var(--amber-500)', color:'white', border:0, borderRadius:3, fontSize:12, fontWeight:600, letterSpacing:'0.05em', marginTop:'auto'}}>SAVE OFFLINE · SYNC LATER</button>
        </div>
      </div>
    </div>
  );
}

// ------------------ Section: Analytics ------------------
function AnalyticsSection() {
  return (
    <div className="doc-section paper" data-screen-label="06 Analytics">
      <div className="section-eyebrow">Section 05 · Spatial Analytics</div>
      <h2 className="section-title">Fifteen ready-to-run analyses, plus a <span className="amber">visual model builder</span> for custom pipelines.</h2>
      <p className="section-lede">Compose analyses as reusable models. Chain buffer → overlay → statistics → export in a single graph. Publish as a service, schedule nightly, or expose as a REST endpoint for other systems.</p>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16 }}>
        {window.ANALYTICS.map((a, i) => (
          <div key={a.name} style={{ background:'var(--paper-50)', border:'1px solid var(--paper-300)', padding:'20px 16px', minHeight: 140 }}>
            <div style={{ marginBottom: 10 }}><AnalyticIcon kind={a.icon}/></div>
            <div style={{ fontSize: 13, fontWeight: 600, color:'var(--navy-900)' }}>{a.name}</div>
            <div style={{ fontSize: 10, color:'var(--ink-500)', fontFamily:'var(--font-mono)', marginTop: 4, textTransform:'uppercase' }}>{('0'+(i+1)).slice(-2)} · analysis</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 48, padding: 24, background:'var(--navy-900)', color:'var(--paper-100)', display:'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        <div>
          <div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--amber-400)', textTransform:'uppercase', letterSpacing:'0.1em' }}>Model Builder</div>
          <div style={{ fontSize: 20, fontWeight: 600, marginTop: 6, maxWidth: 400 }}>Wire inputs, analyses and outputs into a repeatable geoprocessing pipeline.</div>
          <div style={{ fontSize: 12, color:'var(--navy-300)', marginTop: 12, lineHeight: 1.6, maxWidth: 460 }}>
            Publish any model as a scheduled job, an API endpoint, or a mobile task. Version-controlled, parameter-driven, with full lineage from source to output.
          </div>
        </div>
        <div style={{ height: 200, position:'relative' }}>
          <svg viewBox="0 0 400 200" style={{width:'100%', height:'100%', display:'block'}}>
            {/* pipeline diagram */}
            {[
              { x: 20,  y: 90, l: 'Parcels', c: '#5a9adc' },
              { x: 20,  y: 30, l: 'LULC',    c: '#5a9adc' },
              { x: 130, y: 30, l: 'Buffer 15km', c: '#e8a33d' },
              { x: 130, y: 90, l: 'Intersect',   c: '#e8a33d' },
              { x: 240, y: 60, l: 'Statistics',  c: '#e8a33d' },
              { x: 350, y: 60, l: 'Report',   c: '#7bc38c' },
            ].map((n,i) => (
              <g key={i}>
                <rect x={n.x - 40} y={n.y - 12} width="80" height="24" rx="2" fill="transparent" stroke={n.c} strokeWidth="1.2"/>
                <text x={n.x} y={n.y + 4} textAnchor="middle" fontSize="10" fill="#f5f1e8" fontFamily="var(--font-mono)">{n.l}</text>
              </g>
            ))}
            {/* connections */}
            {[
              [60,30,90,30], [60,90,90,90], [170,30,200,60], [170,90,200,60], [280,60,310,60],
              [90,30,90,90] // fork indicator
            ].map((c,i) => (
              <line key={i} x1={c[0]} y1={c[1]} x2={c[2]} y2={c[3]} stroke="#6789b8" strokeWidth="1" markerEnd={i<5?"url(#arrow)":undefined}/>
            ))}
            <defs>
              <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
                <path d="M0,0 L6,3 L0,6 z" fill="#6789b8"/>
              </marker>
            </defs>
          </svg>
        </div>
      </div>
    </div>
  );
}

function AnalyticIcon({ kind }) {
  const common = { fill: 'none', stroke: '#0a1a35', strokeWidth: 1.2, strokeLinecap: 'round' };
  const s = { width: 40, height: 40 };
  const shapes = {
    buffer: <><circle cx="20" cy="20" r="14"/><circle cx="20" cy="20" r="8"/><circle cx="20" cy="20" r="1.5" fill="#0a1a35"/></>,
    overlay: <><rect x="8" y="8" width="18" height="18"/><rect x="16" y="16" width="18" height="18" fill="rgba(217,119,6,0.14)"/></>,
    proximity: <><circle cx="14" cy="14" r="2"/><circle cx="26" cy="26" r="2"/><line x1="14" y1="14" x2="26" y2="26" strokeDasharray="2 2"/></>,
    hotspot: <><circle cx="14" cy="14" r="3" fill="#d97706" stroke="none"/><circle cx="24" cy="20" r="4" fill="#d97706" stroke="none"/><circle cx="16" cy="28" r="3" fill="#d97706" stroke="none" opacity="0.5"/></>,
    density: <><line x1="8" y1="12" x2="32" y2="12"/><line x1="8" y1="20" x2="32" y2="20"/><line x1="8" y1="28" x2="32" y2="28"/><line x1="12" y1="8" x2="12" y2="32"/><line x1="20" y1="8" x2="20" y2="32"/><line x1="28" y1="8" x2="28" y2="32"/></>,
    suit: <><polygon points="20 6 25 15 35 17 27 24 29 34 20 29 11 34 13 24 5 17 15 15"/></>,
    route: <><circle cx="10" cy="30" r="2.5" fill="#0a1a35"/><circle cx="30" cy="10" r="2.5" fill="#d97706" stroke="#d97706"/><path d="M10 27C 10 20, 30 20, 30 13" strokeDasharray="3 2"/></>,
    catch: <><path d="M8 30L20 8L32 30Z"/><path d="M14 20L26 20"/></>,
    hydro: <><path d="M8 20Q14 8 20 20 T32 20"/><path d="M8 28Q14 20 20 28 T32 28"/></>,
    slope: <><path d="M6 30L34 10"/><path d="M6 30L34 30"/><path d="M34 30L34 10"/></>,
    visib: <><circle cx="20" cy="20" r="12"/><path d="M20 8L28 12M20 8L12 12M8 20L12 28M32 20L28 28"/></>,
    net: <><circle cx="10" cy="10" r="3"/><circle cx="30" cy="10" r="3"/><circle cx="20" cy="30" r="3"/><line x1="12" y1="12" x2="18" y2="28"/><line x1="28" y1="12" x2="22" y2="28"/><line x1="13" y1="10" x2="27" y2="10"/></>,
  };
  return <svg style={s} viewBox="0 0 40 40" {...common}>{shapes[kind]}</svg>;
}

// ------------------ Section: Dashboard ------------------
function DashboardSection() {
  const now = { day: 'Wed 15 Jul 2026', time: '10:02 IST' };
  const assets = window.DASHBOARD_ASSET_STATUS;
  const assetTotal = assets.reduce((s, a) => s + a.value, 0);

  return (
    <div className="doc-section dark" data-screen-label="07 Dashboard">
      <div className="section-eyebrow">Section 06 · Dashboards</div>
      <h2 className="section-title">A single <span className="amber">operations picture</span> — KPIs, live incidents, asset health and field teams, on the geography.</h2>
      <p className="section-lede">Executive, GIS, utility and incident dashboards built from the same spatial data. Every tile drills into the map. Configure per role, pin to a wall display, or export to a scheduled brief.</p>

      <div className="dash">
        {/* Dashboard chrome */}
        <div className="dash-bar">
          <div className="dash-title">
            <span className="dash-dot"></span>
            State GIS Command · Executive View
          </div>
          <div className="dash-meta">
            {window.DASHBOARD_TYPES.slice(0, 6).map((t, i) => (
              <span key={t} className={`dash-tab ${i === 0 ? 'active' : ''}`}>{t}</span>
            ))}
          </div>
          <div className="dash-clock mono">{now.day} · {now.time} · <span style={{color:'var(--amber-400)'}}>LIVE</span></div>
        </div>

        {/* KPI row */}
        <div className="dash-kpis">
          {window.DASHBOARD_KPIS.map(k => (
            <div className="dash-kpi" key={k.label}>
              <div className="dash-kpi-label">{k.label}</div>
              <div className="dash-kpi-value mono">{k.value}</div>
              <div className="dash-kpi-delta" style={{ color: k.tone === 'warn' ? 'var(--amber-400)' : 'var(--gis-forest)' }}>{k.delta}</div>
              <div className="dash-kpi-spark"><Sparkline values={k.trend} color={k.tone === 'warn' ? '#e8a33d' : '#7bc38c'} /></div>
            </div>
          ))}
        </div>

        {/* Main grid: choropleth map · charts · incident feed */}
        <div className="dash-grid">
          {/* Choropleth */}
          <div className="dash-panel dash-map">
            <div className="dash-panel-head">
              <span>Regional Load · Feature Density</span>
              <span className="mono" style={{color:'var(--navy-400)'}}>choropleth · 36 states</span>
            </div>
            <div className="dash-map-body">
              <svg viewBox="80 60 480 640" preserveAspectRatio="xMidYMid meet" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
                {(window.INDIA_STATES || []).map((s, i) => {
                  const seed = ((i * 2654435761) % 100) / 100;
                  const val = 0.18 + seed * 0.82;
                  const fill = `rgba(217,119,6,${(0.12 + val * 0.72).toFixed(2)})`;
                  return <path key={s.id} d={s.d} fill={fill} stroke="#16325f" strokeWidth="0.4"/>;
                })}
                {window.CITIES.filter(c => c.tier === 'metro').map(c => (
                  <circle key={c.id} cx={c.x} cy={c.y} r="3" fill="#e8a33d" stroke="#0a1a35" strokeWidth="0.6"/>
                ))}
              </svg>
              <div className="dash-map-scale">
                <span>Low</span>
                <div className="dash-map-ramp"></div>
                <span>High</span>
              </div>
            </div>
          </div>

          {/* Middle column: asset donut + regions */}
          <div className="dash-col">
            <div className="dash-panel">
              <div className="dash-panel-head"><span>Asset Status</span><span className="mono" style={{color:'var(--navy-400)'}}>{assetTotal.toLocaleString()}</span></div>
              <div style={{ display:'flex', alignItems:'center', gap: 16, padding: '4px 2px' }}>
                <Donut segments={assets} total={assetTotal} size={92} />
                <div style={{ display:'flex', flexDirection:'column', gap: 8, flex: 1 }}>
                  {assets.map(a => (
                    <div key={a.label} style={{ display:'flex', alignItems:'center', gap: 8, fontSize: 12 }}>
                      <span style={{ width: 9, height: 9, borderRadius: 2, background: a.tone, flexShrink: 0 }}></span>
                      <span style={{ color:'var(--navy-300)', flex: 1 }}>{a.label}</span>
                      <span className="mono" style={{ color:'var(--paper-100)' }}>{a.value.toLocaleString()}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="dash-panel" style={{ flex: 1 }}>
              <div className="dash-panel-head"><span>Top Regions · Load %</span></div>
              <div style={{ display:'flex', flexDirection:'column', gap: 7, paddingTop: 4 }}>
                {window.DASHBOARD_REGIONS.map(r => (
                  <div key={r.name} style={{ display:'flex', alignItems:'center', gap: 8, fontSize: 12 }}>
                    <span style={{ width: 96, color:'var(--navy-300)' }}>{r.name}</span>
                    <div style={{ flex: 1, height: 6, background:'var(--navy-700)', borderRadius: 3, overflow:'hidden' }}>
                      <div style={{ width: r.load + '%', height:'100%', background:'linear-gradient(90deg,#b8710a,#e8a33d)' }}></div>
                    </div>
                    <span className="mono" style={{ width: 30, textAlign:'right', color:'var(--paper-100)' }}>{r.load}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Incident feed */}
          <div className="dash-panel dash-feed">
            <div className="dash-panel-head"><span>Live Incident Feed</span><span className="chip warn" style={{fontSize:9}}>{window.DASHBOARD_INCIDENTS.length} OPEN</span></div>
            <div className="dash-feed-list">
              {window.DASHBOARD_INCIDENTS.map((inc, i) => (
                <div key={i} className="dash-inc">
                  <span className="mono dash-inc-time">{inc.time}</span>
                  <span className={`dash-inc-dot ${inc.sev === 'HIGH' ? 'err' : inc.sev === 'MED' ? 'warn' : 'ok'}`}></span>
                  <div className="dash-inc-body">
                    <div className="dash-inc-type">{inc.type}</div>
                    <div className="dash-inc-place mono">{inc.place}</div>
                  </div>
                  <span className={`chip ${inc.sev === 'HIGH' ? 'err' : inc.sev === 'MED' ? 'warn' : 'ok'}`} style={{fontSize:9}}>{inc.sev}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Dashboard type chips */}
        <div className="dash-types">
          <span className="dash-types-label mono">Prebuilt boards</span>
          {window.DASHBOARD_TYPES.map(t => (
            <span key={t} className="dash-type-chip">{t} Dashboard</span>
          ))}
        </div>
      </div>
    </div>
  );
}

// Donut chart atom (for dashboard asset status)
function Donut({ segments, total, size = 90 }) {
  const r = size / 2 - 8;
  const c = 2 * Math.PI * r;
  let offset = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display:'block', flexShrink: 0 }}>
      <g transform={`rotate(-90 ${size/2} ${size/2})`}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--navy-700)" strokeWidth="8" />
        {segments.map((s, i) => {
          const frac = s.value / total;
          const dash = frac * c;
          const el = (
            <circle key={i} cx={size/2} cy={size/2} r={r} fill="none"
              stroke={s.tone} strokeWidth="8"
              strokeDasharray={`${dash} ${c - dash}`} strokeDashoffset={-offset} />
          );
          offset += dash;
          return el;
        })}
      </g>
      <text x={size/2} y={size/2 - 2} textAnchor="middle" fontSize="15" fontWeight="600" fill="var(--paper-100)" fontFamily="var(--font-mono)">
        {Math.round((segments[0].value / total) * 100)}%
      </text>
      <text x={size/2} y={size/2 + 12} textAnchor="middle" fontSize="7.5" fill="var(--navy-300)" fontFamily="var(--font-mono)" style={{textTransform:'uppercase', letterSpacing:'0.08em'}}>
        healthy
      </text>
    </svg>
  );
}

// ------------------ Section: IoT ------------------
function IoTSection() {
  return (
    <div className="doc-section" data-screen-label="08 IoT">
      <div className="section-eyebrow">Section 07 · IoT & Live Sensing</div>
      <h2 className="section-title">Ten sensor classes plumbed in — <span className="amber">from river gauges to smart meters</span> — visualized against your geography in real time.</h2>
      <p className="section-lede">MQTT and REST ingestion, edge pre-processing, and geographic aggregation. IoT points can trigger workflows, populate dashboards, or feed AI models.</p>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 1, background:'var(--paper-300)', border:'1px solid var(--paper-300)' }}>
        {[
          { name: 'River Monitoring',  count: '284',  unit: 'gauges',   trend: [40,42,44,50,58,72,88,95,98,92] },
          { name: 'Rainfall Stations', count: '1,204',unit: 'stations', trend: [20,22,28,42,60,72,68,58,50,45] },
          { name: 'Air Quality',       count: '412',  unit: 'sensors',  trend: [60,58,55,50,52,55,62,68,72,70] },
          { name: 'Weather Stations',  count: '820',  unit: 'stations', trend: [45,48,50,52,50,48,50,55,58,54] },
          { name: 'Smart Meters',      count: '18,240',unit:'meters',   trend: [30,35,42,50,55,62,70,72,68,74] },
          { name: 'Vehicle Tracking',  count: '4,120',unit: 'devices',  trend: [50,55,60,58,62,68,72,68,60,58] },
          { name: 'CCTV Feeds',        count: '2,340',unit: 'feeds',    trend: [40,45,48,50,52,55,58,60,62,64] },
          { name: 'Dam Monitoring',    count: '58',   unit: 'dams',     trend: [30,32,38,52,72,88,92,94,88,72] },
          { name: 'Traffic Sensors',   count: '3,204',unit: 'loops',    trend: [20,28,50,72,68,62,58,64,72,50] },
          { name: 'Soil Moisture',     count: '918',  unit: 'sensors',  trend: [55,58,60,58,55,50,48,50,55,60] },
        ].map(s => (
          <div key={s.name} style={{ background:'var(--paper-50)', padding: '20px 18px', minHeight: 140 }}>
            <div style={{ fontSize: 10, color:'var(--ink-500)', textTransform:'uppercase', letterSpacing:'0.08em', fontFamily:'var(--font-mono)' }}>{s.name}</div>
            <div style={{ fontSize: 22, fontWeight: 600, color:'var(--navy-900)', marginTop: 4 }}>{s.count} <span style={{fontSize: 11, color:'var(--ink-500)', fontWeight:400}}>{s.unit}</span></div>
            <div style={{ marginTop: 10 }}>
              <Sparkline values={s.trend} color="#d97706"/>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Section: Integrations ------------------
function IntegrationsSection() {
  return (
    <div className="doc-section paper" data-screen-label="09 Integrations">
      <div className="section-eyebrow">Section 08 · Enterprise Integration</div>
      <h2 className="section-title">Speaks to your <span className="amber">existing enterprise stack</span> — SAP, SCADA, BIM, IoT, DMS, SIEM and every OGC service.</h2>
      <p className="section-lede">No rip-and-replace. BhooChitra sits at the spatial center of your enterprise, exchanging data through REST, GraphQL, OGC services, and message queues.</p>

      <div className="hub">
        <div className="hub-node hub-center" style={{ left:'50%', top:'50%' }}>
          BhooChitra Core
          <span className="sub">Spatial Data Hub</span>
        </div>
        {window.INTEGRATIONS.map(n => (
          <div key={n.name} className="hub-node" style={{ left: n.x+'%', top: n.y+'%' }}>
            {n.name}
            <span className="sub">{n.kind}</span>
          </div>
        ))}
        {/* SVG connectors */}
        <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}} viewBox="0 0 100 100" preserveAspectRatio="none">
          {window.INTEGRATIONS.map((n,i) => (
            <line key={i} x1={n.x} y1={n.y} x2="50" y2="50" stroke="#c8b898" strokeWidth="0.15" strokeDasharray="0.6 0.4"/>
          ))}
        </svg>
      </div>

      <div style={{ marginTop: 32, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24 }}>
        {[
          { l: 'OGC Services',      v: 'WMS · WFS · WMTS · CSW · WCS · WPS · SensorThings · SLD' },
          { l: 'APIs',              v: 'REST · GraphQL · Webhooks · gRPC · MQTT · Kafka' },
          { l: 'Authentication',    v: 'SSO · SAML · OAuth 2.0 · LDAP / AD · MFA · Digital Signature' },
          { l: 'Data Exchange',     v: 'STAC · CKAN · OpenAPI · gpkg · GeoParquet · GeoJSON-LD' },
        ].map(x => (
          <div key={x.l} style={{ borderTop:'1px solid var(--paper-300)', paddingTop: 12 }}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:10, color:'var(--amber-600)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom: 6}}>{x.l}</div>
            <div style={{fontSize:12, color:'var(--ink-700)', lineHeight:1.55}}>{x.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Section: Deployment ------------------
function DeploymentSection() {
  return (
    <div className="doc-section" data-screen-label="10 Deployment">
      <div className="section-eyebrow">Section 09 · Deployment</div>
      <h2 className="section-title">Deploy on <span className="amber">any perimeter you require</span> — sovereign cloud, on-premise, or fully air-gapped edge.</h2>
      <p className="section-lede">Same code, same features, different perimeters. Certified for MeitY and NIC Cloud; ships with an offline installer for defense and critical infrastructure.</p>

      <div className="deploy-grid">
        {window.DEPLOYMENTS.map(d => (
          <div key={d.name} className="deploy-card">
            <h3>{d.name}</h3>
            <p>{d.desc}</p>
            <ul>
              {d.items.map(i => <li key={i}>{i}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Section: Security ------------------
function SecuritySection() {
  return (
    <div className="doc-section" data-screen-label="11 Security">
      <div className="section-eyebrow">Section 10 · Security & Access Control</div>
      <h2 className="section-title">Hardened for <span className="amber">government and defense</span> — zero-trust access, encryption everywhere, and an immutable audit trail.</h2>
      <p className="section-lede">Every read, edit and export is authenticated, authorized down to the field, encrypted in transit and at rest, and written to a tamper-evident log that streams to your SIEM.</p>

      <div className="sec-layout">
        {/* Capability cards */}
        <div className="sec-cards">
          {window.SECURITY.map(s => (
            <div key={s.name} className="sec-card">
              <div className="sec-card-head">
                <span className="sec-card-name">{s.name}</span>
                <span className="sec-card-spec mono">{s.spec}</span>
              </div>
              <div className="sec-card-desc">{s.desc}</div>
            </div>
          ))}
        </div>

        {/* Right rail: RBAC matrix + audit console */}
        <div className="sec-rail">
          <div className="sec-panel">
            <div className="sec-panel-head">
              <span>Role · Permission Matrix</span>
              <span className="chip navy" style={{fontSize:9}}>RBAC</span>
            </div>
            <div className="rbac">
              <div className="rbac-row rbac-head">
                <span className="rbac-role"></span>
                {window.SECURITY_PERMS.map(p => <span key={p} className="rbac-perm mono">{p}</span>)}
              </div>
              {window.SECURITY_ROLES.map(r => (
                <div key={r.role} className="rbac-row">
                  <span className="rbac-role">{r.role}</span>
                  {r.perms.map((allowed, i) => (
                    <span key={i} className="rbac-perm">
                      <span className={`rbac-cell ${allowed ? 'yes' : 'no'}`}>{allowed ? '✓' : '·'}</span>
                    </span>
                  ))}
                </div>
              ))}
            </div>
          </div>

          <div className="sec-panel">
            <div className="sec-panel-head">
              <span>Audit Log · Live Stream</span>
              <span className="sec-live mono"><span className="dash-dot"></span>tail -f</span>
            </div>
            <div className="audit">
              {window.SECURITY_AUDIT.map((a, i) => (
                <div key={i} className="audit-row">
                  <span className="audit-time mono">{a.time}</span>
                  <span className={`audit-st ${a.st}`}>{a.st === 'ok' ? '●' : a.st === 'warn' ? '▲' : '✕'}</span>
                  <span className="audit-user mono">{a.user}</span>
                  <span className="audit-act mono">{a.action}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="sec-stats">
        {[
          { k: 'AES-256', v: 'encryption at rest · rotating KMS' },
          { k: 'TLS 1.3',  v: 'mutual TLS between all services' },
          { k: '100%',     v: 'MFA coverage on privileged roles' },
          { k: 'RPO 15m',  v: 'geo-redundant backup & failover' },
        ].map(s => (
          <div key={s.k} className="sec-stat">
            <div className="sec-stat-k mono">{s.k}</div>
            <div className="sec-stat-v">{s.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Section: Reporting ------------------
function ReportingSection() {
  return (
    <div className="doc-section paper" data-screen-label="12 Reporting">
      <div className="section-eyebrow">Section 11 · Reporting & Export</div>
      <h2 className="section-title">From live map to <span className="amber">signed, print-ready report</span> — cartographic layouts, atlases, and scheduled briefs.</h2>
      <p className="section-lede">Compose PDF map reports, thematic maps and statistical rollups against live queries. Schedule delivery to email or DMS, and export to every GIS and office format your workflow needs.</p>

      <div className="rep-layout">
        {/* Report document preview */}
        <div className="rep-doc-wrap">
          <div className="rep-doc">
            <div className="rep-doc-head">
              <div>
                <div className="rep-doc-kicker mono">GOVERNMENT OF KARNATAKA · REVENUE DEPARTMENT</div>
                <div className="rep-doc-title">Encroachment Survey Report</div>
                <div className="rep-doc-sub mono">KA-LIS-2026-Q2 · Taluk: Bengaluru North · Generated 15 Jul 2026</div>
              </div>
              <div className="rep-doc-seal">भू</div>
            </div>
            <div className="rep-doc-map">
              <svg viewBox="0 0 300 150" preserveAspectRatio="xMidYMid slice" style={{position:'absolute', inset:0, width:'100%', height:'100%'}}>
                <rect width="300" height="150" fill="#dfe8f0"/>
                {[[20,18,54,40],[80,14,46,34],[132,20,60,30],[198,16,50,40],[20,64,60,44],[86,54,54,46],[146,56,52,48],[204,60,60,44],[20,116,70,30],[96,106,60,36],[162,112,54,30],[222,108,50,36]].map((r,i)=>(
                  <rect key={i} x={r[0]} y={r[1]} width={r[2]} height={r[3]} fill={i===5||i===9?'rgba(217,119,6,0.55)':'#e8e0c8'} stroke="#8a9670" strokeWidth="0.6"/>
                ))}
                <path d="M0 92 Q 80 100 150 96 T 300 104" stroke="#c94a3a" strokeWidth="2.5" fill="none" opacity="0.7"/>
                <path d="M60 0 L 70 150" stroke="#4a90c8" strokeWidth="3" fill="none" opacity="0.5"/>
              </svg>
              <div className="rep-doc-legend mono">◆ Encroachment flagged · 2 parcels · 5.9 ha</div>
            </div>
            <div className="rep-doc-rows">
              {[
                ['Survey Nos. reviewed', '1,842'],
                ['Encroachments detected', '37'],
                ['Area under encroachment', '182.4 ha'],
                ['Field-verified', '29 / 37'],
              ].map(([k, v]) => (
                <div key={k} className="rep-doc-row">
                  <span>{k}</span><span className="mono">{v}</span>
                </div>
              ))}
            </div>
            <div className="rep-doc-foot">
              <span className="mono">Digitally signed · PKI eSign</span>
              <span className="rep-doc-sign">A. Sharma, Dy. Commissioner</span>
            </div>
          </div>
        </div>

        {/* Report types + formats + schedule */}
        <div className="rep-side">
          <div className="rep-types">
            {window.REPORT_TYPES.map(r => (
              <div key={r.name} className="rep-type">
                <div className="rep-type-name"><span className="amber">▸</span> {r.name}</div>
                <div className="rep-type-desc">{r.desc}</div>
              </div>
            ))}
          </div>

          <div className="rep-block">
            <div className="rep-block-head mono">Export Formats</div>
            <div className="rep-formats">
              {window.REPORT_FORMATS.map(f => <span key={f} className="rep-fmt mono">{f}</span>)}
            </div>
          </div>

          <div className="rep-block">
            <div className="rep-block-head mono">Scheduled Reports</div>
            <div className="rep-sched">
              {window.REPORT_SCHEDULE.map(s => (
                <div key={s.name} className="rep-sched-row">
                  <div style={{ flex: 1 }}>
                    <div className="rep-sched-name">{s.name}</div>
                    <div className="rep-sched-meta mono">{s.cadence} · {s.fmt}</div>
                  </div>
                  <span className="chip" style={{fontSize:9}}>NEXT {s.next}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ------------------ Section: Compliance ------------------
function ComplianceSection() {
  return (
    <div className="doc-section paper" data-screen-label="13 Compliance">
      <div className="section-eyebrow">Section 12 · Standards & Compliance</div>
      <h2 className="section-title">Built for <span className="amber">Indian e-governance</span>, aligned with international geospatial and security standards.</h2>
      <p className="section-lede">The platform is audited, empanelled, and certified against the standards your compliance office is likely to ask about. Documentation and audit trails are available on request.</p>

      <div className="badge-wall">
        {window.COMPLIANCE.map(b => (
          <div key={b.code} className="badge">
            <div className="badge-title"><span className="amber">◆</span> {b.code}</div>
            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--navy-900)', marginTop: 4 }}>{b.title}</div>
            <div className="badge-desc">{b.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Section: Tech Stack ------------------
function TechStackSection() {
  return (
    <div className="doc-section dark" data-screen-label="14 Stack">
      <div className="section-eyebrow">Section 13 · Technology Stack</div>
      <h2 className="section-title">A stack chosen for <span className="amber">longevity, openness, and Indian sovereignty</span> — no proprietary black boxes.</h2>
      <p className="section-lede">Open-source at the core, backed by paid enterprise support where it matters. Runs identically on developer laptops, sovereign clouds, and defense hardware.</p>

      <div style={{ marginTop: 32 }}>
        {window.TECH_STACK.map(row => (
          <div key={row.label} className="stack">
            <div className="stack-label">{row.label}</div>
            <div className="stack-chips">
              {row.chips.map(c => <span key={c} className="stack-chip">{c}</span>)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Section: Use Cases ------------------
function UseCaseSection() {
  return (
    <div className="doc-section" data-screen-label="15 UseCases">
      <div className="section-eyebrow">Section 14 · Deployed Use Cases</div>
      <h2 className="section-title">In production across <span className="amber">state governments, utilities, forest departments and defense HQs</span>.</h2>
      <p className="section-lede">Every deployment is configured, not customized. New projects launch in weeks, not quarters — because the modules are already built and the standards are already met.</p>

      <div className="usecase-grid">
        {window.USE_CASES.map(u => (
          <div key={u.title} className="usecase">
            <div className="usecase-tag">{u.tag}</div>
            <div className="usecase-mini">
              <UseCaseMini idx={u.tag}/>
            </div>
            <div className="usecase-title">{u.title}</div>
            <div className="usecase-desc">{u.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function UseCaseMini({ idx }) {
  // Vary a mini illustration
  const id = parseInt(idx.slice(-2)) || 1;
  return (
    <svg viewBox="0 0 200 60" style={{width:'100%', height:'100%', display:'block'}}>
      {id === 1 && (
        <g>
          <rect x="0" y="0" width="200" height="60" fill="#dfe8f0"/>
          {[[10,10,30,20],[45,10,25,25],[75,10,35,15],[115,10,20,30],[140,10,25,20],[170,10,25,25],
            [10,35,20,20],[35,40,30,15],[70,30,25,25],[100,45,25,10],[130,35,30,20],[165,40,30,15]].map((r,i)=>(
            <rect key={i} x={r[0]} y={r[1]} width={r[2]} height={r[3]} fill={i%3===0?'#e8a33d':'#c9d0d6'} opacity="0.85"/>
          ))}
        </g>
      )}
      {id === 2 && (
        <g>
          <rect x="0" y="0" width="200" height="60" fill="#e8dfc9"/>
          {[...Array(80)].map((_,i)=>{
            const x = (i % 20) * 10, y = Math.floor(i/20) * 15;
            return <rect key={i} x={x+1} y={y+1} width={8} height={13} fill="none" stroke="#8a9670" strokeWidth="0.3"/>;
          })}
        </g>
      )}
      {id === 3 && (
        <g>
          <rect x="0" y="0" width="200" height="60" fill="#3a5a2e"/>
          <rect x="30" y="8" width="60" height="20" fill="#c94a3a" opacity="0.6"/>
          <rect x="90" y="20" width="70" height="18" fill="#e8a33d" opacity="0.6"/>
          <path d="M0 40 Q 60 50 120 45 T 200 50" stroke="#7bc38c" strokeWidth="8" fill="none" opacity="0.5"/>
        </g>
      )}
      {id === 4 && (
        <g>
          <rect x="0" y="0" width="200" height="60" fill="#eef4f9"/>
          <path d="M0 30 Q 40 10 80 30 T 160 30 L 200 30" stroke="#4a90c8" strokeWidth="4" fill="none"/>
          <path d="M0 30 Q 40 10 80 30 T 160 30 L 200 30" stroke="#d97706" strokeWidth="1.5" fill="none" strokeDasharray="3 2"/>
          {[[30,40],[70,25],[120,42],[160,30]].map((p,i)=>(
            <circle key={i} cx={p[0]} cy={p[1]} r="3" fill="#0a1a35"/>
          ))}
        </g>
      )}
      {id === 5 && (
        <g>
          <rect x="0" y="0" width="200" height="60" fill="#dfe8f0"/>
          {[[20,20],[50,15],[80,25],[110,20],[140,15],[170,25]].map((p,i)=>(
            <g key={i}>
              <circle cx={p[0]} cy={p[1]} r="3" fill="#2f7d4f"/>
              <line x1={p[0]} y1={p[1]} x2={p[0]+30} y2={p[1]+5} stroke="#2f7d4f" strokeWidth="1"/>
            </g>
          ))}
          <line x1="0" y1="45" x2="200" y2="45" stroke="#c94a3a" strokeWidth="2" strokeDasharray="4 3"/>
        </g>
      )}
      {id === 6 && (
        <g>
          <rect x="0" y="0" width="200" height="60" fill="#e8dfc9"/>
          {/* contour terrain */}
          {[10,20,30,40,50].map(o => (
            <path key={o} d={`M 0 ${o+5} Q 50 ${o-5} 100 ${o+3} T 200 ${o+5}`} stroke="#8a7550" strokeWidth="0.6" fill="none"/>
          ))}
          <circle cx="80" cy="30" r="4" fill="#c94a3a"/>
          <path d="M80 30 L 130 20 L 165 32" stroke="#c94a3a" strokeWidth="1.5" fill="none" strokeDasharray="3 2"/>
        </g>
      )}
    </svg>
  );
}

// ------------------ Section: Industries ------------------
function IndustriesSection() {
  return (
    <div className="doc-section paper" data-screen-label="16 Industries">
      <div className="section-eyebrow">Section 15 · Industries Served</div>
      <h2 className="section-title">Twenty-nine industries running BhooChitra — <span className="amber">from panchayat to national command</span>.</h2>
      <p className="section-lede">Configurable to the vocabulary of each sector: revenue records for land officers, network tracing for utility engineers, viewshed for defense planners.</p>

      <div className="industries">
        {window.INDUSTRIES.map((n, i) => (
          <div key={n} className="ind-chip">
            <span className="idx">{('0'+(i+1)).slice(-2)}</span>{n}
          </div>
        ))}
      </div>
    </div>
  );
}

// ------------------ Footer ------------------
function Footer() {
  return (
    <div className="footer" data-screen-label="17 Footer">
      <div className="footer-cols">
        <div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom: 20}}>
            <div className="brand-mark">भू</div>
            <div>
              <div style={{color:'var(--paper-100)', fontSize:15, fontWeight:600}}>BhooChitra GIS <span style={{color:'var(--amber-400)', fontSize:11}}>V3</span></div>
              <div style={{fontSize:10, color:'var(--navy-300)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Enterprise Geospatial Platform</div>
            </div>
          </div>
          <p style={{fontSize: 12, color:'var(--navy-300)', lineHeight: 1.6, maxWidth: 400}}>
            BhooChitra is an enterprise-grade GIS built for the scale of Indian government, defense, utility and smart-city programmes. OGC-compliant, AI-native, and deployable inside your perimeter.
          </p>
        </div>
        <div>
          <h4>Platform</h4>
          <ul>
            <li>Modules</li><li>Analytics</li><li>GeoAI</li><li>3D & Digital Twin</li><li>Mobile GIS</li><li>Integrations</li>
          </ul>
        </div>
        <div>
          <h4>Deployment</h4>
          <ul>
            <li>On-Premise</li><li>Sovereign Cloud</li><li>Air-Gapped</li><li>Edge</li><li>Sizing Guide</li><li>Support SLAs</li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li>Documentation</li><li>Compliance Statements</li><li>Empanelments</li><li>Case Studies</li><li>Contact Sales</li><li>Partner Program</li>
          </ul>
        </div>
      </div>
      <div className="footer-legal">
        <span>© 2026 BhooChitra Technologies · Made in India</span>
        <span>v3.4.1 · Build 2026.07.11 · SHA e8a33dcf</span>
        <span>MeitY empanelled · STQC certified · ISO 27001</span>
      </div>
    </div>
  );
}

window.DocSections = DocSections;