// =============================================================================
// Astovia · Service pages DE — Beratung, Interim, Transformation
// =============================================================================

function PageHeader({ num, title, tagline, lede, accent = 'bronze' }) {
  return (
    <section className="page-header" data-screen-label={`${title} · header`}>
      <div className="container">
        <div className="two-col" style={{ alignItems: 'end' }}>
          <h1>{title}<span className="serif-em">.</span></h1>
          <div>
            <div className="tagline">"{tagline}"</div>
            <p className="lede">{lede}</p>
          </div>
        </div>
      </div>
    </section>);
}

function PageFigure({ src, alt }) {
  return (
    <section className="section section--narrow" data-screen-label="Figure" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="photo" style={{ aspectRatio: '21/9' }}>
          <img src={src} alt={alt} loading="lazy" />
        </div>
      </div>
    </section>);
}

function Dossier({ num, title, rows }) {
  return (
    <div className="dossier">
      <div className="dossier-title">
        <h3>{title}</h3>
      </div>
      <div className="dossier-rows">
        {rows.map(([k, v]) =>
        <div className="dossier-row" key={k}>
            <div className="label">{k}</div>
            <div className="copy" style={{ fontSize: 17 }}>{v}</div>
          </div>
        )}
      </div>
    </div>);
}

function PillarsSection({ eyebrow, headline, headlineEm, intro, pillars }) {
  return (
    <section className="section" data-screen-label={headline}>
      <div className="container">
        {(headline || headlineEm) &&
        <div className="section-head">
          <div>
            <h2>
              {headline}{headlineEm ? ' ' : ''}{headlineEm && <span className="serif-em">{headlineEm}</span>}
            </h2>
          </div>
          {intro && <p>{intro}</p>}
        </div>}
        <div>
          {pillars.map((p, i) => <Dossier key={p.title} num={String(i + 1).padStart(2, '0')} title={p.title} rows={p.rows} />
          )}
        </div>
      </div>
    </section>);
}

function HowWeWorkCallout({ items }) {
  return (
    <section className="section section--narrow" data-screen-label="How we work together">
      <div className="container">
        <div className="callout">
          <div>
            <div className="label"></div>
            <h3>So arbeiten wir zusammen</h3>
          </div>
          <div>
            {items.map((it, i) => <p key={i}>{it}</p>)}
          </div>
        </div>
      </div>
    </section>);
}

function WhyThisWorks({ eyebrow, headline, headlineEm, body }) {
  return (
    <section className="section" data-screen-label="Why this works">
      <div className="container">
        <div className="two-col reverse">
          <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)' }}>
              {headline}{headlineEm ? ' ' : ''}{headlineEm && <span className="serif-em">{headlineEm}</span>}
            </h2>
          </div>
          <div>
            {body.map((p, i) =>
            <p key={i} style={{ fontSize: 16, color: 'var(--paper-70)', lineHeight: 1.7, margin: '0 0 18px' }}>{p}</p>
            )}
          </div>
        </div>
      </div>
    </section>);
}

function CuriousCta({ go }) {
  return (
    <section className="final-cta" data-screen-label="Curious CTA">
      <div className="container">
        <div className="inner">
          <div>
            <div className="eyebrow" style={{ marginBottom: 28 }}></div>
            <h2>Neugierig<span className="serif-em">?</span></h2>
          </div>
          <div>
            <p></p>
            <a className="btn btn-primary btn-block" onClick={() => go('contact')}>Dialog starten</a>
          </div>
        </div>
      </div>
    </section>);
}

