/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/* KinkDetail — Kink (2020, Martin Mogilski). Define. Powder-coated aluminium handles. */

const { useState: useStateKnk, useEffect: useEffectKnk } = React;

const KNK_SLIDES_BASE = [
  { title: "Kink", image: "images/collections/kink/hero/01.jpg", pos: "center center" },
  { title: "Kink", image: "images/collections/kink/hero/02.jpg",  pos: "center 42%" },
  { title: "Kink", image: "images/collections/kink/hero/03.jpg",    pos: "center 60%" },
];
const KNK_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("kink", "hero", KNK_SLIDES_BASE) : KNK_SLIDES_BASE;

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

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

  const s = KNK_SLIDES[i];

  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: "#e7e5df" }}>
      {KNK_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 55%, rgba(26,25,23,0.42) 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" }}>
          {s.title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 10 }}>
        {KNK_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.5)",
              border: "none", cursor: "pointer", padding: 0, transition: "width 320ms ease, background 320ms ease" }} />
        ))}
      </div>
    </section>
  );
}

function KinkDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <KinkCarousel />
      <PageIntro
        eyebrow="Kink · Martin Mogilski, 2020"
        title="A series of aluminium handles with a confident bend."
        body="A series of handles designed to add a playful, deliberate detail to furniture and cabinetry. Each handle is formed from aluminium tube, shaped using a press brake — a tool typically reserved for sheet metal — to introduce the precise 90-degree bends that give the collection its name and distinctive identity."
        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/kink/pillars/01.jpg", alt: "Kink · the press-brake fold, black powder coat", caption: "01 · The fold" },
              { src: "images/collections/kink/pillars/02.jpg",   alt: "Kink as a door handle on an OSB-clad meeting room", caption: "02 · In service" },
              { src: "images/collections/kink/pillars/03.jpg",  alt: "Kink in signal red across white cabinetry", caption: "03 · In colour" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>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" }}>
              Architectural detail at the touchpoint.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Kink reads as an architectural detail in its own right, bringing a refined material expression and quiet visual interest to kitchens, wardrobes and bespoke furniture across residential and commercial interiors.
            </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 Kink 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: "The fold", title: "A clever fold gives the tube its personality.",
              body: "Kink's defining feature is the deliberate fold that gently deforms the aluminium tube to produce its 90-degree bend — a clever manufacturing move that uses a press brake, a tool typically reserved for sheet metal, to shape something usually achieved by joining or welding. The deformation is precise rather than corrected, embraced as the design's signature detail — material honesty made visible, where the act of shaping the tube becomes the source of the handle's personality.",
              image: "images/collections/kink/feature/01.jpg", alt: "Kink · the fold detail", pos: "center center" },
            { no: "02", kicker: "Light & shadow", title: "Spatial accent through light and shadow.",
              body: "More than functional hardware, Kink introduces a refined detail. The bends catch the light and produce subtle shadows along their length, adding depth and visual interest without competing with the surrounding architecture. The collection reads as quiet but resolved — a small element capable of holding architectural presence.",
              image: "images/collections/kink/feature/02.jpg", alt: "Kink · light and shadow on brushed aluminium", pos: "center center" },
            { no: "03", kicker: "Tactile grip", title: "Intuitive grip and tactile affordance.",
              body: "Kink is designed to invite interaction. The bent profile sits naturally in the hand, providing a satisfying grip that turns a routine touchpoint into a more deliberate moment. The collection transforms a piece of functional hardware into a tactile detail — encouraging a more intentional connection between people and the furniture they use every day.",
              image: "images/collections/kink/feature/03.jpg", alt: "Kink · signal-red handles at hand height on OSB columns", pos: "center 55%" },
          ].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: "22ch" }}>
                {f.title}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: "#6c6862", margin: 0, maxWidth: "38ch" }}>{f.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Projects in use */}
      <section style={{ padding: isMobile ? "64px 20px" : "120px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 24, marginBottom: isMobile ? 28 : 40, flexWrap: "wrap" }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500 }}>Projects in use</div>
          <a onClick={() => setScreen && setScreen("projects")} style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#1a1917", fontWeight: 500, cursor: "pointer", borderBottom: "0.5px solid #1a1917", paddingBottom: 4 }}>All projects →</a>
        </div>
        <div
          onClick={() => setScreen && setScreen("project-powerhouse")}
          role="link" tabIndex={0}
          onKeyDown={(e) => { if (e.key === "Enter" && setScreen) setScreen("project-powerhouse"); }}
          style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr", gap: isMobile ? 24 : 48, alignItems: "center", cursor: "pointer", maxWidth: 1100 }}>
          <div style={{ aspectRatio: "16/10", background: "#e4e2da", overflow: "hidden" }}>
            <img src="images/_legacy/collections/kink-powerhouse.jpg" alt="Kink handles on brushed cabinetry, Brisbane Powerhouse" loading="lazy"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 45%", display: "block" }} />
          </div>
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16, borderTop: "0.5px solid rgba(26,25,23,0.25)", paddingTop: 14 }}>
              <div style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontSize: isMobile ? 22 : 26, color: "#1a1917", fontWeight: 500, letterSpacing: "-0.01em" }}>Brisbane Powerhouse</div>
              <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em" }}>Brisbane, AUS · 2022</div>
            </div>
            <div style={{ fontSize: 13, color: "#6c6862", marginTop: 8, letterSpacing: "0.04em" }}>Cultural</div>
            <p style={{ fontSize: isMobile ? 14 : 15, lineHeight: 1.6, color: "#1a1917", margin: "18px 0 0 0", maxWidth: "40ch" }}>
              Kink handles detail the cabinetry across the renewed arts-precinct shop and back-of-house joinery.
            </p>
            <div style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#1a1917", fontWeight: 500, marginTop: 22, display: "inline-block", borderBottom: "0.5px solid #1a1917", paddingBottom: 4 }}>
              View project →
            </div>
          </div>
        </div>
      </section>

      <SpecificationSection
        skuImageBase="images/collections/kink/skus"
        headline="Two applications. Two sizes each."
        meta={[
          ["Design", "Martin Mogilski, 2020"],
          ["Sectors", "Hospitality · Corporate · Civic · Retail"],
          ["Environment", "Indoor & Outdoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Powder-coated aluminium tube, formed by press brake — a machine typically reserved for sheet metal — to 'kink' the tube into precise 90° bends."
        groups={[
          {
            label: "Door handles",
            note: "38 mm tube diameter · 65 mm projection.",
            items: [
              { sku: "KNK-01", name: "Door handle · small", dims: "175 × 38 × 65 · 150 hole centres" },
              { sku: "KNK-02", name: "Door handle · large", dims: "325 × 38 × 65 · 300 hole centres" },
            ],
          },
          {
            label: "Cabinet handles",
            note: "30 mm tube diameter · 50 mm projection.",
            items: [
              { sku: "KNK-11", name: "Cabinet handle · small", dims: "148 × 30 × 50 · 128 hole centres" },
              { sku: "KNK-12", name: "Cabinet handle · large", dims: "276 × 30 × 50 · 256 hole centres" },
            ],
          },
        ]}
        extras={[
          {
            label: "Powder coat finish",
            rows: [
              { text: "White" },
              { text: "Black" },
              { text: "APO Grey" },
              { text: "Signal Red" },
              { text: "Cottage Green" },
              { text: "Custom · any colour available" },
            ],
          },
        ]}
        finishHeadline="Five standard powder-coat colours plus full custom — white, black, APO grey, signal red, cottage green."
      />
      <SpecifierDownloads collection="Kink" />
      <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 => ["twig", "strap", "kono"].includes(c.slug)).map((c) => (
            <div key={c.slug} onClick={() => setScreen && setScreen(c.slug)} style={{ cursor: setScreen ? "pointer" : "default" }}>
              <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="Kink" />
    </>
  );
}

window.KinkDetail = KinkDetail;