// page-shell.jsx — shared chrome for every page (nav, footer, palette, base CSS, scrapbook bits)

const SHELL_PALETTES = {
  "Bauhaus":           ["#f5f1e8","#ffffff","#1a1a1a","#e63329","#1d4ed8","#fbbf24"],
  "Mondrian":          ["#ffffff","#f5f5f0","#000000","#d40000","#0036b6","#ffd500"],
  "Pop Primary":       ["#fff8e0","#ffffff","#0a0a0a","#ff2c2c","#1e40ff","#ffd60a"],
  "Citrus & Sky":      ["#fff4d6","#fffaea","#1a3a5c","#ff6b3d","#4a90c2","#ffb8a8"],
  "Marigold & Pine":   ["#ffe9b8","#fff3d4","#1f4d3a","#f57c2a","#2d7a52","#ff9a9a"],
  "Coral Garden":      ["#ffd6cc","#ffe6dc","#1a4d4d","#ff5a5a","#2da89a","#ffd166"],
};
const SHELL_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#ffe9b8","#fff3d4","#1f4d3a","#f57c2a","#2d7a52","#ff9a9a"]
}/*EDITMODE-END*/;

// Service list for the nav dropdown (kept here so it's available on every page
// without depending on content-services.jsx being loaded).
const NAV_SERVICES = [
  { slug:'squarespace', name:'Custom Squarespace', meta:'from $1,800' },
  { slug:'shopify',     name:'Custom Shopify',     meta:'from $5,400' },
  { slug:'wordpress',   name:'Custom WordPress',   meta:'from $5,400' },
  { slug:'apps',        name:'Apps, mobile & native', meta:'from $12,000', isNew:true },
  { slug:'brand',       name:'Brand & visual identity', meta:'from $3,200' },
  { slug:'redesign',    name:'Redesigns & refreshes',   meta:'from $3,400' },
  { slug:'seo',         name:'SEO setup & optimization', meta:'from $1,200' },
  { slug:'migrations',  name:'Platform migrations',     meta:'from $2,800' },
  { slug:'support',     name:'Ongoing support',         meta:'from $400/mo' },
];

