Embed Trust-Fabric Widget

import { useEffect, useState } from 'react';

const API = 'https://apiv3.droplinked.com';

type TrustFabricData = {
  brand: { status?: string } | null;
  credit: { attestation?: { creditLineCents?: number; lenderId?: string } } | null;
  repayment: { summary?: { successfulSettlements?: number } } | null;
  upgrade: { currentTier?: string } | null;
  stats: {
    lenders?: { active?: number };
    attestations?: { schemaB?: number };
  } | null;
};

function useTrustFabric(shopSlug: string, merchantId: string) {
  const [data, setData] = useState<TrustFabricData | null>(null);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      const [brand, credit, repayment, upgrade, stats] = await Promise.all([
        fetch(`${API}/v2/attestations/brand/${shopSlug}`).then((r) => r.json()).catch(() => null),
        fetch(`${API}/v2/attestations/credit-risk/${merchantId}`).then((r) => r.json()).catch(() => null),
        fetch(`${API}/v2/attestations/repayment-history/${merchantId}`).then((r) => r.json()).catch(() => null),
        fetch(`${API}/v2/upgrade-preview?merchantId=${merchantId}`).then((r) => r.json()).catch(() => null),
        fetch(`${API}/v2/trust-fabric/stats`).then((r) => r.json()).catch(() => null),
      ]);
      if (!cancelled) setData({ brand, credit, repayment, upgrade, stats });
    }

    load();
    const id = setInterval(load, 5 * 60_000);
    return () => {
      cancelled = true;
      clearInterval(id);
    };
  }, [shopSlug, merchantId]);

  return data;
}

export function TrustFabricWidget({
  shopSlug,
  merchantId,
}: {
  shopSlug: string;
  merchantId: string;
}) {
  const data = useTrustFabric(shopSlug, merchantId);
  if (!data) return <div style={{ color: '#5b6b64' }}>Loading trust-fabric posture…</div>;

  const brandStatus = data.brand?.status || 'not yet issued';
  const tier = data.upgrade?.currentTier || 'starter';
  const creditLine = data.credit?.attestation?.creditLineCents
    ? `$${(data.credit.attestation.creditLineCents / 100).toFixed(2)}`
    : 'none active';
  const settlements = data.repayment?.summary?.successfulSettlements ?? 0;
  const activeLenders = data.stats?.lenders?.active ?? 0;
  const schemaB = data.stats?.attestations?.schemaB ?? 0;

  const labelStyle: React.CSSProperties = {
    color: '#5b6b64',
    fontSize: 11,
    textTransform: 'uppercase',
    letterSpacing: '.08em',
  };
  const valueStyle: React.CSSProperties = {
    fontSize: 14,
    color: '#11221c',
    marginTop: 4,
  };

  return (
    <div
      style={{
        background: '#fff',
        borderRadius: 12,
        padding: 24,
        boxShadow: '0 1px 3px rgba(0,0,0,.06)',
        fontFamily: 'system-ui, -apple-system, sans-serif',
        maxWidth: 480,
      }}
    >
      <h2 style={{ margin: '0 0 16px', color: '#11221c', fontSize: 18 }}>
        Trust-Fabric Posture
      </h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 12,
          marginBottom: 16,
        }}
      >
        <div>
          <div style={labelStyle}>Brand attestation</div>
          <div style={valueStyle}>{brandStatus}</div>
        </div>
        <div>
          <div style={labelStyle}>Trust tier</div>
          <div style={valueStyle}>{tier}</div>
        </div>
        <div>
          <div style={labelStyle}>Credit line</div>
          <div style={valueStyle}>{creditLine}</div>
        </div>
        <div>
          <div style={labelStyle}>Settlements</div>
          <div style={valueStyle}>{settlements}</div>
        </div>
      </div>
      <p
        style={{
          color: '#5b6b64',
          fontSize: 11,
          margin: 0,
          paddingTop: 12,
          borderTop: '1px solid #eef2f0',
        }}
      >
        Powered by Droplinked Trust Fabric — {activeLenders} active lenders,{' '}
        {schemaB} on-chain credit attestations
      </p>
    </div>
  );
}