/* global React, MachineRender */
const { useState: useS2, useEffect: useE2 } = React;

// ============ 3D PRODUCT EXPLORER with tabs ============
function ProductExplorer() {
  const [tab, setTab] = useS2("overview");
  const [rot, setRot] = useS2(-8);
  const [exploded, setExploded] = useS2(false);
  const [showHot, setShowHot] = useS2(true);

  const tabs = [
    { id: "overview", label: "Overview" },
    { id: "process", label: "Process Flow" },
    { id: "systems", label: "Key Systems" },
    { id: "specs", label: "Specifications" },
    { id: "layout", label: "Layout" },
    { id: "media", label: "Media" },
  ];

  const tabContent = {
    overview: { title: "EFF-PACK 100", body: "High-speed automatic tube filling system for effervescent tablets. Continuous-motion design, laser monitoring, and nitrogen flushing in a single integrated platform.", chips: ["Continuous", "Automatic", "cGMP", "100–120 tubes/min"] },
    process: { title: "Eight-step continuous flow", body: "Tablet feed → tube load → count → fill → N₂ flush → seal → inspect → output. Each zone instrumented with laser sensors and feedback loops.", chips: ["8 zones", "Laser monitored", "Closed loop"] },
    systems: { title: "Eight engineering systems", body: "Hopper, tube elevator, indexing carrier, multi-track filler, N₂ flushing manifold, sealing head, vision inspection, and HMI/PLC control.", chips: ["HMI", "Sensors", "Sealing", "Vision"] },
    specs: { title: "Technical specifications", body: "11 kW connecting load. 1,000 kg approximate weight. Tablet diameter 18–30 mm, tube length 80–180 mm. Compressed air, N₂ gas, single-phase 230V utility services.", chips: ["11 kW", "1,000 kg", "18–30mm tablets"] },
    layout: { title: "Compact footprint", body: "3.6 × 1.4 m main machine envelope. Operator zones on three sides with maintenance access from the rear. Integrates into existing OSD floor layouts.", chips: ["3.6 × 1.4 m", "3-side access", "Cleanroom-ready"] },
    media: { title: "Brochures, videos, drawings", body: "Download the full product brochure, GA drawings, and watch the line walkthrough video. Custom layouts and capacity studies on request.", chips: ["PDF", "Video", "Drawings"] },
  };
  const c = tabContent[tab];

  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">Interactive 3D product explorer</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32 }}>
          <h2 className="display display-lg" style={{ maxWidth: "20ch" }}>
            Explore every machine from every angle.
          </h2>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-ghost" style={{ padding: "8px 14px", fontSize: 12 }}>Download brochure</button>
            <button className="btn btn-primary" style={{ padding: "8px 14px", fontSize: 12 }}>Request quote</button>
          </div>
        </div>

        <div className="card" style={{ background: "white", overflow: "hidden", padding: 0 }}>
          {/* Tabs */}
          <div style={{ padding: "0 32px", borderBottom: "1px solid var(--line)" }}>
            <div className="tabs">
              {tabs.map(t => (
                <button key={t.id} className={`tab ${tab === t.id ? "active" : ""}`} onClick={() => setTab(t.id)}>
                  {t.label}
                </button>
              ))}
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", minHeight: 540 }}>
            {/* Viewport */}
            <div style={{ position: "relative", background: "linear-gradient(180deg, #FFF 0%, #ECF1F6 100%)", borderRight: "1px solid var(--line)", padding: 32 }}>
              <div className="blueprint-grid" style={{ opacity: 0.4 }}/>
              <div style={{ position: "relative", height: "100%", minHeight: 460 }}>
                <MachineRender rotation={rot} exploded={exploded} showHotspots={showHot}/>
              </div>

              {/* Viewport controls */}
              <div style={{ position: "absolute", top: 24, left: 24, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
                EFF-PACK 100 · {tab.toUpperCase()}
              </div>
              <div style={{ position: "absolute", bottom: 24, left: 24, display: "flex", gap: 6 }}>
                <ViewBtn onClick={() => setRot(rot - 30)}>↺</ViewBtn>
                <ViewBtn onClick={() => setRot(0)}>⌂</ViewBtn>
                <ViewBtn onClick={() => setRot(rot + 30)}>↻</ViewBtn>
                <ViewBtn active={exploded} onClick={() => setExploded(!exploded)}>Exploded</ViewBtn>
                <ViewBtn active={showHot} onClick={() => setShowHot(!showHot)}>Hotspots</ViewBtn>
              </div>
              <div style={{ position: "absolute", top: 24, right: 24, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)" }}>
                ROT: {rot.toFixed(0)}°
              </div>
            </div>

            {/* Spec drawer */}
            <div style={{ padding: 36, display: "flex", flexDirection: "column" }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--pharma)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
                {tabs.find(x => x.id === tab).label}
              </div>
              <h3 className="display display-md" style={{ marginTop: 12 }}>{c.title}</h3>
              <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, marginTop: 16 }}>{c.body}</p>
              <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 8 }}>
                {c.chips.map(ch => <span key={ch} className="chip">{ch}</span>)}
              </div>

              {/* Mini specs */}
              <div style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.14em", marginBottom: 6 }}>
                  Quick specifications
                </div>
                {[["Capacity", "1M tablets / shift"], ["Filling speed", "100–120 tubes/min"], ["Tablet Ø", "18–30 mm"], ["Tube length", "80–180 mm"], ["Connect load", "11 kW"]].map(([k, v]) => (
                  <div key={k} className="spec-row">
                    <span className="k">{k}</span>
                    <span className="v">{v}</span>
                  </div>
                ))}
              </div>

              <div style={{ marginTop: "auto", paddingTop: 24, display: "flex", gap: 8 }}>
                <button className="btn btn-pharma" style={{ padding: "10px 16px", fontSize: 13 }}>View product page</button>
                <button className="btn btn-ghost" style={{ padding: "10px 16px", fontSize: 13 }}>Compare</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ViewBtn({ children, active, onClick }) {
  return (
    <button onClick={onClick} style={{
      padding: "6px 12px", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em",
      textTransform: "uppercase",
      border: `1px solid ${active ? "var(--pharma)" : "var(--line)"}`,
      background: active ? "var(--pharma)" : "white",
      color: active ? "white" : "var(--ink)",
      borderRadius: 4, cursor: "pointer",
    }}>{children}</button>
  );
}