// -----------------------------------------------------------------------------
// Beratung / Advisory
// -----------------------------------------------------------------------------
function AdvisoryPage({ go }) {
  return (
    <main data-screen-label="Advisory">
      <PageHeader
        num="02"
        title="Startup Advisory"
        tagline="Skalieren ohne zu stolpern."
        lede="Ihr Produkt überzeugt am Markt und die Nachfrage steht. Jetzt heißt es, die Organisation ohne Reibungsverluste hochzufahren und das Budget im Griff zu behalten. Wir konzipieren und realisieren gemeinsam die nächsten Meilensteine, die exakt zu Ihrer Struktur passen und direkt Ergebnisse liefern." />

      <PageFigure
        src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=2000&q=80"
        alt="Gründer erarbeiten gemeinsam eine Strategie" />

      <PillarsSection
        eyebrow="01 · Drei Säulen der Arbeit"
        headline=""
        headlineEm=""
        intro={null}
        pillars={[
        { title: 'Go-To-Market Strategie', rows: [
          ['Problem', `Ihr Vertriebsweg steht, doch die Dinge ändern sich: der Markt, das Team oder die Finanzlage.`],
          ['Lösung', `Wir analysieren Ihr Modell und entwickeln es gemeinsam auf Ihre Ziele ausgerichtet weiter.`],
          ['Ergebnis', `Ein Vertriebsprozess, der mit Ihrem Wachstum Schritt hält. Bevor Sie teure Führungskräfte einstellen müssen.`]]
        },
        { title: 'Operative Umsetzung', rows: [
          ['Problem', `Ihr starkes Wachstum bremst Sie aus. Was früher mit wenigen Mitarbeitern auf Zuruf funktionierte, erfordert heute mühsame Abstimmungen und bindet wertvolle Ressourcen.`],
          ['Lösung', `Wir bringen bewährte Methoden aus dem globalen Enterprise Management in Ihr Unternehmen ein und gestalten effiziente Abläufe, die Ihre Kosten im Griff halten.`],
          ['Ergebnis', `Abläufe, die reibungslos skalieren. Teams, die liefern können. Begeisterte Kunden.`]]
        },
        { title: 'Team-Routinen und Führung', rows: [
          ['Problem', `Ihr Erfolg bringt neue Herausforderungen. Aufgaben werden unübersichtlicher, die Skalierung stockt und das Team arbeitet permanent am Limit.`],
          ['Lösung', `Wir etablieren strukturierte Rituale, Ziele und Feedback-Schleifen, die Klarheit schaffen und Ihre Mitarbeiter binden.`],
          ['Ergebnis', `Weniger Reibung. Teams arbeiten mit Freude und Klarheit an ihrer Mission. Geringere Fluktuation.`]]
        }]
        } />

      <HowWeWorkCallout items={[
      "Die Reise jedes Gründers ist einzigartig. Wir passen das Engagement an Ihre Situation an:",
      "Monatliches Beratungshonorar · Beteiligung am Eigenkapital · Projektbasierte Vertiefung · Fractional Leadership."]
      } />

      <WhyThisWorks
        eyebrow="04 · Warum das funktioniert"
        headline="Warum das funktioniert"
        headlineEm=""
        body={[
        "Bei Hewlett-Packard habe ich GTM-Modelle, Prozesse und Teams aufgebaut. Von agilen Einheiten bis zur 2.500-köpfigen Organisation.",
        "Ich habe Budgets über eine Milliarde Dollar verantwortet. Dabei habe ich Fehler selbst gemacht, korrigiert und daraus gelernt. Mein Vorteil ist heute Ihr Hebel: Ich erkenne sofort, was funktioniert und was Zeit verschwendet.",
        "Ich bringe diese Konzern-Erfahrung direkt in Ihr Unternehmen, um die nächste Phase Ihrer Skalierung oder Transformation abzusichern."]
        } />

      <CuriousCta go={go} />
    </main>);
}