const ShellCSS = `
.page{ --bg:#f5f1e8; --paper:#ffffff; --ink:#1a1a1a; --ink-soft:rgba(26,26,26,.65);
  --rule:rgba(26,26,26,.18); --terra:#e63329; --olive:#1d4ed8; --rose:#fbbf24;
  background:var(--bg); color:var(--ink); font-family:'Manrope',system-ui,sans-serif; font-size:17px; line-height:1.5;
  min-height:100vh; position:relative; overflow-x:hidden;
}
.page .serif{ font-family:'Instrument Serif',serif; font-style:italic; }
.page .grot{ font-family:'Bricolage Grotesque',sans-serif; font-weight:300; letter-spacing:-.02em; }
.page .mono{ font-family:'JetBrains Mono',monospace; }
.page .hand{ font-family:'Caveat',cursive; }

/* NAV */
.page .nav{ padding:24px 56px; display:flex; align-items:center; justify-content:space-between; gap:48px; position:sticky; top:0; background:var(--bg); z-index:50; border-bottom:1px solid transparent; }
.page .nav .logo{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.page .nav .logo .idx{ color:var(--terra); }
.page .nav .links{ display:flex; gap:52px; align-items:center; font-size:14px; }
.page .nav a{ color:var(--ink); text-decoration:none; padding:6px 0; }
.page .nav a.on{ color:var(--terra); font-family:'Instrument Serif',serif; font-style:italic; font-size:18px; }
.page .nav .group{ display:flex; align-items:center; gap:24px; }
.page .nav .booking{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--rule); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; }
.page .nav .booking .dot{ width:8px; height:8px; border-radius:50%; background:var(--olive); animation:pg-pulse 2.4s ease-in-out infinite; }
.page .nav .cta{ background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:999px; border:0; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:transform .25s, box-shadow .25s; text-decoration:none; }
.page .nav .cta:hover{ transform:translateY(-2px) rotate(-1deg); box-shadow:0 10px 24px -10px var(--ink); }
@keyframes pg-pulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--olive) 25%, transparent) } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--olive) 18%, transparent) } }

/* PAGE HEADER */
.page .pghdr{ padding:80px 56px 40px; position:relative; }
.page .pghdr .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.page .pghdr .eyebrow::before{ content:''; width:24px; height:1px; background:var(--ink-soft); }
.page .pghdr h1{ font-family:'Instrument Serif',serif; font-style:italic; font-size:120px; line-height:.92; letter-spacing:-.02em; margin:0; max-width:1100px; }
.page .pghdr h1 .non{ font-family:'Bricolage Grotesque',sans-serif; font-style:normal; font-weight:300; }
.page .pghdr h1 em{ color:var(--terra); }
.page .pghdr .lede{ max-width:600px; font-size:19px; margin:36px 0 0; }

/* HANDWRITTEN NOTES */
.page .note{ font-family:'Caveat',cursive; color:var(--terra); font-size:24px; line-height:1.1; pointer-events:none; }
.page .note.abs{ position:absolute; }
.page .note.bobble{ animation:pg-bobble 6s ease-in-out infinite; }
@keyframes pg-bobble{ 0%,100%{ transform:translateY(0) rotate(var(--rot,-4deg)) } 50%{ transform:translateY(-4px) rotate(calc(var(--rot,-4deg) + 3deg)) } }

/* BUTTONS */
.page .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 24px; border-radius:999px; background:var(--ink); color:var(--bg); border:0; font-size:14px; cursor:pointer; text-decoration:none; transition:transform .25s, box-shadow .25s; }
.page .btn:hover{ transform:translateY(-2px) rotate(-.5deg); box-shadow:0 12px 24px -12px var(--ink); }
.page .btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }

/* FOOTER */
.page footer{ background:var(--ink); color:var(--bg); padding:80px 56px 40px; margin-top:120px; }
.page footer .top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px; padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.18); }
.page footer h5{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 18px; font-weight:500; }
.page footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.page footer a{ color:var(--bg); text-decoration:none; font-size:15px; }
.page footer .word{ font-family:'Instrument Serif',serif; font-style:italic; font-size:160px; line-height:1; margin:48px 0 24px; letter-spacing:-.02em; opacity:.92; }
.page footer .word .terra{ color:var(--terra); }
.page footer .legal{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.5); }

/* CTA strip */
.page .cta-strip{ padding:140px 56px; text-align:center; position:relative; }
.page .cta-strip h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:120px; line-height:.95; margin:0; letter-spacing:-.02em; }
.page .cta-strip h2 em{ color:var(--terra); }
.page .cta-strip p{ max-width:540px; margin:32px auto 40px; font-size:18px; }
.page .cta-strip h2 + .btn, .page .cta-strip h2 + a.btn{ margin-top:56px; display:inline-flex; }

/* SECTION TITLE */
.page .sec-title{ font-family:'Instrument Serif',serif; font-style:italic; font-size:80px; line-height:1; margin:14px 0 0; letter-spacing:-.01em; }
.page .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:14px; }
.page .eyebrow::before{ content:''; width:24px; height:1px; background:var(--ink-soft); }

/* MOBILE NAV */
.page .nav .burger{ display:none; flex-direction:column; gap:5px; width:42px; height:42px; border:1px solid var(--rule); border-radius:10px; background:var(--bg); cursor:pointer; align-items:center; justify-content:center; padding:0; }
.page .nav .burger span{ width:18px; height:1.5px; background:var(--ink); transition:transform .25s, opacity .25s; }
.page .nav .burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.page .nav .burger.open span:nth-child(2){ opacity:0; }
.page .nav .burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.page .navdrawer{ position:fixed; inset:0; background:var(--bg); z-index:90; display:flex; flex-direction:column; padding:88px 32px 40px; transform:translateY(-100%); transition:transform .38s cubic-bezier(.6,0,.2,1); visibility:hidden; }
.page .navdrawer.open{ transform:translateY(0); visibility:visible; }
.page .navdrawer a{ font-family:'Instrument Serif',serif; font-style:italic; font-size:44px; line-height:1.25; color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:1px solid var(--rule); }
.page .navdrawer a.on{ color:var(--terra); }
.page .navdrawer .dr-foot{ margin-top:auto; display:flex; flex-direction:column; gap:18px; padding-top:32px; }
.page .navdrawer .dr-booking{ display:inline-flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }
.page .navdrawer .dr-booking .dot{ width:8px; height:8px; border-radius:50%; background:var(--olive); }
.page .navdrawer .cta{ background:var(--ink); color:var(--bg); padding:16px 22px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; text-align:center; }

/* NAV SERVICES DROPDOWN */
.page .nav .links{ position:relative; }
.page .nav .has-drop{ position:relative; }
.page .nav .drop-trigger{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.page .nav .drop-trigger .caret{ font-size:9px; transition:transform .2s; opacity:.6; }
.page .nav .has-drop:hover .drop-trigger .caret{ transform:rotate(180deg); }
.page .nav .dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); padding-top:14px; width:340px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s, transform .2s; z-index:80; }
.page .nav .has-drop:hover .dropdown, .page .nav .dropdown:hover{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.page .nav .dropdown .panel{ background:var(--bg); border:1px solid var(--rule); border-radius:14px; box-shadow:0 30px 60px -28px rgba(0,0,0,.4); padding:10px; }
.page .nav .dropdown a{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 14px; border-radius:9px; text-decoration:none; color:var(--ink); transition:background .15s; }
.page .nav .dropdown a:hover{ background:var(--paper); }
.page .nav .dropdown a .nm{ font-family:'Instrument Serif',serif; font-style:italic; font-size:19px; line-height:1; display:flex; align-items:center; gap:8px; }
.page .nav .dropdown a .nm .nw{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--terra); border:1px solid var(--terra); border-radius:999px; padding:2px 6px; }
.page .nav .dropdown a .mt{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; }
.page .nav .dropdown .all{ margin-top:4px; border-top:1px solid var(--rule); }
.page .nav .dropdown .all a{ justify-content:flex-start; }
.page .nav .dropdown .all a .nm{ font-size:16px; color:var(--terra); }

/* mobile drawer services accordion */
.page .navdrawer .dr-svc{ border-bottom:1px solid var(--rule); }
.page .navdrawer .dr-svc > button{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:0; padding:6px 0; font-family:'Instrument Serif',serif; font-style:italic; font-size:44px; line-height:1.25; color:var(--ink); cursor:pointer; }
.page .navdrawer .dr-svc > button .pm{ font-family:'JetBrains Mono',monospace; font-size:24px; color:var(--terra); }
.page .navdrawer .dr-svc .sub{ display:grid; gap:2px; overflow:hidden; max-height:0; transition:max-height .3s ease; }
.page .navdrawer .dr-svc.open .sub{ max-height:600px; }
.page .navdrawer .dr-svc .sub a{ font-size:22px; padding:8px 0 8px 16px; border-bottom:0; }

/* SHARED NEWSLETTER FORM */
.page .nl-form{ display:flex; gap:12px; max-width:440px; margin:0 auto; width:100%; }
.page .nl-form input{ flex:1; padding:14px 18px; border-radius:999px; border:1px solid var(--rule); background:var(--paper); font-size:15px; font-family:'Manrope',sans-serif; color:var(--ink); }
.page .nl-form input:focus{ outline:none; border-color:var(--terra); }
.page .nl-form input.err{ border-color:var(--terra); background:color-mix(in srgb, var(--terra) 8%, var(--paper)); }
.page .nl-msg{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; margin-top:14px; min-height:16px; }
.page .nl-msg.bad{ color:var(--terra); }
.page .nl-done{ font-family:'Caveat',cursive; color:var(--terra); font-size:32px; line-height:1.1; }
.page .nl-done small{ display:block; font-family:'Manrope',sans-serif; font-size:15px; color:var(--ink-soft); margin-top:6px; }

/* ============ SCRAPBOOK KIT ============ */
.page .scrap{ position:absolute; pointer-events:none; z-index:6; }
.page .scrap.hov{ pointer-events:auto; }

/* washi tape */
.page .sb-tape{ display:inline-block; width:110px; height:30px; background:color-mix(in srgb, var(--rose) 72%, transparent); border-left:1px dashed rgba(0,0,0,.18); border-right:1px dashed rgba(0,0,0,.18); box-shadow:0 2px 6px -3px rgba(0,0,0,.3); opacity:.92; }
.page .sb-tape.olive{ background:color-mix(in srgb, var(--olive) 60%, transparent); }
.page .sb-tape.terra{ background:color-mix(in srgb, var(--terra) 55%, transparent); }
.page .sb-tape.ink{ background:color-mix(in srgb, var(--ink) 40%, transparent); }
.page .sb-tape::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 7px, rgba(255,255,255,.18) 7px 8px); }

/* handwritten annotation */
.page .sb-note{ font-family:'Caveat',cursive; color:var(--terra); font-size:26px; line-height:1.05; }
.page .sb-note .arr{ display:block; font-size:20px; }

/* circular rubber stamp / seal */
.page .sb-stamp{ width:96px; height:96px; border-radius:50%; border:2px solid var(--terra); color:var(--terra); display:flex; align-items:center; justify-content:center; text-align:center; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; line-height:1.5; background:color-mix(in srgb, var(--bg) 70%, transparent); position:relative; }
.page .sb-stamp::before{ content:''; position:absolute; inset:6px; border:1px solid var(--terra); border-radius:50%; opacity:.5; }
.page .sb-stamp.olive{ border-color:var(--olive); color:var(--olive); }
.page .sb-stamp.olive::before{ border-color:var(--olive); }
.page .sb-stamp.ink{ border-color:var(--ink); color:var(--ink); }
.page .sb-stamp.ink::before{ border-color:var(--ink); }
.page .sb-stamp.spin{ animation:sb-spin 24s linear infinite; }
@keyframes sb-spin{ to{ transform:rotate(360deg) } }

/* sticker pill */
.page .sb-sticker{ display:inline-flex; align-items:center; gap:7px; font-family:'Caveat',cursive; font-size:24px; line-height:1; color:#fff7ec; background:var(--terra); padding:8px 16px; border-radius:999px; box-shadow:0 8px 18px -8px rgba(0,0,0,.4); }
.page .sb-sticker.olive{ background:var(--olive); }
.page .sb-sticker.ink{ background:var(--ink); color:var(--bg); }
.page .sb-sticker.rose{ background:var(--rose); color:var(--ink); }

/* polaroid photo frame */
.page .sb-polaroid{ background:#fffdf6; padding:10px 10px 0; border-radius:3px; box-shadow:0 16px 34px -18px rgba(0,0,0,.5); display:inline-block; }
.page .sb-polaroid .pic{ overflow:hidden; background:var(--paper); }
.page .sb-polaroid .pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.page .sb-polaroid .cap{ font-family:'Caveat',cursive; font-size:20px; color:var(--ink); text-align:center; padding:8px 4px 12px; line-height:1; }

/* torn paper scrap */
.page .sb-scrap-paper{ background:var(--paper); padding:18px 22px; box-shadow:0 14px 30px -16px rgba(0,0,0,.4); position:relative; }
.page .sb-scrap-paper::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb,var(--ink) 8%, transparent) 27px 28px); pointer-events:none; }

/* paperclip */
.page .sb-clip{ width:22px; height:54px; border:3px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius:11px; border-bottom-color:transparent; }

/* doodle star/asterisk */
.page .sb-doodle{ font-family:'JetBrains Mono',monospace; color:var(--terra); font-size:28px; }
/* new scrapbook extras */
.page .scrap svg{ display:block; overflow:visible; }

.page .sb-bob{ animation:sb-bob 6s ease-in-out infinite; }
@keyframes sb-bob{ 0%,100%{ transform:translateY(0) rotate(var(--r,-4deg)) } 50%{ transform:translateY(-5px) rotate(calc(var(--r,-4deg) + 3deg)) } }
@media (max-width:900px){ .page .scrap.mh{ display:none; } }

/* SCROLL PROGRESS BAR */
.pg-scroll-progress{ position:fixed; top:0; left:0; height:3px; background:var(--terra); z-index:999; transition:width .1s linear; pointer-events:none; }

/* BACK TO TOP */
.pg-back-top{ position:fixed; bottom:32px; right:32px; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--bg); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px; z-index:100; box-shadow:0 4px 14px -4px rgba(0,0,0,.35); transition:opacity .3s, transform .3s; }
.pg-back-top:hover{ transform:translateY(-3px); }
.pg-back-top.hidden{ opacity:0; pointer-events:none; transform:translateY(8px); }

@media (max-width:860px){
  .page .nav{ padding:18px 24px; }
  .page .nav .links{ display:none; }
  .page .nav .group .booking{ display:none; }
  .page .nav .group .cta{ display:none; }
  .page .nav .burger{ display:flex; }
  .page .pghdr{ padding:48px 24px 32px; }
  .page .pghdr h1{ font-size:clamp(52px, 13vw, 96px); }
  .page footer{ padding:56px 24px 32px; }
  .page footer .top{ grid-template-columns:1fr; gap:36px; }
  .page footer .word{ font-size:clamp(64px, 18vw, 120px); }
  .page footer .legal{ flex-direction:column; gap:10px; }
  .page .cta-strip{ padding:90px 24px; }
  .page .cta-strip h2{ font-size:clamp(48px, 13vw, 96px); }
  .page .nl-form{ flex-direction:column; }
  .page .nl-form .btn{ justify-content:center; }
}
`;

