const { Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, Alert, Icon, SourceTag, Spinner } = window.BeyonddoDesignSystem_2c6c3a;

const PATH_ICONS = ['compass', 'graduation-cap', 'briefcase', 'landmark'];
const PATH_ROUTES = ['/karriere', '/weiterbildung', '/jobs', '/international'];
const LATENCY = [12, 128];
const ORG_STATS = ['12', '31', '8', '14'];

const HERO_CSS = [
  '.bd-hero-grid{grid-template-columns:minmax(0,1fr)}',
  '@media(min-width:64rem){.bd-hero-grid{grid-template-columns:minmax(0,1fr) minmax(520px,1.15fr)}}',
  '@keyframes bd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}',
  '.bd-float{animation:bd-float 6s ease-in-out infinite}',
  '.bd-float-2{animation-duration:7.5s;animation-delay:-2s}',
  '.bd-float-3{animation-duration:8.5s;animation-delay:-4s}',
  '.bd-herosearch input:focus,.bd-herosearch input:focus-visible{outline:none!important;box-shadow:none!important;border:0!important}',
].join('');

function HomeScreen({ onNavigate, t, tSrc }) {
  const h = t.home;
  React.useEffect(() => {
    if (document.getElementById('bd-hero-css')) return;
    const el = document.createElement('style');
    el.id = 'bd-hero-css';
    el.textContent = HERO_CSS;
    document.head.appendChild(el);
  }, []);
  return (
    <main>
      <section style={{ position: 'relative', background: 'var(--wash-hero)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 120, background: 'linear-gradient(180deg, var(--background) 0%, rgba(253,251,248,0) 100%)', pointerEvents: 'none', zIndex: 1 }} />
        <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 160, background: 'linear-gradient(180deg, rgba(253,251,248,0) 0%, var(--background) 100%)', pointerEvents: 'none', zIndex: 1 }} />
        <div className="bd-hero-grid" style={{ position: 'relative', zIndex: 2, maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-16) clamp(1rem, 4vw, 5rem) var(--space-20)', display: 'grid', gap: 'var(--space-16)', alignItems: 'center' }}>
          <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-8)', alignItems: 'flex-start' }}>
            <h1 style={{ fontSize: 'clamp(2.5rem, 4.6vw, var(--text-display-lg))', fontWeight: 800, letterSpacing: '-0.04em', lineHeight: 1.02, margin: 0 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)', flexWrap: 'nowrap' }}>
                {h.heroLines[0]}
                <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('chancen'); }} aria-label={h.ctaSecondary}
                  style={{ display: 'grid', placeItems: 'center', width: '2.1em', height: '1.05em', borderRadius: 'var(--radius-pill)', border: '2px solid var(--ink-900)', textDecoration: 'none', flex: 'none' }}>
                  <Icon name="arrow-right" size={30} style={{ color: 'var(--ink-900)', width: '0.55em', height: '0.55em' }} />
                </a>
              </span>
              <span style={{ display: 'block' }}>{h.heroLines[1]}</span>
              <span style={{ display: 'block' }}>{h.heroLines[2]}</span>
            </h1>
            <p style={{ fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-muted)', maxWidth: '34ch', margin: 0 }}>{h.heroSub}</p>
            <form className="bd-herosearch" onSubmit={(e) => { e.preventDefault(); onNavigate('chancen'); }}
              style={{ width: '100%', maxWidth: 620, minWidth: 0, display: 'flex', alignItems: 'center', gap: 'var(--space-4)', background: 'var(--surface)', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-lift)', padding: '10px 12px 10px var(--space-8)' }}>
              <input aria-label={h.searchRole} placeholder={h.searchRole}
                style={{ flex: 1, minWidth: 0, border: 0, outline: 'none', boxShadow: 'none', WebkitTapHighlightColor: 'transparent', background: 'transparent', fontFamily: 'var(--font-core)', fontSize: 'var(--text-body)', color: 'var(--text-heading)' }} />
              <span aria-hidden="true" style={{ width: 1, height: 30, background: 'var(--border-default)', flex: 'none' }} />
              <input aria-label={h.searchPlace} placeholder={h.searchPlace}
                style={{ flex: 1, minWidth: 0, border: 0, outline: 'none', boxShadow: 'none', WebkitTapHighlightColor: 'transparent', background: 'transparent', fontFamily: 'var(--font-core)', fontSize: 'var(--text-body)', color: 'var(--text-heading)' }} />
              <button type="submit" aria-label={h.searchAria}
                style={{ flex: 'none', width: 56, height: 56, borderRadius: 'var(--radius-pill)', border: 0, background: 'var(--ink-900)', cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
                <Icon name="search" size={22} style={{ color: '#fff' }} />
              </button>
            </form>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{h.ctaNote}</span>
          </div>

          <div style={{ position: 'relative', minWidth: 0, minHeight: 700, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', gap: 'clamp(var(--space-3), 1.6vw, var(--space-5))' }}>
            {[
              { bg: 'var(--sand-300)', ht: 420, top: 0, cls: 'bd-float' },
              { bg: 'var(--verified-500)', ht: 400, top: 190, cls: 'bd-float bd-float-2' },
              { bg: 'var(--primary)', ht: 440, top: 80, cls: 'bd-float bd-float-3' },
            ].map((o, oi) => (
              <div key={oi} className={o.cls} style={{ position: 'relative', flex: '1 1 0', minWidth: 0, maxWidth: 260, height: o.ht, marginTop: o.top, borderRadius: '999px 999px 999px 999px', background: o.bg, overflow: 'hidden', boxShadow: 'var(--shadow-overlay)' }}>
                <image-slot id={'bd-hero-portrait-' + (oi + 1)} shape="rect" fit="cover" src={'../../assets/hero-portrait-' + (oi + 1) + '.png'} placeholder={h.heroSlots[oi]}></image-slot>
              </div>
            ))}

            {[
              { i: 'shield-check', tone: 'light', pos: { right: 0, top: 8 }, cls: 'bd-float', accent: 'var(--verified-500)', ci: 0 },
              { i: 'search', tone: 'dark', pos: { left: '30%', top: 96 }, cls: 'bd-float bd-float-2', accent: '#fff', ci: 1 },
              { i: 'graduation-cap', tone: 'light', pos: { left: 0, bottom: 40 }, cls: 'bd-float bd-float-3', accent: 'var(--primary)', ci: 2 },
            ].map((c) => (
              <span key={c.ci} className={c.cls} style={{ position: 'absolute', ...c.pos, zIndex: 5, width: 132, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, textAlign: 'center', background: c.tone === 'dark' ? 'var(--ink-900)' : 'var(--surface)', color: c.tone === 'dark' ? 'var(--sand-50)' : 'var(--text-heading)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-overlay)', padding: 'var(--space-4) var(--space-3)', fontSize: 'var(--text-xs)', fontWeight: 600, lineHeight: 1.25 }}>
                <Icon name={c.i} size={18} style={{ color: c.accent }} />{h.heroChips[c.ci]}
              </span>
            ))}
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-20) clamp(1rem, 4vw, 5rem)', display: 'flex', flexDirection: 'column', gap: 'var(--space-10)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', maxWidth: '60ch' }}>
          <Eyebrow>{h.pathsEyebrow}</Eyebrow>
          <h2 style={{ fontSize: 'var(--text-h1)' }}>{h.pathsTitle}</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-6)' }}>
          {h.paths.map((p, pi) => (
            <Card key={p.title} interactive onClick={() => onNavigate('chancen')}>
              <CardContent style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                <span style={{ width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--primary-tint)', display: 'grid', placeItems: 'center' }}>
                  <Icon name={PATH_ICONS[pi]} size={20} style={{ color: 'var(--rose-700)' }} />
                </span>
                <h3 style={{ fontSize: 'var(--text-h3)' }}>{p.title}</h3>
                <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', lineHeight: 'var(--leading-relaxed)' }}>{p.body}</p>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>{PATH_ROUTES[pi]}</span>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--background-alt)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-20) clamp(1rem, 4vw, 5rem)', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-16)', alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <Eyebrow>{h.sourceEyebrow}</Eyebrow>
            <h2 style={{ fontSize: 'var(--text-h1)' }}>{h.sourceTitle}</h2>
            <p style={{ fontSize: 'var(--text-body-lg)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', maxWidth: '48ch' }}>
              {h.sourceBody}
            </p>
            <Button variant="outline" onClick={() => onNavigate('trust')} iconRight={<Icon name="arrow-right" size={16} />}>{h.sourceCta}</Button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            {[
              ['OFFICIAL_RESOURCE', 'Bundesagentur für Arbeit', 'official'],
              ['BEYONDDO_PARTNER', 'Logistik-Akademie Nord', 'verified'],
              ['EXTERNAL_LINK', 'arbeitsagentur.de', 'external'],
            ].map(([src, org, tone], ri) => (
              <Card key={org} tone="flat">
                <CardContent style={{ padding: 'var(--space-5) var(--space-6)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)' }}>
                  <span style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-heading)' }}>{h.sourceRows[ri]}</span>
                    <SourceTag source={src} name={org} label={tSrc[src]} />
                  </span>
                  <Badge tone={tone}>{tSrc[src]}</Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-site)', margin: '0 auto', padding: 'var(--space-20) clamp(1rem, 4vw, 5rem)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-10)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
          <Eyebrow>{h.orgEyebrow}</Eyebrow>
          <h2 style={{ fontSize: 'var(--text-h1)' }}>{h.orgTitle}</h2>
          <p style={{ fontSize: 'var(--text-body)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', maxWidth: '46ch' }}>
            {h.orgBody}
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-6)' }}>
            {h.orgStats.map((l, si) => (
              <span key={l} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span className="bd-numeric" style={{ fontSize: 'var(--text-h2)', fontWeight: 500, color: 'var(--text-heading)' }}>{ORG_STATS[si]}</span>
                <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{l}</span>
              </span>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
            <Button variant="secondary">{h.orgCta1}</Button>
            <Button variant="outline">{h.orgCta2}</Button>
          </div>
        </div>
        <Card>
          <CardHeader>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-3)' }}>
              <CardTitle as="h2">{h.statusTitle}</CardTitle>
              <Badge tone="verified">{h.statusOk}</Badge>
            </div>
            <CardDescription>{h.statusDesc}</CardDescription>
          </CardHeader>
          <CardContent>
            <dl style={{ margin: 0 }}>
              {h.statusRows.map((label, ri) => (
                <div key={label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)', padding: 'var(--space-3) 0', borderTop: '1px solid var(--border-subtle)' }}>
                  <dt style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{label}</dt>
                  <dd style={{ margin: 0, display: 'flex', alignItems: 'center', gap: 'var(--space-3)', fontSize: 'var(--text-sm)' }}>
                    <span className="bd-numeric" style={{ color: 'var(--text-muted)' }}>{LATENCY[ri]} ms</span>
                    <Badge tone="verified">{h.statusOk}</Badge>
                  </dd>
                </div>
              ))}
            </dl>
            <div style={{ marginTop: 'var(--space-5)' }}>
              <Alert tone="info" title={h.phaseTitle}>{h.phaseBody}</Alert>
            </div>
          </CardContent>
        </Card>
      </section>
    </main>
  );
}

Object.assign(window, { HomeScreen });