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

/* ──────────────────────────────────────────────────────────────
   Icons
   ────────────────────────────────────────────────────────────── */

function ArrowUR({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ArrowDown({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M7 2V12M7 12L2.5 7.5M7 12L11.5 7.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function StarMark({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 1 L13.5 9.5 L22 11 L13.5 12.5 L12 21 L10.5 12.5 L2 11 L10.5 9.5 Z" fill="currentColor" />
    </svg>
  );
}

/* ──────────────────────────────────────────────────────────────
   Fade-in hook
   ────────────────────────────────────────────────────────────── */

function useFadeIn() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    el.querySelectorAll('.fade-in').forEach((n) => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ──────────────────────────────────────────────────────────────
   Top Nav (sticky)
   ────────────────────────────────────────────────────────────── */

function TopNav() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('');
  useEffect(() => {
    const ids = ['ueber-mich', 'leistungen', 'pakete', 'kontakt'];
    const on = () => {
      setScrolled(window.scrollY > 60);
      let cur = '';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= window.innerHeight * 0.4) cur = id;
      }
      setActive(cur);
    };
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'background .3s, border-color .3s, box-shadow .3s',
      background: scrolled ? 'var(--cream)' : 'transparent',
      borderBottom: scrolled ? '1px solid rgba(15,26,46,0.1)' : '1px solid transparent',
    }}>
      <div className="shell-wide" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px var(--gutter)'
      }}>
        <a href="#top" style={{
          display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'inherit'
        }}>
          <span style={{ fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 18, letterSpacing: '-0.01em' }}>
            Aleksandra Krajic
          </span>
        </a>
        <nav style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {['Über mich', 'Leistungen', 'Pakete'].map((it) => {
            const id = it.toLowerCase().replace(/\s/g, '-').replace('über', 'ueber');
            return (
              <a key={it} href={`#${id}`}
                style={{
                  padding: '10px 16px', fontSize: 14, textDecoration: 'none',
                  color: 'var(--ink)',
                  background: 'transparent',
                  borderRadius: 999, fontWeight: 500,
                  transition: 'transform .25s ease, background .2s, color .2s',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.color = 'var(--cream-soft)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.transform = 'translateY(0)'; }}
              >{it}</a>
            );
          })}
          <a href="#kontakt" className="btn btn-yellow" style={{ marginLeft: 8, padding: '11px 18px 12px', fontSize: 13, boxShadow: 'none' }}>
            Kontakt
          </a>
        </nav>
      </div>
    </header>
  );
}

/* ──────────────────────────────────────────────────────────────
   HERO — three layout variants
   ────────────────────────────────────────────────────────────── */

function Hero({ variant }) {
  if (variant === 'editorial') return <HeroEditorial />;
  if (variant === 'magazine') return <HeroMagazine />;
  return <HeroSplit />;
}

/* Variant A — Editorial / split with portrait */
function HeroSplit() {
  return (
    <section id="top" style={{
      paddingTop: 132, paddingBottom: 64,
      background: 'var(--blue)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div className="shell-wide">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 48 }}>
          <span className="mono" style={{ color: 'var(--ink-60)' }}>
            <span className="mono-sm" style={{ marginRight: 8 }}>(01)</span>
            5 Jahre Unternehmenspraxis
          </span>
          <span className="mono mono-sm" style={{ color: 'var(--ink-60)' }}>Standort · Remote / DACH</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.55fr) minmax(0,1fr)', gap: 56, alignItems: 'end' }}>
          <div>
            <h1 className="display display-xl" style={{ marginBottom: 28 }}>
              Mehr Struktur.<br />
              Weniger <span className="italic">Chaos</span>.
            </h1>
            <div style={{ display: 'flex', gap: 36, alignItems: 'flex-end', flexWrap: 'wrap' }}>
              <p style={{
                fontSize: 19, lineHeight: 1.45, maxWidth: 460, color: 'var(--ink-80)', margin: 0,
              }}>
                Ich unterstütze Unternehmer und KMU bei der Organisation, Koordination
                und Umsetzung ihrer operativen Geschäftsprozesse - damit du dich auf
                dein Kerngeschäft konzentrieren kannst.
              </p>
              <div style={{ display: 'flex', gap: 12 }}>
                <a href="#kontakt" className="btn btn-yellow">
                  Kennenlerngespräch
                  <span className="btn-icon"><ArrowUR /></span>
                </a>
                <a href="#leistungen" className="btn btn-ghost" style={{ background: 'transparent', borderColor: 'var(--ink)' }}>
                  Leistungen
                  <span className="btn-icon" style={{ background: 'var(--ink)', color: 'var(--cream-soft)' }}><ArrowDown size={11} /></span>
                </a>
              </div>
            </div>
          </div>

          <div className="portrait" style={{ aspectRatio: '4/5', minHeight: 460 }} />
        </div>
      </div>
    </section>
  );
}

/* Variant B — Editorial / typography forward */
function HeroEditorial() {
  return (
    <section id="top" style={{
      paddingTop: 96, paddingBottom: 48,
      background: 'var(--blue)',
      position: 'relative', overflow: 'hidden',
      boxSizing: 'border-box',
      minHeight: 'calc(96svh - 88px)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
    }}>
      <div className="shell-wide" style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 48, gap: 24 }}>
        </div>

        <h1 className="display" style={{
          fontSize: 'clamp(84px, 14vw, 250px)',
          textAlign: 'center',
          lineHeight: 0.88,
          letterSpacing: '-0.025em',
        }}>
          Business.<br />
          <span className="italic">Organisiert.</span>
        </h1>

        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28,
          textAlign: 'center',
          marginTop: 88,
        }}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-80)', margin: 0 }}>
            <span style={{ whiteSpace: 'nowrap' }}>Du führst dein Business. Ich halte den Rest am Laufen.</span><br />
            Remote Unterstützung für Organisation, Backoffice, Projekte, Kunden &amp; Kommunikation.
          </p>
          <a href="#kontakt" className="btn btn-yellow hero-cta" style={{ paddingLeft: 26, paddingRight: 22, gap: 12 }}>
            Verfügbarkeit anfragen
            <span style={{
              display: 'grid', placeItems: 'center', flexShrink: 0,
              color: 'var(--ink)',
            }}>
              <svg width="18" height="18" viewBox="0 0 14 14" fill="none">
                <path d="M2.5 7H11.5M11.5 7L7.5 3M11.5 7L7.5 11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* Variant C — Magazine / quote led */
