/* global React, useViewport, PageIntro, EditorialCarousel, ThreadBadge,
           SpecificationSection, SpecifierDownloads, EnquiryBlock */
/*
 * HomeworkDetail — Homework (2016). Endure + Configure.
 * The largest education range Derlot makes — soft seating, study desks,
 * occasional tables, accessory and AV modules. 30+ SKUs.
 *
 * Real imagery — Florian Groehn (studio) + Tom Ross (USC) + 61 Mary Street.
 */

const { useState: useStateHmw, useEffect: useEffectHmw } = React;

const HMW_SLIDES_BASE = [
  { title: "Homework", image: "images/collections/homework/hero/01.webp",    pos: "center 72%" },
  { title: "Homework", image: "images/collections/homework/hero/02.webp",   pos: "center 78%" },
  { title: "Homework", image: "images/collections/homework/hero/03.webp",   pos: "center" },
  { title: "Homework", image: "images/collections/homework/hero/04.webp",   pos: "center 76%" },
];
const HMW_SLIDES = (window.IMG && window.IMG.extend) ? window.IMG.extend("homework", "hero", HMW_SLIDES_BASE) : HMW_SLIDES_BASE;

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

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

  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" }}>
      {HMW_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 55%, 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" }}>
          {HMW_SLIDES[0].title}
        </h3>
      </div>
      <div style={{ position: "absolute", bottom: isMobile ? 40 : 46, left: 0, right: 0,
        display: "flex", justifyContent: "center", gap: 6 }}>
        {HMW_SLIDES.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} aria-label={`Slide ${idx + 1}`}
            style={{ width: idx === i ? 18 : 5, height: 5, borderRadius: 3, border: "none", padding: 0,
              cursor: "pointer", background: idx === i ? "#f5f3ef" : "rgba(245,243,239,0.5)",
              transition: "width 300ms ease, background 300ms ease" }} />
        ))}
      </div>
    </section>
  );
}