// -----------------------------------------------------------------------------
// Interim Management
// -----------------------------------------------------------------------------
function InterimPage({ go }) {
  return (
    <main data-screen-label="Interim">
      <PageHeader
        num="03"
        title="Interim Management"
        tagline="Führung, sofort. Ohne den Overhead."
        lede="Sichern Sie sich einen COO, VP Revenue Ops, Customer Service & Success oder Chief Transformation Officer. Auf Teil- oder Vollzeitbasis." />

      <PageFigure
        src="https://images.unsplash.com/photo-1517502884422-41eaead166d4?w=2000&q=80"
        alt="Ein ruhiger Führungsschreibtisch wartet auf seinen Operator" />

      <PillarsSection
        eyebrow="01 · Das Interim-Mandat"
        headline=""
        headlineEm=""
        intro=""
        pillars={[
        { title: 'Führungserfahrung in der Praxis', rows: [
          ['Fokus', `15 Jahre auf Fortune-100-VP-Ebene. Vertrieb, Revenue & Customer Operations. Digital Engagement. Transformationsmanagement. 2.500+ Mitarbeiter.`],
          ['Umsetzung', `Gezielte Stabilisierung oder Neuausrichtung. Wir bauen das Fundament für Ihre Skalierung und sichern die finale Übergabe ab.`],
          ['Resultat', `Sofortige Führungsstabilität und verlässliches Wachstum. Der operative Druck weicht strategischem Freiraum.`]]
        },
        { title: 'Flexible Einsatzmodelle', rows: [
          ['Fokus', `Maßgeschneiderte Kapazitäten für Ihre aktuelle Phase. Vom strategischen Teilzeit-Sparring mit zwanzig Wochenstunden bis zur vollzeitlichen operativen Führung im Unternehmen.`],
          ['Umsetzung', `Einsatz als fraktionaler COO oder VP, zeitlich befristete Vollzeit-Interimsleitung oder Steuerung dedizierter Sonderprojekte.`],
          ['Resultat', `Effizienter Ressourceneinsatz ohne fixen Overhead. Sie gewinnen genau die Management-Kapazität, die Ihr Wachstum jetzt beschleunigt.`]]
        },
        { title: 'Erfolge in jeder Größenordnung', rows: [
          ['Fokus', `Steuerung weltweiter Operations und Großbudgets im Milliardenbereich. Digitale Transformation in CRM, eCommerce, CX, Consumer Apps und Retention.`],
          ['Umsetzung', `Strukturierte und rigorose Projektabwicklung. Wir bauen das digitale Fundament für Ihre Skalierung und moderieren notwendige organisatorische Übergänge.`],
          ['Resultat', `Nahtlose Führungskompetenz in kritischen Phasen. Sie minimieren das Umsetzungsrisiko und beschleunigen den Wandel.`]]
        }]
        } />

      <HowWeWorkCallout items={[
      "Der Interim-Bedarf jedes Unternehmens ist einzigartig. Wir besprechen Ihre spezifische Herausforderung, gestalten das richtige Einsatzmodell und starten sofort."]
      } />

      <WhyThisWorks
        eyebrow="04 · Warum das funktioniert"
        headline="Warum das funktioniert"
        headlineEm=""
        body={[
        "Ich war in der Rolle, die Sie brauchen: permanenter Wandel, quartalsweise Umsetzung, Führungserfahrung in Europa, USA und Asien.",
        "Ich habe Organisationen durch Wachstum und Kontraktion geführt, von Grund auf aufgebaut oder restrukturiert.",
        "Ich habe gelernt, was funktioniert und warum Veränderungen scheitern. Ich weiß, wie man entschlossen umsetzt und Stakeholder informiert und ausgerichtet hält.",
        "Ich verfüge über die Seniorität und Erfahrung, um nahtlos an Ihre dauerhafte Führung zu übergeben."]
        } />

      <CuriousCta go={go} />
    </main>);
}

