/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * MassDetail — Mass (2020). Endure thread.
 * Heavy-duty civic/outdoor bench: zinc-primed, powder-coated mild steel
 * legs with powder-coated aluminium seat and bench tops. Single SKU.
 */

const { useState: useStateMss, useEffect: useEffectMss } = React;

const MSS_SLIDES_BASE = [
  { title: "Mass", image: "images/collections/mass/hero/01.jpg",   pos: "center 60%" },
  { title: "Mass", image: "images/collections/mass/hero/02.jpg",      pos: "center 64%" },
  { title: "Mass", image: "images/collections/mass/hero/03.jpg", pos: "center 58%" },
];
const MSS_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("mass", "hero", MSS_SLIDES_BASE) : MSS_SLIDES_BASE;

function MassCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateMss(0);
  const [paused, setPaused] = useStateMss(false);

  useEffectMss(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % MSS_SLIDES.length), 7000);
    return () => clearInterval(id);
  }, [paused]);

  const s = MSS_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" }}>
      {MSS_SLIDES.map((ss, idx) => (
        <div key={idx} style={{ position: "absolute", inset: 0, opacity: idx === i ? 1 : 0, transition: "opacity 1100ms ease" }}>
          <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", objectPosition: ss.pos || "center", display: "block" }} />
        </div>
      ))}
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(to bottom, transparent 50%, rgba(26,25,23,0.55) 100%)", pointerEvents: "none" }} />
      <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 }}>
        {MSS_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 MassDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <MassCarousel />
      <PageIntro
        eyebrow="Mass · Alexander Lotersztain, 2013"
        title="A reinterpretation of the picnic table, built around inclusion and connection."
        body="A contemporary reinterpretation of the iconic picnic table — reimagined around the principle of inclusion, accessibility and the simple pleasure of time spent together. Where the traditional picnic table assumes a single, fixed way of sitting, Mass introduces a unique central entry point that invites everyone to take a seat with ease, regardless of mobility or ability."
        awards={["Good Design Award · Australia"]}
        compact noTopPad
      />

      <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/mass/pillars/01.jpg",     alt: "Mass in gloss pink at Ping Pong, Brisbane",      caption: "01 · In service" },
              { src: "images/collections/mass/pillars/02.jpg", alt: "Mass · powder-coated aluminium bench tops",       caption: "02 · Bench" },
              { src: "images/collections/mass/pillars/03.jpg",      alt: "Mass · exposed fixings and slatted top detail",   caption: "03 · Detail" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Endure · Configure</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" }}>
              Space at the table. For everyone.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Mass brings a generous, welcoming presence to civic, corporate, hospitality and educational interiors — supporting the kinds of gatherings that bring people together, from casual lunches and team meetings to community events and informal study.
            </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 Mass 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 that hold the line.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Universal access", title: "A central entry point that invites everyone in.",
              body: "Mass is designed around a unique central entry point that allows users of all mobilities and abilities to take a seat with ease, including wheelchair users who can join the table on equal footing with seated companions. The design replaces the picnic table's traditional fixed-bench typology with an inclusive, accessible alternative — making universal access a defining feature of the collection rather than a retrofitted addition.",
              image: "images/collections/mass/feature/01.jpg", alt: "Mass · central entry point", imageStyle: { objectPosition: "center 60%" } },
            { no: "02", kicker: "Integrated power", title: "On-demand connectivity for indoor specifications.",
              body: "Mass is available with integrated power and USB access for indoor specifications, allowing users to stay connected — through devices, work, or conversation — over the course of extended gatherings. The detail supports the way contemporary indoor tables are used: for shared meals, casual meetings, group study and the kinds of longer-form social and working sessions that benefit from on-demand connectivity. Connectivity is delivered in collaboration with OE Elsafe, ensuring industry-leading safety, reliability and certification.",
              image: "images/collections/mass/feature/02.jpg", alt: "Mass · integrated power and USB" },
            { no: "03", kicker: "Public, community, work", title: "Built for high-use, communal environments.",
              body: "Mass is built for the demands of high-use, communal environments — from civic plazas and educational campuses to corporate breakout spaces and hospitality interiors. The collection performs equally well in outdoor community settings, where it is specified without power, and indoor environments, where the integrated power option is available. Its robust construction, generous proportions and inclusive geometry make it suited to the in-between zones where social and working life increasingly overlap.",
              image: "images/collections/mass/feature/03.jpg", alt: "Mass · communal use, University of Queensland", imageStyle: { objectPosition: "center 45%" } },
          ].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.alt} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", ...(f.imageStyle || {}) }} />
              </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: "22ch" }}>
                {f.title}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "#6c6862", margin: 0, maxWidth: "38ch" }}>{f.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Projects in use */}
      <section style={{ padding: isMobile ? "64px 20px" : "120px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24, marginBottom: isMobile ? 28 : 40, flexWrap: "wrap" }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500 }}>Projects in use</div>
          <a onClick={() => setScreen && setScreen("projects")} style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#1a1917", fontWeight: 500, cursor: "pointer", borderBottom: "0.5px solid #1a1917", paddingBottom: 4 }}>All projects →</a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 32 : 32 }}>
          {[
            { slug: "project-uq",            name: "University of Queensland",       city: "Brisbane, AUS", year: 2024, category: "Education",   image: "images/collections/mass/hero/02.jpg",      pos: "center 60%" },
            { slug: "project-flinders-fest", name: "Flinders, Festival Plaza",       city: "Adelaide, AUS", year: 2025, category: "Education",   image: "images/collections/mass/hero/03.jpg", pos: "center 55%" },
            { slug: "project-ping-pong",     name: "Ping Pong",                      city: "Brisbane, AUS", year: 2020, category: "Hospitality", image: "images/collections/mass/pillars/01.jpg",       pos: "center 50%" },
          ].map((p) => (
            <div key={p.slug}
              onClick={() => setScreen && setScreen(p.slug)}
              role="link" tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter" && setScreen) setScreen(p.slug); }}
              style={{ cursor: "pointer" }}>
              <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={`Mass at ${p.name}`} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: p.pos || "center", display: "block" }} />
              </div>
              <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)", marginTop: 14 }} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, marginTop: 12 }}>
                <div style={{ fontSize: 16, color: "#1a1917" }}>{p.name}</div>
                <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em" }}>{[p.city, p.year].filter(Boolean).join(" · ")}</div>
              </div>
              <div style={{ fontSize: 12, color: "#6c6862", marginTop: 4, letterSpacing: "0.04em" }}>{p.category}</div>
            </div>
          ))}
        </div>
      </section>

      <SpecificationSection
        skuImageBase="images/collections/mass/skus"
        headline="One generous picnic table. Built around access."
        meta={[
          ["Design", "Alexander Lotersztain"],
          ["Sectors", "Civic · Corporate · Education · Hospitality"],
          ["Environment", "Indoor & Outdoor"],
          ["Warranty", "5 year structural"],
          ["Connectivity partner", "OE Elsafe (OE Electrics Group)"],
        ]}
        materials="Legs in zinc-primed, powder-coated stainless steel. Seat and bench tops in powder-coated aluminium. Integrated power and USB access available for indoor specifications, in collaboration with OE Elsafe."
        groups={[
          {
            label: "Picnic table",
            note: "Integrated bench and table. Accommodates multiple users with central wheelchair entry point.",
            items: [
              { sku: "MSS-01", name: "Integrated picnic table", dims: "3000 × 1700 × 720H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Powder coat finish",
            rows: [
              { text: "White" },
              { text: "Black" },
              { text: "Custom · any colour available" },
            ],
          },
          {
            label: "Power & connectivity · indoor",
            rows: [
              { text: "Integrated power and USB access available for indoor specifications." },
              { text: "Delivered in collaboration with OE Elsafe — soft wiring designed and manufactured to industry-leading safety and certification standards." },
              { text: "Outdoor specifications supplied without power.", muted: true },
            ],
          },
        ]}
        finishHeadline="Powder coat in white, black or custom; integrated power available indoors via OE Elsafe."
      />

      <SpecifierDownloads collection="Mass" />

      <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 => ["strap", "tonne", "platform"].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="Mass" />
    </>
  );
}

window.MassDetail = MassDetail;