// SloppyUniverse Landing — full Manifesto-in-Motion build
// All sections live here. CSS is in the host HTML.

function App() {
  // Single-language Landing: 'de' oder 'en'. Default aus localStorage,
  // sonst Browser-Sprache, sonst 'de'. Toggle in der Topbar.
  const [lang, setLang] = React.useState(() => {
    try {
      var saved = localStorage.getItem('su-landing-lang');
      if (saved === 'de' || saved === 'en') return saved;
      var nav = (navigator.language || 'de').toLowerCase();
      return nav.startsWith('en') ? 'en' : 'de';
    } catch (e) { return 'de'; }
  });
  React.useEffect(() => {
    try { localStorage.setItem('su-landing-lang', lang); } catch (e) {}
    document.documentElement.lang = lang;
  }, [lang]);
  const motion = true;
  const tilt = 0.7;  // weniger aggressives Magazine-Tilt
  const bg = "navy";

  React.useEffect(() => {
    document.documentElement.style.setProperty('--bg', bg === 'navy' ? '#0a0d2e' : '#0d0d0d');
    document.documentElement.style.setProperty('--bg-alt', bg === 'navy' ? '#101537' : '#1a1a1a');
    document.documentElement.style.setProperty('--tilt', `${tilt}`);
    document.documentElement.style.setProperty('--motion', motion ? '1' : '0');
  }, []);

  return (
    <div className="page" data-motion={motion ? 'on' : 'off'} data-lang={lang}>
      <Topbar lang={lang} setLang={setLang}/>
      <Hero lang={lang}/>
      <TickerBand text="★ SLOPPY ★ UNIVERSE ★ NO ★ ENTERPRISE ★ NO ★ SALES-CALL ★ JUST ★ TOOLS ★ THAT ★ TALK ★ " color="green" tiltDir={-1}/>
      <Modules lang={lang}/>
      <BetaBanner lang={lang}/>
      <Manifesto lang={lang}/>
      <FAQ lang={lang}/>
      <LoginCTA lang={lang}/>
      <FooterWall lang={lang}/>
    </div>
  );
}

// ─── LANGUAGE HELPER ────────────────────────────────────────────────────────
// lang prop = 'de' oder 'en'. Single-language Render — keine Doppelausgabe
// mehr (Accessibility + Locale-Erkennung). Sprache wird in der Topbar
// umgeschaltet (Pill ist clickable).
function Bi({en, de, lang, sep = " · ", className, asBlock}) {
  const text = lang === 'en' ? en : de;
  if (asBlock) {
    return <div className={className}>{text}</div>;
  }
  return <span className={className}>{text}</span>;
}
function pickBi(m, lang) {
  return lang === 'en' ? m.en : m.de;
}
function pickBoth(m, lang) {
  // Backwards-compat fuer Aufrufer die secondary mitlesen — beides gleich.
  const pri = lang === 'en' ? m.en : m.de;
  return { primary: pri, secondary: pri };
}

// ─── TOPBAR ──────────────────────────────────────────────────────────────────
function Topbar({lang, setLang}) {
  return (
    <div className="topbar">
      <div className="topbar-left">
        <UmbrellaLogo size={32} idPrefix="nav-logo" />
        <strong className="brand">SLOPPYUNIVERSE</strong>
      </div>
      <div className="topbar-mid">
        {SU_MODULES_DATA.map(m => {
          const isLive = m.status === 'beta' || m.status === 'live';
          return isLive ? (
            <a key={m.key} href={`#${m.key}`} className="nav-pair"
               style={{'--c': m.color}}>{m.pair}</a>
          ) : (
            <span key={m.key} className="nav-pair nav-pair-soon"
               style={{'--c': m.color, opacity: 0.45, cursor: 'default'}}
               title={lang === 'en' ? 'Coming soon' : 'Kommt bald'}>{m.pair}</span>
          );
        })}
      </div>
      <div className="topbar-right">
        <button type="button" className="lang-pill"
                onClick={() => setLang(lang === 'de' ? 'en' : 'de')}
                aria-label={lang === 'en' ? 'Switch to German' : 'Auf Englisch umschalten'}
                style={{background:'transparent', border:'1px solid currentColor',
                          padding:'4px 10px', borderRadius:'999px',
                          color:'inherit', cursor:'pointer', font:'inherit'}}>
          {lang === 'de' ? 'DE · EN' : 'EN · DE'}
        </button>
        <a className="nav-login" href="https://id.sloppyuniverse.com/login">LOGIN ↗</a>
      </div>
    </div>
  );
}

