/* === Work — perspective card stack on a 3D table === */

const PROJECTS = [
{
  n: "01",
  name: "ImmoPlatform",
  short: "ImmoPlatform",
  sub: "Real-Estate-Plattform für Bauträger und Verwalter",
  blurb: "Vollständige Operations-Plattform für Immobilien­projekte — von der Bauphase über Vermietung bis zur Mietabrechnung. 94 Routen, 60 API-Endpoints, RBAC mit 6 Rollen, Channel-Sync zu ImmoScout24, AES-256-Token-Verschlüsselung und PII-redactedem Audit-Trail. Codebase: 1.211 Zeilen Prisma-Schema, 56 Komponenten.",
  role: "Produkt · Architektur · Full-Stack",
  year: "2026 — heute",
  stack: ["Next.js 15", "React 19", "TypeScript", "Postgres", "Prisma", "NextAuth", "Supabase", "Three.js"],
  href: "https://omniacore.net",
  external: true,
  accent: "var(--accent)",
  layout: "wide"
},
{
  n: "02",
  name: "AetherSort",
  sub: "KI-gestütztes Dateisystem mit Claude Haiku",
  blurb: "Lade Dokumente hoch — Claude Haiku klassifiziert automatisch nach Kategorie und Konfidenz, gruppiert Dateien zu Projekten und extrahiert Metadaten. BullMQ verarbeitet asynchron, sicheres ZIP-Entpacken (1000 Files / 500 MB Limit), Feedback-Loop lernt aus deinen Korrekturen. Web-Oberfläche zum Suchen und Verwalten.",
  role: "Engineering · KI-Pipeline · UX",
  year: "2026 — heute",
  stack: ["TypeScript", "Next.js", "Express", "BullMQ", "Claude Haiku", "Prisma"],
  href: "#",
  accent: "var(--accent)",
  layout: "tall"
},
{
  n: "03",
  name: "Claude Dashboard",
  sub: "AI-Operations-Dashboard, accessibility-first",
  blurb: "Persönliches Dashboard für Claude-Sessions, Swarm-Jobs und KI-Aktivitäten. Backend nutzt die lokale Claude-CLI statt Anthropic-API → 0 € pro Request. WCAG-AA-konform von Tag eins, SQLite lokal, Health-Check für Auth-Status. Beweist: KI-Tools können sauber und ohne API-Key-Kosten gebaut werden.",
  role: "Engineering · Accessibility · Tooling",
  year: "2026",
  stack: ["Next.js", "Tailwind", "Express", "SQLite", "Claude CLI", "pnpm"],
  href: "#",
  accent: "var(--accent)",
  layout: "square"
}];


