// Home / marketing page
const T = window.TB;

function HomeScreen({ go, mobile = false }) {
  return (
    <div style={{
      fontFamily: T.font, color: T.ink2,
      background: '#fff',
      minHeight: '100%',
    }}>
      {/* Nav */}
      <HomeNav mobile={mobile} go={go} />

      {/* Hero */}
      <HomeHero mobile={mobile} go={go} />

      {/* Trust strip */}
      <TrustStrip mobile={mobile} />

      {/* Two paths */}
      <TwoPathsSection mobile={mobile} go={go} />

      {/* Product preview (case file card) */}
      <ProductPreviewSection mobile={mobile} />

      {/* How it works */}
      <HowItWorks mobile={mobile} />

      {/* Security */}
      <SecuritySection mobile={mobile} />

      {/* Footer CTA */}
      <FooterCTA mobile={mobile} go={go} />

      {/* Footer */}
      <Footer mobile={mobile} />
    </div>
  );
}

function HomeNav({ mobile, go }) {
  if (mobile) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '18px 20px', borderBottom: `1px solid ${T.borderSoft}`,
      }}>
        <Logo size={18}/>
        <button style={{ background: 'none', border: 0, padding: 6, cursor: 'pointer' }}>
          <svg width="22" height="22" viewBox="0 0 22 22"><path d="M3 6h16M3 11h16M3 16h16" stroke={T.ink} strokeWidth="1.8" strokeLinecap="round"/></svg>
        </button>
      </div>
    );
  }
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px',
      position: 'sticky', top: 0, zIndex: 10,
      background: 'rgba(255,255,255,0.85)',
      backdropFilter: 'blur(10px)',
      borderBottom: `1px solid ${T.borderSoft}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
        <Logo size={22}/>
        <nav style={{ display: 'flex', gap: 28 }}>
          {['For expats', 'For advisors', 'Security', 'Pricing', 'About'].map(l => (
            <a key={l} style={{
              fontSize: 14, color: T.ink2, textDecoration: 'none', fontWeight: 500,
              cursor: 'pointer',
            }}>{l}</a>
          ))}
        </nav>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Button variant="link" size="sm">Sign in</Button>
        <Button variant="primary" size="sm" onClick={() => go('assessment')} iconRight={Icon.arrow}>
          Start tax check
        </Button>
      </div>
    </div>
  );
}

// ─── Hero — Calm editorial ─────────────────────────────
function HomeHero({ mobile, go }) {
  return (
    <section style={{
      position: 'relative',
      padding: mobile ? '40px 20px 56px' : '88px 56px 96px',
      overflow: 'hidden',
    }}>
      {/* Whisper-soft accent backdrop */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        background: `radial-gradient(70% 50% at 80% 20%, ${T.mintGlow}, transparent 65%)`,
      }} />
      <div style={{
        position: 'relative', zIndex: 1,
        maxWidth: 880, margin: '0 auto',
      }}>
        <Badge tone="mint" icon={Icon.spark}>
          Free preliminary tax check · No signup needed
        </Badge>
        <h1 style={{
          fontFamily: T.font, fontWeight: 600,
          fontSize: mobile ? 44 : 80, lineHeight: 0.98,
          letterSpacing: mobile ? -1.6 : -2.6,
          color: T.ink, margin: '22px 0 22px',
          textWrap: 'pretty',
        }}>
          Tax clarity for expats in Germany.
          <span style={{ display: 'block', color: T.muted }}>
            In six minutes.
          </span>
        </h1>
        <p style={{
          fontSize: mobile ? 17 : 20, lineHeight: 1.5,
          color: T.ink3, margin: '0 0 36px', maxWidth: 620,
          textWrap: 'pretty',
        }}>
          Answer a few simple questions and Tax Bridge structures your
          situation — refund estimate, documents, complexity — before you
          commit to anything. Not even an account.
        </p>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          <Button variant="primary" size="lg" onClick={() => go('assessment')} iconRight={Icon.arrow}>
            Start my tax check
          </Button>
          <Button variant="ghost" size="lg" iconRight={Icon.arrow}>
            For tax advisors
          </Button>
        </div>

        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'center',
          marginTop: 40,
          paddingTop: 28, borderTop: `1px solid ${T.borderSoft}`,
        }}>
          {[
            { t: 'Average refund', v: '€1,072' },
            { t: 'Used by', v: '12,400+ expats' },
            { t: 'Verified advisors', v: '180+' },
            { t: 'Data residency', v: 'EU only · Frankfurt' },
          ].map(x => (
            <div key={x.t} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontFamily: T.mono, fontSize: 10.5, color: T.faint, textTransform: 'uppercase', letterSpacing: 0.7 }}>{x.t}</span>
              <span style={{ fontSize: 14, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>{x.v}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Product preview section (case file card, was inside hero) ─────
function ProductPreviewSection({ mobile }) {
  return (
    <section style={{
      padding: mobile ? '20px 20px 56px' : '40px 56px 96px',
    }}>
      <div style={{ maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ marginBottom: 32, maxWidth: 640 }}>
          <Badge tone="neutral">Live preview</Badge>
          <h2 style={{
            fontSize: mobile ? 26 : 36, fontWeight: 600,
            letterSpacing: -0.9, lineHeight: 1.1,
            color: T.ink, margin: '14px 0 0', textWrap: 'pretty',
          }}>This is what your case looks like after six minutes.</h2>
        </div>
        <HeroVisual mobile={mobile} embed/>
      </div>
    </section>
  );
}

function HeroVisual({ mobile, embed = false }) {
  return (
    <div style={{
      position: 'relative',
      marginTop: mobile ? 8 : 0,
      paddingLeft: mobile || embed ? 0 : 20,
      maxWidth: embed ? 760 : 'none',
      margin: embed ? '0 auto' : undefined,
    }}>
      {/* Floating ambient cards behind */}
      <div style={{
        position: 'absolute',
        top: mobile ? -10 : -30, right: mobile ? 10 : -10,
        width: mobile ? 140 : 200, padding: '12px 14px',
        background: '#fff',
        border: `1px solid ${T.border}`,
        borderRadius: 14, boxShadow: '0 16px 40px rgba(11,27,59,0.08)',
        transform: 'rotate(3deg)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <div style={{ width: 22, height: 22, borderRadius: 7, background: T.mintSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.mintInk }}>{Icon.euro}</div>
          <span style={{ fontSize: 11, color: T.muted, fontFamily: T.mono, textTransform: 'uppercase', letterSpacing: 0.6 }}>Estimated refund</span>
        </div>
        <div style={{ fontFamily: T.font, fontWeight: 600, fontSize: 22, color: T.ink, letterSpacing: -0.6 }}>
          €1,240<span style={{ fontSize: 13, color: T.muted, fontWeight: 400 }}>–€1,860</span>
        </div>
      </div>

      <div style={{
        position: 'absolute',
        bottom: mobile ? -16 : -28, left: mobile ? 0 : -20,
        width: mobile ? 200 : 230, padding: '14px 16px',
        background: '#fff',
        border: `1px solid ${T.border}`,
        borderRadius: 14, boxShadow: '0 16px 40px rgba(11,27,59,0.08)',
        transform: 'rotate(-2.5deg)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius: 999, background: T.mint }}/>
          <span style={{ fontSize: 12, fontWeight: 500, color: T.ink2 }}>Profile complete</span>
          <span style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, marginLeft: 'auto' }}>82%</span>
        </div>
        <ProgressBar value={82}/>
        <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
          <Badge tone="mint" style={{ fontSize: 10.5 }}>Salary</Badge>
          <Badge tone="blue" style={{ fontSize: 10.5 }}>RSU</Badge>
          <Badge tone="neutral" style={{ fontSize: 10.5 }}>+2</Badge>
        </div>
      </div>

      {/* Main card — case profile preview */}
      <Card pad={0} style={{
        overflow: 'hidden',
        border: `1px solid ${T.border}`,
        boxShadow: '0 30px 80px rgba(11,27,59,0.14)',
      }}>
        <div style={{
          padding: '14px 18px',
          background: T.surface,
          borderBottom: `1px solid ${T.borderSoft}`,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <div style={{ display: 'flex', gap: 5 }}>
            <div style={{ width: 9, height: 9, borderRadius: 999, background: '#E5E8EE' }}/>
            <div style={{ width: 9, height: 9, borderRadius: 999, background: '#E5E8EE' }}/>
            <div style={{ width: 9, height: 9, borderRadius: 999, background: '#E5E8EE' }}/>
          </div>
          <span style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, marginLeft: 6 }}>
            tax-bridge.de / case · CR-2189
          </span>
          <Badge tone="mint" style={{ marginLeft: 'auto' }} icon={Icon.shield}>encrypted</Badge>
        </div>
        <div style={{ padding: 24 }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 16 }}>
            <div>
              <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 4 }}>Preliminary profile</div>
              <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: -0.4, color: T.ink }}>Maya — Tech employee, Berlin</div>
              <div style={{ fontSize: 13, color: T.muted, marginTop: 3 }}>Tax year 2024 · Single · No advisor yet</div>
            </div>
            <Badge tone="amber">Medium complexity</Badge>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
            marginBottom: 18,
          }}>
            {[
              { l: 'Refund est.', v: '€1,240–1,860', t: 'mint' },
              { l: 'Documents', v: '6 of 8 ready', t: 'amber' },
            ].map(s => (
              <div key={s.l} style={{
                padding: '12px 14px', borderRadius: 12,
                background: T.surface, border: `1px solid ${T.borderSoft}`,
              }}>
                <div style={{ fontSize: 11, color: T.muted, fontFamily: T.mono, textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 4 }}>{s.l}</div>
                <div style={{ fontSize: 16, fontWeight: 600, color: T.ink, letterSpacing: -0.3 }}>{s.v}</div>
              </div>
            ))}
          </div>

          <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>Income types</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 18 }}>
            {[['Salary','mint'], ['RSU vesting','blue'], ['Foreign accounts','blue'], ['Crypto','neutral']].map(([l,t]) => (
              <Badge key={l} tone={t}>{l}</Badge>
            ))}
          </div>

          <div style={{ fontFamily: T.mono, fontSize: 11, color: T.muted, textTransform: 'uppercase', letterSpacing: 0.7, marginBottom: 8 }}>Suggested advisors</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              { n: 'Lena R. — Steuerberaterin, Berlin', m: '98% match · RSU/equity specialist' },
              { n: 'Steuerkanzlei Nord', m: '94% match · Expat tax, English-speaking' },
            ].map((a, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px',
                background: '#fff', border: `1px solid ${T.borderSoft}`, borderRadius: 12,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 999, flexShrink: 0,
                  background: i === 0 ? '#E8F3FF' : T.sand,
                  color: T.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 600, fontSize: 12,
                }}>{a.n.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: T.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.n}</div>
                  <div style={{ fontSize: 11, color: T.muted, marginTop: 1 }}>{a.m}</div>
                </div>
                <div style={{ color: T.muted }}>{Icon.arrow}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

// ─── Trust strip ─────────────────────────────────────────
function TrustStrip({ mobile }) {
  return (
    <section style={{
      padding: mobile ? '24px 20px' : '32px 56px',
      borderTop: `1px solid ${T.borderSoft}`,
      borderBottom: `1px solid ${T.borderSoft}`,
      background: T.surface,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', flexWrap: 'wrap',
        gap: mobile ? 14 : 32, justifyContent: mobile ? 'flex-start' : 'space-between',
      }}>
        <div style={{ fontSize: 12, color: T.muted, fontFamily: T.mono, textTransform: 'uppercase', letterSpacing: 0.8 }}>
          Built with
        </div>
        {[
          'BaFin-aligned workflows',
          'ELSTER-ready exports',
          'GDPR · DSGVO',
          'EU servers · Frankfurt',
          'AES-256 encryption',
        ].map(t => (
          <div key={t} style={{ fontSize: 13, color: T.ink3, fontWeight: 500 }}>{t}</div>
        ))}
      </div>
    </section>
  );
}

// ─── Two paths ─────────────────────────────────────────
function TwoPathsSection({ mobile, go }) {
  return (
    <section style={{ padding: mobile ? '56px 20px' : '96px 56px' }}>
      <SectionHeader
        mobile={mobile}
        kicker="One platform · Two sides"
        title="Tax Bridge connects expats who need clarity with advisors who need structure."
      />

      <div style={{
        display: 'grid', gap: mobile ? 16 : 22,
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        marginTop: mobile ? 28 : 48,
      }}>
        {/* B2C path */}
        <PathCard
          mobile={mobile}
          tone="mint"
          eyebrow="For expats"
          title="Understand your German tax situation in 6 minutes"
          bullets={[
            'See if you must file — or could get a refund',
            'Know exactly which documents you need',
            'Get matched with the right advisor (if you want one)',
          ]}
          cta="Start tax check"
          onCTA={() => go('assessment')}
        />
        {/* B2B path */}
        <PathCard
          mobile={mobile}
          tone="dark"
          eyebrow="For advisors"
          title="Structured case files instead of incomplete client emails"
          bullets={[
            'Pre-qualified profiles with complexity scoring',
            'Document checklist + readiness already done',
            'Subscription tiers — choose your case volume',
          ]}
          cta="Join advisor network"
          onCTA={() => {}}
        />
      </div>
    </section>
  );
}

function PathCard({ mobile, tone, eyebrow, title, bullets, cta, onCTA }) {
  const dark = tone === 'dark';
  return (
    <div style={{
      position: 'relative',
      padding: mobile ? 24 : 40,
      borderRadius: 24,
      background: dark ? T.ink : '#fff',
      color: dark ? '#fff' : T.ink2,
      border: dark ? `1px solid ${T.ink}` : `1px solid ${T.border}`,
      overflow: 'hidden',
    }}>
      {/* decorative accent */}
      <div style={{
        position: 'absolute', top: -60, right: -60,
        width: 220, height: 220, borderRadius: 999,
        background: dark ? `radial-gradient(circle, rgba(58,210,159,0.30), transparent 65%)`
                         : `radial-gradient(circle, ${T.mintGlow}, transparent 65%)`,
      }}/>
      <div style={{ position: 'relative' }}>
        <Badge tone={dark ? 'glass' : 'mint'}>{eyebrow}</Badge>
        <h3 style={{
          fontSize: mobile ? 24 : 28, fontWeight: 600,
          letterSpacing: -0.6, lineHeight: 1.15,
          margin: '14px 0 22px',
          color: dark ? '#fff' : T.ink,
          textWrap: 'balance',
        }}>{title}</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
          {bullets.map(b => (
            <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <div style={{
                width: 20, height: 20, borderRadius: 999, flexShrink: 0, marginTop: 1,
                background: dark ? 'rgba(58,210,159,0.18)' : T.mintSoft,
                color: dark ? T.mint : T.mintInk,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{Icon.check}</div>
              <span style={{ fontSize: 15, lineHeight: 1.45, color: dark ? 'rgba(255,255,255,0.85)' : T.ink3 }}>{b}</span>
            </div>
          ))}
        </div>
        <Button
          variant={dark ? 'mint' : 'primary'} size="md"
          iconRight={Icon.arrow} onClick={onCTA}
        >{cta}</Button>
      </div>
    </div>
  );
}

// ─── How it works ─────────────────────────────────────────
function HowItWorks({ mobile }) {
  const steps = [
    { n: '01', t: 'Answer a few questions', d: 'No signup. Lightweight, plain-language questions about your situation.', i: Icon.spark },
    { n: '02', t: 'See your tax profile', d: 'A structured view of what applies to you, with refund estimates and a document checklist.', i: Icon.doc },
    { n: '03', t: 'Save it, or take it further', d: 'Create a secure account to save the profile and (optionally) get matched with an advisor.', i: Icon.shield },
  ];
  return (
    <section style={{
      padding: mobile ? '56px 20px' : '88px 56px',
      background: T.surfaceWarm,
      borderTop: `1px solid ${T.borderSoft}`,
      borderBottom: `1px solid ${T.borderSoft}`,
    }}>
      <SectionHeader
        mobile={mobile}
        kicker="How it works"
        title="Value first. Commitment later."
        sub="You don't have to register to see what Tax Bridge knows about your situation."
      />
      <div style={{
        display: 'grid', gap: mobile ? 14 : 18,
        gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
        marginTop: mobile ? 28 : 48,
      }}>
        {steps.map(s => (
          <div key={s.n} style={{
            background: '#fff', padding: mobile ? 22 : 28,
            borderRadius: 18, border: `1px solid ${T.border}`,
          }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: 18,
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 12,
                background: T.mintSoft, color: T.mintInk,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{s.i}</div>
              <span style={{ fontFamily: T.mono, fontSize: 12, color: T.faint }}>{s.n}</span>
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: T.ink, letterSpacing: -0.3, marginBottom: 6 }}>{s.t}</div>
            <div style={{ fontSize: 14, lineHeight: 1.5, color: T.muted }}>{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Security ─────────────────────────────────────────
function SecuritySection({ mobile }) {
  return (
    <section style={{ padding: mobile ? '56px 20px' : '96px 56px' }}>
      <div style={{
        display: mobile ? 'block' : 'grid',
        gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center',
      }}>
        <div>
          <Badge tone="neutral" icon={Icon.shield}>Security & trust</Badge>
          <h2 style={{
            fontSize: mobile ? 30 : 44, fontWeight: 600,
            letterSpacing: -1, lineHeight: 1.1,
            color: T.ink, margin: '14px 0 18px', textWrap: 'pretty',
          }}>Your tax data is sensitive. We treat it that way.</h2>
          <p style={{ fontSize: 16, color: T.ink3, lineHeight: 1.55, marginBottom: 24, maxWidth: 500 }}>
            Tax Bridge is built around encrypted document storage, verified advisor
            access, and granular consent — so you decide what gets shared, and with whom.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              { i: Icon.lock, t: 'AES-256 at rest', d: 'Encrypted documents · EU-only storage' },
              { i: Icon.shield, t: 'GDPR · DSGVO', d: 'Frankfurt servers · No data outside EU' },
              { i: Icon.user, t: 'Verified advisors', d: 'BaFin-compatible identity checks' },
              { i: Icon.check, t: 'Granular consent', d: 'Approve every advisor view individually' },
            ].map(x => (
              <div key={x.t} style={{
                padding: 14, borderRadius: 12,
                background: T.surface, border: `1px solid ${T.borderSoft}`,
              }}>
                <div style={{ color: T.ink, marginBottom: 6 }}>{x.i}</div>
                <div style={{ fontSize: 13, fontWeight: 600, color: T.ink2, marginBottom: 2 }}>{x.t}</div>
                <div style={{ fontSize: 12, color: T.muted, lineHeight: 1.4 }}>{x.d}</div>
              </div>
            ))}
          </div>
        </div>
        {/* Visual: secure upload mock */}
        <SecureUploadMock mobile={mobile}/>
      </div>
    </section>
  );
}

function SecureUploadMock({ mobile }) {
  return (
    <div style={{
      position: 'relative',
      marginTop: mobile ? 32 : 0,
      padding: mobile ? 0 : 20,
    }}>
      <Card pad={28} style={{ boxShadow: '0 30px 80px rgba(11,27,59,0.10)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>Document upload</div>
          <Badge tone="mint" icon={Icon.lock}>End-to-end encrypted</Badge>
        </div>
        <div style={{
          padding: '24px 16px', borderRadius: 14,
          border: `2px dashed ${T.border}`,
          background: T.sand,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          textAlign: 'center',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 14,
            background: '#fff', border: `1px solid ${T.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.ink,
          }}>{Icon.upload}</div>
          <div style={{ fontSize: 14, fontWeight: 500, color: T.ink2 }}>Drop your Lohnsteuerbescheinigung</div>
          <div style={{ fontSize: 12, color: T.muted }}>PDF · JPG · PNG · up to 25 MB</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16 }}>
          {[
            { n: 'Lohnsteuerbescheinigung 2024.pdf', s: '342 KB', d: 'Encrypted' },
            { n: 'RSU statement Q4.pdf', s: '1.1 MB', d: 'Encrypted' },
          ].map((f, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 12px', borderRadius: 12,
              border: `1px solid ${T.borderSoft}`,
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8, background: T.surface,
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.ink2, flexShrink: 0,
              }}>{Icon.doc}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, color: T.ink, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.n}</div>
                <div style={{ fontSize: 11, color: T.muted, marginTop: 2 }}>{f.s} · <span style={{ color: T.mintInk }}>{f.d}</span></div>
              </div>
              <div style={{ color: T.mintInk }}>{Icon.check}</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

