// account-widget.jsx — Halcyon Pilates account widget.
// Two screens:
//   Screen 1 — Sign in (matches the Booking Flow sign-in design, blue accent).
//   Screen 2 — Account dashboard with a left sidebar of sections and a
//              detail area on the right.

const { useState: useAcctState, useEffect: useAcctEffect } = React;

const ACCT_BREAKPOINT = 760;
function useAcctMobile() {
  const [m, setM] = useAcctState(
    typeof window !== 'undefined' ? window.innerWidth < ACCT_BREAKPOINT : false
  );
  useAcctEffect(() => {
    const onResize = () => setM(window.innerWidth < ACCT_BREAKPOINT);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return m;
}

// ────────────────────────────────────────────────────────────────
// Root — login → dashboard
// ────────────────────────────────────────────────────────────────
function AccountApp({ brandId = 'halcyon' }) {
  const baseBrand = window.BRANDS[brandId];
  const mobile = useAcctMobile();

  const tweaksEnabled = typeof window !== 'undefined' && window.ACCT_TWEAKS_ENABLED;
  const defaults = (typeof window !== 'undefined' && window.ACCT_TWEAK_DEFAULTS) || {};
  const [t, setTweak] = (tweaksEnabled ? window.useTweaks(defaults) : [defaults, () => {}]);

  const brand = tweaksEnabled ? {
    ...baseBrand,
    accent:        t.accent     ?? baseBrand.accent,
    accentDeep:    t.accent     ?? baseBrand.accentDeep,
    accentSoft:    baseBrand.accentSoft,
    surface:       t.panel      ?? baseBrand.surface,
    border:        t.lineColor  ?? baseBrand.border,
    ink:           t.headline   ?? baseBrand.ink,
    inkSoft:       t.details    ?? baseBrand.inkSoft,
    panelInk:      t.panelInk     ?? t.headline ?? baseBrand.ink,
    panelInkSoft:  t.panelInkSoft ?? t.details  ?? baseBrand.inkSoft,
    displayFont:   t.font       ?? baseBrand.displayFont,
    bodyFont:      t.font       ?? baseBrand.bodyFont,
    displayWeight: t.weight     ?? baseBrand.displayWeight,
    _radius:       t.radius,
    _buttonTextColor: t.buttonTextColor,
  } : {
    ...baseBrand,
    panelInk:     baseBrand.ink,
    panelInkSoft: baseBrand.inkSoft,
  };
  const appBg = tweaksEnabled ? (t.background ?? '#FFFFFF') : '#FFFFFF';

  const [signedIn, setSignedIn] = useAcctState(false);
  const [email, setEmail] = useAcctState('');

  return (
    <div style={{
      background: appBg, color: brand.ink,
      minHeight: '100vh', fontFamily: brand.bodyFont,
    }}>
      {!signedIn ? (
        <LoginScreen brand={brand} mobile={mobile}
          email={email} setEmail={setEmail}
          onSignedIn={() => setSignedIn(true)} />
      ) : (
        <AccountDashboard brand={brand} mobile={mobile}
          email={email}
          onSignOut={() => { setSignedIn(false); }} />
      )}

      <PoweredByZipper />
      {tweaksEnabled && <AccountTweaks t={t} setTweak={setTweak} />}
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Screen 1 — Sign in
// ────────────────────────────────────────────────────────────────
function LoginScreen({ brand, mobile, email, setEmail, onSignedIn }) {
  const [password, setPassword] = useAcctState('');
  const [showPassword, setShowPassword] = useAcctState(false);
  const canSubmit = email.length > 0 && password.length > 0;
  const radius = brand._radius != null ? brand._radius : 12;

  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      justifyContent: 'center',
      padding: mobile ? '32px 20px 60px' : '64px 24px 60px',
    }}>
      <div style={{
        width: '100%', maxWidth: 460,
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          marginBottom: 28, justifyContent: 'center',
        }}>
          <div style={{
            width: 52, height: 52, borderRadius: 12,
            background: brand.accent, color: '#fff',
            display: 'grid', placeItems: 'center',
            fontFamily: brand.displayFont, fontWeight: 800, fontSize: 22,
            flex: '0 0 auto',
          }}>H</div>
          <div>
            <div style={{
              fontFamily: brand.displayFont, fontWeight: brand.displayWeight,
              fontSize: 22, color: brand.ink, letterSpacing: '-0.01em', lineHeight: 1.1,
            }}>Halcyon Pilates</div>
            <div style={{
              fontSize: 13, color: brand.inkSoft, marginTop: 2,
            }}>Reformer · Mat · Privates</div>
          </div>
        </div>

        <h1 style={{
          fontFamily: brand.displayFont,
          fontWeight: brand.displayWeight,
          fontSize: mobile ? 32 : 40,
          lineHeight: 1.05,
          letterSpacing: '-0.02em',
          color: brand.ink,
          margin: 0,
          textAlign: 'center',
        }}>Welcome back.</h1>
        <p style={{
          fontSize: 15, color: brand.inkSoft, lineHeight: 1.5,
          marginTop: 12, marginBottom: 28, textAlign: 'center',
        }}>
          Sign in to view your bookings, manage your membership, or update payment.
        </p>

        <FloatingField brand={brand} label="Email" type="email" autoComplete="email"
          value={email} onChange={setEmail} radius={radius} />

        <PasswordField brand={brand} radius={radius}
          value={password} onChange={setPassword}
          show={showPassword} setShow={setShowPassword} />

        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: -2, marginBottom: 18 }}>
          <button type="button" style={{
            background: 'transparent', border: 0, padding: 0,
            color: brand.accent, fontSize: 13, fontWeight: 700,
            cursor: 'pointer',
          }}>Forgot password?</button>
        </div>

        <button
          type="button"
          disabled={!canSubmit}
          onClick={() => canSubmit && onSignedIn()}
          style={{
            width: '100%',
            background: canSubmit ? brand.accent : '#D8D6CF',
            color: brand._buttonTextColor || '#fff',
            border: 0, borderRadius: radius,
            padding: '16px 18px',
            fontSize: 15, fontWeight: 700,
            fontFamily: brand.displayFont,
            letterSpacing: '-0.005em',
            cursor: canSubmit ? 'pointer' : 'not-allowed',
          }}>
          Sign in
        </button>

        <Divider brand={brand}>or</Divider>

        <button
          type="button"
          onClick={() => onSignedIn()}
          style={{
            width: '100%',
            background: '#fff',
            color: brand.ink,
            border: `1px solid ${brand.border}`,
            borderRadius: radius,
            padding: '14px 18px',
            fontSize: 14, fontWeight: 600,
            cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            marginBottom: 10,
          }}>
          <GoogleG />
          Sign in with Google
        </button>

        <button
          type="button"
          style={{
            width: '100%',
            background: '#fff',
            color: brand.ink,
            border: `1px solid ${brand.border}`,
            borderRadius: radius,
            padding: '14px 18px',
            fontSize: 14, fontWeight: 600,
            cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke={brand.inkSoft} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
            <polyline points="22,6 12,13 2,6" />
          </svg>
          Email me a sign-in link
        </button>

        <p style={{
          fontSize: 12.5, color: brand.inkSoft,
          lineHeight: 1.5, marginTop: 18, textAlign: 'center',
        }}>
          Haven't finished creating your account yet or forgot your password? If your email
          matches an account with us, we'll send you a link to log in.
        </p>
      </div>
    </div>
  );
}

function GoogleG() {
  // Official multicolor Google "G" mark.
  return (
    <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/>
      <path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/>
      <path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/>
      <path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571.001-.001.002-.001.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/>
    </svg>
  );
}

function FloatingField({ brand, label, type = 'text', autoComplete, value, onChange, radius }) {
  const [focused, setFocused] = useAcctState(false);
  const filled = value && value.length > 0;
  const lifted = focused || filled;
  return (
    <label style={{ display: 'block', position: 'relative', marginBottom: 10 }}>
      <div style={{
        position: 'absolute',
        left: 14,
        top: lifted ? 8 : 17,
        fontSize: lifted ? 10.5 : 14,
        fontWeight: lifted ? 600 : 400,
        color: brand.inkSoft,
        letterSpacing: lifted ? '0.04em' : 0,
        textTransform: lifted ? 'uppercase' : 'none',
        transition: 'all .15s ease',
        pointerEvents: 'none',
      }}>{label}</div>
      <input
        type={type}
        value={value || ''}
        autoComplete={autoComplete}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onChange={e => onChange(e.target.value)}
        style={{
          width: '100%',
          background: brand.surface,
          border: `1.5px solid ${focused ? brand.accent : brand.border}`,
          borderRadius: radius,
          padding: '22px 14px 8px',
          fontSize: 15,
          color: brand.ink,
          outline: 'none',
          transition: 'border-color .15s ease, box-shadow .15s ease',
          boxShadow: focused ? `0 0 0 3px ${brand.accentSoft}` : 'none',
          fontFamily: brand.bodyFont,
        }}
      />
    </label>
  );
}

function PasswordField({ brand, value, onChange, show, setShow, radius }) {
  const [focused, setFocused] = useAcctState(false);
  const filled = value && value.length > 0;
  const lifted = focused || filled;
  return (
    <label style={{ display: 'block', position: 'relative', marginBottom: 10 }}>
      <div style={{
        position: 'absolute',
        left: 14,
        top: lifted ? 8 : 17,
        fontSize: lifted ? 10.5 : 14,
        fontWeight: lifted ? 600 : 400,
        color: brand.inkSoft,
        letterSpacing: lifted ? '0.04em' : 0,
        textTransform: lifted ? 'uppercase' : 'none',
        transition: 'all .15s ease',
        pointerEvents: 'none',
      }}>Password</div>
      <input
        type={show ? 'text' : 'password'}
        value={value}
        autoComplete="current-password"
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onChange={e => onChange(e.target.value)}
        style={{
          width: '100%',
          background: brand.surface,
          border: `1.5px solid ${focused ? brand.accent : brand.border}`,
          borderRadius: radius,
          padding: '22px 60px 8px 14px',
          fontSize: 15,
          color: brand.ink,
          outline: 'none',
          transition: 'border-color .15s ease, box-shadow .15s ease',
          boxShadow: focused ? `0 0 0 3px ${brand.accentSoft}` : 'none',
          fontFamily: brand.bodyFont,
        }}
      />
      <button
        type="button"
        onClick={() => setShow(!show)}
        style={{
          position: 'absolute', right: 12, top: 18,
          background: 'transparent', border: 0, padding: '6px 8px',
          color: brand.inkSoft, fontSize: 12, fontWeight: 700,
          cursor: 'pointer',
        }}>
        {show ? 'Hide' : 'Show'}
      </button>
    </label>
  );
}

function Divider({ brand, children }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      margin: '22px 0',
      fontSize: 11, fontWeight: 700, letterSpacing: '0.12em',
      textTransform: 'uppercase', color: brand.inkSoft,
    }}>
      <div style={{ flex: 1, height: 1, background: brand.border }} />
      <span>{children}</span>
      <div style={{ flex: 1, height: 1, background: brand.border }} />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Screen 2 — Dashboard