function HeroMagazine() {
  return (
    <section id="top" style={{
      paddingTop: 132, paddingBottom: 64,
      background: 'var(--blue)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div className="shell-wide">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.4fr)', gap: 64, alignItems: 'stretch' }}>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <span className="eyebrow">Business Operations - 2026</span>
              <h1 className="display display-md" style={{ marginTop: 28, fontSize: 'clamp(40px, 5.4vw, 88px)' }}>
                Aleksandra<br />
                <span className="italic">Krajic</span>
              </h1>
              <p className="mono" style={{ color: 'var(--ink-60)', marginTop: 14 }}>
                5 Jahre Praxis · KMU-Fokus
              </p>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 32 }}>
              <a href="#kontakt" className="btn btn-yellow">
                Kennenlernen
                <span className="btn-icon"><ArrowUR /></span>
              </a>
            </div>
          </div>

          <div style={{
            background: 'var(--cream-soft)',
            borderRadius: 'var(--radius-lg)',
            padding: '56px 56px 48px',
            position: 'relative',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32,
          }}>
            <div style={{
              position: 'absolute', top: 24, right: 28,
              fontFamily: 'var(--f-serif)', fontSize: 120, lineHeight: 0.7,
              color: 'var(--yellow)', fontStyle: 'italic',
            }}>"</div>
            <p className="display display-sm" style={{
              fontFamily: 'var(--f-serif)', fontStretch: 'normal', fontWeight: 400, fontStyle: 'italic',
              fontSize: 'clamp(32px, 4.2vw, 64px)', letterSpacing: '-0.04em', lineHeight: 1.05,
            }}>
              Ich erledige nicht nur Aufgaben. Ich übernehme <em style={{ background: 'var(--yellow)', padding: '0 8px', fontStyle: 'italic' }}>Verantwortung</em> für deine Abläufe.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div className="portrait" style={{ width: 64, height: 64, borderRadius: 999 }} />
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>Aleksandra Krajic</div>
                <div className="mono mono-sm" style={{ color: 'var(--ink-60)' }}>Remote · DACH</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Marquee strip
   ────────────────────────────────────────────────────────────── */