// ─── HERO ────────────────────────────────────────────────────────────────────
function Hero({lang}) {
  return (
    <section className="hero">
      <div className="hero-tag">
        <span className="dot-pulse" />
        <Bi lang={lang}
            de="v1.0 · Wachsendes Universum."
            en="v1.0 · A growing universe."/>
      </div>
      <h1 className="h1">
        <span className="word1">{SU_HERO.word1}</span>
        <span className="word2">
          {SU_HERO.word2.split('').map((ch, i) => (
            <span key={i} className={`l l${i+1}`}>{ch}</span>
          ))}
        </span>
      </h1>
      <div className="strap">
        <Bi lang={lang} asBlock
            de={SU_HERO.de_strap}
            en={SU_HERO.en_strap}/>
      </div>
      <div className="cta-row">
        <a className="cta primary" href="https://id.sloppyuniverse.com/login">
          <Bi lang={lang} de="Anmelden" en="Sign in" sep=" · "/>
          <span className="arrow">→</span>
        </a>
        <a className="cta ghost" href="#manifest">
          <Bi lang={lang} de="Manifest lesen" en="Read the manifest" sep=" · "/>
        </a>
      </div>
      <div className="hero-stamp">
        <div>SLOPPY</div>
        <div>BY</div>
        <div>DESIGN</div>
        <small>EST. 2026</small>
      </div>
    </section>
  );
}

// ─── TICKER ──────────────────────────────────────────────────────────────────
function TickerBand({text, color, tiltDir}) {
  // Repeat text enough to fill 2x viewport for seamless loop
  const filled = text.repeat(6);
  return (
    <div className={`ticker ticker-${color}`} style={{'--tilt-dir': tiltDir}}>
      <div className="ticker-track">
        <span>{filled}</span>
        <span aria-hidden>{filled}</span>
      </div>
    </div>
  );
}

// ─── MODULES ─────────────────────────────────────────────────────────────────
function Modules({lang}) {
  return (
    <section className="modules" id="modules">
      <div className="section-head">
        <div className="kicker">// 01 · MODULE</div>
        <h2 className="section-h2">
          <Bi lang={lang}
              de="Werkzeuge,"
              en="Tools that"/>
          <br/>
          <span className="strike">
            <Bi lang={lang} de="die nicht streiten." en="don't fight each other."/>
          </span>
          <br/>
          <em className="accent-yellow">
            <Bi lang={lang} de="Ein Universum." en="One universe."/>
          </em>
        </h2>
      </div>

      <div className="modules-row">
        {SU_MODULES_DATA.map((m, i) => {
          const copy = pickBoth(m, lang);
          // Live + beta-Module verlinken auf das tatsaechliche Modul. SOON-
          // Module nur auf den In-Page-Anchor (es gibt noch keine Site).
          const moduleUrls = {
            pay:  'https://sloppypay.com/',
            scan: 'https://sloppyscan.com/',
            fix:  'https://sloppyfix.com/',
            plan: 'https://sloppyplan.com/',
            rent: 'https://sloppyrent.com/',
          };
          const isClickable = m.status === 'beta' || m.status === 'live';
          const href = isClickable ? moduleUrls[m.key] : `#${m.key}`;
          const target = isClickable ? '_blank' : undefined;
          const rel = isClickable ? 'noopener noreferrer' : undefined;
          return (
            <a key={m.key} href={href} target={target} rel={rel}
               className={`mod-card mod-${m.key} mod-status-${m.status}`} id={m.key}
               style={{'--c': m.color, '--ct': m.tint, '--idx': i}}>
              {m.status !== 'live' && (
                <div className={`mod-status-badge status-${m.status}`}>
                  {m.status === 'beta' ? 'BETA' : 'SOON · BALD'}
                </div>
              )}
              <div className="mod-icon">
                <img src={`/icons/module-${m.key}.svg?v=2`} alt={m.name}
                     width="72" height="72"/>
              </div>
              <h3 className="mod-name">{m.name}</h3>
              <div className="mod-tag">{copy.primary.tag}<span className="bi-secondary"> · {copy.secondary.tag}</span></div>
              <div className="mod-claim">{copy.primary.claim}</div>
              <div className="mod-claim-2">{copy.secondary.claim}</div>
              <div className="mod-blurb">{copy.primary.blurb}</div>
              <div className="mod-blurb-2">{copy.secondary.blurb}</div>
              <div className="mod-arrow">{isClickable ? '↗' : '→'}</div>
            </a>
          );
        })}
      </div>
    </section>
  );
}

