// Sybre — Services overview + service detail template

const SERVICE_DATA = {
  'managed-it': {
    eyebrow: 'Managed IT',
    h1: 'Infrastructure that <em>just works</em>.',
    lead: 'We take full ownership of your technology environment. Endpoints, servers, networks, identity, and every vendor in between. Your team gets back to its actual work.',
    included: [
      { t:'24/7 monitoring and alerting', b:'Proactive detection across endpoints, servers, network infrastructure, and cloud services. Issues are identified and resolved before they reach your team.' },
      { t:'Patch and lifecycle management', b:'Operating systems, firmware, browsers, and line-of-business applications. Tracked, scheduled, and audited on a published calendar.' },
      { t:'Vendor management', b:'A single point of accountability for your technology supply chain. We manage Microsoft, your internet provider, and your line-of-business vendors on your behalf.' },
      { t:'Monthly reporting', b:'A concise report each month covering activity, resolutions, and recommendations. Written for executives, not auditors.' },
      { t:'Virtual CIO advisory', b:'A senior technology advisor at the table for strategic decisions. Quarterly reviews, roadmap planning, and budget guidance.' },
    ],
    pricing: 'Per-seat per-month managed support, with infrastructure work scoped separately. Most engagements sit between $90 and $160 per seat per month, depending on environment complexity.',
    accent: 'orange',
  },
  'cybersecurity': {
    eyebrow: 'Cybersecurity',
    h1: 'Protection built for <em>the real world</em>.',
    lead: 'Layered detection, response, and compliance — built around Essential Eight and tuned for mid-market budgets. No fear-based selling, no theatre.',
    included: [
      { t:'Endpoint detection & response', b:'24/7 EDR with a real human SOC behind it. Investigation and containment, not just alerts.' },
      { t:'Email security & anti-phishing', b:'Inbound filtering, sandboxing, and impersonation protection — tuned to your domain.' },
      { t:'Awareness training', b:'Quarterly training and simulated phishing. Measurable, not punitive.' },
      { t:'Dark web & breach monitoring', b:'We watch the leaks so you don’t have to. Credentials, domains, and exposed data, monitored continuously.' },
      { t:'Incident response retainer', b:'A pre-agreed playbook and a phone number you can call at 3am. Hourly cap on response time.' },
    ],
    pricing: 'Bundled with Managed IT, or standalone for mature internal teams. Starting from $35 per seat per month for the EDR + email + awareness layer.',
    accent: 'orange',
  },
  'consulting': {
    eyebrow: 'Consulting & design',
    h1: 'Architecture, <em>without the slide deck</em>.',
    lead: 'Discovery, infrastructure design, procurement, and integration work — for organisations that need a senior engineer to think clearly about their stack.',
    included: [
      { t:'Discovery & assessment', b:'Two to four weeks. Stakeholder interviews, environment audit, gap analysis. Output: a written report you can act on.' },
      { t:'Infrastructure design', b:'Network, identity, endpoint, backup, and disaster recovery — designed as a system, not a list of products.' },
      { t:'Procurement', b:'Vendor-agnostic sourcing. We pick what fits, and we tell you why.' },
      { t:'Integration delivery', b:'M365 / Entra ID, line-of-business apps, finance and HR systems, identity federation, SSO, MFA rollout.' },
      { t:'Migration & cutover', b:'Tenant-to-tenant, on-prem-to-cloud, M&A consolidation. Planned, dress-rehearsed, executed.' },
    ],
    pricing: 'Fixed-fee discovery from $14,800. Implementation work scoped on the back of the discovery output — no open-ended time-and-materials.',
    accent: 'orange',
  },
};

function ServicesOverviewPage() {
  return (
    <Page>
      <section className="page-hero" style={{ position:'relative', overflow:'hidden' }}>
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage:'url(assets/Images/bw_geo02.jpg)' }} />
        <div className="container" style={{ position:'relative' }}>
          <Reveal>
            <div className="eyebrow accent" style={{ marginBottom: 24 }}>Services</div>
            <h1 className="h-hero" style={{ marginBottom: 24 }}>
              One team. <em className="accent">Five practices.</em>
            </h1>
            <p className="lead lg">
              A boutique managed services partner for mid-market Australian businesses. Senior engineers on every engagement, local AI where it matters, and a single phone number when you need it.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Reveal stagger style={{ display:'flex', flexDirection:'column', gap: 16 }}>
            {[
              { num:'01', slug:'managed-it',    title:'Managed IT',          tag:'Infrastructure that just works.', body:'Proactive monitoring, patching, and support. We take ownership of the environment so your team stops firefighting.' },
              { num:'02', slug:'cybersecurity', title:'Cybersecurity',       tag:'Protection built for the real world.', body:'EDR, email security, awareness training, dark-web monitoring, and a real incident-response retainer.' },
              { num:'03', slug:'ai',            title:'AI infrastructure',   tag:'Your data stays on your premises.', body:'Local LLM deployment, retrieval-augmented generation, document automation. No cloud round-trips.', accent:true },
              { num:'04', slug:'consulting',    title:'Consulting & design', tag:'Architecture, without the slide deck.', body:'Discovery, design, procurement, integration. Fixed-fee scoping, no open-ended time-and-materials.' },
            ].map(s => (
              <Link key={s.slug} to={'/services/' + s.slug} className={'card is-link' + (s.accent ? ' accent' : '')} style={{ display:'grid', gridTemplateColumns:'1fr auto', gap: 32, alignItems:'center', padding:'40px 44px' }}>
                <div>
                  <h3 className="h-card" style={{ fontSize: 28, marginBottom: 8 }}>{s.title}</h3>
                  <p className="tagline" style={{ marginBottom: 10 }}>{s.tag}</p>
                  <p className="body" style={{ maxWidth: 640 }}>{s.body}</p>
                </div>
                <span className="btn btn-ghost btn-arrow">Explore</span>
              </Link>
            ))}
          </Reveal>
        </div>
      </section>

      <FinalCTA num="02" label="Next step" title="Not sure which one <em>you need</em>?" />
    </Page>
  );
}

