/* ============================================================
   midsections.jsx — Comparison · Dashboard · Control
   ============================================================ */
function Comparison() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal, SectionHead } = window.UI;
  return (
    <section id="vergelijking" className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.cmpEye} title={t.cmpH2} />
        <div className="grid md:grid-cols-2 gap-5">
          {/* voicemail */}
          <Reveal>
            <div className="relative bg-card border border-border rounded-3xl p-8 h-full">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-3">
                  <div className="w-11 h-11 rounded-xl bg-muted grid place-items-center"><Icon name="phone-off" className="w-5 h-5 text-slate" /></div>
                  <div>
                    <p className="text-[10px] uppercase tracking-widest text-slate font-semibold">{t.vmKind}</p>
                    <h3 className="font-display font-semibold text-lg text-navy">{t.vmTitle}</h3>
                  </div>
                </div>
                <span className="text-xs px-2.5 py-1 rounded-full bg-muted text-slate font-medium">{t.vmTag}</span>
              </div>
              <ul className="space-y-3">
                {t.vm.map((v) => (
                  <li key={v} className="flex items-start gap-3 text-slate">
                    <span className="mt-0.5 w-5 h-5 rounded-full border border-border grid place-items-center shrink-0"><Icon name="x" className="w-3 h-3 text-destructive/70" /></span>
                    <span>{v}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
          {/* digital receptionist */}
          <Reveal delay={120}>
            <div className="relative bg-navy text-navy-foreground rounded-3xl p-8 shadow-card overflow-hidden h-full">
              <div className="absolute -right-24 -top-24 w-72 h-72 bg-brand/45 blur-3xl rounded-full" />
              <div className="absolute -left-20 -bottom-20 w-72 h-72 bg-teal/25 blur-3xl rounded-full" />
              <div className="relative">
                <div className="flex items-center justify-between mb-6">
                  <div className="flex items-center gap-3">
                    <div className="w-11 h-11 rounded-xl bg-gradient-brand grid place-items-center shadow-glow"><Icon name="sparkles" className="w-5 h-5 text-brand-foreground" /></div>
                    <div>
                      <p className="text-[10px] uppercase tracking-widest text-navy-foreground/60 font-semibold">{t.drKind}</p>
                      <h3 className="font-display font-semibold text-lg">{t.drTitle}</h3>
                    </div>
                  </div>
                  <span className="text-xs px-2.5 py-1 rounded-full bg-teal/15 text-teal border border-teal/30 font-medium">{t.drTag}</span>
                </div>
                <ul className="space-y-3">
                  {t.dr.map((v) => (
                    <li key={v} className="flex items-start gap-3 text-navy-foreground/90">
                      <span className="mt-0.5 w-5 h-5 rounded-full bg-teal/15 border border-teal/30 grid place-items-center shrink-0"><Icon name="check" className="w-3 h-3 text-teal" /></span>
                      <span>{v}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StatCard({ label, value, delta, icon, run, i }) {
  const { Icon, useCountUp } = window.UI;
  const n = useCountUp(parseInt(value, 10), run, 1000 + i * 150);
  return (
    <div className="bg-warm border border-brand/15 rounded-2xl p-5">
      <div className="flex items-center justify-between mb-4">
        <div className="w-9 h-9 rounded-xl bg-brand-soft border border-brand/20 grid place-items-center"><Icon name={icon} className="w-4 h-4 text-brand" /></div>
        <span className="text-[11px] text-teal font-semibold inline-flex items-center gap-1"><Icon name="trending-up" className="w-3 h-3" /> {delta}</span>
      </div>
      <p className="font-display text-3xl text-navy leading-none tabular">{n}</p>
      <p className="text-xs text-slate mt-2">{label}</p>
    </div>
  );
}

function Dashboard() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal, Tag, SectionHead } = window.UI;
  const statIcons = ["phone-call", "calendar-check", "list-checks", "alert-circle"];
  const wrapRef = React.useRef(null);
  const [run, setRun] = React.useState(false);
  React.useEffect(() => {
    const el = wrapRef.current; if (!el) return;
    let done = false;
    const go = () => { if (!done) { done = true; setRun(true); cleanup(); } };
    const inView = () => { const r = el.getBoundingClientRect(); return r.top < (window.innerHeight || 800) * 0.85 && r.bottom > 0; };
    if (inView()) { setRun(true); return; }
    let io;
    try { io = new IntersectionObserver((e) => { if (e[0].isIntersecting) go(); }, { threshold: 0.3 }); io.observe(el); } catch (e) {}
    const onScroll = () => { if (inView()) go(); };
    window.addEventListener("scroll", onScroll, { passive: true });
    const safety = setTimeout(go, 1600);
    function cleanup() { window.removeEventListener("scroll", onScroll); if (io) io.disconnect(); clearTimeout(safety); }
    return cleanup;
  }, []);

  return (
    <section id="dashboard" className="py-24 sm:py-32 bg-warm-tint border-y border-border">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.dashEye} title={t.dashH2} sub={t.dashSub} />
        <Reveal>
          <div ref={wrapRef} className="bg-card border border-border rounded-3xl shadow-card overflow-hidden">
            <div className="px-6 py-4 border-b border-border flex items-center justify-between bg-warm-tint">
              <div className="flex items-center gap-3"><Icon name="activity" className="w-4 h-4 text-brand" /><p className="text-sm font-medium text-navy">{t.dashHead}</p></div>
              <div className="hidden sm:flex items-center gap-2 text-xs text-slate"><span className="w-2 h-2 rounded-full bg-teal" /> {t.dashLive}</div>
            </div>
            <div className="grid lg:grid-cols-[1fr_1.2fr]">
              {/* stats */}
              <div className="p-6 sm:p-8 grid grid-cols-2 gap-4 border-r border-border">
                {t.stats.map(([label, value, delta], i) => (
                  <StatCard key={label} label={label} value={value} delta={delta} icon={statIcons[i]} run={run} i={i} />
                ))}
                <div className="col-span-2 bg-navy text-navy-foreground rounded-2xl p-5 flex items-center justify-between overflow-hidden relative">
                  <div className="absolute -right-10 -top-10 w-40 h-40 bg-brand/30 blur-3xl rounded-full" />
                  <div className="relative"><p className="text-[10px] uppercase tracking-widest text-navy-foreground/60 font-semibold">{t.timeSaved}</p><p className="font-display text-2xl mt-1">≈ 4u 20min</p></div>
                  <Icon name="clock" className="relative w-6 h-6 text-teal" />
                </div>
              </div>
              {/* recent */}
              <div className="p-6 sm:p-8">
                <div className="flex items-center justify-between mb-4"><p className="text-sm font-medium text-navy">{t.recent}</p><a href="#" className="text-xs text-brand font-medium hover:underline">{t.viewAll}</a></div>
                <div className="divide-y divide-border">
                  {t.summaries.map(([num, time, tag, color, text], i) => (
                    <Reveal key={i} delay={i * 80}>
                      <div className="py-4 flex items-start gap-4 first:pt-0">
                        <div className="w-10 h-10 rounded-xl bg-brand-soft border border-brand/20 grid place-items-center shrink-0"><Icon name="phone" className="w-[18px] h-[18px] text-brand" /></div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between gap-3 mb-1"><p className="font-medium text-navy truncate tabular">{num}</p><span className="text-xs text-slate shrink-0 tabular">{time}</span></div>
                          <p className="text-sm text-slate truncate">{text}</p>
                        </div>
                        <Tag color={color}>{tag}</Tag>
                      </div>
                    </Reveal>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Control() {
  const { t } = window.LU.useLang();
  const { Icon, Reveal, SectionHead } = window.UI;
  const icons = ["phone-off", "moon", "bell-ring"];
  return (
    <section className="py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6">
        <SectionHead eye={t.ctrlEye} title={t.ctrlH2} sub={t.ctrlSub} />
        <div className="grid md:grid-cols-3 gap-5">
          {t.ctrl.map(([title, text, badge], i) => (
            <Reveal key={title} delay={i * 100}>
              <div className={`relative rounded-3xl border p-7 flex flex-col h-full ${i === 0 ? "bg-navy text-navy-foreground border-navy shadow-card overflow-hidden" : "bg-card border-border"}`}>
                {i === 0 && <div className="absolute -right-16 -top-16 w-56 h-56 bg-brand/40 blur-3xl rounded-full" />}
                <div className="relative flex items-center justify-between mb-5">
                  <div className={`w-11 h-11 rounded-xl grid place-items-center ${i === 0 ? "bg-gradient-brand text-brand-foreground shadow-glow" : "bg-brand-soft text-brand"}`}><Icon name={icons[i]} className="w-5 h-5" /></div>
                  <span className={`text-[10px] uppercase tracking-widest font-semibold px-2 py-1 rounded-full ${i === 0 ? "bg-teal/15 text-teal border border-teal/30" : "bg-warm-tint text-slate border border-border"}`}>{badge}</span>
                </div>
                <h3 className={`relative font-display text-xl font-semibold ${i === 0 ? "text-navy-foreground" : "text-navy"}`}>{title}</h3>
                <p className={`relative mt-2 leading-relaxed ${i === 0 ? "text-navy-foreground/70" : "text-slate"}`}>{text}</p>
                <div className={`relative mt-6 pt-5 border-t flex items-center gap-2 text-sm ${i === 0 ? "border-white/10 text-navy-foreground/70" : "border-border text-slate"}`}>
                  <Icon name="shield-check" className="w-4 h-4 text-teal" /> {t.urgent}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Comparison, Dashboard, Control });