/* global React */
const { useState, useEffect, useRef } = React;

/* Microsoft Bookings link — used by every direct "Erstgespräch buchen" CTA. */
const BOOKINGS_URL = "https://outlook.office.com/bookwithme/user/f2a3b6ab6e2a49f588b905f27d6d15ca@micheler.eu/meetingtype/SVRwCe7HMUGxuT6WGxi68g2?anonymous&ismsaljsauthenabled&ep=mlink";

/* ---------- Helpers ---------- */

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Fallback: ensure visible regardless of IntersectionObserver availability/firing.
    const fallback = setTimeout(() => el.classList.add('in'), 80);
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add('in')),
      { threshold: 0.12 }
    );
    io.observe(el);
    return () => { clearTimeout(fallback); io.disconnect(); };
  }, []);
  return ref;
}

function Topo({ seed = 0, opacity = 0.18, lines = 9 }) {
  // Procedural topographic contour lines: calm, alpine, abstract.
  // Generated as smooth bezier curves with vertical offset.
  const paths = [];
  const W = 1600, H = 700;
  for (let i = 0; i < lines; i++) {
    const baseY = (H / (lines + 1)) * (i + 1);
    const amp = 30 + ((i + seed) % 4) * 14;
    const segs = 8;
    let d = `M -50 ${baseY}`;
    for (let s = 1; s <= segs; s++) {
      const x = (W / segs) * s + 50;
      const y = baseY + Math.sin((s + i + seed) * 1.1) * amp;
      const cx = x - W / segs / 2;
      const cy = baseY + Math.sin((s + i + seed - 0.5) * 1.1) * amp * 1.3;
      d += ` Q ${cx} ${cy} ${x} ${y}`;
    }
    paths.push(d);
  }
  return (
    <svg className="topo" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice" aria-hidden style={{ opacity }}>
      {paths.map((d, i) => (
        <path key={i} d={d} />
      ))}
    </svg>
  );
}

function ArrowRight({ className = "arrow" }) {
  return (
    <svg className={className} viewBox="0 0 14 10" fill="none">
      <path d="M0 5h12M8 1l4 4-4 4" stroke="currentColor" strokeWidth="1.2" />
    </svg>
  );
}

/* ---------- Nav ---------- */

function Nav({ wordmark = 'mono' }) {
  const [active, setActive] = useState('intro');
  useEffect(() => {
    const ids = ['intro', 'positionierung', 'methodik', 'leistungen', 'arbeiten', 'netzwerk', 'simon', 'kontakt'];
    const observers = ids.map((id) => {
      const el = document.getElementById(id);
      if (!el) return null;
      const io = new IntersectionObserver(
        ([e]) => { if (e.isIntersecting) setActive(id); },
        { rootMargin: "-40% 0px -55% 0px" }
      );
      io.observe(el);
      return io;
    });
    return () => observers.forEach(o => o && o.disconnect());
  }, []);

  const link = (id, label) => (
    <a href={`#${id}`} className={active === id ? 'active' : ''}>
      {label}
    </a>
  );

  const lockup = {
    logo: (
      <span className="logo-lockup">
        <img
          src="assets/ki-alpin-icon-only.svg"
          alt=""
          className="logo-mark"
          width="40"
          height="40"
        />
        <span className="logo-wordmark">
          <span className="logo-wordmark-text">KI ALPIN</span>
          <span className="logo-wordmark-tagline">Workshops · Lösungen · Umsetzung</span>
        </span>
      </span>
    ),
    mono: (
      <>
        <span className="dot"></span>
        <span>KI ALPIN<span style={{ opacity: 0.5, marginLeft: 6 }}>/ MICHELER</span></span>
      </>
    ),
    serif: (
      <span style={{ fontFamily: 'var(--serif)', fontSize: 22, letterSpacing: '-0.01em', textTransform: 'none', color: 'var(--primary)' }}>
        Ki Alpin<span style={{ color: 'var(--accent)' }}>.</span>
      </span>
    ),
    badge: (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 28, height: 28, background: 'var(--primary)', color: 'var(--bg)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--serif)', fontSize: 14 }}>KA</span>
        <span>KI ALPIN</span>
      </span>
    ),
    italic: (
      <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, textTransform: 'none', letterSpacing: '-0.01em', color: 'var(--primary)' }}>
        Micheler<span style={{ fontFamily: 'var(--mono)', fontStyle: 'normal', fontSize: 11, marginLeft: 10, letterSpacing: '0.18em', opacity: 0.7 }}>KI-Strategie</span>
      </span>
    )
  };

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#intro" className="logo">
          {lockup[wordmark] || lockup.logo}
        </a>
        <div className="nav-links">
          {link('positionierung', 'Ansatz')}
          {link('methodik', 'Methodik')}
          {link('pm-focus', 'KI im PM')}
          {link('leistungen', 'Leistungen')}
          {link('arbeiten', 'Referenzprojekte')}
          {link('simon', 'Team')}
        </div>
        <div className="nav-cta">
          <a href="#kontakt" className="mono-link" style={{ display: 'none' }}>DE / EN</a>
          <a href={BOOKINGS_URL} target="_blank" rel="noopener noreferrer" className="btn ghost" style={{ padding: '12px 18px', fontSize: 13 }}>
            Erstgespräch
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Hero ---------- */

