/* All middle sections */
(function() {
const { useState } = React;

/* ── Shared primitives ── */
const S = {
  section: (accent) => ({
    padding: '120px 40px',
    maxWidth: '1200px', margin: '0 auto',
  }),
  overline: (color = '#2E8FFF') => ({
    fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600,
    letterSpacing: '0.14em', textTransform: 'uppercase', color,
    display: 'block', marginBottom: '16px',
  }),
  h2: {
    fontFamily: 'DM Sans, sans-serif', fontWeight: 600,
    fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1.08,
    letterSpacing: '-0.03em', color: '#F0F2F5', marginBottom: '20px',
  },
  body: {
    fontFamily: 'Inter, sans-serif', fontSize: '16px', lineHeight: 1.7,
    color: '#8A9BB0', maxWidth: '560px',
  },
  card: {
    background: '#111318', border: '1px solid rgba(255,255,255,0.06)',
    borderRadius: '12px', padding: '28px',
    transition: 'transform 220ms, box-shadow 220ms',
  },
};

const Divider = () => (
  <div style={{ height: '1px', background: 'rgba(255,255,255,0.05)', margin: '0 40px' }}></div>
);

const FeatureChip = ({ label, color = '#2E8FFF' }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: '6px',
    fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: 500,
    padding: '4px 12px', borderRadius: '9999px',
    background: `${color}12`, border: `1px solid ${color}33`, color,
  }}>
    <span style={{ width: '5px', height: '5px', borderRadius: '50%', background: color, display: 'inline-block' }}></span>
    {label}
  </span>
);

const StatBox = ({ val, label, accent = '#2E8FFF' }) => (
  <div style={{ textAlign: 'center', padding: '24px 20px', background: '#111318', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '10px' }}>
    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '28px', fontWeight: 600, color: accent, letterSpacing: '-0.02em' }}>{val}</div>
    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#4A5568', marginTop: '6px' }}>{label}</div>
  </div>
);

/* ── CREDIBILITY BAR ── */
function CredibilityBar() {
  const items = [
    'Shaped by real field operations',
    'Multi-site stock visibility',
    'Mobile + web unified',
    'Full audit traceability',
    'Enterprise-grade access control',
    'Role-based permissions',
    'Reporting & analytics built-in',
  ];
  return (
    <div style={{ borderTop: '1px solid rgba(255,255,255,0.05)', borderBottom: '1px solid rgba(255,255,255,0.05)', background: '#0D0F13', padding: '18px 0', overflow: 'hidden' }}>
      <div style={{ display: 'flex', gap: '48px', whiteSpace: 'nowrap', animation: 'marquee 28s linear infinite' }}>
        {[...items, ...items].map((item, i) => (
          <span key={i} style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', fontWeight: 500, color: '#4A5568', display: 'flex', alignItems: 'center', gap: '12px' }}>
            <span style={{ width: '4px', height: '4px', borderRadius: '50%', background: '#2E8FFF', display: 'inline-block', opacity: 0.6 }}></span>
            {item}
          </span>
        ))}
      </div>
      <style>{`@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }`}</style>
    </div>
  );
}

