// Landing page — Editorial headline + instant ALG1 estimator
// Adapted from the design's "Landing A" to fill the real viewport.

function Landing({ onStart }) {
  const { t, f } = useTheme();
  const [salary, setSalary] = React.useState(65000);
  const [years, setYears] = React.useState(6);
  const [kids, setKids] = React.useState(0);
  const fakeP = { salary, years, age: 35, children: kids, reason: 'gekündigt' };
  const est = computeAlg1(fakeP);

  return (
    <div className="paper-grain" style={{
      minHeight: '100vh', background: t.paper, color: t.ink, position: 'relative',
      fontFamily: f.sans, overflow: 'hidden',
    }}>
      {/* top bar */}
      <div style={{ padding: '22px clamp(24px, 5vw, 56px)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 2, maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ fontFamily: f.display, fontSize: 22, fontWeight: f.displayWeight, letterSpacing: f.displayTracking }}>
          jobless<span style={{ color: t.accent }}>.</span>team
        </div>
        <div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
          <a style={{ fontSize: 13, color: t.ink2, textDecoration: 'none', display: 'none' }} className="nav-hide">Wie es funktioniert</a>
          <a style={{ fontSize: 13, color: t.ink2, textDecoration: 'none', display: 'none' }} className="nav-hide">ALG1-Rechner</a>
          <a style={{ fontSize: 13, color: t.ink2, textDecoration: 'none', display: 'none' }} className="nav-hide">Umschulung</a>
          <Btn size="sm" variant="ghost">Anmelden</Btn>
        </div>
      </div>

      <div className="landing-grid" style={{
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 'clamp(32px, 5vw, 64px)',
        padding: '40px clamp(24px, 5vw, 56px) 96px', position: 'relative', zIndex: 2,
        maxWidth: 1440, margin: '0 auto',
      }}>
        {/* left — editorial headline */}
        <div>
          <Eyebrow style={{ marginBottom: 24 }}>Ausgabe №01 · Für Menschen ohne Job in Deutschland</Eyebrow>
          <Display size={88} style={{ marginBottom: 8 }}>
            Gestern Kollege.<br/>
            Heute <em style={{ fontStyle: 'italic', color: t.accent }}>Fall</em>&nbsp;Nummer&nbsp;<Mono size={72} style={{ color: t.accent, fontWeight: 400 }}>43781.</Mono>
          </Display>
          <Rule style={{ margin: '32px 0 28px', maxWidth: 520 }} />
          <Body size={18} style={{ maxWidth: 560, color: t.ink2 }}>
            Die Arbeitsagentur gibt Ihnen einen Termin in sechs Wochen.<br/>
            Wir geben Ihnen in <em>drei Minuten</em> eine Antwort auf die Frage,
            die Sie seit gestern nicht schlafen lässt:
            <span style={{ color: t.ink, fontWeight: 500 }}> Wie viel Geld habe ich, wie lange?</span>
          </Body>

          <div style={{ marginTop: 48, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
            <Btn size="lg" variant="primary" onClick={onStart}>Meine Lage prüfen →</Btn>
            <Mono size={11}>kostenlos · ohne Anmeldung · 3 min</Mono>
          </div>

          <div style={{ marginTop: 72, display: 'flex', gap: 40, paddingTop: 24, borderTop: `1px solid ${t.rule}`, maxWidth: 640, flexWrap: 'wrap' }}>
            {[
              { n: '28.412', l: 'Menschen beraten' },
              { n: '€ 3.840', l: 'mittlerer ALG1-Anspruch' },
              { n: '64 %', l: 'finden binnen 6 Monaten' },
            ].map((x, i) => (
              <div key={i}>
                <div style={{ fontFamily: f.display, fontSize: 28, fontWeight: f.displayWeight, color: t.ink }}>{x.n}</div>
                <Mono size={10}>{x.l}</Mono>
              </div>
            ))}
          </div>
        </div>

        {/* right — instant estimator */}
        <div style={{
          background: t.paper2, border: `1px solid ${t.rule}`, padding: 32,
          position: 'relative', alignSelf: 'start',
        }}>
          <Eyebrow>Sofort-Schätzung</Eyebrow>
          <div style={{ fontFamily: f.display, fontSize: 28, fontWeight: f.displayWeight, marginTop: 8, marginBottom: 4, color: t.ink }}>
            Ihr ALG1, in Echtzeit.
          </div>
          <Mono size={10}>ohne Anmeldung · Richtwert nach § 149 SGB III</Mono>

          <div style={{ marginTop: 28 }}>
            <Label>Brutto / Jahr</Label>
            <SliderRow value={salary} min={20000} max={180000} step={1000}
              onChange={setSalary} fmt={v => fmtEUR(v)} />
            <Label style={{ marginTop: 18 }}>Sozialversicherungspflichtig beschäftigt</Label>
            <SliderRow value={years} min={0.5} max={30} step={0.5}
              onChange={setYears} fmt={v => `${v} Jahre`} />
            <Label style={{ marginTop: 18 }}>Kinder im Haushalt</Label>
            <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
              {[0,1,2,3].map(n => (
                <button key={n} onClick={() => setKids(n)} style={{
                  flex: 1, padding: '10px 0', border: `1px solid ${t.rule}`,
                  background: kids === n ? t.ink : 'transparent',
                  color: kids === n ? t.paper : t.ink2,
                  fontFamily: f.sans, fontSize: 13, cursor: 'pointer',
                }}>{n}</button>
              ))}
            </div>
          </div>

          <Rule style={{ margin: '28px 0 20px' }} />

          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
            <Mono size={10}>Pro Monat, etwa</Mono>
            <span style={{
              fontFamily: f.display, fontSize: 44, fontWeight: f.displayWeight,
              letterSpacing: f.displayTracking, color: t.accent,
            }}>{fmtEUR(est.algMonat)}</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
            <Mono size={10}>für ~{est.months} Monate</Mono>
            <Mono size={10}>Σ {fmtEUR(est.total)}</Mono>
          </div>

          <Btn variant="accent" style={{ marginTop: 24, width: '100%', justifyContent: 'center' }} onClick={onStart}>
            Vollständige Analyse starten →
          </Btn>
          <Mono size={9} style={{ display: 'block', marginTop: 10, textAlign: 'center' }}>
            Mit Sperrzeit-Check · Abfindungs-Rechner · Bildungsgutschein
          </Mono>
        </div>
      </div>

      {/* footer rule with folios */}
      <div style={{ padding: '22px clamp(24px, 5vw, 56px)', display: 'flex', justifyContent: 'space-between', borderTop: `1px solid ${t.rule}`, maxWidth: 1440, margin: '0 auto' }}>
        <Mono size={10}>jobless.team — №01 · April 2026</Mono>
        <Mono size={10}>Keine Rechtsberatung. Eine Orientierung.</Mono>
      </div>

      <style>{`
        @media (min-width: 900px) {
          .nav-hide { display: inline !important; }
        }
        @media (max-width: 900px) {
          .landing-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function Label({ children, style }) {
  const { t, f } = useTheme();
  return <div style={{ fontFamily: f.sans, fontSize: 12, color: t.muted, marginBottom: 6, ...style }}>{children}</div>;
}

function SliderRow({ value, min, max, step = 1, onChange, fmt }) {
  const { t, f } = useTheme();
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
        <span style={{ fontFamily: f.display, fontSize: 22, fontWeight: f.displayWeight, color: t.ink }}>{fmt(value)}</span>
        <Mono size={10}>{fmtNum(min)} – {fmtNum(max)}</Mono>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => onChange(parseFloat(e.target.value))}
        style={{ width: '100%', accentColor: t.accent }} />
    </div>
  );
}

Object.assign(window, { Landing, Label, SliderRow });
