// pages.jsx — Home, Work, CaseStudy, Services, About, Clients, Contact

const { CATEGORIES, PROJECTS, SERVICES, PILLARS, VALUE_PROPS } = window.SNOOPY_DATA;

// ============================================================
// HOME
// ============================================================
function HomePage({ navigate, openEnquire }) {
  const featured = ["ep-07", "ac-02", "cb-01", "rd-02"].map(id => PROJECTS.find(p => p.id === id));
  const heroProject = PROJECTS.find(p => p.id === "ep-07");

  return (
    <div className="page">
      {/* HERO */}
      <section className="hero" style={{ paddingTop: 28, paddingBottom: 0 }}>
        <div className="dotgrid"></div>
        <div className="container" style={{ position: "relative", paddingTop: 36, paddingBottom: 72 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "end" }} className="hero-grid">
            <div>
              <div className="eyebrow on-dark">360 Creative Production House · Dubai</div>
              <h1 className="h-display mt-4" style={{ color: "#fff" }}>
                Dream Big.<br/>
                <span className="text-grad" style={{ background: "linear-gradient(120deg, #C9B6F0, #fff 60%, #E5DDF5)", WebkitBackgroundClip: "text", backgroundClip: "text" }}>
                  We Deliver.
                </span>
              </h1>
              <p className="lede mt-6" style={{ color: "#D7CEEC", maxWidth: 540 }}>
                Creative + technical event production, custom builds and retail —
                design, in-house fabrication and delivery under one roof.
                We fill in the blanks of your creative needs.
              </p>
              <div className="flex gap-3 mt-8 wrap">
                <button className="btn btn-light btn-lg" onClick={openEnquire}>
                  Brief us
                  <ArrowUR />
                </button>
                <button className="btn btn-ghost btn-lg" style={{ borderColor: "rgba(255,255,255,0.22)", color: "#fff" }}
                  onClick={() => navigate("work")}>
                  See the work
                  <ArrowR />
                </button>
              </div>

              {/* trust strip */}
              <div className="flex gap-6 mt-12 wrap" style={{ alignItems: "center", color: "#B7ABD3", fontSize: 13 }}>
                <div className="flex center gap-2">
                  <span className="pulse-dot" />
                  <span>Open for briefs</span>
                </div>
                <div style={{ width: 1, height: 14, background: "rgba(255,255,255,0.18)" }}/>
                <div>Al Quoz Industrial Area 3, Dubai</div>
                <div style={{ width: 1, height: 14, background: "rgba(255,255,255,0.18)" }}/>
                <div>+971 50 649 6600</div>
              </div>
            </div>

            <div style={{ position: "relative" }}>
              {/* hero project preview card */}
              <div style={{ position: "relative", borderRadius: 22, overflow: "hidden", boxShadow: "0 30px 60px -20px rgba(0,0,0,0.5)" }}>
                <img src={heroProject.img} alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", display: "block" }}/>
                <div style={{
                  position: "absolute", inset: 0,
                  background: "linear-gradient(180deg, rgba(11,7,25,0) 50%, rgba(11,7,25,0.7) 100%)",
                }}/>
                <div style={{ position: "absolute", left: 20, top: 20 }}>
                  <span className="chip dark">Latest · {heroProject.year}</span>
                </div>
                <div style={{ position: "absolute", left: 22, right: 22, bottom: 22, color: "#fff" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 11, color: "#C9B6F0", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600 }}>
                    Event Production
                  </div>
                  <h3 style={{ color: "#fff", fontSize: 22, marginTop: 6, lineHeight: 1.15 }}>{heroProject.title}</h3>
                  <button className="btn btn-light btn-sm mt-4" onClick={() => navigate("case-study", { id: heroProject.id })}>
                    Open case study <ArrowUR />
                  </button>
                </div>
              </div>
              {/* floating tag */}
              <div style={{
                position: "absolute", right: -16, top: -16,
                padding: "10px 14px",
                background: "var(--brand-grad)",
                borderRadius: 12,
                color: "#fff",
                fontFamily: "var(--font-display)",
                fontSize: 12, fontWeight: 600,
                boxShadow: "0 12px 28px -8px rgba(126,51,203,0.6)",
                transform: "rotate(3deg)",
              }}>
                In-house build
              </div>
            </div>
          </div>
        </div>

        {/* marquee */}
        <div style={{ background: "#0f0b1e", borderTop: "1px solid rgba(255,255,255,0.06)", padding: "20px 0", overflow: "hidden", whiteSpace: "nowrap" }}>
          <div className="marquee" style={{ color: "#7C6FA3" }}>
            {Array.from({ length: 2 }).map((_, i) => (
              <React.Fragment key={i}>
                <span className="marquee-item" style={{ color: "#fff" }}>Event production</span>
                <span className="marquee-item" style={{ color: "#7C6FA3" }}>Activations</span>
                <span className="marquee-item" style={{ color: "#fff" }}>Custom builds</span>
                <span className="marquee-item" style={{ color: "#7C6FA3" }}>Retail display</span>
                <span className="marquee-item" style={{ color: "#fff" }}>Signage</span>
                <span className="marquee-item" style={{ color: "#7C6FA3" }}>Art installations</span>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* VALUE PROPS BAND */}
      <section style={{ padding: "56px 0", background: "var(--surface)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }} className="vp-grid">
            {VALUE_PROPS.map((v, i) => (
              <div key={v.title} style={{ display: "flex", gap: 16 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 13, color: "var(--primary)", fontWeight: 600, letterSpacing: "0.1em", paddingTop: 2 }}>0{i+1}</div>
                <div>
                  <h3 className="h-3">{v.title}</h3>
                  <p className="mt-2" style={{ color: "var(--text-soft)" }}>{v.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 28, flexWrap: "wrap" }}>
            <SectionHead eyebrow="Capabilities" title="Six ways we build the wow effect." lede="Design, fabrication and technical — under one roof. Fewer handoffs, sharper execution." />
            <button className="btn btn-ghost" onClick={() => navigate("services")}>All services <ArrowR /></button>
          </div>

          <div className="mt-12">
            {SERVICES.map((s, i) => (
              <div key={s.id} className="service-row" onClick={() => navigate("services")}>
                <div className="service-num">0{i+1}</div>
                <h3>{s.title}</h3>
                <p>{s.blurb.split(".")[0]}.</p>
                <div className="arrow"><ArrowUR /></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED WORK */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 28, flexWrap: "wrap" }}>
            <SectionHead eyebrow="Selected work" title="Recent productions." lede="Each piece designed and built by the same team — and ready to talk through when you brief us." />
            <button className="btn btn-ghost" onClick={() => navigate("work")}>All work <ArrowR /></button>
          </div>

          <div className="mt-12" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
            {featured.map((p) => (
              <WorkCard key={p.id} project={p} onClick={() => navigate("case-study", { id: p.id })} />
            ))}
          </div>
        </div>
      </section>

      {/* PILLARS — Why choose us */}
      <section className="section" style={{ background: "var(--dark)", color: "#fff", overflow: "hidden", position: "relative" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at top right, rgba(126,51,203,0.35), transparent 60%)", pointerEvents: "none" }}/>
        <div className="container" style={{ position: "relative" }}>
          <SectionHead onDark eyebrow="Why choose us" title="One team. Anything you can dream up." lede="The distinctive value vs ordinary event agencies — design, in-house fabrication and technical delivery under one roof." />

          <div className="mt-12" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
            {PILLARS.map((p, i) => (
              <div key={p.num} className="pillar" style={{ background: "rgba(255,255,255,0.04)", borderColor: "rgba(255,255,255,0.10)" }}>
                <div className="num" style={{ color: "#C9B6F0" }}>{p.num}</div>
                <h3 style={{ color: "#fff" }}>{p.title}</h3>
                <p style={{ color: "#C9C0DE" }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ paddingBottom: 120 }}>
        <div className="container">
          <div style={{
            borderRadius: 26,
            padding: "72px 56px",
            background: "var(--brand-grad)",
            color: "#fff",
            position: "relative",
            overflow: "hidden",
          }}>
            <div style={{
              position: "absolute", right: -120, top: -120,
              width: 360, height: 360, borderRadius: "50%",
              background: "radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%)",
            }}/>
            <div style={{ position: "absolute", left: -80, bottom: -80, width: 280, height: 280, borderRadius: "50%", background: "radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%)" }}/>
            <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 40, alignItems: "center" }} className="cta-grid">
              <div>
                <h2 className="h-1" style={{ color: "#fff" }}>Have something to build?</h2>
                <p className="lede mt-4" style={{ color: "rgba(255,255,255,0.85)", maxWidth: 540 }}>
                  Tell us the brief. We'll come back with a route, a budget guide and a delivery plan within one business day.
                </p>
              </div>
              <div style={{ display: "flex", gap: 12, justifyContent: "flex-end" }} className="cta-actions">
                <button className="btn btn-light btn-lg" onClick={openEnquire}>Brief us <ArrowUR /></button>
                <a className="btn btn-ghost btn-lg" style={{ borderColor: "rgba(255,255,255,0.6)", color: "#fff" }} href="tel:+971506496600">Call</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// WORK CARD (shared)
// ============================================================
function WorkCard({ project, onClick }) {
  const cat = CATEGORIES.find(c => c.id === project.category);
  return (
    <a className="work-card" onClick={(e) => { e.preventDefault(); onClick(); }} href="#" aria-label={`${project.title} — ${cat.label}`}>
      <div className="cat-tag">{cat.label}</div>
      <div className="img-wrap">
        <img src={project.img} alt="" loading="lazy"/>
      </div>
      <div className="meta">
        <div>
          <h3>{project.title}</h3>
          <div className="sub">{project.location} · {project.year}</div>
        </div>
        <div className="meta-arrow"><ArrowUR /></div>
      </div>
    </a>
  );
}

// ============================================================
// WORK HUB (filterable portfolio)
// ============================================================
function WorkPage({ navigate, initialFilter }) {
  const [filter, setFilter] = React.useState(initialFilter || "all");
  const counts = React.useMemo(() => {
    const c = { all: PROJECTS.length };
    CATEGORIES.forEach(cat => { c[cat.id] = PROJECTS.filter(p => p.category === cat.id).length; });
    return c;
  }, []);
  const filtered = filter === "all" ? PROJECTS : PROJECTS.filter(p => p.category === filter);

  return (
    <div className="page">
      <section style={{ padding: "72px 0 40px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "end" }} className="work-head">
            <div>
              <div className="eyebrow">Selected work</div>
              <h1 className="h-display mt-3" style={{ fontSize: "clamp(48px, 6vw, 88px)" }}>
                Things we've built.
              </h1>
            </div>
            <p className="lede">
              Generic project titles below — per client rights process, real names and outcomes are released after permission, photographer credit and people-consent are confirmed.
            </p>
          </div>

          <div className="cat-filter mt-12">
            <button className={`cat-pill ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>
              All <span className="cnt">{counts.all}</span>
            </button>
            {CATEGORIES.map(c => (
              <button key={c.id} className={`cat-pill ${filter === c.id ? "active" : ""}`} onClick={() => setFilter(c.id)}>
                {c.label} <span className="cnt">{counts[c.id]}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="work-grid">
            {filtered.map((p) => (
              <WorkCard key={p.id} project={p} onClick={() => navigate("case-study", { id: p.id })} />
            ))}
          </div>

          {filtered.length === 0 && (
            <div style={{ padding: 80, textAlign: "center", color: "var(--muted)" }}>
              No projects in this category yet.
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CASE STUDY (project detail)
// ============================================================
function CaseStudyPage({ navigate, projectId, openLightbox, openEnquire }) {
  const project = PROJECTS.find(p => p.id === projectId) || PROJECTS[0];
  const cat = CATEGORIES.find(c => c.id === project.category);

  // build a gallery from same-category projects (visual continuity)
  const sameCat = PROJECTS.filter(p => p.category === project.category && p.id !== project.id);
  const gallery = sameCat.slice(0, 5).map(p => p.img);
  while (gallery.length < 5) gallery.push(project.img);

  const next = PROJECTS[(PROJECTS.findIndex(p => p.id === project.id) + 1) % PROJECTS.length];

  return (
    <div className="page">
      {/* breadcrumb */}
      <div className="container" style={{ paddingTop: 28 }}>
        <div style={{ fontSize: 13, color: "var(--muted)", display: "flex", gap: 8, alignItems: "center" }}>
          <a href="#work" onClick={(e)=>{e.preventDefault(); navigate("work");}}>Work</a>
          <span>/</span>
          <a href="#work" onClick={(e)=>{e.preventDefault(); navigate("work", { filter: project.category });}}>{cat.label}</a>
          <span>/</span>
          <span style={{ color: "var(--text)" }}>{project.title}</span>
        </div>
      </div>

      {/* hero */}
      <section style={{ padding: "32px 0 0" }}>
        <div className="container">
          <span className="chip solid">{cat.label}</span>
          <h1 className="h-display mt-4" style={{ fontSize: "clamp(40px, 5.5vw, 80px)", maxWidth: "20ch" }}>{project.title}</h1>
          <p className="lede mt-6" style={{ maxWidth: 720 }}>{project.summary}</p>
        </div>
      </section>

      {/* meta */}
      <section style={{ padding: "48px 0 0" }}>
        <div className="container">
          <dl className="cs-meta">
            <div>
              <dt>Category</dt>
              <dd>{cat.label}</dd>
            </div>
            <div>
              <dt>Client</dt>
              <dd>
                <span style={{ color: "var(--muted)" }}>—</span>
                <span className="flag" title="Per CLAUDE-DESIGN: confirm client usage permission before publishing names.">PENDING</span>
              </dd>
            </div>
            <div>
              <dt>Location</dt>
              <dd>{project.location}</dd>
            </div>
            <div>
              <dt>Year</dt>
              <dd>{project.year}</dd>
            </div>
          </dl>
        </div>
      </section>

      {/* hero image */}
      <section style={{ padding: "40px 0" }}>
        <div className="container">
          <div style={{ borderRadius: 22, overflow: "hidden" }}>
            <img src={project.img} alt="" style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover", display: "block", cursor: "zoom-in" }} onClick={() => openLightbox(project.img)} />
          </div>
        </div>
      </section>

      {/* scope + phases */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 56 }} className="scope-grid">
            <div>
              <div className="eyebrow">Scope of work</div>
              <h2 className="h-2 mt-3">Brief → design → build → live delivery.</h2>
              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gap: 8 }}>
                {project.scope.map(s => (
                  <li key={s} style={{ display: "flex", alignItems: "center", gap: 10, fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 15 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--brand-grad)" }}/>
                    {s}
                  </li>
                ))}
              </ul>
              <div className="note-banner mt-8">
                <div className="ic">i</div>
                <div>Measurable outcomes (footfall, dwell, content reach) appear here only when shared and confirmed by the client.</div>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="phase">
                <div className="num">01</div>
                <h4>Brief & concept</h4>
                <p>Workshops with the brand to land the story, the moment and the must-haves. Sketches and renders, then sign-off.</p>
              </div>
              <div className="phase">
                <div className="num">02</div>
                <h4>Design & engineering</h4>
                <p>Production drawings, materials, structural and rigging engineering. Risk and method statements in parallel.</p>
              </div>
              <div className="phase">
                <div className="num">03</div>
                <h4>In-house fabrication</h4>
                <p>Built in our Al Quoz workshop. Carpentry, scenic, signage, finishing — all in-house, all to spec.</p>
              </div>
              <div className="phase">
                <div className="num">04</div>
                <h4>Install & live</h4>
                <p>Load-in, AV install, rigging, stage management and the live show. Then load-out and reset for the next one.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* gallery */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <SectionHead eyebrow="Gallery" title="Selected stills." />
          <div className="gallery-grid mt-8">
            <div className="g-span-3" onClick={() => openLightbox(gallery[0])}><img src={gallery[0]} alt=""/></div>
            <div className="g-span-3" onClick={() => openLightbox(gallery[1])}><img src={gallery[1]} alt=""/></div>
            <div className="g-span-2" onClick={() => openLightbox(gallery[2])}><img src={gallery[2]} alt=""/></div>
            <div className="g-span-2" onClick={() => openLightbox(gallery[3])}><img src={gallery[3]} alt=""/></div>
            <div className="g-span-2" onClick={() => openLightbox(gallery[4])}><img src={gallery[4]} alt=""/></div>
          </div>
          <div className="note-banner mt-6">
            <div className="ic">⚠</div>
            <div><strong style={{ color: "var(--text)" }}>Rights flag —</strong> {project.flag}. Per editorial process, branded photographs are only published after written client usage permission, photographer credit and people-consent are confirmed.</div>
          </div>
        </div>
      </section>

      {/* CTA + next */}
      <section style={{ background: "var(--dark)", color: "#fff", padding: "72px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }} className="next-grid">
          <div>
            <div className="eyebrow on-dark">Something similar?</div>
            <h2 className="h-2 mt-3" style={{ color: "#fff" }}>Tell us what you're building.</h2>
            <p className="lede mt-4" style={{ color: "#C9C0DE", maxWidth: 480 }}>
              Even rough briefs welcome — we'll come back with a route, a budget guide and a delivery plan.
            </p>
            <div className="flex gap-3 mt-6 wrap">
              <button className="btn btn-light" onClick={openEnquire}>Brief us <ArrowUR /></button>
              <a className="btn btn-ghost" style={{ borderColor: "rgba(255,255,255,0.35)", color: "#fff" }} href="tel:+971506496600">+971 50 649 6600</a>
            </div>
          </div>

          <a className="card" style={{ background: "rgba(255,255,255,0.05)", borderColor: "rgba(255,255,255,0.1)", display: "block", cursor: "pointer" }} onClick={(e)=>{e.preventDefault(); navigate("case-study", { id: next.id });}} href="#next">
            <div style={{ position: "relative" }}>
              <img src={next.img} alt="" style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover" }}/>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(11,7,25,0) 40%, rgba(11,7,25,0.85))" }}/>
              <div style={{ position: "absolute", left: 20, bottom: 20, color: "#fff" }}>
                <div style={{ fontSize: 11, color: "#C9B6F0", letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--font-display)" }}>Next project ↗</div>
                <div style={{ fontSize: 22, fontFamily: "var(--font-display)", fontWeight: 700, marginTop: 4 }}>{next.title}</div>
              </div>
            </div>
          </a>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// SERVICES
// ============================================================
function ServicesPage({ navigate, openEnquire, setEnquireService }) {
  const [active, setActive] = React.useState(SERVICES[0].id);
  const s = SERVICES.find(x => x.id === active);
  const samples = PROJECTS.filter(p => p.category === active).slice(0, 4);

  return (
    <div className="page">
      <section style={{ padding: "72px 0 24px" }}>
        <div className="container">
          <div className="eyebrow">Capabilities</div>
          <h1 className="h-display mt-3" style={{ fontSize: "clamp(48px, 6vw, 96px)" }}>
            Design. <span className="text-grad">Build.</span> Deliver.
          </h1>
          <p className="lede mt-6" style={{ maxWidth: 640 }}>
            One house — six capabilities. From the first concept sketch through fabrication in our Al Quoz workshop to live install and load-out.
          </p>
        </div>
      </section>

      <section style={{ padding: "48px 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, alignItems: "start" }} className="services-grid">
            {/* Tab rail */}
            <div style={{ position: "sticky", top: 100 }}>
              <div className="cat-filter" style={{ flexDirection: "column", alignItems: "stretch" }}>
                {SERVICES.map((sv, i) => (
                  <button key={sv.id} className={`cat-pill ${active === sv.id ? "active" : ""}`} onClick={() => setActive(sv.id)}
                          style={{ justifyContent: "space-between", padding: "14px 18px" }}>
                    <span style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span style={{ fontSize: 11, opacity: 0.7 }}>0{i+1}</span>
                      {sv.title}
                    </span>
                    <ArrowR />
                  </button>
                ))}
              </div>
            </div>

            {/* Content */}
            <div>
              <h2 className="h-1">{s.title}</h2>
              <p className="lede mt-6">{s.blurb}</p>

              <div className="mt-12">
                <div className="eyebrow">What's included</div>
                <div className="mt-4" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {s.capabilities.map(c => (
                    <div key={c} style={{
                      padding: "12px 16px",
                      borderRadius: 12,
                      background: "var(--surface)",
                      border: "1px solid var(--border)",
                      display: "flex", alignItems: "center", gap: 10,
                      fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14,
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--brand-grad)" }}/>
                      {c}
                    </div>
                  ))}
                </div>
              </div>

              <div className="mt-12">
                <div className="flex between center wrap" style={{ gap: 12 }}>
                  <div className="eyebrow">Recent {s.title.toLowerCase()}</div>
                  <button className="btn btn-ghost btn-sm" onClick={() => navigate("work", { filter: active })}>See all <ArrowR /></button>
                </div>
                <div className="mt-6" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14 }}>
                  {samples.map(p => (
                    <WorkCard key={p.id} project={p} onClick={() => navigate("case-study", { id: p.id })} />
                  ))}
                </div>
              </div>

              <div className="card mt-12" style={{ padding: 32, background: "var(--surface)", borderColor: "var(--border)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", gap: 20, alignItems: "center", flexWrap: "wrap" }}>
                  <div>
                    <h3 className="h-3">Brief us on a {s.title.toLowerCase()} project.</h3>
                    <p style={{ color: "var(--text-soft)", marginTop: 4, fontSize: 14 }}>We'll come back with a route and a budget guide within one business day.</p>
                  </div>
                  <button className="btn btn-primary" onClick={() => { setEnquireService(active); openEnquire(); }}>
                    Brief us <ArrowUR />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// ABOUT
// ============================================================
function AboutPage({ navigate, openEnquire }) {
  return (
    <div className="page">
      <section style={{ padding: "72px 0 24px" }}>
        <div className="container">
          <div className="eyebrow">About</div>
          <h1 className="h-display mt-3" style={{ fontSize: "clamp(44px, 5.6vw, 84px)", maxWidth: "16ch" }}>
            We are a <span className="text-grad">360 creative</span> production house.
          </h1>
          <p className="lede mt-6" style={{ maxWidth: 720 }}>
            Snoopy Productions specialises in immersive event experiences, custom-build solutions and
            seamless retail productions — on all levels. Concept, design, in-house fabrication and live
            delivery, under one roof in Dubai.
          </p>
        </div>
      </section>

      <section style={{ padding: "32px 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }} className="hero-img-grid">
            <div style={{ borderRadius: 18, overflow: "hidden" }}>
              <img src="media/work-custom-build-01.webp" alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }}/>
            </div>
            <div style={{ borderRadius: 18, overflow: "hidden", marginTop: 40 }}>
              <img src="media/work-event-production-08.webp" alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }}/>
            </div>
            <div style={{ borderRadius: 18, overflow: "hidden" }}>
              <img src="media/work-activation-01.webp" alt="" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }}/>
            </div>
          </div>
        </div>
      </section>

      {/* Story */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 56 }} className="story-grid">
            <div className="eyebrow">Our story</div>
            <div>
              <p className="lede">
                Emerging from a dynamic mix of creative thinkers and changemakers, Snoopy Productions
                was founded to redefine the face of creative production. We bring a unique perspective
                and an eagerness to explore uncharted territories, disrupt traditional norms, and set
                new benchmarks in the industry.
              </p>
              <div className="note-banner mt-6">
                <div className="ic">i</div>
                <div>Founding year and exact tenure are intentionally unstated here — to be confirmed by the client before publishing a number.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="container"><div className="divider"/></div>

      {/* Vision & Mission */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }} className="vm-grid">
            <div className="card" style={{ padding: 40, background: "var(--surface)", borderColor: "var(--border)" }}>
              <div className="eyebrow">Vision</div>
              <p className="lede mt-4">
                Setting high standards for immersive and creative production. We stay at the forefront
                of innovation by redefining experiential storytelling.
              </p>
            </div>
            <div style={{ padding: 40, borderRadius: 18, background: "var(--brand-grad)", color: "#fff" }}>
              <div className="eyebrow on-dark">Mission</div>
              <p className="lede mt-4" style={{ color: "rgba(255,255,255,0.92)" }}>
                We elevate the narratives of retail spaces, brands, and individual clients. We craft
                captivating, imaginative experiential environments that inspire a 'wow' effect —
                transforming unique visions into unforgettable realities.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Pillars */}
      <section className="section" style={{ background: "var(--surface)" }}>
        <div className="container">
          <SectionHead eyebrow="Why choose us" title="Three pillars." />
          <div className="mt-12" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="pillars-grid">
            {PILLARS.map(p => (
              <div key={p.num} className="pillar">
                <div className="num">{p.num}</div>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Workshop / process */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="How we work" title="Concept to load-out — under one roof." lede="In-house design, fabrication and technical means fewer handoffs, sharper execution and a single team accountable for the result." />

          <div className="mt-12" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }} className="proc-grid">
            {[
              { n: "01", t: "Brief", d: "Workshop the story, must-haves and the moments that matter." },
              { n: "02", t: "Design", d: "Sketches, renders, production drawings. Sign-off before we cut." },
              { n: "03", t: "Build", d: "Fabricated in our Al Quoz workshop. Carpentry, scenic, signage." },
              { n: "04", t: "Live", d: "Install, AV, rigging, stage management — and the load-out after." },
            ].map(p => (
              <div key={p.n} className="phase">
                <div className="num">{p.n}</div>
                <h4>{p.t}</h4>
                <p>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="card" style={{ padding: "48px 40px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 28, alignItems: "center", background: "var(--surface)", borderColor: "var(--border)" }} className="about-cta">
            <div>
              <h3 className="h-2">Want to come by the workshop?</h3>
              <p className="lede mt-3">Walk-throughs are welcome by appointment — best way to see the level of build.</p>
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
              <button className="btn btn-primary" onClick={openEnquire}>Get in touch <ArrowUR /></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CLIENTS
// ============================================================
function ClientsPage({ navigate, openEnquire }) {
  return (
    <div className="page">
      <section style={{ padding: "72px 0 32px" }}>
        <div className="container">
          <div className="eyebrow">Clients</div>
          <h1 className="h-display mt-3" style={{ fontSize: "clamp(44px, 5.6vw, 84px)" }}>
            Trusted by brands<br/> across <span className="text-grad">the region.</span>
          </h1>
          <p className="lede mt-6" style={{ maxWidth: 640 }}>
            From challenger brands to global names, we've delivered experiences, builds and retail moments for clients across the UAE and GCC.
          </p>
        </div>
      </section>

      <section style={{ padding: "32px 0 64px" }}>
        <div className="container">
          <div className="note-banner" style={{ background: "#FFF6E0", borderColor: "#F2C463" }}>
            <div className="ic" style={{ background: "#F2A53E" }}>!</div>
            <div>
              <strong style={{ color: "var(--text)" }}>Logo wall pending permission.</strong> Per our editorial
              process, third-party client logos are only displayed after written usage permission is on file.
              Below: placeholder tiles + a request flow.
            </div>
          </div>

          <div className="mt-12" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 14 }} className="logo-grid">
            {Array.from({ length: 18 }).map((_, i) => (
              <div key={i} style={{
                aspectRatio: "5/3",
                background: i % 3 === 0 ? "var(--surface-2)" : "var(--surface)",
                border: "1px dashed var(--border-strong)",
                borderRadius: 12,
                display: "grid", placeItems: "center",
                color: "var(--muted)",
                fontFamily: "ui-monospace, monospace",
                fontSize: 11,
                letterSpacing: "0.08em",
              }}>
                CLIENT {String(i+1).padStart(2, "0")}
              </div>
            ))}
          </div>

          <div className="card mt-12" style={{ padding: 36, background: "var(--dark)", color: "#fff", borderColor: "transparent", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 28, alignItems: "center" }} className="part-cta">
            <div>
              <div className="eyebrow on-dark">Become a partner</div>
              <h3 className="h-2 mt-3" style={{ color: "#fff" }}>Working with brands, agencies and suppliers.</h3>
              <p className="lede mt-3" style={{ color: "#C9C0DE", maxWidth: 540 }}>
                Marketing teams, retailers, agencies and trusted suppliers — let's talk about how we can build together.
              </p>
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
              <button className="btn btn-light" onClick={openEnquire}>Partner with us <ArrowUR /></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// CONTACT
// ============================================================
function ContactPage({ openEnquire }) {
  const [form, setForm] = React.useState({ name: "", email: "", subject: "general", message: "" });
  const [sent, setSent] = React.useState(false);

  return (
    <div className="page">
      <section style={{ padding: "72px 0 24px" }}>
        <div className="container">
          <div className="eyebrow">Contact</div>
          <h1 className="h-display mt-3" style={{ fontSize: "clamp(44px, 5.6vw, 84px)" }}>
            Let's <span className="text-grad">build something.</span>
          </h1>
          <p className="lede mt-6" style={{ maxWidth: 640 }}>
            Tell us about your project — a few sentences are enough to start a conversation.
          </p>
        </div>
      </section>

      <section style={{ padding: "48px 0 96px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56 }} className="contact-grid">
            {/* Left: details */}
            <div>
              <div className="card" style={{ padding: 28 }}>
                <div className="eyebrow">Studio</div>
                <h3 className="h-3 mt-3">Al Quoz Industrial Area 3</h3>
                <p style={{ color: "var(--text-soft)", marginTop: 6 }}>Dubai, United Arab Emirates</p>
                <div style={{ marginTop: 12, padding: "10px 12px", background: "var(--surface)", borderRadius: 10, fontSize: 12.5, color: "var(--muted)", lineHeight: 1.5 }}>
                  Exact unit / street to be confirmed — and a Google Maps embed will appear here once the address is geocoded.
                </div>
                <a href="tel:+971506496600" style={{
                  marginTop: 20, display: "block",
                  padding: 16, borderRadius: 12,
                  background: "var(--brand-grad)", color: "#fff",
                  fontFamily: "var(--font-display)", fontWeight: 600,
                }}>
                  <div style={{ fontSize: 11, opacity: 0.8, letterSpacing: "0.08em", textTransform: "uppercase" }}>Call / WhatsApp*</div>
                  <div style={{ fontSize: 22, marginTop: 4 }}>+971 50 649 6600</div>
                  <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4, fontWeight: 400 }}>*WhatsApp pending confirmation as a monitored business line.</div>
                </a>
                <div style={{ marginTop: 12, padding: 16, borderRadius: 12, border: "1px solid var(--border)" }}>
                  <div style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--font-display)" }}>Email</div>
                  <a href="mailto:hello@snoopyeverything.com" style={{ display: "block", fontSize: 17, marginTop: 4, color: "var(--text)", fontFamily: "var(--font-display)", fontWeight: 600 }}>hello@snoopyeverything.com</a>
                  <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 4 }}>Live inbound — to be confirmed (vs Team@snoopyproductions.com).</div>
                </div>

                <div style={{ marginTop: 24, paddingTop: 24, borderTop: "1px solid var(--border)" }}>
                  <div style={{ fontSize: 11, color: "var(--muted)", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600, fontFamily: "var(--font-display)" }}>Hours</div>
                  <p style={{ marginTop: 6, color: "var(--text-soft)" }}>To be confirmed by the studio — opening hours and working week not yet published.</p>
                </div>
              </div>

              <div className="card mt-6" style={{ padding: 20, background: "var(--dark)", color: "#fff", borderColor: "transparent" }}>
                <div className="eyebrow on-dark">Follow</div>
                <div className="mt-4" style={{ display: "grid", gap: 8 }}>
                  <a href="https://instagram.com/snoopyproductions" target="_blank" rel="noreferrer" style={{ display: "flex", justifyContent: "space-between", color: "#fff", padding: "10px 0", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
                    <span>Instagram</span><span style={{ color: "#C9B6F0" }}>@snoopyproductions ↗</span>
                  </a>
                  <a href="#" style={{ display: "flex", justifyContent: "space-between", color: "#fff", padding: "10px 0" }}>
                    <span>LinkedIn</span><span style={{ color: "#C9B6F0" }}>/company/snoopy-productions ↗</span>
                  </a>
                </div>
              </div>
            </div>

            {/* Right: quick form */}
            <div className="card" style={{ padding: 32 }}>
              {sent ? (
                <div style={{ padding: 40, textAlign: "center" }}>
                  <div style={{ width: 56, height: 56, borderRadius: 999, background: "var(--brand-grad)", display: "grid", placeItems: "center", margin: "0 auto", color: "#fff", fontSize: 24 }}>✓</div>
                  <h3 className="h-2 mt-6">Got it.</h3>
                  <p className="lede mt-3" style={{ margin: "12px auto 0" }}>We'll reply within one business day.</p>
                  <button className="btn btn-ghost mt-6" onClick={() => { setSent(false); setForm({ name: "", email: "", subject: "general", message: "" }); }}>Send another</button>
                </div>
              ) : (
                <>
                  <h2 className="h-2">Quick message</h2>
                  <p style={{ color: "var(--text-soft)", marginTop: 6 }}>Or use the full brief form for a project-scoped enquiry.</p>
                  <div className="mt-6" style={{ display: "grid", gap: 14 }}>
                    <div className="field"><label>Name</label><input value={form.name} onChange={(e)=>setForm({...form,name:e.target.value})} /></div>
                    <div className="field"><label>Email</label><input type="email" value={form.email} onChange={(e)=>setForm({...form,email:e.target.value})} /></div>
                    <div className="field">
                      <label>Subject</label>
                      <select value={form.subject} onChange={(e)=>setForm({...form,subject:e.target.value})}>
                        <option value="general">General enquiry</option>
                        <option value="project">Project brief</option>
                        <option value="partner">Partner / supplier</option>
                        <option value="press">Press / careers</option>
                      </select>
                    </div>
                    <div className="field"><label>Message</label><textarea value={form.message} onChange={(e)=>setForm({...form,message:e.target.value})}/></div>
                  </div>
                  <div className="flex gap-3 mt-6 wrap">
                    <button className="btn btn-primary" onClick={() => setSent(true)}>Send <ArrowR /></button>
                    <button className="btn btn-ghost" onClick={openEnquire}>Or open full brief form</button>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  HomePage, WorkPage, CaseStudyPage, ServicesPage, AboutPage, ClientsPage, ContactPage, WorkCard,
});