// sections-extra.jsx — Trusted-by strip and Roadmap section

function TrustedBy() {
  const items = [
    { name: 'Pilot council teams', real: true },
    { name: 'New council onboarding', real: false },
    { name: 'Pilot phase active', real: false },
    { name: 'Council workflow trials', real: false },
  ];


  return (
    <section style={{ paddingTop: 48, paddingBottom: 56, borderTop: 0 }} data-comment-anchor="ba688abebd-section-17-5">
      <div className="wrap" style={{ maxWidth: 1080 }}>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <span style={{
            fontSize: 12, color: 'var(--ink-4)',
            letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 500
          }}>
            In production with council teams across Malta
          </span>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
          gap: 8, alignItems: 'stretch'
        }}>
          {items.map((c, i) =>
          <div key={i} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: '14px 12px',
            fontFamily: 'var(--serif)', fontSize: 15, fontWeight: 500,
            letterSpacing: '-0.005em',
            color: c.real ? 'var(--ink-2)' : 'var(--ink-4)',
            opacity: c.real ? 1 : 0.7,
            borderRadius: 10,
            background: c.real ? 'var(--surface)' : 'transparent',
            border: c.real ? '1px solid var(--hairline)' : '1px dashed var(--hairline-2)',
            boxShadow: c.real ? 'var(--shadow-sm)' : 'none',
            textAlign: 'center', lineHeight: 1.25
          }}>
              {c.name}
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Roadmap / Coming soon ─────────────────────────────────────────
function Roadmap() {
  const items = [
  {
    tag: 'Coming soon',
    title: 'Supplier management',
    blurb: 'A clean directory of every supplier, with contacts, payment history, and active purchase orders in one place.',
    visual: <RoadmapSupplierCRM />
  },
  {
    tag: 'Coming soon',
    title: 'Purchase order automation',
    blurb: 'Purchase order drafts created from the codes set on the invoice, ready to review and issue from the app.',
    visual: <RoadmapPO />
  },
  {
    tag: 'Coming soon',
    title: 'Councillor mobile approvals',
    blurb: 'Councillors approve or query line items from their phone. Push notifications, e-signature, and instant status across the chain.',
    visual: <RoadmapThreading />
  },
  {
    tag: 'Coming soon',
    title: 'Budget tracking, by line',
    blurb: 'Live view of spend against the council’s annual budget, broken down by procurement code. Flags when a line is heading over.',
    visual: <RoadmapMail />
  }];


  return (
    <section id="roadmap" style={{ position: 'relative', overflow: 'hidden' }}>
      {/* subtle blue wash */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,110,255,0.06), transparent 70%)'
      }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
          marginBottom: 56
        }}>
          <div style={{ maxWidth: 600 }}>
            <div className="eyebrow">What's next</div>
            <h2 className="display h2 mt-12" style={{ margin: 0, textWrap: 'balance' }}>
              Procurement, <em>end to end.</em>
            </h2>
            <p className="lede mt-16" style={{ margin: 0 }}>
              Invoices were just the start. Auto-Council is becoming the system of record
              for everything your council buys and pays.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)',
              boxShadow: '0 0 0 4px var(--accent-tint)'
            }} />
            <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>4 features shipping in 2026</span>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20
        }}>
          {items.map((it, i) =>
          <div key={i} className="card" style={{
            padding: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden',
            boxShadow: 'var(--shadow-md)'
          }}>
              <div style={{
              aspectRatio: '1.55 / 1',
              background: 'linear-gradient(180deg, var(--bg-blue) 0%, var(--accent-mist) 100%)',
              position: 'relative', overflow: 'hidden',
              borderBottom: '1px solid var(--hairline)'
            }}>
                {it.visual}
              </div>
              <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{
                alignSelf: 'flex-start',
                fontSize: 10.5, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase',
                color: it.tag === 'In beta' ? 'var(--green)' : 'var(--accent-2)',
                background: it.tag === 'In beta' ? 'var(--green-tint)' : 'var(--accent-tint)',
                padding: '3px 8px', borderRadius: 999
              }}>{it.tag}</span>
                <h3 className="display" style={{ fontSize: 22, margin: 0, lineHeight: 1.2, fontWeight: 500 }}>
                  {it.title}
                </h3>
                <p className="text-ink2" style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55 }}>{it.blurb}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── Roadmap visuals ───────────────────────────────────────────────
function RoadmapSupplierCRM() {
  const sups = [
  { n: 'Vella Electrical Ltd', po: 17, eur: '42,180' },
  { n: 'Stamperija Borg & Sons', po: 24, eur: '18,400' },
  { n: 'Calleja Hardware', po: 9, eur: '12,640' }];

  return (
    <div style={{
      position: 'absolute', inset: '18px 18px auto 18px',
      background: '#fff', border: '1px solid var(--hairline)', borderRadius: 12,
      padding: 12, boxShadow: 'var(--shadow-sm)',
      display: 'flex', flexDirection: 'column', gap: 8
    }}>
      <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' }}>Suppliers · 142</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--accent-2)' }}>
          <IconSparkle size={10} /> sync
        </span>
      </div>
      {sups.map((s, i) =>
      <div key={i} style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '7px 8px', borderRadius: 8,
        background: i === 0 ? 'var(--accent-mist)' : 'transparent',
        border: i === 0 ? '1px solid var(--accent-tint)' : '1px solid transparent'
      }}>
          <span style={{
          width: 26, height: 26, borderRadius: 6,
          background: i === 0 ? 'var(--accent)' : 'var(--surface-2)',
          color: i === 0 ? '#fff' : 'var(--ink-2)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11, fontWeight: 600, fontFamily: 'var(--serif)'
        }}>{s.n[0]}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11.5, fontWeight: 500, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.n}</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{s.po} POs · €{s.eur}</div>
          </div>
          <IconArrowRight size={12} color="var(--ink-4)" />
        </div>
      )}
    </div>);

}

