/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * KonoDetail — Kono (2014). Define thread.
 * LDPE base + compact-laminate top — table and planter system. Outdoor.
 */

const { useState: useStateKon, useEffect: useEffectKon } = React;

const KON_SLIDES_BASE = [
  { title: "Kono", image: "images/collections/kono/hero/01.jpg",   pos: "center 72%", dark: true },
  { title: "Kono", image: "images/collections/kono/hero/02.jpg", pos: "center 58%", dark: false },
  { title: "Kono", image: "images/collections/kono/hero/03.jpg",    pos: "center 60%", dark: false },
];
const KON_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("kono", "hero", KON_SLIDES_BASE) : KON_SLIDES_BASE;

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

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

  const s = KON_SLIDES[i];
  const onDark = s.dark;

  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: "#ffffff" }}>
      {KON_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: onDark
          ? "linear-gradient(to bottom, transparent 50%, rgba(26,25,23,0.5) 100%)"
          : "linear-gradient(to bottom, transparent 62%, rgba(255,255,255,0.6) 100%)",
        pointerEvents: "none" }} />
      <div style={{ position: "absolute", left: 0, right: 0, bottom: isMobile ? 84 : 100,
        padding: isMobile ? "0 24px" : "0 32px", textAlign: "center", color: onDark ? "#f5f3ef" : "#1a1917" }}>
        <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 }}>
        {KON_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
                ? (onDark ? "rgba(245,243,239,0.95)" : "rgba(26,25,23,0.8)")
                : (onDark ? "rgba(245,243,239,0.45)" : "rgba(26,25,23,0.3)"),
              border: "none", cursor: "pointer", padding: 0, transition: "width 320ms ease, background 320ms ease" }} />
        ))}
      </div>
    </section>
  );
}

function KonoDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <KonoCarousel />
      <PageIntro
        eyebrow="Kono · Alexander Lotersztain, 2014"
        title="A versatile collection of planters and tables for indoor and outdoor use."
        body="Defined by rounded lines and a sturdy base, Kono brings a playful, considered presence to the spaces it joins — equally at home as a planter softening an open environment with greenery, or as a table supporting work, gathering and casual exchange. From corporate breakout spaces and hospitality settings to civic plazas and outdoor public areas, the collection adapts to its setting through proportion, colour and finish."
        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/kono/cover.jpg", alt: "Kono illuminated planters at dusk, Brisbane", caption: "01 · Outdoors" },
              { src: "images/collections/kono/hero/03.jpg",  alt: "Kono table with compact-laminate top and yellow base", caption: "02 · In use" },
              { src: "images/collections/kono/pillars/01.jpg",        alt: "Kono · compact-laminate top and yellow base edge", 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 }}>Define · Endure</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" }}>
              A coherent family of planted and functional surfaces.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              The shared rounded geometry and sturdy base allow planters and tables to be specified together — softening interiors with greenery, supporting active use, or combining both within a single layout. Biophilic detail and functional surface area within a unified visual language.
            </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 Kono 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: "One family", title: "Planters and tables as a coherent family.",
              body: "Kono comprises both planter and table modules, designed to work together as a single design family. The shared rounded geometry and sturdy base allow the two typologies to be specified together — softening interiors with planted greenery, supporting active use with tables, or combining both within a single layout. The result is a collection that introduces biophilic detail and functional surface area within a unified visual language.",
              image: "images/collections/kono/feature/01.jpg", alt: "Kono table with wire chair", pos: "center 58%" },
            { no: "02", kicker: "Vibrant colour", title: "A flexible palette for a playful, considered register.",
              body: "Kono is available in a flexible range of vibrant colours, allowing the collection to add a playful touch to the spaces it sits within. The colour range supports tonal pairings that recede into the architecture, or bold, contrasting specifications that bring confident character and identity to a space. The same considered geometry carries across each colour, ensuring visual continuity regardless of finish.",
              image: "images/collections/kono/pillars/01.jpg", alt: "Kono · vibrant yellow base", pos: "center center" },
            { no: "03", kicker: "RENEW programme", title: "Part of Derlot's closed-loop material pathway.",
              body: "Kono is part of Derlot's RENEW programme, supporting a closed-loop material pathway and circular reuse at the end of the product's lifecycle. Through RENEW, clients can partner directly with Derlot to recover end-of-life pieces, reprocess the material, and re-supply new Kono units — closing the loop on the product's lifecycle and helping organisations meet long-term sustainability and circular design targets.",
              image: "images/collections/kono/hero/02.jpg", alt: "Kono planters with greenery", pos: "center 40%" },
          ].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: "22ch" }}>
                {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/kono/skus"
        headline="Six SKUs. Three planters. Three tables."
        meta={[
          ["Design", "Alexander Lotersztain, 2014"],
          ["Sectors", "Corporate · Hospitality · Civic · Education · Retail"],
          ["Environment", "Outdoor · also suitable indoor"],
          ["Warranty", "5 year structural"],
          ["Manufactured", "Australia"],
        ]}
        materials="Planter and table base in LDPE plastic, fully recyclable at end of life through Derlot's RENEW programme. Table top in compact laminate."
        groups={[
          {
            label: "Planters",
            note: "All planters at 555 mm height. LDPE construction.",
            items: [
              { sku: "KON-01", name: "Small planter",  dims: "Ø 560 × 555H" },
              { sku: "KON-02", name: "Medium planter", dims: "Ø 740 × 555H" },
              { sku: "KON-03", name: "Large planter",  dims: "Ø 940 × 555H" },
            ],
          },
          {
            label: "Tables",
            note: "LDPE base with compact laminate top.",
            items: [
              { sku: "KON-16", name: "Square table",                   dims: "1000 × 1000 × 750H" },
              { sku: "KON-17", name: "Square table with planter",      dims: "1000 × 1000 × 950H" },
              { sku: "KON-18", name: "Rectangular table",              dims: "2400 × 1000 × 750H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Standard colour palette",
            rows: [
              { text: "Full LDPE palette across neutrals, marbles, earth tones, warms and cools." },
              { text: "See the Finish & colour library for the master palette and custom matching.", muted: true },
            ],
          },
          {
            label: "Table top · compact laminate",
            rows: [
              { text: "White" },
              { text: "Black" },
            ],
          },
          {
            label: "End of life",
            rows: [
              { text: "LDPE fully recyclable through Derlot's RENEW programme." },
            ],
          },
        ]}
        finishHeadline="Thirty standard LDPE colours across neutrals, earth tones, warms and cools; compact laminate tops in white or black."
      />

      <SpecifierDownloads collection="Kono" />

      <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 => ["tonne", "stump", "cup"].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="Kono" />
    </>
  );
}

window.KonoDetail = KonoDetail;