/* global React, Nav, Hero, Logos, Positioning, Methodik, PMFocus, Leistungen, Cases, CaseDrawer, Network, About, CTA, Footer, ArrowRight */
const { useState, useEffect } = React;

/* ---------- Strategy notes drawer ---------- */

function StrategyDrawer({ open, onClose }) {
  useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  return (
    <>
      <div className={`drawer-backdrop ${open ? 'open' : ''}`} onClick={onClose} style={{ zIndex: 105 }}></div>
      <aside className={`strategy-drawer ${open ? 'open' : ''}`}>
        <div className="strategy-drawer-head">
          <div>
            <div className="mono" style={{ fontSize: 11, marginBottom: 4 }}>Konzept-Begleitung</div>
            <div className="h-3" style={{ fontFamily: 'var(--serif)' }}>Strategie & Design-Reasoning</div>
          </div>
          <button className="drawer-close" onClick={onClose} aria-label="Schließen">
            <svg viewBox="0 0 14 14" width="14" height="14" fill="none">
              <path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.2" />
            </svg>
          </button>
        </div>
        <div className="strategy-drawer-body">

          <div className="strategy-block">
            <h4>Leitmetapher</h4>
            <h3>Höhenlinien</h3>
            <p>
              Statt Berg-Klischee, Cable-Cars oder Tourismus-Alpin: das visuelle System nutzt
              <em> topografische Konturlinien</em> als Leitmotiv. Sie sind ruhig, präzise, methodisch und
              transportieren das Versprechen visuell: <em>Vor dem Aufstieg lesen wir die Karte.</em>
              Das verbindet „Alpin" auf strategische Weise mit der Berater-Position, und funktioniert auch
              nach einem Rebrand, weil es ein systemisches Bild ist, kein Wortspiel.
            </p>
          </div>

          <div className="strategy-block">
            <h4>Positionierung, verschärft</h4>
            <h3>„KI, die im Alltag standhält."</h3>
            <p>
              Der Claim aus dem Briefing wird zum Hero-Headline. Er besetzt den Schmerz, den Thomas Gruber
              (Persona 1) tatsächlich hat: nicht Inspiration, sondern Adoption. Die Sub-Line spannt die Brücke
              von Strategie zu Umsetzung, exakt die Lücke, in der die Marke sitzt.
            </p>
            <ul>
              <li>Macht klar, dass es nicht um Hype geht</li>
              <li>Sortiert Workshop-Verkäufer heraus</li>
              <li>Klingt nach Erwachsenen-Beratung, nicht Startup</li>
            </ul>
          </div>

          <div className="strategy-block">
            <h4>Seitendramaturgie</h4>
            <h3>Editorial, nicht SaaS</h3>
            <p>
              Die Seite liest sich wie ein durchnummeriertes Briefing, N° 01 bis N° 08, mit ruhiger
              Pause zwischen den Sektionen. Das fühlt sich an wie ein <em>Anthropic-trifft-McKinsey-Digital</em>
              Aufbau und differenziert maximal von der „bunte Cards mit Icons"-KI-Agentur-Welt.
            </p>
            <ul>
              <li>Hero · Status & Verfügbarkeit als Trust-Signal</li>
              <li>Logo-Strip „Im Einsatz bei" (typografisch, keine Fake-Logos)</li>
              <li>Haltung · Manifesto in Editorial-Pull-Quote</li>
              <li>Methodik · die drei Höhenstufen</li>
              <li>Leistungen · dunkles Akkordeon-Ribbon</li>
              <li>Arbeiten · Case Cards mit Detail-Drawer</li>
              <li>Netzwerk · Simon im Kern, Netz drumherum</li>
              <li>Simon · dunkles Editorial-Portrait</li>
              <li>Kontakt · 4 klare Wege, Slot-Picker statt Funnel</li>
            </ul>
          </div>

          <div className="strategy-block">
            <h4>Wie wir größer wirken, ohne unehrlich zu sein</h4>
            <ul>
              <li>Sektion „Im Einsatz bei" mit Anzahl + Logo-Strip, nicht 6 Fake-Avatare</li>
              <li>Netzwerk-Diagramm zeigt explizit: <em>Simon im Kern, Fachleute drumherum</em></li>
              <li>Detaillierte Case Studies mit konkreten Zahlen statt allgemeiner Statements</li>
              <li>Editorial-Numerierung (N° 01–08) signalisiert Methode, nicht Show</li>
              <li>Workshop-Diktion und Termin-Slots wirken wie eine etablierte Praxis</li>
              <li>About-Sektion: Simon spricht in Ich-Form. Ehrlich, aber selbstbewusst.</li>
            </ul>
          </div>

          <div className="strategy-block">
            <h4>Was wir bewusst nicht tun</h4>
            <ul>
              <li>Keine Berg-Fotografie, keine Drohnenaufnahmen, keine Gletscher</li>
              <li>Keine Neon-Gradients, keine pulsierenden „AI Cores"</li>
              <li>Keine Roboter-Hände, keine Hologramme</li>
              <li>Keine „Wir revolutionieren..."-Sprache</li>
              <li>Keine Fake-Team-Seite mit anonymen Avataren</li>
              <li>Keine Tool-Logos der KI-Modelle (OpenAI, etc.) als „Stack"-Show</li>
            </ul>
          </div>

          <div className="strategy-block">
            <h4>Typografisches System</h4>
            <p>
              <strong style={{ color: 'var(--primary)' }}>IBM Plex Serif</strong> für Headlines und Zitate,
              transportiert „Editorial Consultancy". <strong>Inter</strong> für Lesetext, neutral, sehr lesbar.
              <strong>IBM Plex Mono</strong> für Mikro-Annotationen (N° 01, Statuszeilen, Tags), gibt der
              Marke eine subtile technische Kante, ohne in Coder-Ästhetik abzurutschen.
            </p>
          </div>

          <div className="strategy-block">
            <h4>Farb-Anwendung</h4>
            <p>
              70 % Paper/Mist, 20 % Pine Depth (Hero-Text, Services-Ribbon, Footer), 10 % Warm Feld als
              Akzent, nur dort, wo etwas tatsächlich ausgewählt oder hervorgehoben wird (Hero „Alltag",
              Case-Stats, Hover-States). Das hält die Marke ruhig, lässt Akzente aber ankommen.
            </p>
          </div>

          <div className="strategy-block">
            <h4>Future-proof beim Namen</h4>
            <p>
              Weil „KI Alpin" möglicherweise rebrandet wird, hängt nichts in der visuellen DNA am Wort
              „Alpin". Höhenlinien funktionieren als Metapher für jede Beratung, die Prozesse durchdenkt.
              Das Logo steht in Mono-Type, Austausch in einer Stunde.
            </p>
          </div>

          <div className="strategy-block">
            <h4>Vergleich der Richtungen</h4>
            <p>
              Mit dem Tweak-Schalter unten rechts wechseln Sie zwischen <strong>Quiet Summit</strong>
              (editorial, Serif, Pine + Warm Feld) und <strong>Process Ridge</strong> (technischer, Sans,
              dichter, Moss-Akzent). Beide funktionieren. Quiet Summit positioniert stärker, Process Ridge
              wirkt mehr wie ein Produkt.
            </p>
          </div>

        </div>
      </aside>
    </>
  );
}

