// Pipewerk — working interactive site prototype
// Multi-page nav, real diagnostic flow with state, animated transitions

const { useState, useEffect, useRef } = React;

// ─── Nav ───────────────────────────────────────────────────────────────
function Nav({ route, go, markColor, ctaColor }) {
  const links = [
  { key: "home", label: "Home" },
  { key: "how", label: "How it works" },
  { key: "practices", label: "Products & Services" },
  { key: "bespoke", label: "Enterprise" }];

  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="nav-logo" onClick={() => go("home")} style={{ cursor: "pointer" }}>
          {markColor ? <PWMark size={40} color={markColor} /> : <PWMark size={40} />}
          <span className="wm" style={{ fontSize: 24 }}>pipewerk</span>
        </a>
        <nav className="nav-links">
          {links.map((l) =>
          <span key={l.key} className={"nav-link" + (route === l.key ? " active" : "")} onClick={() => go(l.key)}>{l.label}</span>
          )}
        </nav>
        <button className="nav-cta" onClick={() => go("register")} style={ctaColor ? { background: ctaColor } : null}>Register interest →</button>
      </div>
    </header>);

}

// ─── Footer ─────────────────────────────────────────────────────────────
function Footer({ go }) {
  return (
    <footer>
      <div className="container">
        <div>
          <span className="mono" style={{ opacity: 0.55 }}>04 — Begin</span>
          <h2 style={{ marginTop: 18 }}>Tell us where the <span className="em">hours</span> go.</h2>
          <p className="lede" style={{ color: "var(--paper-dark)", opacity: 0.7, marginTop: 18, maxWidth: 460 }}>
            A few quick questions about your firm. We'll be in touch when the first cohort opens.
          </p>
          <button className="btn btn-primary" style={{ marginTop: 28, background: "var(--paper-dark)", color: "var(--ink)" }} onClick={() => go("register")}>
            Register interest <span className="arrow">→</span>
          </button>
        </div>
        <div className="col">
          <span className="label">Contact</span>
          <a>hello@pipewerk.com</a>
          <a>+44 20 4524 1180</a>
          <a>34 Hatton Garden, London EC1N</a>
        </div>
        <div className="col">
          <span className="label">Site</span>
          <a onClick={() => go("home")} style={{ cursor: "pointer" }}>Home</a>
          <a onClick={() => go("how")} style={{ cursor: "pointer" }}>How it works</a>
          <a onClick={() => go("practices")} style={{ cursor: "pointer" }}>Practices</a>
          <a onClick={() => go("bespoke")} style={{ cursor: "pointer" }}>Enterprise</a>
        </div>
      </div>
      <div className="container">
        <div className="copy">
          <span>© PIPEWERK LTD · 2026 · LONDON</span>
          <span>Operating system for professional firms</span>
        </div>
      </div>
    </footer>);

}

// ─── HOME ───────────────────────────────────────────────────────────────
// Per-product accent colors — same tonal weight as forest, different hue
const PRODUCT_COLORS = {
  property: "#a14b2c", // terracotta
  legal: "#1f3a6b", // slate navy
  accounting: "#1f7a52", // green (signature)
  recruitment: "#6b2d4f" // aubergine
};

// Per-product mini lockup — recolors the mark gradient + wordmark
function ProductLockup({ slug, size = 28 }) {
  const color = PRODUCT_COLORS[slug];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: size * 0.34, color }}>
      <PWMark size={size * 1.35} color={color} />
      <span style={{ fontFamily: "'Geist', sans-serif", fontWeight: 600, fontSize: size * 0.84, letterSpacing: "-0.045em", lineHeight: 1 }}>pipewerk</span>
    </span>);

}

