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

const SERVICES = [
  {
    n: "01",
    icon: <I.Compass size={26} stroke={1.4}/>,
    title: "Brand identity",
    headline: "Strategy, naming, and the systems that make every dollar work harder.",
    blurb: "We build brands from the inside out — narrative first, design second, deployment third. Most engagements run 6–10 weeks and result in a brand strategy doc, a complete visual identity and a working guidelines site.",
    deliverables: ["Positioning & narrative", "Naming & messaging", "Logo, wordmark & marks", "Type system & motion", "Color, illustration & photography direction", "Brand guidelines site"],
    process: ["Brand discovery — 2 wks", "Strategy & direction — 2 wks", "Design system — 3 wks", "Launch package — 1 wk"],
    starts: "$24,000",
    pace: "6–10 weeks",
    cases: ["Halocene", "Northvane", "Verdant Co."]
  },
  {
    n: "02",
    icon: <I.Layers size={26} stroke={1.4}/>,
    title: "Digital product",
    headline: "Marketing sites, e-commerce and tooling — designed and built in the same room.",
    blurb: "Whether it's a 4-page launch site or a multi-region commerce build, our design and engineering team works as one. We ship in two-week sprints with Friday demos so you see the work as it grows.",
    deliverables: ["Discovery & sitemap", "UX wireframes", "Visual design system", "Next.js / Webflow build", "CMS (Sanity, Contentful, Shopify)", "Analytics & SEO setup"],
    process: ["Discovery — 1 wk", "Design sprints — 4–6 wks", "Build sprints — 4–8 wks", "Launch — 1 wk"],
    starts: "$48,000",
    pace: "10–16 weeks",
    cases: ["MeinHaus", "Wikistrings", "AMPS"]
  },
  {
    n: "03",
    icon: <I.Megaphone size={26} stroke={1.4}/>,
    title: "Growth marketing",
    headline: "Paid, SEO, lifecycle and content — operated as one system.",
    blurb: "Most growth teams optimise channels. We optimise the system. We run paid, SEO, lifecycle and content as a single budget against a single revenue number — measured monthly, not quarterly.",
    deliverables: ["Growth audit & forecast", "Paid social & search", "SEO & content engine", "Lifecycle / CRM automation", "Attribution & dashboards", "Monthly review"],
    process: ["Audit — 2 wks", "Setup & creative — 3 wks", "Always-on — monthly retainer"],
    starts: "$12,000 / mo",
    pace: "Min. 6-month retainer",
    cases: ["Verdant Co.", "AMPS"]
  },
  {
    n: "04",
    icon: <I.Camera size={26} stroke={1.4}/>,
    title: "Content & film",
    blurb: "Editorial, photography, motion design and 3D — production in-house. We treat content as part of brand, not a campaign deliverable.",
    headline: "Editorial, motion and CGI — in-house, on-brand, on-time.",
    deliverables: ["Brand films & ads", "Photography direction", "Motion design / 3D / CGI", "Editorial design", "Social content engines", "Production management"],
    process: ["Concept — 1 wk", "Pre-prod — 2 wks", "Shoot / production — 1–3 wks", "Post & delivery — 2 wks"],
    starts: "$18,000",
    pace: "4–8 weeks per drop",
    cases: ["Halocene", "Northvane"]
  },
  {
    n: "05",
    icon: <I.Code size={26} stroke={1.4}/>,
    title: "Engineering",
    headline: "Fast, accessible, search-friendly products on modern stacks.",
    blurb: "Our engineering team works in TypeScript across Next.js, React Native and Node. We've built everything from a custom CMS to a real-time bidding tool — usually with a Lighthouse score above 95.",
    deliverables: ["Next.js / TypeScript", "Shopify & Sanity", "React Native apps", "Performance & SEO", "Accessibility (WCAG AA)", "AI integrations"],
    process: ["Tech discovery — 1 wk", "Architecture — 1 wk", "Build sprints — variable", "Hardening — 2 wks"],
    starts: "$36,000",
    pace: "Project-based or weekly",
    cases: ["MeinHaus", "Wikistrings"]
  },
  {
    n: "06",
    icon: <I.Sparkles size={26} stroke={1.4}/>,
    title: "AI workflows",
    headline: "Practical AI for content, ops, support and personalisation.",
    blurb: "We build small, useful AI workflows — not theatre. Think a private RAG search over your docs, a brand-tuned copy assistant, or an internal tool that turns customer calls into structured insight.",
    deliverables: ["Workflow audit", "RAG / vector search", "Brand-tuned LLM assistants", "Internal tools", "Eval & monitoring"],
    process: ["Audit & scoping — 1 wk", "Prototype — 2 wks", "Build & integrate — 4–6 wks", "Eval & handover — 1 wk"],
    starts: "$28,000",
    pace: "6–10 weeks",
    cases: ["AMPS", "Northvane"]
  },
];

