/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * BoletDetail — Bolet (2012). Define thread.
 * Mushroom-form pendant lighting. Specified for Chester Street Bakery,
 * 110 Arthur Street, Yolk, Ping Pong. Hospitality interior. The
 * silhouette Derlot is best-known for in lighting.
 */

const { useState: useStateBlt, useEffect: useEffectBlt } = React;

const BLT_SLIDES_BASE = [
  { title: "Bolet", image: "images/collections/bolet/hero/01.jpg",  pos: "center 22%" },
  { title: "Bolet", image: "images/collections/bolet/hero/02.jpg",   pos: "center 40%" },
  { title: "Bolet", image: "images/collections/bolet/hero/03.jpg", pos: "center 32%" },
];
const BLT_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("bolet", "hero", BLT_SLIDES_BASE) : BLT_SLIDES_BASE;

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

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

  const s = BLT_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: "#1a1917" }}>
      {BLT_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" }}>
          {s.title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0, display: "flex", justifyContent: "center", gap: 10 }}>
        {BLT_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 BoletDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <BoletCarousel />
      <PageIntro
        eyebrow="Bolet · Alexander Lotersztain, 2008"
        title="A timeless pendant light of soft, elegant form."
        body="Bolet — meaning mushroom in Catalan — is a pendant light collection that takes its name from the gentle silhouette of its namesake while standing quietly on its own as a refined, timeless piece. Soft in form and elegant in proportion, Bolet brings a considered presence to the spaces it illuminates, complementing rather than competing with the interiors it inhabits."
        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/bolet/pillars/01.jpg",   alt: "Bolet in black powder coat over terrazzo stools", caption: "01 · Form" },
              { src: "images/collections/bolet/pillars/02.jpg",   alt: "Bolet in stone over a brutalist concrete bar",    caption: "02 · In service" },
              { src: "images/collections/bolet/pillars/03.jpg", alt: "Bolet cluster at Chester Street Bakery",         caption: "03 · Cluster" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Define · 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" }}>
              Adapts to interiors of varying scale.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Spun from aluminium and available in a range of sizes, Bolet adapts to interiors of varying scale and intent — from intimate hospitality settings to larger architectural environments. Fully customisable in colour, with the option of a single tone or differentiated interior and exterior powder coat finishes.
            </p>
          </div>
        </div>
      </section>

      <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 ideas that shape the pendant.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Soft, timeless form", title: "Reductive, not decorative.",
              body: "Bolet's silhouette is gentle, resolved, and complementary to a wide range of interiors. The form is reductive rather than decorative, designed to integrate quietly into hospitality, corporate, and architectural settings without dating or imposing. Elegance and timelessness are the design's guiding principles.",
              image: "images/collections/bolet/cover.jpg", alt: "Bolet · the pendant family across finishes" },
            { no: "02", kicker: "Spun aluminium", title: "Continuous surface, refined tactility.",
              body: "Each Bolet pendant is manufactured from spun aluminium, a process that delivers a smooth, continuous surface and refined tactile quality. The material is lightweight, durable, and well suited to long-term commercial and hospitality use. Available in a range of sizes — from individual feature pendants to clustered or repeated installations.",
              image: "images/collections/bolet/pillars/05.jpg", alt: "Bolet · spun aluminium body, BY.ARTISANS" },
            { no: "03", kicker: "Two-tone option", title: "Inner and outer specified separately.",
              body: "Bolet is fully customisable in colour, with the option of a single powder coat finish or differentiated interior and exterior tones. The two-tone specification allows the inner surface to softly diffuse light in one shade while the outer shell holds a complementary or contrasting expression — giving designers a direct lever to tune the pendant to its interior.",
              image: "images/collections/bolet/pillars/06.jpg", alt: "Bolet · white exterior, yellow interior at Derlot HQ" },
          ].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>

      {/* 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 style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 32 : 32 }}>
          {[
            { slug: "project-by-artisans",       name: "BY.ARTISANS",             city: "Brisbane, AUS", year: 2024, category: "Retail",      image: "images/collections/bolet/hero/01.jpg",     pos: "center 35%" },
            { slug: "project-chester-bakery",    name: "Chester Street Bakery",   city: "Brisbane, AUS", year: 2013, category: "Hospitality", image: "images/collections/bolet/pillars/07.jpg", pos: "center 30%" },
            { slug: "project-chester-residence", name: "Chester Street Residence", city: "Brisbane, AUS", year: 2012, category: "Residential", image: "images/collections/bolet/hero/03.jpg",     pos: "center 40%" },
          ].map((p) => (
            <div key={p.slug}
              onClick={() => setScreen && setScreen(p.slug)}
              role="link" tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter" && setScreen) setScreen(p.slug); }}
              style={{ cursor: "pointer" }}>
              <div style={{ aspectRatio: "4/5", background: "#e4e2da", overflow: "hidden" }}>
                <img src={p.image} srcSet={window.IMG && window.IMG.srcsetFor(p.image)} sizes={window.IMG && window.IMG.sizes()} alt={`Bolet at ${p.name}`} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: p.pos || "center", display: "block" }} />
              </div>
              <div style={{ height: "0.5px", background: "rgba(26,25,23,0.18)", marginTop: 14 }} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12, marginTop: 12 }}>
                <div style={{ fontSize: 16, color: "#1a1917" }}>{p.name}</div>
                <div style={{ fontSize: 12, color: "#6c6862", letterSpacing: "0.04em" }}>{[p.city, p.year].filter(Boolean).join(" · ")}</div>
              </div>
              <div style={{ fontSize: 12, color: "#6c6862", marginTop: 4, letterSpacing: "0.04em" }}>{p.category}</div>
            </div>
          ))}
        </div>
      </section>

      <SpecificationSection
        skuImageBase="images/collections/bolet/skus"
        headline="Four pendants. Ø180 to Ø600. Single or two-tone powder coat."
        meta={[
          ["Design", "Alexander Lotersztain, 2008"],
          ["Sectors", "Hospitality · Corporate · Civic · Retail"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "UL listed components"],
          ["Manufactured", "Australia"],
          ["Electrical", "E27 120/240V · max 60W globe"],
          ["Cable", "1.8 m standard · longer on request"],
        ]}
        materials="Spun aluminium shade with powder-coat finish. Fully customisable in colour — single tone, or differentiated interior and exterior powder coat finishes. UL listed electrical components; E27 120/240 V lampholder rated to a maximum 60 W globe."
        groups={[{
          label: "Pendants · BLT-01 to BLT-04",
          note: "Progressive sizing from Ø180 to Ø600 mm. Heights range 160–350 mm.",
          items: [
            { sku: "BLT-01", name: "Small pendant",        dims: "Ø180 × 160" },
            { sku: "BLT-02", name: "Medium pendant",       dims: "Ø270 × 235" },
            { sku: "BLT-03", name: "Large pendant",        dims: "Ø400 × 350" },
            { sku: "BLT-04", name: "Extra-large pendant",  dims: "Ø600 × 300" },
          ],
        }]}
        extras={[
          {
            label: "Size applications",
            rows: [
              { text: "Small · compact accent lighting, task lighting." },
              { text: "Medium · standard residential and hospitality scale." },
              { text: "Large · statement piece for larger spaces." },
              { text: "Extra-large · architectural lighting for commercial and civic environments.", muted: true },
            ],
          },
          {
            label: "Finishes",
            rows: [
              { text: "Single-tone · white, black, or custom powder coat applied inside and out." },
              { text: "Two-tone · interior and exterior specified separately." },
              { text: "Custom colour available on any powder coat — confirm with Derlot.", muted: true },
            ],
          },
        ]}
        finishHeadline="White, black, or custom powder coat — single or two-tone specification."
      />

      <SpecifierDownloads collection="Bolet" />

      <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 => ["coral", "twig", "stump"].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="Bolet" />
    </>
  );
}

window.BoletDetail = BoletDetail;