/* Chip — consumer savings/investing app home screen in Chip's visual language
   (deep-green hero, serif display moments, savings dashboard with chart +
   account list). Brand "Chip" rendering here is an original, fictional skin for
   an Insurely integration demo — it embeds the shared Insurely collect-data
   widget (collect-widget.jsx). */

const CHIP = '#213123';      // midnight green — primary dark surface + headings
const CHIP_DEEP = '#16241a'; // pressed / darker hero base
const CHIP_INK = '#1b2a1f';  // near-black green for body headings
const CHIP_ACT = '#00824c';  // Chip action green — buttons, links, on-light deltas
const CHIP_ACT_DEEP = '#005f37';
const CHIP_LIME = '#a2e96b'; // granny smith — on-dark accents + chart

/* ---- inline icon helper (line, 2px, rounded — DS iconography) ---- */
function PI({ size = 24, c = CHIP_INK, w = 1.9, children }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={c} strokeWidth={w} strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
      {children}
    </svg>);

}

/* Chip coin mark — original stacked-coin / saved glyph */
function ChipMark({ size = 26, c = '#fff', ring = CHIP_LIME }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'block' }}>
      <circle cx="12" cy="12" r="9" stroke={ring} strokeWidth="2" strokeDasharray="0.5 4.1" strokeLinecap="round" />
      <path d="M8.6 12.4l2.4 2.4 4.4-5.4" stroke={c} strokeWidth="2.1" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* Small circular Chip product badge (green coin) */