// ────────────────────────────────────────────────────────────────
const NAV_ITEMS = [
  { id: 'account',     label: 'Account info',           icon: 'user' },
  { id: 'memberships', label: 'Memberships & packs',    icon: 'card' },
  { id: 'bookings',    label: 'Future bookings',        icon: 'calendar' },
  { id: 'history',     label: 'Booking history',        icon: 'clock' },
  { id: 'billing',     label: 'Billing info',           icon: 'wallet' },
  { id: 'family',      label: 'Family',                 icon: 'users' },
  { id: 'preferences', label: 'Preferences',            icon: 'sliders' },
  { id: 'security',    label: 'Security & privacy',     icon: 'lock' },
];

function AccountDashboard({ brand, mobile, email, onSignOut }) {
  const [active, setActive] = useAcctState('account');
  const userEmail = email || 'connie@pixalitydesign.com';
  return (
    <div style={{ minHeight: '100vh' }}>
      <BrandBar brand={brand} mobile={mobile} email={userEmail} onSignOut={onSignOut} />

      <div style={{
        maxWidth: 1200, margin: '0 auto',
        padding: mobile ? '16px 16px 64px' : '28px 32px 80px',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '260px 1fr',
        gap: mobile ? 14 : 32,
        alignItems: 'start',
      }}>
        <Sidebar brand={brand} mobile={mobile} active={active} onSelect={setActive} />

        <div>
          {active === 'account'     && <AccountInfoPanel brand={brand} mobile={mobile} email={userEmail} />}
          {active === 'memberships' && <MembershipsPanel brand={brand} mobile={mobile} />}
          {active === 'bookings'    && <BookingsPanel brand={brand} mobile={mobile} />}
          {active === 'history'     && <HistoryPanel brand={brand} mobile={mobile} />}
          {active === 'billing'     && <BillingPanel brand={brand} mobile={mobile} />}
          {active === 'family'      && <FamilyPanel brand={brand} mobile={mobile} />}
          {active === 'preferences' && <PreferencesPanel brand={brand} mobile={mobile} />}
          {active === 'security'    && <SecurityPanel brand={brand} mobile={mobile} />}
        </div>
      </div>
    </div>
  );
}

