/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * GuellDetail — Guell (2010). Configure thread.
 * Modular upholstered system: lounge units, ottomans, side tables, civic
 * waiting / hospitality lobby. Indoor only.
 */

const { useState: useStateGul, useEffect: useEffectGul } = React;

const GUL_SLIDES_BASE = [
  { title: "Guell", image: "images/collections/guell/hero/01.webp" },
  { title: "Guell", image: "images/collections/guell/hero/02.webp" },
  { title: "Guell", image: "images/collections/guell/hero/03.webp", pos: "center bottom" },
];
const GUL_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("guell", "hero", GUL_SLIDES_BASE) : GUL_SLIDES_BASE;

function GuellCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateGul(0);
  const [paused, setPaused] = useStateGul(false);
  useEffectGul(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % GUL_SLIDES.length), 7000);
    return () => clearInterval(id);
  }, [paused]);
  return (
    <section onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
      style={{ position: "relative", width: "100%", aspectRatio: "16 / 9",
      maxHeight: isMobile ? "82vh" : "90vh", minHeight: isMobile ? 460 : 560,
      overflow: "hidden", background: "#1a1917" }}>
      {GUL_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" }}>
          {GUL_SLIDES[i].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 36 : 44, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 10 }}>
        {GUL_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 GuellDetail() {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <GuellCarousel />
      <PageIntro
        eyebrow="Guell · Alexander Lotersztain, 2010"
        title="A modular bench system drawn from the curves of Park Güell."
        body="Inspired by the serpentine forms that frame Gaudí's Park Güell in Barcelona. Drawing on the original park's principle of enhancing rather than imposing on its surroundings, Guell brings curved, clean lines and open, flowing geometry to the spaces it occupies — adapting playfully to the architecture and landscape that hosts it."
        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/guell/pillars/01.webp",        alt: "Guell at 4 Times Square",       caption: "01 · In service" },
              { src: "images/collections/guell/pillars/02.webp", alt: "Guell · faceted upholstery detail", caption: "02 · Surface" },
              { src: "images/collections/guell/pillars/03.webp",     alt: "Guell · oak side-table detail",    caption: "03 · Table" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Configure · 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" }}>
              Modular logic, integrated connectivity.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Built around modular logic and integrated connectivity, Guell coalesces with a wide range of environments — making considered seating effortless to specify and reconfigure. 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 — what Guell does */}
      <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 Guell 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: "Curved, flowing geometry.",
              body: "A smooth, curved language softens architectural environments and creates continuity between seating, space and landscape. The form moves naturally between linear, curved and serpentine arrangements — following the contours of its setting rather than working against them.",
              image: "images/collections/guell/feature/01.webp",
              alt: "Guell · curved flowing form",
            },
            {
              no: "02",
              kicker: "Posture",
              title: "Two seating postures — lounge and upright.",
              body: "Configurable across two distinct postures: a relaxed lounge for extended dwell time, and an upright position for active, transit-style or task-oriented seating. Specified individually or set back-to-back — letting a single installation serve quiet pauses, active waiting, focused work or casual gathering within one continuous form.",
              image: "images/collections/guell/feature/02.webp",
              alt: "Guell · lounge and upright postures",
            },
            {
              no: "03",
              kicker: "Customisable",
              title: "Tailored to the spatial intent of each project.",
              body: "Fully customisable in configuration and finish. Module count, curvature and finish are specified to suit the brief — supporting everything from intimate, contained arrangements to expansive, sweeping installations across civic, corporate, hospitality, aviation and education interiors.",
              image: "images/collections/guell/feature/03.webp",
              pos: "40% center",
              alt: "Guell · custom configuration",
            },
          ].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>

      <SpecificationSection
        skuImageBase="images/collections/guell/skus"
        headline="Fully customisable. The configurations below are a starting point — get in touch to tailor to your project."
        meta={[
          ["Design", "Alexander Lotersztain, 2010"],
          ["Sectors", "Civic · Hospitality · Corporate · Aviation · Education"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Upholstered elements in Dunlop Enduro® foam over MDF substrate, upholstered in Customer's Own Material (COM) or Leather (COL). Side-table base in powder-coated mild steel; top in veneered MDF or laminated structural board with matching ABS edge. Each seating module supplied with connectors for linking. Power and data integration available."
        groups={[
          {
            label: "Curved seat modules",
            note: "30° curved · upright posture · seat height 450 mm · inner radius 530 mm, outer 1050 mm.",
            items: [
              { sku: "GUL-01", name: "30° curved seat module · small", dims: "540 × 545 × 790" },
              { sku: "GUL-02", name: "30° curved seat module · large", dims: "555 × 810 × 790" },
            ],
          },
          {
            label: "Straight seat modules",
            note: "Upright posture · seat height 450 mm.",
            items: [
              { sku: "GUL-03", name: "Straight seat module · standard", dims: "520 × 600 × 790" },
              { sku: "GUL-04", name: "Straight seat module · large",    dims: "520 × 1800 × 790" },
            ],
          },
          {
            label: "Curved ottomans",
            note: "30° curved · 450 mm seat height · matches curved seat radii.",
            items: [
              { sku: "GUL-05", name: "30° curved ottoman · small", dims: "540 × 545 × 450" },
              { sku: "GUL-06", name: "30° curved ottoman · large", dims: "555 × 810 × 450" },
            ],
          },
          {
            label: "Straight ottomans",
            note: "450 mm seat height.",
            items: [
              { sku: "GUL-07", name: "Straight ottoman · standard", dims: "520 × 600 × 450" },
              { sku: "GUL-08", name: "Straight ottoman · large",    dims: "520 × 1800 × 450" },
            ],
          },
          {
            label: "Curved loungers",
            note: "30° curved · lounge posture · seat height 430 mm · inner radius 285 mm, outer 1050 mm.",
            items: [
              { sku: "GUL-09", name: "30° curved lounger · small", dims: "770 × 545 × 790" },
              { sku: "GUL-10", name: "30° curved lounger · large", dims: "800 × 940 × 790" },
            ],
          },
          {
            label: "Straight loungers",
            note: "Lounge posture · seat height 430 mm.",
            items: [
              { sku: "GUL-11", name: "Straight lounger · standard", dims: "765 × 600 × 790" },
              { sku: "GUL-12", name: "Straight lounger · large",    dims: "765 × 1800 × 790" },
            ],
          },
          {
            label: "Curved lounger ottomans",
            note: "30° curved · 430 mm height · matches curved lounger radii.",
            items: [
              { sku: "GUL-13", name: "30° curved lounger ottoman · small", dims: "770 × 545 × 430" },
              { sku: "GUL-14", name: "30° curved lounger ottoman · large", dims: "800 × 940 × 430" },
            ],
          },
          {
            label: "Straight lounger ottomans",
            note: "430 mm height.",
            items: [
              { sku: "GUL-15", name: "Straight lounger ottoman · standard", dims: "765 × 600 × 430" },
              { sku: "GUL-16", name: "Straight lounger ottoman · large",    dims: "765 × 1800 × 430" },
            ],
          },
          {
            label: "Side table",
            note: "Circular side table — 15\" diameter.",
            items: [
              { sku: "GUL-17", name: "Circular side table", dims: "Ø 380 × 615" },
            ],
          },
        ]}
        extras={[
          {
            label: "Upholstery",
            rows: [
              { text: "COM · Customer's Own Material" },
              { text: "COL · Customer's Own Leather" },
            ],
          },
          {
            label: "Side table finishes",
            rows: [
              { text: "Base · white, black or custom powder coat" },
              { text: "Top · American Oak veneer" },
              { text: "Top · black-stained veneer" },
              { text: "Top · white or black laminate" },
            ],
          },
          {
            label: "Connectivity & linking",
            rows: [
              { text: "Each seating module supplied with connectors for linking." },
              { text: "Power and data integration available on specification." },
              { text: "Modular nature allows infinite configurations.", muted: true },
            ],
          },
        ]}
        finishHeadline="COM / COL upholstery and side-table finishes specified per project."
      />

      <SpecifierDownloads collection="Guell" />

      {/* Specified in — 3-up (real Guell installations) */}
      <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={{ marginBottom: isMobile ? 24 : 36 }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 12 }}>Specified in</div>
          <h2 style={{ fontFamily: "var(--font-display, Poppins, sans-serif)", fontWeight: 500, fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2.2vw, 32px)", lineHeight: 1.12, letterSpacing: "-0.01em", color: "#1a1917", margin: 0, maxWidth: "26ch", textWrap: "balance" }}>
            From a Manhattan tower to a university campus.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { name: "4 Times Square",          city: "New York, USA", year: 2019, category: "Workplace",      image: "images/collections/guell/feature/04.webp", pos: "center" },
            { name: "Macquarie University",     city: "Sydney, AUS",   year: 2017, category: "Education",      image: "images/collections/guell/feature/05.webp" },
            { name: "Urbannest",               city: "Brisbane, AUS", year: null, category: "Student living", image: "images/collections/guell/feature/06.webp" },
          ].map((p) => (
            <div key={p.name}>
              <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={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", alignItems: "baseline", justifyContent: "space-between", marginTop: 12, gap: 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", letterSpacing: "0.04em", marginTop: 4 }}>{p.category}</div>
            </div>
          ))}
        </div>
      </section>

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

window.GuellDetail = GuellDetail;