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

const PROCESS_STEPS = [
  {
    num: '01',
    title: 'Discover',
    short: 'Audit your stack, risks, and where money is leaking.',
    body: 'We start with a two-week assessment of your environment — endpoints, identities, network, applications, and data. You get a written map of what you have, what is exposed, and a prioritised list of outcomes worth chasing.',
    bullets: [
      'Endpoint and identity inventory',
      'Risk register against Essential Eight',
      'Cost & licensing baseline',
      'Outcome-ranked roadmap',
    ],
    label: 'PHOTO  /  workshop session, whiteboard',
  },
  {
    num: '02',
    title: 'Design',
    short: 'Architect the smallest change that hits the biggest outcome.',
    body: 'Designs are written, costed, and reviewed with your team — not handed down from a vendor. We pick boring, battle-tested tooling and document why. You leave the design phase knowing exactly what changes, when, and what it costs to run.',
    bullets: [
      'Reference architecture & data flows',
      'Run-rate cost modelling',
      'Vendor short-list with rationale',
      'Migration & rollback plan',
    ],
    label: 'PHOTO  /  architect sketching, dual monitor',
  },
  {
    num: '03',
    title: 'Deliver',
    short: 'Migrate, harden, and cut over with no drama.',
    body: 'Implementation runs in short, named milestones with weekly demos. Every change has a rollback. Cutovers happen out of hours, with a named engineer on the bridge. You see what shipped each week — not a Gantt chart, an actual working system.',
    bullets: [
      'Weekly demo & change log',
      'Named engineer per workstream',
      'Out-of-hours cutovers',
      'Documented rollback per change',
    ],
    label: 'PHOTO  /  engineer at rack, screens',
  },
  {
    num: '04',
    title: 'Run',
    short: 'Operate it like it is ours — because for ten years, it is.',
    body: 'Ongoing managed service with a clear SLA, named pod of engineers, and quarterly business reviews tied to your outcomes. We publish what we did, what we caught, and what we recommend next — every quarter, in writing.',
    bullets: [
      'Named pod, not a 1-800 queue',
      'SLA you can hold us to, in writing',
      'Quarterly outcome review with leadership',
      'Open access to your own ticket data',
    ],
    label: 'PHOTO  /  client QBR, slides on screen, team',
  },
];

const SOLUTION_TEASERS = [
  { icon: <Icon.gear />, title: 'Managed IT', body: 'Day-to-day support that knows your environment. Service-desk, monitoring, and an SLA you can hold us to.' },
  { icon: <Icon.swap />, title: 'Intune adoption', body: 'Modern device management done properly — Autopilot, baselines, BYOD separation. Most of what we ship right now.' },
  { icon: <Icon.cloud />, title: 'Cloud & M365', body: 'Tenant design, identity, and a licence model that does not silently drift up every quarter.' },
  { icon: <Icon.shield />, title: 'Security & compliance', body: 'Essential Eight uplift, MDR, and SMB1001 certification prep. Less theatre, more posture.' },
  { icon: <Icon.spark />, title: 'AI adoption', body: 'Copilot, Azure AI, and bespoke agents — governed, secured, and tied to a use case that pays for itself.' },
];