function Home({ go }) {
  const practices = [
  { key: "property", title: "Property", chips: ["Tenant chase", "Deposits", "Compliance"], body: "Tenant chase, deposit returns, completion handovers — sent without you." },
  { key: "legal", title: "Legal", chips: ["KYC & conflicts", "Bill prep", "File close"], body: "Conflict checks, KYC packs, matter set-up — ready before the kettle." },
  { key: "accounting", title: "Accounting", chips: ["Reconciliation", "Statements", "VAT prep"], body: "Bank feeds, supplier statements, month-end close — done by the 1st." },
  { key: "recruitment", title: "Recruitment", chips: ["Job posting", "Candidate chase", "Compliance"], body: "Job ads, candidate follow-ups, compliance checks — placed without the paperwork." }];

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-meta mono">
            <span></span>
            <span>FOR PROFESSIONAL FIRMS</span>
          </div>
          <h1>
            Quietly,<br />your back office<br /><span className="em">runs itself.</span>
          </h1>
          <p className="lede" style={{ marginTop: 32 }}>
            We design the bits of your firm that quietly hold everything together — the chases, the file opens, the reconciliations — and we make them disappear into the background of your day.
          </p>
          <div className="hero-foot">
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={() => go("register")}>Register interest <span className="arrow">→</span></button>
              <button className="btn btn-ghost" onClick={() => go("how")}>How it works</button>
            </div>
            <div style={{ maxWidth: 360, borderLeft: "2px solid var(--green)", paddingLeft: 18 }}>
              <span className="mono" style={{ opacity: 0.55, display: "block", marginBottom: 8 }}>Now</span>
              <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.3 }}>
                Designing the first four products with a small group of partner firms. <span className="em">Cohort opens 2026.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRACTICES */}
      <section>
        <div className="container">
          <span className="mono eyebrow">01 — Products & Services</span>
          <h2>Built for the way <span className="em">you</span> work.</h2>
          <p className="lede" style={{ marginTop: 18 }}>
            A product for each kind of firm. Plus an enterprise engagement for everything in between.
          </p>
          <div className="practices">
            {practices.map((p) =>
            <div key={p.key} className="practice" onClick={() => go("practice:" + p.key)} style={{ borderTop: `3px solid ${PRODUCT_COLORS[p.key]}` }}>
                <div className="practice-head">
                  <ProductLockup slug={p.key} size={22} />
                  <span className="practice-unit">In design · 2026</span>
                </div>
                <div style={{ fontFamily: "'Geist', sans-serif", fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", color: PRODUCT_COLORS[p.key] }}>for {p.title}</div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }}>
                  {p.chips.map((c) =>
                  <span key={c} className="mono" style={{ fontSize: 10, padding: "5px 10px", borderRadius: 999, border: `1px solid ${PRODUCT_COLORS[p.key]}33`, color: PRODUCT_COLORS[p.key], letterSpacing: "0.08em" }}>{c}</span>
                  )}
                </div>
                <div className="practice-title" style={{ fontSize: 22, fontWeight: 500 }}>{p.title === "Property" ? "Tenant chase, sent." : p.title === "Legal" ? "Files open on the same day." : p.title === "Accounting" ? "Month-end ends on the 1st." : "Projects move themselves along."}</div>
                <div className="practice-body">{p.body}</div>
                <div className="practice-cta mono" style={{ color: PRODUCT_COLORS[p.key] }}>Explore →</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section className="band-dark">
        <div className="container">
          <div>
            <span className="mono accent">02 — How we think</span>
            <div style={{ fontSize: 38, fontWeight: 500, lineHeight: 1.15, letterSpacing: "-0.02em", marginTop: 22, maxWidth: "22ch" }}>
              We work in the background. <span className="em">You work on the firm.</span>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 22, alignSelf: "center" }}>
            <div style={{ borderLeft: "2px solid var(--green)", paddingLeft: 18 }}>
              <span className="mono" style={{ opacity: 0.55, display: "block", marginBottom: 6 }}>One</span>
              <div style={{ fontSize: 17, lineHeight: 1.4, opacity: 0.9 }}>Hours, not features. We talk about time back, not tooling.</div>
            </div>
            <div style={{ borderLeft: "2px solid var(--green)", paddingLeft: 18 }}>
              <span className="mono" style={{ opacity: 0.55, display: "block", marginBottom: 6 }}>Two</span>
              <div style={{ fontSize: 17, lineHeight: 1.4, opacity: 0.9 }}>Your stack stays. We fit around it; we don't replace it.</div>
            </div>
            <div style={{ borderLeft: "2px solid var(--green)", paddingLeft: 18 }}>
              <span className="mono" style={{ opacity: 0.55, display: "block", marginBottom: 6 }}>Three</span>
              <div style={{ fontSize: 17, lineHeight: 1.4, opacity: 0.9 }}>Partner-level only. No demos, no SDRs, no funnel.</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="tight">
        <div className="container">
          <div className="diag-cta">
            <div className="pitch">
              <span className="mono eyebrow">03 — Begin</span>
              <h2>Tell us about your firm. <span className="em">We'll be in touch when we open.</span></h2>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <button className="btn btn-primary" onClick={() => go("register")}>Register interest <span className="arrow">→</span></button>
              <span style={{ fontSize: 13, opacity: 0.6 }}>A few quick questions. We'll be in touch.</span>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ─── HOW IT WORKS ───────────────────────────────────────────────────────
function How({ go }) {
  const steps = [
  { n: "01", title: "We sit with you for a day.", body: "Partners, ops, the person who actually sends the chasers. We watch where the hours go." },
  { n: "02", title: "We design the quiet system.", body: "Tailored to your matter types, regulators and tools. Built around how your firm already works — not how a SaaS says it should." },
  { n: "03", title: "It runs in the background.", body: "Tenants get chased. Files get opened. Reconciliations close themselves. You notice the time you have back, not the system that gave it." }];

  return (
    <main>
      <section className="hero">
        <div className="container">
          <span className="mono eyebrow">How it works</span>
          <h1 style={{ fontSize: "clamp(48px, 7vw, 108px)" }}>Three weeks in. <span className="em">Quiet thereafter.</span></h1>
          <p className="lede" style={{ marginTop: 28 }}>We don't sell software. We design the boring bits of your firm and make them disappear.</p>
          <div className="how">
            {steps.map((s) =>
            <div key={s.n} className="how-step">
                <span className="how-step-num">Step {s.n}</span>
                <div className="how-step-title">{s.title}</div>
                <div className="how-step-body">{s.body}</div>
              </div>
            )}
          </div>
        </div>
      </section>
      <section className="band-dark">
        <div className="container">
          <div>
            <span className="mono accent">What you'll never hear from us</span>
            <div className="big-num" style={{ fontSize: "clamp(96px, 14vw, 168px)", lineHeight: 0.95 }}>"AI"</div>
            <span className="mono" style={{ opacity: 0.55 }}>or "synergy", or "leverage your stack"</span>
          </div>
          <div>
            <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.2 }}>Hours and outcomes. <span className="em">Everything else is plumbing.</span></div>
            <button className="btn btn-primary" style={{ marginTop: 28, background: "var(--paper-dark)", color: "var(--ink)" }} onClick={() => go("register")}>Register interest <span className="arrow">→</span></button>
          </div>
        </div>
      </section>
    </main>);

}

