<script lang="ts">
  import { Plug } from 'lucide-svelte';

  // Connected systems. Each integration has its own page nested under this one
  // (and a matching submenu entry in the rail).
  const integrations = [
    {
      href: '/ordering/manage/integrations/xero',
      name: 'Xero',
      description: 'Send confirmed order invoices to Xero and map customers to their Xero contact.'
    }
  ];
</script>

<section class="surface-card">
  <h2>Integrations</h2>
  <p class="muted">Connect the ordering portal to the systems you already use.</p>
  <ul class="integration-list">
    {#each integrations as it (it.href)}
      <li>
        <a class="integration" href={it.href}>
          <span class="ico"><Plug size={18} strokeWidth={1.75} /></span>
          <span class="body">
            <span class="name">{it.name}</span>
            <span class="desc">{it.description}</span>
          </span>
        </a>
      </li>
    {/each}
  </ul>
</section>

<style>
  .integration-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
  .integration {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--panel-soft);
    transition: border-color 140ms ease, background-color 140ms ease;
  }
  .integration:hover { border-color: var(--color-brand); background: var(--color-surface-hover); }
  .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-control);
    background: var(--color-bg-surface);
    color: var(--color-brand);
    flex-shrink: 0;
  }
  .body { display: grid; gap: 0.15rem; min-width: 0; }
  .name { font-weight: 700; font-size: 0.95rem; color: var(--color-text-primary); }
  .desc { font-size: 0.82rem; color: var(--color-text-muted); }
</style>
