/* global React, MachineRender */
const { useState: useSP, useEffect: useEP } = React;

const isSubdir = window.location.pathname.includes("/products/");
const prefix = isSubdir ? "../../" : "";

function getProductBrochure(data) {
  if (data && data.brochureUrl) return data.brochureUrl;
  const name = ((data && data.name) || "").toLowerCase();
  const p = window.location.pathname.toLowerCase();

  // 1. Auto Coater Tablet -> Tablet Coating brochure
  if (name.includes("auto tablet coater") || name.includes("auto coater") || p.includes("auto-coater")) {
    return `${prefix}assets/brochure/Brochure - Mark Maker - Tablet Coating.pdf`;
  }

  // 2. EFF PACK, EFF PRO, VTD -> Effervescent brochure
  const isEffPack = name.includes("eff pack") || name.includes("eff-pack") || name.includes("tube filling") || p.includes("eff-pack");
  const isEffPro = name.includes("eff pro") || name.includes("eff-pro") || name.includes("effervescent processing") || p.includes("eff-pro");
  const isVtd = name.includes("vacuum tray dryer") || name.includes("vtd") || p.includes("vtd");

  if (isEffPack || isEffPro || isVtd) {
    return `${prefix}assets/brochure/Brochure - Mark Maker - Effervescent.pdf`;
  }

  // 3. Rest of the product pages -> Granulation brochure
  return `${prefix}assets/brochure/Brochure - Mark Maker - Granulation.pdf`;
}

function getProductGADrawing(data) {
  if (data && data.gaDrawingUrl) return data.gaDrawingUrl;
  const name = ((data && data.name) || "").toLowerCase();
  const p = window.location.pathname.toLowerCase();

  // 1. RMG -> RMG 150 PDF.pdf
  if (name.includes("rapid mixer") || name.includes("rapid mixing") || name.includes("rmg") || p.includes("rapid-mixing-granulator")) {
    return `${prefix}assets/2d-drawings/2D DWG/RMG 150 PDF.pdf`;
  }
  // 2. Auto Tablet Coater -> AUTOCOATER 48.pdf
  if (name.includes("auto tablet coater") || name.includes("auto coater") || p.includes("auto-coater")) {
    return `${prefix}assets/2d-drawings/2D DWG/auto-tablet-coater/AUTOCOATER 48.pdf`;
  }
  // 3. Conta Pillar Blender (CPB) -> CPB-2000LTRS.pdf
  if (name.includes("conta pillar") || name.includes("cpb") || p.includes("cpb.html")) {
    return `${prefix}assets/2d-drawings/2D DWG/conta-pillar-blender/CPB-2000LTRS.pdf`;
  }
  // 4. Effervescent Packaging (EFF-PACK) -> EFF PACK 100.pdf
  if (name.includes("eff pack") || name.includes("eff-pack") || name.includes("tube filling") || p.includes("eff-pack")) {
    return `${prefix}assets/2d-drawings/2D DWG/effervescent-packaging/EFF PACK 100.pdf`;
  }
  // 5. Effervescent Processing (EFF-PRO) -> EFF PRO 250.pdf
  if (name.includes("eff pro") || name.includes("eff-pro") || name.includes("effervescent processing") || p.includes("eff-pro")) {
    return `${prefix}assets/2d-drawings/2D DWG/effervescent-processing/EFF PRO 250.pdf`;
  }
  // 6. Fluid Bed Coater (FBC) -> FBC-300KG.pdf
  if (name.includes("fluid bed coater") || name.includes("fbc") || p.includes("fbc.html")) {
    return `${prefix}assets/2d-drawings/2D DWG/fluid-bed-coater/FBC-300KG.pdf`;
  }
  // 7. Fluid Bed Dryer (FBD) -> MMPE-FBD-120KG.pdf
  if (name.includes("fluid bed dryer") || name.includes("fbd") || p.includes("fbd.html")) {
    return `${prefix}assets/2d-drawings/2D DWG/fluid-bed-dryer/MMPE-FBD-120KG.pdf`;
  }
  // 8. IPC Bin / IBC Bin Container -> IPC BIN.pdf
  if (name.includes("ipc bin") || name.includes("ibc bin") || p.includes("ipc-bin")) {
    return `${prefix}assets/2d-drawings/2D DWG/ibc-bin-container/IPC BIN.pdf`;
  }
  // 9. Lifting & Positioning Device (LPD) -> LPU.pdf
  if (name.includes("lifting and positioning") || name.includes("lifting & positioning") || name.includes("lpd") || p.includes("lpd.html")) {
    return `${prefix}assets/2d-drawings/2D DWG/lifting-and-positioning-device/LPU.pdf`;
  }
  // 10. Vacuum Tray Dryer (VTD) -> VTS.pdf
  if (name.includes("vacuum tray dryer") || name.includes("vtd") || p.includes("vtd.html")) {
    return `${prefix}assets/2d-drawings/2D DWG/vaccum-tray-dryer/VTS.pdf`;
  }

  return null;
}

function getProductLayoutKey(data) {
  const name = ((data && data.name) || "").toLowerCase();
  const p = window.location.pathname.toLowerCase();

  if (name.includes("rapid mixer") || name.includes("rapid mixing") || name.includes("rmg") || p.includes("rapid-mixing-granulator")) return "rmg";
  if (name.includes("auto tablet coater") || name.includes("auto coater") || p.includes("auto-coater")) return "auto-coater";
  if (name.includes("conta pillar") || name.includes("cpb") || p.includes("cpb.html")) return "cpb";
  if (name.includes("eff pack") || name.includes("eff-pack") || name.includes("tube filling") || p.includes("eff-pack")) return "eff-pack";
  if (name.includes("eff pro") || name.includes("eff-pro") || name.includes("effervescent processing") || p.includes("eff-pro")) return "eff-pro";
  if (name.includes("fluid bed coater") || name.includes("fbc") || p.includes("fbc.html")) return "fbc";
  if (name.includes("fluid bed dryer") || name.includes("fbd") || p.includes("fbd.html")) return "fbd";
  if (name.includes("ipc bin") || name.includes("ibc bin") || p.includes("ipc-bin")) return "ipc-bin";
  if (name.includes("lifting and positioning") || name.includes("lifting & positioning") || name.includes("lpd") || p.includes("lpd.html")) return "lpd";
  if (name.includes("vacuum tray dryer") || name.includes("vtd") || p.includes("vtd.html")) return "vtd";
  return null;
}

const PRODUCT_LAYOUT_CONFIG = {
  rmg: {
    title: "Compact footprint, easy cleanroom integration.",
    desc: "Our Rapid Mixer Granulator (RMG 150) is built on a space-saving 2.1 × 1.2 m base. It offers 3-side operator access for easy parameter tweaking, while maintenance doors open from the back.",
    specs: [
      ["Mixing Bowl Diameter", "750 mm"],
      ["Total Height (Lid Closed)", "1950 mm"],
      ["Discharge Valve Clearance", "1000 mm (suited for direct FBD connection)"],
      ["Required Room Height", "Minimum 2500 mm clearance"],
      ["Net Weight", "Approx. 1200 kg"],
    ]
  },
  "auto-coater": {
    title: "Ergonomic layout, fast cleanroom duct integration.",
    desc: "Our Auto Tablet Coater 48 offers front-facing operator access for spray gun calibration and pan loading, with rear service doors for exhaust and drive systems.",
    specs: [
      ["Coating Pan Diameter", "48 inches (1220 mm)"],
      ["Total Height", "2150 mm"],
      ["Peristaltic Pump Clearance", "800 mm front access"],
      ["Required Room Height", "Minimum 2800 mm clearance"],
      ["Net Weight", "Approx. 1850 kg"],
    ]
  },
  cpb: {
    title: "Flexible blending footprint, 360° safety envelope.",
    desc: "Our Conta Pillar Blender is engineered with a compact clamping column and generous 360° rotation clearance, suitable for varied IBC bin capacities.",
    specs: [
      ["Blending Arm Rotation", "360° dynamic rotation"],
      ["Total Column Height", "3200 mm"],
      ["Bin Clamping Range", "300 L – 2000 L bins"],
      ["Safety Radius Clearance", "2500 mm perimeter envelope"],
      ["Net Weight", "Approx. 2200 kg"],
    ]
  },
  fbd: {
    title: "Streamlined air-handling layout, direct granulation link.",
    desc: "Our Fluid Bed Dryer (FBD 120) features modular bowl docking for seamless gravity or vacuum transfer from upstream RMG mixers, with top-access filter bag inspection.",
    specs: [
      ["Batch Capacity", "120 kg processing bowl"],
      ["Total Machine Height", "2850 mm"],
      ["Bowl Docking Clearance", "1100 mm floor clearance"],
      ["Required Room Height", "Minimum 3200 mm clearance"],
      ["Net Weight", "Approx. 1450 kg"],
    ]
  },
  fbc: {
    title: "Vertical Wurster coating tower, ergonomic docking.",
    desc: "Our Fluid Bed Coater (FBC 300) delivers high precision bottom-spray coating with isolated operator zones, easy-access Wurster tube adjustment, and sanitary spray nozzle manifolds.",
    specs: [
      ["Processing Capacity", "300 kg batch volume"],
      ["Total Unit Height", "3100 mm"],
      ["Wurster Column Clearance", "1200 mm servicing zone"],
      ["Required Room Height", "Minimum 3500 mm clearance"],
      ["Net Weight", "Approx. 1650 kg"],
    ]
  },
  lpd: {
    title: "Ergonomic lifting mast, versatile bin positioning.",
    desc: "Our Lifting and Positioning Device features a rigid hydraulic/mechanical column with smooth 180°–360° swivel capability for dust-free blender and coater docking.",
    specs: [
      ["Lifting Stroke Range", "1500 mm – 2400 mm"],
      ["Swivel Arc", "180° / 360° manual or powered"],
      ["Safe Working Load (SWL)", "Up to 500 kg+"],
      ["Required Room Height", "Minimum 3200 mm clearance"],
      ["Net Weight", "Approx. 850 kg"],
    ]
  },
  vtd: {
    title: "Compact vacuum footprint, wide door swing radius.",
    desc: "Our Vacuum Tray Dryer is engineered with heavily reinforced vacuum chambers and uniform heating shelves, optimized for solvent extraction and heat-sensitive API drying.",
    specs: [
      ["Chamber Dimensions", "2250 × 1550 mm footprint"],
      ["Door Swing Clearance", "1200 mm 90° swing arc"],
      ["Shelf Tray Spacing", "100 mm uniform shelf pitch"],
      ["Required Room Height", "Minimum 2700 mm clearance"],
      ["Net Weight", "Approx. 1950 kg"],
    ]
  },
  "ipc-bin": {
    title: "Modular stacking envelope, sanitary funnel discharge.",
    desc: "Our IPC Bin Containers feature precision-formed 60° conical bases, stackable corner castings, and an ergonomic mobile trolley base for cleanroom transport.",
    specs: [
      ["Bin Footprint", "1150 × 1150 mm base"],
      ["Overall Stacking Height", "1450 mm with lid"],
      ["Discharge Cone Angle", "60° sanitary frustum"],
      ["Valve Floor Clearance", "350 mm under-valve clearance"],
      ["Net Weight (Empty)", "Approx. 220 kg"],
    ]
  },
  "eff-pro": {
    title: "Integrated processing skid, multi-vessel arrangement.",
    desc: "Our Effervescent Processing System (EFF-PRO 250) unifies formulation reactors, vacuum mixing, and condenser systems onto a single sanitary skid platform with dedicated operator access.",
    specs: [
      ["Skid Footprint", "3200 × 1800 mm skid base"],
      ["Total Skid Height", "2450 mm top flange"],
      ["Sanitary Connection", "DN 100 tri-clamp ports"],
      ["Required Room Height", "Minimum 3000 mm clearance"],
      ["Net Weight", "Approx. 2800 kg"],
    ]
  },
  "eff-pack": {
    title: "Continuous linear packaging line, high throughput.",
    desc: "Our EFF-PACK 100 tube filling line incorporates vibratory tablet sorting, automated tube indexing, desiccant cap insertion, and end-of-line collection in a compact linear cell.",
    specs: [
      ["Line Envelope", "3600 × 1200 mm footprint"],
      ["Operating Speed", "100–120 tubes / minute"],
      ["Infeed Conveyor Height", "950 ± 50 mm working level"],
      ["Required Room Height", "Minimum 2600 mm clearance"],
      ["Net Weight", "Approx. 2100 kg"],
    ]
  }
};

// ============ PRODUCT 3D VIEWER WITH LOADER ============
function ProductModelViewer({ src, alt }) {
  const [progress, setProgress] = useSP(0);
  const [loaded, setLoaded] = useSP(false);
  const [error, setError] = useSP(false);
  const viewerRef = React.useRef(null);

  useEP(() => {
    setProgress(0);
    setLoaded(false);
    setError(false);

    const el = viewerRef.current;
    if (!el) return;

    if (el.loaded) {
      setProgress(100);
      setLoaded(true);
      return;
    }

    const onProgress = (e) => {
      const p = Math.min(100, Math.max(0, Math.round((e.detail && e.detail.totalProgress ? e.detail.totalProgress : 0) * 100)));
      setProgress(p);
    };

    const onLoad = () => {
      setProgress(100);
      setLoaded(true);
    };

    const onError = () => {
      setError(true);
    };

    el.addEventListener("progress", onProgress);
    el.addEventListener("load", onLoad);
    el.addEventListener("error", onError);

    return () => {
      el.removeEventListener("progress", onProgress);
      el.removeEventListener("load", onLoad);
      el.removeEventListener("error", onError);
    };
  }, [src]);

  return (
    <model-viewer
      ref={viewerRef}
      key={src}
      src={src}
      alt={alt}
      auto-rotate
      rotation-per-second="6deg"
      interaction-prompt="none"
      shadow-intensity="0.7"
      camera-orbit="0deg 75deg 68%"
      auto-rotate-delay="0"
      field-of-view="28deg"
      loading="eager"
      style={{
        width: "100%",
        height: "100%",
        filter: "drop-shadow(0 30px 50px rgba(11,17,23,0.18))",
        "--poster-color": "transparent",
        pointerEvents: "none",
      }}
    >
      <div
        slot="poster"
        className={`mv-loader mv-loader--light ${loaded ? "is-loaded" : ""} ${error ? "is-error" : ""}`}
        aria-label="Loading 3D model"
      >
        <div className="mv-loader__content">
          <div className="mv-loader__spinner-box">
            <div className="mv-loader__pulse" />
            <div className="mv-loader__spinner" />
            <svg className="mv-loader__icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
              <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
              <line x1="12" y1="22.08" x2="12" y2="12" />
            </svg>
          </div>
          <div className="mv-loader__meta">
            <div className="mv-loader__tag">LIVE 3D</div>
            <div className="mv-loader__text">
              {error ? "3D model preview unavailable" : progress > 0 && progress < 100 ? `Loading model asset (${progress}%)...` : "Loading 3D model..."}
            </div>
          </div>
          <div className="mv-loader__track">
            <div className="mv-loader__bar" style={{ width: `${progress}%` }} />
          </div>
          <div className="mv-loader__percentage">{progress}%</div>
        </div>
      </div>
    </model-viewer>
  );
}

