/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * SeedDetail — Seed (2013).
 *
 * Designer: Alexander Lotersztain. A family of voluptuous, graduated
 * ottomans for hospitality, corporate, civic, education and retail
 * interiors — joined by a circular side table and a coat stand on the
 * same Ø380 mm circular base. Indoor only. GECA certified, manufactured
 * in Australia.
 *
 * 7 SKUs · 5 ottomans (XS / S / M / L / XL @ 420H) + side table + coat stand.
 *
 * No bespoke imagery yet — placeholders use related-thread tiles.
 */

const { useState: useStateSed, useEffect: useEffectSed } = React;

const SED_SLIDES_BASE = [
  { title: "Seed", image: "images/collections/seed/hero/01.png", pos: "center 62%" },
  { title: "Seed", image: "images/collections/seed/hero/02.jpg",  pos: "center 82%" },
  { title: "Seed", image: "images/collections/seed/hero/03.jpg", pos: "center center" },
];
const SED_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("seed", "hero", SED_SLIDES_BASE) : SED_SLIDES_BASE;

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

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

  const s = SED_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" }}>
      {SED_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 52%, rgba(26,25,23,0.5) 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 }}>
        {SED_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.45)",
              border: "none", cursor: "pointer", padding: 0, transition: "width 320ms ease, background 320ms ease" }} />
        ))}
      </div>
    </section>
  );
}

function SeedDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <SeedCarousel />

      <PageIntro
        eyebrow="Seed · Alexander Lotersztain, 2013"
        title="A family of voluptuous ottomans for casual public and hospitality settings."
        body="Seed takes its name and its form from the seed itself — the small, voluptuous origin of life and growth, reinterpreted as a family of ottomans for contract, hospitality and public interiors. Generous, gently rounded and quietly fertile in feeling, Seed offers a casual resting place that brings warmth and organic character to the rooms it joins."
        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/seed/cover.jpg", alt: "Seed ottomans in graduated sizes and colours, top-down", caption: "01 · The family" },
              { src: "images/collections/seed/pillars/02.jpg",  alt: "Seed ottoman with the circular oak side table",        caption: "02 · Side table" },
              { src: "images/collections/seed/pillars/03.jpg",   alt: "Seed coat stand in black and white",                  caption: "03 · Coat stand" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Dwell · 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" }}>
              A standalone object, or a layered cluster.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              The collection comes in a range of sizes, working equally well as a standalone object or grouped into playful, layered arrangements. Seed's organic form softens architectural environments while standing up to the comfort and durability demands of commercial use — corporate breakout, hospitality lounges, civic foyers, education and retail.
            </p>
          </div>
        </div>
      </section>

      {/* Three features — straight from the official overview */}
      <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 Seed 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 reasons Seed earns its place.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            {
              no: "01",
              kicker: "Family",
              title: "A family in multiple sizes.",
              body: "Seed is offered across five graduated sizes — XS through XL, all at the same 420 mm height. Smaller pieces work for intimate corner moments and quieter pauses; larger pieces anchor open-plan environments and shared lounges. The shared form language carries across each size, so multiple pieces specified together read as part of a unified family.",
              image: "images/collections/seed/cover.jpg",
              alt: "Seed family — five graduated sizes and colours",
            },
            {
              no: "02",
              kicker: "Form",
              title: "The form of a seed, generously drawn.",
              body: "The silhouette draws directly from the natural form of a seed — voluptuous, gently rounded, full of soft potential. The reference gives the collection its character without literalism: Seed reads as architectural rather than figurative, but the lineage to nature is honest and visible in every curve. Character emerges from proportion and curve rather than added detail.",
              image: "images/collections/seed/feature/01.jpg",
              alt: "Seed — voluptuous silhouette and leather seam detail",
            },
            {
              no: "03",
              kicker: "Versatile",
              title: "Standalone object or layered cluster.",
              body: "On its own, the form makes itself felt as an architectural element within a room. Grouped — in pairs, clusters or scattered arrangements — Seed creates collaborative seating zones that invite informal social use. The result is an object that scales from a single accent through to a full-room composition of varied sizes and orientations.",
              image: "images/collections/seed/hero/02.jpg",
              alt: "Seed clustered as informal seating, IPC Shopping Centre",
            },
          ].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>

      {/* Project in use */}
      <section style={{ padding: isMobile ? "64px 20px" : "120px max(24px, 3vw)", maxWidth: 1440, margin: "0 auto" }}>
        <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 24 : 32 }}>Project in use</div>
        <div
          onClick={() => setScreen && setScreen("project-ipc")}
          role="link" tabIndex={0}
          onKeyDown={(e) => { if (e.key === "Enter" && setScreen) setScreen("project-ipc"); }}
          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/collections/seed/hero/02.jpg" alt="Seed ottomans at IPC Shopping Centre, Selangor" loading="lazy"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 60%", 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" }}>IPC Shopping Centre</div>
              <div style={{ fontSize: 11, color: "#6c6862", letterSpacing: "0.12em", textTransform: "uppercase" }}>2018</div>
            </div>
            <div style={{ fontSize: 13, color: "#6c6862", marginTop: 8, letterSpacing: "0.02em" }}>Selangor, Malaysia</div>
            <div style={{ fontSize: 13, color: "#6c6862", marginTop: 4, letterSpacing: "0.02em" }}>Retail</div>
            <p style={{ fontSize: isMobile ? 14 : 15, lineHeight: 1.6, color: "#1a1917", margin: "18px 0 0 0", maxWidth: "40ch" }}>
              Seed anchors the family rest zones — clustered with Prisma and Tetromino Soft across the centre's renewed retail commons.
            </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/seed/skus"
        headline="Five ottomans. One side table. One coat stand."
        meta={[
          ["Design", "Alexander Lotersztain, 2013"],
          ["Sectors", "Hospitality · Corporate · Civic · Education · Retail"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Ottomans built on a Dunlop Enduro® foam with MDF substrate, upholstered in Customer's Own Material (COM) and/or Customer's Own Leather (COL). Connectors supplied with each module for linking; power-unit integration available within seating modules. Side table top in veneered particle board on a powder-coated mild-steel base. Coat stand on a powder-coated mild-steel base."
        groups={[
          {
            label: "Ottomans · 420 mm height",
            note: "Five graduated sizes, consistent height across the family.",
            items: [
              { sku: "SED-01", name: "Seed ottoman · XS",   dims: "585 × 585 × 420H" },
              { sku: "SED-02", name: "Seed ottoman · S",    dims: "785 × 785 × 420H" },
              { sku: "SED-03", name: "Seed ottoman · M",    dims: "985 × 985 × 420H" },
              { sku: "SED-04", name: "Seed ottoman · L",    dims: "1185 × 1185 × 420H" },
              { sku: "SED-05", name: "Seed ottoman · XL",   dims: "1385 × 1385 × 420H" },
            ],
          },
          {
            label: "Companions",
            note: "Side table and coat stand on a shared Ø 380 mm circular base.",
            items: [
              { sku: "SED-06", name: "Seed circular side table",   dims: "Ø 380 × 615H" },
              { sku: "SED-07", name: "Seed coat stand",            dims: "Ø 380 × 1560H" },
            ],
          },
        ]}
        extras={[
          {
            label: "Upholstery",
            note: "Specifier-selected.",
            rows: [
              { text: "COM · Customer's Own Material" },
              { text: "COL · Customer's Own Leather" },
            ],
          },
          {
            label: "Side table top",
            rows: [
              { text: "American Oak veneer" },
              { text: "Black stained veneer" },
              { text: "White laminate" },
              { text: "Black laminate" },
            ],
          },
          {
            label: "Steel finishes",
            note: "Side table base and coat stand.",
            rows: [
              { text: "White powder coat" },
              { text: "Black powder coat" },
              { text: "Custom colour" },
            ],
          },
          {
            label: "Power & connectors",
            rows: [
              { text: "Power-unit integration available within seating modules" },
              { text: "Modular connectors supplied with each ottoman for linking" },
            ],
          },
        ]}
        finishHeadline="A poetic yet contemporary aesthetic — voluptuous organic shapes that provide a casual and inviting feel."
      />

      <SpecifierDownloads collection="Seed" />

      <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 => ["mochi", "ivi", "tetromino-s"].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="Seed" />
    </>
  );
}

window.SeedDetail = SeedDetail;