/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * RioDetail — Rio Table (2020). Configure thread.
 *
 * "A minimal, round table built for versatile workspace and public use."
 * Round table built around a clean, smooth circumference and a minimal,
 * unassuming expression. Available across coffee / standard / bar
 * heights and four diameter ranges, with an integrated power & data
 * variant ("Rio Plug") delivered in collaboration with OE Elsafe
 * (PIXEL and PANDORA units).
 *
 * 15 SKUs total — 9 Standard Rio (indoor & outdoor with stainless base
 * + HDPE top) and 6 Rio Plug (indoor only). GECA certified, manufactured
 * Australia.
 */

const { useState: useStateRio, useEffect: useEffectRio } = React;

const RIO_SLIDES_BASE = [
  { title: "Rio", image: "images/collections/rio/hero/01.webp", pos: "center" },
  { title: "Rio", image: "images/collections/rio/hero/02.webp", pos: "center bottom" },
  { title: "Rio", image: "images/collections/rio/hero/03.webp" },
];
const RIO_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("rio", "hero", RIO_SLIDES_BASE) : RIO_SLIDES_BASE;

function RioCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateRio(0);
  const [paused, setPaused] = useStateRio(false);
  useEffectRio(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % RIO_SLIDES.length), 7000);
    return () => clearInterval(id);
  }, [paused]);
  return (
    <section onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      style={{ position: "relative", width: "100%", aspectRatio: "16 / 9",
        maxHeight: isMobile ? "82vh" : "90vh", minHeight: isMobile ? 460 : 560,
        overflow: "hidden", background: "#1a1917" }}>
      {RIO_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" }}>
          {RIO_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {RIO_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 RioDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <RioCarousel />

      <PageIntro
        eyebrow="Rio Table · Alexander Lotersztain, 2020"
        title="One round table. Specified for the work of the room."
        body="Rio Table is a round table built around a clean, smooth circumference and a minimal, unassuming expression. Durable, customisable and engineered for hard daily use, Rio adapts to a wide range of demanding environments — from corporate workspaces and meeting settings to hospitality, civic and educational interiors. The collection pairs reductive form with practical specification flexibility, allowing Rio to serve as both a quiet background element and a confident architectural anchor depending on the brief."
        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/rio/pillars/01.webp", pos: "center bottom", alt: "Rio table with oak chair and plants", caption: "01 · Form" },
              { src: "images/collections/rio/pillars/02.webp",   alt: "Rio bar table with stools",          caption: "02 · Heights" },
              { src: "images/collections/rio/pillars/03.webp",   alt: "Rio top with integrated power",      caption: "03 · Power" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Configure · Indoor &amp; Outdoor</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" }}>
              Designed to recede. Engineered for hard daily use.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Rio's clean, smooth circumference and reductive silhouette are intentional — the table is designed to recede quietly into the architecture of the room rather than compete with it, allowing the activity around the table to take centre stage. The form is honest and functional, expressed with the restraint of a considered design object.
            </p>
          </div>
        </div>
      </section>

      {/* Three feature cards */}
      <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 }}>Key features</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 Rio does well.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Customisable power", title: "Integrated connectivity, configured to the brief.",
              body: "Rio supports integrated power and connectivity, with the layout of power ports configurable to suit each project's specific needs. Specifiers can mix power outlets, USB-A and USB-C connections to match the workflow of the space — from individual workstations and meeting tables to collaborative settings where multiple users share a single surface. Connectivity is delivered in collaboration with OE Elsafe, ensuring industry-leading safety, reliability and certification.",
              image: "images/collections/rio/pillars/04.webp", alt: "Rio top with integrated power module" },
            { no: "02", kicker: "Multiple heights", title: "From coffee height to standing meeting.",
              body: "Rio is available in a range of heights — supporting standard dining and meeting heights, standing-height configurations for active meetings, and intermediate options for café and breakout settings. The same minimal silhouette carries across each height, ensuring visual continuity across a layered specification. The result is a single collection that can support seated work, casual dining, standing meetings and informal exchange within a single coherent design language.",
              image: "images/collections/rio/pillars/05.webp", pos: "center bottom", alt: "Rio at standing meeting height" },
            { no: "03", kicker: "Minimal form", title: "Reductive silhouette, considered restraint.",
              body: "Rio's clean, smooth circumference and reductive silhouette are intentional. The table is designed to recede quietly into the architecture of the room rather than compete with it, allowing the activity around the table to take centre stage. The form is honest and functional — built for hard daily use, but expressed with the restraint of a considered design object.",
              image: "images/collections/rio/pillars/03.webp", alt: "Rio with notebook, clean circumference" },
          ].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", objectPosition: f.pos || "center", 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>

      <SpecificationSection
        skuImageBase="images/collections/rio/skus"
        headline="15 SKUs across three heights — with or without integrated power."
        meta={[
          ["Design", "Alexander Lotersztain, 2020"],
          ["Sectors", "Corporate · Hospitality · Civic · Education"],
          ["Environment", "Indoor · Outdoor (Standard Rio with stainless base & HDPE top)"],
          ["Warranty", "5 year structural"],
          ["Certification", "GECA certified"],
          ["Connectivity partner", <a href="https://www.oeelsafe.com.au" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "2px" }}>OE Elsafe</a>],
          ["Manufactured", "Australia"],
        ]}
        materials="Base — powder-coated mild steel or stainless steel (Standard Rio); powder-coated mild steel only on Rio Plug. Tops — American Oak or American Walnut veneer on MDF; white or black laminate with matching ABS edge; or HDPE plastic in white or black (outdoor only). Base diameters scale proportionally to top size: 450 / 550 / 700 / 850 mm."
        groups={[
          {
            label: "Standard Rio · Dining height",
            note: "750 mm overall, indoor & outdoor capable. Diameter ranges allow top-size flexibility within each SKU.",
            items: [
              { sku: "RIO-01", name: "Standard table · small",        dims: "Ø 600–800 × 750 H · base Ø 450" },
              { sku: "RIO-02", name: "Standard table · medium",       dims: "Ø 900–1000 × 750 H · base Ø 550" },
              { sku: "RIO-03", name: "Standard table · large",        dims: "Ø 1100–1200 × 750 H · base Ø 700" },
              { sku: "RIO-04", name: "Standard table · extra large",  dims: "Ø 1300–1500 × 750 H · base Ø 850" },
            ],
          },
          {
            label: "Standard Rio · Bar height",
            note: "1050 mm overall, indoor & outdoor capable. For standing meetings and high seating.",
            items: [
              { sku: "RIO-05", name: "Bar table · small",  dims: "Ø 600–800 × 1050 H · base Ø 550" },
              { sku: "RIO-06", name: "Bar table · large",  dims: "Ø 900–1000 × 1050 H · base Ø 700" },
            ],
          },
          {
            label: "Standard Rio · Coffee height",
            note: "350 mm overall, indoor & outdoor capable. For lounge and casual settings.",
            items: [
              { sku: "RIO-07", name: "Coffee table · small",   dims: "Ø 600–800 × 350 H · base Ø 450" },
              { sku: "RIO-08", name: "Coffee table · medium",  dims: "Ø 900–1000 × 350 H · base Ø 550" },
              { sku: "RIO-09", name: "Coffee table · large",   dims: "Ø 1100–1200 × 350 H · base Ø 700" },
            ],
          },
          {
            label: "Rio Plug · Dining height with integrated power & data",
            note: "725 mm overall, indoor only. Powered by PIXEL or PANDORA modules from OE Elsafe.",
            items: [
              { sku: "PLG-01", name: "Rio Plug standard table · small",   dims: "Ø 800–1000 × 725 H · base Ø 550" },
              { sku: "PLG-02", name: "Rio Plug standard table · medium",  dims: "Ø 1100–1200 × 725 H · base Ø 700" },
              { sku: "PLG-03", name: "Rio Plug standard table · large",   dims: "Ø 1300–1500 × 725 H · base Ø 850" },
            ],
          },
          {
            label: "Rio Plug · Bar height with integrated power & data",
            note: "725 mm overall, indoor only. Powered by PIXEL or PANDORA modules from OE Elsafe.",
            items: [
              { sku: "PLG-04", name: "Rio Plug bar table · small",   dims: "Ø 800–1000 × 725 H · base Ø 550" },
              { sku: "PLG-05", name: "Rio Plug bar table · medium",  dims: "Ø 1100–1200 × 725 H · base Ø 700" },
              { sku: "PLG-06", name: "Rio Plug bar table · large",   dims: "Ø 1300–1500 × 725 H · base Ø 850" },
            ],
          },
        ]}
        extras={[
          {
            label: "Top finishes",
            rows: [
              { text: "American Oak veneer on MDF" },
              { text: "American Walnut veneer on MDF" },
              { text: "White or black laminate with matching ABS edge" },
              { text: "HDPE plastic in white or black — outdoor use only", muted: true },
            ],
          },
          {
            label: "Base finishes",
            rows: [
              { text: "Powder-coated mild steel — white, black or custom colour" },
              { text: "Stainless steel — required for outdoor specification" },
              { text: "Rio Plug uses powder-coated mild steel only (indoor)", muted: true },
            ],
          },
          {
            label: "Power & data (Rio Plug)",
            rows: [
              { text: <span>PIXEL and PANDORA integrated power and data units, by <a href="https://www.oeelsafe.com.au" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: "2px" }}>OE Elsafe</a></span> },
              { text: "Mix of power, USB-A and USB-C configurable per project" },
              { text: "Cable reticulation — socket above, or socket with floorbox below" },
              { text: "Indoor use only.", muted: true },
            ],
          },
          {
            label: "Outdoor specification",
            rows: [
              { text: "Standard Rio (RIO-01 through RIO-09) only" },
              { text: "Stainless steel base required" },
              { text: "HDPE tops only — veneer and laminate not suitable" },
              { text: "Rio Plug not suitable for outdoor use.", muted: true },
            ],
          },
        ]}
        finishHeadline="A single silhouette across 15 builds — with custom finishes, sizes and configurations available on demand."
      />

      <SpecifierDownloads collection="Rio" />

      {/* Specified in — 3-up (real Rio installations) */}
      <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: "26ch", textWrap: "balance" }}>
            From a design studio to a campus and a heritage rail museum.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Arthur Street Studio",   city: "Brisbane, AUS", year: 2024, category: "Workplace", image: "images/collections/rio/pillars/06.webp" },
            { name: "Woodcroft College",      city: "Adelaide, AUS", year: 2024, category: "Education", image: "images/collections/rio/pillars/07.webp", pos: "center 60%" },
            { name: "Ipswich Rail Museum",    city: "Ipswich, AUS",  year: 2024, category: "Civic",     image: "images/collections/rio/pillars/08.webp", pos: "center top" },
          ].map((p) => (
            <div key={p.name}>
              <div style={{ aspectRatio: "3/2", 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", 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", 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>

      <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 => ["pillar", "fit", "tonne"].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="Rio" />
    </>
  );
}

window.RioDetail = RioDetail;