// ─── PRACTICES ──────────────────────────────────────────────────────────
const PRACTICE_DATA = {
  property: {
    title: "Property",
    headline: "Tenant chase, sent.",
    blurb: "Lettings agents, sales agencies, block managers. The bits between offer-accepted and completion — handled.",
    jobs: [
    ["01", "Tenant rent chasers — drafted, sent, escalated"],
    ["02", "Deposit returns + DPS filings"],
    ["03", "Completion handover packs for new owners"],
    ["04", "Quarterly compliance: gas, EICR, EPC, smoke alarms"],
    ["05", "Viewings calendar + agent dispatch"]]

  },
  legal: {
    title: "Legal",
    headline: "Files open on the same day.",
    blurb: "Solicitors, conveyancers, family practices. Matter set-up to file close.",
    jobs: [
    ["01", "Conflict checks + KYC packs at intake"],
    ["02", "Client-care letter drafts, sent on instruction"],
    ["03", "Searches ordered + chased on completion timeline"],
    ["04", "Bill drafts pulled from time logs at month-end"],
    ["05", "File close + archive + retention timer"]]

  },
  accounting: {
    title: "Accounting",
    headline: "Month-end ends on the 1st.",
    blurb: "Bookkeepers, mid-tier practices, fractional FDs. The reconciliation marathon, ended.",
    jobs: [
    ["01", "Bank feed → ledger reconciliation, daily"],
    ["02", "Supplier statement chase + matching"],
    ["03", "VAT return prep from posted ledger"],
    ["04", "Client management accounts pack assembly"],
    ["05", "Year-end CT600 working papers"]]

  },
  recruitment: {
    title: "Recruitment",
    headline: "Candidates placed, not chased.",
    blurb: "Agencies, in-house talent teams, exec search. The admin between sourcing and start date — handled.",
    jobs: [
    ["01", "Job ad drafting + multi-board posting"],
    ["02", "Candidate follow-up sequences — sent, chased, escalated"],
    ["03", "Interview scheduling + calendar coordination"],
    ["04", "Right-to-work checks + compliance documentation"],
    ["05", "Offer packs, onboarding handover + start-date confirmations"]]

  }
};

// ─── PRODUCTS INDEX ─────────────────────────────────────────────────────
const PRODUCT_CHIPS = {
  property: ["Tenant chase", "Deposits", "Compliance", "Viewings"],
  legal: ["KYC & conflicts", "Bill prep", "Searches", "File close"],
  accounting: ["Reconciliation", "Statements", "VAT prep", "Mgmt accounts"],
  recruitment: ["Job posting", "Candidate chase", "Compliance", "Onboarding"]
};