function paletteVarsFromArr(p){
  const inkR = parseInt(p[2].slice(1,3),16), inkG = parseInt(p[2].slice(3,5),16), inkB = parseInt(p[2].slice(5,7),16);
  return {
    '--bg': p[0], '--paper': p[1], '--ink': p[2],
    '--ink-soft': `rgba(${inkR},${inkG},${inkB},.65)`,
    '--rule': `rgba(${inkR},${inkG},${inkB},.18)`,
    '--terra': p[3], '--olive': p[4], '--rose': p[5],
  };
}

function PageNav({ active }){
  const items = [
    { id:'home',     label:'Home',      href:'home.html' },
    { id:'work',     label:'Work',      href:'work.html' },
    { id:'about',    label:'About',     href:'about.html' },
    { id:'services', label:'Services',  href:'services.html', drop:true },
    { id:'journal',  label:'Journal',   href:'journal.html' },
    { id:'contact',  label:'Contact',   href:'contact.html' },
  ];
  const [open, setOpen] = React.useState(false);
  const [svcOpen, setSvcOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <React.Fragment>
    <nav className="nav">
      <a href="home.html" className="logo" style={{textDecoration:'none',color:'inherit'}}>Maia·Hariton <span className="idx">/ studio</span></a>
      <div className="links">
        {items.map(i => i.drop ? (
          <span key={i.id} className="has-drop">
            <a href={i.href} className={'drop-trigger ' + (i.id===active?'on':'')}>{i.label}<span className="caret">▼</span></a>
            <div className="dropdown">
              <div className="panel">
                {NAV_SERVICES.map(s => (
                  <a key={s.slug} href={'service.html?slug=' + s.slug}>
                    <span className="nm">{s.name}{s.isNew && <span className="nw">new</span>}</span>
                    <span className="mt">{s.meta}</span>
                  </a>
                ))}
                <div className="all"><a href="services.html"><span className="nm">All services →</span></a></div>
              </div>
            </div>
          </span>
        ) : (
          <a key={i.id} href={i.href} className={i.id===active?'on':''}>{i.label}</a>
        ))}
      </div>
      <div className="group">
        <div className="booking"><span className="dot"/>Booking · June 2026</div>
        <a href="contact.html" className="cta">Get in touch ↗</a>
        <button className={'burger' + (open ? ' open' : '')} aria-label="Menu" aria-expanded={open} onClick={()=>setOpen(o=>!o)}>
          <span/><span/><span/>
        </button>
      </div>
    </nav>
    <div className={'navdrawer' + (open ? ' open' : '')} role="dialog" aria-label="Menu">
      <a href="home.html" className={active==='home'?'on':''}>Home</a>
      <a href="work.html" className={active==='work'?'on':''}>Work</a>
      <a href="about.html" className={active==='about'?'on':''}>About</a>
      <div className={'dr-svc' + (svcOpen ? ' open' : '')}>
        <button onClick={()=>setSvcOpen(o=>!o)} aria-expanded={svcOpen}>
          <span className={active==='services'?'on':''} style={active==='services'?{color:'var(--terra)'}:null}>Services</span>
          <span className="pm">{svcOpen ? '−' : '+'}</span>
        </button>
        <div className="sub">
          {NAV_SERVICES.map(s => <a key={s.slug} href={'service.html?slug=' + s.slug}>{s.name}</a>)}
          <a href="services.html">All services →</a>
        </div>
      </div>
      <a href="journal.html" className={active==='journal'?'on':''}>Journal</a>
      <a href="contact.html" className={active==='contact'?'on':''}>Contact</a>
      <a href="faq.html" className={active==='faq'?'on':''}>FAQ</a>
      <div className="dr-foot">
        <div className="dr-booking"><span className="dot"/>Booking · June 2026</div>
        <a href="contact.html" className="cta">Get in touch ↗</a>
      </div>
    </div>
    </React.Fragment>
  );
}