function HomeHero({ go }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="wrap hero-grid">
        <div>
          <Eyebrow>Managed service provider for the mid-market</Eyebrow>
          <h1>
            Managed IT,<br/>
            <em>delivered as outcomes.</em>
          </h1>
          <p className="hero-sub">
            We are the managed service provider behind growing Australian businesses — running your IT, hardening your security posture, delivering the cloud roadmap your team has been promising for two years, and turning AI from a board slide into work that actually ships.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-arrow" onClick={() => go('contact')}>
              Book a 30-min consult
              <Icon.arrow />
            </button>
            <button className="btn btn-ghost btn-arrow" onClick={() => go('solutions')}>
              See our solutions
              <Icon.arrow />
            </button>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <span className="k">FOCUS</span>
              <span className="v">MSP · Security · Cloud · AI</span>
            </div>
            <div className="hero-meta-item">
              <span className="k">SERVING</span>
              <span className="v">25–500 seat orgs</span>
            </div>
            <div className="hero-meta-item">
              <span className="k">BASED</span>
              <span className="v">Sydney · ANZ</span>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <Photo label="PHOTO  /  client kickoff, whiteboard, team" />
          <div className="hero-card top">
            <span className="dot" aria-hidden="true"></span>
            <div>
              <div className="label">CLIENT ENGAGEMENT</div>
              <div className="val">Atlas Freight · 220 staff · month 18</div>
            </div>
          </div>
          <div className="hero-card bottom">
            <div className="hero-card-row">
              <span className="label">Managed service</span>
              <span className="val">Pod · 3 engineers</span>
            </div>
            <div className="hero-card-row">
              <span className="label">Security posture</span>
              <span className="val">Essential Eight · ML2 → ML3</span>
            </div>
            <div className="hero-card-row">
              <span className="label">Cloud delivery</span>
              <span className="val">M365 · Azure landing zone</span>
            </div>
            <div className="hero-card-row">
              <span className="label">AI adoption</span>
              <span className="val" style={{color: 'var(--blue-2)'}}>Copilot pilot · 2 use cases live</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const industries = [
    'Logistics',
    'Healthcare',
    'Professional services',
    'Manufacturing',
    'Not-for-profit',
    'Construction',
  ];
  return (
    <div className="trust">
      <div className="wrap trust-inner">
        <span className="trust-label">Industries we serve</span>
        <div className="trust-row">
          {industries.map((l) => (
            <span key={l} className="trust-logo">{l}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function HowWeWork() {
  const [active, setActive] = useStateHome(0);
  const step = PROCESS_STEPS[active];
  return (
    <section className="dark" data-screen-label="02 How we work">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Eyebrow>How we work</Eyebrow>
            <h2 style={{ marginTop: 18 }}>Four stages.<br/>One outcome per stage.</h2>
          </div>
          <p className="lede">
            Most managed-IT engagements drown in tickets. Ours are organised around four named stages, each with a written outcome you can hold us to. Click a stage to see what is inside it.
          </p>
        </div>

        <div className="process" role="tablist">
          {PROCESS_STEPS.map((s, i) => (
            <div key={s.num}
                 className={`process-step ${active === i ? 'active' : ''}`}
                 role="tab"
                 aria-selected={active === i}
                 onClick={() => setActive(i)}>
              <span className="num">STAGE · {s.num}</span>
              <h4>{s.title}</h4>
              <p>{s.short}</p>
            </div>
          ))}
        </div>

        <div className="process-detail fade-in" key={active}>
          <div className="process-detail-visual">
            <Photo label={step.label} />
          </div>
          <div className="process-detail-text">
            <span className="eyebrow" style={{marginBottom: 16}}>Stage {step.num} · {step.title}</span>
            <h3 style={{marginTop: 16}}>{step.body.split('.')[0]}.</h3>
            <p>{step.body}</p>
            <ul className="process-detail-list">
              {step.bullets.map((b) => (
                <li key={b}>
                  <Icon.check />
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Outcomes() {
  return (
    <section className="tight">
      <div className="wrap">
        <div className="section-head" style={{marginBottom: 40}}>
          <div>
            <Eyebrow>The shape of the practice</Eyebrow>
            <h2 style={{ marginTop: 18 }}>Four pillars.<br/>One pod per client.</h2>
          </div>
          <p className="lede">
            We are deliberately narrow. Every engagement runs across the same four pillars — with the same named pod on it from kick-off through year ten.
          </p>
        </div>
        <div className="outcomes">
          <div className="outcome">
            <div className="big">4<sup>pillars</sup></div>
            <div className="lbl">Managed IT, security, cloud delivery, AI adoption</div>
          </div>
          <div className="outcome">
            <div className="big">ML<sup>3</sup></div>
            <div className="lbl">Essential Eight target maturity for every client</div>
          </div>
          <div className="outcome">
            <div className="big">10<sup>yrs</sup></div>
            <div className="lbl">Average tenure of our top client engagements</div>
          </div>
          <div className="outcome">
            <div className="big">28</div>
            <div className="lbl">Active mid-market clients across ANZ</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SolutionsTeaser({ go }) {
  return (
    <section className="tight" style={{background: 'var(--paper-2)', borderTop: '1px solid var(--line)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <Eyebrow>Solutions</Eyebrow>
            <h2 style={{marginTop: 18}}>Five engagements.<br/>Done unusually well.</h2>
          </div>
          <p className="lede">
            Each one with a written outcome, a written exit criterion, and a fixed-fee discovery on the front. We do these five things — properly — and turn down the rest.
          </p>
        </div>

        <div className="solutions-grid">
          {SOLUTION_TEASERS.map((s) => (
            <button key={s.title} className="sol-card" onClick={() => go('solutions')} style={{textAlign: 'left', font: 'inherit', color: 'inherit', background: 'var(--paper-2)', cursor: 'pointer'}}>
              <span className="icon">{s.icon}</span>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
              <span className="more">READ MORE <Icon.arrow /></span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function DefensibleCallout({ go }) {
  return (
    <section className="tight" style={{background: 'var(--paper)', borderTop: '1px solid var(--line)'}}>
      <div className="wrap">
        <div className="d-callout">
          <div>
            <span className="eyebrow">Our cyber practice</span>
            <h3>Defensible — cyber posture you can defend in writing.</h3>
            <p>
              For clients with audits to pass, tenders to win, or insurers asking harder questions, our cyber work runs under its own practice — Defensible. Same team, same support line, sharper focus on SMB1001, Essential Eight, and incident readiness.
            </p>
            <div className="actions">
              <button className="btn-primary" onClick={() => go('defensible')}>
                Visit Defensible →
              </button>
            </div>
          </div>
          <div className="d-callout-mark">
            <img src="assets/defensible-logo.png" alt="Defensible" />
          </div>
        </div>
      </div>
    </section>
  );
}

function QuoteBlock() {
  return (
    <section className="tight">
      <div className="wrap">
        <div className="quote">
          <div>
            <Eyebrow>Case study · Atlas Freight</Eyebrow>
            <blockquote style={{marginTop: 24}}>
              "Planetiware lifted us from Essential Eight ML1 to ML3 and moved our entire ops platform onto Azure inside a single financial year. The board finally sees IT as a delivery function, not a cost centre."
            </blockquote>
            <div className="quote-attr">
              <span className="quote-avatar">RM</span>
              <span className="who">
                <span className="name">Renée Markham</span>
                <span className="role">COO · Atlas Freight (220 staff)</span>
              </span>
            </div>
          </div>
          <div className="quote-visual">
            <Photo label="PHOTO  /  logistics warehouse, scanner ops" />
          </div>
        </div>
      </div>
    </section>
  );
}

function CTABand({ go }) {
  return (
    <div className="cta-band">
      <div className="wrap cta-band-inner">
        <div>
          <Eyebrow>Next step</Eyebrow>
          <h2 style={{marginTop: 18}}>Thirty minutes.<br/>One honest opinion.</h2>
          <p style={{marginTop: 16}}>
            Book a no-obligation consult. We will look at one thing keeping your team up at night and tell you what we would actually do about it.
          </p>
        </div>
        <div className="actions">
          <button className="btn btn-primary" onClick={() => go('contact')}>
            Support
          </button>
          <button className="btn btn-light-ghost btn-arrow" onClick={() => go('about')}>
            About us
            <Icon.arrow />
          </button>
        </div>
      </div>
    </div>
  );
}

function HomePage({ go }) {
  return (
    <main>
      <HomeHero go={go} />
      <TrustStrip />
      <HowWeWork />
      <Outcomes />
      <SolutionsTeaser go={go} />
      <DefensibleCallout go={go} />
      <QuoteBlock />
      <CTABand go={go} />
    </main>
  );
}

Object.assign(window, { HomePage });