// Deckhaus Shop — objects for creative work, client meetings and beautiful professional suffering
const SH_NS = window.DeckhausDesignSystem_ca5964;

// word-by-word reveal headline on a self-drawing grid (echoes "What we believe")
function ShopHeadline() {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setSeen(true); return; }
    const io = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }), { threshold: 0.4 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const ease = "cubic-bezier(.16,1,.3,1)";
  const words = ["Deckhaus", { w: "Shop", accent: true }];
  return (
    <div ref={ref} style={{ position: "relative" }}>
      <div aria-hidden="true" className="dh-mfgrid" style={{ position: "absolute", left: "-4%", right: "-4%", top: "-30%", bottom: "-30%", backgroundImage: "linear-gradient(rgba(10,10,11,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,11,.055) 1px, transparent 1px)", backgroundSize: "clamp(40px,4vw,60px) clamp(40px,4vw,60px)", opacity: seen ? 1 : 0, transition: "opacity 1s ease", pointerEvents: "none", WebkitMaskImage: "radial-gradient(120% 90% at 20% 50%, #000 30%, transparent 76%)", maskImage: "radial-gradient(120% 90% at 20% 50%, #000 30%, transparent 76%)" }} />
      <div style={{ position: "relative" }}>
        <div className="dh-eyebrow" style={{ marginBottom: "clamp(20px,2vw,28px)" }}>The collection</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(52px,9vw,140px)", lineHeight: .98, letterSpacing: "-0.02em", margin: 0 }}>
          {words.map((tok, i) => {
            const isObj = typeof tok === "object"; const w = isObj ? tok.w : tok;
            const base = { display: "inline-block", opacity: seen ? 1 : 0, transform: seen ? "none" : "translateY(26px)", filter: seen ? "blur(0)" : "blur(10px)", transition: `opacity .8s ${ease}, transform .8s ${ease}, filter .8s ${ease}`, transitionDelay: (i * 0.12) + "s", color: isObj ? "var(--lime-500)" : "var(--ink-900)" };
            return <React.Fragment key={i}><span style={base}>{w}</span>{i === 0 ? " " : ""}</React.Fragment>;
          })}
        </h1>
      </div>
    </div>
  );
}

function AddToCart({ price }) {
  const { Button } = SH_NS;
  const [added, setAdded] = React.useState(false);
  React.useEffect(() => { if (!added) return; const t = setTimeout(() => setAdded(false), 2200); return () => clearTimeout(t); }, [added]);
  return (
    <Button size="lg" onClick={() => { setAdded(true); window.DH_CART && window.DH_CART(); }} trailingIcon={added ? null : <window.ArrowR/>}>
      {added ? "Added to cart ✓" : `Add to cart — ${price}`}
    </Button>
  );
}

function ProductThumb({ label, status }) {
  const soon = status !== "Available";
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative", aspectRatio: "4 / 5", borderRadius: "var(--radius-lg)", overflow: "hidden", background: "linear-gradient(150deg, #17181a, #0b0b0d)", border: "1px solid var(--border-default)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, backgroundImage: "linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)", backgroundSize: "30px 30px", opacity: .5 }} />
        <img src="assets/logos/deckhaus-mark-lime.svg" style={{ height: "26%", opacity: .5 }} alt="" />
        <span style={{ position: "absolute", left: 16, top: 14, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".16em", textTransform: "uppercase", color: soon ? "var(--text-muted)" : "var(--lime-500)" }}>{status}</span>
      </div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(20px,1.9vw,26px)", lineHeight: 1.12, letterSpacing: "-0.01em", margin: "18px 0 0", color: soon ? "var(--text-muted)" : "var(--text-primary)" }}>{label}</h3>
    </div>
  );
}