function PageFooter(){
  return (
    <footer>
      <div className="top">
        <div>
          <h5>Maia Hariton</h5>
          <p style={{margin:0,fontSize:15,maxWidth:280,opacity:.85}}>Independent web designer & developer. Squarespace, Shopify, WordPress.</p>
          <p style={{margin:'24px 0 0',fontSize:14,opacity:.6,fontFamily:"'JetBrains Mono', monospace"}}>Los Angeles, CA</p>
        </div>
        <div><h5>Sitemap</h5><ul><li><a href="home.html">Home</a></li><li><a href="work.html">Work</a></li><li><a href="about.html">About</a></li><li><a href="services.html">Services</a></li><li><a href="journal.html">Journal</a></li><li><a href="contact.html">Contact</a></li><li><a href="faq.html">FAQ</a></li></ul></div>
        <div><h5>Services</h5><ul><li><a href="service.html?slug=squarespace">Squarespace</a></li><li><a href="service.html?slug=shopify">Shopify</a></li><li><a href="service.html?slug=wordpress">WordPress</a></li><li><a href="service.html?slug=apps">Apps &amp; native</a></li><li><a href="service.html?slug=brand">Brand &amp; identity</a></li><li><a href="service.html?slug=seo">SEO</a></li></ul></div>
      </div>
      <div className="word">Maia <span className="terra">Hariton</span></div>
      <div className="legal">
        <span>© 2026 Maia Hariton — independent web studio</span>
        <span>made with too much tea in LA · v.24</span>
      </div>
    </footer>
  );
}

