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

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

// ============ PRODUCT HERO ============
function ProductHero() {
  return (
    <section style={{ background: "white", 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 style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 32 }}>
          <a href={`${prefix}index.html`} style={{ color: "inherit", textDecoration: "none" }}>Home</a>
          <span>/</span>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Products</a>
          <span>/</span>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Granulation</a>
          <span>/</span>
          <span style={{ color: "var(--ink)" }}>Rapid Mixer Granulator</span>
        </div>

        <div className="product-hero-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
              <span className="chip cyan" style={{ border: "1px solid rgba(32,199,232,0.3)", color: "var(--cyan)", background: "rgba(32,199,232,0.06)" }}>Flagship</span>
              <span className="chip">Granulation</span>
              <span className="chip">High-Shear</span>
            </div>
            <h1 className="display display-xl" style={{ fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05, fontFamily: "var(--font-display)" }}>Rapid Mixer Granulator (RMG)</h1>
            <p className="lede" style={{ marginTop: 20, fontSize: 18, lineHeight: 1.6, color: "var(--ink-2)" }}>
              The Rapid Mixer Granulator (RMG) is engineered for fast, efficient, and uniform wet granulation across pharmaceutical, nutraceutical, food, and chemical manufacturing processes.
            </p>
            <p style={{ marginTop: 12, fontSize: 15, lineHeight: 1.5, color: "var(--ink-3)" }}>
              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.
            </p>

            {/* Metric strip */}
            <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "20px 0" }}>
              {[["45–120", "Working L"], ["8–15", "mixing min"], ["SS 316L", "contact parts"]].map(([n, l]) => (
                <div key={l} style={{ borderRight: l !== "contact parts" ? "1px solid var(--line)" : "none", paddingRight: 20 }}>
                  <div className="display display-md" style={{ fontWeight: 500, fontSize: 28 }}>{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" }}>
              <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.dispatchEvent(new CustomEvent("show-lead-modal"))} className="btn btn-pharma">Request quote</button>
              <button className="btn btn-ghost">Download brochure</button>
            </div>
          </div>

          <div className="product-hero-model" style={{ position: "relative", height: 500 }}>
            <model-viewer
              src={`${prefix}assets/model.glb`}
              alt="Rapid Mixer Granulator (RMG) 3D model"
              auto-rotate
              rotation-per-second="6deg"
              camera-controls
              disable-zoom
              interaction-prompt="none"
              shadow-intensity="0.7"
              camera-orbit="0deg 1800deg 55%"
              auto-rotate-delay="3000"
              field-of-view="28deg"
              style={{
                width: "100%",
                height: "100%",
                filter: "drop-shadow(0 30px 50px rgba(11,17,23,0.18))",
                "--poster-color": "transparent",
              }}
            />
            <div style={{ position: "absolute", top: 0, right: 0, padding: "8px 12px", background: "white", border: "1px solid var(--line)", borderRadius: 6 }}>
              <div className="mono" style={{ fontSize: 10, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.1em" }}>
                Live 3D explorer
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ PROCESS FLOW ============
function ProcessFlow() {
  const [active, setActive] = useSP(2);
  const steps = [
    { 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." },
  ];
  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)" }}>
          Eight processing zones, high-shear, fully validated.
        </h2>

        <div style={{ background: "white", border: "1px solid var(--line)", borderRadius: 12, padding: 32 }}>
          {/* Timeline */}
          <div style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 0, 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 style={{ marginTop: 40, padding: "28px 32px", background: "var(--metal-3)", borderRadius: 10, 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 [showOptional, setShowOptional] = useSP(false);
  const 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 = [
    "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: "white", 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)" }}>
            Engineered for high performance and process control.
          </h2>
        </div>
        
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 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: "16px",
                  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: "white", 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 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." },
  ];

  return (
    <section className="section" style={{ background: "white", 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">
        <div className="grid lg:grid-cols-2" 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 }}>
              Engineering without compromise.
            </h2>
            <p style={{ fontSize: 17, color: "var(--ink-2)", marginBottom: 40, lineHeight: 1.6 }}>
              Every Mark Maker machine is built on a foundation of rigorous pharmaceutical standards, leveraging modern automation to guarantee repeatability, yield, and operator safety.
            </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", shrink: 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: Dynamic Spinning Blueprint Layout */}
          <div className="relative" style={{ position: "relative", width: "100%" }}>
            <div style={{
              aspectRatio: "1/1",
              background: "#0B1117",
              borderRadius: "16px",
              position: "relative",
              overflow: "hidden",
              border: "1px solid var(--line)",
              boxShadow: "0 20px 40px rgba(0,0,0,0.15)"
            }}>
              {/* Grid Background */}
              <div className="blueprint-grid dark" style={{ opacity: 0.2 }} />
              
              {/* Outer Circles */}
              <div style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: "70%",
                height: "70%",
                border: "1px dashed rgba(32, 199, 232, 0.2)",
                borderRadius: "50%"
              }} />

              {/* Spinning Element */}
              <div style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                width: "55%",
                height: "55%",
                border: "1px solid rgba(32, 199, 232, 0.4)",
                borderRadius: "50%",
                animation: "blueprint-spin 20s linear infinite"
              }}>
                <div style={{ position: "absolute", top: -4, left: "50%", width: 8, height: 8, background: "var(--cyan)", borderRadius: "50%", boxShadow: "0 0 8px var(--cyan)" }} />
                <div style={{ position: "absolute", bottom: -4, left: "50%", width: 8, height: 8, background: "var(--cyan)", borderRadius: "50%", opacity: 0.5 }} />
              </div>

              {/* Inner Circle */}
              <div style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                width: "35%",
                height: "35%",
                background: "rgba(29, 111, 232, 0.1)",
                border: "1px solid var(--pharma)",
                borderRadius: "50%",
                opacity: 0.3
              }} />

              {/* Core Badge */}
              <div style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                transform: "translate(-50%, -50%)",
                padding: "24px 32px",
                border: "1px solid rgba(32,199,232,0.25)",
                background: "rgba(11,17,23,0.85)",
                backdropFilter: "blur(8px)",
                borderRadius: "12px",
                textAlign: "center",
                width: "70%",
                boxShadow: "0 10px 25px rgba(0,0,0,0.5)"
              }}>
                <svg className="w-12 h-12 text-[#20C7E8] mx-auto mb-4" viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" strokeWidth="1.5" style={{ width: 44, height: 44, margin: "0 auto 12px" }}>
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                  <line x1="9" y1="9" x2="15" y2="9"/>
                  <line x1="9" y1="13" x2="15" y2="13"/>
                  <line x1="9" y1="17" x2="13" y2="17"/>
                </svg>
                <div style={{ color: "var(--cyan)", fontFamily: "var(--font-mono)", fontWeight: "700", letterSpacing: "0.15em", fontSize: 11, textTransform: "uppercase" }}>
                  PROCESS ARCHITECTURE
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ TECHNICAL SPECS ============
function TechSpecs() {
  const [group, setGroup] = useSP("spec1");
  const groups = {
    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"],
    ]},
  };
  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 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>
          <button className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 12 }}>
            Download spec sheet (PDF)
          </button>
        </div>

        <div className="card" style={{ background: "white", padding: 0, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "260px 1fr" }}>
            {/* Side nav */}
            <div style={{ borderRight: "1px solid var(--line)", padding: "16px 0", maxHeight: "580px", overflowY: "auto" }}>
              {Object.entries(groups).map(([k, g]) => (
                <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>{g.label}</span>
                  <span className="mono" style={{ fontSize: 10, color: "var(--ink-4)" }}>{g.rows.length}</span>
                </button>
              ))}
            </div>
            {/* Rows */}
            <div 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 }}>
                <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>
  );
}