function ChipCoin({ size = 36, pale }) {
  const bg = pale ? '#dceee2' : CHIP;
  const mark = pale ? CHIP : '#fff';
  const ring = pale ? CHIP_ACT : CHIP_LIME;
  return (
    <span style={{ width: size, height: size, borderRadius: '50%', background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <ChipMark size={size * 0.62} c={mark} ring={ring} />
    </span>);

}

function gbp(n) {
  return '£' + n.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

/* balance with raised, smaller pence — Chip signature numeral treatment */
function Money({ value, size = 46, color = '#fff', pence = true }) {
  const [whole, dec] = value.toFixed(2).split('.');
  const intStr = '£' + Number(whole).toLocaleString('en-GB');
  return (
    <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, color, letterSpacing: '-1px', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
      <span style={{ fontSize: size }}>{intStr}</span>
      {pence && <span style={{ fontSize: size * 0.5, verticalAlign: 'super', marginLeft: 1 }}>.{dec}</span>}
    </span>);

}

/* ===================== SAVINGS HERO ===================== */

const PERIODS = ['1m', '3m', '6m', '1y', '3y', 'max'];

function StepChart() {
  // rising staircase area, full-bleed — mirrors Chip's savings chart
  const area = 'M0 120 L52 120 L52 102 L104 102 L104 82 L156 82 L156 62 L208 62 L208 42 L260 42 L260 26 L320 26 L320 150 L0 150 Z';
  const line = 'M0 120 L52 120 L52 102 L104 102 L104 82 L156 82 L156 62 L208 62 L208 42 L260 42 L260 26 L320 26';
  return (
    <div style={{ position: 'relative', height: 150 }}>
      <svg viewBox="0 0 320 150" preserveAspectRatio="none" style={{ width: '100%', height: '100%', display: 'block' }}>
        <defs>
          <linearGradient id="chipFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={CHIP_LIME} stopOpacity="0.5" />
            <stop offset="100%" stopColor={CHIP_LIME} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={area} fill="url(#chipFill)" />
        <path d={line} fill="none" stroke={CHIP_LIME} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round"
        style={{ '--len': 720, strokeDasharray: 720, animation: 'chipDraw 900ms cubic-bezier(0.2,0.7,0.2,1) both' }} />
      </svg>
      {[['£5k', 22], ['£2.5k', 70], ['£0k', 116]].map(([t, top]) =>
      <span key={t} style={{ position: 'absolute', right: 14, top, background: 'rgba(8,26,15,0.5)', color: 'rgba(255,255,255,0.85)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 11, padding: '3px 9px', borderRadius: 1000 }}>{t}</span>
      )}
    </div>);

}

function SavingsHero({ total, delta, deltaPct }) {
  const [period, setPeriod] = React.useState('6m');
  return (
    <div style={{ background: 'linear-gradient(162deg, #2e5b3e 0%, #214731 48%, #143019 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ padding: '60px 20px 0' }}>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, color: 'rgba(255,255,255,0.82)' }}>Savings</div>
        <div style={{ marginTop: 8 }}><Money value={total} size={46} /></div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, whiteSpace: 'nowrap' }}>
          <PI size={14} c={CHIP_LIME} w={2.6}><path d="M7 17L17 7M17 7H9M17 7v8" /></PI>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: CHIP_LIME, fontVariantNumeric: 'tabular-nums' }}>+{gbp(delta)} ({deltaPct}%)</span>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14, color: 'rgba(255,255,255,0.62)' }}>last 6 months</span>
        </div>
      </div>

      <StepChart />

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 12px 18px' }}>
        {PERIODS.map((p) =>
        <button key={p} onClick={() => setPeriod(p)} style={{ appearance: 'none', border: 'none', cursor: 'pointer', height: 32, padding: '0 16px', borderRadius: 1000, background: period === p ? '#fff' : 'transparent', color: period === p ? CHIP : 'rgba(255,255,255,0.72)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5, transition: 'background 180ms cubic-bezier(0.2,0.7,0.2,1)' }}>{p}</button>
        )}
      </div>
    </div>);

}

/* ===================== CHIP'S OWN ACCOUNTS ===================== */

const CHIP_ACCOUNTS = [
{ name: 'Cash ISA', balance: 4010.91, delta: 254.26 },
{ name: 'Instant Access', balance: 952.23, delta: 125.11 },
{ name: 'Prize Savings Account', balance: 150.00, delta: 10.00 }];


function AccountCard({ name, balance, delta, sub, action, grouped, last }) {
  const outer = grouped ?
  { padding: '15px 16px', display: 'flex', alignItems: 'center', gap: 13, borderBottom: last ? 'none' : '1px solid var(--neutral-4)' } :
  { background: '#fff', borderRadius: 16, border: '1px solid var(--neutral-4)', boxShadow: 'var(--elevation-default)', padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 13, marginBottom: 12 };
  return (
    <div style={outer}>
      <ChipCoin size={40} pale />
      <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5, color: CHIP_INK, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</span>
        {sub && <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13, color: 'var(--neutral-9)' }}>{sub}</span>}
      </span>
      {action ?
      <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14.5, color: CHIP_ACT, flexShrink: 0 }}>{action}</span> :
      <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2, flexShrink: 0, whiteSpace: 'nowrap' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, color: CHIP_INK, fontVariantNumeric: 'tabular-nums' }}>{gbp(balance)}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, color: CHIP_ACT, fontVariantNumeric: 'tabular-nums' }}>+{gbp(delta)}</span>
        </span>}
      <PI size={18} c="var(--neutral-7)" w={2.2}><path d="M9 6l6 6-6 6" /></PI>
    </div>);

}

function ChipAccounts({ total, delta }) {
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 2px 12px', whiteSpace: 'nowrap' }}>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--neutral-9)' }}>Savings · {gbp(total)}</span>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: CHIP_ACT }}>(+{gbp(delta)})</span>
      </div>
      <div style={{ background: '#fff', borderRadius: 16, border: '1px solid var(--neutral-4)', boxShadow: 'var(--elevation-default)', overflow: 'hidden', marginBottom: 12 }}>
        {CHIP_ACCOUNTS.map((a, i) =>
        <AccountCard key={a.name} {...a} grouped last={i === CHIP_ACCOUNTS.length - 1} />
        )}
      </div>
      <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5, color: 'var(--neutral-9)', padding: '6px 2px 12px' }}>Suggested savings accounts</div>
      <AccountCard name="Easy Access" sub="4.32% AER variable" action="Open" />
    </div>);

}

/* ===================== INSURELY CONNECT (host function) ===================== */