// ─── BETA BANNER ─────────────────────────────────────────────────────────────
function BetaBanner({lang}) {
  const primary = lang === 'de' ? SU_BETA.de : SU_BETA.en;
  const secondary = lang === 'de' ? SU_BETA.en : SU_BETA.de;
  return (
    <section className="beta-banner" id="beta">
      <div className="beta-stripe">
        <div className="beta-badge-big">{primary.badge}</div>
        <div className="beta-headline">
          <div className="beta-title">{primary.title}</div>
          <div className="beta-title-2">{secondary.title}</div>
        </div>
      </div>
      <div className="beta-body">
        <div className="beta-col">
          <div className="beta-sub">{primary.sub}</div>
          <div className="beta-sub-2">{secondary.sub}</div>
          <p className="beta-text">{primary.body}</p>
          <p className="beta-text-2">{secondary.body}</p>
        </div>
        <div className="beta-col">
          <div className="beta-catch">
            <span className="beta-catch-icon">⚠</span>
            <div>
              <div className="beta-catch-h">{primary.catch}</div>
              <div className="beta-catch-h-2">{secondary.catch}</div>
            </div>
          </div>
          <ul className="beta-list">
            {primary.points.map((p, i) => (
              <li key={i}>
                <span className="beta-bullet">·</span>
                <div>
                  <div>{p}</div>
                  <div className="beta-list-2">{secondary.points[i]}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─── MANIFESTO ───────────────────────────────────────────────────────────────
function Manifesto({lang}) {
  return (
    <section className="manifesto" id="manifest">
      <div className="section-head">
        <div className="kicker">// 02 · WARUM SLOPPY · WHY SLOPPY</div>
        <h2 className="manifesto-h2">
          <span className="strike">
            <Bi lang={lang} de="Enterprise-Software." en="Enterprise software."/>
          </span>
          <br/>
          <em className="accent-yellow">
            <Bi lang={lang}
                de="Software für Menschen,"
                en="Software for humans"/>
          </em>
          <br/>
          <Bi lang={lang}
              de="die Häuser besitzen."
              en="who own buildings."/>
        </h2>
      </div>
      <div className="manifest-list">
        {SU_MANIFESTO.map((line, i) => {
          const copy = pickBoth(line, lang);
          return (
            <div key={i} className="manifest-item" style={{'--rot': `${(i%2?1:-1)*0.4}deg`}}>
              <div className="manifest-num">{String(i+1).padStart(2,'0')}</div>
              <div className="manifest-body">
                <div className="manifest-primary">{copy.primary}</div>
                <div className="manifest-secondary">{copy.secondary}</div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─── DEMO ────────────────────────────────────────────────────────────────────
function Demo({lang}) {
  return (
    <section className="demo" id="demo">
      <div className="section-head">
        <div className="kicker">// 03 · DEMO · KEIN PDF · NO PDF</div>
        <h2 className="section-h2">
          <Bi lang={lang} de="Echte Screens." en="Real screens."/>
          <br/>
          <em className="accent-yellow">
            <Bi lang={lang} de="Kein Moodboard." en="No moodboard."/>
          </em>
        </h2>
      </div>
      <div className="demo-grid">
        <DemoScreen size="big" mod="scan" lang={lang}/>
        <DemoScreen size="med" mod="fix" lang={lang}/>
        <DemoScreen size="med" mod="pay" lang={lang}/>
        <DemoScreen size="med" mod="rent" lang={lang}/>
        <DemoScreen size="big" mod="plan" lang={lang}/>
      </div>
    </section>
  );
}

function DemoScreen({size, mod, lang}) {
  const m = SU_MODULES_DATA.find(x => x.key === mod);
  return (
    <div className={`screen screen-${size} screen-${mod}`} style={{'--c': m.color, '--ct': m.tint}}>
      <div className="screen-chrome">
        <span className="cdot r"/><span className="cdot y"/><span className="cdot g"/>
        <div className="screen-title">
          <img src={`/icons/module-${m.key}.svg?v=2`} alt={m.name} width="20" height="20" />
          <span>{m.name}</span>
        </div>
      </div>
      <div className="screen-body">
        {mod === 'scan' && <ScanContent lang={lang}/>}
        {mod === 'fix' && <FixContent lang={lang}/>}
        {mod === 'pay' && <PayContent lang={lang}/>}
        {mod === 'rent' && <RentContent lang={lang}/>}
        {mod === 'plan' && <PlanContent lang={lang}/>}
      </div>
    </div>
  );
}

function ScanContent({lang}) {
  const rows = [
    { time:'09:14', who:'L. Becker',         status: lang==='de'?'eingecheckt':'checked in',  state:'ok' },
    { time:'09:32', who:'Handwerker · Tech', status: lang==='de'?'eingecheckt':'checked in',  state:'ok' },
    { time:'10:01', who:lang==='de'?'Mietinteressent':'Prospective tenant', status: lang==='de'?'wartet':'waiting', state:'pend' },
    { time:'10:18', who:lang==='de'?'Ablesung Wasser':'Water meter reading', status: lang==='de'?'eingecheckt':'checked in', state:'ok' },
    { time:'11:02', who:lang==='de'?'Möbel-Lieferung':'Furniture delivery', status: lang==='de'?'wartet':'waiting', state:'pend' },
  ];
  return (
    <>
      <div className="screen-h">
        <Bi lang={lang} de="Heute · Today" en="Today · Heute" sep=""/>
      </div>
      {rows.map((r,i) => (
        <div key={i} className="screen-row">
          <span className="mono">{r.time}</span>
          <span className="who">{r.who}</span>
          <span className={`status status-${r.state}`}>{r.status}</span>
        </div>
      ))}
      <div className="screen-foot">
        <Bi lang={lang} de="5 von 12 Besuchern" en="5 of 12 visitors"/>
      </div>
    </>
  );
}
function FixContent({lang}) {
  return (
    <>
      <div className="screen-stat-lbl">
        <Bi lang={lang} de="Offene Tickets" en="Open tickets"/>
      </div>
      <div className="screen-num" style={{color: 'var(--ct)'}}>23</div>
      <div className="screen-bar"><div style={{width: '72%', background: 'var(--c)'}}/></div>
      <div className="screen-meta">
        <Bi lang={lang} de="4 dringend · in <24h" en="4 urgent · in <24h"/>
      </div>
      <div className="screen-list-mini">
        <div>· Heizung 3.OG kalt</div>
        <div>· Aufzug B steht</div>
        <div>· Wasserhahn Whg. 14</div>
      </div>
    </>
  );
}
function PayContent({lang}) {
  return (
    <>
      <div className="screen-stat-lbl">
        <Bi lang={lang} de="Buchungen · Bookings" en="Bookings · Buchungen" sep=""/>
      </div>
      <div className="screen-num" style={{color: 'var(--ct)'}}>247</div>
      <div className="screen-bar"><div style={{width: '78%', background: 'var(--c)'}}/></div>
      <div className="screen-meta">
        <Bi lang={lang} de="OCR-erfasst · KW 38" en="OCR-captured · W38"/>
      </div>
      <div className="screen-list-mini">
        <div>· 12 <Bi lang={lang} de="Gewerke aktiv" en="trades active" sep=""/></div>
        <div>· 3 <Bi lang={lang} de="Nachträge offen" en="change orders open" sep=""/></div>
      </div>
    </>
  );
}
function RentContent({lang}) {
  return (
    <>
      <div className="screen-stat-lbl">
        <Bi lang={lang} de="Belegung · Occupancy" en="Occupancy · Belegung" sep=""/>
      </div>
      <div className="screen-num" style={{color: 'var(--ct)'}}>96%</div>
      <div className="screen-bar"><div style={{width: '96%', background: 'var(--c)'}}/></div>
      <div className="screen-meta">
        <Bi lang={lang} de="2 Whg. frei · ab Jan" en="2 units free · from Jan"/>
      </div>
      <div className="screen-list-mini">
        <div>· 142 <Bi lang={lang} de="Mieter aktiv" en="active tenants" sep=""/></div>
        <div>· 6 <Bi lang={lang} de="Verträge laufen aus" en="contracts ending" sep=""/></div>
      </div>
    </>
  );
}
function PlanContent({lang}) {
  return (
    <>
      <div className="screen-h">
        <Bi lang={lang} de="Etage 03 · Lindenstr. 47" en="Floor 03 · Lindenstr. 47" sep=""/>
      </div>
      <div className="floor-plan">
        <svg viewBox="0 0 320 200" width="100%" preserveAspectRatio="xMidYMid meet" fontFamily="JetBrains Mono">
          {/* hatched exterior wall */}
          <defs>
            <pattern id="hatch" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
              <line x1="0" y1="0" x2="0" y2="4" stroke="var(--ct)" strokeWidth="0.6"/>
            </pattern>
          </defs>

          {/* outer wall thick */}
          <rect x="10" y="10" width="300" height="180" fill="none" stroke="var(--ct)" strokeWidth="3"/>
          <rect x="10" y="10" width="300" height="180" fill="url(#hatch)" opacity="0.18"/>

          {/* interior walls */}
          <line x1="130" y1="10" x2="130" y2="110" stroke="var(--ct)" strokeWidth="2"/>
          <line x1="10" y1="110" x2="220" y2="110" stroke="var(--ct)" strokeWidth="2"/>
          <line x1="220" y1="10" x2="220" y2="190" stroke="var(--ct)" strokeWidth="2"/>
          <line x1="170" y1="110" x2="170" y2="190" stroke="var(--ct)" strokeWidth="2"/>

          {/* doors (arc + gap) */}
          <g stroke="var(--ct)" strokeWidth="1" fill="none">
            <path d="M 70 110 A 18 18 0 0 1 88 92" />
            <line x1="70" y1="110" x2="88" y2="110" stroke="var(--bg)" strokeWidth="3"/>
            <path d="M 195 110 A 18 18 0 0 1 213 92" />
            <line x1="195" y1="110" x2="213" y2="110" stroke="var(--bg)" strokeWidth="3"/>
            <path d="M 130 50 A 16 16 0 0 1 146 66" />
            <line x1="130" y1="50" x2="130" y2="66" stroke="var(--bg)" strokeWidth="3"/>
          </g>

          {/* windows */}
          <g stroke="var(--ct)" strokeWidth="1.2">
            <line x1="40" y1="10" x2="80" y2="10" stroke="var(--bg)" strokeWidth="3"/>
            <line x1="40" y1="10" x2="80" y2="10"/>
            <line x1="40" y1="13" x2="80" y2="13"/>
            <line x1="170" y1="10" x2="200" y2="10" stroke="var(--bg)" strokeWidth="3"/>
            <line x1="170" y1="10" x2="200" y2="10"/>
            <line x1="170" y1="13" x2="200" y2="13"/>
            <line x1="240" y1="10" x2="290" y2="10" stroke="var(--bg)" strokeWidth="3"/>
            <line x1="240" y1="10" x2="290" y2="10"/>
            <line x1="240" y1="13" x2="290" y2="13"/>
            <line x1="50" y1="190" x2="100" y2="190" stroke="var(--bg)" strokeWidth="3"/>
            <line x1="50" y1="187" x2="100" y2="187"/>
            <line x1="50" y1="190" x2="100" y2="190"/>
            <line x1="240" y1="190" x2="290" y2="190" stroke="var(--bg)" strokeWidth="3"/>
            <line x1="240" y1="187" x2="290" y2="187"/>
            <line x1="240" y1="190" x2="290" y2="190"/>
          </g>

          {/* fixtures - kitchen */}
          <g stroke="var(--ct)" strokeWidth="0.8" fill="none" opacity="0.5">
            <rect x="18" y="18" width="40" height="14"/>
            <circle cx="28" cy="25" r="2"/>
            <circle cx="38" cy="25" r="2"/>
            <circle cx="48" cy="25" r="2"/>
          </g>
          {/* bathroom */}
          <g stroke="var(--ct)" strokeWidth="0.8" fill="none" opacity="0.5">
            <rect x="138" y="18" width="22" height="34" rx="3"/>
            <circle cx="180" cy="30" r="6"/>
          </g>

          {/* room labels */}
          <text x="65" y="62" fill="var(--ct)" fontSize="8.5" fontWeight="600">3.01</text>
          <text x="65" y="74" fill="var(--ct)" fontSize="7" opacity="0.7">42 m²</text>
          <text x="170" y="62" fill="var(--ct)" fontSize="8.5" fontWeight="600">3.02</text>
          <text x="170" y="74" fill="var(--ct)" fontSize="7" opacity="0.7">56 m²</text>
          <text x="80" y="148" fill="var(--ct)" fontSize="8.5" fontWeight="600">3.03</text>
          <text x="80" y="160" fill="var(--ct)" fontSize="7" opacity="0.7">38 m²</text>
          <text x="240" y="148" fill="var(--ct)" fontSize="8.5" fontWeight="600">3.04</text>
          <text x="240" y="160" fill="var(--ct)" fontSize="7" opacity="0.7">41 m²</text>

          {/* status dots */}
          <circle cx="48" cy="56" r="3.2" fill="#D9A93B"/>
          <circle cx="155" cy="56" r="3.2" fill="#8FB055"/>
          <circle cx="60" cy="142" r="3.2" fill="#8FB055"/>
          <circle cx="220" cy="142" r="3.2" fill="#C44536"/>

          {/* annotation: leaky pipe callout */}
          <g>
            <line x1="225" y1="142" x2="282" y2="135" stroke="#C44536" strokeWidth="0.8" strokeDasharray="2 2"/>
            <circle cx="282" cy="135" r="2" fill="#C44536"/>
            <text x="262" y="128" fill="#C44536" fontSize="6.5" fontWeight="600">!  TICKET #218</text>
            <text x="262" y="118" fill="#C44536" fontSize="6" opacity="0.85">{lang==='de'?'Wasserschaden':'water damage'}</text>
          </g>

          {/* annotation: vacant since */}
          <g>
            <line x1="50" y1="56" x2="14" y2="48" stroke="#D9A93B" strokeWidth="0.8" strokeDasharray="2 2"/>
            <text x="14" y="42" fill="#D9A93B" fontSize="6.5" fontWeight="600">{lang==='de'?'FREI · 47 TAGE':'VACANT · 47 DAYS'}</text>
          </g>

          {/* dimension line bottom */}
          <g stroke="var(--ct)" strokeWidth="0.5" opacity="0.4">
            <line x1="10" y1="198" x2="310" y2="198"/>
            <line x1="10" y1="195" x2="10" y2="200"/>
            <line x1="310" y1="195" x2="310" y2="200"/>
            <text x="148" y="197" fill="var(--ct)" fontSize="6">18.40 m</text>
          </g>

          {/* north arrow */}
          <g transform="translate(298, 24)">
            <circle r="9" fill="none" stroke="var(--ct)" strokeWidth="0.6" opacity="0.5"/>
            <path d="M 0 -7 L 3 5 L 0 2 L -3 5 Z" fill="var(--ct)" opacity="0.7"/>
            <text x="-2" y="-10" fill="var(--ct)" fontSize="5" opacity="0.7">N</text>
          </g>
        </svg>
      </div>
      <div className="screen-legend">
        <span><i style={{background:'#8FB055'}}/>{lang==='de'?'belegt':'occupied'} · 2</span>
        <span><i style={{background:'#D9A93B'}}/>{lang==='de'?'frei':'vacant'} · 1</span>
        <span><i style={{background:'#C44536'}}/>{lang==='de'?'Schaden':'damage'} · 1</span>
      </div>
    </>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────────────────────
function FAQ({lang}) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="section-head">
        <div className="kicker">// 04 · FAQ · EHRLICH · HONESTLY</div>
        <h2 className="section-h2">
          <Bi lang={lang} de="Was du fragen würdest." en="What you'd ask."/>
          <br/>
          <em className="accent-yellow">
            <Bi lang={lang} de="Ehrliche Antworten." en="Honest answers."/>
          </em>
        </h2>
      </div>
      <div className="faq-list">
        {SU_FAQ.map((item, i) => {
          const copy = pickBoth(item, lang);
          const isOpen = open === i;
          return (
            <div key={i} className={`faq-item ${isOpen?'is-open':''}`} onClick={() => setOpen(isOpen ? -1 : i)}>
              <div className="faq-q">
                <span className="faq-num">{String(i+1).padStart(2,'0')}</span>
                <div className="faq-q-text">
                  <div className="faq-q-primary">{copy.primary.q}</div>
                  <div className="faq-q-secondary">{copy.secondary.q}</div>
                </div>
                <span className="faq-toggle">{isOpen ? '–' : '+'}</span>
              </div>
              {isOpen && (
                <div className="faq-a">
                  <div className="faq-a-primary">{copy.primary.a}</div>
                  <div className="faq-a-secondary">{copy.secondary.a}</div>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─── PRICING ─────────────────────────────────────────────────────────────────
// Pricing-Section entfernt — waehrend Beta keine Preise kommunizieren.

// ─── LOGIN CTA ───────────────────────────────────────────────────────────────
function LoginCTA({lang}) {
  return (
    <section className="login-cta" id="login">
      <div className="login-stamp">↗</div>
      <h2 className="login-h2">
        <Bi lang={lang} de="Schon Kunde?" en="Already a customer?"/>
      </h2>
      <div className="login-strap">
        <Bi lang={lang}
            de="Ein Login. Alle Module. Ein Universum."
            en="One login. Every module. One universe." asBlock/>
      </div>
      <a className="login-btn" href="https://id.sloppyuniverse.com/login">
        <UmbrellaLogo size={28} idPrefix="lg-cta" />
        <span><Bi lang={lang} de="Zum Login" en="Sign in" sep=" · "/></span>
        <span className="arrow">↗</span>
      </a>
    </section>
  );
}

// ─── FOOTER WALL ─────────────────────────────────────────────────────────────
function FooterWall({lang}) {
  return (
    <footer className="footer-wall">
      <div className="footer-mega">
        SLOPPY<br/>UNIVERSE
      </div>
      <div className="footer-grid">
        <div className="footer-col">
          <div className="footer-h"><Bi lang={lang} de="Module" en="Modules"/></div>
          {SU_MODULES_DATA.map(m => (
            <a key={m.key} href={`#${m.key}`} style={{'--c': m.color}}>{m.name}</a>
          ))}
        </div>
        <div className="footer-col">
          <div className="footer-h"><Bi lang={lang} de="Firma" en="Company"/></div>
          <a href="#manifest"><Bi lang={lang} de="Manifest" en="Manifest"/></a>
        </div>
        <div className="footer-col">
          <div className="footer-h"><Bi lang={lang} de="Rechtlich" en="Legal"/></div>
          <a href="https://id.sloppyuniverse.com/impressum"><Bi lang={lang} de="Impressum" en="Imprint"/></a>
          <a href="https://id.sloppyuniverse.com/datenschutz"><Bi lang={lang} de="Datenschutz" en="Privacy"/></a>
          <a href="https://id.sloppyuniverse.com/agb"><Bi lang={lang} de="AGB" en="Terms"/></a>
        </div>
      </div>
      <div className="footer-bar">
        <span>SloppyUniverse · Beta</span>
      </div>
    </footer>
  );
}

window.SU_App = App;