// ============ PRODUCT HERO ============
function ProductHero() {
  const d = window.PRODUCT_DATA || {};
  const [activeModelIdx, setActiveModelIdx] = useSP(0);
  const breadcrumb = d.breadcrumb || ["Home", "Products", "Granulation", "Rapid Mixer Granulator"];
  const chips = d.chips || ["Flagship", "Granulation", "High-Shear"];
  const name = d.name || "Rapid Mixer Granulator (RMG)";
  const lede = d.description || "The Rapid Mixer Granulator (RMG) is engineered for fast, efficient, and uniform wet granulation across pharmaceutical, nutraceutical, food, and chemical manufacturing processes.";
  const subdesc = d.subDescription || "Manufactured in compliance with cGMP standards, our RMG offers robust construction, user-friendly operation, and reliable performance to meet the demands of modern production facilities.";
  const metrics = d.metrics || [["45–120", "Working L"], ["8–15", "mixing min"], ["SS 316L", "contact parts"]];

  const modelsList = Array.isArray(d.models3d) && d.models3d.length > 0 ? d.models3d : null;
  const activeModel = modelsList ? (modelsList[activeModelIdx] || modelsList[0]) : null;
  const model3d = activeModel ? activeModel.src : (d.model3d || "");
  const modelAlt = (activeModel && activeModel.alt) || d.modelAlt || `${name} 3D model`;
  const heroImage = d.heroImage || d.image || null;
  const brochureUrl = getProductBrochure(d);
  const gaDrawingUrl = getProductGADrawing(d);
  const hasHeroMedia = !!(model3d || heroImage);

  return (
    <section style={{ background: "var(--paper)", borderBottom: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
      <div className="blueprint-grid" style={{ opacity: 0.5 }} />
      <div className="container" style={{ paddingTop: 64, paddingBottom: 80, position: "relative" }}>
        {/* Breadcrumb */}
        <div className="pp-breadcrumb" style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 32 }}>
          {breadcrumb.map((b, idx) => (
            <React.Fragment key={idx}>
              {idx > 0 && <span>/</span>}
              {idx < breadcrumb.length - 1 ? (
                <a href={idx === 0 ? `${prefix}index.html` : "#"} style={{ color: "inherit", textDecoration: "none" }}>{b}</a>
              ) : (
                <span style={{ color: "var(--ink)" }}>{b}</span>
              )}
            </React.Fragment>
          ))}
        </div>

        <div
          className="product-hero-grid"
          style={hasHeroMedia ? { display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" } : { maxWidth: 860 }}
        >
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
              {chips.map((c, i) => (
                <span key={i} className={`chip ${i === 0 ? "cyan" : ""}`} style={i === 0 ? { border: "1px solid rgba(32,199,232,0.3)", color: "var(--cyan)", background: "rgba(32,199,232,0.06)" } : {}}>{c}</span>
              ))}
            </div>
            <h1 className="display display-xl" style={{ fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05, fontFamily: "var(--font-display)" }}>{name}</h1>
            <p className="lede" style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--ink-2)" }}>
              {lede}
            </p>
            <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.5, color: "var(--ink-3)" }}>
              {subdesc}
            </p>

            {/* Metric strip */}
            <div className="pp-metrics" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "20px 0", maxWidth: hasHeroMedia ? "none" : 580 }}>
              {metrics.map(([n, l]) => (
                <div key={l} style={{ borderRight: l !== metrics[metrics.length - 1][1] ? "1px solid var(--line)" : "none", paddingRight: 20 }}>
                  <div className="display display-md" style={{ fontWeight: 500, fontSize: 24 }}>{n}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginTop: 4 }}>{l}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap" }}>
              {gaDrawingUrl && (
                <a href="#machines-layout" className="btn btn-primary" style={{ textDecoration: "none" }}>View layout
                  <svg className="arrow" viewBox="0 0 16 16" fill="none" style={{ width: 16, height: 16, marginLeft: 6 }}><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
                </a>
              )}
              <button onClick={() => {
                window.__MODAL_CONTEXT__ = {
                  action: "quote",
                  title: "Request Equipment Specification & Proposal",
                  badge: "Equipment Enquiry"
                };
                window.dispatchEvent(new CustomEvent("show-lead-modal"));
              }} className="btn btn-pharma">Request quote</button>
              <a
                href={brochureUrl}
                download
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-ghost"
                style={{ textDecoration: "none", display: "inline-flex", alignItems: "center", justifyContent: "center" }}
              >
                Download brochure
              </a>
            </div>
          </div>

          {hasHeroMedia && (
            <div className="product-hero-model" style={{ position: "relative", height: 500 }}>
              {model3d ? (
                <ProductModelViewer src={model3d} alt={modelAlt} />
              ) : heroImage ? (
                <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "radial-gradient(circle at center, rgba(32,199,232,0.06) 0%, rgba(245,247,250,0.7) 70%)", borderRadius: 16, overflow: "hidden", padding: 24, border: "1px solid var(--line)" }}>
                  <img
                    src={heroImage}
                    alt={name}
                    style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", filter: "drop-shadow(0 20px 35px rgba(11,17,23,0.15))" }}
                  />
                </div>
              ) : null}
              {model3d ? (
                <div style={{ position: "absolute", top: 0, right: 0, padding: "8px 12px", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: "var(--radius)", zIndex: 5 }}>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
                    Live 3D explorer
                  </div>
                </div>
              ) : heroImage ? (
                <div style={{ position: "absolute", top: 0, right: 0, padding: "8px 12px", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: "var(--radius)", zIndex: 5 }}>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
                    Engineering Model
                  </div>
                </div>
              ) : null}
              {modelsList && modelsList.length > 1 && (
                <div style={{
                  position: "absolute",
                  bottom: 16,
                  left: 16,
                  display: "inline-flex",
                  gap: 6,
                  zIndex: 10,
                  background: "rgba(255,255,255,0.92)",
                  backdropFilter: "blur(8px)",
                  padding: "4px",
                  borderRadius: "24px",
                  border: "1px solid var(--line)",
                  boxShadow: "0 4px 12px rgba(0,0,0,0.06)"
                }}>
                  {modelsList.map((m, idx) => (
                    <button
                      key={idx}
                      type="button"
                      onClick={() => setActiveModelIdx(idx)}
                      style={{
                        border: "none",
                        cursor: "pointer",
                        padding: "6px 14px",
                        borderRadius: "20px",
                        fontFamily: "var(--font-mono, monospace)",
                        fontSize: "11px",
                        fontWeight: 600,
                        letterSpacing: "0.04em",
                        transition: "all 0.2s ease",
                        background: activeModelIdx === idx ? "var(--ink, #0B1117)" : "transparent",
                        color: activeModelIdx === idx ? "#ffffff" : "var(--ink-2, #475467)",
                      }}
                    >
                      {m.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============ PROCESS FLOW ============
function ProcessFlow() {
  const d = window.PRODUCT_DATA || {};
  const [active, setActive] = useSP(0);
  const subtitle = d.processSubtitle || "Eight processing zones, high-shear, fully validated.";
  const steps = d.processSteps || [
    { num: "01", label: "Dry charging", t: "Raw powder materials loaded into the mixing bowl via gravity, vacuum, or manually." },
    { num: "02", label: "Dry mixing", t: "Impeller rotates at slow speed to homogenize and blend dry powders thoroughly." },
    { num: "03", label: "Binder addition", t: "Liquid binder solution is sprayed or poured uniformly across the dry powder mix." },
    { num: "04", label: "Wet mixing", t: "Impeller distributes binder solution to build a cohesive, consistent wet mass." },
    { num: "05", label: "Granulation", t: "High-shear side-mounted chopper cuts the wet mass to form uniform granules." },
    { num: "06", label: "Wet milling", t: "Optional online co-mill refines granule sizes and distribution before discharge." },
    { num: "07", label: "Pneumatic discharge", t: "Automated discharge valve opens, transferring wet granules to the FBD bowl smoothly." },
    { num: "08", label: "CIP / Washdown", t: "Easy access washdown with optional WIP/CIP spray balls for fast cleanups." },
  ];

  if (!steps || steps.length === 0) return null;

  return (
    <section className="section" style={{ background: "var(--metal-3)", paddingTop: 100, paddingBottom: 100 }}>
      <div className="container">
        <div className="section-label">Process flow</div>
        <h2 className="display display-lg" style={{ maxWidth: "20ch", marginBottom: 48, fontSize: "clamp(32px, 4vw, 48px)" }}>
          {subtitle}
        </h2>

        <div className="pp-process-card" style={{ background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 12, padding: 32, overflowX: "auto" }}>
          {/* Timeline */}
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 16, minWidth: 720, position: "relative" }}>
            {/* connector line */}
            <div style={{ position: "absolute", top: 22, left: "6%", right: "6%", height: 2, background: "var(--line)" }} />
            <div style={{ position: "absolute", top: 22, left: "6%", height: 2, background: "var(--pharma)", width: `${(active / (steps.length - 1)) * 88}%`, transition: "width 300ms" }} />

            {steps.map((s, i) => (
              <button key={s.num} onClick={() => setActive(i)}
                style={{ background: "transparent", border: "none", textAlign: "left", cursor: "pointer", padding: "0 8px", display: "flex", flexDirection: "column", alignItems: "center" }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 999,
                  border: `2px solid ${active >= i ? "var(--pharma)" : "var(--line)"}`,
                  background: active === i ? "var(--pharma)" : "white",
                  color: active === i ? "white" : (active > i ? "var(--pharma)" : "var(--ink-3)"),
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em",
                  position: "relative", zIndex: 1, transition: "all 200ms",
                }}>
                  {s.num}
                </div>
                <div style={{ marginTop: 14, fontSize: 12, fontWeight: active === i ? 600 : 500, color: active === i ? "var(--ink)" : "var(--ink-3)", textAlign: "center", letterSpacing: "-0.005em" }}>
                  {s.label}
                </div>
              </button>
            ))}
          </div>

          <div className="pp-process-detail" style={{ marginTop: 40, padding: "28px 32px", background: "var(--metal-3)", borderRadius: "var(--radius-md)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }}>
            <div className="mono" style={{ fontSize: 12, color: "var(--pharma)", letterSpacing: "0.1em", textTransform: "uppercase" }}>
              {steps[active].num} · {steps[active].label}
            </div>
            <div style={{ fontSize: 16, color: "var(--ink)" }}>{steps[active].t}</div>
            <div style={{ display: "flex", gap: 6 }}>
              <button onClick={() => setActive(Math.max(0, active - 1))} className="btn btn-ghost" style={{ padding: "8px 12px", fontSize: 12 }}>←</button>
              <button onClick={() => setActive(Math.min(steps.length - 1, active + 1))} className="btn btn-ghost" style={{ padding: "8px 12px", fontSize: 12 }}>→</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FEATURES GRID ============
function FeaturesGrid() {
  const d = window.PRODUCT_DATA || {};
  const [showOptional, setShowOptional] = useSP(false);
  const subtitle = d.featuresSubtitle || "Engineered for high performance and process control.";
  const keyFeatures = d.keyFeatures || [
    "Product contact parts manufactured in SS 316 / SS 316L",
    "High-shear impeller for rapid and uniform mixing",
    "Side-mounted chopper for efficient granulation",
    "Pneumatic discharge system for smooth material transfer",
    "cGMP-compliant design with easy access for cleaning and maintenance",
    "Robust construction with low maintenance requirements",
    "Dust-free processing with enhanced containment",
    "Safety interlocks for secure operation"
  ];
  const optionalFeatures = d.optionalFeatures || [
    "Vacuum charging system",
    "Binder solution preparation vessel",
    "Online wet milling system",
    "Explosion-proof execution",
    "CIP/WIP system",
    "OEB containment design",
    "SCADA integration"
  ];

  const featuresToDisplay = showOptional ? [...keyFeatures, ...optionalFeatures] : keyFeatures;

  return (
    <section className="section" id="features" style={{ background: "var(--paper)", padding: "120px 0" }}>
      <div className="container">
        <div className="section-label">Engineering Features</div>
        <div style={{ marginBottom: 48 }}>
          <h2 className="display display-lg" style={{ maxWidth: "28ch", margin: 0, fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 700, fontFamily: "var(--font-display)" }}>
            {subtitle}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(280px, 100%), 1fr))", gap: 24 }}>
          {featuresToDisplay.map((feat, i) => {
            const isOptional = i >= keyFeatures.length;
            return (
              <div
                key={i}
                style={{
                  padding: "32px 28px",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--radius-lg)",
                  background: isOptional ? "rgba(32,199,232,0.02)" : "var(--metal-3)",
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                  minHeight: 160,
                  transition: "all 300ms ease"
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = "translateY(-4px)";
                  e.currentTarget.style.borderColor = isOptional ? "rgba(32,199,232,0.4)" : "var(--ink-3)";
                  e.currentTarget.style.background = isOptional ? "rgba(32,199,232,0.06)" : "#e2e8f0";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = "none";
                  e.currentTarget.style.borderColor = "var(--line)";
                  e.currentTarget.style.background = isOptional ? "rgba(32,199,232,0.02)" : "var(--metal-3)";
                }}
              >
                <span className="chip" style={{ alignSelf: "flex-start", fontSize: 9, background: "var(--paper)", color: isOptional ? "var(--cyan)" : "var(--ink-3)", borderColor: isOptional ? "rgba(32,199,232,0.3)" : "var(--line)" }}>
                  {isOptional ? "OPTIONAL FEATURE" : "KEY FEATURE"}
                </span>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 600, marginTop: 20, marginBottom: 0, lineHeight: 1.4, color: "var(--ink)" }}>
                  {feat}
                </h3>
              </div>
            );
          })}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
          <button
            className="btn btn-pharma"
            onClick={() => setShowOptional(!showOptional)}
            style={{ padding: "14px 28px", fontSize: 14, borderRadius: "999px" }}
          >
            {showOptional ? "Hide Optional Features" : "Show Optional Features"}
          </button>
        </div>
      </div>
    </section>
  );
}

// ============ ADVANTAGES SECTION ============
function AdvantagesSection() {
  const d = window.PRODUCT_DATA || {};
  const advantages = d.advantages || [
    { title: "Reduced processing time", desc: "Shortens dry mixing and wet granulation cycles to just 8-15 minutes, boosting overall throughput." },
    { title: "Uniform size distribution", desc: "Delivers a consistent granule sizing with minimized fine particles, ideal for tablet compressing." },
    { title: "Improved flow properties", desc: "Produces dense granules with excellent flowability, preventing downstream tableting hopper jams." },
    { title: "Increased production efficiency", desc: "Automates charging and discharging to reduce manual processing, downtime, and operator labor." },
    { title: "Reduced manual handling", desc: "Pneumatic systems and gravity feeds minimize operator contact with product powders." },
    { title: "Consistent batch repeatability", desc: "Pre-programmed recipe cycles guarantee identical batch outputs, securing strict QA standards." },
  ];
  const title = d.advantagesTitle || "Engineering without compromise.";
  const desc = d.advantagesDesc || "Every Mark Maker machine is built on a foundation of rigorous pharmaceutical standards, leveraging modern automation to guarantee repeatability, yield, and operator safety.";

  // Carousel images configuration
  const rawCarousel = d.advantagesCarousel || (d.advantagesImage ? [{ src: d.advantagesImage, tag: "Engineering" }] : d.carouselItems);
  const carouselItems = (Array.isArray(rawCarousel) && rawCarousel.length > 0)
    ? rawCarousel.filter(item => item && item.src && !item.src.includes("placehold.co"))
    : null;
  const hasCarousel = !!(carouselItems && carouselItems.length > 0);
  const [currentSlide, setCurrentSlide] = React.useState(0);

  const prevSlide = () => {
    if (!hasCarousel) return;
    setCurrentSlide((prev) => (prev === 0 ? carouselItems.length - 1 : prev - 1));
  };

  const nextSlide = () => {
    if (!hasCarousel) return;
    setCurrentSlide((prev) => (prev === carouselItems.length - 1 ? 0 : prev + 1));
  };

  return (
    <section className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line)", padding: "100px 0" }}>
      <style dangerouslySetInnerHTML={{
        __html: `
        @keyframes blueprint-spin {
          from { transform: translate(-50%, -50%) rotate(0deg); }
          to { transform: translate(-50%, -50%) rotate(360deg); }
        }
      `}} />
      <div className="container">
        {hasCarousel ? (
          <div className="grid lg:grid-cols-2 pp-two-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            {/* Left Column: Advantages */}
            <div>
              <h2 className="display display-md" style={{ marginBottom: 20, fontSize: 36, fontWeight: 700 }}>
                {title}
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-2)", marginBottom: 40, lineHeight: 1.6 }}>
                {desc}
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 24 }}>
                {advantages.map((ad, idx) => (
                  <div key={idx} style={{ display: "flex", gap: 16 }}>
                    <div style={{ width: 40, height: 40, borderRadius: "8px", background: "rgba(29, 111, 232, 0.06)", border: "1px solid rgba(29, 111, 232, 0.15)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--pharma)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="20 6 9 17 4 12" />
                      </svg>
                    </div>
                    <div>
                      <h4 style={{ margin: "0 0 4px", fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{ad.title}</h4>
                      <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>{ad.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right Column: Carousel Image */}
            <div className="relative" style={{ position: "relative", width: "100%" }}>
              <div style={{
                position: "relative",
                width: "100%",
                aspectRatio: "1/1",
                borderRadius: "var(--radius-lg)",
                border: "1px solid var(--line)",
                overflow: "hidden",
                boxShadow: "0 20px 40px rgba(0,0,0,0.12)",
                background: "radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center"
              }}>
                {carouselItems.map((item, idx) => (
                  <div
                    key={idx}
                    style={{
                      position: "absolute",
                      inset: 0,
                      opacity: currentSlide === idx ? 1 : 0,
                      transition: "opacity 400ms ease-in-out",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      padding: "24px",
                      pointerEvents: currentSlide === idx ? "auto" : "none"
                    }}
                  >
                    <img 
                      src={item.src} 
                      alt={item.tag || "Product Image"}
                      loading="lazy"
                      decoding="async" 
                      style={{
                        maxWidth: "100%",
                        maxHeight: "100%",
                        objectFit: "contain",
                        filter: "drop-shadow(0 10px 20px rgba(0,0,0,0.08))"
                      }}
                    />
                    {item.tag && (
                      <div style={{
                        position: "absolute",
                        bottom: 20,
                        left: 20,
                        background: "rgba(11, 17, 23, 0.8)",
                        backdropFilter: "blur(8px)",
                        color: "#FFFFFF",
                        padding: "6px 14px",
                        borderRadius: "999px",
                        fontFamily: "var(--font-mono)",
                        fontSize: 12,
                        fontWeight: 500,
                        letterSpacing: "0.03em",
                        border: "1px solid rgba(255, 255, 255, 0.15)",
                        display: "flex",
                        alignItems: "center",
                        gap: 8,
                        boxShadow: "0 4px 12px rgba(0,0,0,0.2)"
                      }}>
                        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--cyan)" }}></span>
                        {item.tag}
                      </div>
                    )}
                  </div>
                ))}

                {/* Navigation Controls (if multiple slides) */}
                {carouselItems.length > 1 && (
                  <>
                    <button
                      onClick={prevSlide}
                      aria-label="Previous Slide"
                      style={{
                        position: "absolute",
                        left: 16,
                        top: "50%",
                        transform: "translateY(-50%)",
                        width: 40,
                        height: 40,
                        borderRadius: "50%",
                        background: "rgba(255, 255, 255, 0.9)",
                        border: "1px solid var(--line)",
                        color: "var(--ink)",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        cursor: "pointer",
                        boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
                        transition: "all 150ms ease",
                        zIndex: 10
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.background = "#ffffff"}
                      onMouseLeave={(e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.9)"}
                    >
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="15 18 9 12 15 6"></polyline>
                      </svg>
                    </button>

                    <button
                      onClick={nextSlide}
                      aria-label="Next Slide"
                      style={{
                        position: "absolute",
                        right: 16,
                        top: "50%",
                        transform: "translateY(-50%)",
                        width: 40,
                        height: 40,
                        borderRadius: "50%",
                        background: "rgba(255, 255, 255, 0.9)",
                        border: "1px solid var(--line)",
                        color: "var(--ink)",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        cursor: "pointer",
                        boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
                        transition: "all 150ms ease",
                        zIndex: 10
                      }}
                      onMouseEnter={(e) => e.currentTarget.style.background = "#ffffff"}
                      onMouseLeave={(e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.9)"}
                    >
                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <polyline points="9 18 15 12 9 6"></polyline>
                      </svg>
                    </button>

                    {/* Dots Indicator */}
                    <div style={{
                      position: "absolute",
                      bottom: 20,
                      right: 20,
                      display: "flex",
                      gap: 6,
                      zIndex: 10,
                      background: "rgba(255,255,255,0.7)",
                      backdropFilter: "blur(4px)",
                      padding: "4px 8px",
                      borderRadius: "999px"
                    }}>
                      {carouselItems.map((_, idx) => (
                        <button
                          key={idx}
                          onClick={() => setCurrentSlide(idx)}
                          aria-label={`Go to slide ${idx + 1}`}
                          style={{
                            width: currentSlide === idx ? 18 : 6,
                            height: 6,
                            borderRadius: "999px",
                            background: currentSlide === idx ? "var(--pharma)" : "var(--metal)",
                            border: "none",
                            padding: 0,
                            cursor: "pointer",
                            transition: "all 200ms ease"
                          }}
                        />
                      ))}
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        ) : (
          <div>
            <div style={{ maxWidth: 760, marginBottom: 48 }}>
              <h2 className="display display-md" style={{ marginBottom: 20, fontSize: 36, fontWeight: 700 }}>
                {title}
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-2)", margin: 0, lineHeight: 1.6 }}>
                {desc}
              </p>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(320px, 100%), 1fr))", gap: 32 }}>
              {advantages.map((ad, idx) => (
                <div key={idx} style={{ display: "flex", gap: 16 }}>
                  <div style={{ width: 40, height: 40, borderRadius: "8px", background: "rgba(29, 111, 232, 0.06)", border: "1px solid rgba(29, 111, 232, 0.15)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--pharma)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  </div>
                  <div>
                    <h4 style={{ margin: "0 0 6px", fontSize: 16, fontWeight: 600, color: "var(--ink)" }}>{ad.title}</h4>
                    <p style={{ margin: 0, fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5 }}>{ad.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ============ PRODUCT IMAGE GALLERY ============
function ProductGallery() {
  const d = window.PRODUCT_DATA || {};
  const [images, setImages] = React.useState(d.galleryImages || []);
  const [selectedImg, setSelectedImg] = React.useState(null);
  const [isExpanded, setIsExpanded] = React.useState(false);
  const galleryDir = d.galleryDirectory;

  React.useEffect(() => {
    if (!galleryDir) return;

    fetch(galleryDir)
      .then((res) => {
        if (!res.ok) throw new Error("HTTP error " + res.status);
        return res.text();
      })
      .then((html) => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, "text/html");
        const links = Array.from(doc.querySelectorAll("a"));
        const imgUrls = links
          .map((a) => a.getAttribute("href"))
          .filter((href) => href && /\.(png|jpe?g|webp|gif|svg)(\?.*)?$/i.test(href))
          .map((href) => {
            const decodedName = decodeURIComponent(href.split("/").pop());
            const fullUrl = href.startsWith("http") || href.startsWith("/")
              ? href
              : `${galleryDir.replace(/\/$/, "")}/${href}`;
            return {
              src: fullUrl,
              name: decodedName.replace(/\.[^/.]+$/, "").replace(/\s*\(EDITED\)/gi, "").trim()
            };
          });

        // Optimised .webp copies sit next to the original .png/.jpg files:
        // show each photo once, preferring the lightweight .webp.
        const byBase = new Map();
        imgUrls.forEach((img) => {
          const base = img.src.replace(/\.[^/.?]+(\?.*)?$/, "");
          if (!byBase.has(base) || /\.webp(\?.*)?$/i.test(img.src)) byBase.set(base, img);
        });
        const uniqueImages = Array.from(byBase.values());

        if (uniqueImages.length > 0) {
          setImages(uniqueImages);
        }
      })
      .catch((err) => {
        console.warn("Could not dynamically fetch directory listing, falling back to static config:", err);
      });
  }, [galleryDir]);

  if (!images || images.length === 0) return null;

  // Show 2 rows maximum when collapsed (4 items per row on desktop = 8 items)
  const initialCount = 8;
  const displayedImages = isExpanded ? images : images.slice(0, initialCount);
  const canExpand = images.length > initialCount;
  const isSingle = displayedImages.length === 1;
  const isCol4 = !isSingle && (d.galleryColumns === 3 || d.galleryColumns === "3" || d.galleryColClass === "col-4" || displayedImages.length === 3);

  const sectionLabel = d.galleryLabel || (isSingle ? "Visual Feature" : "Visual Showcase");
  const defaultTitle = isSingle ? "Machine Showcase" : "Machine & Fabrication Gallery";
  const title = d.galleryTitle || defaultTitle;
  const defaultDesc = isSingle
    ? "Explore detailed capture of our equipment build quality, sanitary finishes, and precision manufacturing."
    : "Explore detailed captures of our equipment build quality, sanitary finishes, and precision manufacturing.";
  const desc = d.galleryDesc || defaultDesc;

  return (
    <section className="section" style={{ background: "var(--metal-3)", borderTop: "1px solid var(--line)", padding: "100px 0" }}>
      <div className="container">
        <div style={{
          marginBottom: 48,
          maxWidth: isSingle ? 760 : 680,
          textAlign: isSingle ? "center" : "left",
          margin: isSingle ? "0 auto 48px auto" : "0 0 48px 0"
        }}>
          <div className="section-label" style={{ marginBottom: 12, justifyContent: isSingle ? "center" : "flex-start" }}>{sectionLabel}</div>
          <h2 className="display display-md" style={{ margin: "0 0 16px", fontSize: "clamp(30px, 3.5vw, 42px)", fontWeight: 700 }}>
            {title}
          </h2>
          <p style={{ margin: 0, fontSize: 17, color: "var(--ink-2)", lineHeight: 1.6 }}>
            {desc}
          </p>
        </div>

        {/* Gallery Grid */}
        <style dangerouslySetInnerHTML={{
          __html: `
          .product-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
            gap: 24px;
          }
          .product-gallery-grid.grid-single {
            display: flex;
            justify-content: center;
          }
          .product-gallery-grid.grid-single > div {
            max-width: 600px;
            width: 100%;
          }
          .product-gallery-grid.grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
          }
          @media (max-width: 991px) {
            .product-gallery-grid.grid-cols-3 {
              grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            }
          }
          @media (max-width: 640px) {
            .product-gallery-grid,
            .product-gallery-grid.grid-cols-3 {
              grid-template-columns: 1fr;
            }
          }
        `}} />
        <div
          className={`product-gallery-grid ${isSingle ? "grid-single" : (isCol4 ? "grid-cols-3" : "")}`}
        >
          {displayedImages.map((item, idx) => {
            const imgSrc = typeof item === "string" ? item : item.src;
            const imgLabel = typeof item === "string" ? `Image ${idx + 1}` : (item.name || `Image ${idx + 1}`);

            return (
              <div
                key={idx}
                onClick={() => setSelectedImg({ src: imgSrc, label: imgLabel })}
                style={{
                  background: "#ffffff",
                  borderRadius: "var(--radius-md)",
                  border: "1px solid var(--line)",
                  overflow: "hidden",
                  cursor: "pointer",
                  transition: "all 250ms cubic-bezier(0.2, 0.7, 0.3, 1)",
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  boxShadow: "0 2px 8px rgba(0,0,0,0.04)"
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = "translateY(-4px)";
                  e.currentTarget.style.boxShadow = "0 12px 24px rgba(0,0,0,0.09)";
                  e.currentTarget.style.borderColor = "var(--pharma)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = "translateY(0)";
                  e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.04)";
                  e.currentTarget.style.borderColor = "var(--line)";
                }}
              >
                <div style={{
                  width: "100%",
                  aspectRatio: "1/1",
                  background: "radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  padding: 16,
                  position: "relative"
                }}>
                  <img
                    src={imgSrc}
                    alt={imgLabel}
                    loading="lazy"
                    style={{
                      maxWidth: "100%",
                      maxHeight: "100%",
                      objectFit: "contain",
                      transition: "transform 250ms ease"
                    }}
                  />
                </div>
              </div>
            );
          })}
        </div>

        {/* Show More / Show Less Button */}
        {canExpand && (
          <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
            <button
              onClick={() => setIsExpanded(!isExpanded)}
              className="btn btn-pharma"
              style={{
                padding: "14px 32px",
                fontSize: 14,
                borderRadius: "999px",
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                boxShadow: "0 4px 14px rgba(29, 111, 232, 0.25)"
              }}
            >
              <span>{isExpanded ? "Show Less" : `Show More (${images.length - initialCount} more)`}</span>
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                style={{
                  transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 200ms ease"
                }}
              >
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </button>
          </div>
        )}

        {/* Lightbox Modal */}
        {selectedImg && (
          <div
            onClick={() => setSelectedImg(null)}
            style={{
              position: "fixed",
              inset: 0,
              zIndex: 9999,
              background: "rgba(11, 17, 23, 0.88)",
              backdropFilter: "blur(10px)",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              padding: 24,
              cursor: "zoom-out"
            }}
          >
            <div
              onClick={(e) => e.stopPropagation()}
              style={{
                position: "relative",
                maxWidth: "92vw",
                maxHeight: "88vh",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                cursor: "default"
              }}
            >
              <div style={{
                position: "relative",
                background: "radial-gradient(circle at center, #ffffff 0%, #0f172a 100%)",
                borderRadius: "var(--radius-lg)",
                padding: "20px",
                border: "1px solid rgba(255,255,255,0.15)",
                boxShadow: "0 25px 60px rgba(0,0,0,0.5)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                maxHeight: "80vh"
              }}>
                <img
                  src={selectedImg.src}
                  alt={selectedImg.label}
                  style={{
                    maxWidth: "100%",
                    maxHeight: "75vh",
                    objectFit: "contain",
                    borderRadius: "var(--radius-md)"
                  }}
                />
                <button
                  onClick={() => setSelectedImg(null)}
                  aria-label="Close"
                  style={{
                    position: "absolute",
                    top: -16,
                    right: -16,
                    width: 36,
                    height: 36,
                    borderRadius: "50%",
                    background: "#ffffff",
                    border: "1px solid var(--line)",
                    color: "var(--ink)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    cursor: "pointer",
                    boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
                  }}
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
              <div style={{
                marginTop: 16,
                color: "#ffffff",
                fontFamily: "var(--font-mono)",
                fontSize: 14,
                letterSpacing: "0.03em",
                background: "rgba(0,0,0,0.6)",
                padding: "6px 16px",
                borderRadius: "999px",
                border: "1px solid rgba(255,255,255,0.15)"
              }}>
                {selectedImg.label}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ============ TECHNICAL SPECS ============
function TechSpecs() {
  const d = window.PRODUCT_DATA || {};

  const toTitleCase = (str) => {
    if (!str) return "";
    return str.replace(/\w\S*/g, (txt) => {
      const upperList = ["RMG", "FBD", "FBP", "OCB", "CPB", "DCB", "VTD", "DCM", "MML", "PPV", "VSFT", "EFF-PRO", "EFF", "PACK", "FBC", "HP", "KW", "SA", "CIP", "WIP", "OEB", "SCADA", "CFM", "BAR", "RPM", "HZ"];
      const upperTxt = txt.toUpperCase().replace(/[^A-Z0-9-]/g, "");
      if (upperList.some(item => upperTxt === item || upperTxt.includes(item))) {
        return txt.toUpperCase();
      }
      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  };

  const specCategories = d.specCategories || ["lab", "production"];
  const specCategoryLabels = d.specCategoryLabels || { lab: "Lab Models", production: "Production Models" };
  const defaultCategory = specCategories[0] || "lab";
  const [activeCategory, setActiveCategory] = useSP(defaultCategory);

  const groups = d.techSpecsGroups || {
    spec1: {
      label: "Lab Model (Spec 1)", rows: [
        ["Gross Cap (Ltrs)", "5"],
        ["Work Cap (Ltrs)", "4"],
        ["Work Cap (Kg)", "1 kg – 2 kg"],
        ["Interchangeable Bowls", "3L, 2L"],
        ["Main Motor", "3 HP"],
        ["Gear Box", "7.5:1"],
        ["Chopper Motor", "2 HP"],
        ["Co Mill", "N.A"],
        ["Discharge Height", "690 mm"],
        ["Space Required (L × B × H mm)", "1640 × 560 × 1174 mm"],
      ]
    },
    spec2: {
      label: "Lab Model (Spec 2)", rows: [
        ["Gross Cap (Ltrs)", "10"],
        ["Work Cap (Ltrs)", "8"],
        ["Work Cap (Kg)", "2 kg – 5 kg"],
        ["Interchangeable Bowls", "5L, 3L, 2L"],
        ["Main Motor", "3 HP"],
        ["Gear Box", "7.5:1"],
        ["Chopper Motor", "2 HP"],
        ["Co Mill", "N.A"],
        ["Discharge Height", "750 mm"],
        ["Space Required (L × B × H mm)", "1780 × 750 × 1300 mm"],
      ]
    },
    spec3: {
      label: "Lab Model (Spec 3)", rows: [
        ["Gross Cap (Ltrs)", "15"],
        ["Work Cap (Ltrs)", "12"],
        ["Work Cap (Kg)", "3 kg – 6 kg"],
        ["Interchangeable Bowls", "10L, 5L, 3L, 2L"],
        ["Main Motor", "3 HP"],
        ["Gear Box", "7.5:1"],
        ["Chopper Motor", "2 HP"],
        ["Co Mill", "N.A"],
        ["Discharge Height", "800 mm"],
        ["Space Required (L × B × H mm)", "1640 × 560 × 1385 mm"],
      ]
    },
    spec4: {
      label: "Lab Model (Spec 4)", rows: [
        ["Gross Cap (Ltrs)", "25"],
        ["Work Cap (Ltrs)", "20"],
        ["Work Cap (Kg)", "5 kg – 10 kg"],
        ["Interchangeable Bowls", "15L, 10L, 5L, 3L, 2L"],
        ["Main Motor", "3 HP"],
        ["Gear Box", "7.5:1"],
        ["Chopper Motor", "2 HP"],
        ["Co Mill", "N.A"],
        ["Discharge Height", "915 mm"],
        ["Space Required (L × B × H mm)", "1780 × 700 × 1600 mm"],
      ]
    },
    prod1: {
      label: "Production Model (Spec 1)", rows: [
        ["Gross Cap (Ltrs)", "50"],
        ["Work Cap (Ltrs)", "40"],
        ["Work Cap (Kg)", "20 KG"],
        ["Main Motor", "5 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "2 HP"],
        ["Co Mill", "1 HP"],
        ["Discharge Height", "680 MM"],
        ["Space Required (L × B × H mm)", "1155 X 705 X 1550 mm"],
      ]
    },
    prod2: {
      label: "Production Model (Spec 2)", rows: [
        ["Gross Cap (Ltrs)", "100"],
        ["Work Cap (Ltrs)", "80"],
        ["Work Cap (Kg)", "40 KG"],
        ["Main Motor", "15 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "3 HP"],
        ["Co Mill", "3 HP"],
        ["Discharge Height", "709 MM"],
        ["Space Required (L × B × H mm)", "2200 X 2130 X 2435 mm"],
      ]
    },
    prod3: {
      label: "Production Model (Spec 3)", rows: [
        ["Gross Cap (Ltrs)", "150"],
        ["Work Cap (Ltrs)", "120"],
        ["Work Cap (Kg)", "60 KG"],
        ["Main Motor", "15 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "3 HP"],
        ["Co Mill", "3 HP"],
        ["Discharge Height", "709 MM"],
        ["Space Required (L × B × H mm)", "2200 X 2160 X 2435 mm"],
      ]
    },
    prod4: {
      label: "Production Model (Spec 4)", rows: [
        ["Gross Cap (Ltrs)", "300"],
        ["Work Cap (Ltrs)", "240"],
        ["Work Cap (Kg)", "120 KG"],
        ["Main Motor", "30 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "5 HP"],
        ["Co Mill", "5 HP"],
        ["Discharge Height", "800 MM"],
        ["Space Required (L × B × H mm)", "2700 X 2600 X 3200 mm"],
      ]
    },
    prod5: {
      label: "Production Model (Spec 5)", rows: [
        ["Gross Cap (Ltrs)", "400"],
        ["Work Cap (Ltrs)", "320"],
        ["Work Cap (Kg)", "150 KG"],
        ["Main Motor", "40 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "7.5 HP"],
        ["Co Mill", "5 HP"],
        ["Discharge Height", "850 MM"],
        ["Space Required (L × B × H mm)", "2660 X 2545 X 3280 mm"],
      ]
    },
    prod6: {
      label: "Production Model (Spec 6)", rows: [
        ["Gross Cap (Ltrs)", "600"],
        ["Work Cap (Ltrs)", "480"],
        ["Work Cap (Kg)", "250 KG"],
        ["Main Motor", "50 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "7.5 HP"],
        ["Co Mill", "5 HP"],
        ["Discharge Height", "900 MM"],
        ["Space Required (L × B × H mm)", "3650 X 3100 X 3950 mm"],
      ]
    },
    prod7: {
      label: "Production Model (Spec 7)", rows: [
        ["Gross Cap (Ltrs)", "800"],
        ["Work Cap (Ltrs)", "640"],
        ["Work Cap (Kg)", "300 KG"],
        ["Main Motor", "60 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "7.5 HP"],
        ["Co Mill", "5 HP"],
        ["Discharge Height", "900 MM"],
        ["Space Required (L × B × H mm)", "3750 X 3200 X 3950 mm"],
      ]
    },
    prod8: {
      label: "Production Model (Spec 8)", rows: [
        ["Gross Cap (Ltrs)", "1250"],
        ["Work Cap (Ltrs)", "1000"],
        ["Work Cap (Kg)", "500 KG"],
        ["Main Motor", "100 HP"],
        ["Gear Box", "10:01"],
        ["Chopper Motor", "15 HP"],
        ["Co Mill", "15 HP"],
        ["Discharge Height", "1200 MM"],
        ["Space Required (L × B × H mm)", "3850 X 3200 X 4000 mm"],
      ]
    },
  };

  const getFirstGroupKey = (cat) => {
    return Object.keys(groups).find(k => {
      if (cat === "lab") return k.startsWith("spec") || k.includes("lab");
      return k.startsWith("prod") || k.includes("prod");
    }) || Object.keys(groups)[0];
  };

  const [group, setGroup] = useSP(getFirstGroupKey(defaultCategory));

  const handleCategoryChange = (cat) => {
    setActiveCategory(cat);
    setGroup(getFirstGroupKey(cat));
  };
  return (
    <section className="section" style={{ background: "var(--metal-3)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-label">Technical specifications</div>
        <div className="pp-section-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32 }}>
          <h2 className="display display-lg" style={{ maxWidth: "18ch", fontSize: "clamp(32px, 4vw, 48px)" }}>
            Engineered details, built to last.
          </h2>
          <a
            href={getProductBrochure(d)}
            download
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-ghost"
            style={{ padding: "8px 14px", fontSize: 12, textDecoration: "none", display: "inline-flex", alignItems: "center", justifyContent: "center" }}
          >
            Download brochure (PDF)
          </a>
        </div>

        <div className="tabs" style={{ marginBottom: 24, borderBottom: "1px solid var(--line)" }}>
          {specCategories.map(cat => (
            <button
              key={cat}
              className={`tab ${activeCategory === cat ? "active" : ""}`}
              onClick={() => handleCategoryChange(cat)}
            >
              {specCategoryLabels[cat] || cat}
            </button>
          ))}
        </div>

        <div className="card" style={{ background: "var(--paper)", padding: 0, overflow: "hidden" }}>
          <div className="pp-specs-grid" style={{ display: "grid", gridTemplateColumns: "260px 1fr" }}>
            {/* Side nav */}
            <div className="pp-specs-nav" style={{ borderRight: "1px solid var(--line)", padding: "16px 0", maxHeight: "580px", overflowY: "auto" }}>
              {Object.entries(groups)
                .filter(([k]) => {
                  if (activeCategory === "lab") return k.startsWith("spec") || k.includes("lab");
                  return k.startsWith("prod") || k.includes("prod");
                })
                .map(([k, g], index) => (
                  <button key={k} onClick={() => setGroup(k)}
                    style={{
                      display: "flex", justifyContent: "space-between", alignItems: "center",
                      width: "100%", padding: "14px 24px", background: group === k ? "var(--metal-3)" : "transparent",
                      border: "none", textAlign: "left", cursor: "pointer",
                      borderLeft: `3px solid ${group === k ? "var(--pharma)" : "transparent"}`,
                      fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 500,
                      color: group === k ? "var(--ink)" : "var(--ink-2)",
                    }}>
                    <span>{toTitleCase(g.label || `Specification ${index + 1}`)}</span>
                    <span className="mono" style={{ fontSize: 10, color: "var(--ink-4)" }}>{g.rows.length}</span>
                  </button>
                ))}
            </div>
            {/* Rows */}
            <div className="pp-specs-rows" style={{ padding: "16px 32px" }}>
              {groups[group].rows.map(([k, v]) => (
                <div key={k} className="spec-row">
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
              ))}
              <div style={{ marginTop: 24, display: "flex", gap: 8, flexWrap: "wrap" }}>
                <button className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 12 }}>Copy values</button>
                <button className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 12 }}>Ask an engineer</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function renderMachineLayoutSvg(key) {
  switch (key) {
    case "auto-coater":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR ACCESS ZONE · 1.5m</text>

          {/* Maintenance zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">MAINTENANCE & DUCT ACCESS · 1.2m</text>

          {/* Machine cabinet frame */}
          <rect x="90" y="70" width="220" height="130" fill="white" stroke="var(--ink)" strokeWidth="1.5" />

          {/* Perforated coating pan / drum */}
          <rect x="135" y="80" width="130" height="105" rx="10" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="200" cy="132" r="42" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="0.8" />
          <circle cx="200" cy="132" r="18" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="0.6" />

          {/* Spray boom line & nozzles */}
          <line x1="150" y1="132" x2="250" y2="132" stroke="var(--pharma)" strokeWidth="2" />
          <circle cx="170" cy="132" r="3.5" fill="var(--cyan)" />
          <circle cx="200" cy="132" r="3.5" fill="var(--cyan)" />
          <circle cx="230" cy="132" r="3.5" fill="var(--cyan)" />

          {/* Exhaust air duct connection */}
          <rect x="170" y="62" width="60" height="12" fill="#A6B3C2" stroke="var(--ink-3)" strokeWidth="0.8" />

          {/* HMI / Touch console */}
          <rect x="275" y="160" width="28" height="32" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="0.8" />
          <rect x="279" y="165" width="20" height="14" fill="#102338" rx="1" />

          {/* Dimensions */}
          <line x1="90" y1="62" x2="310" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="90" y1="58" x2="90" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="310" y1="58" x2="310" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">2400 mm</text>

          <line x1="80" y1="70" x2="80" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="76" y1="70" x2="84" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="76" y1="200" x2="84" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="70" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 70 135)">1650 mm</text>
        </svg>
      );

    case "cpb":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Safety rotation envelope circle */}
          <circle cx="210" cy="135" r="92" fill="rgba(245,165,36,0.04)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" />
          <text x="210" y="36" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--signal)" letterSpacing="1.5">360° BLENDING SAFETY ENVELOPE · 2.5m</text>

          {/* Operator zone outside safety ring */}
          <rect x="20" y="225" width="360" height="35" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="247" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR DOCKING & CONTROL ZONE</text>

          {/* Pillar base & mast */}
          <rect x="110" y="110" width="48" height="50" rx="4" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1.5" />
          <circle cx="134" cy="135" r="14" fill="#A6B3C2" stroke="var(--ink)" strokeWidth="1" />

          {/* Clamping cantilever arm */}
          <rect x="145" y="127" width="55" height="16" fill="var(--darkSteel)" rx="2" />

          {/* Clamped IPC Bin (octagonal top view) */}
          <polygon points="210,95 245,115 245,155 210,175 175,155 175,115" fill="white" stroke="var(--ink)" strokeWidth="1.5" />
          <circle cx="210" cy="135" r="16" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="0.8" />
          <circle cx="210" cy="135" r="5" fill="var(--pharma)" />

          {/* Control station */}
          <rect x="65" y="215" width="30" height="20" fill="white" stroke="var(--ink)" strokeWidth="1" rx="2" />
          <rect x="70" y="219" width="20" height="8" fill="#102338" rx="1" />

          {/* Dimensions */}
          <line x1="90" y1="62" x2="310" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="90" y1="58" x2="90" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="310" y1="58" x2="310" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">2600 mm</text>

          <line x1="75" y1="70" x2="75" y2="205" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="71" y1="70" x2="79" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="71" y1="205" x2="79" y2="205" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="65" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 65 135)">2200 mm</text>
        </svg>
      );

    case "fbd":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR BOWL DOCKING ZONE · 1.2m</text>

          {/* Maintenance zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">EXHAUST & FILTER SERVICE ACCESS · 1.0m</text>

          {/* Machine chassis frame */}
          <rect x="100" y="70" width="200" height="130" fill="white" stroke="var(--ink)" strokeWidth="1.5" />

          {/* Product bowl chamber */}
          <circle cx="165" cy="135" r="48" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="165" cy="135" r="36" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="0.8" />
          <line x1="125" y1="135" x2="205" y2="135" stroke="var(--ink-3)" strokeWidth="0.6" strokeDasharray="2 2" />
          <line x1="165" y1="95" x2="165" y2="175" stroke="var(--ink-3)" strokeWidth="0.6" strokeDasharray="2 2" />

          {/* Rear air handling plenum & HEPA unit */}
          <rect x="225" y="78" width="65" height="114" fill="#D9E1EA" stroke="var(--ink-3)" strokeWidth="1" />
          <circle cx="257" cy="135" r="16" fill="var(--metal)" stroke="var(--ink)" strokeWidth="1" />
          <text x="257" y="138" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="var(--ink)">DUCT</text>

          {/* Sight glass & sampling port */}
          <circle cx="165" cy="178" r="6" fill="var(--cyan)" stroke="var(--ink)" strokeWidth="0.8" />

          {/* Dimensions */}
          <line x1="100" y1="62" x2="300" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="100" y1="58" x2="100" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="300" y1="58" x2="300" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">2200 mm</text>

          <line x1="90" y1="70" x2="90" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="86" y1="70" x2="94" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="86" y1="200" x2="94" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="80" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 80 135)">1400 mm</text>
        </svg>
      );

    case "fbc":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR DOCKING & CONTROL ZONE · 1.2m</text>

          {/* Maintenance zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">FILTER & PUMP MAINTENANCE · 1.0m</text>

          {/* Base cabinet frame */}
          <rect x="95" y="70" width="210" height="130" fill="white" stroke="var(--ink)" strokeWidth="1.5" />

          {/* Wurster coating column (outer cylinder) */}
          <circle cx="165" cy="135" r="48" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />

          {/* Wurster partition draft tube (inner cylinder) */}
          <circle cx="165" cy="135" r="22" fill="#E8EEF4" stroke="var(--cyan)" strokeWidth="1.5" />

          {/* Bottom spray nozzle assembly */}
          <circle cx="165" cy="135" r="6" fill="var(--pharma)" />

          {/* Liquid pump & solution delivery manifold cabinet */}
          <rect x="228" y="80" width="65" height="110" fill="#D9E1EA" stroke="var(--ink-3)" strokeWidth="1" />
          <circle cx="260" cy="115" r="12" fill="white" stroke="var(--ink-3)" strokeWidth="1" />
          <text x="260" y="118" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="var(--ink)">PUMP</text>
          <rect x="245" y="145" width="30" height="30" fill="#102338" rx="2" />
          <text x="260" y="163" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="#ffffff">HMI</text>

          {/* Dimensions */}
          <line x1="95" y1="62" x2="305" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="95" y1="58" x2="95" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="305" y1="58" x2="305" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">2300 mm</text>

          <line x1="85" y1="70" x2="85" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="81" y1="70" x2="89" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="81" y1="200" x2="89" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="75" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 75 135)">1500 mm</text>
        </svg>
      );

    case "lpd":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Swivel radius arc */}
          <path d="M 120 60 A 90 90 0 0 1 250 170" fill="rgba(29,111,232,0.04)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" />
          <text x="210" y="75" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" letterSpacing="1.5">SWIVEL POSITIONING ARC · 180°</text>

          {/* Operator floor zone */}
          <rect x="20" y="215" width="360" height="45" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="242" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR PENDANT CONTROL ZONE</text>

          {/* Heavy base column & slew bearing */}
          <circle cx="120" cy="135" r="32" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1.5" />
          <circle cx="120" cy="135" r="14" fill="#A6B3C2" stroke="var(--pharma)" strokeWidth="2" />

          {/* Telescopic fork / lifting arm */}
          <rect x="134" y="127" width="70" height="16" fill="var(--darkSteel)" rx="2" />

          {/* Clamped IPC bin container */}
          <rect x="204" y="95" width="80" height="80" rx="8" fill="white" stroke="var(--ink)" strokeWidth="1.5" />
          <circle cx="244" cy="135" r="18" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="0.8" />
          <circle cx="244" cy="135" r="5" fill="var(--pharma)" />

          {/* Mobile steering handle / pendant */}
          <rect x="65" y="125" width="24" height="20" fill="white" stroke="var(--ink)" strokeWidth="1" rx="2" />
          <circle cx="77" cy="135" r="4" fill="var(--cyan)" />

          {/* Dimensions */}
          <line x1="88" y1="52" x2="284" y2="52" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="88" y1="48" x2="88" y2="56" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="284" y1="48" x2="284" y2="56" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="186" y="46" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">1800 mm</text>

          <line x1="75" y1="95" x2="75" y2="185" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="71" y1="95" x2="79" y2="95" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="71" y1="185" x2="79" y2="185" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="65" y="140" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 65 140)">1350 mm</text>
        </svg>
      );

    case "vtd":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator zone with door swing clearance */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR TRAY LOADING ZONE · 1.5m</text>

          {/* Vacuum & condenser connection zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">VACUUM & CONDENSER SERVICE LINE · 1.0m</text>

          {/* Heavy vacuum chamber body */}
          <rect x="90" y="70" width="220" height="130" fill="white" stroke="var(--ink)" strokeWidth="2" />

          {/* Heavy hinged front door shown open */}
          <line x1="90" y1="200" x2="90" y2="255" stroke="var(--ink)" strokeWidth="3" />
          <circle cx="90" cy="228" r="8" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1.2" />

          {/* Hollow heating shelf tiers inside chamber */}
          <line x1="105" y1="90" x2="295" y2="90" stroke="var(--metal)" strokeWidth="2.5" />
          <line x1="105" y1="108" x2="295" y2="108" stroke="var(--metal)" strokeWidth="2.5" />
          <line x1="105" y1="126" x2="295" y2="126" stroke="var(--metal)" strokeWidth="2.5" />
          <line x1="105" y1="144" x2="295" y2="144" stroke="var(--metal)" strokeWidth="2.5" />
          <line x1="105" y1="162" x2="295" y2="162" stroke="var(--metal)" strokeWidth="2.5" />
          <line x1="105" y1="180" x2="295" y2="180" stroke="var(--metal)" strokeWidth="2.5" />

          {/* Vacuum manifold port */}
          <circle cx="280" cy="62" r="10" fill="var(--cyan)" stroke="var(--ink)" strokeWidth="1" />

          {/* Dimensions */}
          <line x1="90" y1="62" x2="310" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="90" y1="58" x2="90" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="310" y1="58" x2="310" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">2250 mm</text>

          <line x1="80" y1="70" x2="80" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="76" y1="70" x2="84" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="76" y1="200" x2="84" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="70" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 70 135)">1550 mm</text>
        </svg>
      );

    case "ipc-bin":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Handling zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">MOBILE TROLLEY STEERING & ACCESS ZONE · 1.2m</text>

          {/* Square bin body with chamfered corners */}
          <polygon points="140,75 260,75 280,95 280,185 260,205 140,205 120,185 120,95" fill="white" stroke="var(--ink)" strokeWidth="1.5" />

          {/* 4 Corner stacking & lifting lugs */}
          <rect x="115" y="70" width="16" height="16" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1" />
          <rect x="269" y="70" width="16" height="16" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1" />
          <rect x="115" y="194" width="16" height="16" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1" />
          <rect x="269" y="194" width="16" height="16" fill="var(--metal-3)" stroke="var(--ink)" strokeWidth="1" />

          {/* 60° conical funnel transition lines */}
          <line x1="120" y1="95" x2="185" y2="140" stroke="var(--ink-3)" strokeWidth="0.8" strokeDasharray="3 3" />
          <line x1="280" y1="95" x2="215" y2="140" stroke="var(--ink-3)" strokeWidth="0.8" strokeDasharray="3 3" />
          <line x1="120" y1="185" x2="185" y2="140" stroke="var(--ink-3)" strokeWidth="0.8" strokeDasharray="3 3" />
          <line x1="280" y1="185" x2="215" y2="140" stroke="var(--ink-3)" strokeWidth="0.8" strokeDasharray="3 3" />

          {/* Discharge valve assembly */}
          <circle cx="200" cy="140" r="24" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="1" />
          <circle cx="200" cy="140" r="10" fill="var(--pharma)" />

          {/* Dimensions */}
          <line x1="115" y1="60" x2="285" y2="60" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="115" y1="56" x2="115" y2="64" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="285" y1="56" x2="285" y2="64" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="54" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">1150 mm</text>

          <line x1="100" y1="70" x2="100" y2="210" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="96" y1="70" x2="104" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="96" y1="210" x2="104" y2="210" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="90" y="140" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 90 140)">1150 mm</text>
        </svg>
      );

    case "eff-pro":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator catwalk zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR CATWALK & PLATFORM ZONE · 1.5m</text>

          {/* Utility lines zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">STEAM, VACUUM & CHILLED WATER MANIFOLD · 1.0m</text>

          {/* Skid frame */}
          <rect x="65" y="70" width="270" height="130" fill="white" stroke="var(--ink)" strokeWidth="1.8" />

          {/* Reactor 1 (Primary Formulation) */}
          <circle cx="125" cy="135" r="42" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="125" cy="135" r="18" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="0.8" />
          <line x1="125" y1="117" x2="125" y2="153" stroke="var(--pharma)" strokeWidth="2" />
          <text x="125" y="105" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="var(--ink-3)">REACTOR 1</text>

          {/* Reactor 2 (Reaction/Binder Vessel) */}
          <circle cx="215" cy="135" r="38" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="215" cy="135" r="16" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="0.8" />
          <text x="215" y="105" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="var(--ink-3)">REACTOR 2</text>

          {/* Homogenizer / Vacuum condenser pump skid */}
          <rect x="270" y="85" width="55" height="100" fill="#D9E1EA" stroke="var(--ink-3)" strokeWidth="1" />
          <circle cx="297" cy="115" r="14" fill="white" stroke="var(--ink)" strokeWidth="1" />
          <text x="297" y="118" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="var(--ink)">VACUUM</text>
          <rect x="282" y="145" width="30" height="25" fill="#102338" rx="2" />
          <text x="297" y="160" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="#ffffff">PLC</text>

          {/* Interconnecting transfer pipe */}
          <line x1="167" y1="135" x2="177" y2="135" stroke="var(--cyan)" strokeWidth="3" />

          {/* Dimensions */}
          <line x1="65" y1="62" x2="335" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="65" y1="58" x2="65" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="335" y1="58" x2="335" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">3200 mm</text>

          <line x1="55" y1="70" x2="55" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="51" y1="70" x2="59" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="51" y1="200" x2="59" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="45" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 45 135)">1800 mm</text>
        </svg>
      );

    case "eff-pack":
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator monitoring zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">LINE OPERATOR MONITORING ZONE · 1.2m</text>

          {/* Tube & cap supply infeed zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">COMPONENT & TUBE SUPPLY ZONE · 1.0m</text>

          {/* Linear conveyor bed frame */}
          <rect x="45" y="90" width="310" height="90" fill="white" stroke="var(--ink)" strokeWidth="1.5" />

          {/* Vibratory tablet sorting bowl */}
          <circle cx="85" cy="135" r="30" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="85" cy="135" r="14" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="0.8" />
          <text x="85" y="138" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="7" fill="var(--ink)">FEEDER</text>

          {/* Linear conveyor track */}
          <rect x="115" y="125" width="170" height="20" fill="#D9E1EA" stroke="var(--ink-3)" strokeWidth="0.8" />

          {/* Tube magazine */}
          <rect x="135" y="98" width="24" height="27" fill="#A6B3C2" stroke="var(--ink)" strokeWidth="1" rx="2" />
          <text x="147" y="115" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="6" fill="#102338">TUBES</text>

          {/* Desiccant insertion & cap press stations */}
          <circle cx="195" cy="135" r="9" fill="var(--cyan)" stroke="var(--ink)" strokeWidth="1" />
          <rect x="225" y="120" width="22" height="30" fill="var(--pharma)" stroke="var(--ink)" strokeWidth="1" rx="2" />
          <text x="236" y="138" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="6" fill="#ffffff">CAP</text>

          {/* Outfeed buffer turn-table */}
          <circle cx="315" cy="135" r="26" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="315" cy="135" r="8" fill="#E8EEF4" />

          {/* Dimensions */}
          <line x1="45" y1="75" x2="355" y2="75" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="45" y1="71" x2="45" y2="79" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="355" y1="71" x2="355" y2="79" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="69" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">3600 mm</text>

          <line x1="35" y1="90" x2="35" y2="180" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="31" y1="90" x2="39" y2="90" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="31" y1="180" x2="39" y2="180" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="25" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 25 135)">1200 mm</text>
        </svg>
      );

    case "rmg":
    default:
      return (
        <svg viewBox="0 0 400 280" style={{ width: "100%", height: "100%", position: "relative" }}>
          {/* Operator zone */}
          <rect x="20" y="210" width="360" height="50" fill="rgba(29,111,232,0.06)" stroke="var(--pharma)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="240" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--pharma)" letterSpacing="2">OPERATOR ACCESS ZONE · 1.2m</text>

          {/* Maintenance zone */}
          <rect x="20" y="20" width="360" height="40" fill="rgba(245,165,36,0.06)" stroke="var(--signal)" strokeWidth="1" strokeDasharray="4 4" rx="4" />
          <text x="200" y="44" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="var(--signal)" letterSpacing="2">MAINTENANCE ACCESS · 1.0m</text>

          {/* Machine envelope (outer frame) */}
          <rect x="100" y="70" width="200" height="130" fill="white" stroke="var(--ink)" strokeWidth="1.5" />

          {/* Conical mixing bowl (top view) */}
          <circle cx="180" cy="135" r="50" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="1.2" />
          <circle cx="180" cy="135" r="24" fill="#E8EEF4" stroke="var(--ink-3)" strokeWidth="0.8" />

          {/* Impeller blades (3-blade star shape) */}
          <g transform="translate(180, 135)">
            <path d="M 0 0 L 0 -45 L 8 -40 L 4 -10 Z" fill="var(--ink-3)" opacity="0.6" />
            <path d="M 0 0 L 39 22 L 31 30 L 8 6 Z" fill="var(--ink-3)" opacity="0.6" transform="rotate(120)" />
            <path d="M 0 0 L -39 22 L -47 14 L -8 6 Z" fill="var(--ink-3)" opacity="0.6" transform="rotate(240)" />
          </g>

          {/* Chopper motor and blades on the side */}
          <circle cx="232" cy="135" r="14" fill="#A6B3C2" stroke="var(--ink-3)" strokeWidth="0.8" />
          <g transform="translate(232, 135)">
            <line x1="-10" y1="0" x2="10" y2="0" stroke="var(--ink)" strokeWidth="1.5" />
            <line x1="0" y1="-10" x2="0" y2="10" stroke="var(--ink)" strokeWidth="1.5" />
          </g>

          {/* Discharge valve */}
          <rect x="165" y="185" width="30" height="16" fill="var(--metal)" stroke="var(--ink-3)" strokeWidth="1" />
          <circle cx="180" cy="193" r="4" fill="var(--pharma)" />

          {/* HMI / Control cabinet */}
          <rect x="250" y="80" width="40" height="40" fill="var(--metal-3)" stroke="var(--ink-3)" strokeWidth="0.6" />
          <rect x="255" y="85" width="30" height="12" fill="#102338" rx="1" />

          {/* Dimensions */}
          <line x1="100" y1="62" x2="300" y2="62" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="100" y1="58" x2="100" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="300" y1="58" x2="300" y2="66" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="200" y="56" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)">2100 mm</text>

          <line x1="90" y1="70" x2="90" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="86" y1="70" x2="94" y2="70" stroke="var(--pharma)" strokeWidth="0.6" />
          <line x1="86" y1="200" x2="94" y2="200" stroke="var(--pharma)" strokeWidth="0.6" />
          <text x="80" y="135" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="9" fill="var(--pharma)" transform="rotate(-90 80 135)">1200 mm</text>
        </svg>
      );
  }
}

// ============ MACHINE LAYOUT ============
function MachineLayout() {
  const d = window.PRODUCT_DATA || {};
  const gaDrawingUrl = getProductGADrawing(d);
  if (!gaDrawingUrl) return null;

  const productKey = getProductLayoutKey(d) || "rmg";
  const defaults = PRODUCT_LAYOUT_CONFIG[productKey] || PRODUCT_LAYOUT_CONFIG.rmg;

  const layout = {
    title: (d.layout && d.layout.title) || defaults.title,
    desc: (d.layout && d.layout.desc) || defaults.desc,
    specs: (d.layout && d.layout.specs && d.layout.specs.length > 0 && d.layout.specs[0][0] !== "Contact Parts")
      ? d.layout.specs
      : defaults.specs
  };

  const layoutSvg = d.layoutSvg || null;

  return (
    <section className="section" id="machines-layout">
      <div className="container">
        <div className="section-label">Machine layout</div>
        <div className="pp-two-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <h2 className="display display-lg" style={{ fontSize: "clamp(32px, 4vw, 48px)" }}>{layout.title}</h2>
            <p className="lede" style={{ marginTop: 20, fontSize: 16 }}>
              {layout.desc}
            </p>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 8 }}>
              {layout.specs.map(([k, v]) => (
                <div key={k} className="spec-row">
                  <span className="k">{k}</span>
                  <span className="v">{v}</span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <button
                type="button"
                onClick={() => {
                  window.__MODAL_CONTEXT__ = {
                    action: "ga_drawing",
                    title: "Request Equipment Specification & Proposal",
                    badge: "Equipment Enquiry",
                    gaDrawingUrl: gaDrawingUrl,
                    notesPlaceholder: `Requesting General Arrangement (GA) Drawing for ${d.name || "this machine"}. Specify required batch volume, containment level (OEB), speed (tubes/min), cleanroom constraints, etc.`
                  };
                  window.dispatchEvent(new CustomEvent("show-lead-modal"));
                }}
                className="btn btn-pharma"
                style={{ padding: "10px 16px", fontSize: 13, display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}
              >
                Download GA drawing
              </button>
              <button
                type="button"
                onClick={() => {
                  window.__MODAL_CONTEXT__ = {
                    action: "custom_layout",
                    title: "Request Equipment Specification & Proposal",
                    badge: "Equipment Enquiry",
                    notesPlaceholder: `Requesting custom layout engineering for ${d.name || "this machine"}. Specify required batch volume, containment level (OEB), speed (tubes/min), cleanroom constraints, etc.`
                  };
                  window.dispatchEvent(new CustomEvent("show-lead-modal"));
                }}
                className="btn btn-ghost"
                style={{ padding: "10px 16px", fontSize: 13, cursor: "pointer" }}
              >
                Request custom layout
              </button>
            </div>
          </div>

          <div className="pp-layout-drawing" style={{ background: "var(--metal-3)", border: "1px solid var(--line)", borderRadius: 12, padding: 32, position: "relative", height: 480 }}>
            <div className="blueprint-grid" style={{ opacity: 0.6 }} />
            {layoutSvg ? (
              typeof layoutSvg === "function" ? layoutSvg() : layoutSvg
            ) : (
              renderMachineLayoutSvg(productKey)
            )}
            <div style={{ position: "absolute", top: 12, right: 12, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
              TOP VIEW · 1:50
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ RELATED PRODUCTS ============
function RelatedProducts() {
  const d = window.PRODUCT_DATA || {};
  const r = d.relatedProducts || [
    { name: "Fluid Bed Dryer", t: "Fluid bed processor optimized for uniform thermal drying of wet granules.", spec: "Drying", link: `${prefix}products/granulation/fbd.html` },
    { name: "Integrated wet granulation line", t: "Complete line: RMG + Wet Mill + FBD + Dry Mill + Bin Blender.", spec: "Integrated Lines", link: "#" },
    { name: "Tablet coater", t: "High efficiency coating system for solid oral dose tablets.", spec: "Coating", link: `${prefix}products/granulation/auto-coater.html` },
    { name: "Conta bin blender", t: "Hygienic batch blending with 3D blending logic and containment.", spec: "Blending", link: "#" },
  ];

  return (
    <section className="section" style={{ background: "var(--paper)", padding: "100px 0" }}>
      <div className="container">
        <div className="section-label">System integration</div>
        <h2 className="display display-md" style={{ marginBottom: 48, fontSize: 36, fontWeight: 700 }}>
          Related processing components
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(260px, 100%), 1fr))", gap: 24 }}>
          {r.map((item, idx) => (
            <a key={idx} href={item.link || "#"} className="card" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 200, padding: 32, textDecoration: "none", color: "inherit", transition: "all 0.2s" }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--pharma)"; e.currentTarget.style.transform = "translateY(-4px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "none"; }}
            >
              <div>
                <span className="chip" style={{ alignSelf: "flex-start", fontSize: 9 }}>{item.spec}</span>
                <h4 className="display display-sm" style={{ margin: "20px 0 10px 0", fontSize: 18, fontWeight: 600 }}>{item.name}</h4>
                <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>{item.t}</p>
              </div>
              <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 4, fontSize: 12, fontWeight: 600, color: "var(--pharma)" }}>
                <span>View machine</span>
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ APPLICATIONS SECTION ============
function ApplicationsSection() {
  const d = window.PRODUCT_DATA || {};
  const scrollRef = React.useRef(null);
  const title = d.applicationsTitle || "Industries We Power";
  const apps = d.applications || [
    {
      title: "Wet granulation for tablet manufacturing",
      desc: "Optimal binder dispersion and powder agglomeration for high-throughput tableting lines.",
      icon: (
        <svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="10" y="8" width="32" height="36" rx="4" />
          <path d="M18 18h16M18 26h10M18 34h8" />
          <circle cx="36" cy="36" r="8" fill="var(--metal-2)" stroke="currentColor" />
          <path d="M33 36h6M36 33v6" />
        </svg>
      )
    },
    {
      title: "Mixing and densification of powders",
      desc: "High-shear mixing profiles to adjust density and improve raw powder flow characteristics.",
      icon: (
        <svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="26" cy="26" r="18" strokeDasharray="4 4" />
          <circle cx="26" cy="26" r="6" />
          <path d="M26 8v12M26 32v12M8 26h12M32 26h12" />
        </svg>
      )
    },
    {
      title: "Pharmaceutical granule preparation",
      desc: "cGMP-compliant granule processing ensuring batch uniformity and active ingredient distribution.",
      icon: (
        <svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="16" cy="16" r="6" />
          <circle cx="36" cy="16" r="6" />
          <circle cx="26" cy="36" r="8" />
          <path d="M16 22l6 6M36 22l-6 6" />
        </svg>
      )
    },
    {
      title: "Nutraceutical powder processing",
      desc: "Robust mixing systems capable of handling a wide range of vitamins, supplements, and food minerals.",
      icon: (
        <svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M26 6C14.95 6 6 14.95 6 26s8.95 20 20 20 20-8.95 20-20S37.05 6 26 6z" />
          <path d="M22 16h8M26 12v8M18 28h16M18 34h12" />
        </svg>
      )
    },
    {
      title: "Food ingredient granulation and blending",
      desc: "Sanitary processing for flavorings, additives, and soluble beverage powders.",
      icon: (
        <svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 22s8-10 14-10 14 10 14 10-8 10-14 10-14-10-14-10z" />
          <circle cx="26" cy="22" r="4" />
          <path d="M20 38c0-3.3 2.7-6 6-6s6 2.7 6 6v6H20v-6z" />
        </svg>
      )
    },
    {
      title: "Chemical powder mixing applications",
      desc: "Heavy-duty processing setups with explosion-proof options for specialty chemical blending.",
      icon: (
        <svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M16 8h20M20 8v12L10 38c-2 3.5 0.5 8 4.5 8h23c4 0 6.5-4.5 4.5-8L32 20V8" />
          <line x1="16" y1="28" x2="36" y2="28" />
        </svg>
      )
    }
  ];

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = direction === "left" ? -340 : 340;
      scrollRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
    }
  };

  return (
    <section className="section" id="applications" style={{ background: "var(--navy)", color: "white", padding: "120px 0", position: "relative", zIndex: 10 }}>
      <div className="container">
        <div className="section-label" style={{ color: "rgba(255,255,255,0.5)", borderColor: "rgba(255,255,255,0.1)" }}>Applications</div>
        <h2 className="display display-lg" style={{ color: "white", marginBottom: 48, fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 700, fontFamily: "var(--font-display)" }}>
          {title}
        </h2>

        {/* Scroll Container Wrapper with negative margin to offset scroll track padding */}
        <div className="applications-wrapper" style={{ margin: "-32px -24px -56px -24px" }}>
          <div
            ref={scrollRef}
            className="h-snap applications-track"
            style={{
              display: "flex",
              gap: 24,
              overflowX: "auto",
              scrollSnapType: "x mandatory",
              scrollPadding: "0 24px",
              scrollbarWidth: "none",
              padding: "32px 24px 56px 24px"
            }}
          >
            {apps.map((app, idx) => (
              <div
                key={idx}
                className="industry-card"
                style={{
                  flex: "0 0 320px",
                  width: "320px",
                  minWidth: "320px",
                  scrollSnapAlign: "start",
                  position: "relative",
                  zIndex: 1,
                  background: "rgba(255, 255, 255, 0.03)",
                  border: "1px solid rgba(255, 255, 255, 0.08)",
                  borderRadius: "var(--radius-lg)",
                  padding: "40px 28px",
                  textAlign: "center",
                  transition: "transform 300ms ease, background 300ms ease, border-color 300ms ease, box-shadow 300ms ease",
                  backdropFilter: "blur(12px)",
                  WebkitBackfaceVisibility: "hidden",
                  backfaceVisibility: "hidden"
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.zIndex = "10";
                  e.currentTarget.style.background = "rgba(32, 199, 232, 0.06)";
                  e.currentTarget.style.borderColor = "rgba(32, 199, 232, 0.3)";
                  e.currentTarget.style.transform = "translateY(-8px)";
                  e.currentTarget.style.boxShadow = "0 24px 48px rgba(0,0,0,0.3), 0 0 0 1px rgba(32,199,232,0.15)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.zIndex = "1";
                  e.currentTarget.style.background = "rgba(255, 255, 255, 0.03)";
                  e.currentTarget.style.borderColor = "rgba(255, 255, 255, 0.08)";
                  e.currentTarget.style.transform = "none";
                  e.currentTarget.style.boxShadow = "none";
                }}
              >
                <div className="industry-icon" style={{ width: 52, height: 52, margin: "0 auto 24px", color: "var(--cyan)" }}>
                  {app.icon}
                </div>
                <div className="industry-name" style={{ fontSize: "1.05rem", fontWeight: 700, color: "white", marginBottom: 12, lineHeight: 1.4 }}>
                  {app.title}
                </div>
                <div className="industry-desc" style={{ fontSize: "0.8rem", color: "rgba(255, 255, 255, 0.6)", lineHeight: 1.6 }}>
                  {app.desc}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Navigation Controls */}
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 12, marginTop: 16, position: "relative", zIndex: 11 }}>
          <button
            onClick={() => scroll("left")}
            className="btn btn-dark"
            style={{
              width: 44,
              height: 44,
              borderRadius: "50%",
              padding: 0,
              display: "grid",
              placeItems: "center",
              cursor: "pointer",
              justifyContent: "center"
            }}
            aria-label="Scroll left"
          >
            ←
          </button>
          <button
            onClick={() => scroll("right")}
            className="btn btn-dark"
            style={{
              width: 44,
              height: 44,
              borderRadius: "50%",
              padding: 0,
              display: "grid",
              placeItems: "center",
              cursor: "pointer",
              justifyContent: "center"
            }}
            aria-label="Scroll right"
          >
            →
          </button>
        </div>
      </div>
    </section>
  );
}// ============ INDUSTRIES SERVED ============
function IndustriesServed() {
  const d = window.PRODUCT_DATA || {};
  const title = d.industriesServedTitle || "Engineered for your industry.";
  const desc = d.industriesServedDesc || "From highly regulated pharmaceutical cleanrooms to hazardous chemical setups — our systems are designed to meet strict industrial specifications.";
  const industries = d.industriesServed || [
    {
      num: "01",
      name: "Pharmaceuticals",
      desc: "High containment and validated granulation compliant with strict regulatory standards.",
      tag: "cGMP / FDA",
      accent: "#20C7E8",
      stat: { value: "SS 316L", label: "contact parts" },
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
        </svg>
      )
    },
    {
      num: "02",
      name: "Nutraceuticals",
      desc: "Consistent powder blending for dietary supplements, vitamins, and minerals.",
      tag: "GMP / ISO",
      accent: "#1D6FE8",
      stat: { value: "99.9%", label: "uniformity" },
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
        </svg>
      )
    },
    {
      num: "03",
      name: "Food Processing",
      desc: "Food-grade sanitary blending for functional ingredients and powder mixes.",
      tag: "HACCP",
      accent: "#20C7E8",
      stat: { value: "FDA", label: "approved seals" },
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M12 3v18M3 12h18M12 3a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9 9 9 0 0 1 9-9z" />
        </svg>
      )
    },
    {
      num: "04",
      name: "Chemicals",
      desc: "Explosion-proof execution for processing volatile and specialty chemical powders safely.",
      tag: "ATEX / HazLoc",
      accent: "#F5A524",
      stat: { value: "Class 1", label: "Div 1 options" },
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
          <line x1="12" y1="9" x2="12" y2="13" />
          <line x1="12" y1="17" x2="12.01" y2="17" />
        </svg>
      )
    }
  ];

  const [showAll, setShowAll] = useSP(false);
  const [isMobile, setIsMobile] = useSP(false);
  const [activeIndex, setActiveIndex] = useSP(0);

  useEP(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  const visibleIndustries = showAll ? industries : industries.slice(0, 8);

  const handlePrev = () => {
    setActiveIndex((prev) => (prev > 0 ? prev - 1 : industries.length - 1));
  };

  const handleNext = () => {
    setActiveIndex((prev) => (prev < industries.length - 1 ? prev + 1 : 0));
  };

  const renderCard = (ind, i) => {
    if (!ind) return null;
    return (
      <div 
        key={i}
        className="industry-served-card"
        style={{
          background: "var(--paper)",
          border: "1px solid var(--line)",
          borderRadius: "var(--radius-md)",
          padding: "32px 24px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          minHeight: 280,
          position: "relative",
          overflow: "hidden",
          transition: "all 300ms ease",
          cursor: "pointer",
          width: "100%"
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = "#F5FAFF";
          e.currentTarget.style.transform = "translateY(-4px)";
          e.currentTarget.style.borderColor = "var(--ink-4)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = "white";
          e.currentTarget.style.transform = "none";
          e.currentTarget.style.borderColor = "var(--line)";
        }}
      >
        <div 
          className="absolute-num"
          style={{
            position: "absolute",
            bottom: -15,
            right: -5,
            fontFamily: "var(--font-display)",
            fontWeight: 900,
            fontSize: 80,
            lineHeight: 1,
            color: ind.accent,
            opacity: 0.05,
            userSelect: "none",
            pointerEvents: "none"
          }}
        >
          {ind.num}
        </div>

        {/* Card Top Indicator Line */}
        <div style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 2,
          background: `linear-gradient(90deg, ${ind.accent}, transparent)`
        }} />

        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
            <div style={{
              width: 40,
              height: 40,
              borderRadius: "var(--radius)",
              background: `${ind.accent}12`,
              border: `1px solid ${ind.accent}35`,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: ind.accent
            }}>
              <span style={{ width: 20, height: 20, display: "block" }}>{ind.icon}</span>
            </div>
          </div>
          
          <h4 style={{ margin: "0 0 10px", fontSize: 18, fontWeight: 700, color: "var(--ink)", fontFamily: "var(--font-display)" }}>{ind.name}</h4>
          <p style={{ margin: 0, fontSize: 13, color: "var(--ink-3)", lineHeight: 1.5 }}>{ind.desc}</p>
        </div>

        <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 8 }}>
            <span style={{ fontSize: 22, fontWeight: 800, color: ind.accent }}>{ind.stat ? ind.stat.value : ""}</span>
            <span style={{ fontSize: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)", textTransform: "uppercase" }}>{ind.stat ? ind.stat.label : ""}</span>
          </div>
          <div style={{
            display: "inline-block",
            fontFamily: "var(--font-mono)",
            fontSize: 9,
            fontWeight: 700,
            color: ind.accent,
            border: `1px solid ${ind.accent}35`,
            background: `${ind.accent}0d`,
            padding: "2px 8px",
            borderRadius: "var(--radius-sm)",
            letterSpacing: "0.05em",
            textTransform: "uppercase"
          }}>
            {ind.tag}
          </div>
        </div>
      </div>
    );
  };

  return (
    <section className="section" id="industries-served" style={{ background: "var(--metal-3)", padding: "120px 0" }}>
      <div className="container">
        <div className="section-label">Industries served</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 20 }}>
          <div style={{ maxWidth: "600px" }}>
            <h2 className="display display-lg" style={{ margin: 0, fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 700, fontFamily: "var(--font-display)" }}>
              {title}
            </h2>
          </div>
          <p style={{ fontSize: 15, color: "var(--ink-3)", maxWidth: "360px", margin: 0, lineHeight: 1.6 }}>
            {desc}
          </p>
        </div>

        {isMobile ? (
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }}>
            <div style={{ display: "flex", alignItems: "center", width: "100%", gap: 16 }}>
              {/* Left Caret */}
              <button 
                onClick={handlePrev} 
                style={{
                  background: "var(--paper)",
                  border: "1px solid var(--line)",
                  borderRadius: "50%",
                  width: 44,
                  height: 44,
                  display: "grid",
                  placeItems: "center",
                  fontSize: 18,
                  cursor: "pointer",
                  color: "var(--ink)",
                  boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
                }}
              >
                &#8592;
              </button>

              <div style={{ flex: 1 }}>
                {renderCard(industries[activeIndex], activeIndex)}
              </div>

              {/* Right Caret */}
              <button 
                onClick={handleNext} 
                style={{
                  background: "white",
                  border: "1px solid var(--line)",
                  borderRadius: "50%",
                  width: 44,
                  height: 44,
                  display: "grid",
                  placeItems: "center",
                  fontSize: 18,
                  cursor: "pointer",
                  color: "var(--ink)",
                  boxShadow: "0 2px 8px rgba(0,0,0,0.05)"
                }}
              >
                &#8594;
              </button>
            </div>

            {/* Dots */}
            <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
              {industries.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setActiveIndex(i)}
                  style={{
                    width: 8,
                    height: 8,
                    borderRadius: "50%",
                    border: "none",
                    background: activeIndex === i ? "var(--pharma)" : "var(--line)",
                    padding: 0,
                    cursor: "pointer",
                    transition: "background-color 200ms"
                  }}
                />
              ))}
            </div>
          </div>
        ) : (
          <>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(240px, 100%), 1fr))", gap: 20 }}>
              {visibleIndustries.map((ind, i) => renderCard(ind, i))}
            </div>

            {industries.length > 8 && (
              <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
                <button 
                  onClick={() => setShowAll(!showAll)}
                  className="btn btn-ghost"
                  style={{ fontWeight: 600 }}
                >
                  {showAll ? "Show Less" : "Show All Industries"}
                </button>
              </div>
            )}
          </>
        )}
      </div>
    </section>
  );
}