function BrandBar({ brand, mobile, email, onSignOut }) {
  return (
    <div style={{
      borderBottom: `1px solid ${brand.border}`,
      background: '#fff',
      padding: mobile ? '14px 16px' : '18px 32px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: mobile ? 30 : 34, height: mobile ? 30 : 34,
          borderRadius: 8,
          background: brand.accent, color: '#fff',
          display: 'grid', placeItems: 'center',
          fontFamily: brand.displayFont, fontWeight: 800,
          fontSize: mobile ? 13 : 15, letterSpacing: '0.02em',
        }}>H</div>
        <div style={{
          fontFamily: brand.displayFont, fontWeight: brand.displayWeight,
          fontSize: mobile ? 16 : 18, color: brand.ink, letterSpacing: '-0.01em',
        }}>Halcyon Pilates</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        {!mobile && (
          <div style={{ fontSize: 13, color: brand.inkSoft }}>{email}</div>
        )}
        <button type="button" onClick={onSignOut} style={{
          background: 'transparent', border: `1px solid ${brand.border}`,
          color: brand.inkSoft, fontSize: 12, fontWeight: 700,
          letterSpacing: '0.06em', textTransform: 'uppercase',
          padding: '6px 12px', borderRadius: 999, cursor: 'pointer',
        }}>Sign out</button>
      </div>
    </div>
  );
}

