// page-services.jsx — Services overview; rows link to per-service pages (service.html?slug=)

const SvcCSS = `
.page .svc-list{ padding:40px 56px 80px; }
.page .svc-list .row{ display:grid; grid-template-columns:90px 1.4fr 2fr 200px; gap:48px; padding:48px 0; border-top:1px solid var(--rule); align-items:start; text-decoration:none; color:inherit; transition:padding .2s, background .2s; }
.page .svc-list .row:last-child{ border-bottom:1px solid var(--rule); }
.page .svc-list .row:hover{ padding-left:14px; padding-right:14px; background:var(--paper); }
.page .svc-list .row .num{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink-soft); }
.page .svc-list .row .name{ font-family:'Instrument Serif',serif; font-style:italic; font-size:48px; line-height:1; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.page .svc-list .row .name .new{ font-family:'JetBrains Mono',monospace; font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); border:1px solid var(--terra); border-radius:999px; padding:3px 9px; }
.page .svc-list .row .desc{ font-size:16px; color:var(--ink-soft); }
.page .svc-list .row .desc ul{ padding:0; margin:18px 0 0; list-style:none; display:grid; gap:8px; }
.page .svc-list .row .desc li{ font-size:14px; padding-left:18px; position:relative; color:var(--ink); }
.page .svc-list .row .desc li::before{ content:'✻'; position:absolute; left:0; color:var(--terra); }
.page .svc-list .row .meta{ text-align:right; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); letter-spacing:.06em; }
.page .svc-list .row .meta strong{ display:block; font-size:14px; color:var(--ink); margin-bottom:4px; font-weight:500; letter-spacing:0; }
.page .svc-list .row .meta .go{ display:inline-block; margin-top:16px; font-family:'Instrument Serif',serif; font-style:italic; font-size:20px; color:var(--terra); opacity:0; transform:translateX(-6px); transition:.2s; }
.page .svc-list .row:hover .meta .go{ opacity:1; transform:translateX(0); }

.page .svc-band{ background:var(--paper); padding:120px 56px; }
.page .svc-band h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:80px; line-height:.95; max-width:900px; margin:0 0 48px; }
.page .svc-band h2 em{ color:var(--terra); }
.page .svc-band .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.page .svc-band .item{ background:var(--bg); padding:32px; border-radius:8px; }
.page .svc-band .item h4{ font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; margin:0 0 12px; }
.page .svc-band .item p{ margin:0; color:var(--ink-soft); font-size:15px; }

@media (max-width:900px){
  .page .svc-list{ padding:24px 24px 60px; }
  .page .svc-list .row{ grid-template-columns:1fr; gap:16px; padding:36px 0; }
  .page .svc-list .row .name{ font-size:38px; }
  .page .svc-list .row .meta{ text-align:left; display:flex; gap:18px; align-items:baseline; }
  .page .svc-list .row .meta strong{ margin-bottom:0; }
  .page .svc-band{ padding:72px 24px; }
  .page .svc-band h2{ font-size:clamp(40px,11vw,72px); }
  .page .svc-band .grid{ grid-template-columns:1fr; }
}
`;

const SVC_FAQ = [
  { q:'Can I hire you for just part of a project?', a:'Sometimes — for example, build-only when you already have a designer, or design-only if you have a developer in mind. Tell me what you need up front and I’ll let you know honestly if it’s a fit.' },
  { q:'Do you work with agencies?', a:'Selectively. White-label dev for one or two trusted design partners is fine. Reach out.' },
  { q:'What about apps, mobile, native?', a:'Yes — that’s a service now. Native iOS and Android, cross-platform React Native, and installable web apps, designed and shipped end to end. See the Apps, mobile & native page for the details.' },
  { q:'Maintenance after launch?', a:'30 days of small fixes are free. After that the retainer covers ongoing tweaks. No retainer required.' },
];

function ServicesPage(){
  React.useEffect(() => {
    applySEO({
      title: 'Services — Maia Hariton',
      description: 'Nine ways I can help: Squarespace, Shopify, WordPress, apps & native, brand, redesigns, SEO, migrations, and ongoing support.',
    });
  }, []);

  return (
    <PageShell active="services">
      <style>{SvcCSS}</style>
      <header className="pghdr">
        <div className="eyebrow">Services · {SERVICE_ORDER.length} ways I can help</div>
        <h1>Pick the one that <em>sounds like you</em>.</h1>
        <p className="lede">Pricing is honest, scope is written, and timelines mean what they say. If none of these fit exactly, write to me — I custom-fit too.</p>
        <Note at={{ bottom: 44, right: 70 }} rot={5}>now including apps! <span className="arr">↘</span></Note>
      </header>

      <section className="svc-list">
        {SERVICE_ORDER.map(slug => {
          const s = SERVICE_DETAILS[slug];
          return (
            <a key={slug} className="row" href={'service.html?slug=' + slug}>
              <div className="num">— {s.n}</div>
              <div className="name">{s.name}{s.isNew && <span className="new">✦ new</span>}</div>
              <div className="desc">
                <p style={{margin:0}}>{s.short}</p>
                <ul>{s.includes.slice(0,4).map(b => <li key={b.t}>{b.t}</li>)}</ul>
              </div>
              <div className="meta">
                <strong>{s.from}</strong>
                <div>{s.time}</div>
                <span className="go">Read more →</span>
              </div>
            </a>
          );
        })}
      </section>

      <section className="svc-band">
        <div className="eyebrow">Common questions</div>
        <h2>The <em>shorter</em> answers.</h2>
        <div className="grid">
          {SVC_FAQ.map(f => (
            <div key={f.q} className="item">
              <h4>{f.q}</h4>
              <p>{f.a}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="cta-strip">
        <h2>Ready to <em>start</em>?</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(<ServicesPage/>);