// =============================================================================
// Astovia · Home & About pages — Deutsch
// =============================================================================

function HomeMeta() {
  return (
    <div className="hero-meta">
      <div>// 00 · Praxis</div>
      <div>● Astovia — strategische Beratung</div>
      <div>München · Zürich · Amsterdam</div>
      <div>Hewlett-Packard Alumni</div>
    </div>);
}

function Hero({ go }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <h1>
              Schneller skalieren. Fehler <span className="serif-em">vermeiden.</span>
            </h1>
          </div>
          <div>
            <p className="hero-sub">
              <span className="b">30 Jahre Fortune-100-Erfahrung.</span><br />
              Flexibel, ohne den Overhead.
            </p>
            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
              <a className="btn btn-primary" onClick={() => go('contact')}>Dialog starten</a>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

function ThreeModes({ go }) {
  const modes = [
  { id: 'advisory', n: '01', title: 'Startup Advisory', promise: 'Vermeiden Sie teures Lehrgeld.', audience: 'Startups · Scale-ups',
    body: 'Nutzen Sie bewährte Erfahrungswerte und umgehen Sie typische Fehltritte. Skalieren Sie kosteneffizient und begeistern Sie Ihre Kunden von Anfang an.' },
  { id: 'interim', n: '02', title: 'Interim Leadership', promise: 'VP-Level Leader. Ab sofort.', audience: 'Jedes Unternehmen',
    body: 'Wir übernehmen Mandate in Teilzeit (Fractional) oder Vollzeit. Sie bewahren Ihre volle Flexibilität und profitieren gleichzeitig von der Erfahrung und Seniorität einer Fortune-100-Führungskraft.' },
  { id: 'transformation', n: '03', title: 'Transformation Leadership', promise: 'Komplexer Wandel, sauber umgesetzt.', audience: '500+ Mitarbeiter',
    body: 'Digitale Transformation und KI-Infrastruktur. Plattform-Migrationen. Customer Ops Optimierungen. Umorganisationen. Wir haben all dies im großen Stil geleitet und wissen, was funktioniert, woran Projekte scheitern und wie man Teams erfolgreich mitnimmt.' }];

  return (
    <section className="section" data-screen-label="Three modes">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow"></span>
            <h2>Drei Wege,<br /><span className="serif-em">wie wir helfen</span></h2>
          </div>
        </div>

        <div className="modes">
          {modes.map((m) =>
          <a key={m.id} className="mode" onClick={() => go(m.id)}>
              <h3>{m.title}</h3>
              <div className="promise">{m.promise}</div>
              <p className="body">{m.body}</p>
              <span className="learn">Mehr erfahren →</span>
            </a>
          )}
        </div>
      </div>
    </section>);
}

function AboutBlock({ withHeader = true }) {
  return (
    <section className="section" id="about" data-screen-label="About">
      <div className="container">
        {withHeader &&
        <div className="section-head">
            <div>
              <span className="eyebrow"></span>
              <h2>Über uns<span className="serif-em"></span></h2>
            </div>
            <p>
              ASTOVIA wurde gegründet, um die Erkenntnisse aus Jahrzehnten von Führungserfahrung weiterzugeben.
              Ein Berater, kalibriert auf Ihre Situation, jedoch ohne den Overhead einer Beratungsfirma.
            </p>
          </div>
        }

        <div className="two-col reverse" style={{ marginBottom: 64 }}>
          <div>
            <div className="mono" style={{ marginBottom: 18 }}></div>
            <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(28px, 3.6vw, 44px)', letterSpacing: '-0.03em', margin: '0 0 22px', color: 'var(--paper)' }}>
            </h3>
          </div>
          <ul className="bullets">
            <li><span className="k">01</span><span>Pre- und Post-Sales Operations</span></li>
            <li><span className="k">02</span><span>GTM-, Vertriebs- und Channel-Enablement &amp; Transformation</span></li>
            <li><span className="k">03</span><span>Digitales Engagement und Bindung von Millionen Abonnenten</span></li>
          </ul>
        </div>

        <div className="about-grid">
          <div>
            <div className="about-portrait">
              <span className="tag">Geschäftsführer</span>
              <img src="../assets/alex-stoll.jpg" alt="Alex Stoll" />
            </div>
            <div className="about-name">
              <div className="n">Alex Stoll</div>
              <div className="r">GESCHÄFTSFÜHER</div>
              <div className="links">
                <a aria-label="LinkedIn" title="LinkedIn">
                  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zM9 9.5h3.8v1.55h.05a4.16 4.16 0 0 1 3.74-2.05c4 0 4.74 2.63 4.74 6.05V21h-4v-4.95c0-1.18-.02-2.7-1.64-2.7-1.64 0-1.89 1.28-1.89 2.61V21H9z" /></svg>
                </a>
                <a aria-label="E-Mail" title="E-Mail" href="mailto:alex.stoll@astovia.de">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 6h18v12H3z" /><path d="M3 6l9 7 9-7" /></svg>
                </a>
              </div>
            </div>
          </div>

          <div>
            <p className="about-quote">
               <span className="serif-em"></span> 
            
            </p>
            <p className="about-body">
              Alex Stoll ist eine Führungspersönlichkeit mit globaler Erfahrung in den Bereichen
              Vertriebs- und Kanal-Enablement, Kundenservice sowie Digital Customer Success Management
              von 13 Millionen Abonnenten. Er ist darauf spezialisiert, vielfältige Teams durch
              groß angelegte Technologie-, Plattform- oder Betriebsmodell-Transformationen zu führen.
            </p>
            <p className="about-body">
              Er entwickelte seine Stärken über drei Jahrzehnte beim ikonischen Unternehmen
              Hewlett-Packard und ist bekannt für seine Fähigkeit, das Beste aus Teams herauszuholen,
              seine Beharrlichkeit in der Umsetzung und seine positive Haltung in Zeiten des Wandels.
            </p>
            <p className="about-body">
              In seinen 15 Jahren auf VP-Ebene verantwortete er Budgets von über 1 Milliarde
              US-Dollar, führte bis zu 2.500 Mitarbeiter, leitete zahllose Transformationen und
              erweckte eine unternehmensweite App mit mehr als 40 Millionen monatlichen Nutzern
              zum Leben.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--rule)', marginTop: 24 }}>
              {[
              ['30J', 'ERFAHRUNG'],
              ['$1Mrd+', 'BUDGETS VERANTWORTET'],
              ['2 500', 'MITARBEITER GEFÜHRT'],
              ['13Mio', 'ABONNENTEN'],
              ['40Mio+', 'MONATLICHE NUTZER']].
              map(([v, l], i) =>
              <div key={l} style={{
                padding: '22px 18px 16px',
                borderLeft: i % 3 === 0 ? 'none' : '1px solid var(--rule)',
                borderTop: i >= 3 ? '1px solid var(--rule)' : 'none'
              }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 30, letterSpacing: '-0.03em', color: 'var(--bronze)', lineHeight: 1 }}>{v}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--paper-50)', marginTop: 8 }}>↳ {l}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);
}

function HomeCtaStrip({ go }) {
  return (
    <section className="section section--surface section--narrow" style={{ borderBottom: 'none' }}>
      <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24, textAlign: 'center' }}>
        <div className="eyebrow"></div>
        <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(36px, 5vw, 60px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.0, color: 'var(--paper)' }}>
          Bereit mehr zu <span className="serif-em">erfahren?</span>
        </h2>
        <p style={{ fontSize: 16, color: 'var(--paper-70)', maxWidth: 560, margin: 0, lineHeight: 1.6 }}>
        </p>
        <a className="btn btn-primary" onClick={() => go('contact')} style={{ marginTop: 8 }}>Dialog starten</a>
      </div>
    </section>);
}