function Sidebar({ brand, mobile, active, onSelect }) {
  const radius = brand._radius != null ? brand._radius : 10;
  return (
    <nav style={{
      display: 'flex',
      flexDirection: mobile ? 'row' : 'column',
      gap: mobile ? 6 : 2,
      overflowX: mobile ? 'auto' : 'visible',
      paddingBottom: mobile ? 4 : 0,
    }}>
      {NAV_ITEMS.map(item => {
        const isOn = item.id === active;
        return (
          <button key={item.id} type="button" onClick={() => onSelect(item.id)}
            style={{
              background: isOn ? brand.accentSoft : 'transparent',
              color: isOn ? brand.accent : brand.ink,
              border: 0,
              borderRadius: radius,
              padding: mobile ? '8px 12px' : '10px 12px',
              fontFamily: brand.bodyFont,
              fontSize: 13.5, fontWeight: isOn ? 700 : 600,
              textAlign: 'left', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              whiteSpace: 'nowrap', flex: '0 0 auto',
              transition: 'background .12s ease, color .12s ease',
            }}>
            <NavIcon name={item.icon} stroke={isOn ? brand.accent : brand.inkSoft} />
            {item.label}
          </button>
        );
      })}
    </nav>
  );
}

function NavIcon({ name, stroke }) {
  const props = {
    width: 16, height: 16, viewBox: '0 0 24 24',
    fill: 'none', stroke, strokeWidth: 1.8,
    strokeLinecap: 'round', strokeLinejoin: 'round',
  };
  switch (name) {
    case 'user':     return <svg {...props}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></svg>;
    case 'card':     return <svg {...props}><rect x="2" y="5" width="20" height="14" rx="2" /><line x1="2" y1="10" x2="22" y2="10" /></svg>;
    case 'calendar': return <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg>;
    case 'clock':    return <svg {...props}><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>;
    case 'wallet':   return <svg {...props}><path d="M20 12V8a2 2 0 0 0-2-2H5a2 2 0 0 1 0-4h12" /><rect x="3" y="6" width="18" height="14" rx="2" /><circle cx="17" cy="13" r="1.2" /></svg>;
    case 'users':    return <svg {...props}><path d="M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
    case 'sliders':  return <svg {...props}><line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" /><line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" /><line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" /><line x1="1" y1="14" x2="7" y2="14" /><line x1="9" y1="8" x2="15" y2="8" /><line x1="17" y1="16" x2="23" y2="16" /></svg>;
    case 'lock':     return <svg {...props}><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" /></svg>;
    default: return null;
  }
}

// ── Panels ─────────────────────────────────────────────────────
function PanelShell({ brand, mobile, title, action, children }) {
  const radius = brand._radius != null ? brand._radius : 10;
  return (
    <div style={{
      border: `1px solid ${brand.border}`,
      borderRadius: radius,
      background: brand.surface,
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 12,
        padding: mobile ? '16px 16px' : '20px 22px',
      }}>
        <h2 style={{
          margin: 0,
          fontFamily: brand.displayFont, fontWeight: 700,
          fontSize: mobile ? 18 : 22, letterSpacing: '-0.01em',
          color: brand.panelInk,
        }}>{title}</h2>
        {action}
      </div>
      <div>{children}</div>
    </div>
  );
}

function FieldRow({ brand, mobile, label, value, action = 'Edit', isLast }) {
  return (
    <div style={{
      padding: mobile ? '14px 16px' : '16px 22px',
      borderTop: `1px solid ${brand.border}`,
      borderBottom: isLast ? 0 : 0,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12,
    }}>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: brand.panelInkSoft,
        }}>{label}</div>
        <div style={{
          marginTop: 4,
          fontFamily: brand.bodyFont, fontSize: 14.5, color: brand.panelInk,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{value}</div>
      </div>
      <button type="button" style={{
        background: 'transparent', border: 0, padding: '4px 6px',
        fontFamily: brand.bodyFont, fontSize: 13, fontWeight: 700,
        color: brand.accent, cursor: 'pointer',
      }}>{action}</button>
    </div>
  );
}

function PanelButton({ brand, children, icon }) {
  const radius = brand._radius != null ? brand._radius : 10;
  return (
    <button type="button" style={{
      background: brand.surface, color: brand.ink,
      border: `1px solid ${brand.border}`,
      borderRadius: radius,
      padding: '8px 14px',
      fontFamily: brand.bodyFont, fontSize: 13, fontWeight: 600,
      cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      {icon}
      {children}
    </button>
  );
}

function InfoBanner({ brand, title, body }) {
  return (
    <div style={{
      margin: '16px 22px 22px',
      padding: '14px 16px',
      borderRadius: 10,
      background: brand.accentSoft,
      color: brand.accentDeep,
    }}>
      <div style={{
        fontFamily: brand.displayFont, fontWeight: 700, fontSize: 14,
      }}>{title}</div>
      <div style={{
        marginTop: 4, fontFamily: brand.bodyFont, fontSize: 13.5, lineHeight: 1.5,
      }}>{body}</div>
    </div>
  );
}

// Account Info
function AccountInfoPanel({ brand, mobile, email }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <PanelShell brand={brand} mobile={mobile} title="Account"
        action={<PanelButton brand={brand}
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="17 1 21 5 17 9" /><path d="M3 11V9a4 4 0 0 1 4-4h14" />
            <polyline points="7 23 3 19 7 15" /><path d="M21 13v2a4 4 0 0 1-4 4H3" />
          </svg>}>Switch owner</PanelButton>}>
        <FieldRow brand={brand} mobile={mobile} label="Name"     value="Connie Holen" />
        <FieldRow brand={brand} mobile={mobile} label="Email"    value={email} />
        <FieldRow brand={brand} mobile={mobile} label="Password" value="••••••••••••" />
        <FieldRow brand={brand} mobile={mobile} label="Phone"    value="(347) 555-0192" />
        <FieldRow brand={brand} mobile={mobile} label="Country"  value="United States" isLast />
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Family"
        action={<PanelButton brand={brand}
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
          </svg>}>Add member</PanelButton>}>
        <InfoBanner brand={brand}
          title="Add family members to your account!"
          body="Family accounts make booking and buying easy for the whole household — share packs, see everyone's schedule, and pay from one card." />
      </PanelShell>
    </div>
  );
}