function Marquee() {
  const items = [
    'Postfach sortiert',
    'Backoffice organisiert',
    'Projekt umgesetzt',
    'Abläufe automatisiert',
    'Prozesse dokumentiert',
    'Kunden betreut',
    'Vertrieb unterstützt',
    'CRM gepflegt',
    'Kommunikation gesteuert',
    'Website aktualisiert',
  ];
  const Row = () => (
    <span className="marquee-track">
      {items.map((it, i) => (
        <span key={i} className="marquee-item">
          <span className="italic">{it}</span>
          <span className="star" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M12 2 L14.6 8.6 L21.6 9.2 L16.2 13.8 L17.9 20.8 L12 17 L6.1 20.8 L7.8 13.8 L2.4 9.2 L9.4 8.6 Z" fill="currentColor" />
            </svg>
          </span>
        </span>
      ))}
    </span>
  );
  return (
    <div className="marquee" style={{ background: 'var(--blue-deep)' }}>
      <Row /><Row />
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   About
   ────────────────────────────────────────────────────────────── */

function About() {
  const ref = useFadeIn();
  return (
    <section id="ueber-mich" ref={ref} style={{ background: 'var(--cream)', paddingTop: 64, paddingBottom: 64 }}>
      <div className="shell">
        <div className="fade-in" style={{ maxWidth: 720, marginBottom: 32 }}>
          <span className="eyebrow">Über mich</span>
          <h2 className="display display-lg" style={{ marginTop: 24 }}>
            Hi, ich bin <span className="italic">Aleksandra</span>.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 300px', gap: 64, alignItems: 'center' }}>
          <div className="fade-in" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <p style={{ fontSize: 18, lineHeight: 1.6, margin: 0, color: 'var(--ink)' }}>
              Keine KI, sondern HI (Human Intelligence). Ich bin die, die den Überblick behält, wenn dir gerade zehn Dinge gleichzeitig um die Ohren fliegen.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.6, margin: 0, color: 'var(--ink)' }}>
              Fünf Jahre Administration haben mir eins beigebracht: Chaos macht mir
              nichts aus, ich räume es einfach weg.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.6, margin: 0, color: 'var(--ink)' }}>
              Du willst niemanden fest anstellen, brauchst aber jemanden, der die
              Arbeit zuverlässig übernimmt?<br />
              Genau dafür bin ich da: remote, verlässlich und monatlich buchbar.
            </p>
          </div>

          <div className="fade-in" style={{ position: 'relative', width: '100%', maxWidth: 300, justifySelf: 'center', alignSelf: 'center' }}>
            <div style={{
              position: 'absolute', inset: 0, transform: 'translate(14px, 14px)',
              background: 'var(--yellow)', borderRadius: 18,
            }}></div>
            <image-slot id="portrait-aleksandra-2" shape="rounded" radius="18" fit="cover"
              placeholder="Foto folgt"
              alt="Porträt von Aleksandra Krajic, Business Operations Support"
              style={{
                width: '100%', aspectRatio: '4/5', display: 'block', position: 'relative',
                border: '1px solid var(--ink)',
              }}></image-slot>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Services (with filter chips)
   ────────────────────────────────────────────────────────────── */

const SERVICES = [
  { cat: 'Organisation & Backoffice', title: 'Executive Support', body: 'Du musst nicht alles selbst im Blick behalten. Ob Postfach, Termine, Kalender oder Reiseplanung, ich halte dir im Tagesgeschäft den Rücken frei.' },
  { cat: 'Organisation & Backoffice', title: 'Backoffice & Administration', body: 'Weniger Kleinkram auf deiner To-do-Liste. Ich kümmere mich um administrative Abläufe und wiederkehrende Aufgaben, die Zeit kosten, aber nicht deine Aufmerksamkeit verdienen.' },

  { cat: 'Projekte & Automatisierung', title: 'Projektmanagement', body: 'Von „Wir müssten mal …“ zu „Ist erledigt.“ Ich koordiniere Aufgaben, Deadlines und Beteiligte und halte Projekte auf Kurs, von der Idee bis zur Umsetzung.' },
  { cat: 'Projekte & Automatisierung', title: 'Digitale Tools & Automatisierung', body: 'Weniger klicken. Weniger nachfassen. Mehr erledigt. Ich strukturiere deine Tools und automatisiere wiederkehrende Abläufe, damit dein Business effizienter läuft.' },
  { cat: 'Projekte & Automatisierung', title: 'Onboarding & Prozessdokumentation', body: 'Neue Mitarbeitende sind schneller startklar und dein Wissen bleibt im Unternehmen. Ich baue klare Abläufe und Anleitungen auf.' },

  { cat: 'Vertrieb & Kunden', title: 'Kundenbetreuung', body: 'Deine Kunden fühlen sich gut aufgehoben, auch wenn du gerade keine Zeit hast. Ich begleite sie vom ersten Kontakt bis zur langfristigen Bindung.' },
  { cat: 'Vertrieb & Kunden', title: 'Vertrieb & Sales Support', body: 'Kein Lead geht mehr verloren. Ich übernehme Leadrecherche, Angebotsvorbereitung und die konsequente Nachverfolgung.' },
  { cat: 'Vertrieb & Kunden', title: 'CRM & Datenpflege', body: 'Du hast jederzeit den Überblick über deine Kontakte. Ich halte dein CRM aktuell und strukturiert, damit nichts verloren geht.' },

  { cat: 'Kommunikation & Content', title: 'Kommunikationsmanagement', body: 'Deine Kommunikation läuft, auch wenn du im Termin sitzt. Ich betreue Kunden, Lieferanten und Partner professionell und in deinem Ton.' },
  { cat: 'Kommunikation & Content', title: 'Content & Website Management', body: 'Dein Außenauftritt bleibt aktuell, ohne dass du dich darum kümmern musst. Ich pflege Website, Inhalte und digitale Kanäle.' },
];