function Products({ go }) {
  const order = ["property", "legal", "accounting", "recruitment"];
  return (
    <main>
      <section className="container" style={{ paddingTop: 72, paddingBottom: 24 }}>
        <div className="mono" style={{ fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.55, marginBottom: 16 }}>Products & Services</div>
        <h1 style={{ fontSize: 80, fontWeight: 550, letterSpacing: "-0.035em", lineHeight: 0.95, margin: 0, maxWidth: "16ch" }}>Products built for professional services.</h1>
        <p style={{ fontSize: 22, lineHeight: 1.35, opacity: 0.7, marginTop: 20, maxWidth: "52ch" }}>Each Pipewerk product is purpose-made for one profession — shaped around the jobs your team actually does, not a template stretched to fit. Every engagement ships with a kickoff, an audit, and a thirty-day return guarantee.</p>
      </section>
      <section className="container" style={{ paddingTop: 24, paddingBottom: 96 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
          {order.map((slug) => {
            const p = PRACTICE_DATA[slug];
            const color = PRODUCT_COLORS[slug];
            return (
              <a
                key={slug}
                onClick={() => go("practice:" + slug)}
                className="product-card"
                style={{
                  display: "flex", flexDirection: "column", justifyContent: "space-between",
                  padding: "32px 32px 28px", minHeight: 340,
                  background: "var(--paper)",
                  border: "1px solid rgba(0,0,0,0.08)",
                  borderTop: `4px solid ${color}`,
                  cursor: "pointer",
                  textDecoration: "none",
                  transition: "transform .25s ease, box-shadow .25s ease"
                }}>
                
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
                  <div style={{ display: "inline-flex", alignItems: "center", gap: 16 }}>
                    <PWMark size={48} color={color} />
                    <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 3 }}>
                      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.55, lineHeight: 1 }}>pipewerk for</div>
                      <div style={{ fontFamily: "'Geist', sans-serif", fontSize: 26, fontWeight: 550, letterSpacing: "-0.02em", color, lineHeight: 1 }}>{p.title}</div>
                    </div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <span className="mono" style={{ fontSize: 10, padding: "6px 11px", borderRadius: 999, border: `1px solid ${color}44`, color, letterSpacing: "0.08em" }}>In design · 2026</span>
                  </div>
                </div>
                <div>
                  <div style={{ fontSize: 26, fontWeight: 500, letterSpacing: "-0.015em", lineHeight: 1.15, marginTop: 28 }}>{p.headline}</div>
                  <div style={{ fontSize: 16, lineHeight: 1.5, opacity: 0.7, marginTop: 10, maxWidth: "44ch" }}>{p.blurb}</div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 18 }}>
                    {(PRODUCT_CHIPS[slug] || []).map((c) =>
                    <span key={c} className="mono" style={{ fontSize: 10, padding: "5px 10px", borderRadius: 999, background: `${color}10`, color, letterSpacing: "0.08em" }}>{c}</span>
                    )}
                  </div>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 24, paddingTop: 18, borderTop: "1px solid rgba(0,0,0,0.08)" }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.6 }}>Built for {p.title.toLowerCase()} firms</div>
                  <div className="mono" style={{ fontSize: 12, fontWeight: 500, color }}>Explore →</div>
                </div>
              </a>);

          })}
        </div>
        <div style={{ marginTop: 56, padding: "28px 32px", border: "1px dashed rgba(0,0,0,0.18)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em" }}>Different firm?</div>
            <div style={{ fontSize: 15, opacity: 0.65, marginTop: 4 }}>Pipewerk Enterprise — built from your processes, not a template.</div>
          </div>
          <button className="btn btn-ghost" onClick={() => go("bespoke")}>Pipewerk Enterprise <span className="arrow">→</span></button>
        </div>
      </section>
    </main>);

}

function Practice({ slug, go }) {
  const p = PRACTICE_DATA[slug];
  if (!p) return <Home go={go} />;
  const color = PRODUCT_COLORS[slug];
  return (
    <main>
      <section className="practice-hero">
        <div className="container">
          <div style={{ marginBottom: 28 }}>
            <ProductLockup slug={slug} size={32} />
            <div style={{ fontFamily: "'Geist', sans-serif", fontSize: 22, fontWeight: 500, color, marginTop: 8, letterSpacing: "-0.01em" }}>for {p.title}</div>
          </div>
          <h1>{p.headline.split(",")[0]},<br /><span style={{ color }}>{p.headline.split(",")[1]}</span></h1>
          <p className="lede" style={{ marginTop: 28 }}>{p.blurb}</p>
          <div className="practice-grid">
            <div className="practice-jobs">
              {p.jobs.map(([n, line]) =>
              <div key={n} className="job">
                  <span className="job-tag">{n}</span>
                  <span className="job-line">{line}</span>
                </div>
              )}
            </div>
            <div style={{ background: "var(--stone)", borderRadius: 18, padding: 32, display: "flex", flexDirection: "column", gap: 18, alignSelf: "start" }}>
              <span className="mono" style={{ color }}>Status</span>
              <div style={{ fontSize: 32, fontWeight: 550, letterSpacing: "-0.02em", lineHeight: 1.1, color: "var(--ink)" }}>
                In design with a small group of {p.title.toLowerCase()} firms.
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.5, opacity: 0.65 }}>
                First cohort opens 2026. We're shaping the product around real partner workflows — not a template.
              </div>
              <button className="btn btn-primary" style={{ alignSelf: "flex-start", marginTop: 8, background: color }} onClick={() => go("register:" + slug)}>Register interest <span className="arrow">→</span></button>
            </div>
          </div>
        </div>
      </section>
      <section className="tight" style={{ background: "var(--stone)" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap" }}>
          <h2 style={{ fontSize: 36, fontWeight: 550 }}>Different firm?</h2>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {Object.keys(PRACTICE_DATA).filter((k) => k !== slug).map((k) =>
            <button key={k} className="btn btn-ghost" onClick={() => go("practice:" + k)} style={{ color: PRODUCT_COLORS[k], borderColor: `${PRODUCT_COLORS[k]}33` }}>Pipewerk for {PRACTICE_DATA[k].title} →</button>
            )}
            <button className="btn btn-ghost" onClick={() => go("bespoke")}>Pipewerk Enterprise <span className="arrow">→</span></button>
          </div>
        </div>
      </section>
    </main>);

}

