// ───────────── Work / Archive page ─────────────
const TWEAK_DEFAULTS_WORK = /*EDITMODE-BEGIN*/{
  "palette": "aurora",
  "grain": true
}/*EDITMODE-END*/;

const PROJECTS = [
  { id: "halocene", tag: "Brand", name: "Halocene", sub: "Audio hardware rebrand", year: "2026", industry: "Consumer hardware", color: "#FF7A4D", color2: "#C13B3B", shape: "wave",
    metrics: [{ k: "+247%", l: "DTC revenue" }, { k: "23 wks", l: "Strategy → launch" }, { k: "1.4M", l: "Launch reach" }],
    summary: "A complete identity refresh for a Sydney-based audio brand shipping into 14 markets. We rebuilt the strategy, designed a new visual language, shot a six-piece campaign and shipped a new commerce site.", what: ["Brand strategy", "Visual identity", "Packaging", "Launch film", "Commerce site"] },
  { id: "meinhaus", tag: "Site", name: "MeinHaus", sub: "Service-provider directory", year: "2025", industry: "Marketplace", color: "#3E60FF", color2: "#7B57FF", shape: "stack",
    metrics: [{ k: "8.4x", l: "Marketing ROAS" }, { k: "142k", l: "Listings on launch" }, { k: "97", l: "Lighthouse" }],
    summary: "A two-sided marketplace for German home services. We took a 5-month-old prototype and rebuilt it as a multilingual platform with native search, lead routing and a payments layer.", what: ["Product design", "Search & matching", "Next.js build", "Stripe Connect"] },
  { id: "wikistrings", tag: "Campaign", name: "Wikistrings", sub: "Guitar-string review platform", year: "2025", industry: "Editorial", color: "#1F1F1F", color2: "#3a3a3a", shape: "type",
    metrics: [{ k: "+412%", l: "Organic search" }, { k: "62k", l: "Reviews indexed" }, { k: "1.2s", l: "TTI" }],
    summary: "A specialist editorial platform for musicians. We designed a custom type system, built a fast headless CMS and shipped an SEO engine targeting 2,400 long-tail queries.", what: ["Editorial design", "Type system", "Headless CMS", "SEO engine"] },
  { id: "amps", tag: "Product", name: "AMPS Institute", sub: "Entrepreneurship education", year: "2024", industry: "EdTech", color: "#B5FD5B", color2: "#46E0A3", shape: "grid",
    metrics: [{ k: "+183%", l: "Course completion" }, { k: "12.4k", l: "Active learners" }, { k: "4.9", l: "NPS" }],
    summary: "A learning platform for first-time founders. We redesigned the curriculum architecture, built a Sanity-backed CMS for instructors, and shipped a cohort-aware progress system.", what: ["Product design", "Curriculum architecture", "Sanity build", "Cohort tooling"] },
  { id: "northvane", tag: "Brand", name: "Northvane", sub: "Boutique architecture firm", year: "2024", industry: "Architecture", color: "#0F1417", color2: "#243038", shape: "orb",
    metrics: [{ k: "+89%", l: "Qualified leads" }, { k: "11", l: "Award entries won" }, { k: "0.8s", l: "Avg. page load" }],
    summary: "A new identity and site for a Melbourne studio designing carbon-light homes. Restrained, monochrome system that lets the architecture do the talking.", what: ["Brand strategy", "Identity", "Photography direction", "Custom site"] },
  { id: "verdant", tag: "Campaign", name: "Verdant Co.", sub: "DTC skincare launch", year: "2023", industry: "Beauty / CPG", color: "#E7DCC2", color2: "#A28D62", shape: "leaf",
    metrics: [{ k: "$2.4M", l: "Launch revenue, 90d" }, { k: "62%", l: "Repeat rate" }, { k: "8.2x", l: "Paid ROAS" }],
    summary: "A from-scratch DTC launch for a clean-skin brand. We owned strategy, brand, e-commerce build and the first 90 days of paid + lifecycle marketing.", what: ["Naming & strategy", "Identity", "Shopify build", "Paid + lifecycle"] },
  { id: "tideflow", tag: "Site", name: "Tideflow", sub: "Coastal real estate", year: "2023", industry: "Real estate", color: "#0B7A8C", color2: "#1FB6C6", shape: "wave",
    metrics: [{ k: "+218%", l: "Enquiries" }, { k: "$48M", l: "Inventory live" }, { k: "94", l: "Lighthouse" }],
    summary: "A flagship property site for a Byron Bay agency. Hand-shot photography, a custom listing CMS and a discovery experience that doubled as a brand vehicle.", what: ["Brand", "Photography", "Custom CMS", "Webflow"] },
  { id: "kasai", tag: "Product", name: "Kasai", sub: "Restaurant ops tool", year: "2023", industry: "Hospitality SaaS", color: "#2A1A1A", color2: "#5C2C2C", shape: "grid",
    metrics: [{ k: "−42%", l: "Onboarding time" }, { k: "8 wks", l: "MVP shipped" }, { k: "4.8", l: "App rating" }],
    summary: "An iOS / iPad app that lets a small chef-led team run prep, comms and pass in one screen. Designed and built in 8 weeks from a single founder conversation.", what: ["Product design", "React Native", "Real-time sync"] },
  { id: "olivetti", tag: "Brand", name: "Olivetti & Sons", sub: "Family olive estate", year: "2022", industry: "Agriculture / DTC", color: "#3E4E2A", color2: "#7A8F4D", shape: "leaf",
    metrics: [{ k: "+341%", l: "DTC orders" }, { k: "14", l: "Retail stockists" }, { k: "8", l: "Awards" }],
    summary: "A second-generation rebrand for a 60-year-old olive grove. We took an inherited identity, distilled the family story into a typographic system, and launched a DTC commerce site.", what: ["Brand strategy", "Packaging", "Photography", "Shopify"] },
  { id: "axon", tag: "Product", name: "Axon Bio", sub: "Lab inventory platform", year: "2022", industry: "Biotech", color: "#0a1a2a", color2: "#1a3a5a", shape: "stack",
    metrics: [{ k: "−68%", l: "Misplaced samples" }, { k: "11", l: "Pilot labs" }, { k: "99.97%", l: "Uptime" }],
    summary: "A biotech inventory tool built for fast-moving research labs. Real-time location tracking via passive RFID, a clean dashboard, and a Slack integration for alerts.", what: ["Product design", "Engineering", "RFID integration"] },
  { id: "lumen", tag: "Site", name: "Lumen Press", sub: "Independent publishing", year: "2022", industry: "Publishing", color: "#1a1612", color2: "#3a3024", shape: "type",
    metrics: [{ k: "+178%", l: "Subscriber growth" }, { k: "84", l: "Books cataloged" }, { k: "92", l: "Lighthouse" }],
    summary: "A typographic showcase site for an indie press. Built around a hand-tuned font stack and a CMS that handles cross-references, footnotes and reading time.", what: ["Editorial design", "Custom type", "Sanity"] },
  { id: "drift", tag: "Campaign", name: "Drift Travel", sub: "Slow travel platform", year: "2021", industry: "Travel", color: "#3a2a1a", color2: "#7a5a3a", shape: "orb",
    metrics: [{ k: "+92%", l: "Booking conv." }, { k: "23 wks", l: "Strategy → launch" }, { k: "$1.8M", l: "Year-one bookings" }],
    summary: "A small-batch travel platform for design-curious people. We launched the brand, built the site, and ran year-one paid + content. Their first guidebook is in its second print.", what: ["Brand", "Editorial", "Webflow", "Growth"] },
  { id: "northsky", tag: "Brand", name: "Northsky Labs", sub: "Climate tech foundry", year: "2021", industry: "Climate tech", color: "#0e1a30", color2: "#1a3a6a", shape: "stack",
    metrics: [{ k: "$24M", l: "Series A raised" }, { k: "4", l: "Spinouts launched" }, { k: "62", l: "Researchers" }],
    summary: "Identity and pitch system for a climate-tech foundry. We made the science look like the story it is — legible, urgent, and quietly confident.", what: ["Brand strategy", "Identity", "Pitch system"] },
];

