// Studio page — services + inline estimator
function StudioPage({ go }) {
  const services = [
  {
    n: "01",
    name: "Score & Part Preparation",
    tag: "Core",
    desc: "Engraving, layout, formatting and parts extraction — the core offering. Optional add-ons: MIDI export and Orchestration Premium for projects requiring creative arrangement decisions beyond pure layout.",
    who: "Composers · Arrangers · Ensembles"
  },
  {
    n: "02",
    name: "Orchestration & Arranging",
    tag: "Reduction",
    desc: "Condensing an ensemble or orchestral score down to a playable piano or musical director score — faithful to the original.",
    who: "Musical directors · Rehearsal pianists"
  },
  {
    n: "03",
    name: "Notation Input / Digitisation",
    tag: "Input",
    desc: "Taking existing music — printed, photocopied, or handwritten manuscript — and producing a clean, engraved digital score ready for performance or publication.",
    who: "Publishers · Estates · Composers"
  },
  {
    n: "04",
    name: "Transposition",
    tag: "Adjustment",
    desc: "Key changes or instrumental transposition across individual parts or a full score, with proof against the original notation.",
    who: "Vocalists · Wind & brass players"
  },
  {
    n: "05",
    name: "Audio Transcription",
    tag: "Transcription",
    desc: "Listening to a recording and transcribing it into notation and/or MIDI. Priced per minute of audio, scaled by number of instruments. Output as notation, MIDI, or both.",
    who: "Artists · Producers · Educators"
  },
  {
    n: "06",
    name: "Demo / Mockup Audio",
    tag: "Production",
    desc: "A professional-quality audio mockup using virtual instruments, priced per minute of finished audio. Orchestral projects capped at £375.",
    who: "Film · Theatre · Commissioners"
  },
  {
    n: "07",
    name: "Printing, Binding & Delivery",
    tag: "Print",
    desc: "In-house production. Conductor score (A3) and parts (A4) quoted separately — white or cream 120gsm, with binding. Dynamic parts list lets you specify copies per instrument.",
    who: "Conductors · Orchestras · Festivals"
  }];


  return (
    <div className="page">
      <div className="wrap">
        <div className="hero">
          <div className="hero-meta">
            <div className="mono">II ⁄ Music Preparation Studio</div>
            <div className="mono">— EST. 2026</div>
          </div>
          <h1 className="hero-title hero-title--sans">
            Prepared<br />with care.
          </h1>
          <p className="hero-sub">A dedicated music-preparation studio for composers, arrangers and ensembles. Engraving, transcription, parts, mockups, print and binding. Use the <button type="button" className="faq-inline-link" onClick={() => { const el = document.getElementById("estimator"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" }); }}>quick estimator</button> below, <button type="button" className="faq-inline-link" onClick={() => go("submit")}>submit a score</button> for a firm quote, or read the <button type="button" className="faq-inline-link" onClick={() => go("faq")}>FAQ</button>.

          </p>
          <div className="hero-cta">
            <button className="btn-primary" onClick={() => { const el = document.getElementById("estimator"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" }); }}>
              <span>Get an instant quote</span>
              <span className="arrow"></span>
            </button>
          </div>
        </div>

        {/* SERVICES */}
        <section className="section">
          <div className="section-head">
            <div className="mono">SERVICES</div>
            <h2>The Services</h2>
          </div>
          <div className="services">
            {services.map((s) =>
            <button
              key={s.n}
              type="button"
              className="service service-link"
              onClick={() => go(`service:${s.n}`)}>
              
                <div className="service-head">
                  <div className="service-num">{s.n}</div>
                  <div className="service-tag">{s.tag}</div>
                </div>
                <h3 className="service-name">{s.name}</h3>
                <p className="service-desc">{s.desc}</p>
                <div className="service-for">For — {s.who}</div>
                <div className="service-arrow mono-sm">View service →</div>
              </button>
            )}
          </div>
        </section>

        {/* ESTIMATOR */}
        <section className="section" id="estimator">
          <div className="section-head">
            <div className="mono">ESTIMATE</div>
            <h2>Quick estimate.</h2>
          </div>
          <Estimator />
          <div className="mono-sm" style={{ marginTop: 24, maxWidth: 640, lineHeight: 1.7 }}>
            Estimates are indicative. A final quote is produced after a look at your source materials — <button type="button" className="faq-inline-link" onClick={() => go("submit")}>submit a score</button> to receive a firm price and turnaround.
          </div>
        </section>

        {/* CTA STRIP */}
        <section className="section" style={{ borderBottom: "none" }}>
          <div className="studio-cta">
            <div>
              <div className="mono" style={{ marginBottom: 16 }}>SUBMIT</div>
              <h2 className="studio-cta-title">
                Send a score.<br />
                <span className="muted">Get a firm quote.</span>
              </h2>
            </div>
            <button className="btn-primary" onClick={() => go("submit")}>
              <span>Submit a score</span>
              <span className="arrow"></span>
            </button>
          </div>
        </section>

        <SiteFooter go={go} />
      </div>
    </div>);

}

window.StudioPage = StudioPage;