// page-service.jsx — single service page, rendered from SERVICE_DETAILS by ?slug=

const SVCPAGECSS = `
.page .sv-intro{ max-width:1100px; margin:0 auto; padding:40px 56px 0; display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:start; }
.page .sv-intro .body p{ font-size:19px; line-height:1.6; margin:0 0 22px; }
.page .sv-intro .body p:last-child{ margin-bottom:0; }
.page .sv-card{ background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:32px; position:sticky; top:80px; align-self:start; }
.page .sv-card .row{ display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-bottom:1px dashed var(--rule); gap:16px; }
.page .sv-card .row:first-child{ padding-top:0; }
.page .sv-card .row:last-child{ border-bottom:none; padding-bottom:0; }
.page .sv-card .l{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.page .sv-card .v{ font-family:'Instrument Serif',serif; font-style:italic; font-size:24px; text-align:right; }
.page .sv-card .v.price{ color:var(--terra); }
.page .sv-card .btn{ width:100%; justify-content:center; margin-top:24px; }

.page .sv-inc{ max-width:1100px; margin:0 auto; padding:96px 56px 0; }
.page .sv-inc .grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px; }
.page .sv-inc .item{ background:var(--paper); border:1px solid var(--rule); border-radius:10px; padding:32px; position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s, border-color .25s; cursor:default; }
.page .sv-inc .item:hover{ transform:translateY(-5px) rotate(-.4deg); box-shadow:0 20px 48px -16px rgba(26,26,26,.18); border-color:var(--terra); }
.page .sv-inc .item .n{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--terra); letter-spacing:.1em; }
.page .sv-inc .item h4{ font-family:'Instrument Serif',serif; font-style:italic; font-size:28px; margin:14px 0 10px; font-weight:400; }
.page .sv-inc .item p{ margin:0; font-size:16px; line-height:1.5; color:var(--ink-soft); }
.page .sv-inc .item .inc-doodle{ position:absolute; bottom:14px; right:18px; font-family:'Caveat',cursive; font-size:18px; color:var(--terra); opacity:0; transform:rotate(6deg) translateY(4px); transition:opacity .25s, transform .25s; pointer-events:none; }
.page .sv-inc .item:hover .inc-doodle{ opacity:.7; transform:rotate(6deg) translateY(0); }

.page .sv-steps{ background:var(--paper); margin-top:96px; padding:96px 56px; }
.page .sv-steps .wrap{ max-width:1100px; margin:0 auto; }
.page .sv-steps .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:48px; }
.page .sv-steps .step{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.page .sv-steps .step .sv-step-doodle{ width:80px; height:80px; color:var(--terra); margin-bottom:20px; opacity:.9; }
.page .sv-steps .step .sv-step-doodle svg{ width:80px; height:80px; }
.page .sv-steps .step .n{ font-family:'Instrument Serif',serif; font-style:italic; font-size:64px; color:var(--terra); line-height:1; }
.page .sv-steps .step h4{ font-family:'Bricolage Grotesque',sans-serif; font-weight:500; font-size:22px; margin:16px 0 8px; }
.page .sv-steps .step p{ margin:0; font-size:16px; line-height:1.5; color:var(--ink-soft); max-width:260px; }

.page .sv-faq{ max-width:880px; margin:0 auto; padding:96px 56px 0; }
.page .sv-faq details{ border-top:1px solid var(--rule); padding:8px 0; }
.page .sv-faq details:last-child{ border-bottom:1px solid var(--rule); }
.page .sv-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; }
.page .sv-faq summary::-webkit-details-marker{ display:none; }
.page .sv-faq summary .q{ font-family:'Instrument Serif',serif; font-style:italic; font-size:26px; }
.page .sv-faq summary .ic{ font-family:'JetBrains Mono',monospace; font-size:22px; color:var(--terra); transition:transform .2s; }
.page .sv-faq details[open] summary .ic{ transform:rotate(45deg); }
.page .sv-faq .a{ font-size:17px; line-height:1.6; color:var(--ink-soft); padding:0 0 24px; max-width:680px; }

.page .sv-other{ max-width:1280px; margin:96px auto 0; padding:64px 56px 0; border-top:1px solid var(--rule); }
.page .sv-other .grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.page .sv-other a{ display:flex; flex-direction:column; gap:8px; padding:32px; border-radius:10px; background:var(--paper); text-decoration:none; color:inherit; transition:transform .25s; }
.page .sv-other a:hover{ transform:translateY(-3px); }
.page .sv-other a.next{ text-align:right; }
.page .sv-other .dir{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); }
.page .sv-other .t{ font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; }

.page .sv-newtag{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); border:1px solid var(--terra); border-radius:999px; padding:5px 12px; margin-left:16px; vertical-align:middle; }

@media (max-width:900px){
  .page .sv-intro{ grid-template-columns:1fr; gap:36px; padding:40px 24px 0; }
  .page .sv-card{ position:static; }
  .page .sv-inc{ padding:64px 24px 0; }
  .page .sv-inc .grid{ grid-template-columns:1fr; }
  .page .sv-steps{ padding:64px 24px; margin-top:64px; }
  .page .sv-steps .grid{ grid-template-columns:1fr; gap:36px; }
  .page .sv-faq{ padding:64px 24px 0; }
  .page .sv-faq summary .q{ font-size:22px; }
  .page .sv-other{ padding:48px 24px 0; margin-top:64px; }
  .page .sv-other .grid{ grid-template-columns:1fr; }
  .page .sv-other a.next{ text-align:left; }
  .page .sv-newtag{ display:flex; width:fit-content; margin:16px 0 0; }
}
`;