/* Faux project thumbnail — abstract geometric placeholder per project */
const OmniaBuilding3D = () => {
  // Modern 6-floor residential block, sauber konstruiert.
  // Jede Fläche wird um den Box-Mittelpunkt platziert: translate(-50%,-50%) + Rotation + translateZ(halbe-Tiefe).
  const FLOORS = 6;
  const W = 150; // building width  (x)
  const D = 100; // building depth  (z)
  const FH = 30; // floor height
  const H = FLOORS * FH; // total building height

  const wallLight = "linear-gradient(180deg, #efeae0 0%, #ddd6c8 100%)";
  const wallSide = "linear-gradient(180deg, #cfc8b8 0%, #a9a293 100%)";
  const wallBack = "linear-gradient(180deg, #b8b1a2 0%, #908a7c 100%)";
  const glass = "linear-gradient(135deg, rgba(120,170,190,0.55) 0%, rgba(50,80,100,0.92) 100%)";
  const glassDark = "linear-gradient(135deg, rgba(40,60,75,0.95) 0%, rgba(15,25,35,0.98) 100%)";

  // Window grid for one face
  const Windows = ({ cols, rows, faceW, faceH, padX = 12, padY = 12 }) => {
    const cw = (faceW - padX * 2) / cols;
    const ch = (faceH - padY * 2) / rows;
    const cells = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        cells.push(
          <div key={`${r}-${c}`} style={{
            position: "absolute",
            left: padX + c * cw + 4,
            top: padY + r * ch + 4,
            width: cw - 8,
            height: ch - 12,
            background: r % 2 === 0 ? glass : glassDark,
            boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.3), inset 0 -2px 0 rgba(255,255,255,0.08)"
          }} />
        );
      }
    }
    return <>{cells}</>;
  };

  // Slab lines on a face
  const SlabLines = ({ faceW, faceH, count }) =>
  [...Array(count - 1)].map((_, i) =>
  <div key={i} style={{
    position: "absolute", left: 0, width: faceW,
    top: (i + 1) * (faceH / count) - 1, height: 2,
    background: "rgba(0,0,0,0.4)"
  }} />
  );

  // Helper for placing a face centered on a box
  // The box is centered at the origin; each face is positioned by translating to center then rotating + pushing out
  const facePos = (transform) => ({
    position: "absolute",
    left: "50%", top: "50%",
    transform: `translate(-50%, -50%) ${transform}`,
    transformOrigin: "center center"
  });

  return (
    <div style={{
      position: "absolute", inset: 0,
      background: "radial-gradient(ellipse at 50% 35%, #2c2b27 0%, #14140f 70%, #0F0F0E 100%)",
      overflow: "hidden",
      perspective: 1400,
      perspectiveOrigin: "50% 45%"
    }}>
      {/* ground plane */}
      <div style={{
        position: "absolute",
        left: "50%", top: "78%",
        width: 600, height: 600,
        marginLeft: -300, marginTop: -300,
        transform: "rotateX(80deg)",
        background: "radial-gradient(ellipse at center, rgba(242,240,235,0.06) 0%, rgba(242,240,235,0) 60%)"
      }} />

      {/* contact shadow */}
      <div style={{
        position: "absolute",
        left: "50%", top: "75%",
        width: 240, height: 50,
        marginLeft: -120, marginTop: -10,
        background: "radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%)",
        filter: "blur(3px)"
      }} />

      {/* rotating stage — origin at building base center */}
      <div style={{
        position: "absolute",
        left: "50%", top: "70%",
        width: 0, height: 0,
        transformStyle: "preserve-3d",
        animation: "ocBuildingSpin 28s linear infinite"
      }}>
        {/* building box — centered on its own center */}
        <div style={{
          position: "absolute",
          width: W, height: H,
          left: -W / 2,
          top: -H, // base sits on origin
          transformStyle: "preserve-3d"
        }}>
          {/* FRONT */}
          <div style={{
            ...facePos(`rotateY(0deg) translateZ(${D / 2}px)`),
            width: W, height: H,
            background: wallLight,
            boxShadow: "inset 0 0 60px rgba(0,0,0,0.18)"
          }}>
            <Windows cols={5} rows={FLOORS} faceW={W} faceH={H} />
            <SlabLines faceW={W} faceH={H} count={FLOORS} />
            {/* entrance */}
            <div style={{
              position: "absolute", left: W / 2 - 16, bottom: 0,
              width: 32, height: 24, background: glassDark,
              borderTop: "2px solid #1a1a17"
            }} />
            {/* accent balcony band */}
            <div style={{
              position: "absolute",
              left: W * 0.08, top: H * 0.5 - 2,
              width: W * 0.6, height: 4,
              background: "var(--accent)",
              boxShadow: "0 2px 6px rgba(0,0,0,0.5)"
            }} />
          </div>

          {/* BACK */}
          <div style={{
            ...facePos(`rotateY(180deg) translateZ(${D / 2}px)`),
            width: W, height: H,
            background: wallBack
          }}>
            <Windows cols={5} rows={FLOORS} faceW={W} faceH={H} />
            <SlabLines faceW={W} faceH={H} count={FLOORS} />
          </div>

          {/* RIGHT */}
          <div style={{
            ...facePos(`rotateY(90deg) translateZ(${W / 2}px)`),
            width: D, height: H,
            background: wallSide
          }}>
            <Windows cols={3} rows={FLOORS} faceW={D} faceH={H} padX={10} />
            <SlabLines faceW={D} faceH={H} count={FLOORS} />
          </div>

          {/* LEFT */}
          <div style={{
            ...facePos(`rotateY(-90deg) translateZ(${W / 2}px)`),
            width: D, height: H,
            background: wallSide
          }}>
            <Windows cols={3} rows={FLOORS} faceW={D} faceH={H} padX={10} />
            <SlabLines faceW={D} faceH={H} count={FLOORS} />
          </div>

          {/* ROOF — placed explicitly: sits flat at top of building (y = 0), spans W × D in the XZ-plane */}
          <div style={{
            position: "absolute",
            left: 0, top: 0,
            width: W, height: D,
            transformOrigin: "0 0",
            transform: `translateZ(${-D / 2}px) rotateX(90deg)`,
            background: "linear-gradient(135deg,#3a3a34 0%, #1d1d19 100%)",
            boxShadow: "inset 0 0 30px rgba(0,0,0,0.5)"
          }}>
            {/* terrace railing */}
            <div style={{
              position: "absolute", inset: 10,
              border: "1px solid rgba(242,240,235,0.3)"
            }} />
            {/* rooftop volume (penthouse / technical) */}
            <div style={{
              position: "absolute",
              left: W * 0.18, top: D * 0.22,
              width: W * 0.45, height: D * 0.55,
              background: "linear-gradient(180deg,#4a4a44 0%, #222 100%)",
              boxShadow: "0 3px 6px rgba(0,0,0,0.5)"
            }} />
            {/* solar panel hint */}
            <div style={{
              position: "absolute",
              right: W * 0.08, top: D * 0.15,
              width: W * 0.18, height: D * 0.5,
              background: "repeating-linear-gradient(90deg, #1a2838 0 6px, #243648 6px 8px)",
              border: "1px solid rgba(0,0,0,0.6)"
            }} />
          </div>

          {/* BOTTOM (helps avoid see-through near base) */}
          <div style={{
            position: "absolute",
            left: 0, top: H,
            width: W, height: D,
            transformOrigin: "0 0",
            transform: `translateZ(${-D / 2}px) rotateX(90deg)`,
            background: "#0a0a09"
          }} />
        </div>
      </div>

      <style>{`
        @keyframes ocBuildingSpin {
          0%   { transform: rotateX(-16deg) rotateY(0deg); }
          100% { transform: rotateX(-16deg) rotateY(360deg); }
        }
      `}</style>

      {/* KPI chips */}
      <div style={{
        position: "absolute", top: 14, right: 14,
        padding: "6px 10px",
        border: "1px solid rgba(242,240,235,0.2)",
        fontFamily: "var(--font-mono)", fontSize: 9, color: "rgba(242,240,235,0.85)",
        letterSpacing: "0.08em", textTransform: "uppercase",
        background: "rgba(15,15,14,0.45)",
        backdropFilter: "blur(4px)"
      }}>
        IMMOPLATFORM · 94 ROUTEN
      </div>
      <div style={{
        position: "absolute", bottom: 60, left: 14,
        fontFamily: "var(--font-mono)", fontSize: 8, color: "rgba(242,240,235,0.55)",
        letterSpacing: "0.12em", textTransform: "uppercase"
      }}>
        BAU · MIETE · CHANNEL-SYNC
      </div>
    </div>);

};