// ============ MACHINE LAYOUT ============
function MachineLayout() {
  return (
    <section className="section" id="machines-layout">
      <div className="container">
        <div className="section-label">Machine layout</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <h2 className="display display-lg" style={{ fontSize: "clamp(32px, 4vw, 48px)" }}>Compact footprint, easy cleanroom integration.</h2>
            <p className="lede" style={{ marginTop: 20, fontSize: 16 }}>
              Our 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.
            </p>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                ["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"],
              ].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 }}>
              <button className="btn btn-pharma" style={{ padding: "10px 16px", fontSize: 13 }}>Download GA drawing</button>
              <button className="btn btn-ghost" style={{ padding: "10px 16px", fontSize: 13 }}>Request custom layout</button>
            </div>
          </div>

          <div 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 }}/>
            {/* Top-down layout SVG for RMG */}
            <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)">
                {/* 4-blade chopper */}
                <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>
            <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 r = [
    { name: "Fluid Bed Dryer", t: "Fluid bed processor optimized for uniform thermal drying of wet granules.", spec: "Drying" },
    { name: "Integrated wet granulation line", t: "Complete line: RMG + Wet Mill + FBD + Dry Mill + Bin Blender.", spec: "Integrated Lines" },
    { name: "Tablet coater", t: "High efficiency coating system for solid oral dose tablets.", spec: "Coating" },
    { name: "Conta bin blender", t: "Hygienic batch blending with 3D blending logic and containment.", spec: "Blending" },
  ];
  return (
    <section className="section" style={{ background: "var(--metal-3)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div className="section-label">Related products</div>
        <h2 className="display display-lg" style={{ maxWidth: "20ch", marginBottom: 40, fontSize: "clamp(32px, 4vw, 48px)" }}>
          Explore granulation & solid dose systems.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16 }}>
          {r.map(p => (
            <div key={p.name} className="card" style={{ background: "white", padding: 24, display: "flex", flexDirection: "column", minHeight: 220 }}>
              <span className="chip cyan" style={{ alignSelf: "flex-start", border: "1px solid rgba(32,199,232,0.3)", color: "var(--cyan)", background: "rgba(32,199,232,0.06)" }}>{p.spec}</span>
              <h3 className="display display-sm" style={{ marginTop: 16, fontSize: 20 }}>{p.name}</h3>
              <p style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 8, lineHeight: 1.55, flex: 1 }}>{p.t}</p>
              <button style={{ marginTop: 16, padding: 0, background: "transparent", border: "none", color: "var(--pharma)", fontWeight: 500, fontSize: 13, alignSelf: "flex-start", cursor: "pointer" }}>
                Compare →
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ APPLICATIONS SECTION ============
function ApplicationsSection() {
  const scrollRef = React.useRef(null);
  const apps = [
    {
      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)" }}>
          Industries We Power
        </h2>

        {/* Scroll Container Wrapper with padding to prevent clipping when hovered */}
        <div style={{ margin: "0 -20px", padding: "30px 20px" }}>
          <div 
            ref={scrollRef}
            className="h-snap"
            style={{ 
              display: "flex", 
              gap: 24, 
              overflowX: "auto", 
              scrollSnapType: "x mandatory",
              scrollbarWidth: "none",
              paddingBottom: 10
            }}
          >
            {apps.map((app, idx) => (
              <div 
                key={idx}
                className="industry-card"
                style={{
                  flex: "0 0 320px",
                  scrollSnapAlign: "start",
                  background: "rgba(255, 255, 255, 0.03)",
                  border: "1px solid rgba(255, 255, 255, 0.08)",
                  borderRadius: "16px",
                  padding: "40px 28px",
                  textAlign: "center",
                  transition: "all 300ms ease",
                  backdropFilter: "blur(12px)"
                }}
                onMouseEnter={(e) => {
                  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) scale(1.02)";
                  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.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 }}>
          <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 industries = [
    {
      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>
      )
    }
  ];

  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)" }}>
              Engineered for your industry.
            </h2>
          </div>
          <p style={{ fontSize: 15, color: "var(--ink-3)", maxWidth: "360px", margin: 0, lineHeight: 1.6 }}>
            From highly regulated pharmaceutical cleanrooms to hazardous chemical setups — our RMG is designed to meet strict industrial specifications.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 20 }}>
          {industries.map((ind, i) => (
            <div 
              key={i}
              className="industry-served-card"
              style={{
                background: "white",
                border: "1px solid var(--line)",
                borderRadius: "12px",
                padding: "32px 24px",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                minHeight: 280,
                position: "relative",
                overflow: "hidden",
                transition: "all 300ms ease",
                cursor: "pointer"
              }}
              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: "6px",
                    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.value}</span>
                  <span style={{ fontSize: 10, color: "var(--ink-4)", fontFamily: "var(--font-mono)", textTransform: "uppercase" }}>{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: "4px",
                  letterSpacing: "0.05em",
                  textTransform: "uppercase"
                }}>
                  {ind.tag}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ WHY CHOOSE US (FAQ) ============
function WhyChooseUsSection() {
  const [openIdx, setOpenIdx] = useSP(0);
  const items = [
    {
      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" id="why-choose-us" style={{ background: "white", padding: "120px 0", borderTop: "1px solid var(--line)" }}>
      <div className="container" style={{ maxWidth: "800px" }}>
        <div className="section-label" style={{ textAlign: "center", justifyContent: "center" }}>Why Choose Us</div>
        <h2 className="display display-lg center" style={{ marginBottom: 48, fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 700, fontFamily: "var(--font-display)", textAlign: "center" }}>
          Why Choose Our Rapid Mixer Granulator?
        </h2>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map((item, idx) => {
            const isOpen = openIdx === idx;
            return (
              <div 
                key={idx}
                style={{
                  border: "1px solid var(--line)",
                  borderRadius: "12px",
                  background: isOpen ? "var(--metal-3)" : "white",
                  overflow: "hidden",
                  transition: "all 250ms ease"
                }}
              >
                <button
                  onClick={() => setOpenIdx(isOpen ? -1 : idx)}
                  style={{
                    width: "100%",
                    padding: "20px 24px",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    background: "transparent",
                    border: "none",
                    textAlign: "left",
                    cursor: "pointer",
                    outline: "none"
                  }}
                >
                  <span style={{ fontSize: 16, fontWeight: 600, color: "var(--ink)", paddingRight: 16 }}>
                    {item.title}
                  </span>
                  <span style={{ 
                    fontSize: 20, 
                    fontWeight: "light", 
                    color: isOpen ? "var(--pharma)" : "var(--ink-3)",
                    transform: isOpen ? "rotate(45deg)" : "none",
                    transition: "transform 200ms ease",
                    display: "inline-block"
                  }}>
                    ＋
                  </span>
                </button>

                {isOpen && (
                  <div style={{ 
                    padding: "0 24px 24px", 
                    fontSize: 14, 
                    color: "var(--ink-2)", 
                    lineHeight: 1.6,
                    borderTop: "1px solid rgba(0,0,0,0.03)"
                  }}>
                    {item.desc}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============ LEAD GENERATION MODAL ============
function LeadModal({ onClose }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [formData, setFormData] = React.useState({ name: "", email: "", company: "", phone: "", notes: "" });
  const [focusedField, setFocusedField] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const getInputStyle = (fieldName) => ({
    width: "100%",
    padding: "12px 16px",
    borderRadius: 10,
    border: focusedField === fieldName ? "1px solid var(--cyan)" : "1px solid rgba(255, 255, 255, 0.12)",
    background: focusedField === fieldName ? "rgba(255, 255, 255, 0.08)" : "rgba(255, 255, 255, 0.04)",
    color: "#ffffff",
    outline: "none",
    fontSize: 14,
    fontFamily: "var(--font-body)",
    transition: "border-color 0.2s, background-color 0.2s, box-shadow 0.2s",
    boxShadow: focusedField === fieldName ? "0 0 10px rgba(32, 199, 232, 0.15)" : "none"
  });

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100000,
      background: "rgba(7, 11, 16, 0.75)", backdropFilter: "blur(12px)",
      display: "grid", placeItems: "center", padding: 24
    }}>
      <div style={{
        background: "linear-gradient(180deg, rgba(16, 32, 53, 0.85), rgba(10, 20, 34, 0.95))",
        borderRadius: 24, border: "1px solid rgba(255, 255, 255, 0.14)",
        width: "100%", maxWidth: 520, padding: 40, position: "relative",
        boxShadow: "0 30px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15)",
        color: "#ffffff",
        backdropFilter: "blur(20px)"
      }}>
        <button 
          onClick={onClose}
          style={{
            position: "absolute", top: 24, right: 24, background: "transparent", border: "none",
            fontSize: 22, cursor: "pointer", color: "rgba(255, 255, 255, 0.5)", transition: "color 0.2s"
          }}
          onMouseEnter={(e) => e.target.style.color = "#ffffff"}
          onMouseLeave={(e) => e.target.style.color = "rgba(255, 255, 255, 0.5)"}
        >
          ✕
        </button>

        {!submitted ? (
          <form onSubmit={handleSubmit}>
            <div className="mono" style={{ fontSize: 11, color: "var(--cyan)", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 8 }}>
              Request Specifications & Details
            </div>
            <h3 className="display display-sm" style={{ marginBottom: 24, fontSize: 24, fontWeight: 700, fontFamily: "var(--font-display)", color: "#ffffff" }}>
              Get a custom proposal
            </h3>
            
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div>
                <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "rgba(255, 255, 255, 0.8)", marginBottom: 6 }}>Full Name</label>
                <input required type="text" value={formData.name} 
                  onFocus={() => setFocusedField("name")} onBlur={() => setFocusedField(null)}
                  onChange={e => setFormData({...formData, name: e.target.value})} style={getInputStyle("name")} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div>
                  <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "rgba(255, 255, 255, 0.8)", marginBottom: 6 }}>Email</label>
                  <input required type="email" value={formData.email} 
                    onFocus={() => setFocusedField("email")} onBlur={() => setFocusedField(null)}
                    onChange={e => setFormData({...formData, email: e.target.value})} style={getInputStyle("email")} />
                </div>
                <div>
                  <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "rgba(255, 255, 255, 0.8)", marginBottom: 6 }}>Phone Number</label>
                  <input required type="tel" value={formData.phone} 
                    onFocus={() => setFocusedField("phone")} onBlur={() => setFocusedField(null)}
                    onChange={e => setFormData({...formData, phone: e.target.value})} style={getInputStyle("phone")} />
                </div>
              </div>
              <div>
                <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "rgba(255, 255, 255, 0.8)", marginBottom: 6 }}>Company Name</label>
                <input required type="text" value={formData.company} 
                  onFocus={() => setFocusedField("company")} onBlur={() => setFocusedField(null)}
                  onChange={e => setFormData({...formData, company: e.target.value})} style={getInputStyle("company")} />
              </div>
              <div>
                <label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "rgba(255, 255, 255, 0.8)", marginBottom: 6 }}>Requirements / Notes</label>
                <textarea rows="3" value={formData.notes} 
                  onFocus={() => setFocusedField("notes")} onBlur={() => setFocusedField(null)}
                  onChange={e => setFormData({...formData, notes: e.target.value})} style={{ ...getInputStyle("notes"), resize: "none" }} placeholder="Describe your processing/capacity requirements..."></textarea>
              </div>
            </div>

            <button type="submit" className="btn" style={{ 
              width: "100%", marginTop: 24, padding: "14px 0", justifyContent: "center", borderRadius: "999px",
              background: "var(--cyan)", color: "#0B1117", border: "none", fontWeight: 600, cursor: "pointer",
              transition: "transform 0.15s, opacity 0.15s", display: "flex", alignItems: "center"
            }}
              onMouseEnter={(e) => { e.target.style.transform = "scale(1.02)"; e.target.style.opacity = "0.95"; }}
              onMouseLeave={(e) => { e.target.style.transform = "scale(1)"; e.target.style.opacity = "1"; }}
            >
              Submit Inquiry
            </button>
          </form>
        ) : (
          <div style={{ textAlign: "center", padding: "20px 0" }}>
            <div style={{ width: 64, height: 64, borderRadius: "50%", background: "rgba(32,199,232,0.15)", display: "grid", placeItems: "center", margin: "0 auto 20px" }}>
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--cyan)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
            </div>
            <h3 className="display display-sm" style={{ marginBottom: 12, fontSize: 24, fontWeight: 700, fontFamily: "var(--font-display)", color: "#ffffff" }}>Inquiry Submitted</h3>
            <p style={{ color: "rgba(255, 255, 255, 0.7)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>
              Thank you, <strong>{formData.name}</strong>. Our engineering team will review your requirements for <strong>{formData.company}</strong> and contact you shortly at <strong>{formData.email}</strong>.
            </p>
            <button onClick={onClose} className="btn" style={{ 
              marginTop: 24, padding: "12px 32px", borderRadius: "999px", background: "rgba(255, 255, 255, 0.08)",
              color: "#ffffff", border: "1px solid rgba(255, 255, 255, 0.2)", cursor: "pointer", transition: "background 0.2s"
            }}
              onMouseEnter={(e) => e.target.style.background = "rgba(255, 255, 255, 0.15)"}
              onMouseLeave={(e) => e.target.style.background = "rgba(255, 255, 255, 0.08)"}
            >
              Close Window
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

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