// sections-mid.jsx — How it works, Feature grid, Compliance

// ─── How it works ───────────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Invoices uploaded.',
      blurb: 'Drop in a PDF or scan, or capture from your phone. AI extracts amount, VAT, supplier, and due date in seconds.',
      mock: <StepInbox />,
    },
    {
      n: '02',
      title: 'Codes assigned.',
      blurb: 'Method Request and Procurement codes are suggested and locked in with one click. The audit trail starts at this line.',
      mock: <StepCoding />,
    },
    {
      n: '03',
      title: 'Approval chain runs.',
      blurb: 'Administrative Officer to Executive Secretary to Councillors. Notifications, e-signatures, and status visible to everyone on the chain.',
      mock: <StepApproval />,
    },
    {
      n: '04',
      title: 'Skeda generated.',
      blurb: 'The DLG-format Schedule of Payments exports in one click. Payment Vouchers generate as PDFs alongside.',
      mock: <StepSkeda />,
    },
  ];

  return (
    <section id="how">
      <div className="wrap">
        <div style={{maxWidth: 720, marginBottom: 64}}>
          <div className="eyebrow">How it works</div>
          <h2 className="display h2 mt-12" style={{margin:0, textWrap:'balance'}}>
            Four steps from upload to <span style={{color:'var(--accent-2)', fontStyle:'italic'}}>Skeda</span>.
          </h2>
          <p className="lede mt-16" style={{margin:0}}>
            Every step is logged. Every code is justified. Every approval is signed.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap: 28}}>
          {steps.map((s, i) => (
            <div key={i} className="col gap-16">
              <div className="row gap-8 ai-c">
                <span className="step-num">{s.n}</span>
                <span style={{flex:1, height:1, background:'var(--hairline)'}}/>
              </div>
              <div style={{
                aspectRatio: '1.45 / 1',
                border:'1px solid var(--hairline)',
                borderRadius: 12,
                background:'#fff',
                overflow:'hidden',
                position:'relative'
              }}>
                {s.mock}
              </div>
              <div>
                <h3 className="display h3" style={{margin: 0}}>{s.title}</h3>
                <p className="text-ink2 mt-8" style={{margin:0, fontSize: 15, lineHeight: 1.55}}>
                  {s.blurb}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Step mocks ─────────────────────────────────────────────────────
function StepInbox() {
  // "Upload" step — drag-and-drop zone above a list of recently uploaded PDFs.
  return (
    <div style={{padding: 14, height:'100%', display:'flex', flexDirection:'column', gap:10, background:'var(--bg)'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:10.5, color:'var(--ink-3)'}}>
        <span style={{fontWeight:600, letterSpacing:'0.05em', textTransform:'uppercase'}}>Upload invoices</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:5, color:'var(--accent-2)'}}>
          <IconSparkle size={11} /> AI extraction · on
        </span>
      </div>

      {/* Drop zone */}
      <div style={{
        border: '1.5px dashed var(--accent)', borderRadius: 10,
        background: 'var(--accent-mist)',
        padding: '14px 12px',
        display:'flex', alignItems:'center', justifyContent:'center', gap: 10,
        color: 'var(--accent-2)', fontSize: 11, fontWeight: 500
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
        </svg>
        Drop PDFs here, or click to browse
      </div>

      <div style={{flex:1, display:'flex', flexDirection:'column', gap:6, minHeight: 0}}>
        {[
          { name: 'INV-2026-0421-stamperija-borg.pdf', size: '142 KB', tag: '€1,840.00' },
          { name: 'INV-26-0118-vella-electrical.pdf',    size: '88 KB',  tag: '€3,265.50' },
          { name: 'REC-4429-skyclean-april.pdf',         size: '64 KB',  tag: '€620.00' },
        ].map((m, i) => (
          <div key={i} style={{
            background:'#fff', border:'1px solid var(--hairline)', borderRadius: 8,
            padding:'6px 8px', display:'flex', alignItems:'center', gap: 8
          }}>
            <span style={{
              width: 22, height: 22, borderRadius: 5, background: 'var(--surface-2)',
              color: 'var(--accent-2)', display:'inline-flex', alignItems:'center', justifyContent:'center', flex:'none'
            }}>
              <IconFileText size={11}/>
            </span>
            <div style={{minWidth: 0, flex: 1}}>
              <div style={{fontSize:11, color:'var(--ink)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', fontWeight:500}}>{m.name}</div>
              <div style={{fontSize:10, color:'var(--ink-4)'}}>{m.size} · extracted</div>
            </div>
            <span className="tnum" style={{fontSize:11, color:'var(--ink-2)', fontWeight:500}}>{m.tag}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepCoding() {
  const fields = [
    { label: 'Supplier', val: 'Stamperija Borg & Sons', ai: true },
    { label: 'Net',      val: '€1,840.00', ai: true },
    { label: 'VAT',      val: '€331.20',  ai: true },
  ];
  return (
    <div style={{padding:14, height:'100%', display:'flex', flexDirection:'column', gap:10, background:'#fff'}}>
      <div style={{fontSize:10.5, fontWeight:600, color:'var(--ink-3)', letterSpacing:'0.05em', textTransform:'uppercase'}}>
        INV-2026/0421
      </div>
      <div style={{display:'flex', flexDirection:'column', gap:5}}>
        {fields.map((f,i) => (
          <div key={i} style={{display:'flex', justifyContent:'space-between', fontSize:11.5, alignItems:'center'}}>
            <span style={{color:'var(--ink-3)'}}>{f.label}</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
              {f.ai && <IconSparkle size={10} color="var(--accent-2)"/>}
              <span style={{color:'var(--ink)', fontWeight:500}}>{f.val}</span>
            </span>
          </div>
        ))}
      </div>
      <div style={{height:1, background:'var(--hairline)'}} />
      <div style={{fontSize:10.5, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Codes</div>
      <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
        <div className="col" style={{gap:4}}>
          <span style={{fontSize:10, color:'var(--ink-4)'}}>Method Request</span>
          <div style={{display:'flex', gap:4}}>
            {['P','Inv','Rec','RFP'].map(c => (
              <span key={c} className="tag" style={{
                background: c==='Inv' ? 'var(--ink)' : 'var(--surface-2)',
                color: c==='Inv' ? '#fff' : 'var(--ink-3)',
                padding:'2px 6px'
              }}>{c}</span>
            ))}
          </div>
        </div>
        <div className="col" style={{gap:4, marginLeft: 6}}>
          <span style={{fontSize:10, color:'var(--ink-4)'}}>Procurement</span>
          <div style={{display:'flex', gap:4}}>
            {['DA','D','T','K'].map(c => (
              <span key={c} className="tag" style={{
                background: c==='DA' ? 'var(--accent)' : 'var(--surface-2)',
                color: c==='DA' ? '#fff' : 'var(--ink-3)',
                padding:'2px 6px'
              }}>{c}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function StepApproval() {
  const chain = [
    { role: 'Admin Officer', name: 'A. Camilleri',   status: 'done', time: '09:14' },
    { role: 'Exec Secretary', name: 'D. Vassallo',   status: 'done', time: '11:02' },
    { role: 'Councillor (1/5)', name: 'K. Spiteri',  status: 'done', time: '14:38' },
    { role: 'Councillor (2/5)', name: 'R. Galea',    status: 'wait', time: '—' },
    { role: 'Councillors 3–5',  name: '3 pending',   status: 'wait', time: '—' },
  ];
  return (
    <div style={{padding:14, height:'100%', display:'flex', flexDirection:'column', gap:9, background:'var(--bg)'}}>
      <div style={{display:'flex', justifyContent:'space-between', fontSize:10.5, color:'var(--ink-3)'}}>
        <span>Approval chain</span>
        <span className="mono">PVR-26-042</span>
      </div>
      {chain.map((c, i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap:8}}>
          <div style={{
            width: 16, height: 16, borderRadius: '50%', flex: 'none',
            background: c.status === 'done' ? 'var(--green)' : '#fff',
            border: c.status === 'done' ? 'none' : '1.5px dashed var(--ink-5)',
            display:'inline-flex', alignItems:'center', justifyContent:'center', color:'#fff'
          }}>
            {c.status === 'done' && <IconCheck size={10} stroke={3} />}
          </div>
          <div style={{flex:1, minWidth: 0}}>
            <div style={{fontSize:11, color:'var(--ink)', fontWeight:500}}>{c.role}</div>
            <div style={{fontSize:10.5, color:'var(--ink-3)'}}>{c.name}</div>
          </div>
          <div style={{fontSize:10.5, color: c.status === 'done' ? 'var(--green)' : 'var(--ink-4)', fontFamily:'var(--mono)'}}>
            {c.time}
          </div>
        </div>
      ))}
    </div>
  );
}

function StepSkeda() {
  return (
    <div style={{padding:14, height:'100%', display:'flex', flexDirection:'column', gap:8, background:'#fff'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontSize:10.5, color:'var(--ink-3)', fontWeight:600, letterSpacing:'0.05em', textTransform:'uppercase'}}>Skeda · Apr 2026</div>
          <div style={{fontSize:11, color:'var(--ink-4)', marginTop:1}}>32 invoices · €48,221</div>
        </div>
        <span className="tag green">Ready</span>
      </div>
      <div style={{flex:1, border:'1px solid var(--hairline)', borderRadius:6, background:'var(--bg)', padding: 8, display:'flex', flexDirection:'column', gap: 4}}>
        {[1,2,3,4,5,6].map(i => (
          <div key={i} style={{display:'flex', gap:6, alignItems:'center'}}>
            <span className="mono" style={{fontSize:9.5, color:'var(--ink-4)', width: 16}}>{String(i).padStart(2,'0')}</span>
            <span style={{flex:1, height:6, background:'var(--hairline-2)', borderRadius:2, opacity: 1 - i*0.08}}/>
            <span style={{width:24, height:6, background:'var(--ink-5)', borderRadius:2}}/>
          </div>
        ))}
      </div>
      <div style={{display:'flex', gap:6}}>
        <button className="btn btn-primary" style={{fontSize:11, padding:'7px 9px', flex:1, justifyContent:'center'}}>
          <IconArrowUpRight size={11}/> Export Skeda
        </button>
        <button className="btn btn-ghost" style={{fontSize:11, padding:'7px 9px'}}>
          <IconFileText size={11}/> Vouchers
        </button>
      </div>
    </div>
  );
}

// ─── Feature grid ───────────────────────────────────────────────────
function FeatureGrid() {
  const tiles = [
    {
      ico: <IconClipboard size={18} />,
      title: 'DLG-format Skeda, automated',
      blurb: 'Schedule of Payments exports in the exact format the Department of Local Government accepts — Excel, PDF, or signed bundle.',
      detail: <DetailSkeda />
    },
    {
      ico: <IconSparkle size={18} />,
      title: 'AI invoice extraction',
      blurb: 'Upload a PDF or scan. Amount, VAT, supplier, and due date land on the invoice ready for review.',
      detail: <DetailExtract />
    },
    {
      ico: <IconUsers size={18} />,
      title: 'Full approval chain',
      blurb: 'Admin Officer to Executive Secretary to Councillors, with e-signatures and notifications at every step.',
      detail: <DetailChain />
    },
    {
      ico: <IconLayers size={18} />,
      title: 'Audit trail for every line',
      blurb: 'Who created it, who edited it, who approved it, and when. Every code change is logged. Nothing is opaque.',
      detail: <DetailAudit />
    },
    {
      ico: <IconReceipt size={18} />,
      title: 'Payment Voucher PDFs',
      blurb: 'Signed Payment Vouchers generate as PDFs alongside the Skeda. Print, archive, or attach to your reporting.',
      detail: <DetailVoucher />
    },
    {
      ico: <IconDatabase size={18} />,
      title: 'Supplier management & purchase orders',
      tag: 'Coming soon',
      blurb: 'Manage supplier records, payment history, contacts, and purchase order drafts from the same council workflow.',
      detail: <DetailSupplier />
    },
  ];

  return (
    <section>
      <div className="wrap">
        <div style={{maxWidth: 720, marginBottom: 56}}>
          <div className="eyebrow">Features</div>
          <h2 className="display h2 mt-12" style={{margin:0, textWrap:'balance'}}>
            Everything you need. <span style={{color:'var(--ink-3)'}}>Nothing you don't.</span>
          </h2>
        </div>

        <div style={{display:'grid', gap: 18, gridTemplateColumns:'repeat(auto-fit, minmax(320px, 1fr))'}}>
          {tiles.map((t, i) => (
            <div key={i} className="tile">
              <div className="row ai-c gap-12">
                <span className="ico">{t.ico}</span>
                {t.tag && <span className="tag green" style={{fontSize:10}}>{t.tag}</span>}
              </div>
              <h3 className="display" style={{fontSize:20, margin:0, lineHeight:1.2}}>{t.title}</h3>
              <p className="text-ink2" style={{margin: 0, fontSize:14, lineHeight:1.55}}>{t.blurb}</p>
              <div style={{marginTop: 6}}>{t.detail}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Mini detail visuals for each tile (small, restrained)
function DetailSkeda() {
  return (
    <div style={{border:'1px solid var(--hairline)', borderRadius:8, padding:'10px 12px', background:'var(--bg)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
      <div style={{display:'flex', flexDirection:'column', gap:2}}>
        <span style={{fontSize:11, color:'var(--ink-3)'}}>Skeda · April 2026</span>
        <span className="mono" style={{fontSize:11, color:'var(--ink)'}}>32 lines · €48,221.40</span>
      </div>
      <div style={{display:'flex', gap:6}}>
        <span className="tag soft" style={{fontSize:10}}>.xlsx</span>
        <span className="tag soft" style={{fontSize:10}}>.pdf</span>
      </div>
    </div>
  );
}
function DetailExtract() {
  return (
    <div style={{border:'1px solid var(--hairline)', borderRadius:8, padding:'10px 12px', background:'var(--bg)', display:'flex', flexDirection:'column', gap:5}}>
      {[
        ['Supplier', 'Vella Electrical Ltd'],
        ['Net',      '€3,265.50'],
        ['VAT 18%',  '€587.79'],
        ['Due',      '14 May 2026'],
      ].map(([k,v],i) => (
        <div key={i} style={{display:'flex', justifyContent:'space-between', fontSize:11.5}}>
          <span style={{color:'var(--ink-3)'}}>{k}</span>
          <span style={{display:'inline-flex', gap:5, alignItems:'center'}}>
            <IconSparkle size={9} color="var(--accent-2)" />
            <span style={{fontFamily:'var(--mono)', color:'var(--ink)', fontSize:11}}>{v}</span>
          </span>
        </div>
      ))}
    </div>
  );
}
function DetailChain() {
  return (
    <div style={{border:'1px solid var(--hairline)', borderRadius:8, padding:'10px 12px', background:'var(--bg)', display:'flex', alignItems:'center', gap:0, fontSize:11}}>
      {['AO','ES','C1','C2','C3'].map((c, i, arr) => (
        <React.Fragment key={c}>
          <span style={{
            width:22, height:22, borderRadius:'50%',
            background: i < 3 ? 'var(--green)' : '#fff',
            color: i < 3 ? '#fff' : 'var(--ink-3)',
            border: i < 3 ? 'none' : '1.5px dashed var(--ink-5)',
            display:'inline-flex', alignItems:'center', justifyContent:'center',
            fontSize:10, fontWeight:600, flex:'none'
          }}>{c}</span>
          {i < arr.length-1 && <span style={{flex:1, height:1, background: i < 2 ? 'var(--green)' : 'var(--hairline-2)'}} />}
        </React.Fragment>
      ))}
    </div>
  );
}
function DetailAudit() {
  return (
    <div style={{border:'1px solid var(--hairline)', borderRadius:8, padding:'10px 12px', background:'var(--bg)', display:'flex', flexDirection:'column', gap:4, fontSize:10.5, fontFamily:'var(--mono)'}}>
      {[
        ['14:38', 'K. Spiteri', 'approved'],
        ['11:02', 'D. Vassallo', 'signed'],
        ['09:17', 'A. Camilleri', 'set P·M = T'],
        ['09:14', 'A. Camilleri', 'created'],
      ].map(([t,who,what],i) => (
        <div key={i} style={{display:'flex', gap:8, color: i===0?'var(--ink)':'var(--ink-3)'}}>
          <span style={{color:'var(--ink-4)', width: 38}}>{t}</span>
          <span style={{flex:1, color:'var(--ink-2)'}}>{who}</span>
          <span>{what}</span>
        </div>
      ))}
    </div>
  );
}
function DetailVoucher() {
  return (
    <div style={{border:'1px solid var(--hairline)', borderRadius:8, padding: 0, background:'#fff', overflow:'hidden', display:'flex'}}>
      <div style={{flex:1, padding:'10px 12px'}}>
        <div style={{fontSize:10, color:'var(--ink-4)', letterSpacing:'0.05em', textTransform:'uppercase'}}>Payment Voucher</div>
        <div className="mono" style={{fontSize:12, color:'var(--ink)', marginTop:2}}>PV-2026-042</div>
        <div style={{marginTop:6, display:'flex', flexDirection:'column', gap:3}}>
          <div style={{height:4, background:'var(--hairline-2)', width:'80%', borderRadius:1}}/>
          <div style={{height:4, background:'var(--hairline-2)', width:'60%', borderRadius:1}}/>
          <div style={{height:4, background:'var(--hairline-2)', width:'70%', borderRadius:1}}/>
        </div>
      </div>
      <div style={{width: 70, background:'var(--surface-2)', display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column'}}>
        <IconFileText size={20} color="var(--ink-3)" />
        <span className="mono" style={{fontSize:9, color:'var(--ink-3)', marginTop:4}}>.pdf</span>
      </div>
    </div>
  );
}
function DetailSupplier() {
  return (
    <div style={{border:'1px solid var(--hairline)', borderRadius:8, padding:'10px 12px', background:'var(--bg)', display:'flex', flexDirection:'column', gap:5}}>
      {[
        ['Vella Electrical Ltd', '17 orders · €42,180'],
        ['Stamperija Borg',     '24 orders · €18,400'],
        ['MaltaPost plc',       '12 orders · €1,820'],
      ].map(([n,m],i) => (
        <div key={i} style={{display:'flex', justifyContent:'space-between', fontSize:11.5}}>
          <span style={{color:'var(--ink)', fontWeight: 500}}>{n}</span>
          <span style={{color:'var(--ink-3)', fontFamily:'var(--mono)', fontSize: 11}}>{m}</span>
        </div>
      ))}
    </div>
  );
}

// ─── Compliance ─────────────────────────────────────────────────────
function Compliance() {
  const items = [
    { ico: <IconClipboard size={18}/>, title: 'DLG-compliant Skeda format', blurb: 'Output matches the exact layout the Department of Local Government accepts for monthly submission.' },
    { ico: <IconLayers size={18}/>,    title: 'Full audit log per invoice and per user', blurb: 'Every create, edit, code change, and approval is timestamped and attributed. Read-only export to your auditor.', emphasis: true },
    { ico: <IconDatabase size={18}/>,  title: 'EU data residency, Frankfurt-hosted', blurb: 'Infrastructure in Frankfurt, run by EU-resident teams. Data does not leave the EU.' },
    { ico: <IconShield size={18}/>,    title: 'GDPR-aligned', blurb: 'Documented DPIA, processor agreement, retention policy, and subject-access workflow ready for your DPO.' },
    { ico: <IconLock size={18}/>,      title: 'Role-based access', blurb: 'Keycloak-based authentication. Distinct roles for Administrative Officers, Executive Secretaries, and Councillors.' },
    { ico: <IconBoxArchive size={18}/>,title: 'Daily encrypted backups', blurb: 'Encrypted snapshots every 24 hours with 30-day point-in-time recovery, tested quarterly.' },
  ];

  return (
    <section id="compliance" style={{background:'var(--surface-2)'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns: 'minmax(280px, 360px) 1fr', gap: 64, alignItems:'start'}}>
          <div style={{position:'sticky', top: 96}}>
            <div className="eyebrow">Compliance & trust</div>
            <h2 className="display h2 mt-12" style={{margin:0, textWrap:'balance'}}>
              Built for Maltese public-sector accountability.
            </h2>
            <p className="lede mt-16">
              You answer to the DLG, your auditor, your councillors, and the press.
              Auto-Council assumes all four are watching.
            </p>
            <div className="row gap-8 mt-24" style={{flexWrap:'wrap'}}>
              <span className="tag soft" style={{padding:'5px 9px', fontSize:11}}>🇪🇺 EU · Frankfurt</span>
              <span className="tag soft" style={{padding:'5px 9px', fontSize:11}}>GDPR</span>
              <span className="tag soft" style={{padding:'5px 9px', fontSize:11}}>ISO 27001 in progress</span>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap: 0, background:'#fff', border:'1px solid var(--hairline)', borderRadius: 14, overflow:'hidden'}}>
            {items.map((it, i) => (
              <div key={i} style={{
                padding: 24,
                borderRight: '1px solid var(--hairline)',
                borderBottom: '1px solid var(--hairline)',
                background: it.emphasis ? 'var(--bg)' : '#fff',
                position: 'relative'
              }}>
                {it.emphasis && (
                  <span style={{
                    position:'absolute', top: 16, right: 16, fontSize: 9.5, fontWeight: 600,
                    letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent-2)'
                  }}>
                    Why councils choose us
                  </span>
                )}
                <span style={{
                  display:'inline-flex', width:36, height:36, borderRadius:9,
                  background: it.emphasis ? 'var(--accent-tint)' : 'var(--surface-2)',
                  color: it.emphasis ? 'var(--accent-2)' : 'var(--ink-2)',
                  alignItems:'center', justifyContent:'center'
                }}>{it.ico}</span>
                <h4 className="display" style={{fontSize: 17, margin:'14px 0 6px', fontWeight: 500, lineHeight: 1.25}}>
                  {it.title}
                </h4>
                <p className="text-ink2" style={{margin:0, fontSize: 13.5, lineHeight: 1.55}}>{it.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, FeatureGrid, Compliance });