const Thumb = ({ project }) => {
  if (project.name === "ImmoPlatform") {
    return <OmniaBuilding3D />;
  }
  if (project.name === "AetherSort") {
    return <AetherSortAnim />;
  }
  // Claude Dashboard — abstract data viz
  return (
    <div style={{
      position: "absolute", inset: 0,
      background: "var(--accent)",
      overflow: "hidden"
    }}>
      <svg viewBox="0 0 400 280" preserveAspectRatio="xMidYMid slice"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {/* Grid */}
        <g stroke="rgba(15,15,14,0.18)" strokeWidth="0.5">
          {[...Array(8)].map((_, i) =>
          <line key={i} x1={i * 50} y1="0" x2={i * 50} y2="280" />
          )}
          {[...Array(6)].map((_, i) =>
          <line key={i} x1="0" y1={i * 50} x2="400" y2={i * 50} />
          )}
        </g>
        {/* Sparkline */}
        <polyline
          points="20,200 60,180 100,190 140,140 180,150 220,90 260,120 300,70 340,80 380,40"
          stroke="#0F0F0E" strokeWidth="2" fill="none" />
        
        <polyline
          points="20,220 60,210 100,200 140,180 180,170 220,140 260,150 300,120 340,110 380,95"
          stroke="rgba(15,15,14,0.4)" strokeWidth="1.5" fill="none" strokeDasharray="3 3" />
        
      </svg>
      <div style={{
        position: "absolute", top: 14, left: 14,
        fontFamily: "var(--font-mono)", fontSize: 9,
        color: "#0F0F0E", letterSpacing: "0.1em", textTransform: "uppercase"
      }}>
        SESSIONS · WCAG-AA · 0€/REQUEST
      </div>
    </div>);

};

