// Page shell for sub-pages — reuses Nav/Footer/Tweaks. Apps just provide their content.

function PageShell({ active, children }) {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "theme": "light",
    "accent": "#0369A1"
  }/*EDITMODE-END*/);
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.theme, t.accent]);

  return (
    <React.Fragment>
      <Nav active={active} />
      <main>{children}</main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={t.theme}
            options={[{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }]}
            onChange={v => setTweak("theme", v)} />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakColor label="Color" value={t.accent} onChange={v => setTweak("accent", v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

// Generic service detail layout
function ServiceDetail({ tag, title, sub, deliverables, languages, extras, cta, sideTitle = "What we deliver" }) {
  return (
    <React.Fragment>
      <PageHeader
        eyebrow={tag}
        title={title}
        sub={sub}
        meta={
          <React.Fragment>
            <span className="tick">Ready in days, not weeks</span>
            <span className="tick">Provenance on every datapoint</span>
            <span style={{ color: "var(--ink-4)" }}>vraify / pipeline</span>
          </React.Fragment>
        }
      />
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64 }}>
            <div>
              <span className="eyebrow">{sideTitle}</span>
              <p style={{ marginTop: 18, color: "var(--ink-3)", fontSize: 14, lineHeight: 1.5 }}>
                Spec, deliver, verify. Every engagement scoped with your post-training team.
              </p>
            </div>
            <div>
              {deliverables.map((group, i) => (
                <div key={i} style={{ marginBottom: 48 }}>
                  <h3 style={{ fontSize: 22, marginBottom: 18, letterSpacing: "-0.02em" }}>{group.title}</h3>
                  <ChecklistGrid items={group.items} columns={2} />
                </div>
              ))}
              {languages && (
                <div style={{ marginTop: 48 }}>
                  <span className="eyebrow">Coverage</span>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 18 }}>
                    {languages.map(l => <span key={l} className="badge">{l}</span>)}
                  </div>
                </div>
              )}
              {extras}
            </div>
          </div>
        </div>
      </section>
      <CTASection
        eyebrow="Next step"
        title={cta.title}
        desc={cta.desc}
        primary={{ label: cta.btn, href: "contact.html" }}
        secondary={{ label: "All services", href: "services.html" }}
      />
    </React.Fragment>
  );
}

Object.assign(window, { PageShell, ServiceDetail });