function SvcNotFound(){
  return (
    <PageShell active="services">
      <header className="pghdr">
        <div className="eyebrow">Services · 404</div>
        <h1>No such<br/><em>service</em>.</h1>
        <p className="lede">I couldn’t find that one. Here’s everything I actually offer.</p>
        <a className="btn" href="services.html" style={{marginTop:32}}>← All services</a>
      </header>
    </PageShell>
  );
}

// ---- STEP SVG DOODLES ----
// Each returns an <svg> element. ViewBox 0 0 80 80, hand-drawn style.
// Color inherits via currentColor.
const STEP_SVGS = {
  notebook: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="22" y="12" width="38" height="56" rx="3" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="30" y1="12" x2="30" y2="68" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="22" y1="12" x2="30" y2="12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="36" y1="26" x2="54" y2="26" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="36" y1="34" x2="54" y2="34" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="36" y1="42" x2="48" y2="42" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="36" y1="50" x2="52" y2="50" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <circle cx="26" cy="22" r="2" fill="currentColor"/>
      <circle cx="26" cy="34" r="2" fill="currentColor"/>
      <circle cx="26" cy="46" r="2" fill="currentColor"/>
    </svg>
  ),
  screen: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="10" y="16" width="60" height="38" rx="4" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="10" y1="27" x2="70" y2="27" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <circle cx="18" cy="21.5" r="2.5" fill="currentColor" opacity="0.7"/>
      <circle cx="25" cy="21.5" r="2.5" fill="currentColor" opacity="0.7"/>
      <circle cx="32" cy="21.5" r="2.5" fill="currentColor" opacity="0.7"/>
      <line x1="40" y1="54" x2="40" y2="64" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="28" y1="64" x2="52" y2="64" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <rect x="20" y="33" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="44" y1="36" x2="60" y2="36" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="44" y1="42" x2="56" y2="42" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  ),
  key: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="28" cy="36" r="16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx="28" cy="36" r="7" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="44" y1="36" x2="70" y2="36" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="62" y1="36" x2="62" y2="46" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="54" y1="36" x2="54" y2="44" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
    </svg>
  ),
  magnify: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="33" cy="33" r="20" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="48" y1="48" x2="68" y2="68" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
      <line x1="26" y1="33" x2="40" y2="33" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
      <line x1="33" y1="26" x2="33" y2="40" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  ),
  arrows: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M12,28 Q20,22 40,22 Q60,22 68,28" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" fill="none"/>
      <polyline points="60,20 68,28 60,36" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M68,52 Q60,58 40,58 Q20,58 12,52" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" fill="none"/>
      <polyline points="20,44 12,52 20,60" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  eye: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M10,40 Q25,18 40,18 Q55,18 70,40 Q55,62 40,62 Q25,62 10,40 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="40" cy="40" r="10" stroke="currentColor" strokeWidth="2.5"/>
      <circle cx="40" cy="40" r="4" fill="currentColor"/>
      <line x1="55" y1="22" x2="25" y2="58" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.3"/>
    </svg>
  ),
  diagram: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="30" y="8" width="20" height="14" rx="3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="40" y1="22" x2="40" y2="34" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="40" y1="34" x2="22" y2="46" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="40" y1="34" x2="58" y2="46" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <rect x="12" y="46" width="20" height="14" rx="3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <rect x="48" y="46" width="20" height="14" rx="3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
      <line x1="30" y1="62" x2="30" y2="70" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="50" y1="62" x2="50" y2="70" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  phone: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="22" y="8" width="36" height="64" rx="6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="22" y1="20" x2="58" y2="20" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="22" y1="60" x2="58" y2="60" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <circle cx="40" cy="66" r="3" stroke="currentColor" strokeWidth="2"/>
      <line x1="34" y1="14" x2="46" y2="14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <rect x="28" y="26" width="24" height="28" rx="2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  ),
  rocket: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M40,10 Q54,16 54,36 L40,58 L26,36 Q26,16 40,10 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="40" cy="32" r="6" stroke="currentColor" strokeWidth="2"/>
      <path d="M26,40 L16,54 L22,56 Q26,52 28,46 Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M54,40 L64,54 L58,56 Q54,52 52,46 Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M34,58 Q36,66 40,70 Q44,66 46,58" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none"/>
    </svg>
  ),
  speech: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M14,14 Q12,14 12,16 L12,50 Q12,52 14,52 L34,52 L40,64 L46,52 L66,52 Q68,52 68,50 L68,16 Q68,14 66,14 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="24" y1="28" x2="56" y2="28" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="24" y1="37" x2="52" y2="37" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  palette: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M40,14 Q62,14 66,32 Q70,50 52,62 Q42,68 32,58 Q20,68 14,56 Q8,42 20,30 Q28,20 40,14 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="28" cy="34" r="5" fill="currentColor" opacity="0.8"/>
      <circle cx="42" cy="26" r="5" fill="currentColor" opacity="0.8"/>
      <circle cx="54" cy="36" r="5" fill="currentColor" opacity="0.8"/>
      <circle cx="50" cy="50" r="5" fill="currentColor" opacity="0.8"/>
      <circle cx="30" cy="50" r="5" fill="currentColor" opacity="0.8"/>
    </svg>
  ),
  sparkle: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M40,10 L44,32 L66,36 L44,40 L48,62 L40,46 L32,62 L36,40 L14,36 L36,32 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="62" cy="16" r="4" stroke="currentColor" strokeWidth="2"/>
      <line x1="62" y1="8" x2="62" y2="12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="62" y1="20" x2="62" y2="24" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="54" y1="16" x2="58" y2="16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="66" y1="16" x2="70" y2="16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  checklist: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="16" y="12" width="48" height="56" rx="4" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <polyline points="24,28 30,36 42,22" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="48" y1="28" x2="60" y2="28" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <polyline points="24,48 30,56 42,42" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="48" y1="48" x2="60" y2="48" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  ),
  funnel: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M12,16 L68,16 L50,38 L50,64 L30,56 L30,38 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="18" y1="24" x2="62" y2="24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" opacity="0.4"/>
    </svg>
  ),
  hammer: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M24,56 L52,28" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
      <rect x="46" y="10" width="22" height="16" rx="3" transform="rotate(45 57 18)" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="14" y1="66" x2="26" y2="54" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/>
      <path d="M52,60 Q62,52 68,56 Q66,66 56,68 Q50,70 46,64 Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  ),
  wrench: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M54,14 Q66,22 62,36 Q58,48 46,48 L22,70 Q18,74 14,70 Q10,66 14,62 L38,40 Q34,28 44,18 Q48,14 54,14 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="18" cy="66" r="3" fill="currentColor"/>
      <path d="M46,20 Q56,16 60,26" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" opacity="0.5"/>
    </svg>
  ),
  calendar: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="12" y="18" width="56" height="52" rx="4" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <line x1="12" y1="32" x2="68" y2="32" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <line x1="28" y1="10" x2="28" y2="26" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <line x1="52" y1="10" x2="52" y2="26" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <rect x="20" y="40" width="12" height="10" rx="2" fill="currentColor" opacity="0.6"/>
      <rect x="34" y="40" width="12" height="10" rx="2" stroke="currentColor" strokeWidth="2"/>
      <rect x="48" y="40" width="12" height="10" rx="2" stroke="currentColor" strokeWidth="2"/>
      <rect x="20" y="54" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="2"/>
      <rect x="34" y="54" width="12" height="8" rx="2" stroke="currentColor" strokeWidth="2"/>
    </svg>
  ),
  switchon: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect x="10" y="28" width="60" height="24" rx="12" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="52" cy="40" r="9" fill="currentColor" opacity="0.85"/>
      <line x1="22" y1="36" x2="30" y2="36" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.4"/>
      <line x1="22" y1="44" x2="30" y2="44" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.4"/>
    </svg>
  ),
  chat: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M10,12 Q8,12 8,14 L8,48 Q8,50 10,50 L30,50 L36,62 L42,50 L70,50 Q72,50 72,48 L72,14 Q72,12 70,12 Z" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx="28" cy="31" r="4" fill="currentColor" opacity="0.7"/>
      <circle cx="40" cy="31" r="4" fill="currentColor" opacity="0.7"/>
      <circle cx="52" cy="31" r="4" fill="currentColor" opacity="0.7"/>
    </svg>
  ),
  sliders: () => (
    <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <line x1="12" y1="24" x2="68" y2="24" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx="32" cy="24" r="8" fill="var(--paper, #fff)" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="12" y1="56" x2="68" y2="56" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
      <circle cx="52" cy="56" r="8" fill="var(--paper, #fff)" stroke="currentColor" strokeWidth="2.5"/>
      <line x1="12" y1="40" x2="68" y2="40" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" opacity="0.3"/>
    </svg>
  ),
};