function ServicesIntro({ accent }) {
  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="si-grid">
          <Reveal>
            <div style={{ position: "sticky", top: 120 }}>
              <span className="kicker"><span className="dot"/> What we do</span>
              <h2 className="font-serif" style={{ fontSize: 56, lineHeight: 1, letterSpacing: "-0.02em", marginTop: 22, marginBottom: 24 }}>
                Six<br/>capabilities.
              </h2>
              <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 16, lineHeight: 1.6, marginBottom: 32 }}>
                We don&rsquo;t sell departments. We sell outcomes &mdash; and the six teams that get you there.
              </p>
              <div style={{ display: "grid", gap: 4 }}>
                {SERVICES.map(s => (
                  <a key={s.n} href={`#s-${s.n}`} style={{
                    color: "rgba(255,255,255,0.75)", textDecoration: "none",
                    padding: "12px 0", borderTop: "1px solid rgba(255,255,255,0.06)",
                    display: "flex", alignItems: "center", gap: 12, fontSize: 14
                  }}>
                    <span className="font-mono" style={{ color: accent[0], fontSize: 12 }}>{s.n}</span>
                    {s.title}
                  </a>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: "grid", gap: 80 }}>
              {SERVICES.map((s, i) => (
                <ServiceBlock key={s.n} s={s} accent={accent} idx={i}/>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 880px){ .si-grid{ grid-template-columns: 1fr !important; gap: 40px !important; } .si-grid > div:first-child > div{ position: static !important; } }`}</style>
    </section>
  );
}

function ServiceBlock({ s, accent, idx }) {
  return (
    <div id={`s-${s.n}`} style={{ scrollMarginTop: 120 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 22 }}>
        <div style={{
          width: 52, height: 52, borderRadius: 14,
          background: `linear-gradient(135deg, ${accent[0]}26, ${accent[2]}26)`,
          border: "1px solid rgba(255,255,255,0.1)",
          display: "flex", alignItems: "center", justifyContent: "center", color: "#fff"
        }}>{s.icon}</div>
        <div className="font-mono" style={{ color: accent[0], fontSize: 13, letterSpacing: "0.2em" }}>{s.n}</div>
      </div>
      <h3 className="font-serif" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", lineHeight: 1.02, letterSpacing: "-0.022em", marginBottom: 18 }}>{s.title}</h3>
      <p className="font-serif" style={{ fontSize: 26, lineHeight: 1.25, letterSpacing: "-0.01em", color: "rgba(255,255,255,0.85)", marginBottom: 22, maxWidth: 680 }}>{s.headline}</p>
      <p style={{ color: "rgba(255,255,255,0.62)", fontSize: 16, lineHeight: 1.65, marginBottom: 36, maxWidth: 680 }}>{s.blurb}</p>

      <div className="liquid-glass-strong" style={{ borderRadius: 22, padding: 28, marginBottom: 18 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36 }} className="sb-grid">
          <div>
            <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 16 }}>What you get</div>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 10 }}>
              {s.deliverables.map(d => (
                <li key={d} style={{ display: "flex", alignItems: "center", gap: 10, color: "rgba(255,255,255,0.85)", fontSize: 14 }}>
                  <span style={{ width: 14, height: 14, borderRadius: 99, border: `1px solid ${accent[0]}`, display: "flex", alignItems: "center", justifyContent: "center", color: accent[0], flexShrink: 0 }}>
                    <I.Check size={9} stroke={2.4}/>
                  </span>
                  {d}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 16 }}>How we work</div>
            <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 10, counterReset: "step" }}>
              {s.process.map((p, k) => (
                <li key={p} style={{ display: "flex", alignItems: "start", gap: 10, color: "rgba(255,255,255,0.85)", fontSize: 14 }}>
                  <span className="font-mono" style={{ color: "rgba(255,255,255,0.45)", fontSize: 12, flexShrink: 0, minWidth: 20 }}>0{k+1}</span>
                  {p}
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div className="liquid-glass" style={{ borderRadius: 18, padding: "20px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 4 }}>Starts at</div>
            <div className="font-serif" style={{ fontSize: 32, color: "#fff", letterSpacing: "-0.02em" }}>{s.starts}</div>
          </div>
          <I.Sparkles size={20} stroke={1.5} style={{ color: accent[0] }}/>
        </div>
        <div className="liquid-glass" style={{ borderRadius: 18, padding: "20px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 4 }}>Pace</div>
            <div style={{ fontSize: 17, color: "#fff" }}>{s.pace}</div>
          </div>
          <I.Compass size={20} stroke={1.5} style={{ color: accent[1] }}/>
        </div>
      </div>

      <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
        <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 14, display: "flex", gap: 8, alignItems: "center" }}>
          Selected work:&nbsp;
          {s.cases.map((c, k) => (
            <span key={c} style={{ color: "rgba(255,255,255,0.85)" }}>{c}{k < s.cases.length - 1 ? "," : ""}</span>
          ))}
        </div>
        <a href="contact.html" className="btn-ghost">Enquire about {s.title.toLowerCase()} <I.ArrowUpRight size={14} stroke={2}/></a>
      </div>
      <style>{`@media (max-width: 600px){ .sb-grid{ grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </div>
  );
}

function ToolsStack({ accent }) {
  const groups = [
    { label: "Design", tools: ["Figma", "Cinema 4D", "After Effects", "Photoshop", "Illustrator", "Webflow"] },
    { label: "Engineering", tools: ["Next.js", "TypeScript", "Node", "Shopify", "Sanity", "Vercel", "Supabase"] },
    { label: "Growth", tools: ["Meta Ads", "Google Ads", "Klaviyo", "Mailchimp", "Mixpanel", "Posthog"] },
    { label: "AI", tools: ["OpenAI", "Anthropic", "LangChain", "Pinecone", "Replicate", "HuggingFace"] },
  ];
  return (
    <section className="section" style={{ background: "#0d0d12" }}>
      <div className="container">
        <Reveal>
          <span className="kicker"><span className="dot"/> Tooling</span>
          <h2 className="section-title" style={{ marginTop: 22, marginBottom: 56, maxWidth: 800 }}>
            The boring list of <span className="italic-serif" style={{ color: "rgba(255,255,255,0.5)" }}>what we use</span>.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gap: 0 }}>
          {groups.map((g, i) => (
            <Reveal key={g.label} delay={i*60}>
              <div style={{ padding: "32px 0", borderTop: "1px solid rgba(255,255,255,0.08)", display: "grid", gridTemplateColumns: "200px 1fr", gap: 32 }} className="tool-row">
                <div className="font-mono" style={{ color: "rgba(255,255,255,0.5)", fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase" }}>{g.label}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {g.tools.map(t => <span key={t} className="tag-chip" style={{ fontSize: 14 }}>{t}</span>)}
                </div>
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}/>
        </div>
      </div>
      <style>{`@media (max-width: 760px){ .tool-row{ grid-template-columns: 1fr !important; gap: 16px !important; } }`}</style>
    </section>
  );
}

function ServicesApp() {
  const t = useSiteTweaks(TWEAK_DEFAULTS_SERVICES);
  const accent = PALETTES[t.palette] || PALETTES.aurora;
  return (
    <SiteChrome accent={accent} t={t}>
      <PageHero
        accent={accent}
        eyebrow="Services"
        title="One studio."
        italic="Six"
        suffix="capabilities."
        sub="From a single brand mark to a multi-year growth retainer &mdash; the work is run by the same senior team, in the same room, against the same revenue number."
      >
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a href="contact.html" className="btn-primary">Start a project <I.Arrow size={16} stroke={2}/></a>
          <a href="work.html" className="btn-ghost">See the work</a>
        </div>
      </PageHero>

      <ServicesIntro accent={accent}/>
      <Process accent={accent}/>
      <ToolsStack accent={accent}/>
      <Testimonials accent={accent}/>
      <CTABand accent={accent} title="Pick a capability,<br/>or pick us." cta="Send a project brief"/>
    </SiteChrome>
  );
}

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