/* global React */
const { useState, useEffect, useRef } = React;

// ============ MACHINE SVG — stylized stainless-steel pharma packaging machine ============
function MachineRender({ rotation = 0, exploded = false, showHotspots = false, mode = "showcase" }) {
  // EFF-PACK 100 — tube filling line. Stylized side view, slight perspective.
  const tilt = rotation; // -30..30
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", display: "grid", placeItems: "center" }}>
      <svg
        viewBox="0 0 800 520"
        style={{
          width: "100%",
          height: "100%",
          maxHeight: "100%",
          transform: `rotateY(${tilt}deg)`,
          transformOrigin: "center",
          transition: "transform 800ms cubic-bezier(.2,.7,.3,1)",
          filter: "drop-shadow(0 30px 50px rgba(11,17,23,0.18))",
        }}
      >
        <defs>
          <linearGradient id="steel" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#F4F7FA"/>
            <stop offset="0.5" stopColor="#D9E1EA"/>
            <stop offset="1" stopColor="#A6B3C2"/>
          </linearGradient>
          <linearGradient id="steel-edge" x1="0" x2="1" y1="0" y2="0">
            <stop offset="0" stopColor="#8B98A8"/>
            <stop offset="0.5" stopColor="#E8EEF4"/>
            <stop offset="1" stopColor="#8B98A8"/>
          </linearGradient>
          <linearGradient id="darkSteel" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#3B4B5E"/>
            <stop offset="1" stopColor="#1A2533"/>
          </linearGradient>
          <linearGradient id="glass" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="rgba(220,235,245,0.55)"/>
            <stop offset="1" stopColor="rgba(180,200,220,0.25)"/>
          </linearGradient>
          <linearGradient id="hmi" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#102338"/>
            <stop offset="1" stopColor="#1D3A5F"/>
          </linearGradient>
          <pattern id="bp" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(120,140,160,0.08)" strokeWidth="1"/>
          </pattern>
        </defs>

        {/* shadow plate */}
        <ellipse cx="400" cy="490" rx="320" ry="14" fill="rgba(11,17,23,0.08)"/>

        {/* === BASE FRAME === */}
        <g transform={`translate(0, ${exploded ? 30 : 0})`} style={{ transition: "transform 600ms" }}>
          {/* legs */}
          <rect x="120" y="380" width="14" height="100" fill="url(#darkSteel)"/>
          <rect x="660" y="380" width="14" height="100" fill="url(#darkSteel)"/>
          <rect x="380" y="380" width="14" height="100" fill="url(#darkSteel)"/>
          {/* base panel */}
          <rect x="100" y="350" width="600" height="40" fill="url(#steel)" stroke="#94A3B5" strokeWidth="1"/>
          <rect x="100" y="350" width="600" height="6" fill="url(#steel-edge)"/>
        </g>

        {/* === MAIN HOUSING === */}
        <g transform={`translate(0, ${exploded ? 0 : 0})`}>
          {/* main body */}
          <rect x="140" y="180" width="520" height="180" fill="url(#steel)" stroke="#94A3B5" strokeWidth="1" rx="6"/>
          {/* top edge highlight */}
          <rect x="140" y="180" width="520" height="6" fill="url(#steel-edge)" rx="3"/>
          {/* viewing window (glass) */}
          <rect x="220" y="210" width="280" height="120" fill="url(#glass)" stroke="#7A8A9C" strokeWidth="1.2" rx="4"/>
          {/* glass reflection lines */}
          <line x1="240" y1="220" x2="280" y2="220" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5"/>
          <line x1="240" y1="226" x2="260" y2="226" stroke="rgba(255,255,255,0.4)" strokeWidth="1"/>

          {/* internal mechanism — visible through glass */}
          <g opacity="0.82">
            {/* tube carriers conveyor */}
            <rect x="232" y="295" width="256" height="20" fill="#5B6B7E" rx="2"/>
            <rect x="232" y="295" width="256" height="3" fill="#3B4757"/>
            {/* tubes */}
            {[0,1,2,3,4,5,6,7,8].map(i => (
              <g key={i}>
                <rect x={244 + i*28} y="260" width="14" height="38" fill="#E8EEF4" stroke="#94A3B5" strokeWidth="0.6" rx="1.5"/>
                <rect x={244 + i*28} y="260" width="14" height="3" fill="#1D6FE8" rx="1.5"/>
              </g>
            ))}
            {/* filling head */}
            <rect x="320" y="218" width="80" height="38" fill="url(#darkSteel)" rx="3"/>
            <rect x="335" y="252" width="50" height="14" fill="#5B6B7E" rx="1"/>
            <line x1="345" y1="266" x2="345" y2="278" stroke="#3B4757" strokeWidth="2"/>
            <line x1="360" y1="266" x2="360" y2="278" stroke="#3B4757" strokeWidth="2"/>
            <line x1="375" y1="266" x2="375" y2="278" stroke="#3B4757" strokeWidth="2"/>
          </g>

          {/* Right side — control panel / HMI */}
          <rect x="510" y="200" width="140" height="150" fill="url(#steel)" stroke="#94A3B5" rx="4"/>
          <rect x="525" y="218" width="110" height="68" fill="url(#hmi)" rx="3"/>
          {/* HMI screen content */}
          <rect x="532" y="226" width="40" height="3" fill="#20C7E8" rx="1"/>
          <rect x="532" y="234" width="60" height="2" fill="rgba(255,255,255,0.5)" rx="1"/>
          <rect x="532" y="240" width="48" height="2" fill="rgba(255,255,255,0.3)" rx="1"/>
          <rect x="532" y="252" width="96" height="20" fill="rgba(32,199,232,0.15)" rx="2" stroke="#20C7E8" strokeWidth="0.6"/>
          <rect x="540" y="258" width="40" height="3" fill="#20C7E8"/>
          <rect x="540" y="264" width="20" height="2" fill="rgba(255,255,255,0.7)"/>
          {/* control buttons */}
          <circle cx="540" cy="312" r="8" fill="#1D6FE8" stroke="#0E4FBA" strokeWidth="1"/>
          <circle cx="568" cy="312" r="8" fill="#F5A524" stroke="#C77E0F" strokeWidth="1"/>
          <circle cx="596" cy="312" r="8" fill="#C04444" stroke="#8E2B2B" strokeWidth="1"/>
          <circle cx="624" cy="312" r="8" fill="#3F4F62" stroke="#2A3744" strokeWidth="1"/>

          {/* Left side — tube elevator */}
          <rect x="155" y="200" width="56" height="150" fill="url(#steel)" stroke="#94A3B5" rx="3"/>
          <rect x="165" y="215" width="36" height="120" fill="#3B4757" rx="2"/>
          {/* elevator slats */}
          {[0,1,2,3,4,5,6].map(i => (
            <line key={i} x1="167" y1={225 + i*15} x2="199" y2={225 + i*15} stroke="rgba(255,255,255,0.15)" strokeWidth="1"/>
          ))}
        </g>

        {/* === TOP HOUSING (hopper / feed) === */}
        <g transform={`translate(0, ${exploded ? -40 : 0})`} style={{ transition: "transform 600ms" }}>
          {/* hopper */}
          <path d="M 280 180 L 320 100 L 480 100 L 520 180 Z" fill="url(#steel)" stroke="#94A3B5" strokeWidth="1"/>
          <line x1="320" y1="100" x2="480" y2="100" stroke="url(#steel-edge)" strokeWidth="3"/>
          {/* hopper detail */}
          <rect x="340" y="120" width="120" height="40" fill="#94A3B5" opacity="0.3" rx="2"/>
          <circle cx="400" cy="80" r="14" fill="url(#darkSteel)"/>
          <circle cx="400" cy="80" r="6" fill="#20C7E8" opacity="0.6"/>
          {/* nitrogen pipe */}
          <path d="M 400 66 Q 400 40 360 40 L 320 40" fill="none" stroke="#94A3B5" strokeWidth="4" strokeLinecap="round"/>
          <circle cx="320" cy="40" r="6" fill="#1D6FE8"/>
        </g>

        {/* === LABELS / branding strip === */}
        <rect x="220" y="334" width="280" height="14" fill="#102338"/>
        <text x="232" y="345" fontFamily="ui-monospace, monospace" fontSize="9" fill="#20C7E8" letterSpacing="2">
          MARK MAKER · EFF-PACK 100
        </text>

        {/* tiny brand mark */}
        <g transform="translate(630, 335)">
          <rect x="0" y="0" width="22" height="14" fill="#0B1117" rx="2"/>
          <text x="11" y="10" textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="8" fontWeight="700" fill="white">MM</text>
        </g>
      </svg>

      {/* Hotspots */}
      {showHotspots && (
        <>
          <Hotspot label="Hopper · Tablet feed" top="13%" left="50%" tip="Stainless feed hopper with low-vibration delivery." />
          <Hotspot label="Filling head" top="40%" left="44%" tip="Multi-track precision filling with weight verification." />
          <Hotspot label="HMI · PLC controls" top="50%" left="74%" tip="Centralized HMI with recipe management, audit trail-ready." />
          <Hotspot label="Tube elevator" top="50%" left="22%" tip="Ergonomic tube loading with quick-change tooling." />
          <Hotspot label="Conveyor & sealing" top="62%" left="50%" tip="Continuous filling and sealing conveyor for low rejection." />
        </>
      )}
    </div>
  );
}

