/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * FlatlinerWallDetail — Flatliner Wall (2016). Define thread.
 * Wall-mounted powder-coated mild steel coat-rack / object hanger system.
 */

const FLW_SLIDES = [{ title: "Flatliner Wall", image: "images/_legacy/collections/picket.webp" }];

function FlatlinerWallCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  return (
    <section style={{ position: "relative", width: "100%", height: isMobile ? "76vh" : "78vh",
      minHeight: isMobile ? 520 : 620, maxHeight: isMobile ? "none" : 820,
      overflow: "hidden", background: "#1a1917" }}>
      <img src={FLW_SLIDES[0].image} onError={(e)=>{ e.currentTarget.style.display='none'; }}
        alt={FLW_SLIDES[0].title} loading="eager"
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      <div style={{ position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(26,25,23,0.0) 0%, rgba(26,25,23,0.65) 100%), repeating-linear-gradient(135deg, rgba(245,243,239,0.04) 0 2px, transparent 2px 18px)",
        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" }}>
          {FLW_SLIDES[0].title}
        </h3>
      </div>
    </section>
  );
}

function FlatlinerWallDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <FlatlinerWallCarousel />
      <PageIntro
        eyebrow="Flatliner Wall · Alexander Lotersztain, 2006"
        title="A refined, wall-mounted shelving system with a minimal steel silhouette."
        body="Flatliner Wall is a refined wall-mounted shelving and display system that elevates the everyday objects it holds. A sharp, minimal silhouette gives the collection a confident architectural presence, while the steel construction delivers structural strength and long-term performance."
        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/_legacy/collections/picket.webp", alt: "Flatliner Wall · shallow display shelf",   caption: "01 · Shallow" },
              { src: "images/_legacy/collections/picket.webp", alt: "Flatliner Wall · deep display shelf",      caption: "02 · Deep" },
              { src: "images/_legacy/collections/picket.webp", alt: "Flatliner Wall · stacked configuration",   caption: "03 · Stack" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Define · 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" }}>
              Quietly iconic in its simplicity.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Customisable in length, Flatliner Wall scales to suit a range of interiors — from corporate and hospitality settings to civic, retail and residential environments. The combination of flexible modularity and reductive form results in a piece that is quietly iconic in its simplicity.
            </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 Flatliner Wall 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: "Form", title: "Minimal silhouette, architectural presence.",
              body: "Clean lines and a reductive silhouette form a deliberate backdrop for the objects on display. The design is restrained rather than decorative — letting the contents take centre stage while the shelving itself integrates quietly into the architecture of the room. A piece that holds presence without competing for it.",
              image: "images/_legacy/collections/picket.webp", alt: "Flatliner Wall · minimal silhouette" },
            { no: "02", kicker: "Construction", title: "Steel in service of the form.",
              body: "Steel construction allows Flatliner Wall to maintain its sharp, slim profile without compromising strength. The material is left to express itself through proportion and finish rather than detail or ornament — a direct expression of the design's reductive intent.",
              image: "images/_legacy/collections/picket.webp", alt: "Flatliner Wall · powder-coat detail" },
            { no: "03", kicker: "Customisable", title: "Length tailored to the brief.",
              body: "Configurable in length to match the proportions of each project. Specifiers can tailor the system to the dimensions of the wall, the rhythm of the interior, and the volume of objects to be displayed — allowing a single product to operate at any scale, from a discreet domestic-sized unit to a continuous architectural run.",
              image: "images/_legacy/collections/picket.webp", alt: "Flatliner Wall · continuous architectural run" },
          ].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
        headline="Two depths. Two mounting variants. Custom length."
        meta={[
          ["Design", "Alexander Lotersztain, 2006"],
          ["Sectors", "Hospitality · Corporate · Civic · Retail"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
          ["Length range", "1000–2980 mm (custom within range)"],
        ]}
        materials="Powder-coated mild steel. Top edge of each unit clips onto the bottom edge of the unit above, allowing vertical stacking. Bracket variants (FLW-01, FLW-03) provide the structural mount for the top shelf or single-row installations; non-bracket variants (FLW-02, FLW-04) sit in middle or lower positions of a stack."
        groups={[
          {
            label: "Shallow display shelves · 60 mm",
            note: "Ideal for lightweight display items.",
            items: [
              { sku: "FLW-01", name: "Flatliner Wall · shallow shelf with mounting bracket",  dims: "1000–2980 × 435 × 130" },
              { sku: "FLW-02", name: "Flatliner Wall · shallow shelf, no bracket",            dims: "1000–2980 × 435 × 130" },
            ],
          },
          {
            label: "Deep display shelves · 250 mm",
            note: "Suitable for books and larger objects.",
            items: [
              { sku: "FLW-03", name: "Flatliner Wall · deep shelf with mounting bracket",     dims: "1000–2980 × 435 × 315" },
              { sku: "FLW-04", name: "Flatliner Wall · deep shelf, no bracket",               dims: "1000–2980 × 435 × 315" },
            ],
          },
        ]}
        extras={[
          {
            label: "Stacking",
            note: "Modular stacking for flexible configuration.",
            rows: [
              { text: "With bracket (FLW-01, FLW-03) · top shelf or single-row mounting" },
              { text: "Without bracket (FLW-02, FLW-04) · middle or lower positions in a stack" },
              { text: "Custom length · contact Derlot for configuration planning.", muted: true },
            ],
          },
          {
            label: "Powder-coat finishes",
            rows: [
              { text: "White" },
              { text: "Black" },
              { text: "Custom · any colour available" },
            ],
          },
        ]}
        finishHeadline="White, black or custom powder-coat across all four SKUs."
      />
      <SpecifierDownloads collection="Flatliner Wall" />
      <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 => ["fit", "kink", "kono"].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="Flatliner Wall" />
    </>
  );
}

window.FlatlinerWallDetail = FlatlinerWallDetail;