// ─── ENTERPRISE ──────────────────────────────────────────────────────────
function Bespoke({ go }) {
  return (
    <main>
      <section className="hero">
        <div className="container">
          <span className="mono eyebrow">Pipewerk Enterprise · Senior consulting engagement</span>
          <h1>A senior partner, embedded. <span className="em">For the firms our products can't reach.</span></h1>
          <p className="lede" style={{ marginTop: 28 }}>
            For firms whose work doesn't fit a category — IP boutiques, M&A advisory, planning consultants, multi-discipline practices, regulators with bespoke obligations. A senior, partner-led engagement that ends with a system delivered to your name.
          </p>
          <div style={{ display: "flex", gap: 36, marginTop: 36, flexWrap: "wrap", alignItems: "baseline" }}>
            <div>
              <span className="mono" style={{ opacity: 0.6, display: "block", marginBottom: 8 }}>Engagement</span>
              <div style={{ fontSize: 32, fontWeight: 550, letterSpacing: "-0.02em" }}>Senior, partner-led</div>
            </div>
            <div>
              <span className="mono" style={{ opacity: 0.6, display: "block", marginBottom: 8 }}>Format</span>
              <div style={{ fontSize: 32, fontWeight: 550, letterSpacing: "-0.02em" }}>6 months · on-site</div>
            </div>
            <div>
              <span className="mono" style={{ opacity: 0.6, display: "block", marginBottom: 8 }}>Capacity</span>
              <div style={{ fontSize: 32, fontWeight: 550, letterSpacing: "-0.02em" }}>3 firms / year</div>
            </div>
          </div>
          <div className="how" style={{ marginTop: 56 }}>
            <div className="how-step">
              <span className="how-step-num">Months 01 — 02 · Discovery</span>
              <div className="how-step-title">A senior partner, in your office, every week.</div>
              <div className="how-step-body">Two months of structured observation across every role — partners, fee earners, ops, juniors. We map the firm as it actually operates, deliver a written diagnostic, and present it to your board.</div>
            </div>
            <div className="how-step">
              <span className="how-step-num">Months 03 — 05 · Design & build</span>
              <div className="how-step-title">A system built around your firm, not a template forced onto it.</div>
              <div className="how-step-body">Custom workflows, integrations with your stack, bespoke systems, written runbooks. Built in your tools so nothing new to learn. Owned by you when we leave.</div>
            </div>
            <div className="how-step">
              <span className="how-step-num">Month 06 + ongoing · Handover & retainer</span>
              <div className="how-step-title">It runs. We stay close — at partner level.</div>
              <div className="how-step-body">Full transfer of documentation and IP. Optional quarterly retainer covers a named partner, system adjustments, and right-of-first-refusal on the next round of work.</div>
            </div>
          </div>
          <div style={{ background: "var(--coal)", color: "var(--paper-dark)", padding: 44, borderRadius: 20, marginTop: 56, display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 36, alignItems: "center" }}>
            <div>
              <span className="mono accent">The shape</span>
              <div style={{ fontSize: 26, fontWeight: 500, lineHeight: 1.3, marginTop: 18, color: "var(--paper-dark)" }}>
                A senior partner, embedded in the firm. Six months end-to-end. Designed in your tools, owned by you when we leave.
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
              <button className="btn btn-primary" style={{ background: "var(--paper-dark)", color: "var(--ink)" }} onClick={() => go("register")}>Request an Enterprise conversation <span className="arrow">→</span></button>
              <span style={{ fontSize: 13, opacity: 0.6 }}>By application. Partner-only intake call.</span>
            </div>
          </div>
        </div>
      </section>
    </main>);

}