// ── Generic detail template (Managed IT / Cyber / Consulting) ─
function ServiceDetailPage({ slug }) {
  const data = SERVICE_DATA[slug];
  if (!data) return <NotFound />;
  return (
    <Page>
      <section className="page-hero" style={{ position:'relative', overflow:'hidden' }}>
        <div aria-hidden="true" className="hero-splash" style={{ backgroundImage:'url(assets/Images/bw_geo02.jpg)' }} />
        <div className="container" style={{ position:'relative' }}>
          <Reveal>
            <Link to="/services" className="meta" style={{ display:'inline-block', marginBottom:24 }}>← All services</Link>
            <div className="eyebrow accent" style={{ marginBottom: 24 }}>{data.eyebrow}</div>
            <h1 className="h-hero" style={{ marginBottom: 24 }} dangerouslySetInnerHTML={{ __html: data.h1 }} />
            <p className="lead lg" style={{ marginBottom: 36 }}>{data.lead}</p>
            <Link to="/contact" className="btn btn-primary">Book a discovery call</Link>
          </Reveal>
        </div>
      </section>

      {/* What's included */}
      <section className="section">
        <div className="container">
          <SectionHead num="01" label="What's included" title={"Inside the <em>engagement</em>."} />
          <Reveal stagger className="grid-3">
            {data.included.map((it, i) => (
              <div key={i} className="card" style={{ minHeight: 200 }}>
                <h3 className="h-card" style={{ marginBottom: 12 }}>{it.t}</h3>
                <p className="body">{it.b}</p>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* How we work */}
      <section className="band">
        <div className="container">
          <SectionHead num="02" label="How we work" title={"Discovery. Design. <em>Delivery</em>."} />
          <div className="grid-3">
            {[
              { n:'01', t:'Discovery', b:'We interview your stakeholders, audit your environment, and document what we find. Two to four weeks. All outputs are yours to keep.' },
              { n:'02', t:'Design', b:'We design the engagement as a system. People, process, and technology. Fixed scope, fixed fee, written in plain English.' },
              { n:'03', t:'Delivery', b:'We execute against the plan. Weekly check-ins, monthly reporting. No open-ended time and materials, no surprise invoices.' },
            ].map(s => (
              <Reveal key={s.n}>
                <div className="card" style={{ minHeight: 200 }}>
                  <h3 className="h-card" style={{ marginBottom: 12 }}>{s.t}</h3>
                  <p className="body">{s.b}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing orientation */}
      <section className="section">
        <div className="container" style={{ display:'grid', gridTemplateColumns:'1fr 2fr', gap: 64, alignItems:'start' }}>
          <Reveal>
            <h2 className="h-section">Honest about <em className="accent">scale</em>.</h2>
          </Reveal>
          <Reveal>
            <p className="lead lg" style={{ marginBottom: 24 }}>{data.pricing}</p>
            <p className="body" style={{ maxWidth: 580 }}>
              We do not publish a price list because every engagement is different. We do provide indicative ranges in writing before the discovery call ends.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Testimonial */}
      <section className="band">
        <div className="container">
          <Reveal>
            <div style={{ maxWidth: 880 }}>
              <span className="placeholder">Testimonial — needs sourcing</span>
              <blockquote style={{
                fontFamily:'var(--font-display)', fontSize:'clamp(28px,3vw,38px)',
                fontWeight:300, letterSpacing:'-0.02em', lineHeight:1.3,
                marginTop:24, color:'var(--fg1)',
              }}>
                "They explained what they were doing, and why. We hadn't had that from an MSP in nine years."
              </blockquote>
              <div style={{ marginTop: 24, display:'flex', alignItems:'center', gap:16 }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background:'var(--off-black)', border:'1px solid var(--border-2)' }} />
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:15 }}>Operations director</div>
                  <div className="meta">Professional services · 80 staff · Sydney</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <FinalCTA num="04" />
    </Page>
  );
}

function NotFound() {
  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow accent">404</div>
          <h1 className="h-hero">Page <em className="accent">not found</em>.</h1>
          <p className="lead lg" style={{ marginTop: 20, marginBottom: 28 }}>The page you're after doesn't exist — or it moved when we rebuilt the site.</p>
          <Link to="/" className="btn btn-primary">Back to home</Link>
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { ServicesOverviewPage, ServiceDetailPage, NotFound, SERVICE_DATA });