/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * CocoonDetail — collection detail page for Cocoon (2025).
 *
 * Narrative angle: a single-seater armchair drawn from the quiet geometry of
 * the butterfly cocoon — a moment of refuge within movement. Companion piece
 * to Caterpillar, Twig and Pipeline. Two SKUs: plinth base and swivel base.
 */

const { useState: useStateCo, useEffect: useEffectCo } = React;

const COCOON_SLIDES_BASE = [
  { title: "Cocoon", kind: "video", video: "images/collections/cocoon/hero/01.mp4", poster: "images/collections/cocoon/hero/02.webp" },
  { title: "Cocoon", image: "images/collections/cocoon/hero/03.webp" },
  { title: "Cocoon", image: "images/collections/cocoon/hero/02.webp", pos: "center bottom" },
];
const COCOON_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("cocoon", "hero", COCOON_SLIDES_BASE) : COCOON_SLIDES_BASE;

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

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

  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: "#1a1917",
      }}>
      {COCOON_SLIDES.map((ss, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1100ms ease",
        }}>
          {ss.kind === "video" ? (
            <video src={ss.video} poster={ss.poster} autoPlay muted loop playsInline preload="auto"
                   style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          ) : (
            <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",
        }}>
          {COCOON_SLIDES[i].title}
        </h3>
      </div>

      <div style={{
        position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10,
      }}>
        {COCOON_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 CocoonDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;

  return (
    <>
      <CocoonCarousel />

      <PageIntro
        eyebrow="Cocoon · Alexander Lotersztain, 2025"
        title="A moment of refuge within movement."
        body="Cocoon is a single-seater armchair conceived as a moment of refuge within movement. Drawn from the organic geometry and protective softness of a butterfly's cocoon, the design offers a petite yet generous lounge form that brings comfort, intimacy and a sense of being held to busy public environments."
        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={[
              { video: "images/collections/cocoon/pillars/01.mp4", src: "images/collections/cocoon/pillars/02.webp", alt: "Cocoon armchair in motion", caption: "01 · Refuge" },
              { video: "images/collections/cocoon/pillars/03.mp4", src: "images/collections/cocoon/cover.webp",   alt: "Cocoon armchair detail in motion", caption: "02 · Form" },
              { src: "images/collections/cocoon/hero/03.webp",   alt: "Cocoon armchairs in an airport lounge",     caption: "03 · Transit" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Endure · Dwell</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" }}>
              Standalone, but in language with the family.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Developed as a complementary piece to Derlot's modular seating families — Caterpillar, Twig and Pipeline — Cocoon provides a standalone, sculptural option that maintains a cohesive language across large-scale layouts while introducing a more intimate seating experience. Terminals, workplaces and hospitality spaces can layer moments of pause within flowing, modular planning.
            </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 Cocoon 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 make Cocoon hold.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Form", title: "Cocooning, for comfort and privacy.",
              body: "An enveloping wrap-around back and integrated armrests create a subtle sense of privacy and support, while the carefully proportioned shell cradles the body for relaxation and ergonomic lumbar comfort — a true lounge experience within the compact footprint required for high-performance transit and public environments.",
              image: "images/collections/cocoon/cover.webp", alt: "Cocoon armchair, front view" },
            { no: "02", kicker: "Construction", title: "Timber carcass, sprung seat.",
              body: "Cocoon combines craftsmanship with long-term commercial performance. A timber carcass forms the structural heart of the chair, paired with a sprung seat for enhanced resilience and comfort over extended use. The continuous upholstered form flows seamlessly from seat to back to arms.",
              image: "images/collections/cocoon/feature/01.webp", alt: "Cocoon armchair, three-quarter view" },
            { no: "03", kicker: "Bases", title: "Plinth, swivel, return-to-base.",
              body: "Cocoon is available across a range of base options — fixed plinth, swivel, and return-to-base — allowing the chair to adapt to different operational and spatial needs. From gate lounges and waiting areas to quiet zones and premium airport interiors.",
              image: "images/collections/cocoon/feature/02.webp", alt: "Cocoon armchair, side profile showing base" },
          ].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
        skuImageBase="images/collections/cocoon/skus"
        headline="One armchair. Two bases."
        meta={[
          ["Design", "Alexander Lotersztain, 2025"],
          ["Sectors", "Aviation · Hospitality · Corporate · Civic · Education"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified (pending)"],
          ["Manufactured", "Australia, Poland"],
        ]}
        materials="Seating: Dunlop Enduro® foam over MDF substrate. Timber carcass forms the structural heart, paired with sprung seat construction for enhanced resilience and comfort over extended use. Continuous upholstery flows seamlessly from seat to back to arms in specifier's choice — COM (Customer's Own Material) or COL (Customer's Own Leather)."
        groups={[
          {
            label: "Armchair",
            items: [
              { sku: "CCN-01-A", name: "Armchair with plinth base", dims: "700 × 650 × 790" },
              { sku: "CCN-01-B", name: "Armchair with swivel base", dims: "700 × 650 × 790" },
            ],
          },
        ]}
        extras={[
          {
            label: "Plinth base (CCN-01-A)",
            rows: [
              { text: "Black laminate with ABS edge" },
              { text: "Laminated structural board construction", muted: true },
            ],
          },
          {
            label: "Swivel base (CCN-01-B)",
            note: "Powder-coated mild steel. Return-to-base functionality available.",
            rows: [
              { text: "Black powder coat" },
              { text: "White powder coat" },
              { text: "Return-to-base · optional", muted: true },
            ],
          },
        ]}
        finishHeadline="Plinth base in black laminate with ABS edge; swivel base in black or white powder-coated mild steel, with optional return-to-base. Upholstery in COM or COL."
      />

      {/* Specified in — removed per request */}

      <SpecifierDownloads collection="Cocoon" />

      <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 => ["caterpillar", "twig", "pipeline"].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="Cocoon" />
    </>
  );
}

window.CocoonDetail = CocoonDetail;