// SMASH — Founders Wall page component
// Renders the same content for desktop + mobile; layout differences
// live in founders-styles.css under `.founders.mobile`.

const initial = (u) => (u[0] || '').toUpperCase();
const padded = (n) => String(n).padStart(3, '0');
const fmt = (n) => n.toLocaleString('de-DE');

function TopBar({ mobile }) {
  return (
    <header className="topbar">
      <div className="wm">SMA<span className="dot">.</span>SH</div>
      {!mobile && (
        <nav className="nav">
          <a href="#">App</a>
          <a href="#">Pro</a>
          <a href="#" className="active">Founders</a>
          <a href="#">Brand</a>
        </nav>
      )}
      <div className="live">Founders · Live</div>
    </header>
  );
}

function Hero({ mobile }) {
  return (
    <section className="hero" data-screen-label={mobile ? 'M-Hero' : 'D-Hero'}>
      <div className="hero-meta mono">
        <span>FIG. 01</span>
        <span className="pipe">·</span>
        <span>Issue 01 / 2026</span>
        <span className="pipe">·</span>
        <span className="accent">Crew Wall</span>
      </div>
      <h1>
        Die Founding<br />
        <span className="ital">Crew.</span>
      </h1>
      <p className="sub">
        Die ersten <b>100</b>, die&apos;s mitgebaut haben. Keine Influencer, keine
        Reichweiten-Trophäen. Nur Menschen, die jeden Tag wieder hinkommen.
      </p>
      {!mobile && (
        <div className="hero-corner mono">
          smashtheapp.de<br />
          <b>/founders</b>
        </div>
      )}
    </section>
  );
}

function Stats() {
  return (
    <section className="stats">
      <div className="stat">
        <div className="label">01 — Founders</div>
        <div className="value mono">{STATS.founders}<span className="unit">/ 100</span></div>
        <div className="foot">Sortiert nach Signup-Datum.</div>
      </div>
      <div className="stat">
        <div className="label">02 — Längste Streak</div>
        <div className="value green mono">{STATS.longestStreak}<span className="unit">Tage</span></div>
        <div className="foot">Ohne Reset. Ohne Pause.</div>
      </div>
      <div className="stat">
        <div className="label">03 — Zusammen getrackt</div>
        <div className="value mono">{fmt(STATS.totalDays)}<span className="unit">Tage</span></div>
        <div className="foot">Crew-Total seit Beta-Start.</div>
      </div>
    </section>
  );
}

function FounderCard({ f }) {
  return (
    <article className={'card' + (f.n === 1 ? ' og' : '')}>
      <div className="top">
        <div className="avatar">{initial(f.user)}</div>
        <div className="badge mono">
          Founder<span className="num">#{padded(f.n)}</span>
        </div>
      </div>
      <div className="user">{f.user}</div>
      <div className="line">{f.line}</div>
      <div className="streak">
        <div className="streak-num mono">
          {f.streak}<span className="d">d</span>
        </div>
        <div className="streak-label">Streak</div>
      </div>
    </article>
  );
}

function Grid({ founders }) {
  return (
    <section className="grid-section">
      <div className="section-head">
        <h2>Crew.<br />Sortiert nach Signup.</h2>
        <div className="key">
          <b>{founders.length} sichtbar</b><br />
          <span className="g">— · — Aktiv heute</span>
        </div>
      </div>
      <div className="grid">
        {founders.map((f) => <FounderCard key={f.n} f={f} />)}
      </div>
    </section>
  );
}

function Quote() {
  return (
    <section className="quote">
      <span className="stripe-top"></span>
      <div className="label">Identity · Beweis</div>
      <blockquote>
        Disziplin ist kein Talent.<br />
        Sie ist ein <span className="ital">Ritual.</span>
      </blockquote>
      <cite>— Crew-Manifest, §3</cite>
      <span className="stripe-bot"></span>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta">
      <div>
        <h3>Werd Teil<br />der Crew.</h3>
        <p>
          Die ersten 100 Plätze sind vergeben. Beta läuft. Wenn du dabei bist,
          bist du Teil der Geschichte — nicht der Statistik.
        </p>
      </div>
      <div className="cta-right">
        <a href="#" className="btn">
          App-Beta öffnen
          <span className="arrow">→</span>
        </a>
        <div className="note">Date your best self.</div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot">
      <div>
        <div className="wm">SMA<span className="dot">.</span>SH</div>
        <div className="tag">Date your best self.</div>
      </div>
      <div className="right">
        © 2026 · Smash The App<br />
        <a href="#">Instagram /smashtheapp</a>
      </div>
    </footer>
  );
}

function FoundersPage({ mobile = false }) {
  return (
    <div className={'founders' + (mobile ? ' mobile' : '')}
         data-screen-label={mobile ? 'Mobile · 375' : 'Desktop · 1440'}>
      <TopBar mobile={mobile} />
      <Hero mobile={mobile} />
      <Stats />
      <Grid founders={FOUNDERS} />
      <Quote />
      <CTA />
      <Foot />
    </div>
  );
}

Object.assign(window, { FoundersPage });