// ---- SEO ----
function upsertMeta(attr, key, content){
  let el = document.head.querySelector('meta[' + attr + '="' + key + '"]');
  if (!el){ el = document.createElement('meta'); el.setAttribute(attr, key); document.head.appendChild(el); }
  el.setAttribute('content', content);
}
function applySEO({ title, description, image, type='website', url }){
  if (title) document.title = title;
  const u = url || location.href;
  if (description) upsertMeta('name', 'description', description);
  upsertMeta('property', 'og:title', title || document.title);
  if (description) upsertMeta('property', 'og:description', description);
  upsertMeta('property', 'og:type', type);
  upsertMeta('property', 'og:url', u);
  if (image) upsertMeta('property', 'og:image', new URL(image, location.href).href);
  upsertMeta('name', 'twitter:card', image ? 'summary_large_image' : 'summary');
  upsertMeta('name', 'twitter:title', title || document.title);
  if (description) upsertMeta('name', 'twitter:description', description);
  if (image) upsertMeta('name', 'twitter:image', new URL(image, location.href).href);
  let link = document.head.querySelector('link[rel="canonical"]');
  if (!link){ link = document.createElement('link'); link.setAttribute('rel','canonical'); document.head.appendChild(link); }
  link.setAttribute('href', u);
}
function applyJSONLD(obj){
  let s = document.getElementById('ld-json');
  if (!s){ s = document.createElement('script'); s.type = 'application/ld+json'; s.id = 'ld-json'; document.head.appendChild(s); }
  s.textContent = JSON.stringify(obj);
}