// ─── REGISTER INTEREST ──────────────────────────────────────────────────
const INDUSTRIES = [
{ key: "property", label: "Property" },
{ key: "legal", label: "Legal" },
{ key: "accounting", label: "Accounting" },
{ key: "recruitment", label: "Recruitment" },
{ key: "other", label: "Something else" }];

const SIZE_OPTIONS = {
  property: ["Under 50 props", "50–200", "200–500", "500+"],
  legal: ["Under 5 fee earners", "5–15", "15–40", "40+"],
  accounting: ["Under 50 clients", "50–200", "200–500", "500+"],
  recruitment: ["1–5 consultants", "6–15", "16–40", "40+"],
  other: ["Under 10", "10–30", "30–80", "80+"]
};

const FOCUS_OPTIONS = {
  property: ["Tenant rent chasers", "Deposit returns", "Compliance certificates", "Viewings calendar"],
  legal: ["Intake & KYC", "Conflict checks", "Bill prep", "File close", "Searches & chase"],
  accounting: ["Bank reconciliation", "Supplier statements", "Client mgmt accounts", "VAT prep"],
  recruitment: ["Job ad posting", "Candidate follow-ups", "Interview scheduling", "Compliance checks", "Onboarding handover"],
  other: ["Client intake", "Reporting", "Billing", "Compliance", "Something else"]
};


// kept for legacy reference; unused after register refactor
const QUESTION_BANK = {
  property: [
  { q: "What's eating your week?", opts: ["Tenant rent chasers", "Deposit returns", "Compliance certificates", "Viewings calendar"], multi: true },
  { q: "How many properties under management?", opts: ["Under 50", "50–200", "200–500", "500+"] },
  { q: "What system holds the truth?", opts: ["Reapit / Jupix", "Alto / Acquaint", "Spreadsheets, mostly", "A mix"] }],

  legal: [
  { q: "Where do hours actually go?", opts: ["Intake & KYC", "Conflict checks", "Bill prep", "File close", "Searches & chase"], multi: true },
  { q: "How many fee earners?", opts: ["Under 5", "5–15", "15–40", "40+"] },
  { q: "Practice management system?", opts: ["LEAP", "Clio", "Actionstep", "ProcLaw / Quill", "None — Office + spreadsheets"] }],

  accounting: [
  { q: "What's the month-end bottleneck?", opts: ["Bank reconciliation", "Supplier statements", "Client mgmt accounts", "VAT prep"], multi: true },
  { q: "How many clients on the book?", opts: ["Under 50", "50–200", "200–500", "500+"] },
  { q: "Ledger software?", opts: ["Xero", "QuickBooks", "Sage", "Iris / Digita", "A mix"] }],

  recruitment: [
  { q: "What's eating your desk's week?", opts: ["Job ad posting", "Candidate follow-ups", "Interview scheduling", "Compliance checks", "Onboarding handover"], multi: true },
  { q: "How many consultants on the desk?", opts: ["1–5", "6–15", "16–40", "40+"] },
  { q: "What's your ATS?", opts: ["Bullhorn", "Vincere", "JobAdder", "Spreadsheets / email", "A mix"] }],

  other: [
  { q: "Briefly — what kind of firm?", opts: ["IP / patent", "M&A advisory", "Planning consultancy", "Niche regulator", "Other"] },
  { q: "What's eating the partner group's week?", opts: ["Client intake", "Reporting", "Billing", "Compliance", "Something else"], multi: true },
  { q: "Firm size?", opts: ["Under 10", "10–30", "30–80", "80+"] }]

};

const ESTIMATE_BASE = { property: 620, legal: 540, accounting: 720, recruitment: 560, other: 500 };

