// ============================================================
// pages-home.jsx — Home page sections
// ============================================================

// ------------------------------------------------------------
// DemoEmbed — iframes one of the web_demos modules with chrome
// suppressed via the ?embed=1 query param. Used to drop real
// engineering demos in place of static placeholders.
// ------------------------------------------------------------
function DemoEmbed({ demo, title, mobileFallback }) {
  const { mobile } = window.useViewport();
  if (mobile && mobileFallback) {
    // The embedded demo's internal layout is desktop-only and overflows
    // a phone viewport. Show a placeholder that fits the site aesthetic.
    return (
      <div style={{
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        height: "100%", minHeight: 220, padding: "24px 18px",
        background: "var(--black-050)", color: "var(--steel-100)",
        textAlign: "center",
      }}>
        <img src="assets/illustrations/motor-cross-section.svg" alt=""
          style={{ width: 120, opacity: 0.25, marginBottom: 14,
            filter: "drop-shadow(0 0 6px #33ff6633)" }} />
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.22em", textTransform: "uppercase",
          color: "var(--fg-muted)", marginBottom: 6
        }}>// Preview suspended</div>
        <div style={{
          fontFamily: "var(--font-display)", fontSize: 14,
          letterSpacing: "0.10em", textTransform: "uppercase",
          color: "var(--bone-100)", marginBottom: 8
        }}>{title || demo}</div>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10, lineHeight: 1.6,
          color: "var(--fg-faint)", letterSpacing: "0.06em",
          maxWidth: 280
        }}>
          Interactive preview not available at this viewport. Open on
          a desktop browser to view the live demo.
        </div>
      </div>
    );
  }
  return (
    <iframe
      title={title || demo}
      src={"web_demos/index.html?embed=1#" + demo}
      style={{
        display: "block", width: "100%", height: "100%", minHeight: 360,
        border: 0, background: "var(--black-050)",
      }}
      loading="lazy"
    />
  );
}

function HomePage({ onRoute }) {
  return (
    <div className="page">
      <Hero onRoute={onRoute} />
      <CapabilitiesBand />
      <CADGallery />
    </div>);

}