// Memberships & packs
const MEMBERSHIPS_DATA = [
  { kind: 'membership', title: 'Unlimited Monthly', sub: 'Renews May 24 · $289 / month', cta: 'Manage' },
];
const PACKS_DATA = [
  { kind: 'pack', title: '10-Pack Equipment', sub: '7 of 10 remaining · expires Aug 14', cta: 'Use a credit' },
  { kind: 'pack', title: '5-Pack Mat',        sub: '2 of 5 remaining · expires Jul 02',  cta: 'Use a credit' },
];

function MembershipsPanel({ brand, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <PanelShell brand={brand} mobile={mobile} title="Active membership">
        <div style={{ borderTop: `1px solid ${brand.border}` }}>
          {MEMBERSHIPS_DATA.map((m, i) => (
            <ItemRow key={i} brand={brand} mobile={mobile}
              item={m} isLast={i === MEMBERSHIPS_DATA.length - 1} />
          ))}
        </div>
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Class packs"
        action={<PanelButton brand={brand}>Buy a pack</PanelButton>}>
        <div style={{ borderTop: `1px solid ${brand.border}` }}>
          {PACKS_DATA.map((p, i) => (
            <ItemRow key={i} brand={brand} mobile={mobile}
              item={p} isLast={i === PACKS_DATA.length - 1} />
          ))}
        </div>
      </PanelShell>
    </div>
  );
}