function ShopView() {
  const { Button } = SH_NS;
  const badges = ["Limited run · 500", "Hardcover · 132 pp", "Ships from EU"];
  const details = [
    ["Format", "148 × 210 mm · hardcover"],
    ["Inside", "Dot grid, prompts & the Feedback Translation System™"],
    ["Language", "Bilingual — EN / ES"],
    ["Made for", "Founders, designers, freelancers"],
  ];
  return (
    <main>
      {/* header */}
      <section style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "clamp(52px,7vw,104px) var(--page-margin) clamp(36px,4vw,60px)" }}>
        <ShopHeadline />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(24px,4vw,72px)", marginTop: "clamp(32px,3.4vw,52px)", maxWidth: 920 }}>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(19px,1.7vw,24px)", lineHeight: 1.3, letterSpacing: "-0.01em", margin: 0, color: "var(--text-primary)" }}>Objects for creative work, client meetings and <span style={{ color: "var(--text-accent)" }}>beautiful professional suffering.</span></p>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.62, margin: 0, color: "var(--text-secondary)" }}>A small collection of notebooks, planners and desk tools designed for founders, designers, freelancers and anyone trying to turn chaos into something billable.</p>
        </div>
      </section>

      {/* featured product */}
      <section style={{ borderTop: "1px solid var(--border-default)", background: "#EEEAE3" }}>
        <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "clamp(40px,5vw,80px) var(--page-margin)", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(32px,4vw,72px)", alignItems: "center" }}>
          <div style={{ position: "relative", borderRadius: "var(--radius-lg)", overflow: "hidden" }}>
            <img src="assets/shop/clients-cover.jpg" alt="How to deal with my lovely clients — notebook" style={{ display: "block", width: "100%", height: "auto" }} />
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 18, height: 2, background: "var(--lime-500)", flex: "none" }} />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: ".2em", textTransform: "uppercase", color: "var(--text-accent)" }}>Notebook · No. 01</span>
            </div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(34px,4.4vw,60px)", lineHeight: 1.02, letterSpacing: "-0.015em", margin: "clamp(20px,2vw,28px) 0 0", textWrap: "balance" }}>How to deal with my lovely clients<span style={{ color: "var(--lime-500)" }}>*</span></h2>
            <p style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".08em", color: "var(--text-muted)", margin: "12px 0 0" }}>*some of them, at least</p>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.62, color: "var(--text-secondary)", margin: "clamp(18px,1.8vw,24px) 0 0", maxWidth: "44ch" }}>Ideas, notes and survival strategies for creative projects and endless revisions. Part planner, part diary, part group therapy — for the version <span style={{ fontStyle: "italic" }}>v7_FINAL_real_ok_ok</span>.</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, margin: "clamp(22px,2.2vw,30px) 0 0" }}>
              {badges.map((b) => <span key={b} style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--text-secondary)", border: "1px solid var(--border-strong)", borderRadius: 999, padding: "6px 12px" }}>{b}</span>)}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 24, margin: "clamp(26px,2.6vw,36px) 0 0", flexWrap: "wrap" }}>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(30px,3vw,42px)", letterSpacing: "-0.01em", color: "var(--ink-900)" }}>€28</span>
              <AddToCart price="€28" />
            </div>
          </div>
        </div>
      </section>

      {/* gallery — the spread */}
      <section style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "clamp(48px,6vw,96px) var(--page-margin) 0" }}>
        <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", border: "1px solid var(--border-default)" }}>
          <img src="assets/shop/clients-spread.jpg" alt="Inside spread — Feedback Translation System" style={{ display: "block", width: "100%", height: "auto" }} />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "0.4fr 0.6fr", gap: "clamp(24px,3vw,56px)", marginTop: "clamp(24px,2.6vw,36px)", alignItems: "start" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: ".16em", textTransform: "uppercase", color: "var(--text-muted)" }}>Inside · Fig. 10</span>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(20px,2.2vw,30px)", lineHeight: 1.24, letterSpacing: "-0.01em", margin: 0, textWrap: "balance" }}>The <span style={{ color: "var(--text-accent)" }}>Feedback Translation System™</span> — because they don't speak another language, they just say "hazlo más premium".</p>
        </div>
      </section>

      {/* lifestyle band */}
      <section style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "clamp(40px,5vw,72px) var(--page-margin) 0" }}>
        <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", border: "1px solid var(--border-default)", aspectRatio: "16 / 10" }}>
          <img src="assets/shop/clients-lifestyle.jpg" alt="A designer, resting" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(8,8,8,.6) 0%, transparent 45%)" }} />
          <span style={{ position: "absolute", left: "clamp(20px,2.4vw,36px)", bottom: "clamp(20px,2.4vw,32px)", fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(20px,2.4vw,34px)", lineHeight: 1.1, color: "var(--paper)", maxWidth: "18ch" }}>Also works as a mask for Monday meetings.</span>
        </div>
      </section>

      {/* rest of the collection */}
      <section style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "var(--section-y) var(--page-margin)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: "clamp(32px,3.4vw,48px)" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(28px,3.4vw,46px)", lineHeight: 1.06, letterSpacing: "-0.01em", margin: 0 }}>The rest of the desk.</h2>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--text-muted)" }}>More landing soon</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "clamp(18px,2vw,32px)" }}>
          <ProductThumb label="How to deal with my lovely clients" status="Available" />
          <ProductThumb label="The Third Coffee planner" status="Coming soon" />
          <ProductThumb label="Revision Survival notebook" status="Coming soon" />
          <ProductThumb label="Slides Happen desk pad" status="Coming soon" />
        </div>
      </section>

      {/* notify */}
      <section style={{ borderTop: "1px solid var(--border-default)" }}>
        <div style={{ maxWidth: "var(--maxw-wide)", margin: "0 auto", padding: "var(--section-y) var(--page-margin)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 28, flexWrap: "wrap" }}>
          <p style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(24px,2.8vw,40px)", lineHeight: 1.08, letterSpacing: "-0.01em", margin: 0, maxWidth: "20ch" }}>Tell me when the next object drops.</p>
          <Button size="lg" onClick={() => window.DH_NAV("contact")} trailingIcon={<window.ArrowR/>}>Notify me</Button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ShopView });