// Direction A — "Atelier"
// Warm bone/ink palette. Editorial. Newsreader serif + Inter Tight + JetBrains Mono.
// Calm, trustworthy, with brutalist seams (hard rules, monospace meta).

function Atelier({ density = "regular", dark = false, imprint = "morning", voice = "curator", cadence = "measured" }) {
  const cadencePad = cadence === "slow" ? 112 : cadence === "brisk" ? 56 : 80;
  const pad = density === "compact" ? cadencePad - 24 : density === "comfy" ? cadencePad + 24 : cadencePad;

  const PALETTES = {
    morning: { bg: "#f3eee5", fg: "#1a1714", muted: "rgba(26,23,20,.6)", line: "rgba(26,23,20,.15)", accent: "#a23b1f", soft: "#ebe4d6",
      chatBg: "#fffaf2", chatFg: "#1a1714", chatMuted: "rgba(26,23,20,.55)", chatAccent: "#a23b1f", chatUserBg: "rgba(26,23,20,.04)", chatBorder: "rgba(26,23,20,.1)" },
    late: { bg: "#15110d", fg: "#f1e8d6", muted: "rgba(241,232,214,.55)", line: "rgba(241,232,214,.13)", accent: "#e8a35c", soft: "#1d1812",
      chatBg: "#1d1812", chatFg: "#f1e8d6", chatMuted: "rgba(241,232,214,.5)", chatAccent: "#e8a35c", chatUserBg: "rgba(255,255,255,.04)", chatBorder: "rgba(241,232,214,.12)" },
    linen: { bg: "#faf6ec", fg: "#2a261f", muted: "rgba(42,38,31,.55)", line: "rgba(42,38,31,.12)", accent: "#7a4d2b", soft: "#f1ebdc",
      chatBg: "#ffffff", chatFg: "#2a261f", chatMuted: "rgba(42,38,31,.55)", chatAccent: "#7a4d2b", chatUserBg: "rgba(42,38,31,.035)", chatBorder: "rgba(42,38,31,.1)" },
  };
  const palette = dark ? PALETTES.late : PALETTES[imprint] || PALETTES.morning;
  const cadenceWeight = cadence === "slow" ? 300 : cadence === "brisk" ? 500 : 400;
  const cadenceLeading = cadence === "slow" ? 1.05 : cadence === "brisk" ? 0.92 : 0.98;
  void cadenceWeight; void cadenceLeading;

  const HERO = {
    curator: { eyebrow: "AI Operations for Small Business", l1: "The quiet way", l2: "small businesses", l3: "get into AI.",
      lede: "We set up an AI assistant that runs your back-office work: emails, scheduling, follow-ups, drafts. And we keep it running. You don't touch a thing technical. Ever." },
    confidant: { eyebrow: "A letter, from us", l1: "Look, your shop", l2: "deserves AI", l3: "that just works.",
      lede: "We've watched too many small businesses burn evenings on email and admin. We do all the technical work, then we hand you a working assistant. You stop doing the busywork. That's the deal." },
    field: { eyebrow: "Field Notes · Issue 01", l1: "AI for small biz.", l2: "No theatre.", l3: "Just useful.",
      lede: "Setup. Hosting. Training. Tune-ups. We handle every step. You get a working assistant in under a day. No PDFs. No demos. No 'roadmap.' It works tomorrow morning." },
  };
  const hero = HERO[voice] || HERO.curator;

  const display = "'Newsreader', Georgia, serif";
  const body = "'Inter Tight', system-ui, sans-serif";
  const mono = "'JetBrains Mono', monospace";

  return (
    <div style={{ background: palette.bg, color: palette.fg, fontFamily: body, fontSize: 16, lineHeight: 1.6 }}>
      {/* NAV */}
      <header style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: `24px ${pad}px`, borderBottom: `1px solid ${palette.line}`,
        position: "sticky", top: 0, background: palette.bg, zIndex: 10,
      }}>
        <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ display: "flex", alignItems: "baseline", gap: 14, textDecoration: "none", cursor: "pointer" }}>
          <span style={{ fontFamily: display, fontSize: 24, fontWeight: 600, letterSpacing: "-.02em", color: palette.fg }}>ClawdKnit</span>
          <span style={{ fontFamily: mono, fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: palette.muted }}>Est. 2026 · AI Operations</span>
        </a>
        <nav style={{ display: "flex", gap: 32, fontFamily: mono, fontSize: 12, letterSpacing: ".06em", textTransform: "uppercase" }}>
          <a href="#what" style={{ color: palette.fg, textDecoration: "none" }}>What</a>
          <a href="#how" style={{ color: palette.fg, textDecoration: "none" }}>How</a>
          <a href="#industries" style={{ color: palette.fg, textDecoration: "none" }}>Industries</a>
          <a href="#pricing" style={{ color: palette.fg, textDecoration: "none" }}>Pricing</a>
          <a href="#faq" style={{ color: palette.fg, textDecoration: "none" }}>FAQ</a>
          <a href="#contact" style={{ color: palette.accent, textDecoration: "none" }}>Book →</a>
        </nav>
      </header>

      {/* HERO */}
      <section style={{ padding: `${pad}px ${pad}px ${pad * 1.2}px`, borderBottom: `1px solid ${palette.line}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <FadeUp delay={0} duration={600}>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 32 }}>
              {hero.eyebrow}
            </div>
            </FadeUp>
            <h1 style={{
              fontFamily: display, fontSize: cadence === "slow" ? "clamp(64px, 8vw, 128px)" : cadence === "brisk" ? "clamp(48px, 6.4vw, 96px)" : "clamp(56px, 7.2vw, 112px)",
              fontWeight: cadence === "slow" ? 300 : cadence === "brisk" ? 500 : 400,
              lineHeight: cadence === "slow" ? 1.05 : cadence === "brisk" ? 0.94 : 0.98,
              letterSpacing: "-.025em", margin: 0,
              textWrap: "balance",
            }}>
              <Reveal>{hero.l1}</Reveal><br />
              <Reveal><em style={{ fontStyle: "italic", color: palette.accent }}>{hero.l2}</em></Reveal><br />
              <Reveal>{hero.l3}</Reveal>
            </h1>
            <FadeUp delay={400}>
            <p style={{ marginTop: 32, fontSize: 19, lineHeight: 1.55, maxWidth: 520, color: palette.muted }}>
              {hero.lede}
            </p>
            </FadeUp>
            <FadeUp delay={550}>
            <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
              <a href="#contact" style={{
                display: "inline-block", padding: "16px 28px",
                background: palette.fg, color: palette.bg,
                fontFamily: mono, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase",
                textDecoration: "none",
              }}>Book a free consultation →</a>
              <span style={{ fontFamily: mono, fontSize: 12, color: palette.muted, letterSpacing: ".05em" }}>
                30 minutes · Free · Real numbers, real timeline
              </span>
            </div>
            </FadeUp>
          </div>

          <div>
            <FadeUp delay={300} duration={800}>
            <AnimatedChat palette={palette} mono={mono} body={body} />
            </FadeUp>
          </div>
        </div>

        {/* Marquee facts */}
        <FadeUp>
        <div style={{
          marginTop: pad, paddingTop: 56, borderTop: `1px solid ${palette.line}`,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
        }}>
          {[
            ["$999", "one-time setup", "covers everything"],
            ["$15/mo", "starting hosting", "cancel anytime"],
            ["24/7", "support", "day or night"],
            ["< 1 day", "to live", "from kickoff"],
          ].map(([n, l, s]) => (
            <div key={l} style={{ paddingRight: 24, borderRight: `1px solid ${palette.line}` }}>
              <div style={{ fontFamily: display, fontSize: 40, fontWeight: 500, lineHeight: 1, letterSpacing: "-.02em" }}>{n}</div>
              <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase", color: palette.muted, marginTop: 10 }}>{l}</div>
              <div style={{ fontSize: 13, color: palette.muted, marginTop: 4 }}>{s}</div>
            </div>
          ))}
        </div>
        </FadeUp>
      </section>

      {/* WHAT WE DO */}
      <section id="what" style={{ padding: `${pad * 1.2}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
        <FadeUp>
        <div style={{ display: "grid", gridTemplateColumns: "0.6fr 1.4fr", gap: 80 }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>§ I · What We Do</div>
            <h2 style={{ fontFamily: display, fontSize: 48, fontWeight: 400, lineHeight: 1.05, letterSpacing: "-.02em", margin: 0 }}>
              Three things, <em style={{ color: palette.accent }}>done well.</em>
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {[
              { n: "01", price: "Free", title: "Consultation", body: "Thirty minutes on a call. We learn how your business runs, where time leaks, where AI fits. We'll show you what we'd build, what it costs, and what you'd get back." },
              { n: "02", price: "$999 once", title: "Turnkey setup", body: "Installation, configuration, API keys, integrations with the tools you already use: Slack, Microsoft 365, Google Workspace, Notion, your CRM. You're live in under a day." },
              { n: "03", price: "From $15/mo", title: "Ongoing care", body: "We host it, monitor it, update it, optimize it. You forget it exists, except when it saves your team three hours a day. Two-week onboarding. $75 tune-ups when you need them." },
            ].map((s) => (
              <div key={s.n} style={{
                display: "grid", gridTemplateColumns: "60px 1fr 200px",
                gap: 24, padding: "32px 0", borderTop: `1px solid ${palette.line}`,
                alignItems: "baseline",
              }}>
                <div style={{ fontFamily: mono, fontSize: 12, color: palette.muted, letterSpacing: ".1em" }}>{s.n} /</div>
                <div>
                  <div style={{ fontFamily: display, fontSize: 32, fontWeight: 500, marginBottom: 10, letterSpacing: "-.01em" }}>{s.title}</div>
                  <div style={{ color: palette.muted, fontSize: 16, maxWidth: 560 }}>{s.body}</div>
                </div>
                <div style={{ fontFamily: mono, fontSize: 13, letterSpacing: ".05em", color: palette.accent, textAlign: "right" }}>{s.price}</div>
              </div>
            ))}
          </div>
        </div>
        </FadeUp>
      </section>

      {/* SUPPORT BANNER */}
      <section style={{ padding: `${pad * 0.7}px ${pad}px`, background: palette.fg, color: palette.bg, borderBottom: `1px solid ${palette.line}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ fontFamily: display, fontSize: 36, fontWeight: 400, lineHeight: 1.2, letterSpacing: "-.015em" }}>
            Every client gets <em style={{ color: palette.accent }}>24/7 support</em>, two weeks of hands-on guidance, and $75 optimization sessions when you need them.
          </div>
          <div style={{ fontFamily: mono, fontSize: 13, letterSpacing: ".05em", opacity: .7, textAlign: "right" }}>
            DAY OR NIGHT. WE'RE HERE.
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="how" style={{ padding: `${pad * 1.2}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
        <FadeUp>
        <div style={{ marginBottom: 64, display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 32 }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>§ II · How It Works</div>
            <h2 style={{ fontFamily: display, fontSize: 56, fontWeight: 400, lineHeight: 1, letterSpacing: "-.02em", margin: 0 }}>
              From <em style={{ color: palette.accent }}>"hello"</em> to live, <br/>in under a day.
            </h2>
          </div>
          <div style={{ fontFamily: mono, fontSize: 12, color: palette.muted, letterSpacing: ".06em", maxWidth: 280, textAlign: "right" }}>
            FOUR STEPS. NO SURPRISES.<br />
            NO LOCK-IN. <br/>YOUR TOOLS, YOUR DATA, YOUR ASSISTANT.
          </div>
        </div>
        </FadeUp>
        <FadeUp delay={150}>
        <ProcessFlow palette={palette} mono={mono} display={display} />
        </FadeUp>
      </section>

      {/* INDUSTRIES */}
      <section id="industries" style={{ padding: `${pad * 1.2}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
        <FadeUp>
        <div style={{ marginBottom: 64, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>§ III · Where It Fits</div>
            <h2 style={{ fontFamily: display, fontSize: 56, fontWeight: 400, lineHeight: 1, letterSpacing: "-.02em", margin: 0 }}>
              Built <em style={{ color: palette.accent }}>for businesses</em> like yours.
            </h2>
          </div>
          <p style={{ color: palette.muted, fontSize: 16, lineHeight: 1.6, maxWidth: 460, margin: 0 }}>
            Hover or click to see what we typically build first for each. Don't see yours?{" "}
            <a href="#contact" style={{ color: palette.accent, textDecoration: "underline" }}>Let's talk.</a>
          </p>
        </div>
        </FadeUp>
        <FadeUp delay={120}>
        <IndustryShowcase palette={palette} mono={mono} display={display} body={body} />
        </FadeUp>
      </section>

      {/* PRICING */}
      <section id="pricing" style={{ padding: `${pad * 1.2}px ${pad}px`, borderBottom: `1px solid ${palette.line}`, background: palette.soft }}>
        <FadeUp>
        <div style={{ marginBottom: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>§ IV · Pricing</div>
            <h2 style={{ fontFamily: display, fontSize: 64, fontWeight: 400, lineHeight: 1, letterSpacing: "-.02em", margin: 0 }}>
              Pay <em style={{ color: palette.accent }}>monthly</em>, or <em style={{ color: palette.accent }}>own it.</em>
            </h2>
          </div>
          <p style={{ color: palette.muted, fontSize: 17, lineHeight: 1.6, maxWidth: 480, marginBottom: 8 }}>
            Cloud hosting is the easiest way to start: month-to-month, no contracts. If you'd rather own the hardware outright and never pay hosting again, we'll set you up with a Mini Server, Mac Mini, or your own machine.
          </p>
        </div>
        </FadeUp>
        <FadeUp delay={120}>
        <PricingComparison palette={palette} mono={mono} display={display} />
        </FadeUp>
        <div style={{ marginTop: 32, fontFamily: mono, fontSize: 12, color: palette.muted, letterSpacing: ".05em" }}>
          * YOU PAY OUR SETUP FEE + YOUR OWN API KEYS (WE HELP SET THOSE UP). NO HIDDEN COSTS. NO MARKUP.
        </div>
      </section>

      {/* WHY US */}
      <section style={{ padding: `${pad * 1.2}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <div>
            <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>§ V · Why Us</div>
            <h2 style={{ fontFamily: display, fontSize: 56, fontWeight: 400, lineHeight: 1, letterSpacing: "-.02em", margin: 0 }}>
              We build it<br />
              <em style={{ color: palette.accent }}>around you</em>,<br />
              not the other way around.
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {[
              { t: "Your tools, your data, your keys.", b: "We help you set up your own API keys with your providers. You own them. There's no version of us where we hold the keys to your business." },
              { t: "Open-source under the hood.", b: "Built on OpenClaw, the leading open-source AI assistant platform. No vendor lock-in. If we ever part ways, you keep what we built." },
              { t: "Real humans, on call.", b: "24/7 means a person, not a chatbot. Two weeks of hands-on guidance after launch. $75 tune-ups whenever your workflows shift." },
              { t: "We refuse to oversell.", b: "If AI isn't right for the job, we'll tell you. Our consultation has a 30% 'no, don't do this yet' rate. We sleep better that way." },
            ].map((w, i) => (
              <div key={i} style={{ padding: "24px 0", borderTop: `1px solid ${palette.line}`, display: "grid", gridTemplateColumns: "40px 1fr", gap: 16 }}>
                <div style={{ fontFamily: mono, fontSize: 12, color: palette.accent }}>0{i + 1}</div>
                <div>
                  <div style={{ fontFamily: display, fontSize: 22, fontWeight: 500, marginBottom: 6, letterSpacing: "-.01em" }}>{w.t}</div>
                  <div style={{ color: palette.muted, fontSize: 15 }}>{w.b}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" style={{ padding: `${pad * 1.2}px ${pad}px`, borderBottom: `1px solid ${palette.line}` }}>
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", color: palette.muted, textTransform: "uppercase", marginBottom: 16 }}>§ VI · Questions, Answered</div>
          <h2 style={{ fontFamily: display, fontSize: 56, fontWeight: 400, lineHeight: 1, letterSpacing: "-.02em", margin: 0 }}>The honest answers.</h2>
        </div>
        <FAQ palette={palette} mono={mono} display={display} />
      </section>

      {/* CONTACT */}
      <section id="contact" style={{ padding: `${pad * 1.4}px ${pad}px`, background: palette.fg, color: palette.bg, textAlign: "center" }}>
        <FadeUp>
        <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".15em", opacity: .55, textTransform: "uppercase", marginBottom: 32 }}>§ VII · Begin</div>
        <h2 style={{ fontFamily: display, fontSize: "clamp(56px, 8vw, 124px)", fontWeight: 400, lineHeight: .95, letterSpacing: "-.025em", margin: 0, maxWidth: 1100, marginInline: "auto" }}>
          Ready to see what AI <em style={{ color: palette.accent }}>actually</em> does for your business?
        </h2>
        </FadeUp>
        <p style={{ marginTop: 32, fontSize: 18, opacity: .65, maxWidth: 580, marginInline: "auto" }}>
          A free 30-minute consultation. We'll talk through your workflows, show you what we'd build, and quote you a real number. If it's not the right fit, we'll tell you.
        </p>
        <div style={{ marginTop: 48, display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
          <a href="mailto:contact@clawdknit.com" style={{
            display: "inline-block", padding: "20px 40px",
            background: palette.accent, color: palette.bg,
            fontFamily: mono, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase",
            textDecoration: "none",
          }}>Book Consultation →</a>
          <a href="mailto:contact@clawdknit.com" style={{
            display: "inline-block", padding: "20px 40px",
            background: "transparent", color: palette.bg, border: `1px solid ${palette.bg}`,
            fontFamily: mono, fontSize: 13, letterSpacing: ".08em", textTransform: "uppercase",
            textDecoration: "none",
          }}>contact@clawdknit.com</a>
        </div>
      </section>
      <style>{`
        html { scroll-behavior: smooth; }
      `}</style>

      {/* FOOTER */}
      <footer style={{ padding: `40px ${pad}px`, fontFamily: mono, fontSize: 11, letterSpacing: ".06em", color: palette.muted, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, textTransform: "uppercase" }}>
        <span>© 2026 ClawdKnit · AI Operations for Small Business</span>
        <span>Powered by OpenClaw · <a href="blog/index.html" style={{ color: palette.muted }}>Blog</a> · <a href="#" style={{ color: palette.muted }}>Privacy</a></span>
      </footer>
    </div>
  );
}

function IndustryCell({ ind, palette, display, mono }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      padding: 32, borderRight: `1px solid ${palette.line}`, borderBottom: `1px solid ${palette.line}`,
      background: hover ? palette.fg : "transparent",
      color: hover ? palette.bg : palette.fg,
      transition: "background .25s, color .25s", cursor: "default", minHeight: 200,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
    }}>
      <div>
        <div style={{ fontFamily: mono, fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", opacity: .55, marginBottom: 16 }}>Sector</div>
        <div style={{ fontFamily: display, fontSize: 26, fontWeight: 500, lineHeight: 1.15, letterSpacing: "-.01em" }}>{ind.name}</div>
      </div>
      <div style={{ fontSize: 14, lineHeight: 1.55, marginTop: 24, opacity: hover ? .8 : .65 }}>{ind.body}</div>
    </div>
  );
}

window.Atelier = Atelier;