/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * TonneDetail — collection detail page for Tonne (2018).
 *
 * Narrative angle: a table collection inspired by Milan's panettone bread
 * and the cylindrical concrete bollards punctuating the city. Cylindrical
 * rotomoulded LDPE base, fillable with water, sand or concrete for ballast.
 * Steel frame, compact laminate top. 5 SKUs across dining + bar height.
 */

const { useState: useStateTn, useEffect: useEffectTn } = React;

const TONNE_SLIDES_BASE = [
  { title: "Tonne", image: "images/collections/tonne/hero/01.webp", pos: "center bottom" },
  { title: "Tonne", image: "images/collections/tonne/hero/02.webp", pos: "center bottom" },
  { title: "Tonne", image: "images/collections/tonne/hero/03.webp" },
  { title: "Tonne", image: "images/collections/tonne/hero/04.webp", pos: "center bottom" },
];
const TONNE_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("tonne", "hero", TONNE_SLIDES_BASE) : TONNE_SLIDES_BASE;

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

  useEffectTn(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % TONNE_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",
      }}>
      {TONNE_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",
        }}>
          {TONNE_SLIDES[i].title}
        </h3>
      </div>
      <div style={{
        position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10,
      }}>
        {TONNE_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 TonneDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <>
      <TonneCarousel />

      <PageIntro
        eyebrow="Tonne · Alexander Lotersztain, 2018"
        title="A table, in the shape of a panettone."
        body="Tonne is a table collection drawn from two of Milan's most iconic objects — the Christmas bread panettone and the cylindrical concrete bollards that punctuate the city's streets. A raised, perfectly leavened cylindrical base gives the table its inviting silhouette while delivering the stability and durability demanded by outdoor and commercial environments. Tonne adapts to both residential and commercial settings, fitting alongside a wide range of architectural and interior styles."
        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/tonne/pillars/01.webp", alt: "Tonne · cylindrical base on white",   caption: "01 · Form" },
              { src: "images/collections/tonne/pillars/02.webp", alt: "Tonne at University of Melbourne",      caption: "02 · In service" },
              { src: "images/collections/tonne/pillars/03.webp", alt: "Tonne at LPKS Brisbane",   caption: "03 · In service" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Endure · Define</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" }}>
              Sculptural object. Everyday table.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Tonne sits between sculptural object and functional table — holding presence as a singular form while serving the everyday demands of dining, working and gathering. The minimalist silhouette enhances the settings it joins without competing for attention.
            </p>
          </div>
        </div>
      </section>

      <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" }}>
            One cylinder, three things it does.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Drawn from Milan", title: "A cylindrical base.",
              body: "Tonne's defining feature is its cylindrical base — a single sculpted form that references the panettone's gently rising silhouette and the cylindrical concrete bollards that have shaped Milan's urban character for decades. The geometry is honest and reductive, distilled to a singular volume that anchors the table with both visual weight and structural stability.",
              image: "images/collections/tonne/hero/03.webp", alt: "Tonne · cylindrical LDPE base" },
            { no: "02", kicker: "Fillable", title: "Water, sand or concrete.",
              body: "Tonne's hollow base is fillable with water, sand or concrete, providing ballast that delivers exceptional stability — particularly in windy or high-traffic outdoor settings. Water and sand keep Tonne movable; concrete anchors it permanently. A single product that scales from agile movable furniture to permanent architectural fixture.",
              image: "images/collections/tonne/pillars/04.webp", alt: "Tonne · fillable base detail" },
            { no: "03", kicker: "Two heights", title: "Dining and bar.",
              body: "Tonne is offered at standard dining height (730 mm) across two top diameters and at bar height (1100 mm), giving café terraces, restaurant courtyards and public gathering spaces a single design language across both seated and standing arrangements.",
              image: "images/collections/tonne/pillars/05.webp", alt: "Tonne · dining and bar heights" },
          ].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>

      <SpecificationSection
        headline="5 SKUs across dining and bar height."
        meta={[
          ["Design", "Alexander Lotersztain, 2018"],
          ["Sectors", "Hospitality · Civic · Retail · Corporate"],
          ["Environment", "Outdoor (also suitable for Indoor)"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia"],
        ]}
        materials="Rotomoulded LDPE base — hollow and water-, sand- or concrete-fillable for ballast (mandatory before use). Zinc-plated, powder-coated mild-steel frame. Compact laminate top."
        groups={[
          {
            label: "Dining tables",
            note: "Standard 730 mm height across two top diameters. Base must be water-, sand- or concrete-filled before use.",
            items: [
              { sku: "TNN-01", name: "Dining table — small",       dims: "Ø 700 × 730 H" },
              { sku: "TNN-02", name: "Dining table — medium",      dims: "Ø 900 × 730 H" },
              { sku: "TNN-03", name: "Dining table — large",       dims: "Ø 700 × 730 H" },
              { sku: "TNN-04", name: "Dining table — extra large", dims: "Ø 900 × 730 H" },
            ],
          },
          {
            label: "Bar table",
            note: "Elevated bar height. Base must be water-, sand- or concrete-filled before use.",
            items: [
              { sku: "TNN-05", name: "Bar table", dims: "Ø 600 × 1100 H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Base finishes",
            rows: [
              { text: "30 standard LDPE colours" },
              { text: "Custom colours available on request", muted: true },
            ],
          },
          {
            label: "Frame finishes",
            rows: [
              { text: "Powder coat — White" },
              { text: "Powder coat — Black" },
              { text: "Custom colour", muted: true },
            ],
          },
          {
            label: "Top finishes",
            rows: [
              { text: "Compact laminate — White" },
              { text: "Compact laminate — Black" },
            ],
          },
          {
            label: "Site & installation",
            rows: [
              { text: "Base must be water-, sand- or concrete-filled before use" },
              { text: "Fill provides ballast and anti-theft stability.", muted: true },
            ],
          },
        ]}
        finishHeadline="A cylindrical base, drawn from Milan — sculptural object meeting everyday practicality."
      />

      {/* Specified in — 3-up (real Tonne 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 campus terraces to riverside dining.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "University of Melbourne", city: "Melbourne, AUS", year: 2025, category: "Education",   image: "images/collections/tonne/pillars/02.webp", pos: "center bottom" },
            { name: "LPKS Brisbane",          city: "Brisbane, AUS",  year: null, category: "Hospitality", image: "images/collections/tonne/hero/04.webp" },
            { name: "Sydney Sportsmedicine",  city: "Sydney, AUS",    year: 2024, category: "Civic",       image: "images/collections/tonne/hero/01.webp", pos: "center bottom" },
          ].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>

      <SpecifierDownloads collection="Tonne" />

      <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 => ["stump", "s1", "trio"].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="Tonne" />
    </>
  );
}

window.TonneDetail = TonneDetail;