function ConnectBanner({ connected, accounts, onOpen }) {
  if (connected) {
    return (
      <div style={{ width: '100%', marginTop: 18, background: '#fff', border: '1px solid var(--neutral-4)', borderRadius: 16, overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 18px 12px' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 17.5, color: CHIP_INK, whiteSpace: 'nowrap' }}>Savings elsewhere</span>
          <button onClick={onOpen} style={{ ...chipIconBtn, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14.5, color: CHIP_ACT }}>Manage</button>
        </div>
        <div style={{ padding: '0 18px' }}>
          {accounts.map((a) => {
            const subs = a.accounts && a.accounts.length ? a.accounts : [{ type: a.accountType || 'Account', balance: a.balance || 0 }];
            return (
              <div key={a.name} style={{ padding: '14px 0', borderTop: '1px solid var(--neutral-4)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Logo p={a} size={38} />
                  <span style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5, color: CHIP_INK, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.name}</span>
                    {subs.length > 1 &&
                    <span style={{ flexShrink: 0, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 11.5, color: CHIP_ACT, background: 'var(--mint-1)', borderRadius: 1000, padding: '2px 8px' }}>{subs.length} accounts</span>}
                  </span>
                  <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16, color: CHIP_INK, flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>{gbp(a.balance || 0)}</span>
                </div>
                <div style={{ marginTop: 8, marginLeft: 50, display: 'flex', flexDirection: 'column', gap: 7 }}>
                  {subs.map((s, j) =>
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--neutral-7)', flexShrink: 0 }} />
                      <span style={{ flex: 1, minWidth: 0, fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13.5, color: 'var(--neutral-10)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.type}</span>
                      <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13.5, color: 'var(--neutral-10)', flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>{gbp(s.balance || 0)}</span>
                    </div>
                  )}
                </div>
              </div>);

          })}
        </div>
        <button onClick={onOpen} style={{ width: '100%', appearance: 'none', border: 'none', borderTop: '1px solid var(--neutral-4)', background: 'transparent', cursor: 'pointer', padding: '14px 0', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15.5, color: CHIP_ACT, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <PI size={18} c={CHIP_ACT} w={2.4}><path d="M12 5v14M5 12h14" /></PI><span style={{ whiteSpace: 'nowrap' }}>Add another account</span>
        </button>
      </div>);

  }
  return (
    <button onClick={onOpen} style={{ width: '100%', marginTop: 18, textAlign: 'left', appearance: 'none', cursor: 'pointer',
      background: 'var(--mint-2)', border: 'none', borderRadius: 16, padding: '18px 18px', display: 'flex', alignItems: 'center', gap: 14 }}>
      <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 18, color: CHIP_INK, letterSpacing: '-0.2px' }}>Your financial picture in one place?</span>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15, lineHeight: '21px', color: 'var(--neutral-10)' }}>Add your investment account and see all your savings together.</span>
      </span>
      <PI size={22} c={CHIP_ACT} w={2}><path d="M9 6l6 6-6 6" /></PI>
    </button>);

}

/* ===================== AUTO-SAVING CARD ===================== */

function RuleRow({ icon, title, sub, valueTop, valueBot, chevron, last }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0', borderBottom: last ? 'none' : '1px solid var(--neutral-4)' }}>
      <span style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--mint-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{icon}</span>
      <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 3 }}>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 17.5, color: CHIP_INK }}>{title}</span>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14, color: 'var(--neutral-9)' }}>{sub}</span>
      </span>
      {chevron ?
      <PI size={20} c={CHIP_ACT} w={2.2}><path d="M9 6l6 6-6 6" /></PI> :
      <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 3, flexShrink: 0 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5, color: CHIP_INK }}>{valueTop}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13, color: 'var(--neutral-9)' }}>{valueBot}</span>
        </span>}
    </div>);

}