/* Stack layout: cards live on a tilted plane */
const StackLayout = ({ projects, onHover, hoveredIdx }) => {
  return (
    <div style={{
      perspective: 2200,
      perspectiveOrigin: "50% 30%",
      padding: "var(--s-9) var(--pad)",
      minHeight: 800,
      position: "relative"
    }}>
      <div style={{
        position: "relative",
        transformStyle: "preserve-3d",
        transform: "rotateX(28deg) rotateZ(-4deg)",
        margin: "0 auto",
        maxWidth: 1100,
        height: 540
      }}>
        {projects.map((p, i) => {
          const isHovered = hoveredIdx === i;
          const positions = [
          { x: -300, y: -40, rot: -6, z: 0 },
          { x: 140, y: -130, rot: 4, z: 80 },
          { x: 260, y: 120, rot: -2, z: 40 }];

          const pos = positions[i] || positions[0];
          // Bring hovered card to top of stack so it always wins pointer events
          const zIndex = isHovered ? 99 : 10 + i;
          return (
            <a
              key={i}
              href={p.href}
              target={p.external ? "_blank" : undefined}
              rel={p.external ? "noopener noreferrer" : undefined}
              data-cursor={p.external ? "omniacore.net ↗" : "Öffnen"}
              onMouseEnter={() => onHover(i)}
              onMouseLeave={() => onHover(null)}
              style={{
                position: "absolute",
                top: "50%", left: "50%",
                zIndex,
                width: p.layout === "tall" ? 320 : p.layout === "square" ? 360 : 460,
                height: p.layout === "tall" ? 420 : p.layout === "square" ? 360 : 300,
                marginLeft: pos.x - (p.layout === "tall" ? 160 : p.layout === "square" ? 180 : 230),
                marginTop: pos.y - (p.layout === "tall" ? 210 : p.layout === "square" ? 180 : 150),
                transform: `translateZ(${isHovered ? pos.z + 80 : pos.z}px) rotateZ(${isHovered ? 0 : pos.rot}deg) rotateX(${isHovered ? -28 : 0}deg) rotateY(${isHovered ? 4 : 0}deg)`,
                transformStyle: "preserve-3d",
                transition: "transform 720ms var(--ease-out-expo), box-shadow 600ms var(--ease-out-quart)",
                boxShadow: isHovered ?
                "0 60px 80px -20px rgba(15,15,14,0.45), 0 20px 40px -10px rgba(15,15,14,0.25)" :
                "0 30px 50px -20px rgba(15,15,14,0.35), 0 12px 24px -8px rgba(15,15,14,0.15)",
                background: "var(--bg)",
                border: "1px solid var(--rule)",
                borderRadius: 18,
                overflow: "hidden",
                display: "block"
              }}>
              
              <Thumb project={p} />
              {/* Label */}
              <div style={{
                position: "absolute",
                bottom: 0, left: 0, right: 0,
                padding: 18,
                background: "linear-gradient(180deg, transparent, rgba(15,15,14,0.85))",
                color: "#F2F0EB"
              }}>
                <div className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{p.n} · {p.year}</div>
                <div style={{
                  fontFamily: "var(--font-display)",
                  fontSize: 28, lineHeight: 1, fontStyle: "italic",
                  marginTop: 4, letterSpacing: "-0.02em"
                }}>{p.name}</div>
              </div>
            </a>);

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

};

/* Editorial list layout — asymmetric column spans */
const ListLayout = ({ projects, onHover, hoveredIdx }) => {
  return (
    <div style={{ padding: "var(--s-9) 0 var(--s-10)" }}>
      {projects.map((p, i) =>
      <ProjectRow key={i} p={p} idx={i} hovered={hoveredIdx === i}
      onEnter={() => onHover(i)} onLeave={() => onHover(null)} />
      )}
    </div>);

};

const ProjectRow = ({ p, idx, hovered, onEnter, onLeave }) => {
  // alternate column allocation
  const layouts = [
  { num: "1 / span 1", title: "2 / span 6", thumb: "8 / span 5" },
  { num: "1 / span 1", title: "3 / span 5", thumb: "9 / span 4" },
  { num: "1 / span 1", title: "2 / span 7", thumb: "10 / span 3" }];

  const L = layouts[idx % 3];
  return (
    <a href={p.href}
    target={p.external ? "_blank" : undefined}
    rel={p.external ? "noopener noreferrer" : undefined}
    onMouseEnter={onEnter}
    onMouseLeave={onLeave}
    data-cursor={p.external ? "omniacore.net ↗" : "Lesen"}
    className="grid"
    style={{
      alignItems: "start",
      padding: "var(--s-7) var(--pad)",
      borderTop: "1px solid var(--rule)",
      position: "relative",
      display: "grid"
    }}>
      <div className="mono" style={{
        gridColumn: L.num,
        color: "var(--fg-muted)",
        paddingTop: 8
      }}>
        {p.n}
      </div>
      <div style={{ gridColumn: L.title }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(56px, 9vw, 132px)",
          lineHeight: 0.92,
          fontStyle: "italic",
          letterSpacing: "-0.04em",
          color: hovered ? "var(--accent)" : "var(--fg)",
          transition: "color 320ms var(--ease-out-quart)"
        }}>
          {p.name}
        </div>
        <div className="mono" style={{
          color: "var(--fg-muted)",
          marginTop: 18,
          maxWidth: "48ch",
          textTransform: "none",
          letterSpacing: "0.02em",
          fontSize: 13,
          lineHeight: 1.55
        }}>
          {p.sub}
        </div>
        <div style={{
          marginTop: 16,
          fontFamily: "var(--font-text)",
          fontSize: 16,
          lineHeight: 1.5,
          maxWidth: "52ch",
          color: "var(--fg)"
        }}>
          {p.blurb}
        </div>
        <div style={{
          marginTop: 24,
          display: "flex", flexWrap: "wrap", gap: 6
        }}>
          {p.stack.map((s, j) =>
          <span key={j} className="mono" style={{
            padding: "4px 8px",
            border: "1px solid var(--rule)",
            color: "var(--fg-muted)"
          }}>{s}</span>
          )}
        </div>
      </div>
      <div style={{
        gridColumn: L.thumb,
        aspectRatio: "4 / 3",
        position: "relative",
        overflow: "hidden",
        border: "1px solid var(--rule)",
        transform: hovered ? "scale(1.02) rotate(-0.4deg)" : "scale(1) rotate(0)",
        transition: "transform 700ms var(--ease-out-expo)"
      }}>
        <Thumb project={p} />
      </div>
    </a>);

};

/* Index layout — huge numerals */
const IndexLayout = ({ projects, onHover, hoveredIdx }) => {
  return (
    <div style={{ padding: "var(--s-9) 0" }}>
      {projects.map((p, i) => {
        const hovered = hoveredIdx === i;
        return (
          <a key={i} href={p.href}
          target={p.external ? "_blank" : undefined}
          rel={p.external ? "noopener noreferrer" : undefined}
          onMouseEnter={() => onHover(i)}
          onMouseLeave={() => onHover(null)}
          data-cursor={p.external ? "omniacore.net ↗" : "Öffnen"}
          style={{
            display: "block",
            position: "relative",
            padding: "var(--s-6) var(--pad)",
            borderTop: "1px solid var(--rule)",
            overflow: "hidden"
          }}>
            <div className="grid" style={{ alignItems: "center", padding: 0 }}>
              <div style={{
                gridColumn: "1 / span 2",
                fontFamily: "var(--font-display)",
                fontStyle: "italic",
                fontSize: "clamp(80px, 11vw, 180px)",
                lineHeight: 0.86,
                letterSpacing: "-0.05em",
                color: hovered ? "var(--accent)" : "var(--fg)",
                transition: "color 320ms"
              }}>
                {p.n}
              </div>
              <div style={{ gridColumn: "3 / span 5" }}>
                <div style={{
                  fontFamily: "var(--font-text)",
                  fontSize: "clamp(28px, 3vw, 48px)",
                  fontWeight: 500,
                  letterSpacing: "-0.02em",
                  lineHeight: 1.05
                }}>
                  {p.name}<span style={{ color: "var(--fg-muted)" }}>, </span>
                  <span style={{ color: "var(--fg-muted)", fontStyle: "italic", fontFamily: "var(--font-display)" }}>{p.sub}</span>
                </div>
              </div>
              <div className="mono" style={{ gridColumn: "9 / span 3", color: "var(--fg-muted)" }}>
                {p.year}
              </div>
              <div style={{
                gridColumn: "12 / span 1",
                textAlign: "right",
                fontSize: 22,
                color: hovered ? "var(--accent)" : "var(--fg)",
                transform: hovered ? "translateX(8px)" : "translateX(0)",
                transition: "transform 320ms var(--ease-out-expo), color 320ms"
              }}>
                ↗
              </div>
            </div>
            {/* Hover preview slab */}
            <div style={{
              position: "absolute",
              top: "10%", right: "var(--pad)",
              width: 280, height: 200,
              opacity: hovered ? 1 : 0,
              transform: hovered ? "translateY(0) scale(1)" : "translateY(20px) scale(0.96)",
              transition: "opacity 380ms var(--ease-out-quart), transform 480ms var(--ease-out-expo)",
              pointerEvents: "none",
              border: "1px solid var(--rule)",
              overflow: "hidden"
            }}>
              <Thumb project={p} />
            </div>
          </a>);

      })}
    </div>);

};

const WorkSection = ({ workVariant = "stack" }) => {
  const [hoveredIdx, setHoveredIdx] = React.useState(null);

  return (
    <section id="work" style={{ paddingTop: "var(--s-10)" }}>
      <div className="grid" style={{ alignItems: "end", marginBottom: "var(--s-7)" }}>
        <div style={{ gridColumn: "1 / span 6" }}>
          <div className="mono" style={{ color: "var(--fg-muted)", marginBottom: 24 }}>(02) — AKTUELLE PROJEKTE

          </div>
          <div style={{
            fontFamily: "var(--font-display)",
            fontStyle: "italic",
            fontSize: "clamp(56px, 7.4vw, 124px)",
            lineHeight: 0.92,
            letterSpacing: "-0.04em"
          }}>
            Umgesetzte<br />Projekte<span style={{ color: "var(--accent)" }}>.</span>
          </div>
        </div>
        <div style={{ gridColumn: "9 / span 4" }}>
          <p style={{
            fontFamily: "var(--font-text)",
            fontSize: 17,
            lineHeight: 1.55,
            color: "var(--fg-muted)",
            maxWidth: "32ch"
          }}>


          </p>
        </div>
      </div>

      {workVariant === "stack" && <StackLayout projects={PROJECTS} onHover={setHoveredIdx} hoveredIdx={hoveredIdx} />}
      {workVariant === "list" && <ListLayout projects={PROJECTS} onHover={setHoveredIdx} hoveredIdx={hoveredIdx} />}
      {workVariant === "index" && <IndexLayout projects={PROJECTS} onHover={setHoveredIdx} hoveredIdx={hoveredIdx} />}
    </section>);

};

window.WorkSection = WorkSection;