/* ---------- Tweaks ---------- */

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "summit",
  "accent": "#C9A66B",
  "heroLayout": "editorial",
  "wordmark": "logo"
}/*EDITMODE-END*/;

function TweaksUI({ tweaks, setTweak }) {
  const TP = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakSelect = window.TweakSelect;
  const TweakColor = window.TweakColor;
  if (!TP) return null;

  return (
    <TP title="Tweaks · Design-Richtung">
      <TweakSection title="Visuelle Richtung">
        <TweakRadio
          label="Stylescape"
          value={tweaks.direction}
          options={[
            { value: 'summit', label: 'Quiet Summit' },
            { value: 'ridge', label: 'Process Ridge' }
          ]}
          onChange={v => setTweak('direction', v)}
        />
      </TweakSection>
      <TweakSection title="Hero-Layout">
        <TweakRadio
          label="Layout"
          value={tweaks.heroLayout}
          options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'manifesto', label: 'Manifesto' }
          ]}
          onChange={v => setTweak('heroLayout', v)}
        />
      </TweakSection>
      <TweakSection title="Wortmarke (Nav)">
        <TweakSelect
          label="Lockup"
          value={tweaks.wordmark}
          options={[
            { value: 'logo', label: 'Logo · Summit Path SVG' },
            { value: 'mono', label: 'Mono · KI ALPIN / MICHELER' },
            { value: 'serif', label: 'Serif · Ki Alpin.' },
            { value: 'badge', label: 'Badge · KA + Text' },
            { value: 'italic', label: 'Italic · Micheler' }
          ]}
          onChange={v => setTweak('wordmark', v)}
        />
      </TweakSection>
      <TweakSection title="Akzentfarbe">
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          options={['#C9A66B', '#6E8B4E', '#123A34', '#5D7280']}
          onChange={v => setTweak('accent', v)}
        />
      </TweakSection>
    </TP>
  );
}

/* ---------- App ---------- */

function App() {
  const [activeCase, setActiveCase] = useState(null);
  const [strategyOpen, setStrategyOpen] = useState(false);

  const useTweaks = window.useTweaks || (() => [DEFAULTS, () => {}]);
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  // Apply direction to root
  useEffect(() => {
    document.documentElement.setAttribute('data-direction', tweaks.direction === 'ridge' ? 'ridge' : 'summit');
  }, [tweaks.direction]);

  // Apply accent color
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
  }, [tweaks.accent]);

  useEffect(() => {
    document.body.style.overflow = (activeCase || strategyOpen) ? 'hidden' : '';
  }, [activeCase, strategyOpen]);

  return (
    <>
      <Nav wordmark={tweaks.wordmark} />
      <Hero layout={tweaks.heroLayout} />
      <Logos />
      <Positioning />
      <Methodik />
      <Leistungen />
      <PMFocus />
      <Cases onOpen={setActiveCase} />
      <About />
      <Network />
      <CTA />
      <Footer />

      <CaseDrawer activeCase={activeCase} onClose={() => setActiveCase(null)} />
      <StrategyDrawer open={strategyOpen} onClose={() => setStrategyOpen(false)} />

      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);