function Hotspot({ top, left, label, tip }) {
  const [open, setOpen] = useState(false);
  return (
    <div
      style={{ position: "absolute", top, left, transform: "translate(-50%,-50%)" }}
      onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}
    >
      <div className="hotspot-pulse" />
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 12px)", left: "50%", transform: "translateX(-50%)",
          background: "rgba(11,17,23,0.96)", color: "white", padding: "10px 14px",
          borderRadius: 8, fontSize: 12, width: 220, zIndex: 5,
          border: "1px solid rgba(32,199,232,0.4)",
          boxShadow: "0 12px 32px rgba(0,0,0,0.4)"
        }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "#20C7E8", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 4 }}>
            {label}
          </div>
          <div style={{ lineHeight: 1.4 }}>{tip}</div>
        </div>
      )}
    </div>
  );
}

// ============ MACHINE LINE — for "complete line" hero ============
function ProductionLineSVG() {
  return (
    <svg viewBox="0 0 1200 320" style={{ width: "100%", height: "100%" }}>
      <defs>
        <linearGradient id="ls1" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#F4F7FA"/>
          <stop offset="1" stopColor="#A6B3C2"/>
        </linearGradient>
      </defs>
      {[0,1,2,3].map(i => (
        <g key={i} transform={`translate(${60 + i*280}, 80)`}>
          <rect x="0" y="80" width="220" height="120" fill="url(#ls1)" stroke="#94A3B5" rx="4"/>
          <rect x="20" y="100" width="180" height="60" fill="#102338" rx="2" opacity="0.85"/>
          <circle cx="40" cy="180" r="4" fill="#20C7E8"/>
          <text x="110" y="225" textAnchor="middle" fontFamily="ui-monospace, monospace" fontSize="10" fill="#5A6878" letterSpacing="2">
            {["GRANULATOR","DRYER","COATER","EFF-PACK"][i]}
          </text>
          <rect x="0" y="200" width="220" height="14" fill="#3B4757"/>
          <rect x="0" y="60" width="220" height="22" fill="url(#ls1)" stroke="#94A3B5"/>
        </g>
      ))}
      {/* connectors */}
      {[0,1,2].map(i => (
        <line key={i} x1={280 + i*280} y1="170" x2={340 + i*280} y2="170" stroke="#94A3B5" strokeWidth="3"/>
      ))}
      {/* shadow */}
      <ellipse cx="600" cy="294" rx="540" ry="6" fill="rgba(11,17,23,0.08)"/>
    </svg>
  );
}