// ─── Section header helper ─────────────────────────────
function SectionHeader({ mobile, kicker, title, sub }) {
  return (
    <div style={{ maxWidth: 720 }}>
      <Badge tone="neutral">{kicker}</Badge>
      <h2 style={{
        fontSize: mobile ? 30 : 44, fontWeight: 600,
        letterSpacing: -1, lineHeight: 1.1,
        color: T.ink, margin: '14px 0 0', textWrap: 'pretty',
      }}>{title}</h2>
      {sub && (
        <p style={{ fontSize: 16, color: T.ink3, lineHeight: 1.55, marginTop: 14, marginBottom: 0 }}>
          {sub}
        </p>
      )}
    </div>
  );
}

// ─── Footer CTA ───────────────────────────────────────────
function FooterCTA({ mobile, go }) {
  return (
    <section style={{ padding: mobile ? '40px 20px 0' : '64px 56px 0' }}>
      <div style={{
        background: T.ink, color: '#fff',
        borderRadius: 28, padding: mobile ? '36px 24px' : '64px 56px',
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: '-30%', right: '-10%',
          width: 480, height: 480, borderRadius: 999,
          background: 'radial-gradient(circle, rgba(58,210,159,0.32), transparent 65%)',
        }}/>
        <div style={{ position: 'relative', maxWidth: 560 }}>
          <h2 style={{
            fontSize: mobile ? 30 : 44, fontWeight: 600,
            letterSpacing: -1, lineHeight: 1.1, margin: '0 0 14px',
            textWrap: 'pretty', color: '#fff',
          }}>Find out where you stand. It takes 6 minutes.</h2>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.75)', lineHeight: 1.55, margin: '0 0 28px' }}>
            No signup. No commitment. Just a structured view of your German tax situation.
          </p>
          <Button variant="mint" size="lg" iconRight={Icon.arrow} onClick={() => go('assessment')}>
            Start my tax check
          </Button>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────
function Footer({ mobile }) {
  return (
    <footer style={{
      padding: mobile ? '40px 20px 32px' : '56px 56px 32px',
      color: T.muted,
    }}>
      <div style={{
        display: mobile ? 'block' : 'grid',
        gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
        gap: mobile ? 24 : 40,
        marginBottom: 32,
      }}>
        <div>
          <Logo size={20}/>
          <p style={{ fontSize: 13, lineHeight: 1.6, marginTop: 14, maxWidth: 280 }}>
            The structured tax bridge between expats in Germany and verified advisors.
            Built in Berlin, hosted in Frankfurt.
          </p>
        </div>
        {[
          { t: 'For expats', l: ['Tax check', 'Find an advisor', 'Document checklist', 'Refund guide'] },
          { t: 'For advisors', l: ['Case files', 'Subscription tiers', 'Verification', 'API'] },
          { t: 'Company', l: ['Security', 'Privacy', 'Imprint · Impressum', 'Contact'] },
        ].map(col => (
          <div key={col.t} style={{ marginTop: mobile ? 24 : 0 }}>
            <div style={{
              fontFamily: T.mono, fontSize: 11, textTransform: 'uppercase',
              letterSpacing: 0.8, color: T.faint, marginBottom: 14,
            }}>{col.t}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.l.map(x => (
                <a key={x} style={{ fontSize: 14, color: T.ink2, textDecoration: 'none', cursor: 'pointer' }}>{x}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        paddingTop: 24, borderTop: `1px solid ${T.borderSoft}`,
        display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', alignItems: 'center',
        fontSize: 12,
      }}>
        <div>© 2026 Tax Bridge GmbH · Berlin & Frankfurt</div>
        <div style={{ display: 'flex', gap: 16 }}>
          <span>GDPR · DSGVO</span>
          <span>EU-only data residency</span>
          <span>v1.0</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HomeScreen });