/* ── WHAT IS OPERASIS ── */
function WhatIsSection() {
  const products = [
    { name: 'Operasis Warehouse', desc: 'Complete stock control. Barcode scanning, shelf logic, inbound/outbound, and mobile-first warehouse operations.', color: '#2E8FFF', icon: '▦' },
    { name: 'Operasis Procurement', desc: 'Request to payment — with multi-step approvals, purchase orders, delivery tracking and full audit logs.', color: '#00C9A7', icon: '◈' },
    { name: 'Operasis Suite', desc: 'The unified flow. Procurement and warehouse in a single connected ecosystem with one source of truth.', color: '#F5A623', icon: '◉' },
    { name: 'CO Pilot', desc: 'An AI intelligence layer that surfaces critical stock signals, approval delays, and executive summaries.', color: '#8A9BB0', icon: '◎' },
  ];

  return (
    <section id="platform" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'start' }}>
        <div className="reveal">
          <span style={S.overline()}>What is Operasis</span>
          <h2 style={S.h2}>More than a stock program. A full operational control layer.</h2>
          <p style={S.body}>Operasis connects procurement, warehouse processes, stock visibility, facility workflows, mobile field operations, and AI-assisted decision support in one ecosystem.</p>
          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', marginTop: '28px' }}>
            {['Procurement','Warehouse','Mobile Field','AI Insights','Approvals','Reporting'].map(t => (
              <FeatureChip key={t} label={t} />
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px' }}>
          {products.map((p, i) => (
            <div key={p.name} className={`reveal reveal-delay-${i+1}`}
              style={S.card}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = `0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px ${p.color}22`; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              <div style={{ fontSize: '20px', marginBottom: '12px', color: p.color }}>{p.icon}</div>
              <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '14px', fontWeight: 600, color: '#F0F2F5', marginBottom: '8px' }}>{p.name}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#8A9BB0', lineHeight: 1.6 }}>{p.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── WAREHOUSE ── */
function WarehouseSection() {
  const features = [
    { label: 'Barcode & QR workflows', desc: 'Scan-in, scan-out, transfer, and receive with any mobile device.' },
    { label: 'Shelf & location logic', desc: 'Assign items to exact locations. Track movement between zones.' },
    { label: 'Critical stock alerts', desc: 'Automatic thresholds trigger alerts before stock runs out.' },
    { label: 'Inbound / Outbound', desc: 'Full delivery note and invoice relation for every movement.' },
    { label: 'Mobile warehouse', desc: 'iOS and Android support for field-level stock operations.' },
    { label: 'Reporting', desc: 'Movement history, stock snapshots, and exportable audit logs.' },
  ];

  return (
    <div style={{ background: '#0D0F13', padding: '1px 0' }}>
      <section id="warehouse" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '72px' }}>
          <span className="reveal" style={S.overline('#2E8FFF')}>Operasis Warehouse</span>
          <h2 className="reveal reveal-delay-1" style={{ ...S.h2, textAlign: 'center', maxWidth: '600px', margin: '0 auto 20px' }}>
            Warehouse operations that work on web and mobile.
          </h2>
          <p className="reveal reveal-delay-2" style={{ ...S.body, textAlign: 'center', margin: '0 auto' }}>
            From shelf scanning to delivery receiving — every stock movement is logged, traceable, and visible across your entire operation.
          </p>
        </div>

        {/* Visual mock */}
        <div className="reveal" style={{ background: '#111318', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', padding: '32px', marginBottom: '60px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, right: 0, width: '40%', height: '100%', background: 'radial-gradient(ellipse at right, rgba(46,143,255,0.06) 0%, transparent 70%)', pointerEvents: 'none' }}></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '32px', alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#4A5568', marginBottom: '16px' }}>Live Stock View</div>
              {[['WH-BOLT-M12','Hex Bolt M12','1,240','teal'],['EL-CABLE-3MM','Electrical Cable 3mm','12','amber'],['FLT-OIL-15W40','Engine Oil 15W-40','0','red'],['PPE-GLOVE-L','Safety Gloves L','340','blue']].map(([sku, name, qty, c]) => {
                const colors = { teal: '#00C9A7', amber: '#F5A623', red: '#E85454', blue: '#2E8FFF' };
                const labels = { teal: 'In Stock', amber: 'Critical', red: 'Out', blue: 'Transfer' };
                return (
                  <div key={sku} style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '11px', color: '#F0F2F5', width: '100px', flexShrink: 0 }}>{sku}</div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#8A9BB0', flex: 1 }}>{name}</div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '13px', fontWeight: 600, color: colors[c], width: '50px', textAlign: 'right' }}>{qty}</div>
                    <span style={{ fontSize: '10px', fontWeight: 500, padding: '2px 8px', borderRadius: '9999px', background: `${colors[c]}14`, border: `1px solid ${colors[c]}33`, color: colors[c], whiteSpace: 'nowrap' }}>{labels[c]}</span>
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
              {[['4,812','Total Items','#2E8FFF'],['7','Critical Stock','#E85454'],['48','Received Today','#00C9A7'],['12','Transfers Active','#F5A623']].map(([v,l,c]) => (
                <StatBox key={l} val={v} label={l} accent={c} />
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
          {features.map((f, i) => (
            <div key={f.label} className={`reveal reveal-delay-${(i % 3) + 1}`}
              style={{ ...S.card, display: 'flex', flexDirection: 'column', gap: '8px' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'rgba(46,143,255,0.2)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'; }}>
              <div style={{ width: '28px', height: '2px', background: '#2E8FFF', borderRadius: '1px', marginBottom: '4px' }}></div>
              <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '14px', fontWeight: 600, color: '#F0F2F5' }}>{f.label}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#8A9BB0', lineHeight: 1.6 }}>{f.desc}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ── PROCUREMENT ── */
function ProcurementSection() {
  const [activeStep, setActiveStep] = useState(0);
  const steps = [
    { label: 'Request', desc: 'Any authorized user creates a purchase request with line items, quantities, and justification.', color: '#2E8FFF' },
    { label: 'Approval', desc: 'Multi-step approval flows route the request to the right approvers. Each step is logged.', color: '#8A9BB0' },
    { label: 'Purchase Order', desc: 'Approved requests convert to POs. Supplier is notified. Order status is tracked.', color: '#00C9A7' },
    { label: 'Receiving', desc: 'Delivery is matched against the PO. Line-item discrepancies are flagged automatically.', color: '#F5A623' },
    { label: 'Payment', desc: 'Invoice is matched to PO and receipt. Payment status is tracked through completion.', color: '#2E8FFF' },
    { label: 'Warehouse', desc: 'Received goods are automatically entered into the warehouse with barcodes assigned.', color: '#00C9A7' },
  ];

  return (
    <section id="procurement" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'start' }}>
        <div>
          <span className="reveal" style={S.overline('#00C9A7')}>Operasis Procurement</span>
          <h2 className="reveal reveal-delay-1" style={S.h2}>Make approvals, purchasing, and receiving fully traceable.</h2>
          <p className="reveal reveal-delay-2" style={S.body}>Every procurement action — from line-item request to payment confirmation — is logged, traceable, and reportable.</p>

          <div className="reveal reveal-delay-3" style={{ marginTop: '36px', display: 'flex', flexDirection: 'column', gap: '6px' }}>
            {steps.map((s, i) => (
              <div key={s.label}
                onClick={() => setActiveStep(i)}
                style={{
                  display: 'flex', alignItems: 'flex-start', gap: '14px',
                  padding: '14px 16px', borderRadius: '8px', cursor: 'pointer',
                  background: activeStep === i ? 'rgba(46,143,255,0.07)' : 'transparent',
                  border: activeStep === i ? '1px solid rgba(46,143,255,0.18)' : '1px solid transparent',
                  transition: 'all 180ms',
                }}>
                <div style={{ width: '24px', height: '24px', borderRadius: '50%', background: activeStep === i ? s.color : '#1E2330', border: `1.5px solid ${activeStep === i ? s.color : '#2A3346'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 180ms' }}>
                  <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '10px', fontWeight: 600, color: activeStep === i ? '#fff' : '#4A5568' }}>{i + 1}</span>
                </div>
                <div>
                  <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '14px', fontWeight: 600, color: activeStep === i ? '#F0F2F5' : '#8A9BB0', transition: 'color 180ms' }}>{s.label}</div>
                  {activeStep === i && <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#8A9BB0', lineHeight: 1.6, marginTop: '4px' }}>{s.desc}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Procurement visual */}
        <div className="reveal reveal-delay-2">
          <div style={{ background: '#111318', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '14px', padding: '28px', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '1px', background: 'linear-gradient(90deg, transparent, #00C9A7, transparent)' }}></div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#4A5568', marginBottom: '20px' }}>Purchase Request #PR-2024-1082</div>
            {[['Requester','M. Yilmaz — Maintenance'],['Department','Facilities / IST-01'],['Status','Awaiting Level 2 Approval'],['Items','4 line items · ₺18,400'],['Created','2024-11-07 09:14'],['Due','2024-11-10']].map(([k,v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#4A5568' }}>{k}</span>
                <span style={{ fontFamily: k === 'Status' ? 'Inter, sans-serif' : 'JetBrains Mono, monospace', fontSize: '12px', color: k === 'Status' ? '#F5A623' : '#F0F2F5' }}>{v}</span>
              </div>
            ))}
            <div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
              <button style={{ flex: 1, fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: 500, padding: '10px', borderRadius: '6px', background: '#00C9A7', color: '#fff', border: 'none', cursor: 'pointer' }}>Approve</button>
              <button style={{ flex: 1, fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: 500, padding: '10px', borderRadius: '6px', background: 'transparent', color: '#E85454', border: '1px solid rgba(232,84,84,0.3)', cursor: 'pointer' }}>Reject</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── SUITE / END-TO-END ── */
function SuiteSection() {
  const nodes = [
    { label: 'Request', sub: 'Created', color: '#2E8FFF' },
    { label: 'Approval', sub: 'Reviewed', color: '#8A9BB0' },
    { label: 'Purchase Order', sub: 'Issued', color: '#00C9A7' },
    { label: 'Receiving', sub: 'Matched', color: '#F5A623' },
    { label: 'Warehouse Entry', sub: 'Logged', color: '#2E8FFF' },
    { label: 'Stock Move', sub: 'Transferred', color: '#00C9A7' },
  ];

  return (
    <div style={{ background: '#0D0F13', padding: '1px 0' }}>
      <section id="suite" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto', textAlign: 'center' }}>
        <span className="reveal" style={S.overline('#F5A623')}>Operasis Suite</span>
        <h2 className="reveal reveal-delay-1" style={{ ...S.h2, textAlign: 'center', maxWidth: '680px', margin: '0 auto 20px' }}>
          From request to stock movement, everything is connected.
        </h2>
        <p className="reveal reveal-delay-2" style={{ ...S.body, textAlign: 'center', margin: '0 auto 64px' }}>
          The Operasis Suite connects procurement and warehouse in one operational backbone. No gaps. No re-entry. One flow.
        </p>

        <div className="reveal reveal-delay-3" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0', overflowX: 'auto', padding: '20px 0' }}>
          {nodes.map((n, i) => (
            <React.Fragment key={n.label}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', minWidth: '110px' }}>
                <div style={{ width: '52px', height: '52px', borderRadius: '10px', background: '#111318', border: `1.5px solid ${n.color}44`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 0 20px ${n.color}18` }}>
                  <div style={{ width: '16px', height: '16px', borderRadius: '3px', background: n.color, opacity: 0.8 }}></div>
                </div>
                <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '12px', fontWeight: 600, color: '#F0F2F5', textAlign: 'center' }}>{n.label}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '10px', color: '#4A5568' }}>{n.sub}</div>
              </div>
              {i < nodes.length - 1 && (
                <div style={{ flex: 1, height: '1px', background: 'linear-gradient(90deg, rgba(46,143,255,0.3), rgba(46,143,255,0.1))', minWidth: '24px', margin: '0 0 28px' }}></div>
              )}
            </React.Fragment>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ── CO PILOT ── */
function CoPilotSection() {
  const signals = [
    { type: 'Critical Stock', msg: 'WH-BOLT-M12 below reorder threshold at IST-01', color: '#E85454', icon: '▲' },
    { type: 'Approval Delay', msg: 'PR-2024-1082 awaiting approval for 5+ days', color: '#F5A623', icon: '◷' },
    { type: 'Delivery Received', msg: 'PO-2024-0441 received in full. 48 items logged.', color: '#00C9A7', icon: '✓' },
    { type: 'Executive Summary', msg: '3 sites operational. 7 critical items. 24 approvals pending.', color: '#2E8FFF', icon: '◈' },
  ];

  return (
    <section id="copilot" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }}>
        {/* Signals panel */}
        <div className="reveal" style={{ background: '#111318', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', padding: '32px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '1px', background: 'linear-gradient(90deg, transparent, #2E8FFF55, transparent)' }}></div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#2E8FFF', marginBottom: '24px' }}>CO Pilot — Operational Signals</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
            {signals.map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: '14px', alignItems: 'flex-start', padding: '14px 16px', borderRadius: '8px', background: `${s.color}08`, border: `1px solid ${s.color}22` }}>
                <span style={{ fontSize: '14px', color: s.color, flexShrink: 0, marginTop: '1px' }}>{s.icon}</span>
                <div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', fontWeight: 600, color: s.color, marginBottom: '3px', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.type}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#8A9BB0', lineHeight: 1.5 }}>{s.msg}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: '20px', padding: '14px 16px', borderRadius: '8px', background: 'rgba(46,143,255,0.06)', border: '1px solid rgba(46,143,255,0.15)' }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '12px', color: '#8A9BB0', lineHeight: 1.6 }}>
              <span style={{ color: '#2E8FFF', fontWeight: 500 }}>CO Pilot suggests: </span>
              Raise a purchase request for WH-BOLT-M12 and assign to Procurement — this item has been critical for 3 consecutive weeks.
            </div>
          </div>
        </div>

        <div>
          <span className="reveal" style={S.overline('#8A9BB0')}>CO Pilot — AI Layer</span>
          <h2 className="reveal reveal-delay-1" style={S.h2}>An intelligence layer for operational decision-making.</h2>
          <p className="reveal reveal-delay-2" style={S.body}>CO Pilot surfaces what matters. Critical stock signals, stalled approvals, delivery anomalies — distilled into clear actions for operations managers and executives.</p>
          <div className="reveal reveal-delay-3" style={{ marginTop: '28px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
            {['Operational summaries across all sites', 'Anomaly detection on stock and approvals', 'Executive-level decision support', 'Proactive reorder and escalation signals'].map(f => (
              <div key={f} style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
                <div style={{ width: '20px', height: '20px', borderRadius: '50%', background: 'rgba(46,143,255,0.12)', border: '1px solid rgba(46,143,255,0.25)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ color: '#2E8FFF', fontSize: '10px' }}>✓</span>
                </div>
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: '14px', color: '#8A9BB0' }}>{f}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── INDUSTRIES ── */
function IndustriesSection() {
  const [hovered, setHovered] = useState(null);
  const industries = [
    { name: 'Municipalities', desc: 'Multi-department procurement flows, public asset management, and approval governance.', icon: '⬡' },
    { name: 'Industrial Facilities', desc: 'High-volume MRO procurement, maintenance stock, and mobile field operations.', icon: '⬡' },
    { name: 'Infrastructure & Utilities', desc: 'Critical parts traceability, scheduled procurement, and compliance reporting.', icon: '⬡' },
    { name: 'Factories & Tech Warehouses', desc: 'Production-critical stock control, just-in-time visibility, barcode workflows.', icon: '⬡' },
    { name: 'Energy & Treatment', desc: 'Regulated inventory management, approval chains, and audit-ready records.', icon: '⬡' },
    { name: 'Multi-Site Operations', desc: 'Unified visibility across all warehouses and procurement entities.', icon: '⬡' },
  ];

  return (
    <div style={{ background: '#0D0F13', padding: '1px 0' }}>
      <section id="industries" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '64px' }}>
          <span className="reveal" style={S.overline()}>Industries</span>
          <h2 className="reveal reveal-delay-1" style={{ ...S.h2, textAlign: 'center', maxWidth: '500px', margin: '0 auto' }}>
            Built for organizations that run complex operations.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '14px' }}>
          {industries.map((ind, i) => (
            <div key={ind.name}
              className={`reveal reveal-delay-${(i % 3) + 1}`}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              style={{
                ...S.card,
                cursor: 'default',
                transform: hovered === i ? 'translateY(-3px)' : 'none',
                boxShadow: hovered === i ? '0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(46,143,255,0.15)' : 'none',
                borderColor: hovered === i ? 'rgba(46,143,255,0.2)' : 'rgba(255,255,255,0.06)',
              }}>
              <div style={{ width: '32px', height: '32px', borderRadius: '7px', background: 'rgba(46,143,255,0.1)', border: '1px solid rgba(46,143,255,0.2)', marginBottom: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: '12px', height: '12px', borderRadius: '2px', background: '#2E8FFF', opacity: 0.7 }}></div>
              </div>
              <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '15px', fontWeight: 600, color: '#F0F2F5', marginBottom: '8px' }}>{ind.name}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#8A9BB0', lineHeight: 1.6 }}>{ind.desc}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ── SECURITY ── */
function SecuritySection() {
  const items = [
    { label: 'Role-based access control', desc: 'Granular permissions per user, department, and site.' },
    { label: 'Full audit trail', desc: 'Every action is logged with user, timestamp, and IP.' },
    { label: 'Multi-site isolation', desc: 'Data scoped per site while sharing group-level visibility.' },
    { label: 'Attachment & document management', desc: 'Files attached to every request, PO, and delivery note.' },
    { label: 'Approval workflow engine', desc: 'Configurable multi-step approval chains per request type.' },
    { label: 'Enterprise-grade infrastructure', desc: 'Scalable, monitored, with SLA commitments for critical ops.' },
  ];

  return (
    <section id="security" style={{ padding: '120px 40px', maxWidth: '1200px', margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' }}>
        <div>
          <span className="reveal" style={S.overline('#8A9BB0')}>Enterprise Readiness</span>
          <h2 className="reveal reveal-delay-1" style={S.h2}>Designed for organizations that demand traceability.</h2>
          <p className="reveal reveal-delay-2" style={S.body}>Every deployment is built for real operational environments — with the controls, audit mechanisms, and access structures that enterprise operations require.</p>
        </div>
        <div className="reveal reveal-delay-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
          {items.map((item, i) => (
            <div key={item.label} style={{ background: '#111318', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '10px', padding: '18px 16px' }}>
              <div style={{ width: '20px', height: '2px', background: '#2A3346', borderRadius: '1px', marginBottom: '10px' }}></div>
              <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: '13px', fontWeight: 600, color: '#F0F2F5', marginBottom: '6px' }}>{item.label}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: '11px', color: '#4A5568', lineHeight: 1.6 }}>{item.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  CredibilityBar, WhatIsSection, WarehouseSection,
  ProcurementSection, SuiteSection, CoPilotSection,
  IndustriesSection, SecuritySection,
});
})();