/* global React, Icon, Photo, Eyebrow */
const { useState: useStateSol } = React;

const SOLUTIONS = [
  {
    id: 'managed',
    title: 'Managed IT',
    sub: 'A named pod that knows your environment by name — not a 1-800 queue.',
    label: 'PHOTO  /  ops pod, multiple monitors, daily standup',
    includes: [
      { h: 'Service desk', b: '15-minute response on P1 in business hours. Phone, email, and Teams.' },
      { h: 'Endpoint management', b: 'Intune or Jamf, patching, baselines, and drift reports.' },
      { h: 'Monitoring & alerting', b: 'On-prem and cloud, with named on-call rotations.' },
      { h: 'Vendor wrangling', b: 'We deal with ISPs, telcos, and licensing — you do not.' },
    ],
  },
  {
    id: 'intune',
    title: 'Intune adoption',
    sub: 'Modern device management done properly — not a half-configured tenant the last MSP walked away from.',
    label: 'PHOTO  /  laptop being enrolled, Intune console',
    includes: [
      { h: 'Discovery & design', b: 'Audit the fleet, identity, and the policies you actually have today — before changing anything.' },
      { h: 'Co-managed or cloud-only', b: 'Pick the path that fits where you are, not where the vendor wants you to be.' },
      { h: 'Autopilot deployment', b: 'Zero-touch enrolment for new devices. BYOD with proper separation between work and personal.' },
      { h: 'Baselines & compliance', b: 'Configuration, app protection, and security baselines tuned to your business — not the default template.' },
      { h: 'Migration from legacy MDM', b: 'Phased move off SCCM, JAMF, or an unmanaged fleet — with a rollback you would actually use.' },
      { h: 'Handover & enablement', b: 'Your team owns it after. Written runbook, dashboards, escalation paths — not a black box.' },
    ],
  },
  {
    id: 'cloud',
    title: 'Cloud & Microsoft 365',
    sub: 'Tenant design, identity, and licensing that does not silently drift up every quarter.',
    label: 'PHOTO  /  M365 admin console on screen',
    includes: [
      { h: 'Tenant design', b: 'Identity, Conditional Access, Intune — set up so it can be handed over.' },
      { h: 'Licence right-sizing', b: 'Quarterly review of who actually uses what. Average client save: 18%.' },
      { h: 'Migration', b: 'On-prem to M365 or tenant-to-tenant consolidation.' },
      { h: 'SharePoint that does not rot', b: 'Information architecture, retention, and an owner per site.' },
    ],
  },
  {
    id: 'security',
    title: 'Security & compliance',
    sub: 'Essential Eight uplift, MDR, and audit-ready evidence — less theatre, more posture.',
    label: 'PHOTO  /  SOC analyst at console, dim room',
    includes: [
      { h: 'Essential Eight uplift', b: 'Honest baseline, prioritised plan, measured every quarter.' },
      { h: 'Managed detection', b: '24/7 MDR with named triage analysts, not a ticket factory.' },
      { h: 'Phishing & training', b: 'Quarterly campaigns, real reporting, no annual checkbox course.' },
      { h: 'SMB1001 certification', b: 'End-to-end prep across all five tiers — controls, evidence, and a self-attestation pack your insurer will accept.' },
    ],
  },
  {
    id: 'ai',
    title: 'AI adoption',
    sub: 'Turn AI from a board slide into work that ships — governed, secured, and tied to a use case that pays for itself.',
    label: 'PHOTO  /  team reviewing AI prototype on screen',
    includes: [
      { h: 'Readiness assessment', b: 'Identity, data classification, and tenancy review before a single licence is bought.' },
      { h: 'Use-case discovery', b: 'Workshops with the teams who would use it — we leave with 3 funded, ranked use cases.' },
      { h: 'Copilot rollout', b: 'M365 Copilot deployed by team, with sensitivity labels, DLP, and a working measurement plan.' },
      { h: 'Custom agents', b: 'Azure OpenAI, Copilot Studio, or Anthropic-backed agents wired into your line-of-business apps.' },
      { h: 'AI governance', b: 'Acceptable-use policy, approval workflow, and audit log — written for humans, not lawyers.' },
      { h: 'Skills uplift', b: 'Hands-on enablement for your team. We leave you running it, not dependent on us.' },
    ],
  },
];

function SolutionsPage({ go }) {
  const [active, setActive] = useStateSol('managed');
  const cur = SOLUTIONS.find(s => s.id === active);

  return (
    <main data-screen-label="Solutions page">
      <div className="page-head">
        <div className="wrap">
          <Eyebrow>Solutions</Eyebrow>
          <h1>Five engagements.<br/>Done unusually well.</h1>
          <p className="lede">
            We are deliberately narrow. Each engagement below has a written outcome, a written exit criterion, and a fixed-fee discovery on the front so you know exactly what you are buying.
          </p>
        </div>
      </div>

      <section className="tight" style={{background: 'var(--paper)'}}>
        <div className="wrap sol-detail">
          <div className="sol-tabs">
            {SOLUTIONS.map((s, i) => (
              <button key={s.id}
                      className={`sol-tab ${active === s.id ? 'active' : ''}`}
                      onClick={() => setActive(s.id)}>
                <span className="num">0{i + 1}</span>{s.title}
              </button>
            ))}
          </div>

          <div className="sol-panel fade-in" key={active}>
            <div className="visual">
              <Photo label={cur.label} />
            </div>
            <h2>{cur.title}</h2>
            <p className="panel-sub">{cur.sub}</p>
            <ul className="includes">
              {cur.includes.map((i) => (
                <li key={i.h}>
                  <Icon.check />
                  <div>
                    <strong>{i.h}</strong>
                    <span>{i.b}</span>
                  </div>
                </li>
              ))}
            </ul>
            <div style={{marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap'}}>
              <button className="btn btn-primary btn-arrow" onClick={() => go('contact')}>
                Talk to us about {cur.title.toLowerCase()}
                <Icon.arrow />
              </button>
              <button className="btn btn-light-ghost btn-arrow" onClick={() => go('about')}>
                How we work
                <Icon.arrow />
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SolutionsPage });