/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * YetiDetail — Yeti (2019). Dwell thread.
 *
 * "A three-legged coffee table." Yeti is a side / coffee table with a
 * quietly mythical character — round edges and a three-legged form give
 * the collection a singular, almost otherworldly silhouette. Made from
 * FSC-certified responsibly sourced timber; available across two sizes
 * and three species. GECA certified, indoor only, manufactured Australia.
 *
 * 2 SKUs:
 *   YTI-01 — large, Ø 700 × 375 H (lower, coffee-table profile)
 *   YTI-02 — small, Ø 450 × 500 H (taller, side-table profile)
 */

const { useState: useStateYti, useEffect: useEffectYti } = React;

const YETI_SLIDES_BASE = [
  { title: "Yeti", image: "images/collections/yeti/hero/01.webp", pos: "center bottom" },
  { title: "Yeti", image: "images/collections/yeti/hero/02.webp" },
  { title: "Yeti", image: "images/collections/yeti/hero/03.webp" },
];
const YETI_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("yeti", "hero", YETI_SLIDES_BASE) : YETI_SLIDES_BASE;

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

      <PageIntro
        eyebrow="Yeti · Alexander Lotersztain, 2019"
        title="A coffee table with a quietly mythical character."
        body="Yeti's round edges and three-legged form give the collection a singular, almost otherworldly silhouette — a piece that holds presence as a focal point while remaining firmly grounded in everyday use. Made from FSC-certified responsibly sourced timber, Yeti pairs an elemental material story with sturdy, minimal construction."
        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/yeti/pillars/01.webp", alt: "Yeti · two oak tables, three-legged form", caption: "01 · Form" },
              { src: "images/collections/yeti/pillars/02.webp",   alt: "Yeti · walnut top, card game",            caption: "02 · Timber" },
              { src: "images/collections/yeti/pillars/03.webp",   alt: "Yeti with a Biggie tub chair",             caption: "03 · In setting" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Dwell · Indoor</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" }}>
              Round edges. Three legs. One singular silhouette.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              The form reads as singular and characterful — both as a stand-alone object and as a focal point that anchors a space. Available across multiple sizes and finishes, the shared three-legged form carries across each variant — holding visual continuity whether Yeti is used singly as a feature or grouped together for layered compositions.
            </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 Yeti does well.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Three-legged form", title: "Sculptural presence, honestly resolved.",
              body: "Yeti's defining feature is its three-legged geometry, paired with rounded edges that soften the piece without diminishing its presence. The form reads as singular and characterful — both as a stand-alone object and as a focal point that anchors a space. The proportions are honest and resolved, holding visual weight from every angle.",
              image: "images/collections/yeti/hero/03.webp", alt: "Yeti three-legged form detail" },
            { no: "02", kicker: "FSC-certified timber", title: "An elemental material, responsibly sourced.",
              body: "Yeti is made from responsibly sourced FSC-certified timber, embedding sustainability into the heart of the collection. The material is left to express itself through grain, finish and proportion — bringing natural warmth and tactile character to interiors while supporting the long-term forest stewardship that FSC certification represents.",
              image: "images/collections/yeti/pillars/02.webp", alt: "Yeti timber grain" },
            { no: "03", kicker: "Multiple sizes & finishes", title: "From intimate occasional to architectural anchor.",
              body: "Yeti is offered across multiple sizes and finishes, allowing the collection to be specified for the demands of each interior. The shared three-legged form carries across each variant, holding visual continuity whether the piece is used singly as a feature or grouped together for layered compositions. Sizes scale from intimate occasional moments to more generous architectural anchors.",
              image: "images/collections/yeti/pillars/04.webp", alt: "Yeti sizes and finishes" },
          ].map((f) => (
            <div key={f.no}>
              <div style={{ aspectRatio: "4/5", background: f.bg || "#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: f.fit || "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="Two sizes, sharing one three-legged form."
        meta={[
          ["Design", "Alexander Lotersztain, 2019"],
          ["Sectors", "Hospitality · Corporate · Retail"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certification", "GECA · FSC-certified timber"],
          ["Manufactured", "Australia"],
        ]}
        materials="Solid timber throughout — FSC-certified responsibly sourced. Available in American Oak (natural), black-stained American Oak, or American Walnut. Round table tops and rounded edges throughout. Three-legged base provides inherent stability with minimal material usage."
        groups={[{
          label: "Tables",
          note: "Both pieces share the three-legged geometry. Lower large table for coffee-table use; taller small table for side-table and accent applications.",
          items: [
            { sku: "YTI-01", name: "Large",  dims: "Ø 700 × 375 H" },
            { sku: "YTI-02", name: "Small",  dims: "Ø 450 × 500 H" },
          ],
        }]}
        extras={[
          {
            label: "Timber options",
            rows: [
              { text: "American Oak — natural grain, traditional warmth" },
              { text: "Black-stained American Oak — contemporary dark finish, oak grain retained" },
              { text: "American Walnut — premium spec, rich colour and grain" },
              { text: "All species FSC-certified responsibly sourced.", muted: true },
            ],
          },
          {
            label: "Construction",
            rows: [
              { text: "Solid timber throughout — no veneer or composite materials" },
              { text: "Three-legged geometry for stability and minimal footprint" },
              { text: "Rounded edges throughout, on both table tops and legs" },
              { text: "Protective coating standard.", muted: true },
            ],
          },
          {
            label: "In application",
            rows: [
              { text: "Single piece as a sculptural feature" },
              { text: "Grouped together for layered compositions" },
              { text: "Hospitality lobbies, lounges; corporate reception; retail accent.", muted: true },
            ],
          },
        ]}
        finishHeadline="An elemental material story — FSC timber, three species, two sizes."
      />

      <SpecifierDownloads collection="Yeti" />

      {/* Specified in — Qantas (sole documented install) */}
      <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: isMobile ? 24 : 36 }}>Specified in</div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr", gap: isMobile ? 24 : 48, alignItems: "center" }}>
          <div style={{ aspectRatio: "3/2", background: "#e4e2da", overflow: "hidden" }}>
            <img src="images/_legacy/projects/yeti-qantas.webp" alt="Yeti in the Qantas lounge" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <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: "20ch", textWrap: "balance" }}>
              Qantas Lounge
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.6, color: "#4a4640", maxWidth: "42ch", marginTop: 16 }}>
              Walnut Yeti tables sit between soft lounge chairs in the airline lounge — the three-legged form working as a quiet occasional surface against the warmth of timber panelling and runway views.
            </p>
            <div style={{ display: "flex", gap: 28, marginTop: 24, flexWrap: "wrap" }}>
              {[["Sector", "Aviation"], ["Environment", "Indoor"], ["Finish", "American Walnut"]].map(([k, v]) => (
                <div key={k}>
                  <div style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "#8b877f", marginBottom: 5 }}>{k}</div>
                  <div style={{ fontSize: 14, color: "#1a1917" }}>{v}</div>
                </div>
              ))}
            </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 => ["stump", "tonne", "hext"].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="Yeti" />
    </>
  );
}

window.YetiDetail = YetiDetail;