// ---- SHARED NEWSLETTER FORM ----
function NewsletterForm({ placeholder='you@elsewhere.com', cta='Subscribe' }){
  const [val, setVal] = React.useState('');
  const [state, setState] = React.useState('idle');
  function submit(e){
    e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val.trim());
    if (!ok){ setState('error'); return; }
    setState('done');
  }
  if (state === 'done'){
    return (
      <div className="nl-done">on the list — thank you ✨
        <small>Watch your inbox once or twice a year. Unsubscribe any time.</small>
      </div>
    );
  }
  return (
    <React.Fragment>
      <form className="nl-form" onSubmit={submit} noValidate>
        <input
          className={state==='error' ? 'err' : ''}
          type="email" value={val} placeholder={placeholder}
          onChange={e=>{ setVal(e.target.value); if(state==='error') setState('idle'); }}
          aria-label="Email address"
        />
        <button className="btn" type="submit">{cta}</button>
      </form>
      <div className={'nl-msg' + (state==='error' ? ' bad' : '')}>
        {state==='error' ? 'Hmm — that doesn’t look like an email address.' : ''}
      </div>
    </React.Fragment>
  );
}

// ---- SCRAPBOOK COMPONENTS ----
// Absolutely-positioned by default; pass `at` for {top,left,right,bottom} and `rot` for rotation.
function pos(at, rot, bob, extra){
  const style = { ...(at||{}) };
  if (typeof rot === 'number') style['--r'] = rot + 'deg';
  if (!bob && typeof rot === 'number') style.transform = `rotate(${rot}deg)`;
  return { style: { ...style, ...(extra||{}) } };
}
function Tape({ at, rot=-6, color='', w, mobileHide }){
  const p = pos(at, rot, false, w?{width:w}:null);
  return <span className={'scrap mh'+(mobileHide?'':'')} {...p}><span className={'sb-tape '+color} style={{display:'block',width:'100%',height:'100%'}}/></span>;
}
function Note({ at, rot=-4, children, bob=true, hov, mobileHide=true }){
  const p = pos(at, rot, bob);
  return <div className={'scrap sb-note '+(bob?'sb-bob ':'')+(hov?'hov ':'')+(mobileHide?'mh':'')} {...p}>{children}</div>;
}
function Stamp({ at, rot=-8, color='', spin, children, mobileHide=true }){
  const p = pos(at, rot, spin);
  return <div className={'scrap '+(mobileHide?'mh':'')} {...p}><div className={'sb-stamp '+color+(spin?' spin':'')}>{children}</div></div>;
}
function Sticker({ at, rot=-3, color='', children, bob=true, mobileHide=true }){
  const p = pos(at, rot, bob);
  return <div className={'scrap '+(bob?'sb-bob ':'')+(mobileHide?'mh':'')} {...p}><span className={'sb-sticker '+color}>{children}</span></div>;
}
function Polaroid({ at, rot=-3, src, alt='', cap, w=180, picH=150, mobileHide=true }){
  const p = pos(at, rot, false, {width:w});
  return (
    <div className={'scrap '+(mobileHide?'mh':'')} {...p}>
      <div className="sb-polaroid" style={{width:w}}>
        <div className="pic" style={{height:picH}}><img src={src} alt={alt}/></div>
        {cap && <div className="cap">{cap}</div>}
      </div>
    </div>
  );
}
function Doodle({ at, rot=0, children, mobileHide=true }){
  const p = pos(at, rot, false);
  return <div className={'scrap sb-doodle '+(mobileHide?'mh':'')} {...p}>{children}</div>;
}