function ItemRow({ brand, mobile, item, isLast }) {
  return (
    <div style={{
      padding: mobile ? '14px 16px' : '16px 22px',
      borderBottom: isLast ? 0 : `1px solid ${brand.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12,
    }}>
      <div style={{ minWidth: 0 }}>
        <div style={{
          fontFamily: brand.displayFont, fontWeight: 700, fontSize: 15.5,
          color: brand.panelInk, letterSpacing: '-0.005em',
        }}>{item.title}</div>
        <div style={{
          marginTop: 3,
          fontFamily: brand.bodyFont, fontSize: 13, color: brand.panelInkSoft,
        }}>{item.sub}</div>
      </div>
      <button type="button" style={{
        background: brand.accent, color: brand._buttonTextColor || '#fff',
        border: 0, borderRadius: brand._radius != null ? brand._radius : 10,
        padding: '8px 14px',
        fontFamily: brand.displayFont, fontWeight: 700, fontSize: 12.5,
        letterSpacing: '0.04em', textTransform: 'uppercase',
        cursor: 'pointer', whiteSpace: 'nowrap',
      }}>{item.cta}</button>
    </div>
  );
}

// Future bookings
const FUTURE_BOOKINGS = [
  { dateLabel: 'Tue, May 19',    time: '7:00 AM', title: 'Reformer Flow',        sub: 'with Marisol Pena · Studio A',     kind: 'Class' },
  { dateLabel: 'Sat, May 23',    time: '8:30 AM', title: 'Reformer Privates',    sub: 'with Lena Ortiz · 55 min',         kind: 'Private' },
  { dateLabel: 'Sat, May 30',    time: '1:00 PM', title: 'Spring Workshop',      sub: 'Reformer Room · 3 hours',          kind: 'Event' },
];

function BookingsPanel({ brand, mobile }) {
  return (
    <PanelShell brand={brand} mobile={mobile} title="Future bookings"
      action={<PanelButton brand={brand}>Book a class</PanelButton>}>
      <div style={{ borderTop: `1px solid ${brand.border}` }}>
        {FUTURE_BOOKINGS.map((b, i) => (
          <BookingRow key={i} brand={brand} mobile={mobile}
            booking={b} isLast={i === FUTURE_BOOKINGS.length - 1} />
        ))}
      </div>
    </PanelShell>
  );
}

function BookingRow({ brand, mobile, booking, isLast }) {
  return (
    <div style={{
      padding: mobile ? '14px 16px' : '16px 22px',
      borderBottom: isLast ? 0 : `1px solid ${brand.border}`,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 60, height: 60, borderRadius: 10,
        background: brand.accentSoft, color: brand.accentDeep,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        flex: '0 0 auto',
      }}>
        <div style={{
          fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>{booking.dateLabel.split(',')[0]}</div>
        <div style={{
          fontFamily: brand.displayFont, fontWeight: 700, fontSize: 16, lineHeight: 1, marginTop: 2,
        }}>{booking.dateLabel.split(',')[1]?.trim().split(' ')[1] || booking.dateLabel.slice(0, 3)}</div>
      </div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
          textTransform: 'uppercase', color: brand.panelInkSoft,
        }}>{booking.kind}<span style={{ opacity: 0.5 }}>·</span>{booking.time}</div>
        <div style={{
          marginTop: 2,
          fontFamily: brand.displayFont, fontWeight: 700, fontSize: 15.5,
          color: brand.panelInk, letterSpacing: '-0.005em',
        }}>{booking.title}</div>
        <div style={{
          marginTop: 2, fontFamily: brand.bodyFont, fontSize: 13, color: brand.panelInkSoft,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{booking.sub}</div>
      </div>

      <PanelButton brand={brand}>Manage</PanelButton>
    </div>
  );
}

// History
const HISTORY = [
  { date: 'May 6',  title: 'Slow Vinyasa',      sub: 'with Anika Rao',        usedWith: 'Unlimited Monthly' },
  { date: 'Apr 28', title: 'Reformer Privates', sub: 'with Lena Ortiz',       usedWith: 'Unlimited Monthly' },
  { date: 'Apr 22', title: 'Reformer Flow',     sub: 'with Marisol Pena',     usedWith: 'Unlimited Monthly' },
  { date: 'Apr 14', title: 'Reformer Flow',     sub: 'with Yasmin Castillo',  usedWith: 'Unlimited Monthly' },
  { date: 'Apr 02', title: 'Reformer Flow',     sub: 'with Yasmin Castillo',  usedWith: 'Unlimited Monthly' },
];

function HistoryPanel({ brand, mobile }) {
  return (
    <PanelShell brand={brand} mobile={mobile} title="Booking history">
      <div style={{ borderTop: `1px solid ${brand.border}` }}>
        {HISTORY.map((h, i) => (
          <div key={i} style={{
            padding: mobile ? '14px 16px' : '14px 22px',
            borderBottom: i === HISTORY.length - 1 ? 0 : `1px solid ${brand.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
          }}>
            <div style={{ minWidth: 0, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                fontFamily: brand.displayFont, fontWeight: 700, fontSize: 13,
                color: brand.panelInkSoft, minWidth: 56,
              }}>{h.date}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{
                  fontFamily: brand.bodyFont, fontWeight: 600, fontSize: 14, color: brand.panelInk,
                }}>{h.title}</div>
                <div style={{
                  fontSize: 12.5, color: brand.panelInkSoft, marginTop: 2,
                }}>{h.sub}</div>
              </div>
            </div>
            <div style={{
              fontSize: 12.5, color: brand.panelInkSoft, whiteSpace: 'nowrap',
              fontFamily: brand.bodyFont, fontWeight: 600,
            }}>{h.usedWith}</div>
          </div>
        ))}
      </div>
    </PanelShell>
  );
}