// ------------------------------------------------------------
// Hero
// ------------------------------------------------------------
function Hero({ onRoute }) {
  return (
    <section className="bp-grid" style={{
      borderBottom: "1px solid var(--border-default)",
      background:
      "radial-gradient(ellipse at 80% 40%, #14a83b22 0%, transparent 55%), var(--black-100)",
      position: "relative", overflow: "hidden"
    }}>
      <div style={{
        position: "absolute", inset: 0, opacity: 0.14,
        backgroundImage: "url(assets/patterns/blueprint-grid.svg)",
        backgroundSize: "200px 200px",
        pointerEvents: "none"
      }} />
      <div className="wrap-wide" style={{ position: "relative", padding: "72px 32px 64px" }}>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56, alignItems: "stretch" }}>
          {/* LEFT — TYPE */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 28, display: "flex", gap: 14, alignItems: "center" }}>
                <span>EST. 2024 · SANTIAGO, CHILE</span>
              </div>

              <h1 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: 104, lineHeight: 0.92, letterSpacing: "0.005em",
                textTransform: "uppercase", margin: 0,
                color: "var(--bone-100)"
              }}>
                Fusionaria<br />
                <span className="phos" style={{ color: "var(--phosphor-500)", textShadow: "0 0 22px #33ff6655" }}>Manufacturing R&amp;D

                </span>
              </h1>

              <p style={{
                maxWidth: 540, marginTop: 36, fontSize: 16, lineHeight: 1.55,
                color: "var(--steel-100)"
              }}>
                Engineering services and manufacturing process development
                for electrical machinery.
              </p>

              <div style={{ marginTop: 36, display: "flex", gap: 12 }}>
                <a className="btn solid" onClick={() => onRoute("products")}>Catalogue →</a>
                <a className="btn ghost" onClick={() => onRoute("contact")}>Contact</a>
              </div>
            </div>

            <div style={{ marginTop: 60, display: "flex", gap: 32, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)", letterSpacing: "0.2em", textTransform: "uppercase" }}>
              <span>// SCROLL FOR CATALOGUE</span>
              <span style={{ color: "var(--steel-500)" }}>↓</span>
            </div>
          </div>

          {/* RIGHT — rotating motor + spec rail stacked */}
          <div style={{ display: "grid", gridTemplateRows: "1fr auto", gap: 16 }}>
            <div className="card-frame" style={{ padding: 0, position: "relative", aspectRatio: "1 / 1", maxHeight: 460 }}>
              <span className="corner tl" /><span className="corner tr" />
              <span className="corner bl" /><span className="corner br" />
              <div style={{ position: "absolute", inset: 0 }}>
                <DemoEmbed demo="hairpin" title="Hairpin generator" />
              </div>
              <div style={{
                position: "absolute", top: 12, left: 12, display: "flex", gap: 8
              }}>
                <span className="pill nominal"><span className="dot" />LIVE</span>
              </div>
              <div style={{
                position: "absolute", bottom: 10, right: 12, fontFamily: "var(--font-mono)", fontSize: 9,
                letterSpacing: "0.24em", color: "var(--fg-faint)", textTransform: "uppercase"
              }}>
                rev C · simulated · interactive
              </div>
            </div>

            {/* Tiny spec rail underneath */}
            <div className="card-frame" style={{ padding: 14 }}>
              <span className="corner tl" /><span className="corner tr" />
              <span className="corner bl" /><span className="corner br" />
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
                <SpecQuad k="Year" v="2024" s="founded" />
                <SpecQuad k="Region" v="CL" s="based in Chile" />
                <SpecQuad k="Intake" v="—" s="by referral" />
                <SpecQuad k="Scope" v="—" s="custom per project" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function SpecQuad({ k, v, s, anom }) {
  return (
    <div>
      <div className="eyebrow" style={{ color: anom ? "var(--offspec-500)" : "var(--fg-muted)" }}>{k}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22,
        fontVariantNumeric: "tabular-nums",
        color: anom ? "var(--offspec-500)" : "var(--phosphor-500)",
        textShadow: anom ? "0 0 6px #ff2bd366" : "0 0 6px #33ff6655",
        letterSpacing: "0.04em", marginTop: 2
      }}>{v}</div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--fg-faint)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 2 }}>{s}</div>
    </div>);

}