function RoadmapPO() {
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div style={{
        width: '78%',
        background: '#fff', border: '1px solid var(--hairline)', borderRadius: 10,
        boxShadow: 'var(--shadow-md)',
        padding: 16, display: 'flex', flexDirection: 'column', gap: 8
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-4)', letterSpacing: '0.05em', textTransform: 'uppercase', fontWeight: 600 }}>Purchase Order</div>
            <div className="mono" style={{ fontSize: 13, color: 'var(--ink)', marginTop: 2 }}>PO-2026-118</div>
          </div>
          <span style={{
            fontSize: 10, fontWeight: 600, color: 'var(--accent-2)',
            background: 'var(--accent-tint)', padding: '3px 7px', borderRadius: 999
          }}>Ready to send</span>
        </div>
        <div style={{ height: 1, background: 'var(--hairline)' }} />
        {[
        ['Supplier', 'Vella Electrical Ltd'],
        ['Items', '3 line items'],
        ['Net', '€3,265.50']].
        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={{ color: 'var(--ink)', fontWeight: 500 }}>{v}</span>
          </div>
        )}
        <button className="btn btn-primary" style={{ fontSize: 11, padding: '7px 10px', alignSelf: 'stretch', justifyContent: 'center', marginTop: 4 }}>
          <IconArrowUpRight size={11} /> Generate PO
        </button>
      </div>
    </div>);

}

function RoadmapThreading() {
  // Councillor approval queue in a phone frame
  const items = [
    { sup: 'Vella Electrical', amt: '€3,265', tag: 'INV', selected: true },
    { sup: 'SkyClean Services', amt: '€620',  tag: 'REC', selected: false },
    { sup: 'Trans Marine',     amt: '€5,890', tag: 'RFP', selected: false },
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 18 }}>
      <div style={{
        width: 156, height: 220, borderRadius: 22,
        background: '#0E1A33', padding: 8, position: 'relative',
        boxShadow: 'var(--shadow-md)'
      }}>
        <div style={{
          position: 'absolute', top: 6, left: '50%', transform: 'translateX(-50%)',
          width: 50, height: 12, borderRadius: 999, background: '#000', zIndex: 2
        }} />
        <div style={{
          width: '100%', height: '100%', borderRadius: 16, background: '#fff',
          padding: '22px 10px 10px', display: 'flex', flexDirection: 'column', gap: 6, overflow: 'hidden'
        }}>
          <div style={{ fontSize: 9, color: 'var(--ink-3)', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            To approve · 3
          </div>
          {items.map((m, i) => (
            <div key={i} style={{
              background: m.selected ? 'var(--accent-mist)' : 'var(--surface)',
              border: '1px solid ' + (m.selected ? 'var(--accent-tint)' : 'var(--hairline)'), borderRadius: 7,
              padding: '5px 7px', display: 'flex', flexDirection: 'column', gap: 2
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 86 }}>
                  {m.sup}
                </span>
                <span className="tnum" style={{ fontSize: 9, fontWeight: 600, color: 'var(--ink-2)' }}>{m.amt}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{
                  fontSize: 7.5, fontFamily: 'var(--mono)', fontWeight: 600,
                  padding: '1px 5px', borderRadius: 999,
                  background: 'var(--surface-2)', color: 'var(--ink-2)'
                }}>{m.tag}</span>
                {m.selected && (
                  <span style={{
                    width: 14, height: 14, borderRadius: 4, background: 'var(--accent)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff'
                  }}>
                    <IconCheck size={8} stroke={3} />
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>);

}

function RoadmapMail() {
  const lines = [
    { code: 'P · Personnel',          used: 64, total: '€280K' },
    { code: 'Inv · Operating',        used: 81, total: '€124K', warn: true },
    { code: 'RFP · Capital projects', used: 42, total: '€520K' },
    { code: 'Rec · Recurring',        used: 58, total: '€48K' },
  ];
  return (
    <div style={{ position: 'absolute', inset: '16px 18px', display: 'flex', flexDirection: 'column', gap: 8, justifyContent: 'center' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 2 }}>
        <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
          Spend vs budget · 2026
        </span>
        <span className="mono" style={{ fontSize: 10, color: 'var(--ink-4)' }}>YTD</span>
      </div>
      {lines.map((l, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5 }}>
            <span style={{ color: 'var(--ink-2)', fontWeight: 500, display: 'inline-flex', gap: 5, alignItems: 'center' }}>
              {l.code}
              {l.warn && (
                <span style={{
                  fontSize: 8.5, fontWeight: 600, color: '#B91C1C', background: 'rgba(239,68,68,0.1)',
                  padding: '1px 5px', borderRadius: 999
                }}>over pace</span>
              )}
            </span>
            <span className="tnum mono" style={{ color: 'var(--ink-3)', fontSize: 10 }}>{l.used}% of {l.total}</span>
          </div>
          <div style={{ height: 5, background: 'var(--surface-2)', borderRadius: 999, overflow: 'hidden' }}>
            <div style={{
              width: `${l.used}%`, height: '100%',
              background: l.warn ? 'linear-gradient(90deg, var(--accent), #B91C1C)' : 'var(--accent)',
              borderRadius: 999
            }} />
          </div>
        </div>
      ))}
    </div>);

}

Object.assign(window, { TrustedBy, Roadmap });