// Billing
function BillingPanel({ brand, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <PanelShell brand={brand} mobile={mobile} title="Payment methods"
        action={<PanelButton brand={brand}
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
            <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
          </svg>}>Add card</PanelButton>}>
        <div style={{ borderTop: `1px solid ${brand.border}` }}>
          <CardRow brand={brand} mobile={mobile} brandName="Visa"       last4="4242" exp="12/27" isDefault />
          <CardRow brand={brand} mobile={mobile} brandName="Mastercard" last4="0915" exp="06/26" isLast />
        </div>
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Billing address">
        <FieldRow brand={brand} mobile={mobile} label="Name"        value="Connie Holen" />
        <FieldRow brand={brand} mobile={mobile} label="Address"     value="218 Atlantic Ave, Brooklyn, NY 11201" />
        <FieldRow brand={brand} mobile={mobile} label="Country"     value="United States" isLast />
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Recent invoices">
        <div style={{ borderTop: `1px solid ${brand.border}` }}>
          {[
            { d: 'Apr 24', label: 'Unlimited Monthly', amt: '$289.00' },
            { d: 'Apr 14', label: '10-Pack Equipment', amt: '$395.00' },
            { d: 'Mar 24', label: 'Unlimited Monthly', amt: '$289.00' },
          ].map((inv, i, arr) => (
            <div key={i} style={{
              padding: mobile ? '14px 16px' : '14px 22px',
              borderBottom: i === arr.length - 1 ? 0 : `1px solid ${brand.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  fontFamily: brand.displayFont, fontWeight: 700, fontSize: 13,
                  color: brand.panelInkSoft, minWidth: 56,
                }}>{inv.d}</div>
                <div style={{
                  fontFamily: brand.bodyFont, fontWeight: 600, fontSize: 14, color: brand.panelInk,
                }}>{inv.label}</div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{
                  fontFamily: brand.displayFont, fontWeight: 700, fontSize: 14, color: brand.panelInk,
                }}>{inv.amt}</div>
                <button type="button" style={{
                  background: 'transparent', border: 0, padding: '4px 6px',
                  fontSize: 13, fontWeight: 700, color: brand.accent, cursor: 'pointer',
                }}>PDF</button>
              </div>
            </div>
          ))}
        </div>
      </PanelShell>
    </div>
  );
}

function CardRow({ brand, mobile, brandName, last4, exp, isDefault, isLast }) {
  return (
    <div style={{
      padding: mobile ? '14px 16px' : '16px 22px',
      borderBottom: isLast ? 0 : `1px solid ${brand.border}`,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <div style={{
        width: 46, height: 32, borderRadius: 6,
        background: brand.ink, color: '#fff',
        display: 'grid', placeItems: 'center',
        fontSize: 9.5, fontWeight: 700, letterSpacing: '0.04em',
        flex: '0 0 auto',
      }}>{brandName.slice(0, 4).toUpperCase()}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontFamily: brand.bodyFont, fontSize: 14, fontWeight: 600, color: brand.panelInk,
        }}>
          {brandName} ····{last4}
          {isDefault && (
            <span style={{
              background: brand.accentSoft, color: brand.accentDeep,
              fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em',
              textTransform: 'uppercase', padding: '2px 8px', borderRadius: 999,
            }}>Default</span>
          )}
        </div>
        <div style={{ marginTop: 2, fontSize: 12.5, color: brand.panelInkSoft }}>Expires {exp}</div>
      </div>
      <button type="button" style={{
        background: 'transparent', border: 0, padding: '4px 6px',
        fontSize: 13, fontWeight: 700, color: brand.accent, cursor: 'pointer',
      }}>Edit</button>
    </div>
  );
}

// Family
function FamilyPanel({ brand, mobile }) {
  return (
    <PanelShell brand={brand} mobile={mobile} title="Family"
      action={<PanelButton brand={brand}
        icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
        </svg>}>Add member</PanelButton>}>
      <InfoBanner brand={brand}
        title="Family accounts make life easier"
        body="Link your spouse, kids, or roommates so you can share class packs, see one calendar, and check out from a single payment method." />
    </PanelShell>
  );
}

// Preferences
function PreferencesPanel({ brand, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <PanelShell brand={brand} mobile={mobile} title="Email notifications">
        <PrefRow brand={brand} mobile={mobile} label="Class reminders"    sub="24 hours before each class"      defaultOn />
        <PrefRow brand={brand} mobile={mobile} label="Waitlist openings"  sub="Get notified the moment a spot opens" defaultOn />
        <PrefRow brand={brand} mobile={mobile} label="Studio newsletter"  sub="Weekly schedule and studio updates" />
        <PrefRow brand={brand} mobile={mobile} label="Promotions"         sub="Specials, packages, and events"    isLast />
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Text messages">
        <PrefRow brand={brand} mobile={mobile} label="Class reminders"           sub="2 hours before each class"        defaultOn />
        <PrefRow brand={brand} mobile={mobile} label="Cancellations"             sub="When an instructor cancels"       defaultOn />
        <PrefRow brand={brand} mobile={mobile} label="Promotions and special events" sub="Limited-time offers and studio events" isLast />
      </PanelShell>
    </div>
  );
}

function PrefRow({ brand, mobile, label, sub, defaultOn, isLast }) {
  const [on, setOn] = useAcctState(!!defaultOn);
  return (
    <div style={{
      padding: mobile ? '14px 16px' : '16px 22px',
      borderTop: `1px solid ${brand.border}`,
      borderBottom: isLast ? 0 : 0,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
    }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: brand.bodyFont, fontSize: 14, fontWeight: 600, color: brand.panelInk }}>{label}</div>
        <div style={{ marginTop: 2, fontSize: 12.5, color: brand.panelInkSoft }}>{sub}</div>
      </div>
      <button type="button" role="switch" aria-checked={on} onClick={() => setOn(v => !v)} style={{
        position: 'relative', width: 42, height: 24, borderRadius: 999,
        background: on ? brand.accent : brand.border,
        border: 0, padding: 0, cursor: 'pointer',
        transition: 'background .15s ease', flex: '0 0 auto',
      }}>
        <span style={{
          position: 'absolute', top: 2, left: on ? 20 : 2,
          width: 20, height: 20, borderRadius: 999,
          background: '#fff', transition: 'left .15s ease',
          boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
        }} />
      </button>
    </div>
  );
}

// Security
function SecurityPanel({ brand, mobile }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <PanelShell brand={brand} mobile={mobile} title="Security">
        <FieldRow brand={brand} mobile={mobile} label="Password"             value="Last changed 14 days ago" />
        <FieldRow brand={brand} mobile={mobile} label="Two-factor auth"      value="Off — set up via SMS or app" action="Set up" isLast />
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Privacy">
        <FieldRow brand={brand} mobile={mobile} label="Data export"          value="Download all of your data as JSON" action="Request" />
        <FieldRow brand={brand} mobile={mobile} label="Delete my account"    value="Permanently remove your bookings, packs, and profile" action="Delete" isLast />
      </PanelShell>

      <PanelShell brand={brand} mobile={mobile} title="Active sessions">
        <div style={{ borderTop: `1px solid ${brand.border}` }}>
          {[
            { device: 'MacBook Pro · Brooklyn', when: 'Active now' },
            { device: 'iPhone · Brooklyn',       when: '2 hours ago' },
          ].map((s, i, arr) => (
            <div key={i} style={{
              padding: mobile ? '14px 16px' : '14px 22px',
              borderBottom: i === arr.length - 1 ? 0 : `1px solid ${brand.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
            }}>
              <div>
                <div style={{ fontFamily: brand.bodyFont, fontWeight: 600, fontSize: 14, color: brand.panelInk }}>{s.device}</div>
                <div style={{ marginTop: 2, fontSize: 12.5, color: brand.panelInkSoft }}>{s.when}</div>
              </div>
              <button type="button" style={{
                background: 'transparent', border: 0, padding: '4px 6px',
                fontSize: 13, fontWeight: 700, color: brand.accent, cursor: 'pointer',
              }}>Sign out</button>
            </div>
          ))}
        </div>
      </PanelShell>
    </div>
  );
}