function AutoSaveCard() {
  return (
    <div style={{ marginTop: 18, background: '#fff', borderRadius: 16, border: '1px solid var(--neutral-4)', padding: '20px 18px 8px' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ width: 26, height: 26, borderRadius: '50%', background: CHIP, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><ChipMark size={16} c="#fff" ring={CHIP_LIME} /></span>
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 19, color: CHIP_INK }}>Auto-saving</span>
        </div>
        <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 13.5, lineHeight: '18px', color: 'var(--neutral-9)', textAlign: 'right', maxWidth: 150 }}>Next deposit will be shown here</span>
      </div>
      <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 34, letterSpacing: '-0.6px', color: CHIP_INK, marginTop: 8 }}>£150.87</div>
      <div style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14.5, color: 'var(--neutral-9)', marginTop: 2 }}>Saved by Chip so far</div>

      <div style={{ marginTop: 12 }}>
        <RuleRow
          icon={<PI size={22} c={CHIP_ACT} w={1.9}><path d="M12 4c.5 3.3 1.5 4.3 4.8 4.8C13.5 9.3 12.5 10.3 12 13.6 11.5 10.3 10.5 9.3 7.2 8.8 10.5 8.3 11.5 7.3 12 4z" /><path d="M18.5 14c.3 1.6.8 2.1 2.4 2.4-1.6.3-2.1.8-2.4 2.4-.3-1.6-.8-2.1-2.4-2.4 1.6-.3 2.1-.8 2.4-2.4z" /></PI>}
          title="Auto-save" sub="Chip saves what you can afford" valueTop="£150.87" valueBot="All time" />
        <RuleRow
          icon={<PI size={22} c={CHIP_ACT} w={1.9}><path d="M7 4h10v3a5 5 0 0 1-10 0z" /><path d="M7 5H4.5a2.5 2.5 0 0 0 2.5 3M17 5h2.5a2.5 2.5 0 0 1-2.5 3" /><path d="M10 13.5V17h4v-3.5M8 20h8" /></PI>}
          title="1p Saving Challenge" sub="Set aside £667 in a year" chevron last />
      </div>

      <button style={{ width: '100%', appearance: 'none', border: 'none', background: 'transparent', cursor: 'pointer', padding: '16px 0', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5, color: CHIP_ACT }}>See all auto-saves</button>
    </div>);

}

/* ===================== HEADER + NAV ===================== */

function BottomNav() {
  const item = (icon, label, active) =>
  <button style={{ ...chipTabBtn }}>
      {icon}
      <span style={{ fontFamily: 'var(--font-body)', fontWeight: active ? 600 : 500, fontSize: 12, color: active ? CHIP_ACT : 'var(--neutral-9)' }}>{label}</span>
    </button>;
  const grey = 'var(--neutral-8)';
  return (
    <div style={{ flexShrink: 0, borderTop: '1px solid var(--neutral-4)', background: '#fff', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around', padding: '10px 16px 26px' }}>
      {item(<PI size={24} c={CHIP_ACT} w={1.9}><path d="M4 11l8-7 8 7" /><path d="M6 9.5V20h12V9.5" /></PI>, 'Home', true)}
      {item(<PI size={24} c={grey} w={1.9}><circle cx="12" cy="12" r="8.5" /><path d="M9 12.4l2 2 4-4.8" /></PI>, 'Save')}
      {item(<PI size={24} c={grey} w={1.9}><path d="M4 16l5-5 3 3 7-7" /><path d="M16 7h4v4" /></PI>, 'Invest')}
      {item(<PI size={24} c={grey} w={1.9}><rect x="3" y="6" width="18" height="13" rx="2.5" /><path d="M3 10h18" /></PI>, 'Card')}
    </div>);

}

/* ===================== HOME SCREEN ===================== */

function ChipHome({ connected, accounts, onOpenCollect, onOpenChat }) {
  const TOTAL = 5113.14, DELTA = 389.37, PCT = '8.24';
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#143019' }}>
      <div style={{ flex: 1, overflowY: 'auto', background: '#f3f5f2' }}>
        <SavingsHero total={TOTAL} delta={DELTA} deltaPct={PCT} />
        <div style={{ position: 'relative', background: '#f3f5f2', borderRadius: '22px 22px 0 0', marginTop: -16, padding: '16px 16px 28px' }}>
          <ChipAccounts total={TOTAL} delta={DELTA} />
          <ConnectBanner connected={connected} accounts={accounts} onOpen={onOpenCollect} />
          <button onClick={onOpenChat} style={{ width: '100%', marginTop: 12, height: 54, borderRadius: 1000, border: 'none', cursor: 'pointer', background: CHIP_ACT, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5 }}>
            <PI size={20} c="#fff" w={2}><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.8-.8L3 20l1.3-3.9A8.4 8.4 0 0 1 3.5 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z" /></PI>
            Chat about your savings
          </button>
        </div>
      </div>
    </div>);

}

/* ===================== APP / FRAME ===================== */

const chipIconBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: 2, cursor: 'pointer', display: 'flex', alignItems: 'center' };
const chipTabBtn = { appearance: 'none', border: 'none', background: 'transparent', padding: '4px 6px', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 };

