/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * CoralDetail — Coral (2007). Define thread.
 * LDPE rotomoulded sculptural lighting. E27 lampholder, 6W LED globe.
 * Hospitality interior. GECA + UL listed components.
 */

const { useState: useStateCrl, useEffect: useEffectCrl } = React;

const CRL_SLIDES_BASE = [
  { title: "Coral", image: "images/collections/coral/hero/01.jpg",     pos: "center 38%" },
  { title: "Coral", image: "images/collections/coral/hero/02.png",   pos: "center 42%" },
  { title: "Coral", image: "images/collections/coral/hero/03.jpg", pos: "center center" },
  { title: "Coral", image: "images/collections/coral/hero/04.jpg",     pos: "center 26%" },
];
const CRL_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("coral", "hero", CRL_SLIDES_BASE) : CRL_SLIDES_BASE;

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

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

  const s = CRL_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" }}>
      {CRL_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 }}>
        {CRL_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 CoralDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <CoralCarousel />
      <PageIntro
        eyebrow="Coral · Alexander Lotersztain, 2007"
        title="A sculptural light of organic form and diffused glow."
        body="Coral is a sculptural lighting collection drawn from the geometric forms of underwater life. Manufactured from rotomoulded low-density polyethylene (LDPE), Coral emits a gentle, diffused glow that brings a welcoming ambience to the spaces it occupies — an object of substance and quiet beauty."
        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/coral/pillars/01.jpg", alt: "Coral cluster over the marble bar at Stokehouse Q", caption: "01 · In service" },
              { src: "images/collections/coral/pillars/02.jpg", alt: "Coral · modules joined into a glowing cluster", caption: "02 · Cluster" },
              { src: "images/collections/coral/pillars/03.jpg", alt: "Coral reflected in the Stokehouse Q signage", caption: "03 · Detail" },
            ]}
            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" }}>
              From a single piece to an architectural cluster.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Scalable in size and available in a wide range of configurations, Coral adapts to interiors of varying scale and intent. From single-piece feature installations to clustered, geometric arrangements, the collection brings organic character and an atmospheric register to hospitality, corporate and civic 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 Coral 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 Coral together.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 48 : 40 }}>
          {[
            { no: "01", kicker: "Form", title: "Ocean-drawn, distilled.",
              body: "Coral's silhouette is drawn from the intricate patterns of ocean life, translated into a refined organic language. Manufactured from rotomoulded LDPE — a mono-material that is 100% recyclable — the shape is distilled rather than literal, holding a quiet, architectural presence that defers to the surrounding design.",
              image: "images/collections/coral/feature/01.jpg", alt: "Coral single module, illuminated", pos: "center 42%" },
            { no: "02", kicker: "Glow", title: "Soft, diffused, atmospheric.",
              body: "Coral emits a gentle, diffused glow designed to create an inviting, atmospheric quality. The translucent properties of the LDPE shell soften and disperse the light from within, supporting a relaxed ambience well suited to hospitality, lounge and reception environments. Even when unlit, Coral holds presence as a substantive object in its own right.",
              image: "images/collections/coral/feature/02.jpg", alt: "Coral light-sculpture glowing in a darkened room", pos: "center center" },
            { no: "03", kicker: "Co-design", title: "Scaled to the architectural vision.",
              body: "Coral is fully adaptable in scale and configuration, developed in close collaboration with designers and architects to meet the desired look, feel and spatial intent of each project. Derlot works directly with project teams to refine size, arrangement and composition — ensuring Coral integrates seamlessly into the architectural vision rather than sitting apart from it.",
              image: "images/collections/coral/feature/03.jpg", alt: "Coral cluster scaled across the Stokehouse Q interior", pos: "center 30%" },
          ].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: "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: 32 }}>
          {[
            { slug: "project-stokehouse",   name: "Stokehouse Q",          city: "Brisbane, AUS", year: 2018, category: "Hospitality", image: "images/collections/coral/feature/03.jpg", pos: "center 28%" },
            { slug: "project-buho",         name: "Buho Cocina y Cantina", city: "Honolulu, USA", year: 2014, category: "Hospitality", image: "images/collections/coral/hero/01.jpg",        pos: "center 38%" },
            { slug: "project-ipswich-court", name: "Ipswich Courthouse",    city: "Ipswich, AUS",  year: 2022, category: "Civic",       image: "images/collections/coral/feature/04.png",     pos: "center 32%" },
          ].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: "3/2", background: "#e4e2da", overflow: "hidden" }}>
                <img src={p.image} srcSet={window.IMG && window.IMG.srcsetFor(p.image)} sizes={window.IMG && window.IMG.sizes()} alt={`Coral 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/coral/skus"
        headline="One pendant module. Endless sculpture."
        meta={[
          ["Design", "Alexander Lotersztain, 2007"],
          ["Sectors", "Hospitality · Corporate · Civic · Retail"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified · UL listed components"],
          ["Manufactured", "Australia"],
          ["Electrical", "E27 120/240V lampholder · 6W LED globe supplied"],
          ["Light temperature", "Cool, neutral or warm white"],
        ]}
        materials="LDPE plastic (translucent), rotomoulded as a single pour. Mono-material construction, 100% recyclable. The translucent shell softens and disperses the light source from within."
        groups={[{
          label: "Pendant lighting",
          items: [
            { sku: "CRL-01", name: "Single pendant module",      dims: "Ø 380 × 460" },
            { sku: "CRL-02", name: "Light sculpture (3+ units)", dims: "Variable — see notes" },
          ],
        }]}
        extras={[{
          label: "Configuration",
          note: "CRL-02 is a light sculpture constructed using a minimum of three CRL-01 units; dimensions vary by arrangement.",
          rows: [
            { text: "Single piece · feature installation" },
            { text: "Clustered · geometric arrangement, 3+ units" },
            { text: "Custom planning · contact Derlot directly for sculpture configuration assistance.", muted: true },
          ],
        }]}
        finishHeadline="Translucent LDPE as standard. 6W LED supplied with choice of cool, neutral or warm white temperature."
      />

      <SpecifierDownloads collection="Coral" />

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

window.CoralDetail = CoralDetail;