function Filters({ filter, setFilter, accent }) {
  const opts = ["All", "Brand", "Site", "Product", "Campaign"];
  return (
    <div className="liquid-glass" style={{ borderRadius: 999, padding: 6, display: "inline-flex", gap: 4 }}>
      {opts.map(f => (
        <button key={f} onClick={()=>setFilter(f)} style={{
          padding: "9px 18px", borderRadius: 999,
          background: filter === f ? "#fff" : "transparent",
          color: filter === f ? "#07070a" : "rgba(255,255,255,0.78)",
          border: "none", cursor: "pointer", fontSize: 13, fontWeight: 500,
          transition: "all .25s", fontFamily: "inherit"
        }}>{f}</button>
      ))}
    </div>
  );
}

function ArchiveBigCard({ p, accent, expanded, onToggle }) {
  return (
    <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)", padding: "32px 0" }}>
      <button onClick={onToggle} style={{
        display: "grid", gridTemplateColumns: "100px 1.4fr 1fr 1fr auto", gap: 28, alignItems: "center",
        width: "100%", padding: "8px 0", background: "transparent", border: "none", cursor: "pointer", color: "#fff",
        textAlign: "left", fontFamily: "inherit"
      }} className="archive-row">
        <div className="font-mono" style={{ color: "rgba(255,255,255,0.45)", fontSize: 13, letterSpacing: "0.14em" }}>{p.year}</div>
        <div>
          <h3 className="font-serif" style={{ fontSize: "clamp(34px, 3.4vw, 56px)", lineHeight: 1, letterSpacing: "-0.02em", marginBottom: 6 }}>{p.name}</h3>
          <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 14 }}>{p.sub}</div>
        </div>
        <div style={{ color: "rgba(255,255,255,0.6)", fontSize: 14 }}>{p.industry}</div>
        <div>
          <span className="tag-chip" style={{ fontSize: 12 }}>{p.tag}</span>
        </div>
        <div style={{
          width: 48, height: 48, borderRadius: 99,
          background: expanded ? accent[0] : "rgba(255,255,255,0.04)",
          border: `1px solid ${expanded ? "transparent" : "rgba(255,255,255,0.15)"}`,
          color: expanded ? "#07070a" : "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "all .3s"
        }}>
          {expanded ? <I.Minus size={18} stroke={2}/> : <I.Plus size={18} stroke={2}/>}
        </div>
      </button>

      {expanded && (
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32 }} className="expand-grid">
          <div style={{ borderRadius: 22, overflow: "hidden", aspectRatio: "16/11", position: "relative", border: "1px solid rgba(255,255,255,0.08)" }}>
            <ProjectArt p={p}/>
            <div style={{ position: "absolute", top: 18, left: 18, display: "flex", gap: 8 }}>
              <span className="liquid-glass" style={{ borderRadius: 999, padding: "6px 12px", fontSize: 12, color: "#fff" }}>{p.tag}</span>
              <span className="liquid-glass" style={{ borderRadius: 999, padding: "6px 12px", fontSize: 12, color: "rgba(255,255,255,0.7)" }}>{p.year}</span>
            </div>
          </div>
          <div style={{ padding: "8px 0", display: "flex", flexDirection: "column", gap: 28 }}>
            <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 16, lineHeight: 1.65 }}>{p.summary}</p>
            <div>
              <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 14 }}>What we did</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {p.what.map(w => <span key={w} className="tag-chip" style={{ fontSize: 13 }}>{w}</span>)}
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${p.metrics.length}, 1fr)`, gap: 12, borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 22 }}>
              {p.metrics.map(m => (
                <div key={m.l}>
                  <div className="font-serif" style={{ fontSize: 32, letterSpacing: "-0.02em",
                    background: `linear-gradient(135deg, ${accent[0]}, ${accent[1]})`,
                    WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent"
                  }}>{m.k}</div>
                  <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{m.l}</div>
                </div>
              ))}
            </div>
            <a href="contact.html" className="btn-ghost" style={{ alignSelf: "start" }}>
              Talk about a similar project <I.ArrowUpRight size={14} stroke={2}/>
            </a>
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 880px){
          .archive-row{ grid-template-columns: 1fr auto !important; gap: 16px !important; }
          .archive-row > div:nth-child(1), .archive-row > div:nth-child(3), .archive-row > div:nth-child(4){ display: none !important; }
          .expand-grid{ grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function Archive({ accent }) {
  const [filter, setFilter] = useState("All");
  const [open, setOpen] = useState(PROJECTS[0].id);
  const visible = filter === "All" ? PROJECTS : PROJECTS.filter(p => p.tag === filter);

  return (
    <section className="section" style={{ paddingTop: 60 }}>
      <div className="container">
        <Reveal>
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", marginBottom: 36, gap: 24, flexWrap: "wrap" }}>
            <div>
              <span className="kicker"><span className="dot"/> Archive · {visible.length} projects</span>
              <div className="font-mono" style={{ marginTop: 14, color: "rgba(255,255,255,0.55)", fontSize: 13, letterSpacing: "0.14em" }}>2017 → 2026</div>
            </div>
            <Filters filter={filter} setFilter={setFilter} accent={accent}/>
          </div>
        </Reveal>
        <div>
          {visible.map((p) => (
            <Reveal key={p.id}>
              <ArchiveBigCard p={p} accent={accent} expanded={open === p.id} onToggle={()=>setOpen(o => o === p.id ? null : p.id)}/>
            </Reveal>
          ))}
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}/>
        </div>
      </div>
    </section>
  );
}

function FeaturedHero({ accent }) {
  // Featured case — Halocene
  const p = PROJECTS[0];
  return (
    <section className="section" style={{ paddingTop: 60 }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Featured case</span>
        </Reveal>
        <Reveal delay={80}>
          <div className="liquid-glass-strong" style={{ borderRadius: 28, overflow: "hidden", marginTop: 22 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr" }} className="fh-grid">
              <div style={{ position: "relative", aspectRatio: "5/4", overflow: "hidden" }}>
                <ProjectArt p={p}/>
              </div>
              <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center", gap: 22 }}>
                <div style={{ display: "flex", gap: 8 }}>
                  <span className="tag-chip" style={{ fontSize: 12 }}>{p.tag}</span>
                  <span className="tag-chip" style={{ fontSize: 12 }}>{p.year}</span>
                  <span className="tag-chip" style={{ fontSize: 12 }}>{p.industry}</span>
                </div>
                <h2 className="font-serif" style={{ fontSize: "clamp(40px, 5vw, 76px)", lineHeight: 0.98, letterSpacing: "-0.025em" }}>
                  {p.name}
                </h2>
                <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 17, lineHeight: 1.6 }}>{p.summary}</p>
                <div style={{ display: "grid", gridTemplateColumns: `repeat(${p.metrics.length}, 1fr)`, gap: 16, borderTop: "1px solid rgba(255,255,255,0.08)", paddingTop: 22 }}>
                  {p.metrics.map(m => (
                    <div key={m.l}>
                      <div className="font-serif" style={{ fontSize: 36, letterSpacing: "-0.02em",
                        background: `linear-gradient(135deg, ${accent[0]}, ${accent[1]})`,
                        WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent"
                      }}>{m.k}</div>
                      <div style={{ color: "rgba(255,255,255,0.5)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{m.l}</div>
                    </div>
                  ))}
                </div>
                <a href="#archive" className="btn-primary" style={{ alignSelf: "start" }}>See full archive <I.Arrow size={16} stroke={2}/></a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 880px){ .fh-grid{ grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ProjectArt is defined in sections.jsx and registered on window
const ProjectArt = window.ProjectArt;

function WorkApp() {
  const t = useSiteTweaks(TWEAK_DEFAULTS_WORK);
  const accent = PALETTES[t.palette] || PALETTES.aurora;
  return (
    <SiteChrome accent={accent} t={t}>
      <PageHero
        accent={accent}
        eyebrow="Selected work"
        title="What we ship."
        sub={`${PROJECTS.length} projects, nine years, four studios. From brand identities to commerce builds, here's a not-very-curated archive of work we're proud of.`}
      />

      <FeaturedHero accent={accent}/>
      <div id="archive"/>
      <Archive accent={accent}/>
      <CTABand accent={accent} title="Your project<br/>next?"/>
    </SiteChrome>
  );
}

const workRoot = ReactDOM.createRoot(document.getElementById("root"));
workRoot.render(<WorkApp/>);