function StepDoodle({ icon }){
  const fn = STEP_SVGS[icon];
  if (!fn) return null;
  return (
    <div className="sv-step-doodle">{fn()}</div>
  );
}

function ServicePage(){
  const params = new URLSearchParams(location.search);
  const slug = params.get('slug') || SERVICE_ORDER[0];
  const s = SERVICE_DETAILS[slug];
  const i = SERVICE_ORDER.indexOf(slug);

  React.useEffect(() => {
    if (!s){ document.title = 'Service not found — Maia Hariton'; return; }
    applySEO({
      title: `${s.name} — Maia Hariton`,
      description: s.lede,
      type: 'website',
    });
    applyJSONLD({
      '@context':'https://schema.org', '@type':'Service',
      name: s.name, description: s.lede, category: s.cat,
      provider: { '@type':'Person', name:'Maia Hariton', url:'https://maiahariton.com' },
      areaServed: 'Worldwide',
      offers: { '@type':'Offer', price: (s.from||'').replace(/[^0-9]/g,''), priceCurrency:'USD' },
    });
  }, [s]);

  if (!s) return <SvcNotFound />;

  const prev = SERVICE_DETAILS[SERVICE_ORDER[i-1]];
  const next = SERVICE_DETAILS[SERVICE_ORDER[i+1]];

  return (
    <PageShell active="services">
      <style>{SVCPAGECSS}</style>

      <header className="pghdr">
        <div className="eyebrow">Service · {s.n} · {s.cat}</div>
        <h1>{s.name}{s.isNew && <span className="sv-newtag">✦ new</span>}</h1>
        <p className="lede">{s.lede}</p>
      </header>

      <section className="sv-intro">
        <div className="body">
          {s.intro.map((p,idx) => <p key={idx}>{p}</p>)}
        </div>
        <aside className="sv-card">
          <div className="row"><span className="l">Starting from</span><span className="v price">{s.from}</span></div>
          <div className="row"><span className="l">Typical timeline</span><span className="v">{s.time}</span></div>
          <div className="row"><span className="l">Type of work</span><span className="v">{s.cat}</span></div>
          <a className="btn" href="contact.html">Start a project ↗</a>
        </aside>
      </section>

      <section className="sv-inc">
        <div className="eyebrow">What’s included</div>
        <div className="grid">
          {s.includes.map((it,idx) => (
            <div key={idx} className="item">
              <div className="n">{String(idx+1).padStart(2,'0')}</div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
              <span className="inc-doodle">{['that\'s the one ✓','love this bit ↗','yes, really ✨','chef\'s kiss 🤌','non-negotiable ↑','worth it ✦','trust me on this','the good stuff ★'][idx % 8]}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="sv-steps">
        <div className="wrap">
          <div className="eyebrow">How it works</div>
          <div className="grid">
            {s.steps.map((st,idx) => (
              <div key={idx} className="step">
                <StepDoodle icon={st.icon} />
                <div className="n">{idx+1}</div>
                <h4>{st.t}</h4>
                <p>{st.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sv-faq">
        <div className="eyebrow">Good to know</div>
        {s.faqs.map((f,idx) => (
          <details key={idx} open={idx===0}>
            <summary><span className="q">{f.q}</span><span className="ic">+</span></summary>
            <div className="a">{f.a}</div>
          </details>
        ))}
      </section>

      <section className="sv-other">
        <div className="eyebrow">More services</div>
        <div className="grid">
          {prev ? (
            <a className="prev" href={'service.html?slug=' + SERVICE_ORDER[i-1]}>
              <span className="dir">← Previous</span><span className="t">{prev.name}</span>
            </a>
          ) : <span/>}
          {next ? (
            <a className="next" href={'service.html?slug=' + SERVICE_ORDER[i+1]}>
              <span className="dir">Next →</span><span className="t">{next.name}</span>
            </a>
          ) : <span/>}
        </div>
      </section>

      <section className="cta-strip">
        <h2>Sound like <em>your</em> thing?</h2>
        <p>A 30-minute intro call, no pitch deck. We’ll figure out if we’re a fit and what it’ll take.</p>
        <a className="btn" href="contact.html">Book a call ↗</a>
      </section>
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ServicePage/>);
