/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, ConfiguratorStrip, SpecifierDownloads, EnquiryBlock */
/*
 * PipelineDetail — Pipeline (2022, Alexander Lotersztain). Configure + Dwell.
 *
 * A modular seating collection inspired by the bold, free-spirited designs of
 * the space-age era. Distinct cylindrical backrest paired with a square seat,
 * built on a 1 m × 1 m grid. 5 seat modules + 1 circular side table. Hidden
 * bracket innovation. Power & USB integration available. Indoor only. GECA
 * certified. Made in Australia.
 */

const { useState: useStatePC, useEffect: useEffectPC } = React;

const PIPELINE_SLIDES_BASE = [
  { kind: "video", title: "Pipeline", video: "images/collections/pipeline/hero/01.mp4", poster: "images/collections/pipeline/hero/02.jpg", duration: 14000 },
  { title: "Pipeline", image: "images/collections/pipeline/hero/02.jpg" },
  { title: "Pipeline", image: "images/collections/pipeline/hero/03.jpg" },
  { title: "Pipeline", image: "images/collections/pipeline/hero/04.jpg" },
  { title: "Pipeline", image: "images/collections/pipeline/hero/05.jpg" },
];
const PIPELINE_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("pipeline", "hero", PIPELINE_SLIDES_BASE) : PIPELINE_SLIDES_BASE;

function PipelineCarousel({ hideCaption = false }) {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStatePC(0);
  const [paused, setPaused] = useStatePC(false);

  useEffectPC(() => {
    if (paused) return;
    const dwell = PIPELINE_SLIDES[i].duration || 7000;
    const id = setTimeout(() => setI((x) => (x + 1) % PIPELINE_SLIDES.length), dwell);
    return () => clearTimeout(id);
  }, [paused, i]);

  const s = PIPELINE_SLIDES[i];

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: "relative",
        width: "100%",
        height: isMobile ? "76vh" : "78vh",
        minHeight: isMobile ? 520 : 620,
        maxHeight: isMobile ? "none" : 820,
        overflow: "hidden",
        background: "#1a1917",
      }}
    >
      {PIPELINE_SLIDES.map((ss, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1100ms ease",
        }}>
          {ss.kind === "video" ? (
            <video
              src={ss.video} poster={ss.poster}
              autoPlay muted loop playsInline preload="auto"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : (
            <img src={ss.image} srcSet={window.IMG && window.IMG.srcsetFor(ss.image)} sizes={window.IMG && window.IMG.sizes()} alt={ss.title} loading={idx === 0 ? "eager" : "lazy"}
                 style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          )}
        </div>
      ))}

      <div style={{
        position: "absolute", inset: 0,
        background: hideCaption
          ? "linear-gradient(to bottom, transparent 70%, rgba(26,25,23,0.35) 100%)"
          : "linear-gradient(to bottom, transparent 50%, rgba(26,25,23,0.55) 100%)",
        pointerEvents: "none",
      }} />

      {!hideCaption && (
      <div style={{
        position: "absolute",
        left: 0, right: 0,
        bottom: isMobile ? 84 : 100,
        padding: isMobile ? "0 24px" : "0 32px",
        textAlign: "center",
        color: "#f5f3ef",
      }}>
        <h3 style={{
          fontFamily: "var(--font-display, Poppins, sans-serif)",
          fontWeight: 500,
          fontSize: isMobile ? "clamp(20px, 5vw, 26px)" : "clamp(22px, 1.9vw, 32px)",
          lineHeight: 1.18,
          letterSpacing: "-0.01em",
          margin: "0 auto",
          maxWidth: "26ch",
          textWrap: "balance",
        }}>
          {s.title}
        </h3>
      </div>
      )}

      <div style={{
        position: "absolute",
        bottom: isMobile ? 36 : 44,
        left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10,
      }}>
        {PIPELINE_SLIDES.map((_, idx) => (
          <button key={idx}
            onClick={() => setI(idx)}
            aria-label={`Show slide ${idx + 1}`}
            style={{
              width: idx === i ? 24 : 6,
              height: 2,
              background: idx === i ? "rgba(245,243,239,0.95)" : "rgba(245,243,239,0.4)",
              border: "none", cursor: "pointer", padding: 0,
              transition: "width 320ms ease, background 320ms ease",
            }}
          />
        ))}
      </div>
    </section>
  );
}

function PipelineDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <>
      <PipelineCarousel />

      <PageIntro
        eyebrow="Pipeline · Alexander Lotersztain, 2022"
        title="A modular seating collection inspired by the space-age era."
        body="Defined by a distinct cylindrical backrest paired with a square seat, Pipeline brings a confident, geometric language to contemporary interiors — minimalist in form, iconic in silhouette, and capable of contouring to almost any setting through its flexible modular logic. Built on a 1 m × 1 m grid, with five upholstered seating modules and a powder-coated steel side table."
        awards={["Good Design Award · Australia", "European Design Award"]}
        compact
        noTopPad
      />

      {/* Editorial pair */}
      <section style={{ padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 32 : 48 }}>
          <EditorialCarousel
            slides={[
              { src: "images/collections/pipeline/pillars/01.jpg", alt: "Pipeline cylindrical backrest detail with side table — hidden bracket geometry",      caption: "01 · Backrest" },
              { src: "images/collections/pipeline/pillars/02.jpg",     alt: "Two Pipeline configurations in parallel — the 1m × 1m modular grid",                  caption: "02 · Grid" },
              { src: "images/collections/pipeline/pillars/03.jpg",    alt: "Long Pipeline sectional in studio, person reclining for scale",                       caption: "03 · Scale" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Configure · Dwell</div>
            <h2 style={{ fontWeight: 500, fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "#1a1917", margin: "0 0 16px 0", maxWidth: "22ch" }}>
              Cylindrical backrest. Square seat. Hidden bracket.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Pipeline's defining technical feature is its hidden bracket system — a considered piece of engineering that connects seat to cylindrical backrest without any visible screws or fixings. Each module is supplied with connectors for linking, scaling effortlessly from intimate single arrangements to expansive, sweeping configurations.
            </p>
          </div>
        </div>
      </section>

      {/* Three features */}
      <section style={{ padding: isMobile ? "64px 20px" : "120px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 40 : 64 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>What Pipeline does</div>
          <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(24px, 6vw, 30px)" : "clamp(26px, 2.6vw, 38px)", lineHeight: 1.12, letterSpacing: "-0.015em", color: "#1a1917", margin: 0, maxWidth: "26ch", textWrap: "balance" }}>
            Three things Pipeline does well.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            {
              no: "01",
              kicker: "Hidden bracket",
              title: "No visible screws or fixings.",
              body: "Pipeline's defining innovation: a concealed bracket system within the seating framework that connects seat to cylindrical backrest without surface hardware. Material honesty expressed through what the design omits — letting the geometry of seat and backrest speak for itself.",
              image: "images/collections/pipeline/feature/01.jpg",
            },
            {
              no: "02",
              kicker: "1 m × 1 m grid",
              title: "Modular contour, any setting.",
              body: "Each module shares a 1000 × 1000 mm footprint with a 420 mm seat height, supplied with connectors for linking. Specify discrete clusters, linear runs, or expansive sweeping arrangements — the grid carries through without breaking the design language.",
              image: "images/collections/pipeline/feature/02.jpg",
            },
            {
              no: "03",
              kicker: "Power & USB",
              title: "Connectivity within the module.",
              body: "Pipeline can be specified with integrated power and USB sockets within the seating modules — supporting on-demand connectivity without disrupting the form. The companion circular side table can be specified freestanding or nestled between seats.",
              image: "images/collections/pipeline/feature/03.jpg",
            },
          ].map((f) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden", marginBottom: isMobile ? 18 : 24 }}>
                <img src={f.image} srcSet={window.IMG && window.IMG.srcsetFor(f.image)} sizes={window.IMG && window.IMG.sizes()} alt={f.title} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 12 }}>
                <div style={{ fontSize: 11, color: "#6c6862", fontWeight: 500, letterSpacing: "0.08em" }}>{f.no}</div>
                <div style={{ height: "0.5px", flex: 1, background: "rgba(26,25,23,0.25)" }} />
                <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500 }}>{f.kicker}</div>
              </div>
              <h3 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? 19 : 20, lineHeight: 1.22, letterSpacing: "-0.01em", color: "#1a1917", margin: "0 0 10px 0", maxWidth: "20ch" }}>
                {f.title}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "#6c6862", margin: 0, maxWidth: "38ch" }}>
                {f.body}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Specification */}
      <SpecificationSection
        skuImageBase="images/collections/pipeline/skus"
        headline="Five seat modules. One side table. 1 m × 1 m grid."
        meta={[
          ["Design", "Alexander Lotersztain, 2022"],
          ["Sectors", "Hospitality · Corporate · Civic · Aviation · Education"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Seating: Dunlop Enduro® foam over MDF substrate, upholstered in specifier-selected commercial fabric. Each module is supplied with connectors for linking. Side table: powder-coated mild steel. Power and USB integration available within the seating modules."
        groups={[
          {
            label: "Seat modules — 1 m × 1 m grid, 420 mm seat height, 720 mm overall with backrest",
            note: "Each module is supplied with linking connectors. Five geometries combine on the grid to form straight runs, corners, S-curves and open passages.",
            items: [
              { sku: "PPL-01", name: "Ottoman module",         dims: "1000 × 1000 × 420 h" },
              { sku: "PPL-02", name: "Straight module",        dims: "1000 × 1000 × 720 h" },
              { sku: "PPL-03", name: "Corner module",          dims: "1000 × 1000 × 720 h" },
              { sku: "PPL-04", name: "Switch module, left",    dims: "1000 × 1000 × 720 h" },
              { sku: "PPL-05", name: "Switch module, right",   dims: "1000 × 1000 × 720 h" },
            ],
          },
          {
            label: "Side table",
            items: [
              { sku: "PPL-06", name: "Circular side table",    dims: "Ø 380 × 520 h" },
            ],
          },
        ]}
        extras={[
          {
            label: "Upholstery",
            note: "Customer's Own Material or Leather.",
            rows: [
              { text: "COM — Customer's Own Material" },
              { text: "COL — Customer's Own Leather" },
            ],
          },
          {
            label: "Side table — powder coat",
            rows: [
              { text: "White" },
              { text: "Black" },
              { text: "Custom colour", muted: true },
            ],
          },
          {
            label: "Power & connectivity",
            note: "Optional, integrated within the seating modules.",
            rows: [
              { text: "Integrated power units available within seat modules" },
            ],
          },
        ]}
        finishHeadline="COM/COL upholstery on the seat modules, paired with a powder-coat side table in white, black or custom."
      />

      <ConfiguratorStrip collection="Pipeline" />

      {/* Specified in */}
      <section style={{ padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid rgba(26,25,23,0.18)" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: isMobile ? 24 : 36, flexWrap: "wrap", gap: 12 }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 12 }}>Specified in</div>
            <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "#1a1917", margin: 0, maxWidth: "24ch", textWrap: "balance" }}>
              Working across corporate foyers and transit interchanges.
            </h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 32 : 32 }}>
          {[
            { name: "Australia Post HQ",     city: "Melbourne", year: 2024, image: "images/collections/pipeline/feature/04.webp" },
            { name: "Computershare",         city: "Melbourne", year: 2022, image: "images/collections/pipeline/feature/05.webp" },
            { name: "Brookfield Place",      city: "Sydney",    year: 2019, image: "images/collections/pipeline/feature/06.webp" },
          ].map((p) => (
            <div key={p.name}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden" }}>
                <img src={p.image} srcSet={window.IMG && window.IMG.srcsetFor(p.image)} sizes={window.IMG && window.IMG.sizes()} alt={p.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)", marginTop: 14 }} />
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 12, gap: 12 }}>
                <div style={{ fontSize: 16, color: "#1a1917" }}>{p.name}</div>
                <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em" }}>{p.city} · {p.year}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <SpecifierDownloads collection="Pipeline" />

      {/* Related collections */}
      <section style={{ padding: isMobile ? "56px 20px" : "96px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto", borderTop: "0.5px solid rgba(26,25,23,0.18)" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 20 }}>Related collections</div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 32 : 32 }}>
          {(window.COLLECTIONS || []).filter(c => ["gateway", "autobahn", "cocoon"].includes(c.slug)).map((c) => (
            <div key={c.slug}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden" }}>
                {c.image && <img src={c.image} srcSet={window.IMG && window.IMG.srcsetFor(c.image)} sizes={window.IMG && window.IMG.sizes()} alt={c.name} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
              </div>
              <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)", marginTop: 14 }} />
              <div style={{ fontSize: 16, color: "#1a1917", marginTop: 12 }}>{c.name}</div>
              <div style={{ marginTop: 10, display: "flex", flexWrap: "wrap", rowGap: 6 }}>
                {c.threads.map(tk => <ThreadBadge key={tk} threadKey={tk} />)}
              </div>
            </div>
          ))}
        </div>
      </section>

      <EnquiryBlock collection="Pipeline" />
    </>
  );
}

window.PipelineDetail = PipelineDetail;