function Register({ go, preset }) {
  const [industry, setIndustry] = useState(preset || null);
  const [size, setSize] = useState(null);
  const [focus, setFocus] = useState([]);
  const [contact, setContact] = useState({ name: "", firm: "", role: "", email: "" });
  const [submitted, setSubmitted] = useState(false);

  const accent = industry && industry !== "other" ? PRODUCT_COLORS[industry] : "var(--green)";
  const sizeOpts = SIZE_OPTIONS[industry] || [];
  const focusOpts = FOCUS_OPTIONS[industry] || [];

  const toggleFocus = (v) => {
    setFocus(focus.includes(v) ? focus.filter((x) => x !== v) : [...focus, v]);
  };

  const canSubmit = industry && contact.name && contact.firm && /.+@.+\..+/.test(contact.email);

  const submit = (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <main>
        <section className="hero" style={{ paddingTop: 96, paddingBottom: 120, borderBottom: "none" }}>
          <div className="container" style={{ maxWidth: 760 }}>
            <span className="mono eyebrow" style={{ color: accent }}>Registered</span>
            <h1 style={{ fontSize: "clamp(40px, 5.5vw, 72px)", fontWeight: 550, letterSpacing: "-0.03em", lineHeight: 1.02, marginTop: 18 }}>
              Thanks, <span className="em">{contact.name.split(" ")[0]}</span>. We've got you.
            </h1>
            <p className="lede" style={{ marginTop: 22, fontSize: 18 }}>
              When we open the first cohort for <strong>{INDUSTRIES.find((i) => i.key === industry)?.label.toLowerCase()}</strong> firms, we'll write to <strong>{contact.email}</strong> — partner to partner, not a marketing blast.
            </p>
            <div style={{ marginTop: 36, padding: "24px 28px", border: "1px solid var(--line)", borderRadius: 14, background: "var(--paper-dim)" }}>
              <span className="mono" style={{ opacity: 0.55, display: "block", marginBottom: 12 }}>What you told us</span>
              <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", rowGap: 10, fontSize: 15 }}>
                <span className="mono" style={{ opacity: 0.55 }}>Firm</span><span>{contact.firm}</span>
                <span className="mono" style={{ opacity: 0.55 }}>Practice</span><span>{INDUSTRIES.find((i) => i.key === industry)?.label}</span>
                {size && <><span className="mono" style={{ opacity: 0.55 }}>Size</span><span>{size}</span></>}
                {focus.length > 0 && <><span className="mono" style={{ opacity: 0.55 }}>Eating time</span><span>{focus.join(" · ")}</span></>}
              </div>
            </div>
            <button className="btn btn-primary" style={{ marginTop: 36, background: "var(--paper-dark)", color: "var(--ink)" }} onClick={() => go("home")}>Back to home →</button>
          </div>
        </section>
      </main>);
  }

  return (
    <main>
      <section className="hero" style={{ paddingTop: 56, paddingBottom: 80, borderBottom: "none" }}>
        <div className="container" style={{ maxWidth: 860 }}>
          <span className="mono eyebrow" style={{ color: accent }}>Register your interest</span>
          <h1 style={{ fontSize: "clamp(36px, 4.5vw, 56px)", fontWeight: 550, letterSpacing: "-0.025em", lineHeight: 1.05, marginTop: 14 }}>
            Tell us about your firm.<br />
            <span className="em">We'll get in touch when we open.</span>
          </h1>
          <p className="lede" style={{ marginTop: 18, fontSize: 17, maxWidth: "60ch" }}>
            We're designing the first cohort of Pipewerk products with a small group of partner firms. A few quick questions so we know whether yours is a fit.
          </p>

          <form onSubmit={submit} style={{ marginTop: 56, display: "flex", flexDirection: "column", gap: 48 }}>
            {/* industry */}
            <div>
              <div className="reg-q-label">
                <span className="mono" style={{ color: accent }}>01</span>
                <span>What kind of firm?</span>
              </div>
              <div className="diag-options" style={{ marginTop: 16 }}>
                {INDUSTRIES.map((ind) =>
                <button type="button" key={ind.key} className={"diag-option" + (industry === ind.key ? " selected" : "")} onClick={() => { setIndustry(ind.key); setSize(null); setFocus([]); }}>
                    <span className="check" />
                    <span>{ind.label}</span>
                  </button>
                )}
              </div>
            </div>

            {/* size */}
            {industry &&
            <div style={{ animation: "pwfade 0.3s ease" }}>
                <div className="reg-q-label">
                  <span className="mono" style={{ color: accent }}>02</span>
                  <span>How big is it?</span>
                </div>
                <div className="diag-options" style={{ marginTop: 16 }}>
                  {sizeOpts.map((s) =>
                <button type="button" key={s} className={"diag-option" + (size === s ? " selected" : "")} onClick={() => setSize(s)}>
                      <span className="check" />
                      <span>{s}</span>
                    </button>
                )}
                </div>
              </div>
            }

            {/* focus */}
            {industry &&
            <div style={{ animation: "pwfade 0.3s ease" }}>
                <div className="reg-q-label">
                  <span className="mono" style={{ color: accent }}>03</span>
                  <span>What's eating the week? <span style={{ opacity: 0.5, fontWeight: 400, fontSize: 14, letterSpacing: 0 }}>— pick any</span></span>
                </div>
                <div className="diag-options" style={{ marginTop: 16 }}>
                  {focusOpts.map((o) =>
                <button type="button" key={o} className={"diag-option" + (focus.includes(o) ? " selected" : "")} onClick={() => toggleFocus(o)}>
                      <span className="check" />
                      <span>{o}</span>
                    </button>
                )}
                </div>
              </div>
            }

            {/* contact */}
            {industry &&
            <div style={{ animation: "pwfade 0.3s ease" }}>
                <div className="reg-q-label">
                  <span className="mono" style={{ color: accent }}>04</span>
                  <span>Who shall we get back to?</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 16 }}>
                  <input className="diag-input" placeholder="Your name" value={contact.name} onChange={(e) => setContact({ ...contact, name: e.target.value })} />
                  <input className="diag-input" placeholder="Firm" value={contact.firm} onChange={(e) => setContact({ ...contact, firm: e.target.value })} />
                  <input className="diag-input" placeholder="Your role (optional)" value={contact.role} onChange={(e) => setContact({ ...contact, role: e.target.value })} />
                  <input className="diag-input" placeholder="Work email" type="email" value={contact.email} onChange={(e) => setContact({ ...contact, email: e.target.value })} />
                </div>
              </div>
            }

            {/* submit */}
            {industry &&
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap", paddingTop: 8 }}>
                <button type="submit" className="btn btn-primary" disabled={!canSubmit} style={{ background: "var(--forest)", color: "var(--paper)" }}>
                  Register your interest <span className="arrow">→</span>
                </button>
                <span style={{ fontSize: 13, opacity: 0.6 }}>One email when we open. Nothing else.</span>
              </div>
            }
          </form>
        </div>
      </section>
    </main>);

}