// -----------------------------------------------------------------------------
// Transformation Leadership
// -----------------------------------------------------------------------------
function TransformationPage({ go }) {
  return (
    <main data-screen-label="Transformation">
      <PageHeader
        num="04"
        title="Transformation Leadership"
        tagline="Komplexer Wandel, sauber umgesetzt."
        lede={`Neue Software ist schnell geschrieben. Die Arbeitsweise von Menschen zu verändern, ist die wahre Herausforderung. Sichern Sie sich strategische Führung für digitale / KI-Transformationen, organisatorisches Redesign und komplexe Systemmigrationen.`} />

      <PageFigure
        src="https://images.unsplash.com/photo-1448630360428-65456885c650?w=2000&q=80"
        alt="Ein Wolkenkratzer im Bau, Gerüste ragen in den Himmel" />

      <PillarsSection
        eyebrow="01 · Die Transformationsherausforderung"
        headline=""
        headlineEm=""
        intro=""
        pillars={[
        { title: 'Die Transformationsherausforderung', rows: [
          ['Die Realität', `Sie führen KI ein, modernisieren Legacy-Plattformen, konsolidieren Tools, reorganisieren Funktionen. Diese komplexen Multi-Stakeholder-Initiativen bringen massive Veränderungen für Ihre Organisation.`],
          ['Die Hürde', `IT und Business denken verschieden. Wandel bringt Risiken und Kommunikation kommt oft zu kurz. Teams fehlt die Gewissheit, dass „morgen besser sein wird". Governance und Entscheidungsfindung leiden unter dem Fortschrittsdruck.`],
          ['Ihr Mehrwert', `Sie brauchen jemanden, der sowohl die Technologie als auch Menschen versteht. Jemanden, der Klarheit schafft, Stakeholder vereint, schwierige Entscheidungen trifft und dabei den Fortschritt aufrechterhält.`]]
        },
        { title: 'Unser Transformationsansatz', rows: [
          ['Die Philosophie', `Neue Software ist schnell geschrieben. Die Arbeitsweise von Menschen zu verändern, ist die wahre Herausforderung. Wir verbinden technologische Innovation mit gezielter Befähigung Ihrer Belegschaft. Wir stiften Klarheit und überwinden Silos auf allen Hierarchieebenen.`],
          ['Wie wir führen', `Wir übernehmen die Transformationsleitung. Gemeinsam gestalten und verankern wir den Wandel, führen die Governance, richten Stakeholder aus und steuern das Projektbüro. Wir helfen Ihnen, harte Entscheidungen zu treffen und das Tempo hochzuhalten.`],
          ['Wie Erfolg aussieht', `Alle Beteiligten verstehen das Ziel und den Weg. Veränderungen werden angenommen. Das Tagesgeschäft bleibt stabil und die Technologie liefert die Resultate, die Sie erwarten.`]]
        },
        { title: 'Erfolgsbilanz in globalem Maßstab', rows: [
          ['Transformation globaler Funktionen', `Aufbau weltweiter Strukturen für Vertriebsunterstützung und Operations im Zuge einer Fortune-50-Abspaltung bei voller Umsatzkontinuität. Restrukturierung einer Organisation mit über 7.000 Mitarbeitern von einer regionalen in eine funktionale Struktur unter Wahrung der Kunden- und Mitarbeiterzufriedenheit. Steuerung von Strategie, Umsetzung und Change Management über Geschäftsbereiche und Regionen hinweg.`],
          ['Modernisierung von Plattformen und Infrastruktur', `Cloud-Standardisierung einer globalen Channel-Dateninfrastruktur für 50 Milliarden USD Umsatz inkl. Überführung in externen Betrieb, reduzierten Überzahlungen und OPEX sowie verbesserter Bestandstransparenz. CRM-Neuausrichtung für 6.000 Verkäufer und 50.000+ Partner zur Modernisierung der Vertriebsprozesse.`],
          ['Consumer Engagement Transformation', `Steigerung der Retention Rate von 13 Millionen Abonnenten durch interaktiven Kundendialog. Integration der Apps von 10+ Sparten zu einer zentralen Consumer-App mit über 40 Millionen monatlichen Nutzern. Aufbau eines neuen digitalen Vertriebskanals.`]]
        }]
        } />

      <HowWeWorkCallout items={[
      "Transformation erfordert an jeder Stufe und in jedem Unternehmen andere Unterstützung. Wir besprechen Ihre spezifische Herausforderung, gestalten die richtige Führungsrolle und starten sofort.",
      "Sie erhalten erfahrene Begleitung und entschlossene Umsetzung von jemandem, der Wandel bereits in großem Maßstab geführt hat."]
      } />

      <WhyThisWorks
        eyebrow="04 · Warum das funktioniert"
        headline="Warum das funktioniert"
        headlineEm=""
        body={[
        "Ich habe erfolgreich Transformationen abgeschlossen, die Tausende von Mitarbeitern betrafen und jahrzehntealte Prozesse mit neuer Technologie modernisierten – was im heutigen KI-Zeitalter wichtiger ist denn je.",
        "Ich nehme Senior-Stakeholder auf die Reise mit und habe die erforderliche Beharrlichkeit und die Notwendigkeit schwieriger Entscheidungen verinnerlicht."]
        } />

      <CuriousCta go={go} />
    </main>);
}

Object.assign(window, { AdvisoryPage, InterimPage, TransformationPage });