// ============ WHY CHOOSE US (FAQ) ============
function WhyChooseUsSection() {
  const d = window.PRODUCT_DATA || {};
  const [openIdx, setOpenIdx] = useSP(0);
  const title = d.whyChooseUsTitle || "Why Choose Our Rapid Mixer Granulator?";
  const isFaq = title.toLowerCase().includes("faq") || title.toLowerCase().includes("frequently") || title.toLowerCase().includes("question");
  const eyebrowLabel = isFaq ? "Frequently Asked Questions" : "Why Choose Us";
  const items = d.whyChooseUs || [
    {
      title: "Reliable and efficient process performance",
      desc: "Our RMGs are constructed with optimized bowl designs and variable speed impeller parameters to ensure consistent granule consolidation and rapid wet mass formation within minutes. High density granules with excellent flow characteristics are produced batch after batch."
    },
    {
      title: "Custom-engineered solutions based on application requirements",
      desc: "From gross bowl volume scaling (capacities from R&D to multi-ton production) to custom co-mill integration, vacuum transfer systems, or jacketed temperature control bowls, we customize each unit to suit your workflow constraints and floor space."
    },
    {
      title: "Strong technical and after-sales support",
      desc: "We provide complete FAT/SAT protocols, full IQ/OQ validation documentation support, and 24/7 technical troubleshooting. Our engineers are available globally for quick on-site alignment and maintenance support."
    },
    {
      title: "Energy-efficient operation",
      desc: "Equipped with variable frequency drives (VFD) and IE3 high-efficiency motors, our machinery delivers high torque without excessive electrical power consumption, reducing running costs for sustainable operations."
    },
    {
      title: "Long service life with minimal maintenance",
      desc: "Featuring food-grade mechanical shaft seals with air purging systems to prevent powder entry into the bearings. Made of solid SS 304 frames and high-quality gearboxes ensuring robust wear resistance."
    },
    {
      title: "Designed to meet modern manufacturing and regulatory standards",
      desc: "Our RMG is fully compliant with cGMP, WHO, CE, USFDA guidelines. All seals are FDA compliant (PTFE/Silicone), and cleanroom utility connections are sealed to prevent dust leakage."
    }
  ];

  return (
    <section className="section faq-section" id="why-choose-us">
      <div className="container faq-container">
        <div className="faq-header">
          <div className="faq-eyebrow">{eyebrowLabel}</div>
          <h2 className="faq-title">
            {title}
          </h2>
        </div>

        <div className="faq-list">
          {items.map((item, idx) => {
            const isOpen = openIdx === idx;
            return (
              <div
                key={idx}
                className={`faq-item ${isOpen ? "is-open" : ""}`}
              >
                <button
                  type="button"
                  className="faq-question-btn"
                  onClick={() => setOpenIdx(isOpen ? -1 : idx)}
                  aria-expanded={isOpen}
                >
                  <span className="faq-question-text">
                    {item.title || item.question}
                  </span>
                  <span className="faq-toggle-icon">
                    ＋
                  </span>
                </button>

                {isOpen && (
                  <div className="faq-answer-panel">
                    {item.desc || item.answer}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============ EQUIPMENT ENQUIRY / LEAD GENERATION MODAL ============
function LeadModal({ onClose }) {
  const ctx = window.__MODAL_CONTEXT__ || {};
  const d = window.PRODUCT_DATA || {};

  const SYSTEMS_BY_TYPE = {
    "Formulation": [
      "Rapid Mixer Granulator (RMG)",
      "Fluid Bed Dryer (FBD / FBP)",
      "Fluid Bed Coater (FBC)",
      "Extruder",
      "Spheronizer",
      "Octagonal Blender (OCB)",
      "Conta Bin Blender (CPB)",
      "V-Blender",
      "Double Cone Blender (DCB)",
      "Auto Tablet Coater",
      "Vacuum Tray Dryer (VTD)",
      "Air Tray Dryer (ATD)",
      "Dry Conical Mill (DCM)",
      "Vibro Sifter (VSFT)",
      "Paste Preparation Vessel (PPV)"
    ],
    "Packaging": [
      "EFF Pack Tube Filling & Packaging",
      "EFF Pro High-Speed Rotary Tablet Press",
      "EFF Pack 50 Tube Filler",
      "EFF Pack 100 High-Speed",
      "EFF Pack 150 Industrial",
      "EFF Pack Semi-Automatic",
      "Vision Inspection Unit",
      "Desiccant Cap & Laser Coding",
      "Wrap-Around Labeller",
      "Dynamic Check Weigher",
      "Continuous Cartoner"
    ],
    "Containment": [
      "Barrier Isolator (OEB 5)",
      "Open RABS (oRABS)",
      "Closed RABS (cRABS)",
      "Downflow Dispensing Booth",
      "Customized Glovebox",
      "Split Butterfly Valve (SBV)",
      "Rapid Transfer Port (RTP)",
      "Process Equipment Integration",
      "Decontamination Skid (WIP/VHP)",
      "Validation & Qualification Support"
    ],
    "Transfer Systems": [
      "Lifting & Positioning (LPD)",
      "Lifting & Tipper Device",
      "Rapid Transfer Port (RTP)",
      "Split Butterfly Valve (SBV)",
      "Pneumatic Docking Station",
      "Powder Transfer Systems",
      "Intermediate Process Container (IPC)",
      "Mobile Mill Lifter (MML)",
      "Dynamic Cleanroom Passbox"
    ]
  };

  const getInitialSolutionType = () => {
    if (ctx.solutionType) return ctx.solutionType;
    const cat = (d.breadcrumb && d.breadcrumb[2]) || "";
    if (/granulation|palletization/i.test(cat)) return "Formulation";
    if (/effervescent|packaging/i.test(cat)) {
      if (/eff-pack/i.test(window.location.pathname) || /packaging/i.test(d.name || "")) return "Packaging";
      return "Formulation";
    }
    if (/supporting/i.test(cat)) return "Transfer Systems";
    return "Formulation";
  };

  const initialSolutionType = getInitialSolutionType();
  const currentProductName = d.name || "";

  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [formData, setFormData] = React.useState({
    company: "",
    contactPerson: "",
    email: "",
    countryCode: "+91",
    phone: "",
    solutionType: initialSolutionType,
    solutionSystem: currentProductName || (SYSTEMS_BY_TYPE[initialSolutionType] && SYSTEMS_BY_TYPE[initialSolutionType][0]) || "",
    notes: ""
  });

  const handleClose = () => {
    window.__MODAL_CONTEXT__ = null;
    onClose();
  };

  React.useEffect(() => {
    document.body.classList.add("modal-open");
    const handleKeyDown = (e) => {
      if (e.key === "Escape") handleClose();
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => {
      document.body.classList.remove("modal-open");
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  const activeSystems = React.useMemo(() => {
    const list = SYSTEMS_BY_TYPE[formData.solutionType] || [];
    if (currentProductName && !list.some(s => s.toLowerCase() === currentProductName.toLowerCase())) {
      return [currentProductName, ...list];
    }
    return list;
  }, [formData.solutionType, currentProductName]);

  React.useEffect(() => {
    if (activeSystems.length > 0 && !activeSystems.includes(formData.solutionSystem)) {
      setFormData(prev => ({ ...prev, solutionSystem: activeSystems[0] }));
    }
  }, [formData.solutionType, activeSystems]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const apiPath = window.__MARK_MAKER_API_URL__ || '/api/send-lead.php';

      await fetch(apiPath, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          form_type: ctx.action === "ga_drawing" ? "ga_drawing_download" : (ctx.action === "custom_layout" ? "custom_layout_request" : "equipment_enquiry"),
          solution_type: formData.solutionType,
          solution_system: formData.solutionSystem,
          product_name: formData.solutionSystem || currentProductName,
          company: formData.company,
          contact_person: formData.contactPerson,
          name: formData.contactPerson,
          email: formData.email,
          country_code: formData.countryCode,
          phone: formData.phone,
          notes: formData.notes || "",
          action: ctx.action || "enquiry",
          source_url: window.location.href
        })
      });
    } catch (err) {
      console.warn("Lead dispatch warning:", err);
    } finally {
      setLoading(false);
      setSubmitted(true);
    }
  };

  const badge = ctx.badge || "Equipment Enquiry";
  const title = ctx.title || "Request Equipment Specification & Proposal";
  const subtitle = ctx.subtitle || "Provide your details below. Our application engineering team will configure the exact specifications and proposal for your facility.";
  const notesPlaceholder = ctx.notesPlaceholder || "Specify required batch volume, containment level (OEB), speed (tubes/min), cleanroom constraints, etc.";

  return (
    <div className="enquiry-modal is-open" role="dialog" aria-modal="true" aria-labelledby="enquiry-modal-title">
      <div className="enquiry-modal__backdrop" onClick={handleClose}></div>
      <div className="enquiry-modal__dialog">
        <button className="enquiry-modal__close" type="button" aria-label="Close enquiry modal" onClick={handleClose}>
          &times;
        </button>

        <div className="enquiry-modal__header">
          <span className="enquiry-modal__badge">{badge}</span>
          <h3 id="enquiry-modal-title" className="enquiry-modal__title">{title}</h3>
          <p className="enquiry-modal__subtitle">{subtitle}</p>
        </div>

        {!submitted ? (
          <form className="enquiry-modal__form" onSubmit={handleSubmit}>
            {/* Section 1: Contact Information */}
            <div className="enquiry-modal__section">
              <h4 className="enquiry-modal__section-title">Contact Information</h4>
              <div className="enquiry-form__grid">
                <div className="enquiry-form__field">
                  <label htmlFor="eq-company">Company Name <span className="required">*</span></label>
                  <input
                    type="text"
                    id="eq-company"
                    name="company"
                    placeholder="e.g. Acme Laboratories Ltd."
                    required
                    value={formData.company}
                    onChange={e => setFormData({ ...formData, company: e.target.value })}
                  />
                </div>
                <div className="enquiry-form__field">
                  <label htmlFor="eq-contact-person">Contact Person <span className="required">*</span></label>
                  <input
                    type="text"
                    id="eq-contact-person"
                    name="contactPerson"
                    placeholder="e.g. Dr. Rajesh Sharma"
                    required
                    value={formData.contactPerson}
                    onChange={e => setFormData({ ...formData, contactPerson: e.target.value })}
                  />
                </div>
              </div>
              <div className="enquiry-form__grid">
                <div className="enquiry-form__field">
                  <label htmlFor="eq-email">Email ID <span className="required">*</span></label>
                  <input
                    type="email"
                    id="eq-email"
                    name="email"
                    placeholder="name@company.com"
                    required
                    value={formData.email}
                    onChange={e => setFormData({ ...formData, email: e.target.value })}
                  />
                </div>
                <div className="enquiry-form__field">
                  <label htmlFor="eq-phone">Phone Number <span className="required">*</span></label>
                  <div className="phone-input-group">
                    <input
                      type="text"
                      id="eq-country-code"
                      name="countryCode"
                      className="country-code-input"
                      placeholder="+91"
                      aria-label="Country Code"
                      maxLength="5"
                      value={formData.countryCode}
                      onChange={e => setFormData({ ...formData, countryCode: e.target.value })}
                    />
                    <input
                      type="tel"
                      id="eq-phone"
                      name="phone"
                      placeholder="98765 43210"
                      required
                      value={formData.phone}
                      onChange={e => setFormData({ ...formData, phone: e.target.value })}
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* Divider */}
            <hr className="enquiry-modal__divider" />

            {/* Section 2: Requirement Specifications */}
            <div className="enquiry-modal__section">
              <h4 className="enquiry-modal__section-title">Equipment Requirement</h4>
              <div className="enquiry-form__grid">
                <div className="enquiry-form__field">
                  <label htmlFor="eq-solution-type">Solution Type <span className="required">*</span></label>
                  <select
                    id="eq-solution-type"
                    name="solutionType"
                    required
                    value={formData.solutionType}
                    onChange={e => setFormData({ ...formData, solutionType: e.target.value })}
                  >
                    <option value="" disabled>Select Solution Type</option>
                    <option value="Formulation">Formulation</option>
                    <option value="Packaging">Packaging</option>
                    <option value="Containment">Containment</option>
                    <option value="Transfer Systems">Transfer Systems</option>
                  </select>
                </div>
                <div className="enquiry-form__field">
                  <label htmlFor="eq-solution-system">Solution System <span className="required">*</span></label>
                  <select
                    id="eq-solution-system"
                    name="solutionSystem"
                    required
                    value={formData.solutionSystem}
                    onChange={e => setFormData({ ...formData, solutionSystem: e.target.value })}
                  >
                    <option value="" disabled>Select Solution System</option>
                    {activeSystems.map((sys, idx) => (
                      <option key={idx} value={sys}>{sys}</option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="enquiry-form__field" style={{ marginTop: 14 }}>
                <label htmlFor="eq-notes">Specific Requirements / Batch Sizes <span className="optional">(Optional)</span></label>
                <textarea
                  id="eq-notes"
                  name="notes"
                  rows={3}
                  placeholder={notesPlaceholder}
                  value={formData.notes}
                  onChange={e => setFormData({ ...formData, notes: e.target.value })}
                />
              </div>
            </div>

            <div className="enquiry-modal__footer">
              <button type="submit" disabled={loading} className="enquiry-modal__submit-btn">
                {loading ? "Transmitting Specification..." : "Submit Enquiry"}
              </button>
            </div>
          </form>
        ) : (
          <div className="enquiry-modal__success">
            <svg fill="none" stroke="#0284c7" strokeWidth="2" viewBox="0 0 24 24" width="48" height="48">
              <circle cx="12" cy="12" r="10"/>
              <path strokeLinecap="round" strokeLinejoin="round" d="M8 12l2.5 2.5L16 9"/>
            </svg>
            <h4>Thank you for your enquiry!</h4>
            <p>
              {ctx.action === "ga_drawing"
                ? "Your General Arrangement (GA) drawing request has been received. Our application engineering team will connect with technical documentation shortly."
                : "Our engineering team has received your equipment request and will connect with technical documentation shortly."}
            </p>
            {ctx.action === "ga_drawing" && ctx.gaDrawingUrl && (
              <a
                href={ctx.gaDrawingUrl}
                download
                target="_blank"
                rel="noopener noreferrer"
                className="enquiry-modal__submit-btn"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: 8,
                  textDecoration: "none",
                  marginBottom: 16,
                  maxWidth: 320
                }}
              >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="7 10 12 15 17 10"/>
                  <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                Download GA Drawing (PDF)
              </a>
            )}
            <button
              type="button"
              onClick={handleClose}
              className="button button--ghost button--small enquiry-modal__done-btn"
              style={{
                padding: "9px 24px",
                borderRadius: 999,
                border: "1px solid #cbd5e1",
                background: "#f8fafc",
                color: "#334155",
                fontWeight: 600,
                fontSize: "0.88rem",
                cursor: "pointer"
              }}
            >
              Close
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { ProductHero, ProcessFlow, FeaturesGrid, ApplicationsSection, AdvantagesSection, ProductGallery, IndustriesServed, TechSpecs, MachineLayout, WhyChooseUsSection, RelatedProducts, LeadModal });