/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, ConfiguratorStrip, SpecifierDownloads, EnquiryBlock */
/*
 * PrismaDetail — collection detail page for Prisma (2013).
 * Narrative angle: faceted modular geometry for learning and civic environments.
 * Only one documented project (Sydney Contemporary 2019) — "Specified in"
 * is rendered as a single feature card rather than a 3-up grid.
 *
 * SKU tables are plausible placeholders — replace with real spec data when available.
 */

const { useState: useStatePrC, useEffect: useEffectPrC } = React;

const PRISMA_SLIDES_BASE = [
  { title: "Prisma", image: "images/collections/prisma/hero/01.jpg" },
  { title: "Prisma", image: "images/collections/prisma/hero/02.jpg" },
  { title: "Prisma", image: "images/collections/prisma/hero/03.jpg" },
  { title: "Prisma", image: "images/collections/prisma/hero/04.jpg" },
];
const PRISMA_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("prisma", "hero", PRISMA_SLIDES_BASE) : PRISMA_SLIDES_BASE;

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

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

  const s = PRISMA_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",
      }}
    >
      {PRISMA_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", 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,
      }}>
        {PRISMA_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 PrismaDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <>
      <PrismaCarousel />

      <PageIntro
        eyebrow="Prisma · Alexander Lotersztain, 2013"
        title="A prismatic, modular seating system built on faceted geometry."
        body="Prisma celebrates the geometric nature of its namesake — a highly modular and adaptable system whose faceted prismatic modules support a wide range of configurations, from focused settings and quiet nooks to collaborative clusters and informal gathering zones, across diverse public, commercial and educational interiors. Pairs particularly well with Hext, where the shared geometric language allows the two systems to work seamlessly side by side."
        awards={["Good Design Award · Australia", "German Design Award"]}
        compact
        noTopPad
      />

      {/* Editorial pair — image + brand copy */}
      <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/prisma/pillars/01.png",   alt: "Prisma component family — overhead view of triangular and hexagonal modules", caption: "01 · Modular family" },
              { src: "images/collections/prisma/pillars/02.jpg",    alt: "Prisma backrest detail — yellow, grey and white modules stacked",            caption: "02 · Backrest" },
              { src: "images/collections/prisma/pillars/03.jpg", alt: "Prisma close-up — triangulated fabric facets in yellow, grey and bone",     caption: "03 · Facets" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Configure · Define · 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" }}>
              Reconfigured by the people who use it.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Prisma's strength lies in its reconfigurability. Modules can be rearranged by staff, students and end-users themselves, supporting flexible environments that adapt as needs change — campfire settings for group discussion, collaborative clusters, quiet nooks and informal gathering zones. Deployed across educational campuses, airports, retail precincts, shopping centres and workplaces.
            </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 Prisma 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 ways Prisma makes a room.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            {
              no: "01",
              kicker: "Modular",
              title: "Highly modular and reconfigurable.",
              body: "Prisma's geometric modules can be easily rearranged to support flexible use — campfire settings for group discussion, collaborative clusters, quiet nooks and informal gathering zones. The reconfigurability extends the system's relevance well beyond initial specification, allowing the same investment to evolve alongside the space it serves.",
              image: "images/collections/prisma/feature/01.jpg",
              alt: "Prisma component family — overhead top view in coral, pink and rust modules",
            },
            {
              no: "02",
              kicker: "Faceted",
              title: "Faceted geometry, architectural alignment.",
              body: "Crisp faceted geometry integrates naturally with contemporary architectural language, reinforcing spatial order while adding visual identity. The smaller upholstered surfaces also reduce fabric stress and puddling compared to large monolithic seats — improving long-term appearance and performance in demanding high-traffic environments.",
              image: "images/collections/prisma/feature/02.jpg",
              alt: "Prisma installed at PwC Sydney — high-back and open modules in a corporate atrium (Nicole England, 2019)",
            },
            {
              no: "03",
              kicker: "Privacy",
              title: "Three levels of privacy.",
              body: "Open, semi-private and private configurations from the same underlying system. Open sits within social and collaborative environments; semi-private introduces a soft sense of separation and acoustic moderation; fully private carves out focused, retreat-like settings for individual work or quiet conversation.",
              image: "images/collections/prisma/cover.webp",
              alt: "Prisma in a private retreat configuration",
            },
          ].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" }} />
              </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
        headline="26 SKUs across three back heights — basic, enhanced and maximum privacy."
        meta={[
          ["Design", "Alexander Lotersztain, 2013"],
          ["Sectors", "Education · Aviation · Retail · Corporate · Civic · Hospitality"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia and Poland"],
        ]}
        materials="Seat frames in Dunlop Enduro® foam over MDF substrate, upholstered in Customer's Own Material (COM) or Customer's Own Leather (COL). Side tables in veneered particle board; workstation tables in veneered MDF or laminated particleboard with matching ABS edge, on powder-coated mild steel legs. Connectors supplied with each module for linking. Power unit integration available within seating modules."
        groups={[
          {
            label: "Standard seats · 780 mm back",
            note: "Basic privacy. 450 mm seat height. Five SKUs across two depths.",
            items: [
              { sku: "PRS2-01", name: "Seat module · standard",     dims: "605 × 1400 × 780H" },
              { sku: "PRS2-02", name: "Seat module · variant",      dims: "605 × 1400 × 780H" },
              { sku: "PRS2-03", name: "Seat module · variant",      dims: "605 × 1400 × 780H" },
              { sku: "PRS2-04", name: "Seat module · variant",      dims: "605 × 1400 × 780H" },
              { sku: "PRS2-05", name: "Seat module · small depth",  dims: "605 × 1050 × 780H" },
            ],
          },
          {
            label: "Mid-back seats · 1000 mm back",
            note: "Enhanced privacy. 450 mm seat height. Five SKUs across two depths.",
            items: [
              { sku: "PRS2-11", name: "Mid-back seat · large",      dims: "605 × 1400 × 1000H" },
              { sku: "PRS2-12", name: "Mid-back seat · variant",    dims: "605 × 1400 × 1000H" },
              { sku: "PRS2-13", name: "Mid-back seat · variant",    dims: "605 × 1400 × 1000H" },
              { sku: "PRS2-14", name: "Mid-back seat · variant",    dims: "605 × 1400 × 1000H" },
              { sku: "PRS2-15", name: "Mid-back seat · small",      dims: "605 × 1050 × 1000H" },
            ],
          },
          {
            label: "High-back seats · 1330 mm back",
            note: "Maximum privacy. 450 mm seat height. Five SKUs across two depths.",
            items: [
              { sku: "PRS2-16", name: "High-back seat · large",     dims: "605 × 1400 × 1330H" },
              { sku: "PRS2-17", name: "High-back seat · variant",   dims: "605 × 1400 × 1330H" },
              { sku: "PRS2-18", name: "High-back seat · variant",   dims: "605 × 1400 × 1330H" },
              { sku: "PRS2-19", name: "High-back seat · variant",   dims: "605 × 1400 × 1330H" },
              { sku: "PRS2-20", name: "High-back seat · small",     dims: "605 × 1050 × 1330H" },
            ],
          },
          {
            label: "Ottomans · 450 mm height",
            note: "Backless modules in three sizes.",
            items: [
              { sku: "PRS2-06", name: "Ottoman · large",            dims: "605 × 1400 × 450H" },
              { sku: "PRS2-07", name: "Ottoman · medium",           dims: "605 × 1050 × 450H" },
              { sku: "PRS2-08", name: "Ottoman · small",            dims: "605 × 700 × 450H" },
            ],
          },
          {
            label: "Side tables · 450 mm height",
            note: "American Oak veneer, two sizes.",
            items: [
              { sku: "PRS2-09", name: "Side table · large",         dims: "605 × 700 × 450H" },
              { sku: "PRS2-10", name: "Side table · small",         dims: "605 × 1050 × 450H" },
            ],
          },
          {
            label: "Workstations & workbooths",
            note: "Single, 2-person and 4-person configurations. Table height 720 mm, seat height 450 mm.",
            items: [
              { sku: "PRS2-21", name: "Single workstation · high-back",        dims: "605 × 1400 × 1330H" },
              { sku: "PRS2-51", name: "2-person workbooth · standard",         dims: "1615 × 2010 × 780H" },
              { sku: "PRS2-52", name: "2-person workbooth · mid-back",         dims: "1615 × 2010 × 1000H" },
              { sku: "PRS2-53", name: "2-person workbooth · high-back",        dims: "1615 × 2010 × 1330H" },
              { sku: "PRS2-54", name: "4-person workbooth · standard",         dims: "2100 × 2010 × 780H" },
              { sku: "PRS2-55", name: "4-person workbooth · mid-back",         dims: "2100 × 2010 × 1000H" },
              { sku: "PRS2-56", name: "4-person workbooth · high-back",        dims: "2100 × 2010 × 1330H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Upholstery",
            note: "Specifier-selected.",
            rows: [
              { text: "COM · Customer's Own Material" },
              { text: "COL · Customer's Own Leather" },
            ],
          },
          {
            label: "Table & workstation finishes",
            rows: [
              { text: "Tables · American Oak veneer" },
              { text: "Workstation legs · white or black powder coat" },
            ],
          },
          {
            label: "Power & connectors",
            rows: [
              { text: "Power unit integration available within seating modules" },
              { text: "Modular connectors supplied with each module for linking" },
            ],
          },
          {
            label: "Pairs with",
            note: "Shared geometric language with Hext.",
            rows: [
              { text: "Hext · side tables and accessories with matching faceted geometry", muted: true },
            ],
          },
        ]}
        finishHeadline="An adaptable modular system that takes everything in its stride — from individual seating to complete collaborative workspaces."
      />

      <ConfiguratorStrip collection="Prisma" />

      {/* Specified in — sectors deployed */}
      <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={{ marginBottom: isMobile ? 24 : 36 }}>
          <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" }}>
            From an airport terminal to international school commons.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "San Diego Airport",    city: "San Diego, USA",  year: 2025, category: "Aviation",  image: "images/collections/prisma/feature/04.webp", pos: "center bottom" },
            { name: "The Cathedral School", city: "Townsville, AUS", year: 2025, category: "Education", image: "images/collections/prisma/feature/05.webp" },
            { name: "Canadian Academy",     city: "Kobe, JPN",       year: 2023, category: "Education", image: "images/collections/prisma/feature/06.webp" },
          ].map((p) => (
            <div key={p.name}>
              <div style={{ aspectRatio: "3/2", background: "#e4e2da", backgroundImage: p.image ? "none" : "repeating-linear-gradient(45deg, rgba(26,25,23,0.045) 0 10px, transparent 10px 20px)", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
                {p.image
                  ? <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", objectPosition: p.pos || "center", display: "block" }} />
                  : <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "#8b877f" }}>Project image</span>}
              </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].filter(Boolean).join(" · ")}</div>
              </div>
              <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em", marginTop: 4 }}>{p.category}</div>
            </div>
          ))}
        </div>
      </section>

      <SpecifierDownloads collection="Prisma" />

      {/* 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 => ["hext", "tetromino-s", "mochi"].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="Prisma" />
    </>
  );
}

window.PrismaDetail = PrismaDetail;