// Variations file — hero, onboarding, dashboard density
// Reuses ui.jsx primitives.

const T = window.TB;

// ═══════════════════════════════════════════════
// HERO VARIATIONS
// ═══════════════════════════════════════════════

// A · "Calm editorial" — center-stacked, big type, single accent
function HeroA() {
  return (
    <div style={{
      width: '100%', height: '100%', background: '#fff',
      fontFamily: T.font, padding: '48px 56px', boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 56,
      }}>
        <Logo size={18}/>
        <div style={{ display: 'flex', gap: 24, fontSize: 13, color: T.ink3 }}>
          <span>Expats</span><span>Advisors</span><span>Security</span>
          <Button variant="primary" size="sm">Start tax check</Button>
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', maxWidth: 700 }}>
        <Badge tone="mint" icon={Icon.spark}>Free preliminary check · No signup</Badge>
        <h1 style={{
          fontSize: 64, fontWeight: 600, letterSpacing: -1.8, lineHeight: 1.02,
          color: T.ink, margin: '20px 0 22px', textWrap: 'pretty',
        }}>
          Tax clarity for expats in&nbsp;Germany.
          <span style={{ display: 'block', color: T.muted }}>In six minutes.</span>
        </h1>
        <p style={{ fontSize: 18, color: T.ink3, lineHeight: 1.5, maxWidth: 520, margin: '0 0 32px' }}>
          Answer a few simple questions. Tax Bridge structures your situation
          before you commit to anything — including an account.
        </p>
        <div style={{ display: 'flex', gap: 10 }}>
          <Button variant="primary" size="lg" iconRight={Icon.arrow}>Start tax check</Button>
          <Button variant="ghost" size="lg">For advisors →</Button>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 28, fontSize: 12, color: T.muted, marginTop: 32 }}>
        <span>✓ GDPR · Frankfurt servers</span>
        <span>✓ Average refund: €1,072</span>
        <span>✓ Used by 12,400+ expats</span>
      </div>
    </div>
  );
}

// B · "Dual path split" — two halves, B2C and B2B equal weight
function HeroB() {
  return (
    <div style={{
      width: '100%', height: '100%',
      fontFamily: T.font, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '20px 40px', background: '#fff', borderBottom: `1px solid ${T.borderSoft}`,
      }}>
        <Logo size={18}/>
        <Button variant="ghost" size="sm">Sign in</Button>
      </div>
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        {/* Expats side */}
        <div style={{
          background: '#fff', padding: '56px 48px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          borderRight: `1px solid ${T.borderSoft}`,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -60, right: -60,
            width: 240, height: 240, borderRadius: 999,
            background: `radial-gradient(circle, ${T.mintGlow}, transparent 65%)`,
          }}/>
          <div style={{ position: 'relative' }}>
            <Badge tone="mint">For expats</Badge>
            <h1 style={{
              fontSize: 38, fontWeight: 600, letterSpacing: -1.1, lineHeight: 1.08,
              color: T.ink, margin: '16px 0 14px', textWrap: 'pretty',
            }}>Understand your German tax situation.</h1>
            <p style={{ fontSize: 15, color: T.ink3, lineHeight: 1.55, margin: '0 0 26px', maxWidth: 380 }}>
              Refund check, document list, advisor matching. No signup to start.
            </p>
            <Button variant="primary" size="lg" iconRight={Icon.arrow}>Start tax check</Button>
            <div style={{ fontSize: 12, color: T.muted, marginTop: 14 }}>6 minutes · 8 questions · Save anytime</div>
          </div>
        </div>
        {/* Advisors side */}
        <div style={{
          background: T.ink, color: '#fff',
          padding: '56px 48px',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', bottom: -80, left: -60,
            width: 280, height: 280, borderRadius: 999,
            background: 'radial-gradient(circle, rgba(58,210,159,0.22), transparent 65%)',
          }}/>
          <div style={{ position: 'relative' }}>
            <Badge tone="glass">For advisors</Badge>
            <h1 style={{
              fontSize: 38, fontWeight: 600, letterSpacing: -1.1, lineHeight: 1.08,
              color: '#fff', margin: '16px 0 14px', textWrap: 'pretty',
            }}>Structured cases instead of client email chains.</h1>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.75)', lineHeight: 1.55, margin: '0 0 26px', maxWidth: 380 }}>
              Pre-qualified profiles with complexity scoring. Subscription tiers.
            </p>
            <Button variant="mint" size="lg" iconRight={Icon.arrow}>Join advisor network</Button>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 14 }}>180+ verified Steuerberater · Berlin · Munich · Hamburg</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// C · "Live demo hero" — first question of the assessment IS the hero