function Hero({ layout = 'editorial' }) {
  const ref = useReveal();

  if (layout === 'manifesto') {
    return (
      <section className="hero hero-manifesto" id="intro">
        <Topo seed={1} />
        <div className="wrap" ref={ref}>
          <div className="hero-meta reveal in">
            <span className="mono">KI-Lösungen & Umsetzung · Wien / DACH</span>
            
          </div>
          <div className="reveal in" style={{ textAlign: 'center', padding: '40px 0' }}>
            <span className="eyebrow no-line">Strategische KI für den DACH-Raum</span>
            <h1 className="h-display" style={{ marginTop: 24, fontSize: 'clamp(56px, 9.5vw, 160px)' }}>
              KI, die <span className="em">arbeitet</span>.<br/>Nicht beeindruckt.
            </h1>
            <p className="hero-claim" style={{ margin: '32px auto 0', textAlign: 'center' }}>
              Wir übersetzen KI von der Idee in Prozesse, die Ihr Team morgen früh nutzt. Strategisch beraten,
              ehrlich umgesetzt, im Tempo Ihres Unternehmens.
            </p>
            <div className="hero-actions" style={{ justifyContent: 'center', marginTop: 32 }}>
              <a href={BOOKINGS_URL} target="_blank" rel="noopener noreferrer" className="btn">Erstgespräch buchen</a>
              <a href="#methodik" className="link">Wie wir arbeiten</a>
            </div>
          </div>
        </div>
        <div className="wrap" style={{ marginTop: 64 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0, border: '1px solid var(--rule)' }} className="hero-strip">
            <div style={{ aspectRatio: '4/3', borderRight: '1px solid var(--rule)' }}>
              <image-slot id="hero-strip-1" style={{ width: '100%', height: '100%', display: 'block' }} shape="rect" placeholder="Workshop-Szene"></image-slot>
            </div>
            <div style={{ aspectRatio: '4/3', borderRight: '1px solid var(--rule)' }}>
              <image-slot id="hero-strip-2" style={{ width: '100%', height: '100%', display: 'block' }} shape="rect" placeholder="Simon Portrait"></image-slot>
            </div>
            <div style={{ aspectRatio: '4/3' }}>
              <image-slot id="hero-strip-3" style={{ width: '100%', height: '100%', display: 'block' }} shape="rect" placeholder="Whiteboard · Diagram"></image-slot>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="hero" id="intro">
      <Topo seed={1} />
      <div className="wrap" ref={ref}>
        <div className="hero-meta reveal in">
          <span className="mono">KI-Lösungen & Umsetzung · Wien / DACH</span>
          
        </div>

        <div className="hero-grid">
          <div className="hero-lead reveal in">
            <div className="hero-lead-top">
              <h1 className="h-display">
                KI, die <span className="em">arbeitet</span>.<br/>
                Nicht beeindruckt.
              </h1>
              <p className="hero-claim">
                Wir übersetzen KI von der Idee in Prozesse, die Ihr Team morgen früh nutzt. Strategisch beraten,
                ehrlich umgesetzt, im Tempo Ihres Unternehmens.
              </p>
            </div>
            <div className="hero-lead-foot">
              <div className="hero-actions">
                <a href={BOOKINGS_URL} target="_blank" rel="noopener noreferrer" className="btn">Erstgespräch buchen</a>
                <a href="#methodik" className="link">Wie wir arbeiten</a>
              </div>
            </div>
          </div>

          <div className="hero-aside reveal in">
            <div className="portrait-wrap">
              <image-slot
                id="hero-portrait"
                style={{ width: '100%', height: '100%', display: 'block' }}
                shape="rect"
                placeholder="Portrait Simon · Workshop · soft daylight"
              ></image-slot>
              <span className="portrait-overlay">Simon Micheler · Founder</span>
            </div>

            <div className="authority-block">
              <div className="authority-caption">
                <div className="authority-name">Simon Micheler</div>
                <div className="authority-credentials">
                  Autor „Digital Translator" (Linde Verlag) · Oxford AI Programme
                </div>
              </div>

              <hr className="authority-rule" />

              <div className="authority-stats">
                <div className="authority-stat">
                  <div className="authority-stat-num">32</div>
                  <div className="authority-stat-label mono">Generative-KI-Projekte mit Agents</div>
                </div>
                <div className="authority-stat">
                  <div className="authority-stat-num">40+</div>
                  <div className="authority-stat-label mono">Workshops im DACH-Raum</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Logo strip ---------- */

function Logos() {
  const ref = useReveal();
  const logos = [
    ['innio', 'INNIO'],
    ['oegk', 'ÖGK'],
    ['acp', 'ACP'],
    ['vinzenz', 'Vinzenz Gruppe'],
    ['austro-control', 'Austro Control'],
    ['handler', 'Handler'],
    ['wifi-mf', 'WIFI Management Forum'],
    ['marktkraft', 'Marktkraft'],
    ['alpenverein', 'Alpenverein Österreich'],
    ['madnice', 'MAD NICE'],
    ['swiss-krono', 'Swiss Krono'],
    ['binder-groesswang', 'Binder Grösswang'],
    ['webhotels', 'Webhotels Thermen & Wellness'],
    ['le-burger', 'Le Burger'],
    ['brainds', 'Brainds'],
    ['meistergilde', 'Meistergilde Kitzbühel'],
    ['voedu', 'VÖDU'],
    ['zeno', 'Zeno'],
    ['die-umsetzer', 'Die Umsetzer'],
    ['zehetbauer', 'Zehetbauer Fertigrasen'],
    ['guntramsdorf', 'Marktgemeinde Guntramsdorf'],
  ];
  // Duplicate the set so the track can loop seamlessly.
  const loop = logos.concat(logos);
  return (
    <section className="logos" aria-label="Im Einsatz bei">
      <div className="logos-marquee">
        <div className="logos-track" role="list" ref={ref}>
          {loop.map(([slug, name], i) => (
            <div className="logo-cell" role="listitem" key={`${slug}-${i}`} aria-hidden={i >= logos.length ? 'true' : undefined}>
              <img src={`assets/logos/${slug}.webp`} alt={name} title={name} loading="lazy" width="220" height="84" />
            </div>
          ))}
        </div>
        <span className="logos-fade logos-fade--l" aria-hidden="true"></span>
        <span className="logos-fade logos-fade--r" aria-hidden="true"></span>
      </div>
    </section>
  );
}

Object.assign(window, { useReveal, Topo, ArrowRight, Nav, Hero, Logos });