function HomePage({ go }) {
  return (
    <main data-screen-label="Home">
      <Hero go={go} />
      <ThreeModes go={go} />
      <AboutBlock />
      <HomeCtaStrip go={go} />
    </main>);
}

function AboutPage({ go }) {
  return (
    <main data-screen-label="About us">
      <section className="page-header" data-screen-label="About header">
        <div className="container">
          <div className="page-header-grid">
            <div className="meta" style={{ gridColumn: 'span 3' }}>// 01 · Das Unternehmen</div>
            <div className="meta" style={{ gridColumn: 'span 6' }}>● ASTOVIA — strategische Beratung für Führungskräfte</div>
            <div className="meta" style={{ gridColumn: 'span 3', textAlign: 'right' }}>gegr. 2024 · Hewlett-Packard Alumni</div>
          </div>
          <div className="two-col" style={{ alignItems: 'end' }}>
            <h1>Über uns<span className="serif-em">.</span></h1>
            <p className="lede">
              ASTOVIA wurde gegründet, um die Erkenntnisse aus Jahrzehnten von Führungserfahrung
              zu teilen – angewendet auf Ihre konkrete Situation, ohne den Overhead einer Beratungsfirma.
            </p>
          </div>
        </div>
      </section>
      <AboutBlock withHeader={false} />
      <HomeCtaStrip go={go} />
    </main>);
}

Object.assign(window, { HomePage, AboutPage });