// Hand-drawn SVG squiggle underline
function Squiggle({ at, rot=0, color='terra', w=120, mobileHide=true }){
  const p = pos(at, rot, false, {width:w});
  const c = color==='terra'?'var(--terra)':color==='olive'?'var(--olive)':color==='rose'?'var(--rose)':'var(--ink)';
  return (
    <div className={'scrap '+(mobileHide?'mh':'')} {...p}>
      <svg viewBox={`0 0 ${w} 14`} width={w} height={14} fill="none">
        <path d={`M2,8 Q${w*0.1},2 ${w*0.2},8 Q${w*0.3},14 ${w*0.4},8 Q${w*0.5},2 ${w*0.6},8 Q${w*0.7},14 ${w*0.8},8 Q${w*0.9},2 ${w-2},8`}
          stroke={c} strokeWidth="2" strokeLinecap="round"/>
      </svg>
    </div>
  );
}

// Hand-drawn SVG star doodle
function StarDoodle({ at, rot=0, size=32, color='terra', mobileHide=true }){
  const p = pos(at, rot, false);
  const c = color==='terra'?'var(--terra)':color==='olive'?'var(--olive)':color==='rose'?'var(--rose)':'var(--ink)';
  const pts=[];
  for(let i=0;i<8;i++){
    const a=(i/8)*Math.PI*2 - Math.PI/2;
    const r=i%2===0?size/2:size/5;
    pts.push(`${size/2+Math.cos(a)*r},${size/2+Math.sin(a)*r}`);
  }
  return (
    <div className={'scrap '+(mobileHide?'mh':'')} {...p}>
      <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
        <polygon points={pts.join(' ')} fill={c} opacity=".85"/>
      </svg>
    </div>
  );
}