// ─── EMAIL CAPTURE ───────────────────────────────────────────────────────
function EmailCapture() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) return;
    setSubmitted(true);
  };
  return (
    <section className="tight" style={{ background: "var(--paper-dim)" }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
          <div>
            <span className="mono eyebrow">Register your interest</span>
            <h2 style={{ fontSize: "clamp(32px, 4vw, 48px)", fontWeight: 550, letterSpacing: "-0.025em", lineHeight: 1.05 }}>
              We're opening a <span className="em">small first cohort</span> in 2026.
            </h2>
            <p className="lede" style={{ marginTop: 18, fontSize: 17 }}>
              Leave your email and we'll be in touch when we're ready to talk to your firm. No newsletter, no marketing.
            </p>
          </div>
          {submitted ?
          <div style={{ background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 16, padding: "28px 32px" }}>
              <span className="mono accent">Thanks — you're on the list.</span>
              <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 10, lineHeight: 1.3 }}>
                We'll write to <strong>{email}</strong> when the first cohort opens.
              </div>
            </div> :

          <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={{ display: "flex", gap: 10, alignItems: "stretch" }}>
                <input
                type="email"
                required
                placeholder="you@firm.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="diag-input"
                style={{ flex: 1, fontSize: 16, padding: "14px 18px" }} />
                
                <button type="submit" className="btn btn-primary" style={{ whiteSpace: "nowrap", padding: "12px 20px", background: "var(--forest)", color: "var(--paper)" }}>
                  Register your interest <span className="arrow">→</span>
                </button>
              </div>
              <span style={{ fontSize: 12, opacity: 0.55, fontFamily: "'Geist Mono', monospace", letterSpacing: "0.06em", textTransform: "uppercase" }}>One email when we open. Nothing else.</span>
            </form>
          }
        </div>
      </div>
    </section>);

}

// ─── ROUTER ─────────────────────────────────────────────────────────────
function App() {
  const [route, setRoute] = useState("home");
  const ref = useRef(null);
  const go = (r) => {
    setRoute(r);
    setTimeout(() => window.scrollTo({ top: 0, behavior: "smooth" }), 10);
  };

  // register can be called as "register" or "register:<slug>" — carries product context forward
  const regSlug = route.startsWith("register:") ? route.split(":")[1] : null;

  let page;
  if (route === "home") page = <Home go={go} />;else
  if (route === "how") page = <How go={go} />;else
  if (route === "practices") page = <Products go={go} />;else
  if (route === "bespoke") page = <Bespoke go={go} />;else
  if (route === "register") page = <Register go={go} />;else
  if (route.startsWith("register:")) page = <Register go={go} preset={regSlug} />;else
  if (route.startsWith("practice:")) page = <Practice slug={route.split(":")[1]} go={go} />;else
  page = <Home go={go} />;

  return (
    <div ref={ref} style={{ animation: "pwfade 0.3s ease" }} key={route}>
      <Nav
        route={route.startsWith("practice:") ? "practices" : (route.startsWith("register") ? "" : route)}
        markColor={regSlug ? PRODUCT_COLORS[regSlug] : (route.startsWith("practice:") ? PRODUCT_COLORS[route.split(":")[1]] : null)}
        ctaColor={regSlug ? PRODUCT_COLORS[regSlug] : (route.startsWith("practice:") ? PRODUCT_COLORS[route.split(":")[1]] : null)}
        go={go} />
      
      {page}
      {!route.startsWith("register") && <EmailCapture />}
      <Footer go={go} />
    </div>);

}

ReactDOM.createRoot(document.getElementById("app")).render(
  <PipewerkTweaks><App /></PipewerkTweaks>
);