function HeroC() {
  const [sel, setSel] = React.useState(null);
  return (
    <div style={{
      width: '100%', height: '100%', background: T.surfaceWarm,
      fontFamily: T.font, padding: '32px 48px', boxSizing: 'border-box',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32 }}>
        <Logo size={18}/>
        <Button variant="ghost" size="sm">Sign in</Button>
      </div>
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <Badge tone="mint" icon={Icon.spark}>Try it · no signup</Badge>
          <h1 style={{
            fontSize: 46, fontWeight: 600, letterSpacing: -1.4, lineHeight: 1.05,
            color: T.ink, margin: '18px 0 16px', textWrap: 'pretty',
          }}>Start the tax check right here.</h1>
          <p style={{ fontSize: 16, color: T.ink3, lineHeight: 1.55, margin: '0 0 24px', maxWidth: 440 }}>
            One question at a time. We'll build your preliminary profile as you go —
            and you'll see your refund estimate before we ask for anything.
          </p>
          <div style={{ display: 'flex', gap: 18, fontSize: 13, color: T.muted }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: T.mintInk }}>{Icon.shield}</span> GDPR · DSGVO</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ color: T.mintInk }}>{Icon.clock}</span> ~6 minutes</span>
          </div>
        </div>
        <Card pad={28} style={{ boxShadow: '0 30px 80px rgba(11,27,59,0.10)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <span style={{ fontFamily: T.mono, fontSize: 10.5, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7 }}>Question 1 of 8</span>
            <Badge tone="mint" icon={Icon.lock}>Private</Badge>
          </div>
          <div style={{ marginBottom: 16 }}>
            <ProgressBar value={12}/>
          </div>
          <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5, color: T.ink, margin: '0 0 18px', textWrap: 'balance' }}>
            Are you currently living in Germany?
          </h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { v: 'yes', l: 'Yes — I live in Germany', icon: Icon.home2 },
              { v: 'moving', l: 'Moving here soon', icon: Icon.flag },
              { v: 'left', l: 'I left Germany recently', icon: Icon.globe },
            ].map(o => (
              <OptionCard key={o.v} selected={sel === o.v} onClick={() => setSel(o.v)} icon={o.icon}>
                {o.l}
              </OptionCard>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════
// ONBOARDING STYLE VARIATIONS
// ═══════════════════════════════════════════════

// A · Stepper (current main approach — formal, predictable)
function OnboardA() {
  const [sel, setSel] = React.useState('employee');
  return (
    <div style={{
      width: '100%', height: '100%', background: '#fff',
      fontFamily: T.font, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        padding: '16px 24px', borderBottom: `1px solid ${T.borderSoft}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Logo size={16}/>
        <span style={{ fontSize: 11, color: T.muted, fontFamily: T.mono }}>Save & exit</span>
      </div>
      <div style={{ padding: '16px 24px', background: T.surface }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>
          Step 2 of 8 · Tax check
        </div>
        <ProgressBar value={25}/>
      </div>
      <div style={{ flex: 1, padding: '24px', overflowY: 'auto' }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 6 }}>Question 02</div>
        <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.5, lineHeight: 1.2, color: T.ink, margin: '0 0 6px' }}>
          What is your current work status?
        </h2>
        <p style={{ fontSize: 13, color: T.muted, margin: '0 0 20px' }}>Pick the one that best describes you.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { v: 'employee', l: 'Employee', s: 'Salary from a German employer', icon: Icon.briefcase },
            { v: 'freelance', l: 'Freelancer', s: 'Invoicing clients directly', icon: Icon.user },
            { v: 'founder', l: 'Founder', s: 'Running a company', icon: Icon.spark },
            { v: 'researcher', l: 'Researcher / Student', s: 'University or stipend', icon: Icon.doc },
          ].map(o => (
            <OptionCard key={o.v} selected={sel === o.v} onClick={() => setSel(o.v)} icon={o.icon} sub={o.s}>
              {o.l}
            </OptionCard>
          ))}
        </div>
      </div>
      <div style={{
        padding: '14px 24px', borderTop: `1px solid ${T.borderSoft}`,
        display: 'flex', justifyContent: 'space-between',
      }}>
        <Button variant="ghost" size="sm" icon={Icon.arrowL}>Back</Button>
        <Button variant="primary" size="sm" iconRight={Icon.arrow}>Continue</Button>
      </div>
    </div>
  );
}

// B · Conversational — chat-style assistant
function OnboardB() {
  const [sel, setSel] = React.useState(null);
  return (
    <div style={{
      width: '100%', height: '100%', background: T.surface,
      fontFamily: T.font, display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        padding: '16px 24px', borderBottom: `1px solid ${T.borderSoft}`,
        background: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 999, background: T.ink,
            color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 13, fontWeight: 600,
          }}>T</div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, color: T.ink }}>Tax Bridge Assistant</div>
            <div style={{ fontSize: 11, color: T.mintInk, display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: T.mint }}/> Online · Encrypted
            </div>
          </div>
        </div>
        <span style={{ fontFamily: T.mono, fontSize: 11, color: T.muted }}>2/8</span>
      </div>
      <div style={{ flex: 1, padding: '24px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Assistant msg */}
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <div style={{ width: 26, height: 26, borderRadius: 999, background: T.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, flexShrink: 0 }}>T</div>
          <div style={{
            background: '#fff', borderRadius: 16, borderTopLeftRadius: 4,
            padding: '12px 14px', maxWidth: 320,
            border: `1px solid ${T.borderSoft}`,
            fontSize: 14, color: T.ink2, lineHeight: 1.5,
          }}>
            Got it. <strong>Berlin</strong> — most expats here qualify for a refund.<br/>
            Quick one: <strong>what's your work status</strong>?
          </div>
        </div>
        {/* Options as quick-reply chips */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginLeft: 36 }}>
          {[
            { v: 'employee', l: 'Employee', icon: Icon.briefcase },
            { v: 'freelance', l: 'Freelancer · Selbstständig', icon: Icon.user },
            { v: 'founder', l: 'Founder', icon: Icon.spark },
            { v: 'researcher', l: 'Researcher / Student', icon: Icon.doc },
          ].map(o => (
            <button key={o.v} onClick={() => setSel(o.v)} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 14px', borderRadius: 999,
              background: sel === o.v ? T.ink : '#fff',
              color: sel === o.v ? '#fff' : T.ink2,
              border: `1px solid ${sel === o.v ? T.ink : T.border}`,
              fontFamily: T.font, fontSize: 13, fontWeight: 500,
              cursor: 'pointer', alignSelf: 'flex-end',
              maxWidth: 'fit-content',
            }}>
              <span style={{ color: sel === o.v ? T.mint : T.muted }}>{o.icon}</span>
              {o.l}
            </button>
          ))}
        </div>
        {sel && (
          <>
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 4 }}>
              <div style={{
                background: T.ink, color: '#fff',
                padding: '10px 14px', borderRadius: 16, borderTopRightRadius: 4,
                fontSize: 14, maxWidth: 220,
              }}>{sel === 'employee' ? 'Employee' : sel === 'freelance' ? 'Freelancer' : sel === 'founder' ? 'Founder' : 'Researcher'}</div>
            </div>
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <div style={{ width: 26, height: 26, borderRadius: 999, background: T.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600, flexShrink: 0 }}>T</div>
              <div style={{
                background: T.mintSoft, borderRadius: 16, borderTopLeftRadius: 4,
                padding: '12px 14px', maxWidth: 320,
                fontSize: 13.5, color: T.ink2, lineHeight: 1.5,
              }}>
                <span style={{ color: T.mintInk, marginRight: 4 }}>{Icon.spark}</span>
                Nice — salary filers often claim back <strong>€700–€1,200</strong> in deductions.
              </div>
            </div>
          </>
        )}
      </div>
      <div style={{
        padding: '12px 24px', borderTop: `1px solid ${T.borderSoft}`,
        background: '#fff', display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ flex: 1, height: 36, padding: '0 14px', background: T.surface, borderRadius: 999, display: 'flex', alignItems: 'center', fontSize: 13, color: T.faint }}>
          Or type your answer…
        </div>
      </div>
    </div>
  );
}

// C · Card-stack — one big visual card per question, swipe-feeling
function OnboardC() {
  const [sel, setSel] = React.useState(null);
  const opts = [
    { v: 'employee', l: 'Employee', s: 'Salary from German employer', color: T.mintSoft, accent: T.mintInk },
    { v: 'freelance', l: 'Freelancer', s: 'Invoicing clients yourself', color: T.blueSoft, accent: '#2B5BD7' },
    { v: 'founder', l: 'Founder', s: 'Running a company', color: T.amberSoft, accent: '#8A5A0F' },
    { v: 'researcher', l: 'Researcher · Student', s: 'University / stipend', color: T.roseSoft, accent: '#A23541' },
  ];
  return (
    <div style={{
      width: '100%', height: '100%', background: T.ink, color: '#fff',
      fontFamily: T.font, display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: '20%', left: '50%', transform: 'translateX(-50%)',
        width: 600, height: 600, borderRadius: 999,
        background: `radial-gradient(circle, rgba(58,210,159,0.16), transparent 60%)`,
      }}/>
      <div style={{
        padding: '16px 24px', position: 'relative',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <Logo size={16} color="#fff" accent={T.mint}/>
        <div style={{ display: 'flex', gap: 4 }}>
          {[1,2,3,4,5,6,7,8].map(i => (
            <div key={i} style={{
              width: 16, height: 3, borderRadius: 999,
              background: i <= 2 ? T.mint : 'rgba(255,255,255,0.18)',
            }}/>
          ))}
        </div>
      </div>
      <div style={{
        flex: 1, padding: '20px 24px 0', position: 'relative',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          fontFamily: T.mono, fontSize: 10, color: 'rgba(255,255,255,0.55)',
          textTransform: 'uppercase', letterSpacing: 0.8, marginBottom: 8,
        }}>02 · status</div>
        <h2 style={{
          fontSize: 30, fontWeight: 600, letterSpacing: -0.8, lineHeight: 1.1,
          color: '#fff', margin: '0 0 24px', textWrap: 'balance',
        }}>What's your work situation?</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {opts.map(o => (
            <button key={o.v} onClick={() => setSel(o.v)} style={{
              position: 'relative', textAlign: 'left',
              padding: 18, borderRadius: 18, minHeight: 110,
              background: o.color,
              border: `2px solid ${sel === o.v ? T.mint : 'transparent'}`,
              cursor: 'pointer',
              transition: 'all 160ms ease',
              transform: sel === o.v ? 'translateY(-2px)' : 'none',
              boxShadow: sel === o.v ? '0 16px 32px rgba(0,0,0,0.25)' : 'none',
              fontFamily: T.font,
            }}>
              <div style={{
                width: 30, height: 30, borderRadius: 9,
                background: '#fff', color: o.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 10,
              }}>{Icon.briefcase}</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>{o.l}</div>
              <div style={{ fontSize: 11.5, color: T.ink3, marginTop: 2 }}>{o.s}</div>
            </button>
          ))}
        </div>
      </div>
      <div style={{
        padding: '16px 24px', position: 'relative',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <button style={{ background: 'rgba(255,255,255,0.08)', border: 0, color: '#fff', padding: '10px 14px', borderRadius: 999, fontFamily: T.font, fontSize: 13, cursor: 'pointer', display: 'flex', gap: 6, alignItems: 'center' }}>
          {Icon.arrowL} Back
        </button>
        <span style={{ fontFamily: T.mono, fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>Swipe or tap →</span>
        <Button variant="mint" size="sm" iconRight={Icon.arrow}>Next</Button>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════
// DASHBOARD DENSITY VARIATIONS
// ═══════════════════════════════════════════════

// A · Calm — single focus card, generous whitespace
function DashA() {
  return (
    <div style={{ width: '100%', height: '100%', background: '#fff', fontFamily: T.font, color: T.ink2, display: 'flex' }}>
      <aside style={{ width: 56, borderRight: `1px solid ${T.borderSoft}`, padding: '16px 12px', display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
        <div style={{ width: 30, height: 30, borderRadius: 8, background: T.ink, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700 }}>T</div>
        {[Icon.home2, Icon.doc, Icon.user, Icon.shield].map((i, idx) => (
          <button key={idx} style={{ width: 32, height: 32, borderRadius: 8, background: idx === 0 ? T.surface : 'transparent', border: 0, color: idx === 0 ? T.ink : T.muted, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{i}</button>
        ))}
      </aside>
      <div style={{ flex: 1, padding: '48px 64px', overflow: 'auto' }}>
        <div style={{ fontFamily: T.mono, fontSize: 10, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.8 }}>Welcome back · CR-2189</div>
        <h1 style={{ fontSize: 36, fontWeight: 600, letterSpacing: -1, lineHeight: 1.1, color: T.ink, margin: '8px 0 32px', maxWidth: 520, textWrap: 'pretty' }}>
          Your refund estimate is ready.
        </h1>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginBottom: 6 }}>
          <span style={{ fontSize: 64, fontWeight: 600, letterSpacing: -2.5, color: T.ink, lineHeight: 1 }}>€1,240</span>
          <span style={{ fontSize: 22, color: T.muted, fontWeight: 500, paddingBottom: 6 }}>–€1,860</span>
        </div>
        <p style={{ fontSize: 14, color: T.muted, margin: '0 0 36px' }}>Verified after document review · Tax year 2024</p>

        <div style={{ display: 'flex', gap: 10, marginBottom: 32 }}>
          <Button variant="primary" size="md" iconRight={Icon.arrow}>Upload next document</Button>
          <Button variant="ghost" size="md">See breakdown</Button>
        </div>

        <div style={{ borderTop: `1px solid ${T.borderSoft}`, paddingTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {[
            { l: 'Profile', v: '62%', s: 'Complete' },
            { l: 'Documents', v: '2 of 8', s: 'Uploaded · encrypted' },
            { l: 'Deadline', v: 'Jul 31', s: '79 days remaining' },
          ].map(s => (
            <div key={s.l}>
              <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>{s.l}</div>
              <div style={{ fontSize: 28, fontWeight: 600, letterSpacing: -0.7, color: T.ink, lineHeight: 1.1 }}>{s.v}</div>
              <div style={{ fontSize: 12, color: T.muted, marginTop: 4 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// B · Structured — current main approach (KPIs + timeline)
function DashB() {
  return (
    <div style={{ width: '100%', height: '100%', background: T.surface, fontFamily: T.font, color: T.ink2, display: 'flex' }}>
      <aside style={{ width: 180, background: '#fff', borderRight: `1px solid ${T.borderSoft}`, padding: '16px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ padding: '6px 10px 12px' }}><Logo size={14}/></div>
        {[
          ['Overview', Icon.home2, true],
          ['Documents', Icon.doc, false],
          ['Advisors', Icon.user, false],
          ['Filing', Icon.flag, false],
        ].map(([l, i, a]) => (
          <button key={l} style={{
            display: 'flex', alignItems: 'center', gap: 8, padding: '7px 10px',
            background: a ? T.surface : 'transparent', borderRadius: 7,
            color: a ? T.ink : T.ink3, border: 0, cursor: 'pointer', textAlign: 'left',
            fontFamily: T.font, fontSize: 12, fontWeight: a ? 600 : 500,
          }}>{i}{l}</button>
        ))}
      </aside>
      <div style={{ flex: 1, padding: '20px 24px', overflow: 'auto' }}>
        <h1 style={{ fontSize: 18, fontWeight: 600, color: T.ink, letterSpacing: -0.3, margin: '0 0 14px' }}>Welcome back, Maya</h1>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 12 }}>
          {[
            { l: 'Refund est.', v: '€1,240+', tone: T.mintSoft, c: T.mintInk, i: Icon.euro },
            { l: 'Documents', v: '2 of 8', tone: T.amberSoft, c: '#8A5A0F', i: Icon.doc },
            { l: 'Complexity', v: 'Medium', tone: T.blueSoft, c: '#2B5BD7', i: Icon.chart },
            { l: 'Deadline', v: 'Jul 31', tone: T.surface, c: T.ink2, i: Icon.clock },
          ].map(k => (
            <div key={k.l} style={{ background: '#fff', borderRadius: 12, border: `1px solid ${T.border}`, padding: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                <span style={{ fontFamily: T.mono, fontSize: 9.5, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7 }}>{k.l}</span>
                <div style={{ width: 20, height: 20, borderRadius: 6, background: k.tone, color: k.c, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{k.i}</div>
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.4, color: T.ink, lineHeight: 1.1 }}>{k.v}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 10 }}>
          <div style={{ background: '#fff', borderRadius: 14, border: `1px solid ${T.border}`, padding: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: T.ink, marginBottom: 12 }}>Filing timeline</div>
            {['Created profile · today', 'Upload documents · ongoing', 'Advisor review · suggested', 'File via ELSTER · by Jun 30'].map((t, i) => (
              <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0' }}>
                <div style={{ width: 18, height: 18, borderRadius: 999, background: i === 0 ? T.mint : i === 1 ? '#fff' : T.surface, border: i === 1 ? `2px solid ${T.mint}` : `1px solid ${T.border}`, flexShrink: 0 }}/>
                <span style={{ fontSize: 12, color: i <= 1 ? T.ink : T.muted, fontWeight: i <= 1 ? 500 : 400 }}>{t}</span>
              </div>
            ))}
          </div>
          <div style={{ background: '#fff', borderRadius: 14, border: `1px solid ${T.border}`, padding: 16 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: T.ink, marginBottom: 12 }}>Account security</div>
            {['Email verified', 'Strong password', 'Enable 2FA', 'Connect ELSTER'].map((t, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0' }}>
                <div style={{ width: 14, height: 14, borderRadius: 999, background: i < 2 ? T.mint : T.surface, color: T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', border: i < 2 ? 'none' : `1px solid ${T.border}` }}>
                  {i < 2 && Icon.check}
                </div>
                <span style={{ fontSize: 12, color: i < 2 ? T.muted : T.ink2, textDecoration: i < 2 ? 'line-through' : 'none' }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// C · Data-rich — denser grid, advisor inbox feel
function DashC() {
  return (
    <div style={{ width: '100%', height: '100%', background: T.inkDeep, fontFamily: T.font, color: '#fff', display: 'flex' }}>
      <aside style={{ width: 64, padding: '16px 0', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center', borderRight: '1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: T.mint, color: T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700 }}>T</div>
        {[Icon.home2, Icon.doc, Icon.user, Icon.chart, Icon.shield].map((i, idx) => (
          <button key={idx} style={{ width: 36, height: 36, borderRadius: 8, background: idx === 0 ? 'rgba(255,255,255,0.08)' : 'transparent', border: 0, color: idx === 0 ? '#fff' : 'rgba(255,255,255,0.5)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{i}</button>
        ))}
      </aside>
      <div style={{ flex: 1, padding: '16px 20px', overflow: 'auto', minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <div>
            <div style={{ fontFamily: T.mono, fontSize: 10, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: 0.8 }}>CR-2189 · TY 2024</div>
            <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.3 }}>Maya K. · Berlin · Employee + RSU</div>
          </div>
          <div style={{ display: 'flex', gap: 6, fontSize: 11 }}>
            {['Profile 62%', 'Docs 2/8', 'Match 98%'].map(t => (
              <span key={t} style={{ padding: '3px 8px', borderRadius: 999, background: 'rgba(58,210,159,0.15)', color: T.mint, fontFamily: T.mono }}>{t}</span>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginBottom: 10 }}>
          {[
            { l: 'Refund low', v: '€1,240', d: '+ €420 RSU' },
            { l: 'Refund high', v: '€1,860', d: 'Best case' },
            { l: 'Tax due', v: '€0', d: 'No additional' },
            { l: 'Filings', v: '0', d: 'First-time' },
            { l: 'Complex.', v: 'M', d: '4 of 8 factors' },
            { l: 'Days left', v: '79', d: 'Until Jul 31' },
          ].map(k => (
            <div key={k.l} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, padding: 10 }}>
              <div style={{ fontFamily: T.mono, fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 4 }}>{k.l}</div>
              <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.4, color: '#fff', lineHeight: 1.1 }}>{k.v}</div>
              <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{k.d}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 8 }}>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
              <span style={{ fontSize: 12, fontWeight: 600 }}>Document checklist</span>
              <span style={{ fontFamily: T.mono, fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>2/8 uploaded</span>
            </div>
            {[
              { n: 'Lohnsteuerbescheinigung 2024', s: '342 KB', st: 'ok' },
              { n: 'Steuer-ID', s: 'pending', st: 'pending' },
              { n: 'RSU vesting statements', s: 'needed', st: 'missing' },
              { n: 'Crypto transaction log', s: 'needed', st: 'missing' },
              { n: 'Insurance contributions', s: 'optional', st: 'optional' },
            ].map((d, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.04)' }}>
                <div style={{ width: 14, height: 14, borderRadius: 999, background: d.st === 'ok' ? T.mint : d.st === 'pending' ? T.amber : 'transparent', border: d.st === 'missing' || d.st === 'optional' ? '1px solid rgba(255,255,255,0.2)' : 'none' }}/>
                <span style={{ flex: 1, fontSize: 11.5, color: d.st === 'ok' ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.75)' }}>{d.n}</span>
                <span style={{ fontSize: 10, fontFamily: T.mono, color: d.st === 'ok' ? T.mint : 'rgba(255,255,255,0.4)' }}>{d.s}</span>
              </div>
            ))}
          </div>
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 10 }}>Income mix</div>
            {[
              { l: 'Salary', v: 78, c: T.mint },
              { l: 'RSU vesting', v: 18, c: T.blue },
              { l: 'Crypto', v: 3, c: T.amber },
              { l: 'Foreign', v: 1, c: T.rose },
            ].map(s => (
              <div key={s.l} style={{ marginBottom: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, marginBottom: 3 }}>
                  <span style={{ color: 'rgba(255,255,255,0.7)' }}>{s.l}</span>
                  <span style={{ fontFamily: T.mono, color: 'rgba(255,255,255,0.5)' }}>{s.v}%</span>
                </div>
                <div style={{ height: 4, background: 'rgba(255,255,255,0.08)', borderRadius: 999 }}>
                  <div style={{ width: `${s.v}%`, height: '100%', background: s.c, borderRadius: 999 }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════
// Variations app
// ═══════════════════════════════════════════════
function VariationsApp() {
  return (
    <window.DesignCanvas
      title="Tax Bridge — Variations"
      subtitle="Hero · Onboarding · Dashboard density · 9 directions to compare"
    >
      <window.DCSection
        id="hero" title="Hero layout"
        subtitle="Three takes on the homepage hero — editorial calm, dual-path split, and live-demo embed"
      >
        <window.DCArtboard id="hero-a" label="A · Calm editorial" width={1100} height={680}><HeroA/></window.DCArtboard>
        <window.DCArtboard id="hero-b" label="B · Dual-path split" width={1100} height={680}><HeroB/></window.DCArtboard>
        <window.DCArtboard id="hero-c" label="C · Live demo embed" width={1100} height={680}><HeroC/></window.DCArtboard>
      </window.DCSection>

      <window.DCSection
        id="onboard" title="Onboarding style"
        subtitle="How the 8-question tax check feels — stepper, conversational, or visual card-stack"
      >
        <window.DCArtboard id="ob-a" label="A · Stepper (used in prototype)" width={420} height={720}><OnboardA/></window.DCArtboard>
        <window.DCArtboard id="ob-b" label="B · Conversational assistant" width={420} height={720}><OnboardB/></window.DCArtboard>
        <window.DCArtboard id="ob-c" label="C · Visual card-stack" width={420} height={720}><OnboardC/></window.DCArtboard>
      </window.DCSection>

      <window.DCSection
        id="dash" title="Dashboard density"
        subtitle="From calm one-thing-at-a-time to structured-but-readable to advisor-grade data-rich"
      >
        <window.DCArtboard id="dash-a" label="A · Calm · one focus" width={1100} height={680}><DashA/></window.DCArtboard>
        <window.DCArtboard id="dash-b" label="B · Structured (used in prototype)" width={1100} height={680}><DashB/></window.DCArtboard>
        <window.DCArtboard id="dash-c" label="C · Data-rich · dark mode" width={1100} height={680}><DashC/></window.DCArtboard>
      </window.DCSection>
    </window.DesignCanvas>
  );
}

window.VariationsApp = VariationsApp;