// Drawn arrow
function Arrow({ at, rot=0, color='terra', len=60, mobileHide=true }){
  const p = pos(at, rot, false);
  const c = color==='terra'?'var(--terra)':color==='olive'?'var(--olive)':'var(--ink)';
  return (
    <div className={'scrap '+(mobileHide?'mh':'')} {...p}>
      <svg viewBox={`0 0 ${len} 24`} width={len} height={24} fill="none">
        <path d={`M4,12 Q${len*0.4},6 ${len-8},12`} stroke={c} strokeWidth="2" strokeLinecap="round"/>
        <path d={`M${len-14},7 L${len-4},12 L${len-14},17`} stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      </svg>
    </div>
  );
}

function ScrollProgressBar(){
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const scrollTop = window.scrollY;
      const docH = document.documentElement.scrollHeight - window.innerHeight;
      setPct(docH > 0 ? (scrollTop / docH) * 100 : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return <div className="pg-scroll-progress" style={{ width: pct + '%' }} aria-hidden="true"/>;
}

function BackToTopButton(){
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 300);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <button
      className={'pg-back-top' + (visible ? '' : ' hidden')}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Back to top"
    >↑</button>
  );
}

function PageShell({ active, children }){
  const [t, setTweak] = (typeof useTweaks === 'function') ? useTweaks(SHELL_DEFAULTS) : [SHELL_DEFAULTS, ()=>{}];
  const p = Array.isArray(t.palette) ? t.palette : SHELL_DEFAULTS.palette;
  return (
    <div className="page" style={paletteVarsFromArr(p)}>
      <style>{ShellCSS}</style>
      <ScrollProgressBar />
      <PageNav active={active} />
      {children}
      <PageFooter/>
      <BackToTopButton />
    </div>
  );
}

Object.assign(window, { PageShell, PageNav, PageFooter, paletteVarsFromArr, SHELL_PALETTES, SHELL_DEFAULTS, applySEO, applyJSONLD, NewsletterForm, ScrollProgressBar, BackToTopButton, Tape, Note, Stamp, Sticker, Polaroid, Doodle, Squiggle, StarDoodle, Arrow });