/* 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 }) {
  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 ? (
          <a href="#kontakt" className="btn-shine inline-flex items-center justify-center w-full px-5 py-3 rounded-full font-semibold text-[14.5px]"
            style={{ background: "var(--accent-gold)", color: "#1a1304", boxShadow: "0 10px 30px -10px rgba(212,165,67,0.4)" }}>
            Paket wählen
          </a>
        ) : (
          <a href="#kontakt" 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">
            Paket wählen
          </a>
        )}
      </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() {
  return (
    <div className="device-float-a relative rounded-2xl overflow-hidden" style={{ aspectRatio: "16/10", background: "#0a0b0e", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 30px 80px -20px rgba(0,0,0,0.7)" }}>
      <div className="flex h-full text-[10px]">
        {/* Sidebar */}
        <div className="w-[18%] border-r border-white/[0.06] p-3 flex flex-col gap-2" style={{ background: "rgba(255,255,255,0.015)" }}>
          <div className="flex items-center gap-1.5 mb-2">
            <div className="w-4 h-4 rounded-md" style={{ background: "var(--accent-blue)" }} />
            <div className="font-bold text-[10px]">Intraware</div>
          </div>
          {[
            [LayoutDashboard, "Dashboard", true],
            [ClipboardList, "Aufträge"],
            [Users, "Mitarbeiter"],
            [CalendarDays, "Kalender"],
            [Settings, "Einstellungen"],
          ].map(([Icon, label, active], i) => (
            <div key={i} className={`flex items-center gap-2 px-2 py-1.5 rounded-md ${active ? "" : "text-white/55"}`} style={{ background: active ? "rgba(21,185,250,0.12)" : "transparent", color: active ? "var(--accent-blue)" : undefined }}>
              <Icon size={11} />
              <span className="text-[9.5px] font-medium">{label}</span>
            </div>
          ))}
        </div>
        {/* Main */}
        <div className="flex-1 flex flex-col">
          {/* Header */}
          <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
            <div className="font-bold text-[12px]">Dashboard</div>
            <div className="flex items-center gap-2">
              <div className="px-2 py-1 rounded-md flex items-center gap-1 text-white/55" style={{ background: "rgba(255,255,255,0.04)" }}>
                <Search size={10} />
                <span className="text-[9px]">Suchen…</span>
              </div>
              <Bell size={11} className="text-white/55" />
              <div className="w-5 h-5 rounded-full" style={{ background: "linear-gradient(135deg, var(--accent-blue), #0a1855)" }} />
            </div>
          </div>
          {/* Content */}
          <div className="p-3 flex gap-3 flex-1 overflow-hidden">
            <div className="flex-1 flex flex-col gap-3">
              {/* Stat tiles */}
              <div className="grid grid-cols-4 gap-2">
                {[
                  ["12", "offene Aufträge"],
                  ["8", "Termine heute"],
                  ["3", "Anfragen"],
                  ["94%", "ausgelastet"],
                ].map(([v, l], i) => (
                  <div key={i} className="rounded-md p-2" style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)" }}>
                    <div className="text-[14px] font-extrabold tracking-tight">{v}</div>
                    <div className="text-[8px] text-white/50">{l}</div>
                  </div>
                ))}
              </div>
              {/* Table */}
              <div className="rounded-md flex-1 overflow-hidden" style={{ background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.06)" }}>
                <div className="px-3 py-2 border-b border-white/[0.06] flex items-center justify-between">
                  <div className="text-[10px] font-semibold">Aktuelle Aufträge</div>
                  <div className="text-[8px] text-white/40">5 Einträge</div>
                </div>
                <table className="w-full text-[8.5px]">
                  <thead className="text-white/40">
                    <tr><th className="text-left px-3 py-1.5 font-medium">Nr.</th><th className="text-left font-medium">Kunde</th><th className="text-left font-medium">Status</th><th className="text-left font-medium">Datum</th></tr>
                  </thead>
                  <tbody>
                    {[
                      ["#A-2148", "Müller GmbH", "In Arbeit", "blue", "27.04."],
                      ["#A-2147", "Schmidt KG", "Geplant", "gray", "28.04."],
                      ["#A-2146", "Wildschütz", "Abgeschl.", "green", "26.04."],
                      ["#A-2145", "Koch Projekt", "In Arbeit", "blue", "25.04."],
                      ["#A-2144", "Liah Fahrschule", "Anfrage", "amber", "24.04."],
                    ].map(([nr, k, st, c, d], i) => (
                      <tr key={i} className="border-t border-white/[0.04]">
                        <td className="px-3 py-1.5 font-mono text-white/70">{nr}</td>
                        <td className="text-white/85">{k}</td>
                        <td>
                          <span className="px-1.5 py-0.5 rounded text-[7.5px] font-semibold" style={{
                            background: c === "blue" ? "rgba(21,185,250,0.15)" : c === "green" ? "rgba(74,222,128,0.15)" : c === "amber" ? "rgba(212,165,67,0.18)" : "rgba(255,255,255,0.06)",
                            color: c === "blue" ? "var(--accent-blue)" : c === "green" ? "#86efac" : c === "amber" ? "var(--accent-gold)" : "rgba(255,255,255,0.7)",
                          }}>{st}</span>
                        </td>
                        <td className="text-white/55">{d}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
            {/* Mini calendar */}
            <div className="w-[28%] rounded-md p-2.5" style={{ background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.06)" }}>
              <div className="flex items-center justify-between mb-2">
                <div className="text-[9px] font-semibold">Diese Woche</div>
                <ChevronRight size={10} className="text-white/40" />
              </div>
              <div className="grid grid-cols-7 gap-1 text-center text-[7px] text-white/40 mb-1">
                {["M","D","M","D","F","S","S"].map((d, i) => <div key={i}>{d}</div>)}
              </div>
              <div className="grid grid-cols-7 gap-1 text-center text-[8px]">
                {[27,28,29,30,1,2,3].map((d, i) => (
                  <div key={i} className={`py-1 rounded ${i === 0 ? "font-bold" : ""}`} style={{ background: i === 0 ? "var(--accent-blue)" : (i >= 5 ? "transparent" : "rgba(255,255,255,0.03)"), color: i === 0 ? "#000" : (i >= 5 ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.85)") }}>{d}</div>
                ))}
              </div>
              <div className="mt-3 space-y-1.5">
                {[
                  ["09:00", "Müller GmbH"],
                  ["11:30", "Vor-Ort Termin"],
                  ["14:00", "Schmidt KG"],
                ].map(([t, l], i) => (
                  <div key={i} className="flex gap-2 text-[8px]">
                    <div className="font-mono text-white/50">{t}</div>
                    <div className="text-white/85 truncate">{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function IntrawarePhoneMock() {
  return (
    <div className="device-float-b relative" style={{ width: 220 }}>
      <div className="rounded-[36px] overflow-hidden" style={{ background: "#0a0b0e", 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" style={{ background: "#08090c", aspectRatio: "9/19" }}>
          {/* Status bar */}
          <div className="flex items-center justify-between px-5 pt-3 text-[10px] font-semibold">
            <span>9:41</span>
            <div className="flex items-center gap-1">
              <Signal size={10} />
              <Wifi size={10} />
              <Battery size={12} />
            </div>
          </div>
          {/* Header */}
          <div className="px-4 mt-3">
            <div className="text-[10px] text-white/45">Mo, 27. Apr</div>
            <div className="text-[22px] font-extrabold tracking-tight leading-none">Heute</div>
          </div>
          {/* Quick stats */}
          <div className="px-4 mt-3 grid grid-cols-2 gap-2">
            <div className="rounded-xl p-2.5" style={{ background: "rgba(21,185,250,0.10)", border: "1px solid rgba(21,185,250,0.20)" }}>
              <div className="text-[16px] font-extrabold" style={{ color: "var(--accent-blue)" }}>3</div>
              <div className="text-[8.5px] text-white/65">Aufträge heute</div>
            </div>
            <div className="rounded-xl p-2.5" style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
              <div className="text-[16px] font-extrabold">2h 30m</div>
              <div className="text-[8.5px] text-white/65">geplante Zeit</div>
            </div>
          </div>
          {/* List */}
          <div className="px-4 mt-3">
            <div className="text-[9px] uppercase tracking-wider text-white/40 font-bold mb-2">Aufträge heute</div>
            <div className="space-y-2">
              {[
                ["Müller GmbH", "Industriestr. 12, Kaarst", "09:00"],
                ["Schmidt KG", "Hauptstr. 45, Neuss", "11:30"],
                ["Wildschütz", "Bahnhofstr. 8, Düsseldorf", "14:00"],
              ].map(([k, a, t], i) => (
                <div key={i} className="rounded-xl p-2.5" style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.07)" }}>
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <div className="text-[10.5px] font-bold">{k}</div>
                      <div className="text-[8.5px] text-white/55 mt-0.5 flex items-center gap-1"><MapPin size={8} />{a}</div>
                    </div>
                    <div className="text-[10px] font-mono font-bold" style={{ color: "var(--accent-blue)" }}>{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.04)", border: "1px solid rgba(255,255,255,0.08)", backdropFilter: "blur(20px)" }}>
            {[Home, ClipboardList, CalendarDays, User].map((Icon, i) => (
              <div key={i} className={`p-1.5 rounded-lg ${i === 1 ? "" : "text-white/45"}`} style={{ color: i === 1 ? "var(--accent-blue)" : undefined }}>
                <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, var(--bg-deep-blue) 0%, #050720 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(21,185,250,0.20), rgba(21,185,250,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(21,185,250,0.10)", border: "1px solid rgba(21,185,250,0.30)", color: "var(--accent-blue)" }}>
              <span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--accent-blue)" }} />
              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">
              Unsere eigene Plattform für Auftragsmanagement, Mitarbeiter-Koordination und interne Prozesse — entwickelt für Handwerksbetriebe.
            </p>
            <ul className="mt-8 space-y-3">
              {[
                [ClipboardList, "Auftragsmanagement"],
                [Users, "Mitarbeiter-Koordination"],
                [Smartphone, "Mobile App"],
                [WifiOff, "Offline-fähig"],
                [Lock, "DSGVO-konform"],
              ].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="#kontakt" className="inline-flex items-center gap-1.5 mt-8 text-[15px] font-semibold" style={{ color: "var(--accent-blue)" }}>
              Mehr über Intraware <ArrowRight size={16} />
            </a>
          </div>

          <div className="lg:col-span-7 relative">
            <div className="relative">
              <IntrawareLaptopMock />
              <div className="absolute -bottom-12 -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 });