function HomeworkDetail({ setScreen }) {
  const vw = useViewport();
  const isMobile = vw < 720;
  return (
    <>
      <HomeworkCarousel />
      <PageIntro
        eyebrow="Homework · Alexander Lotersztain, 2016"
        title="A seating and table collection for co-working, study and hybrid interiors."
        body="A collection that challenges the clear-cut boundary between workspace and home — a deliberate compound bringing the comfort and warmth of a residential setting into the workplace. Designed for the way contemporary co-working, education and hybrid environments are used: fluid, intentional, and rarely tied to a single posture or task."
        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/homework/pillars/01.webp", alt: "Homework · high-back sofa, armchair and oak table", caption: "01 · Lounge setting" },
              { src: "images/collections/homework/pillars/02.webp", alt: "Homework · sofa and armchair on timber legs",       caption: "02 · Seating family" },
              { src: "images/collections/homework/pillars/03.webp", alt: "Homework · companion table behind high-back booth",  caption: "03 · Companion table" },
            ]}
            aspect="3/4"
          />
          <div style={{ alignSelf: "center" }}>
            <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#6c6862", fontWeight: 500, marginBottom: 14 }}>Endure · 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" }}>
              Upholstered seating and companion tables, in conversation.
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.55, color: "#1a1917", maxWidth: "46ch", margin: 0, fontWeight: 500 }}>
              Homework comprises both upholstered seating elements and companion tables, designed to work together as a coherent system. The tables sit within reach of the seating — supporting laptops and personal items without imposing a formal worktable register. The result is a collection that supports work without feeling like a workspace, and gathering without feeling like a lounge.
            </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 Homework 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: "Co-working & education", title: "Engineered for blurred working and learning environments.",
              body: "Homework is engineered for the specific demands of co-working environments and educational interiors — supporting active work, informal collaboration, quiet study and casual gathering with equal ease. The collection responds to the way contemporary learning and working spaces increasingly blur, replacing rigid task-specific furniture with a more adaptable approach. Suited to breakout zones, study lounges, library settings and hybrid workspaces, Homework supports productivity without enforcing a single way of using the space.",
              image: "images/collections/homework/feature/01.webp", pos: "center", alt: "Homework · high-back wing chair on a solid oak frame" },
            { no: "02", kicker: "Companion tables", title: "Seating and tables that work as a coherent system.",
              body: "The tables sit within reach of the seating — supporting laptops and personal items without imposing a formal worktable register. The companion approach allows specifiers to address an entire breakout, lounge or study zone within a single design language, rather than mixing distinct collections to bridge the seating-and-surface gap.",
              image: "images/collections/homework/feature/02.webp", alt: "Homework · timber companion shelf behind a high-back booth" },
            { no: "03", kicker: "Wooden leg structure", title: "Wooden legs as the structural element.",
              body: "Homework's wooden legs serve as the structural element of the collection, holding the upholstered seat, backrest and privacy screen together as a single integrated piece. The wood expresses material honesty while lifting the upholstered components clear of the floor — supporting easier cleaning, longer-term wearability, and a lighter visual register. The result is a piece where structure, material and form are all expressions of the same restrained design intent.",
              image: "images/collections/homework/feature/03.webp", alt: "Homework · solid timber leg detail with exposed fixings" },
          ].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: "22ch" }}>
                {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/homework/skus"
        headline="Thirty-five SKUs across seating, workstations and tables."
        meta={[
          ["Design", "Alexander Lotersztain, 2016"],
          ["Sectors", "Corporate · Education · Hospitality · Civic"],
          ["Environment", "Indoor"],
          ["Warranty", "5 year structural"],
          ["Certifications", "GECA certified"],
          ["Manufactured", "Australia"],
        ]}
        materials="Seating: Dunlop Enduro® foam over MDF substrate, upholstered in Customer's Own Material (COM) or Customer's Own Leather (COL). Legs: solid timber in American Oak, black-stained American Oak or American Walnut. Table tops: veneered MDF in matching finishes. Occasional table base: powder-coated mild steel. Each seating unit supplied with linking plates; underseat power available across the seating range; table-top power integration available for workstations and workbooths. Standard seat height 450 mm; standard table height 720 mm; raised back panel height 1280 mm."
        groups={[
          {
            label: "Single seaters",
            note: "Standard seat height 450 mm.",
            items: [
              { sku: "HMW-01", name: "Single seater · standard",        dims: "680 × 960 × 780H" },
              { sku: "HMW-02", name: "Single seater · standard variant", dims: "680 × 960 × 780H" },
            ],
          },
          {
            label: "Double seaters · standard height",
            note: "Linear seating, multiple depths. Standard seat height 450 mm.",
            items: [
              { sku: "HMW-03", name: "Double seater",                 dims: "680 × 1560 × 780H" },
              { sku: "HMW-04", name: "Double seater · variant",       dims: "680 × 1560 × 780H" },
              { sku: "HMW-05", name: "Double seater · narrow",        dims: "650 × 1500 × 780H" },
              { sku: "HMW-06", name: "Double seater · variant",       dims: "680 × 1500 × 780H" },
              { sku: "HMW-07", name: "Double seater · variant",       dims: "680 × 1530 × 780H" },
              { sku: "HMW-08", name: "Double seater · variant",       dims: "680 × 1530 × 780H" },
              { sku: "HMW-15", name: "Double seater · variant",       dims: "680 × 1560 × 780H" },
              { sku: "HMW-16", name: "Double seater · variant",       dims: "680 × 1560 × 780H" },
            ],
          },
          {
            label: "Double seaters · with back panel",
            note: "Raised back panel for privacy. Back panel height 1280 mm.",
            items: [
              { sku: "HMW-09", name: "Double seater with back panel",          dims: "680 × 1500 × 1280H" },
              { sku: "HMW-10", name: "Double seater with back panel · variant", dims: "680 × 1530 × 1280H" },
              { sku: "HMW-11", name: "Double seater with back panel · variant", dims: "680 × 1530 × 1280H" },
              { sku: "HMW-12", name: "Double seater with back panel · variant", dims: "680 × 1530 × 1280H" },
              { sku: "HMW-13", name: "Double seater with back panel · variant", dims: "680 × 1530 × 1280H" },
              { sku: "HMW-14", name: "Double seater with back panel · variant", dims: "680 × 1560 × 1280H" },
            ],
          },
          {
            label: "90° curved seaters",
            note: "Corner configurations on a 1450 × 1450 mm square footprint.",
            items: [
              { sku: "HMW-24", name: "90° curved seating module",                 dims: "1450 × 1450 × 780H" },
              { sku: "HMW-25", name: "90° curved seating module · variant",       dims: "1450 × 1450 × 780H" },
              { sku: "HMW-26", name: "90° curved seating module · variant",       dims: "1450 × 1450 × 780H" },
              { sku: "HMW-27", name: "90° curved seating with back panel",         dims: "1450 × 1450 × 1280H" },
              { sku: "HMW-28", name: "90° curved seating with back panel · variant", dims: "1450 × 1450 × 1280H" },
            ],
          },
          {
            label: "Workstations",
            note: "Integrated work surfaces. Table height 720 mm; seat height 450 mm.",
            items: [
              { sku: "HMW-51", name: "Single workstation with table top", dims: "930 × 1560 × 1280H" },
              { sku: "HMW-81", name: "Double workstation with table top", dims: "1300 × 1500 × 1280H" },
            ],
          },
          {
            label: "4-person workbooths",
            note: "Team collaboration spaces. Table height 720 mm; seat height 450 mm.",
            items: [
              { sku: "HMW-61", name: "4-person workbooth",                          dims: "1530 × 2260 × 780H" },
              { sku: "HMW-62", name: "4-person workbooth · variant",                dims: "1560 × 2260 × 780H" },
              { sku: "HMW-63", name: "4-person workbooth with back panels",          dims: "1530 × 2260 × 1280H" },
              { sku: "HMW-64", name: "4-person workbooth with back panels · variant", dims: "1560 × 2260 × 1280H" },
              { sku: "HMW-65", name: "4-person workbooth with back panels · variant", dims: "1560 × 2260 × 1280H" },
            ],
          },
          {
            label: "Tables & accessories",
            items: [
              { sku: "HMW-101",    name: "Circular occasional table",       dims: "Ø 650 × 450H · top at 315H" },
              { sku: "HMW-ACC-03", name: "Side table · standard",           dims: "650 × 300 × 350H" },
              { sku: "HMW-ACC-04", name: "Side table · wide",               dims: "650 × 600 × 350H" },
              { sku: "HMW-ACC-05", name: "Back table",                      dims: "1060 × 730 × 890H" },
              { sku: "HMW-ACC-08", name: "Back table · variant",            dims: "Refer to drawings" },
              { sku: "HMW-ACC-09", name: "Back table · variant",            dims: "Refer to drawings" },
            ],
          },
        ]}
        extras={[
          {
            label: "Upholstery",
            rows: [
              { text: "COM · Customer's Own Material" },
              { text: "COL · Customer's Own Leather" },
            ],
          },
          {
            label: "Timber finish · legs",
            rows: [
              { text: "American Oak" },
              { text: "Black-stained American Oak" },
              { text: "American Walnut" },
            ],
          },
          {
            label: "Table top finish · veneer",
            rows: [
              { text: "American Oak veneer on MDF" },
              { text: "Black-stained veneer on MDF" },
              { text: "American Walnut veneer on MDF" },
            ],
          },
          {
            label: "Occasional table base",
            rows: [
              { text: "White powder coat" },
              { text: "Black powder coat" },
            ],
          },
          {
            label: "Power & connectivity",
            rows: [
              { text: "Linking plates supplied with each seating unit." },
              { text: "Underseat power units available across the seating range." },
              { text: "Table-top power integration available for workstations and workbooths." },
            ],
          },
        ]}
        finishHeadline="COM/COL upholstery · oak, black-stained oak or walnut · veneered tops · powder-coated occasional base."
      />

      <SpecifierDownloads collection="Homework" />

      {/* Specified in — real Homework 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 university learning stair to corporate workplaces.
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(2, 1fr)", gap: isMobile ? 28 : 32 }}>
          {[
            { screen: "project-usc",            name: "University of the Sunshine Coast", city: "Sunshine Coast, AUS", year: 2020, category: "Education", image: "images/collections/homework/hero/03.webp", pos: "center" },
            { screen: "project-61-mary",         name: "61 Mary Street",                   city: "Brisbane, AUS",       year: 2022, category: "Workplace", image: "images/collections/homework/feature/04.webp", pos: "center" },
          ].map((p) => (
            <a key={p.screen} onClick={() => setScreen && setScreen(p.screen)} style={{ cursor: "pointer", display: "block", textDecoration: "none" }}>
              <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>
            </a>
          ))}
        </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 => ["fit", "ivi", "seed"].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="Homework" />
    </>
  );
}

window.HomeworkDetail = HomeworkDetail;