/* References (horizontal scroll), Pricing card-stack, Intraware, Testimonials, FAQ */

function HorizontalReferences() {
  const headerRef = useReveal();
  const wrapRef = useRef(null);
  const trackRef = useRef(null);
  const [trackTx, setTrackTx] = useState(0);
  const [trackWidth, setTrackWidth] = useState(0);

  const projects = [
    { name: "Elektro Wildschütz GmbH", branch: "Elektrotechnik", tag: "Web Entwicklung", img: "ref-wildschuetz.png", color: "#0e3a8a" },
    { name: "Intraware", branch: "Eigenentwicklung", tag: "Software", img: "Intraware Bild.png", color: "#0a1855" },
    { name: "Elektrotechnik Müllers", branch: "Elektrotechnik", tag: "Design", img: "6.png", color: "#1c1c20" },
    { name: "Fahrschule Liah UG", branch: "Fahrschule", tag: "Web Entwicklung", img: "5.png", color: "#103a3a" },
    { name: "Elektrotechnik Koch Projekt", branch: "Elektrotechnik", tag: "Web Entwicklung", img: "ref-koch.png", color: "#2a1a36" },
  ];

  useLayoutEffect(() => {
    const t = trackRef.current; if (!t) return;
    const measure = () => {
      setTrackWidth(Math.max(0, t.scrollWidth - window.innerWidth + 40));
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(t);
    window.addEventListener("resize", measure);
    // Re-measure after fonts/images load
    const t1 = setTimeout(measure, 200);
    const t2 = setTimeout(measure, 800);
    return () => { ro.disconnect(); window.removeEventListener("resize", measure); clearTimeout(t1); clearTimeout(t2); };
  }, []);

  useEffect(() => {
    const update = () => {
      const el = wrapRef.current; if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height - vh;
      const p = Math.min(1, Math.max(0, (-rect.top) / total));
      setTrackTx(-p * trackWidth);
    };
    update();
    let raf = 0;
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(update); };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, [trackWidth]);

  // Sync scroll-distance to translate-distance: 1px scroll ≈ 1px translate.
  // Add ~30vh padding on either side so first/last card breathe.
  const sectionHeight = `calc(100vh + ${trackWidth + 200}px)`;

  return (
    <section id="projekte" className="relative" style={{ background: "var(--bg-base)" }}>
      <div ref={headerRef} className="reveal max-w-[1200px] mx-auto px-5 pt-20">
        <div className="ri text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Projekte</div>
        <h2 className="ri d1 mt-3 h-tight text-[40px] sm:text-[54px]">Projekte, die <span className="hero-accent-text">beeindrucken.</span></h2>
        <p className="ri d2 mt-4 text-white/65 text-[17px] leading-relaxed max-w-xl">
          Ein Auszug aktueller Arbeiten — von Handwerksbetrieben bis zur eigenen Plattform.
        </p>
      </div>
      <div ref={wrapRef} style={{ height: sectionHeight }}>
        <div className="sticky top-0 h-screen flex items-center overflow-hidden">
          <div ref={trackRef} className="flex gap-5 pl-5 pr-5 will-change-transform" style={{ transform: `translate3d(${trackTx}px, 0, 0)` }}>
            {projects.map((p, i) => (
              <div key={i} className="glass rounded-3xl overflow-hidden flex-shrink-0" style={{ minWidth: "min(80vw, 560px)", maxWidth: "min(80vw, 560px)" }}>
                <div className="relative h-[58vh] max-h-[520px]" style={{ background: p.color }}>
                  {p.img ? (
                    <img src={p.img} alt={p.name} className="w-full h-full object-cover object-top" />
                  ) : (
                    <ProjectMock name={p.name} tag={p.tag} bg={p.color} />
                  )}
                  <div className="absolute top-4 right-4 px-3 py-1 rounded-full text-[11.5px] font-semibold" style={{ background: "rgba(0,0,0,0.55)", color: "var(--accent-blue)", border: "1px solid rgba(21,185,250,0.35)", backdropFilter: "blur(10px)" }}>
                    {p.tag}
                  </div>
                </div>
                <div className="p-6">
                  <div className="text-[20px] font-bold tracking-tight">{p.name}</div>
                  <div className="mt-1 text-white/55 text-[13.5px]">{p.branch}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectMock({ name, tag, bg }) {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center p-8 relative" style={{ background: `linear-gradient(160deg, ${bg}, #050507)` }}>
      <div className="absolute inset-0 opacity-20" style={{ backgroundImage: "linear-gradient(to right, rgba(255,255,255,0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "32px 32px" }} />
      <div className="relative z-10 text-center">
        <div className="inline-block px-3 py-1 rounded-full text-[11px] font-semibold mb-4" style={{ background: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.7)" }}>
          {tag}
        </div>
        <div className="text-3xl font-extrabold tracking-tight max-w-xs leading-tight">{name}</div>
      </div>
    </div>
  );
}

function PricingCard({ tier, recommended, animStyle }) {
  return (
    <div
      className="absolute left-1/2 top-1/2 rounded-3xl p-7 sm:p-8 will-change-transform"
      style={{
        width: 340,
        height: 540,
        background: recommended ? "linear-gradient(180deg, rgba(212,165,67,0.06), rgba(255,255,255,0.03))" : "rgba(255,255,255,0.03)",
        border: recommended ? "1px solid rgba(212,165,67,0.45)" : "1px solid rgba(255,255,255,0.10)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        marginLeft: -170,
        marginTop: -270,
        boxShadow: recommended ? "0 30px 80px -20px rgba(212,165,67,0.20), 0 10px 40px -10px rgba(0,0,0,0.6)" : "0 20px 60px -20px rgba(0,0,0,0.6)",
        transition: "transform 100ms linear",
        ...animStyle,
      }}
    >
      <PricingCardInner tier={tier} recommended={recommended} />
    </div>
  );
}

function PricingCardStatic({ tier, recommended }) {
  return (
    <div
      className="relative rounded-3xl p-7"
      style={{
        background: recommended ? "linear-gradient(180deg, rgba(212,165,67,0.08), rgba(255,255,255,0.03))" : "rgba(255,255,255,0.03)",
        border: recommended ? "1px solid rgba(212,165,67,0.45)" : "1px solid rgba(255,255,255,0.10)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        boxShadow: recommended ? "0 30px 80px -20px rgba(212,165,67,0.20), 0 10px 40px -10px rgba(0,0,0,0.6)" : "0 20px 60px -20px rgba(0,0,0,0.6)",
      }}
    >
      <PricingCardInner tier={tier} recommended={recommended} />
    </div>
  );
}

function PricingCardInner({ tier, recommended }) {
  const budgetMap = { 1: "149–299 € / Monat", 2: "299–599 € / Monat", 3: "599 € + / Monat" };
  const selectPackage = () => {
    window.dispatchEvent(new CustomEvent("selectPackage", { detail: { budget: budgetMap[tier.num], type: "Webseite" } }));
    document.getElementById("kontakt")?.scrollIntoView({ behavior: "smooth" });
  };
  return (
    <React.Fragment>
      {recommended && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full text-[11px] font-bold tracking-wider"
          style={{ background: "var(--accent-gold)", color: "#1a1304", boxShadow: "0 6px 20px -5px rgba(212,165,67,0.5)" }}>
          ★ EMPFOHLEN
        </div>
      )}
      <div className="flex items-center justify-between">
        <div className="text-[12px] uppercase tracking-[0.2em] font-bold" style={{ color: recommended ? "var(--accent-gold)" : "var(--accent-blue)" }}>
          Paket {tier.num}
        </div>
        <div className="text-white/30 text-[12px] font-mono">0{tier.num}</div>
      </div>
      <div className="mt-2 text-[26px] font-extrabold tracking-tight">{tier.name}</div>
      <div className="mt-1.5 text-white/55 text-[13.5px] leading-snug min-h-[40px]">{tier.tagline}</div>

      <div className="mt-5 pb-5 border-b border-white/[0.08]">
        <div className="flex items-baseline gap-2">
          <div className="text-[44px] font-extrabold tracking-tight" style={{ color: recommended ? "var(--accent-gold)" : "white" }}>
            {tier.monthly}€
          </div>
          <div className="text-white/55 text-[13.5px]">/ Monat</div>
        </div>
        <div className="mt-1 text-white/45 text-[12.5px]">Setup einmalig: <span className="text-white/75 font-semibold">{tier.setup}€</span></div>
      </div>

      <ul className="mt-5 space-y-2.5">
        {tier.features.map((f, i) => (
          <li key={i} className="flex gap-2.5 items-start text-[13.5px] text-white/80">
            <span className="mt-0.5 w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0" style={{ background: recommended ? "rgba(212,165,67,0.20)" : "rgba(21,185,250,0.18)", color: recommended ? "var(--accent-gold)" : "var(--accent-blue)" }}>
              <Check size={11} strokeWidth={3} />
            </span>
            {f}
          </li>
        ))}
      </ul>

      <div className="mt-6">
        {recommended ? (
          <button onClick={selectPackage} className="btn-shine inline-flex items-center justify-center w-full px-5 py-3 rounded-full font-semibold text-[14.5px] cursor-pointer"
            style={{ background: "var(--accent-gold)", color: "#1a1304", boxShadow: "0 10px 30px -10px rgba(212,165,67,0.4)", border: "none" }}>
            Paket wählen
          </button>
        ) : (
          <button onClick={selectPackage} className="inline-flex items-center justify-center w-full px-5 py-3 rounded-full font-semibold text-[14.5px] border border-white/15 hover:border-white/40 hover:bg-white/[0.06] transition-colors cursor-pointer"
            style={{ background: "transparent", color: "white" }}>
            Paket wählen
          </button>
        )}
      </div>
    </React.Fragment>
  );
}

function PricingStack() {
  const wrapRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const update = () => {
      const el = wrapRef.current; if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = rect.height - vh;
      const p = Math.min(1, Math.max(0, (-rect.top) / total));
      setProgress(p);
    };
    update();
    let raf = 0;
    const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(update); };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); cancelAnimationFrame(raf); };
  }, []);

  const tiers = [
    {
      num: 1,
      name: "Starter",
      tagline: "Für Einzelunternehmer und kleine Teams mit klarem Auftritt.",
      monthly: "149",
      setup: "990",
      features: ["Website 1–3 Seiten", "Hosting + SSL", "Backups", "Updates", "1 h Änderungen / Monat"],
    },
    {
      num: 2,
      name: "Standard",
      tagline: "Unsere meistgewählte Option für etablierte Mittelständler.",
      monthly: "299",
      setup: "990",
      features: ["Website 5–8 Seiten", "Alles aus Starter", "3 h Änderungen / Monat", "SEO-Basics", "Quartals-Strategie-Call"],
    },
    {
      num: 3,
      name: "Growth",
      tagline: "Für Unternehmen, die aktiv über die Website wachsen wollen.",
      monthly: "599",
      setup: "1.990",
      features: ["Alles aus Standard", "Aktive SEO-Arbeit", "1 Landingpage / Monat", "Monats-Strategie-Call", "Priorisierter Support"],
    },
  ];

  // Phase 1 (0..0.45): cards stacked
  // Phase 2 (0.45..1): fan out to side-by-side
  const ease = (t) => 1 - Math.pow(1 - t, 3);
  const fan = ease(Math.max(0, Math.min(1, (progress - 0.15) / 0.7)));

  // Stacked offsets when fan=0
  const stackOffsets = [
    { x: 0, y: 30, scale: 0.92, rot: -3 },
    { x: 0, y: 0, scale: 1.00, rot: 0 },
    { x: 0, y: -30, scale: 0.92, rot: 3 },
  ];

  // Responsive spread — keeps cards centered around viewport midpoint
  const vw = typeof window !== "undefined" ? window.innerWidth : 1200;
  const isMobile = vw < 768;
  const spread = Math.min(360, (vw - 360) / 2 - 20);
  const finalOffsets = [
    { x: -spread, y: 0, scale: 0.95, rot: 0 },
    { x: 0, y: -10, scale: 1.06, rot: 0 },
    { x: spread, y: 0, scale: 0.95, rot: 0 },
  ];

  // On mobile, render a simple vertical stack (no scroll-jacking) so all cards are visible.
  if (isMobile) {
    return (
      <section id="preise" className="relative" style={{ background: "var(--bg-base)" }}>
        <div className="max-w-[1200px] mx-auto px-5 pt-20 pb-4 text-center">
          <div className="text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Pakete & Preise</div>
          <h2 className="mt-3 h-tight text-[36px] max-w-3xl mx-auto">3 Pakete.<br/><span className="hero-accent-text">Klare Preise.</span></h2>
          <p className="mt-4 text-white/65 text-[15.5px] max-w-2xl mx-auto">Webdesign und laufende Betreuung — alle Pakete mit 12 Monaten Mindestlaufzeit.</p>
        </div>
        <div className="max-w-[420px] mx-auto px-5 py-8 flex flex-col gap-5">
          {tiers.map((t, i) => (
            <div key={i} className="relative">
              <PricingCardStatic tier={t} recommended={i === 1} />
            </div>
          ))}
        </div>
        <div className="max-w-[1200px] mx-auto px-5 pb-12">
          <div className="flex flex-wrap items-center justify-center gap-2.5">
            {[
              [Calendar, "Setup: 2–4 Wochen"],
              [Clock, "12 Monate Laufzeit"],
              [Zap, "< 24h Reaktionszeit"],
            ].map(([Icon, label], i) => (
              <div key={i} className="glass rounded-full px-4 py-2 flex items-center gap-2 text-[12.5px] text-white/75">
                <Icon size={14} style={{ color: "var(--accent-blue)" }} />
                {label}
              </div>
            ))}
          </div>
          <div className="mt-4 text-center text-white/40 text-[12.5px]">Alle Preise zzgl. MwSt.</div>
        </div>
      </section>
    );
  }

  return (
    <section id="preise" className="relative" style={{ background: "var(--bg-base)" }}>
      <div className="max-w-[1200px] mx-auto px-5 pt-24 pb-4 text-center">
        <div className="text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Pakete & Preise</div>
        <h2 className="mt-3 h-tight text-[40px] sm:text-[56px] max-w-3xl mx-auto">3 Pakete. <span className="hero-accent-text">Klare Preise.</span> Keine Überraschungen.</h2>
        <p className="mt-4 text-white/65 text-[16.5px] max-w-2xl mx-auto">Webdesign und laufende Betreuung — alle Pakete mit 12 Monaten Mindestlaufzeit.</p>
      </div>

      <div ref={wrapRef} style={{ height: "300vh" }}>
        <div className="sticky top-0 h-screen flex items-center justify-center overflow-hidden">
          <div className="relative w-full" style={{ height: 600 }}>
            {tiers.map((t, i) => {
              const start = stackOffsets[i];
              const end = finalOffsets[i];
              const x = start.x + (end.x - start.x) * fan;
              const y = start.y + (end.y - start.y) * fan;
              const sc = start.scale + (end.scale - start.scale) * fan;
              const rot = start.rot + (end.rot - start.rot) * fan;
              const z = i === 1 ? 30 : (fan > 0.5 ? 10 : (i === 2 ? 20 : 5));
              return (
                <PricingCard
                  key={i}
                  tier={t}
                  recommended={i === 1}
                  animStyle={{
                    transform: `translate(${x}px, ${y}px) scale(${sc}) rotate(${rot}deg)`,
                    zIndex: z,
                  }}
                />
              );
            })}
          </div>
        </div>
      </div>

      <div className="max-w-[1200px] mx-auto px-5 pb-12 -mt-2">
        <div className="flex flex-wrap items-center justify-center gap-2.5">
          {[
            [Calendar, "Setup-Phase: 2–4 Wochen"],
            [Clock, "Mindestlaufzeit: 12 Monate"],
            [Zap, "Reaktionszeit: < 24 Stunden"],
          ].map(([Icon, label], i) => (
            <div key={i} className="glass rounded-full px-4 py-2 flex items-center gap-2 text-[13px] text-white/75">
              <Icon size={14} style={{ color: "var(--accent-blue)" }} />
              {label}
            </div>
          ))}
        </div>
        <div className="mt-4 text-center text-white/40 text-[12.5px]">Alle Preise zzgl. MwSt.</div>
      </div>
    </section>
  );
}

/* ---------------- Intraware ---------------- */

function IntrawareLaptopMock() {
  const pur = "#6d28d9";
  const purDark = "#4c1d95";
  return (
    <div className="device-float-a relative rounded-2xl overflow-hidden" style={{ aspectRatio: "16/10", background: "#f4f4fb", border: "1px solid rgba(0,0,0,0.10)", boxShadow: "0 30px 80px -20px rgba(0,0,0,0.65)" }}>
      <div className="flex h-full text-[10px]">
        {/* Sidebar — very dark */}
        <div className="w-[19%] border-r border-black/10 p-3 flex flex-col gap-1.5" style={{ background: "#07070f" }}>
          <div className="flex items-center gap-1.5 mb-3">
            <div className="w-5 h-5 rounded-lg flex items-center justify-center text-white text-[8px] font-black" style={{ background: `linear-gradient(135deg, ${pur}, ${purDark})` }}>IW</div>
            <div className="font-extrabold text-[10px] text-white tracking-tight">Intraware</div>
          </div>
          {[
            [LayoutDashboard, "Dashboard", true],
            [ClipboardList, "Aufträge"],
            [Users, "Mitarbeiter"],
            [MapPin, "Fuhrpark"],
            [FileText, "Personalakte"],
            [LayoutDashboard, "Inventar"],
            [CalendarDays, "Kalender"],
            [Settings, "Einstellungen"],
          ].map(([Icon, label, active], i) => (
            <div key={i} className="flex items-center gap-2 px-2 py-1.5 rounded-lg"
              style={{ background: active ? "rgba(109,40,217,0.25)" : "transparent", color: active ? "#c4b5fd" : "rgba(255,255,255,0.38)" }}>
              <Icon size={10} />
              <span className="text-[9px] font-medium">{label}</span>
            </div>
          ))}
        </div>

        {/* Main — light */}
        <div className="flex-1 flex flex-col" style={{ background: "#f4f4fb" }}>
          {/* Header */}
          <div className="flex items-center justify-between px-4 py-2 border-b border-black/[0.07]" style={{ background: "white" }}>
            <div>
              <div className="text-[8px] text-black/40 font-medium">Übersicht</div>
              <div className="font-bold text-[11px] text-black">Deine Data GmbH</div>
            </div>
            <div className="flex items-center gap-1.5">
              <div className="flex items-center gap-1 px-2 py-1 rounded-lg text-[8.5px]" style={{ background: "#f0f0f6", color: "rgba(0,0,0,0.4)" }}>
                <Search size={9} />Suchen…
              </div>
              <div className="w-5 h-5 rounded-full flex items-center justify-center text-white text-[8px] font-bold" style={{ background: `linear-gradient(135deg, ${pur}, ${purDark})` }}>LK</div>
            </div>
          </div>

          {/* Content */}
          <div className="p-3 flex gap-2.5 flex-1 overflow-hidden">
            {/* Left column */}
            <div className="flex-1 flex flex-col gap-2">
              {/* Purple user card */}
              <div className="rounded-xl p-3 relative overflow-hidden" style={{ background: `linear-gradient(135deg, ${purDark} 0%, ${pur} 60%, #7c3aed 100%)`, minHeight: "42%" }}>
                <div className="absolute -top-3 -right-3 w-14 h-14 rounded-full opacity-20" style={{ background: "rgba(255,255,255,0.4)" }} />
                <div className="absolute bottom-0 left-6 w-8 h-8 rounded-full opacity-10" style={{ background: "white" }} />
                <div className="relative z-10">
                  <div className="w-6 h-6 rounded-full flex items-center justify-center text-[9px] font-bold text-white mb-1" style={{ background: "rgba(255,255,255,0.2)", border: "1px solid rgba(255,255,255,0.35)" }}>LK</div>
                  <div className="text-[11px] font-extrabold text-white tracking-tight leading-none">Laurin Henze</div>
                  <div className="flex gap-5 mt-2">
                    <div>
                      <div className="text-[6.5px] text-white/55 uppercase tracking-wider">Mitarbeiter</div>
                      <div className="text-[16px] font-black text-white leading-none">1</div>
                    </div>
                    <div>
                      <div className="text-[6.5px] text-white/55 uppercase tracking-wider">Flotte</div>
                      <div className="text-[16px] font-black text-white leading-none">0</div>
                    </div>
                  </div>
                </div>
              </div>
              {/* Metric grid */}
              <div className="grid grid-cols-2 gap-2 flex-1">
                {[["9","Aufträge gesamt"],["0","Rechnungen offen"],["0","IT-Services"],["0","Aktive Anfragen"]].map(([v,l],i)=>(
                  <div key={i} className="rounded-xl p-2" style={{ background: "white", border: "1px solid rgba(0,0,0,0.07)", boxShadow: "0 1px 3px rgba(0,0,0,0.05)" }}>
                    <div className="text-[15px] font-black text-black">{v}</div>
                    <div className="text-[7.5px] text-black/40">{l}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right column */}
            <div className="w-[33%] flex flex-col gap-2">
              {/* Dark card */}
              <div className="rounded-xl p-3 flex-1" style={{ background: "#0a0a14", border: "1px solid rgba(255,255,255,0.06)" }}>
                <div className="text-[7px] text-white/40 uppercase tracking-wider font-semibold mb-0.5">Aktive Aufträge</div>
                <div className="text-[22px] font-black text-white leading-none">2</div>
                <div className="mt-3 pt-2.5 border-t border-white/[0.07] space-y-1.5">
                  <div className="flex justify-between text-[7.5px]">
                    <span className="text-white/45">Einnahmen</span>
                    <span className="text-emerald-400 font-bold">0,00 €</span>
                  </div>
                  <div className="flex justify-between text-[7.5px]">
                    <span className="text-white/45">Ausgaben</span>
                    <span className="text-red-400 font-bold">0,00 €</span>
                  </div>
                </div>
              </div>
              {/* White card */}
              <div className="rounded-xl p-2.5" style={{ background: "white", border: "1px solid rgba(0,0,0,0.07)", boxShadow: "0 1px 3px rgba(0,0,0,0.05)" }}>
                <div className="text-[7px] text-black/40 uppercase tracking-wider font-semibold mb-1">Nächster Termin</div>
                <div className="text-[10px] font-bold text-black">Müller GmbH</div>
                <div className="text-[8px] font-mono mt-0.5" style={{ color: pur }}>09:00 Uhr</div>
              </div>
              {/* Inventory card */}
              <div className="rounded-xl p-2.5" style={{ background: "white", border: "1px solid rgba(0,0,0,0.07)", boxShadow: "0 1px 3px rgba(0,0,0,0.05)" }}>
                <div className="text-[7px] text-black/40 uppercase tracking-wider font-semibold mb-1">Inventar</div>
                <div className="text-[10px] font-bold text-black">48 Artikel</div>
                <div className="text-[7.5px] mt-0.5 text-amber-500 font-semibold">2 Nachbestellung</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function IntrawarePhoneMock() {
  const pur = "#6d28d9";
  const purDark = "#4c1d95";
  return (
    <div className="device-float-b relative" style={{ width: 220 }}>
      <div className="rounded-[36px] overflow-hidden" style={{ background: "#07070f", border: "1px solid rgba(255,255,255,0.10)", padding: 8, boxShadow: "0 30px 80px -20px rgba(0,0,0,0.7)" }}>
        <div className="rounded-[28px] overflow-hidden relative" style={{ background: "#f4f4fb", aspectRatio: "9/19" }}>
          {/* Status bar */}
          <div className="flex items-center justify-between px-5 pt-3 text-[10px] font-semibold text-black">
            <span>9:41</span>
            <div className="flex items-center gap-1 text-black/60">
              <Signal size={10} /><Wifi size={10} /><Battery size={12} />
            </div>
          </div>
          {/* Purple header card */}
          <div className="mx-3 mt-2 rounded-2xl p-3 relative overflow-hidden" style={{ background: `linear-gradient(135deg, ${purDark}, ${pur})` }}>
            <div className="absolute -top-2 -right-2 w-10 h-10 rounded-full opacity-20" style={{ background: "rgba(255,255,255,0.5)" }} />
            <div className="text-[8px] text-white/60 font-medium">Mo, 27. Apr</div>
            <div className="text-[16px] font-black text-white leading-tight">Guten Morgen,<br/>Laurin!</div>
            <div className="flex gap-3 mt-1.5">
              <div><div className="text-[14px] font-black text-white">3</div><div className="text-[7px] text-white/60">Aufträge</div></div>
              <div><div className="text-[14px] font-black text-white">2</div><div className="text-[7px] text-white/60">Termine</div></div>
            </div>
          </div>
          {/* List */}
          <div className="px-3 mt-2.5">
            <div className="text-[8.5px] uppercase tracking-wider text-black/40 font-bold mb-1.5">Aufträge heute</div>
            <div className="space-y-1.5">
              {[
                ["Müller GmbH", "Kaarst", "09:00"],
                ["Schmidt KG", "Neuss", "11:30"],
                ["Wildschütz", "Düsseldorf", "14:00"],
              ].map(([k, a, t], i) => (
                <div key={i} className="rounded-xl p-2" style={{ background: "white", border: "1px solid rgba(0,0,0,0.07)", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}>
                  <div className="flex items-center justify-between gap-2">
                    <div>
                      <div className="text-[9.5px] font-bold text-black">{k}</div>
                      <div className="text-[7.5px] text-black/45 flex items-center gap-1"><MapPin size={7} />{a}</div>
                    </div>
                    <div className="text-[9px] font-mono font-bold" style={{ color: pur }}>{t}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* Bottom tab bar */}
          <div className="absolute bottom-2 left-2 right-2 rounded-2xl px-2 py-2 flex items-center justify-around" style={{ background: "rgba(255,255,255,0.85)", border: "1px solid rgba(0,0,0,0.08)", backdropFilter: "blur(20px)" }}>
            {[Home, ClipboardList, CalendarDays, User].map((Icon, i) => (
              <div key={i} className="p-1.5 rounded-lg" style={{ color: i === 1 ? pur : "rgba(0,0,0,0.35)", background: i === 1 ? `rgba(109,40,217,0.12)` : "transparent" }}>
                <Icon size={15} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Intraware() {
  const ref = useReveal();
  return (
    <section id="intraware" ref={ref} className="reveal relative py-24 sm:py-32 overflow-hidden" style={{ background: "linear-gradient(180deg, #0d0820 0%, #080614 50%, var(--bg-base) 100%)" }}>
      <div className="absolute inset-0 grid-overlay opacity-60 pointer-events-none" />
      <div className="absolute -top-40 left-1/2 -translate-x-1/2 w-[700px] h-[400px] rounded-full" style={{ background: "radial-gradient(closest-side, rgba(109,40,217,0.22), rgba(109,40,217,0))", filter: "blur(20px)" }} />

      <div className="relative max-w-[1200px] mx-auto px-5">
        <div className="grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-5">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11.5px] font-semibold" style={{ background: "rgba(109,40,217,0.12)", border: "1px solid rgba(109,40,217,0.40)", color: "#a78bfa" }}>
              <span className="w-1.5 h-1.5 rounded-full" style={{ background: "#a78bfa" }} />
              Bald im Launch
            </div>
            <h2 className="ri d1 mt-4 h-tight text-[40px] sm:text-[54px]">Intraware. <span className="hero-accent-text">Software, die Handwerk versteht.</span></h2>
            <p className="ri d2 mt-5 text-white/70 text-[16.5px] leading-relaxed">
              Die All-in-One Lösung für Handwerk & KMU — Auftragsmanagement, Fuhrparkverwaltung, Personalakte und Inventar-Tracking in einer DSGVO-konformen Cloud aus Deutschland.
            </p>
            <ul className="mt-8 space-y-3">
              {[
                [ClipboardList, "Auftragsmanagement"],
                [Users, "Mitarbeiter-Koordination"],
                [MapPin, "Fuhrparkverwaltung"],
                [FileText, "Personalakte & HR"],
                [LayoutDashboard, "Inventar-Tracking"],
                [Smartphone, "Mobile App"],
                [WifiOff, "Offline-fähig"],
                [Lock, "DSGVO-konform · Cloud aus Deutschland"],
              ].map(([Icon, label], i) => (
                <li key={i} className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: "rgba(21,185,250,0.12)", color: "var(--accent-blue)", border: "1px solid rgba(21,185,250,0.20)" }}>
                    <Icon size={16} />
                  </div>
                  <span className="text-white/85 font-medium text-[15px]">{label}</span>
                </li>
              ))}
            </ul>
            <a href="intraware.html" className="inline-flex items-center gap-1.5 mt-8 text-[15px] font-semibold" style={{ color: "#a78bfa" }}>
              Mehr über Intraware <ArrowRight size={16} />
            </a>
          </div>

          <div className="lg:col-span-7 relative">
            <div className="relative">
              <IntrawareLaptopMock />
              <div className="absolute -bottom-28 -right-2 sm:right-4">
                <IntrawarePhoneMock />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Testimonials ---------------- */

function TestimonialCard({ name, company, quote }) {
  return (
    <div className="glass rounded-3xl p-7 flex-shrink-0" style={{ width: "min(86vw, 420px)" }}>
      <div className="flex items-center gap-1 mb-4">
        {[0,1,2,3,4].map(i => <Star key={i} size={14} style={{ color: "#f5b400", fill: "#f5b400" }} strokeWidth={1} />)}
      </div>
      <p className="text-white/85 leading-relaxed text-[14.5px]">{quote}</p>
      <div className="mt-6 pt-5 border-t border-white/[0.08] flex items-center gap-3">
        <div className="w-10 h-10 rounded-full flex items-center justify-center" style={{ background: "linear-gradient(135deg, rgba(21,185,250,0.25), rgba(10,24,85,0.6))", border: "1px solid rgba(255,255,255,0.10)" }}>
          <User size={16} className="text-white/85" />
        </div>
        <div>
          <div className="text-[14px] font-bold tracking-tight">{name}</div>
          <div className="text-[12px] text-white/55">{company}</div>
        </div>
      </div>
    </div>
  );
}

function Testimonials() {
  const ref = useReveal();
  const items = [
    { name: "Mike Koch", company: "Elektrotechnik Koch Projekt GmbH", quote: "Unsere neue Webseite begeistert! Der geschützte Login-Bereich und interne Event-Kalender sind perfekt gelöst. Modernes Design, intuitive Bedienung und professionelle Zusammenarbeit überzeugen auf ganzer Linie. Vielen Dank!" },
    { name: "Caner Yaylacioglu", company: "Fahrschule Liah UG", quote: "Unsere neue Fahrschul-Webseite begeistert! Das moderne Design und die eins zu eins umgesetzten Wünsche sind perfekt gelöst. Erstklassiger Social Media Content, positive Rückmeldungen und aktive Neukunden überzeugen auf ganzer Linie. Vielen Dank!" },
    { name: "Volker Müllers", company: "Elektrotechnik Müllers", quote: "Hervorragende Arbeit für unsere Elektrotechnik-Firma! Die neue Webseite ist modern, übersichtlich und genau so, wie wir sie uns vorgestellt haben. Alle Wünsche wurden berücksichtigt und schnell umgesetzt. Vielen Dank für die erstklassige Betreuung!" },
  ];
  // Duplicate for marquee loop
  const doubled = [...items, ...items];
  return (
    <section ref={ref} className="reveal relative py-24 overflow-hidden">
      <div className="max-w-[1200px] mx-auto px-5 mb-12">
        <div className="ri text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">Stimmen</div>
        <h2 className="ri d1 mt-3 h-tight text-[40px] sm:text-[54px]">Was <span className="hero-accent-text">Kunden sagen.</span></h2>
      </div>
      <div className="marquee-wrap relative">
        <div className="absolute left-0 top-0 bottom-0 w-24 z-10 pointer-events-none" style={{ background: "linear-gradient(to right, var(--bg-base), transparent)" }} />
        <div className="absolute right-0 top-0 bottom-0 w-24 z-10 pointer-events-none" style={{ background: "linear-gradient(to left, var(--bg-base), transparent)" }} />
        <div className="marquee-track flex gap-5 w-max">
          {doubled.map((t, i) => <TestimonialCard key={i} {...t} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */

function FAQItem({ q, a, open, onClick }) {
  return (
    <div className="border-b border-white/[0.08]">
      <button onClick={onClick} className="w-full text-left flex items-center justify-between gap-4 py-5 hover:bg-white/[0.015] transition-colors px-1">
        <span className="text-[16.5px] sm:text-[18px] font-bold tracking-tight pr-2">{q}</span>
        <span className="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 transition-transform duration-300" style={{ background: open ? "var(--accent-blue)" : "rgba(255,255,255,0.06)", color: open ? "#000" : "white", transform: open ? "rotate(45deg)" : "none" }}>
          <Plus size={16} strokeWidth={2.5} />
        </span>
      </button>
      <div className="overflow-hidden transition-all duration-500" style={{ maxHeight: open ? 600 : 0, opacity: open ? 1 : 0 }}>
        <p className="pb-6 px-1 text-white/70 leading-relaxed text-[15px] max-w-3xl">{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const ref = useReveal();
  const [openIdx, setOpenIdx] = useState(0);
  const items = [
    { q: "Wie viel Zeit wird das kommende Projekt in Anspruch nehmen?", a: "Wir wissen, dass Ihre Zeit begrenzt ist und wollen Sie in Sachen Digitalisierung so gut wie möglich entlasten. Deshalb benötigen wir nur 30-45 Minuten Gesprächszeit mit Ihnen, um Ihre Vorstellung zu strukturieren und abzusprechen." },
    { q: "Wann können Sie mit ersten Ergebnissen rechnen?", a: "Bereits nach wenigen Wochen können Sie mit einer überzeugenden Webseite und einer stabilen IT-Infrastruktur rechnen. Die genaue Dauer hängt jedoch stark vom jeweiligen Projekt ab: Umfang, Komplexität und individuelle Anforderungen bestimmen, wie lange die Entwicklung einer maßgeschneiderten Software oder Webseite dauert. Nach einer gemeinsamen Bedarfsanalyse erhalten Sie von uns einen realistischen Zeitplan." },
    { q: "Wie sieht ein Start bei euch aus?", a: "Ein Start bei uns ist grundsätzlich ganz leicht: Buchen Sie vorab über unsere Webseite ein kostenloses Erstgespräch. Anschließend melden wir uns bei Ihnen mit einer Terminbestätigung. Gerne können Sie sich vor dem Gespräch bereits Gedanken machen, was Sie sich für Ihr Projekt wünschen — sei es eine Webseite oder individuelle Software. Gemeinsam erstellen wir im Gespräch einen klaren Fahrplan, wie wir Sie und Ihr Projekt bestmöglich unterstützen können. Sobald Sie uns Ihr Okay geben, starten wir direkt mit der Umsetzung und setzen Ihre Wünsche schnellstmöglich und zielgerichtet um." },
    { q: "Wie nutzen / erstellen wir Content für Ihre Webseite?", a: "Wenn Sie bereits Content für Ihre Webseite haben, können Sie uns diesen gerne zur Verfügung stellen. Wichtig zu wissen ist, dass wir die Auflösung vorhandener Bilder nicht nachträglich verbessern können. Sollten ältere Bilder verwendet werden, können wir diese daher nur in der bestehenden Qualität einsetzen. Professionelle Bilder und Videos in hoher Qualität lassen Ihre Webseite deutlich hochwertiger und überzeugender wirken. Sollte bei Ihnen Bedarf bestehen, verfügen wir über ein eigenes Content-Team, das gerne zu Ihrem Standort kommt." },
  ];
  return (
    <section ref={ref} className="reveal relative py-24">
      <div className="max-w-[900px] mx-auto px-5">
        <div className="ri text-[12.5px] uppercase tracking-[0.18em] text-white/40 font-semibold">FAQ</div>
        <h2 className="ri d1 mt-3 h-tight text-[40px] sm:text-[54px]"><span className="hero-accent-text">Häufige</span> Fragen.</h2>
        <div className="mt-10">
          {items.map((it, i) => (
            <FAQItem key={i} {...it} open={openIdx === i} onClick={() => setOpenIdx(openIdx === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HorizontalReferences, PricingStack, Intraware, Testimonials, FAQ });