// ============ INDUSTRIES ============
function Industries() {
  const ind = [
    { name: "Pharmaceuticals", desc: "Processing, drying, coating, blending, and packaging for regulated pharma manufacturing.", cases: ["Effervescent OSD", "Tablet coating", "Wet granulation"] },
    { name: "Nutraceuticals", desc: "Tube filling and packaging for vitamin & supplement effervescent products.", cases: ["Multivitamin tubes", "Sports nutrition", "Functional formats"] },
    { name: "Cosmetics", desc: "Effervescent bath products and personal care tablet packaging systems.", cases: ["Bath bombs", "Tablet skincare", "Premium packs"] },
    { name: "Chemicals", desc: "Powder blending, granulation, and packaging for chemical formulations.", cases: ["Cleaning tablets", "Pool chemistry", "Industrial formats"] },
    { name: "Food", desc: "Hygienic, food-grade processing and tablet packaging for consumer brands.", cases: ["Effervescent drinks", "Vitamin candies", "Dietary blends"] },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-label">Industries served</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40 }}>
          <h2 className="display display-lg" style={{ maxWidth: "16ch" }}>
            Engineered for five industries.
          </h2>
          <p className="lede" style={{ maxWidth: 360, fontSize: 16 }}>
            One platform, validated across regulated and consumer markets.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {ind.map((i, idx) => (
            <div key={i.name} style={{ padding: "32px 24px", borderRight: idx === 4 ? "none" : "1px solid var(--line)", borderBottom: "1px solid var(--line)", display: "flex", flexDirection: "column", minHeight: 280, position: "relative", transition: "background 200ms" }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--metal-3)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
            >
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.14em" }}>
                0{idx + 1}
              </div>
              <h3 className="display display-sm" style={{ marginTop: 16 }}>{i.name}</h3>
              <p style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 10, lineHeight: 1.55 }}>{i.desc}</p>
              <div style={{ marginTop: "auto", paddingTop: 16, display: "flex", flexDirection: "column", gap: 4 }}>
                {i.cases.map(c => (
                  <div key={c} className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.04em" }}>· {c}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProductExplorer, Industries });