/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * PicketDetail — Picket (2012, Alexander Lotersztain). Dwell + Configure.
 *
 * Picket is a seating family — three stools (low/mid/tall), a chair, and two
 * bar stools — sharing a soft, flowing silhouette on a powder-coated steel
 * frame. Indoor & outdoor (with zinc undercoat). GECA certified. Made in
 * Australia. Six SKUs across a progressive height series.
 */

const { useState: useStatePck, useEffect: useEffectPck } = React;

const PICKET_SLIDES_BASE = [
  { title: "Picket", image: "images/collections/picket/hero/01.webp", pos: "center bottom" },
  { title: "Picket", image: "images/collections/picket/hero/02.webp", pos: "center bottom" },
  { title: "Picket", image: "images/collections/picket/hero/03.webp", pos: "center bottom" },
];
const PICKET_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("picket", "hero", PICKET_SLIDES_BASE) : PICKET_SLIDES_BASE;

function PicketCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStatePck(0);
  const [paused, setPaused] = useStatePck(false);
  useEffectPck(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % PICKET_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" }}>
      {PICKET_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" }}>
          {PICKET_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {PICKET_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 PicketDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <PicketCarousel />
      <PageIntro
        eyebrow="Picket · Alexander Lotersztain, 2012"
        title="A classic but playful form, in a full progressive height series."
        body="A seating family of three stools (450, 650, 750 mm), a chair with backrest, and two matching bar stools — all sharing the same soft-edged, flowing silhouette. Picket bridges classic and playful, moving easily between hospitality, civic, corporate and home settings. Indoor and outdoor with a zinc undercoat option."
        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/picket/pillars/01.webp",  alt: "Picket · black stool and bar stool with backrest", caption: "01 · Form" },
              { src: "images/collections/picket/pillars/02.webp",  alt: "Picket chair and stool, oak and denim",       caption: "02 · Seat tops" },
              { src: "images/collections/picket/pillars/03.webp",      alt: "Picket at Canadian Academy, Kobe",            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 }}>Dwell · 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" }}>
              Soft edges. Three heights. One family.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Picket's soft edges and flowing form bring quiet warmth to a room. Specify a low stool at dining height, a counter-height stool at the bar, a tall stool at the high counter — or layer all three across a project without breaking visual continuity. Specifier-selected seat tops in timber, plastic or upholstery.
            </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 }}>What Picket 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 Picket does well.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Height series",     title: "450, 650, 750 — and a chair.",      body: "Three stools at standard, counter and bar heights, a chair with backrest at 450 mm seat, and two bar stools (low and high) — six SKUs covering every seat-height a project needs without leaving the family." },
            { no: "02", kicker: "Seat-top options",  title: "Timber, plastic or upholstered.",   body: "Solid American Oak (natural or black-stained), white or black LDPE plastic, or COM/COL upholstered tops on Dunlop Enduro® foam. Specify a different top per environment without losing the silhouette." },
            { no: "03", kicker: "Indoor & outdoor",  title: "Outdoor with a zinc undercoat.",     body: "Powder-coated mild-steel frame indoors; outdoor specifications get a zinc undercoat before powder coat, paired with HDPE or LDPE seat tops. One coherent collection across foyer and courtyard." },
          ].map((f) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden", marginBottom: isMobile ? 18 : 24 }}>
                <img src={{ "01": "images/_legacy/collections/pck-height-pair.webp", "02": "images/_legacy/collections/pck-black-detail.webp", "03": "images/collections/picket/hero/01.webp" }[f.no]} alt={f.title} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: { "03": "center bottom" }[f.no] || "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/picket/skus"
        headline="Six SKUs across a progressive height series."
        meta={[
          ["Design", "Alexander Lotersztain, 2012"],
          ["Sectors", "Hospitality · Civic · Corporate · Retail"],
          ["Environment", "Indoor & Outdoor (zinc undercoat)"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Frame: powder-coated mild steel (zinc undercoat for outdoor specifications). Upholstered seat tops: Dunlop Enduro® foam over MDF substrate. Hard seat tops: solid timber or LDPE plastic."
        groups={[
          {
            label: "Stools — progressive height series",
            items: [
              { sku: "PCK-01", name: "Low stool",          dims: "360 × 370 × 450 h" },
              { sku: "PCK-02", name: "Medium stool",       dims: "450 × 420 × 650 h" },
              { sku: "PCK-03", name: "Tall stool",         dims: "490 × 445 × 750 h" },
            ],
          },
          {
            label: "Chair",
            items: [
              { sku: "PCK-08", name: "Chair with backrest", dims: "480 × 440 × 723 h · seat 450" },
            ],
          },
          {
            label: "Bar stools — with backrest",
            items: [
              { sku: "PCK-10", name: "Bar stool, low",      dims: "439 × 439 × 830 h · seat 650" },
              { sku: "PCK-11", name: "Bar stool, high",     dims: "459 × 459 × 930 h · seat 750" },
            ],
          },
        ]}
        extras={[
          {
            label: "Frame — powder coat",
            rows: [
              { text: "White" },
              { text: "Black" },
              { text: "Custom (any colour)", muted: true },
            ],
          },
          {
            label: "Seat top — timber",
            rows: [
              { text: "American Oak" },
              { text: "Black-stained American Oak" },
            ],
          },
          {
            label: "Seat top — plastic (outdoor suitable)",
            rows: [
              { text: "White LDPE" },
              { text: "Black LDPE" },
            ],
          },
          {
            label: "Seat top — upholstered",
            note: "Customer's Own Material or Leather.",
            rows: [
              { text: "COM — Customer's Own Material" },
              { text: "COL — Customer's Own Leather" },
            ],
          },
          {
            label: "Outdoor specification",
            rows: [
              { text: "Frame: zinc undercoat before powder coat." },
              { text: "Seat tops: HDPE or LDPE plastic only." },
            ],
          },
        ]}
        finishHeadline="Powder-coat frame in white, black or custom — paired with timber, LDPE or upholstered seat tops."
      />

      <SpecifierDownloads collection="Picket" />

      {/* Specified in — 3-up (real Picket 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 heritage pub terrace to an international school.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "Longueville Hotel",     city: "Sydney, AUS", year: 2020, category: "Hospitality", image: "images/collections/picket/pillars/04.webp" },
            { name: "Canadian Academy",      city: "Kobe, JPN",   year: 2023, category: "Education",   image: "images/collections/picket/pillars/03.webp", pos: "center 72%" },
            { name: "Ping Pong",             city: null,         year: 2020, category: "Hospitality", image: "images/collections/picket/pillars/05.webp" },
          ].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 => ["strap", "stump", "yeti"].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="Picket" />
    </>
  );
}

window.PicketDetail = PicketDetail;