const CATEGORIES = ['Alle', 'Organisation & Backoffice', 'Projekte & Automatisierung', 'Vertrieb & Kunden', 'Kommunikation & Content'];

function Services() {
  const [filter, setFilter] = useState('Alle');
  const ref = useFadeIn();
  const filtered = filter === 'Alle' ? SERVICES : SERVICES.filter((s) => s.cat === filter);

  return (
    <section id="leistungen" ref={ref} style={{ background: 'var(--blue)' }}>
      <div className="shell-wide">
        <div style={{ marginBottom: 40 }}>
          <div className="fade-in">
            <span className="eyebrow">Leistungen</span>
            <h2 className="display display-lg" style={{ marginTop: 24 }}>
              Das erledige <span className="italic">ich</span>:
            </h2>
          </div>
          <p className="fade-in" style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-80)', margin: '20px 0 0', maxWidth: 980 }}>
            Von Executive Support und Backoffice über Projekte und Automatisierung bis hin zu Kommunikationsmanagement.<br />
            Ich übernehme die Aufgaben, die dein Tagesgeschäft am Laufen halten: zuverlässig, strukturiert und remote.<br />
            Ob einzelne Unterstützung oder als Gesamtpaket: Du bekommst genau die Entlastung, die zu deinem Unternehmen passt.
          </p>
        </div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 40 }}>
          {CATEGORIES.map((c) => (
            <button key={c} className="chip" data-active={c === filter} onClick={() => setFilter(c)}>
              {c}
            </button>
          ))}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0,1fr))', gridAutoRows: '1fr', gap: 16,
        }}>
          {filtered.map((s) => {
            return (
              <article key={s.title} className="surface service-card"
                style={{ minHeight: 300, padding: '38px 32px 40px', justifyContent: 'flex-start' }}>
                <span className="card-arrow" aria-hidden="true">
                  <ArrowUR size={13} />
                </span>
                <h3 className="display display-sm" lang="de" style={{ fontSize: 24, lineHeight: 1.08, hyphens: 'auto', overflowWrap: 'break-word' }}>
                  {s.title}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.5, color: 'var(--ink-80)', margin: '4px 0 0' }}>
                  {s.body}
                </p>
              </article>
            );
          })}
        </div>

        <div style={{ marginTop: 48, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24, paddingLeft: 8, paddingRight: 8 }}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-80)', maxWidth: 520, margin: 0 }}>
            Dein Anliegen ist nicht dabei? Kein Problem. <em style={{
              fontFamily: 'var(--f-serif)', fontStyle: 'italic', letterSpacing: '-0.04em',
              fontSize: 20,
              background: 'linear-gradient(104deg, transparent 0.5%, var(--yellow) 2.5%, var(--yellow) 97%, transparent 99%)',
              padding: '2px 6px 3px',
              marginLeft: -4,
              boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone',
            }}>Lass uns über das reden, was du wirklich brauchst.</em>
          </p>
          <a href="#kontakt" className="btn hero-cta no-wiggle" style={{ background: 'var(--ink)', color: 'var(--cream-soft)', gap: 12 }}>
            Anliegen besprechen
            <span style={{
              display: 'grid', placeItems: 'center', flexShrink: 0,
              color: 'var(--cream-soft)',
            }}>
              <svg width="18" height="18" viewBox="0 0 14 14" fill="none">
                <path d="M2.5 7H11.5M11.5 7L7.5 3M11.5 7L7.5 11" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TopNav, Hero, Marquee, About, Services, ArrowUR, ArrowDown, useFadeIn });
