/* SECTION B — The Evidence: Before/After drag slider.
   Variants via tweaks: 'slider' | 'toggle' | 'side' */

function Evidence({ tweaks }) {
  const variant = tweaks.evidenceVariant || "slider";
  return (
    <section
      id="evidence"
      data-screen-label="03 Evidence"
      className="relative bg-midnight text-off-white py-24 md:py-32 overflow-hidden"
    >
      <div className="absolute inset-0 tech-grid-dark opacity-50 pointer-events-none" />
      <div className="relative max-w-[1280px] mx-auto px-6 md:px-10 lg:px-16">
        <div className="reveal flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12 md:mb-16">
          <div>
            <div className="font-heading text-[11px] tracking-[0.32em] text-copper">
              THE EVIDENCE
            </div>
            <span className="copper-rule mt-5 mb-7" />
            <h2 className="font-heading font-bold text-3xl md:text-4xl lg:text-[44px] tracking-[-0.01em] leading-[1.1] max-w-[760px]">
              Two ways the same building can be<br/>
              <span className="text-copper">delivered.</span>
            </h2>
          </div>
          <p className="text-off-white/60 max-w-[340px] text-[15px] leading-relaxed">
            Drag to compare. The figures are representative of recent Beigman engagements
            against equivalent prescriptive submissions.
          </p>
        </div>

        {variant === "slider" && <CompareSlider />}
        {variant === "toggle" && <CompareToggle />}
        {variant === "side"   && <CompareSide />}
      </div>
    </section>
  );
}

const TRADITIONAL = {
  label: "Traditional · Prescriptive Code",
  tag: "BENCHMARK",
  metrics: [
    { k: "NLA outcome",          v: "−12%",   note: "Surrendered to corridor / shaft inflation" },
    { k: "Façade",               v: "Blind walls", note: "Spandrel mandated where glass was specified" },
    { k: "Approval cycle",       v: "14–22 wks", note: "Multiple RFIs and re-submissions" },
    { k: "Design fidelity",      v: "Compromised", note: "Architectural intent traded for compliance" },
  ],
};
const BEIGMAN = {
  label: "Beigman · Performance-Based",
  tag: "OUTCOME",
  metrics: [
    { k: "NLA outcome",          v: "+15%",   note: "Recovered through fire & egress modelling" },
    { k: "Façade",               v: "Glass preserved", note: "CFD-validated radiation analysis" },
    { k: "Approval cycle",       v: "3–5 wks", note: "Pre-aligned authority engagement" },
    { k: "Design fidelity",      v: "Intact",  note: "Original architectural vision delivered" },
  ],
};