// ────────────────────────────────────────────────────────────────
// Tweaks panel
// ────────────────────────────────────────────────────────────────
function AccountTweaks({ t, setTweak }) {
  const {
    TweaksPanel: Panel, TweakSection: Section, TweakColor: Color,
    TweakSlider: Slider, TweakSelect: Select,
    TweakButton: Button,
  } = window;
  const resetAll = () => {
    const defaults = (typeof window !== 'undefined' && window.ACCT_TWEAK_DEFAULTS) || {};
    Object.keys(defaults).forEach(k => setTweak(k, defaults[k]));
  };
  useAcctEffect(() => {
    if (!Panel) return;
    const id = window.setTimeout(() => window.postMessage({ type: '__activate_edit_mode' }, '*'), 0);
    return () => window.clearTimeout(id);
  }, [Panel]);
  if (!Panel) return null;
  const FONTS = [
    "'Poppins', system-ui, sans-serif",
    "'Inter', system-ui, sans-serif",
    "'Sora', system-ui, sans-serif",
    "'Open Sans', system-ui, sans-serif",
    "'DM Sans', system-ui, sans-serif",
    "'Manrope', system-ui, sans-serif",
    "'Bebas Neue', sans-serif",
    "'Playfair Display', serif",
  ];
  const fontLabel = (f) => f.replace(/['"]/g, '').split(',')[0];
  return (
    <Panel title="Studio settings" noDeckControls={true}>
      <Section label="Surfaces" />
      <Color label="Accent"      value={t.accent}     onChange={(v) => setTweak('accent', v)} />
      <Color label="Background"  value={t.background} onChange={(v) => setTweak('background', v)} />
      <Color label="Panel"       value={t.panel}      onChange={(v) => setTweak('panel', v)} />
      <Color label="Line color"  value={t.lineColor || '#ECECEC'}
                                 onChange={(v) => setTweak('lineColor', v)} />

      <Section label="Text on background" />
      <Color label="Primary"     value={t.headline}   onChange={(v) => setTweak('headline', v)} />
      <Color label="Secondary"   value={t.details}    onChange={(v) => setTweak('details', v)} />

      <Section label="Text on panel" />
      <Color label="Primary"     value={t.panelInk}     onChange={(v) => setTweak('panelInk', v)} />
      <Color label="Secondary"   value={t.panelInkSoft} onChange={(v) => setTweak('panelInkSoft', v)} />

      <Section label="Text on accent" />
      <Color label="Button text" value={t.buttonTextColor || '#FFFFFF'}
                                 onChange={(v) => setTweak('buttonTextColor', v)} />

      <Section label="Typography" />
      <Select label="Font family" value={t.font}
              options={FONTS.map(f => ({ value: f, label: fontLabel(f) }))}
              onChange={(v) => setTweak('font', v)} />
      <Slider label="Headline weight" value={t.weight} min={300} max={800} step={100}
              onChange={(v) => setTweak('weight', v)} />

      <Section label="Shape" />
      <Slider label="Panels &amp; buttons" value={t.radius} min={0} max={28} step={1} unit="px"
              onChange={(v) => setTweak('radius', v)} />

      <Section label="" />
      <Button label="Restore default settings" secondary onClick={resetAll} />
    </Panel>
  );
}

function PoweredByZipper() {
  return (
    <div style={{
      padding: '36px 0 24px',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      gap: 10,
      fontSize: 10.5, fontWeight: 600, letterSpacing: '0.1em',
      textTransform: 'uppercase', color: '#9CA3AF',
    }}>
      <span>Powered by</span>
      <img src="zipper-logo-grey.svg" alt="Zipper" height="18"
           style={{ display: 'block', height: 18, width: 'auto' }} />
    </div>
  );
}

// Mount
const acctRoot = ReactDOM.createRoot(document.getElementById('root'));
acctRoot.render(<AccountApp brandId="halcyon" />);