/* ============================================================
   Digital Odyssey, Services page
   ============================================================ */

function ServicesGridSection() {
  return (
    <section className="section">
      <Container>
        <div className="reveal" style={{ marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Ten disciplines, one engine</div>
          <h2 className="do-display-lg" style={{ margin: 0, maxWidth: 620 }}>We do the few things that actually grow a business, exceptionally well.</h2>
        </div>
        <div className="grid-2">
          {(() => {
            const order = ['perf','aivideo','aidash','web','smm','content'];
            const ranked = [...SERVICES].sort((a,b) => {
              const ai = order.indexOf(a.key), bi = order.indexOf(b.key);
              return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
            });
            return ranked.map((s, i) => <ServiceCard key={s.key} s={s} index={i} showPoints />);
          })()}
        </div>
      </Container>
    </section>);

}

function ServicesSpotlight() {
  return (
    <section className="section" style={{ background: 'var(--page-soft)' }}>
      <Container>
        <div className="split">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Built around your economics</div>
            <h2 className="do-display-md" style={{ margin: '0 0 20px' }}>Every dollar is tracked to a number that matters.</h2>
            <p className="do-body-lg" style={{ margin: '0 0 24px' }}>We do not optimize for impressions or likes. We build to your CAC, your ROAS and your margins, then make those numbers move, month over month.</p>
            <div style={{ display: 'flex', gap: 32, marginBottom: 32, flexWrap: 'wrap' }}>
              <Donut pct={86} label="On-target" />
              <Donut pct={72} label="Tracked spend" color="#0052ff" />
            </div>
            <Button href="contact.html" variant="primary" icon="arrow-right">Get a free growth audit</Button>
          </div>
          <div className="reveal" style={{ display: 'flex', justifyContent: 'center', transitionDelay: '120ms' }}>
            <div style={{ animation: 'do-float 7s ease-in-out infinite' }}><AnalyticsCard /></div>
          </div>
        </div>
      </Container>
    </section>);

}

function ServicesProcess() {
  return (
    <section className="section">
      <Container>
        <SectionHead eyebrow="How we engage" title="The same disciplined route, every time." body="Whether we run one channel or all six, the operating system is identical, so the work stays measurable and accountable." align="center" maxBody={620} />
        <ProcessSteps steps={PROCESS} />
      </Container>
    </section>);

}

const SERVICE_FAQS = [
['Can we start with just one service?', 'Absolutely. Many clients begin with paid media or SEO, see the system work, then expand. We will always tell you which one channel will move the needle fastest for you right now.'],
['Do you bring your own creative?', 'Yes. Content creation is one of our core services, we shoot, design and write in-house, so paid and social are never waiting on assets.'],
['How is ad spend handled?', 'Ad spend is billed transparently and runs through your own accounts. You see exactly what is spent, where, and what it returned, never marked up or hidden.'],
['What size businesses do you work with?', 'Growth-stage startups, established SMBs and multi-location brands. If you have product-market fit and room to grow, we can usually help.'],
['How soon can we launch?', 'Most engagements move from kickoff to live campaigns within two to three weeks, depending on tracking and creative readiness.'],
['Will we have a dedicated contact?', 'Always. You get a named strategist who knows your account, runs your reviews, and is reachable between them.']];


function ServicesApp() {
  useReveal();
  return (
    <>
      <TopNav active="services" />
      <main>
        <PageHero eyebrow="Our services" title="Every channel that moves revenue, run by one team."
        body="No silos, no hand-offs, no finger-pointing between agencies. Strategy, media, creative and analytics under one roof, pulling in the same direction."
        aside={<ServiceTiles />}>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button href="contact.html" size="lg" variant="cyan" icon="arrow-right">Book a discovery call</Button>
            <Button href="work.html" size="lg" variant="outline" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.25)' }}>See the work</Button>
          </div>
        </PageHero>
        <ServicesGridSection />
        <ServicesSpotlight />
        <ServicesProcess />
        <section className="section" style={{ background: 'var(--page-soft)' }}>
          <Container style={{ maxWidth: 840 }}>
            <SectionHead eyebrow="Service FAQ" title="Good questions, straight answers." align="center" />
            <FaqAccordion items={SERVICE_FAQS} />
          </Container>
        </section>
        <CtaBand title="Not sure which channel to start with?" body="Tell us your goals and we'll tell you, honestly, where your next dollar works hardest." />
      </main>
      <Footer />
    </>);

}

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