function MetricsPanel({ data, copper = false, dim = false }) {
  return (
    <div className={`h-full p-7 md:p-10 ${dim ? "bg-[#0B1320]" : "bg-[#13243A]"}`}>
      <div className="flex items-center gap-3">
        <span className={`font-heading text-[10px] tracking-[0.28em] ${copper ? "text-copper" : "text-off-white/50"}`}>
          {data.tag}
        </span>
        <span className={`flex-1 h-px ${copper ? "bg-copper/50" : "bg-off-white/15"}`} />
      </div>
      <h3 className={`mt-4 font-heading font-bold text-xl md:text-2xl tracking-tight ${dim ? "text-off-white/70" : "text-off-white"}`}>
        {data.label}
      </h3>
      <ul className="mt-8 divide-y divide-off-white/10">
        {data.metrics.map((m) => (
          <li key={m.k} className="py-4 flex items-baseline gap-5">
            <div className="font-heading text-[10px] tracking-[0.22em] text-off-white/45 uppercase w-32 shrink-0">
              {m.k}
            </div>
            <div className="flex-1">
              <div className={`font-heading font-bold text-xl md:text-2xl tabular-nums ${copper ? "text-copper" : (dim ? "text-off-white/65" : "text-off-white")}`}>
                {m.v}
              </div>
              <div className="mt-0.5 text-[12px] text-off-white/50">{m.note}</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function CompareSlider() {
  const [pct, setPct] = React.useState(50);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  const onMove = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const x = Math.max(0, Math.min(r.width, clientX - r.left));
    setPct(Math.round((x / r.width) * 100));
  };
  const onDown = (e) => { dragging.current = true; e.preventDefault?.(); };
  const onUp   = () => { dragging.current = false; };
  React.useEffect(() => {
    const move = (e) => {
      if (!dragging.current) return;
      const cx = e.touches ? e.touches[0].clientX : e.clientX;
      onMove(cx);
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move, { passive: true });
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchend', onUp);
    };
  }, []);

  return (
    <div className="reveal">
      <div
        ref={ref}
        className="relative w-full aspect-[16/10] md:aspect-[16/8] border border-off-white/10 select-none overflow-hidden r-lg"
        onClick={(e) => onMove(e.clientX)}
      >
        {/* Bottom layer: Traditional (full) */}
        <div className="absolute inset-0">
          <MetricsPanel data={TRADITIONAL} dim />
        </div>
        {/* Top layer: Beigman (clipped to pct) */}
        <div
          className="absolute inset-y-0 left-0 overflow-hidden"
          style={{ width: `${pct}%` }}
        >
          <div
            className="h-full"
            style={{ width: ref.current ? `${ref.current.getBoundingClientRect().width}px` : '100%' }}
          >
            <MetricsPanel data={BEIGMAN} copper />
          </div>
        </div>

        {/* Drag handle */}
        <div
          className="absolute top-0 bottom-0 w-px bg-copper pointer-events-none"
          style={{ left: `${pct}%` }}
        />
        <button
          aria-label="Drag to compare"
          onMouseDown={onDown}
          onTouchStart={onDown}
          className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-12 h-12 rounded-full bg-copper grid place-items-center cursor-ew-resize shadow-[0_8px_24px_rgba(178,124,77,0.45)]"
          style={{ left: `${pct}%` }}
        >
          <svg width="20" height="14" viewBox="0 0 20 14" fill="none" stroke="#F7F7F7" strokeWidth="1.6">
            <path d="M5 1 L1 7 L5 13 M15 1 L19 7 L15 13" />
          </svg>
        </button>

        {/* Corner labels */}
        <div className="absolute top-4 left-5 font-heading text-[10px] tracking-[0.28em] text-copper">
          ◄  BEIGMAN
        </div>
        <div className="absolute top-4 right-5 font-heading text-[10px] tracking-[0.28em] text-off-white/50">
          TRADITIONAL  ►
        </div>
      </div>
    </div>
  );
}

function CompareToggle() {
  const [tab, setTab] = React.useState('beigman');
  return (
    <div className="reveal">
      <div className="inline-flex border border-off-white/15 mb-6">
        <button
          onClick={() => setTab('traditional')}
          className={`font-heading text-[11px] tracking-[0.22em] px-5 py-3 ${tab==='traditional' ? 'bg-off-white/10 text-off-white' : 'text-off-white/50 hover:text-off-white'}`}
        >
          TRADITIONAL
        </button>
        <button
          onClick={() => setTab('beigman')}
          className={`font-heading text-[11px] tracking-[0.22em] px-5 py-3 ${tab==='beigman' ? 'bg-copper text-off-white' : 'text-off-white/50 hover:text-off-white'}`}
        >
          BEIGMAN
        </button>
      </div>
      <div className="border border-off-white/10">
        {tab === 'traditional'
          ? <MetricsPanel data={TRADITIONAL} dim />
          : <MetricsPanel data={BEIGMAN} copper />}
      </div>
    </div>
  );
}

function CompareSide() {
  return (
    <div className="reveal grid md:grid-cols-2 gap-px bg-off-white/10 border border-off-white/10 r-lg overflow-hidden">
      <MetricsPanel data={TRADITIONAL} dim />
      <MetricsPanel data={BEIGMAN} copper />
    </div>
  );
}

Object.assign(window, { Evidence });