// ------------------------------------------------------------
// CapabilitiesBand
// ------------------------------------------------------------
function CapabilitiesBand() {
  const caps = [
  { k: "01", code: "HAIRPIN", title: "Modular hairpin prototype line",
    lines: ["Reconfigurable cell layout", "Per-drawing, per-line", "Tested before delivery"] },
  { k: "02", code: "CLOSED-LOOP", title: "Closed-loop automated manufacturing",
    lines: ["Requirements-driven output", "Process observed by process", "Delivered as packaged software"] },
  { k: "03", code: "SIM", title: "Simulation-led process development",
    lines: ["Design coupled to process model", "Advanced control loops", "Verified against simulation"] },
  { k: "04", code: "CHP", title: "Bespoke tooling, hairpin / CHP",
    lines: ["Per-shaft, per-coil", "Wound against drawing", "Feasibility reviewed first"] }];


  return (
    <section style={{ borderBottom: "1px solid var(--border-default)", padding: "88px 0", background: "var(--black-050)" }}>
      <div className="wrap-wide">
        <div className="rule">
          <span className="tick"></span>
          <span>§ 01 — Capabilities</span>
          <span className="line"></span>
          <span>04 CAPABILITIES</span>
        </div>

        <div className="section-head">
          <h2>What we do.</h2>
          <p className="lede">
            Engineering services and technical consulting for electrical
            machinery manufacturing, delivered per engagement.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {caps.map((c) =>
          <div key={c.k} className="card-frame" style={{ padding: 22 }}>
              <span className="corner tl" /><span className="corner tr" />
              <span className="corner bl" /><span className="corner br" />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
                <span className="eyebrow" style={{ color: "var(--phosphor-500)" }}>{c.code}</span>
                <span className="eyebrow">// {c.k}</span>
              </div>
              <div style={{
              fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600,
              letterSpacing: "0.04em", textTransform: "uppercase",
              color: "var(--bone-100)", lineHeight: 1.15, minHeight: 48, textWrap: "balance"
            }}>
                {c.title}
              </div>
              <ul style={{ margin: "20px 0 0", padding: 0, listStyle: "none" }}>
                {c.lines.map((l, i) =>
              <li key={i} className="dotted" style={{
                fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--steel-100)",
                padding: "8px 0", letterSpacing: "0.04em"
              }}>
                    <span style={{ color: "var(--phosphor-500)", marginRight: 8 }}>›</span>{l}
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ------------------------------------------------------------
// CADGallery — rotating + exploded + cross-section views
// ------------------------------------------------------------
function CADGallery() {
  const [active, setActive] = React.useState(0);
  const views = [
  { id: 0, code: "VIEW A · LIVE MODEL", title: "Bend identification · live", note: "Automated forming output · real" },
  { id: 1, code: "VIEW B · PERSPECTIVE", title: "Winding reference · rotor", note: "24-slot / 12-pole · indicative" },
  { id: 2, code: "VIEW C · ORTHO", title: "Section A–A · ortho", note: "Reference drawing only · rev C" }];


  return (
    <section style={{ borderBottom: "1px solid var(--border-default)", padding: "88px 0", background: "var(--black-100)" }}>
      <div className="wrap-wide">
        <div className="rule">
          <span className="tick"></span>
          <span>§ 02 — CAD Models</span>
          <span className="line"></span>
          <span>WINDING REF · REV C</span>
        </div>

        <div className="section-head">
          <h2>Engineering, visualized.</h2>
          <p className="lede">
            A sample of the CAD and simulation views we work with. Figures
            below are illustrative, not specifications for any fielded part.
          </p>
        </div>

        <div className="card-frame" style={{ padding: 0, display: "grid", gridTemplateColumns: "240px 1fr", minHeight: 540 }}>
          <span className="corner tl" /><span className="corner tr" />
          <span className="corner bl" /><span className="corner br" />

          {/* Left: view selector */}
          <div style={{ borderRight: "1px solid var(--border-default)", background: "var(--black-200)", padding: 0 }}>
            <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border-default)" }}>
              <span className="eyebrow">VIEWS</span>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 14, color: "var(--bone-100)", letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4 }}>
                Winding reference · 0042
              </div>
            </div>
            {views.map((v) =>
            <a key={v.id} onClick={() => setActive(v.id)}
            style={{
              display: "block", padding: "14px 18px", cursor: "pointer",
              borderBottom: "1px solid var(--border-faint)",
              background: active === v.id ? "var(--black-300)" : "transparent",
              borderLeft: active === v.id ? "3px solid var(--phosphor-500)" : "3px solid transparent"
            }}>
                <div className="eyebrow" style={{
                color: active === v.id ? "var(--phosphor-500)" : "var(--fg-muted)"
              }}>{v.code}</div>
                <div style={{
                fontFamily: "var(--font-sans)", fontSize: 13, color: active === v.id ? "var(--bone-100)" : "var(--steel-100)",
                marginTop: 4
              }}>{v.title}</div>
                <div style={{
                fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-faint)",
                letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 6
              }}>{v.note}</div>
              </a>
            )}
            {/* meta */}
            <div style={{ padding: "18px 18px 22px", borderTop: "1px solid var(--border-default)", marginTop: 18 }}>
              <SmallSpec k="DATUM" v="Section A–A" />
              <SmallSpec k="SCALE" v="—" />
              <SmallSpec k="UNITS" v="mm · SI" />
              <SmallSpec k="REV" v="C" />
              <SmallSpec k="ISSUED" v="MAY 2025" />
            </div>
          </div>

          {/* Right: active view */}
          <div style={{ padding: 24, position: "relative", display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <span className="eyebrow" style={{ color: "var(--phosphor-500)" }}>{views[active].code}</span>
              <div style={{ display: "flex", gap: 8 }}>
                <span className="pill nominal"><span className="dot" />RENDERING</span>
                <span className="pill standby"><span className="dot" />VERIFIED</span>
              </div>
            </div>
            <div style={{ flex: 1, position: "relative", border: "1px solid var(--border-faint)", background: "radial-gradient(ellipse at 50% 60%, #14a83b1a, transparent 60%), var(--black-050)" }}>
              {active === 0 &&
              <div style={{ position: "absolute", inset: 0 }}>
                  <DemoEmbed demo="bends" title="Bend identification" mobileFallback />
                </div>
              }
              {active === 1 &&
              <div style={{ position: "absolute", inset: 0, padding: 12 }}>
                  <WireframeMotor size={460} slots={24} poles={12} label="WINDING REF · 24 SLOT / 12 POLE" />
                </div>
              }
              {active === 2 &&
              <div style={{ position: "absolute", inset: 0, padding: 30, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <img src="assets/illustrations/motor-cross-section.svg" alt=""
                style={{ width: "80%", color: "var(--phosphor-500)", filter: "drop-shadow(0 0 8px #33ff6644)" }} />
                </div>
              }
              {/* corner crosshairs */}
              <Crosshair pos="tl" /><Crosshair pos="tr" /><Crosshair pos="bl" /><Crosshair pos="br" />
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 14 }}>
              <Telemetry k="ROTOR" v="—" u="rpm" />
              <Telemetry k="FLUX" v="—" u="" />
              <Telemetry k="POWER" v="—" u="kW" />
              <Telemetry k="OUTPUT" v="—" u="" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function Crosshair({ pos }) {
  const styles = {
    tl: { top: 6, left: 6 }, tr: { top: 6, right: 6 },
    bl: { bottom: 6, left: 6 }, br: { bottom: 6, right: 6 }
  };
  return (
    <div style={{
      position: "absolute", ...styles[pos],
      width: 18, height: 18
    }}>
      <div style={{ position: "absolute", top: 8, left: 0, right: 0, height: 1, background: "var(--phosphor-700)" }} />
      <div style={{ position: "absolute", left: 8, top: 0, bottom: 0, width: 1, background: "var(--phosphor-700)" }} />
    </div>);

}

function SmallSpec({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "5px 0", borderBottom: "1px dotted var(--border-faint)" }}>
      <span className="eyebrow">{k}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--bone-100)", letterSpacing: "0.06em" }}>{v}</span>
    </div>);

}

function Telemetry({ k, v, u, anom }) {
  return (
    <div style={{ borderRight: "1px solid var(--border-faint)", padding: "8px 14px" }}>
      <div className="eyebrow" style={{ color: anom ? "var(--offspec-500)" : "var(--fg-muted)" }}>{k}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 700,
        color: anom ? "var(--offspec-500)" : "var(--phosphor-500)",
        textShadow: anom ? "0 0 6px #ff2bd366" : "0 0 6px #33ff6655",
        letterSpacing: "0.04em", fontVariantNumeric: "tabular-nums", marginTop: 2
      }}>{v} <span style={{ fontSize: 12, color: "var(--fg-muted)", fontWeight: 400 }}>{u}</span></div>
    </div>);

}

Object.assign(window, {
  HomePage, Hero, CapabilitiesBand, CADGallery,
  Crosshair, SmallSpec, Telemetry, SpecQuad
});