// ============ TUBE ICON for stacking cards ============
function TubeIcon({ color = "#1D6FE8" }) {
  return (
    <svg viewBox="0 0 120 160" style={{ width: "100%", height: "100%" }}>
      <defs>
        <linearGradient id={`tg-${color}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#E8EEF4"/>
          <stop offset="1" stopColor="#A6B3C2"/>
        </linearGradient>
      </defs>
      <rect x="35" y="20" width="50" height="125" fill={`url(#tg-${color})`} stroke="#94A3B5" rx="3"/>
      <rect x="35" y="20" width="50" height="14" fill={color} rx="3"/>
      <rect x="35" y="32" width="50" height="3" fill="rgba(0,0,0,0.15)"/>
      {/* tablets visible */}
      {[0,1,2,3].map(i => (
        <ellipse key={i} cx="60" cy={55 + i*18} rx="14" ry="3" fill="#F8FAFC" stroke="#94A3B5" strokeWidth="0.6"/>
      ))}
      <text x="60" y="138" textAnchor="middle" fontFamily="Inter" fontSize="6" fontWeight="700" fill="#102338" letterSpacing="1">
        EFFERVESCENT
      </text>
    </svg>
  );
}

// ============ Logo ============
function Logo({ light = false }) {
  const c = light ? "white" : "#0B1117";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <svg width="32" height="32" viewBox="0 0 32 32">
        <rect x="0" y="0" width="32" height="32" rx="6" fill={light ? "white" : "#0B1117"}/>
        <path d="M 7 22 L 7 10 L 12 16 L 16 12 L 20 16 L 25 10 L 25 22"
          stroke={light ? "#0B1117" : "white"} strokeWidth="2" fill="none" strokeLinecap="square" strokeLinejoin="miter"/>
      </svg>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, letterSpacing: "-0.02em", color: c }}>
          Mark Maker
        </span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.18em", color: light ? "rgba(255,255,255,0.5)" : "var(--ink-3)", textTransform: "uppercase", marginTop: 2 }}>
          Pharma Engineering
        </span>
      </div>
    </div>
  );
}

// Make available globally for other Babel scripts
Object.assign(window, { MachineRender, Hotspot, ProductionLineSVG, TubeIcon, Logo });