function PhoneFrame({ children }) {
  const btn = { position: 'absolute', background: 'linear-gradient(180deg,#3a3a3c,#1c1c1e)', boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.12)' };
  return (
    <div style={{ position: 'relative', padding: 13, borderRadius: 62, background: 'linear-gradient(135deg,#46464a 0%,#1c1c1e 22%,#3a3a3d 50%,#161618 78%,#46464a 100%)', boxShadow: '0 40px 90px rgba(20,30,20,0.4), 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.08)' }}>
      <div style={{ position: 'absolute', inset: 9, borderRadius: 54, boxShadow: 'inset 0 0 0 2px rgba(0,0,0,0.85)', pointerEvents: 'none', zIndex: 70 }} />
      <div style={{ ...btn, left: -2.5, top: 152, width: 3.5, height: 30, borderRadius: '3px 0 0 3px' }} />
      <div style={{ ...btn, left: -3, top: 205, width: 4, height: 56, borderRadius: '3px 0 0 3px' }} />
      <div style={{ ...btn, left: -3, top: 275, width: 4, height: 56, borderRadius: '3px 0 0 3px' }} />
      <div style={{ ...btn, right: -3, top: 232, width: 4, height: 86, borderRadius: '0 3px 3px 0' }} />
      {children}
    </div>);

}

function App() {
  const [linked, setLinked] = React.useState([]);
  const [widgetOpen, setWidgetOpen] = React.useState(false);
  const [widgetSeq, setWidgetSeq] = React.useState(0);
  const [chatOpen, setChatOpen] = React.useState(false);
  const [chatSeq, setChatSeq] = React.useState(0);
  const [transfer, setTransfer] = React.useState(null);

  const openWidget = () => {setWidgetSeq((s) => s + 1);setWidgetOpen(true);};
  const openChat = () => {setChatSeq((s) => s + 1);setChatOpen(true);};
  const finishCollect = (providers) => {setLinked(providers);setWidgetOpen(false);};

  return (
    <div className="fit">
      <PhoneFrame>
        <IOSDevice dark={!(chatOpen || transfer)} homeDark={false}>
          <div style={{ position: 'relative', height: '100%', overflow: 'hidden' }}>
            <ChipHome connected={linked.length > 0} accounts={linked} onOpenCollect={openWidget} onOpenChat={openChat} />

            <div className="pane" style={{ position: 'absolute', inset: 0, zIndex: 45, transform: chatOpen ? 'translateX(0)' : 'translateX(100%)' }}>
              {chatOpen && <ChipChatScreen key={chatSeq} accounts={linked} onBack={() => setChatOpen(false)} onConnect={() => {setChatOpen(false);openWidget();}} onTransfer={(data) => setTransfer(data)} />}
            </div>

            <div className="pane" style={{ position: 'absolute', inset: 0, zIndex: 48, transform: transfer ? 'translateX(0)' : 'translateX(100%)' }}>
              {transfer && <TransferScreen data={transfer} onClose={() => setTransfer(null)} />}
            </div>

            <div onClick={() => setWidgetOpen(false)} style={{ position: 'absolute', inset: 0, zIndex: 49, background: 'rgba(20,30,20,0.4)', opacity: widgetOpen ? 1 : 0, pointerEvents: widgetOpen ? 'auto' : 'none', transition: 'opacity 380ms cubic-bezier(0.2,0.7,0.2,1)' }} />
            <div className="pane" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, top: '25%', zIndex: 50, borderRadius: '26px 26px 0 0', overflow: 'hidden', boxShadow: '0 -12px 44px rgba(0,0,0,0.28)', transform: widgetOpen ? 'translateY(0)' : 'translateY(101%)' }}>
              {widgetOpen && <CollectWidget key={widgetSeq} initial={linked} onDone={finishCollect} onCancel={() => setWidgetOpen(false)} accent={CHIP_ACT} />}
            </div>
          </div>
        </IOSDevice>
      </PhoneFrame>
    </div>);

}

Object.assign(window, { CHIP, CHIP_DEEP, CHIP_INK, CHIP_ACT, CHIP_ACT_DEEP, CHIP_LIME, PI, ChipMark, ChipCoin, gbp, chipIconBtn });

ReactDOM.createRoot(document.getElementById('root')).render(<App />);