// page-faq.jsx
const FCSS = `
.page .faq-list{ padding:60px 56px 80px; max-width:1100px; }
.page .faq-list .grp{ margin-bottom:64px; }
.page .faq-list .grp h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:48px; line-height:1; margin:0 0 24px; }
.page .faq-list .grp h2 em{ color:var(--terra); }
.page .faq-list details{ border-top:1px solid var(--rule); padding:24px 0; }
.page .faq-list details:last-child{ border-bottom:1px solid var(--rule); }
.page .faq-list summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.page .faq-list summary::-webkit-details-marker{ display:none; }
.page .faq-list summary .q{ font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; line-height:1.1; }
.page .faq-list summary .ic{ font-family:'Instrument Serif',serif; font-style:italic; font-size:32px; color:var(--terra); transition:transform .25s; }
.page .faq-list details[open] summary .ic{ transform:rotate(45deg); }
.page .faq-list .a{ font-size:16.5px; color:var(--ink-soft); margin-top:18px; max-width:780px; }
`;

const FAQS = [
  { g:'Working together', items:[
    { q:'How does a project usually start?', a:'A 30-minute call so we both know what we’re getting into. After that, a fixed-price proposal in plain English. No pitch decks, no NDAs at the intro stage.' },
    { q:'How long does a build take?', a:'Anywhere from 5 business days (One-Week Site) to 10 weeks (Brand + Site). Most custom builds land in 5–7 weeks.' },
    { q:'Do you take a deposit?', a:'50% to start, 50% at launch. Larger projects can split into thirds. Wires, ACH, or invoicing through Stripe.' },
    { q:'How many clients at once?', a:'Two, max. That’s the whole reason the booking calendar is what it is.' },
  ]},
  { g:'Scope & process', items:[
    { q:'How many revisions are included?', a:'Two full rounds at the design stage, plus unlimited small tweaks during build. “Small” and “large” get defined in the proposal.' },
    { q:'Do I get to see things in progress?', a:'Yes. I design live in the platform you’re launching on, not in static Figma. You can click around the actual site as it grows.' },
    { q:'What about copy and photography?', a:'I write the structure and reference copy. Final copy + photography is yours, but I’ll happily refer trusted people.' },
    { q:'Will you redesign someone else’s site?', a:'Yes. Often the highest-leverage thing a small business can do.' },
    { q:'Do you build apps — mobile or native?', a:'Yes. Native iOS and Android, cross-platform React Native, and installable web apps. It’s a full service now, designed and shipped end to end. I’ll tell you honestly which of the three you actually need.' },
  ]},
  { g:'Money', items:[
    { q:'Are prices on the site real?', a:'Yes. The “from” number is what most projects in that bucket cost. Bigger scope, bigger number — always written down before we start.' },
    { q:'Hourly?', a:'No. Fixed-price for projects, monthly retainer for ongoing. Hourly billing rewards the wrong things.' },
    { q:'Do you charge for the intro call?', a:'No. The call is free, the proposal is free. You only pay if we sign.' },
  ]},
  { g:'After launch', items:[
    { q:'What happens after we launch?', a:'30 days of small fixes are free. After that, retainer or pay-as-you-go. You own the site, the files, and the deploy keys.' },
    { q:'Can you train my team?', a:'Yes — a 30 to 60 minute Loom walkthrough comes standard. Live sessions on request.' },
    { q:'Will you maintain the site forever?', a:'No, but I’ll happily hand you off cleanly. Most clients stay on a $400/mo retainer for tweaks.' },
  ]},
];

function FaqPage(){
  return (
    <PageShell active="services">
      <style>{FCSS}</style>
      <header className="pghdr">
        <div className="eyebrow">FAQ · Stuff people ask</div>
        <h1>Probably your<br/><em>question</em>, answered.</h1>
        <p className="lede">Sixteen of the most common questions I get. If yours isn’t here, just write to me.</p>
        <Note at={{ bottom: 44, right: 70 }} rot={6}>can’t find yours?<br/>just ask <span className="arr">↘</span></Note>
      </header>

      <section className="faq-list">
        {FAQS.map(g => (
          <div key={g.g} className="grp">
            <h2>{g.g.split(' ').map((w,i,arr)=> i===arr.length-1 ? <em key={i}>{w}</em> : w+' ')}</h2>
            {g.items.map(it => (
              <details key={it.q}>
                <summary><span className="q">{it.q}</span><span className="ic">+</span></summary>
                <div className="a">{it.a}</div>
              </details>
            ))}
          </div>
        ))}
      </section>

      <section className="cta-strip">
        <h2>Still <em>curious</em>?</h2>
        <p>Send me a message. I read every one.</p>
        <a className="btn" href="contact.html">Get in touch ↗</a>
      </section>
    </PageShell>
  );
}

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