// Page definitions for each route in the Keuer website kit.

const INDUSTRIES = [
  { icon: 'civil', title: 'Civil & earthworks', body: 'Systems built for tier-1 and government pre-quals, covering traffic, excavation, dust and erosion controls.' },
  { icon: 'landscape', title: 'Landscaping', body: 'Quality, safety and waste-handling processes documented across crews, sites and materials.' },
  { icon: 'plumbing', title: 'Plumbing and drainage', body: 'Quality and safety systems aligned to AS/NZS 3500 and the WHS work your principal contractors expect.' },
  { icon: 'electric', title: 'Electrical', body: 'Documented WHS, quality and inspection processes for commercial and tier-1 work.' },
  { icon: 'survey', title: 'Surveying and set-out', body: 'Quality management built around accuracy, set-out tolerances and traceable records.' },
  { icon: 'waterproof', title: 'Waterproofing', body: 'Quality control, ITPs and warranty-grade documentation, fewer callbacks, less rework.' },
];

const SERVICES = [
  { icon: 'control-system', title: 'ISO 9001: Quality', body: 'Documents how your business plans, delivers and improves work, so quality does not depend on which crew is on site. Better pre-qual scores, fewer defects.' },
  { icon: 'construction', title: 'ISO 45001: Health & Safety', body: 'Identifies hazards, controls risks and evidences WHS compliance with a system your supervisors use on site. The baseline expectation for tier-1, government and resource-sector work.' },
  { icon: 'learning', title: 'ISO 14001: Environmental', body: 'Brings waste, water, dust, erosion and emissions under one register, with the records to back it up. Required for most civil and infrastructure work.' },
  { icon: 'policy', title: 'HSEQ Manuals and Policies', body: 'A single set of policies, procedures and registers built around the Annex SL structure, so the three standards run as one system.' },
  { icon: 'audit', title: 'Audit Preparation and Certification Support', body: 'Pre-audit readiness review, evidence packages, and someone in the room with you on audit day.' },
  { icon: 'checklist', title: 'Ongoing HSEQ Support', body: 'Surveillance audit prep, attending the audit with you, and keeping the system updated as the business changes.' },
];

const STEPS = [
  { n: 1, title: 'Initial Consultation', body: 'We review your operations, risks and existing systems to scope what is needed.' },
  { n: 2, title: 'HSEQ System Build', body: 'We design and document a single HSEQ system aligned to ISO 9001, 45001 and 14001, shaped around how your team actually works.' },
  { n: 3, title: 'Internal Review and Training', body: 'Full handover including walkthroughs and training where required.' },
  { n: 4, title: 'Pre-Audit Checks', body: 'A readiness review before we book the certification audit. We confirm you are ready before sitting in front of an auditor.' },
  { n: 5, title: 'Certification Audit', body: 'An external certification body runs the audit. We sit with you through it and work through any corrective actions raised.' },
  { n: 6, title: 'Ongoing Support', body: 'Optional. Surveillance audit prep, document updates and management reviews, available if you need it.' },
];

const HomePage = ({ onNavigate, tweaks = {} }) => (
  <>
    <Hero
      title={tweaks.newHero
        ? <>We build the HSEQ system. You get certified.</>
        : <>HSEQ Management Systems for Australian construction and trades.</>}
      body={tweaks.newHero
        ? "We design, document and implement integrated ISO 9001, 45001 and 14001 systems for Australian construction and trade businesses. We run the complicated parts and deal with the auditor, so you keep running the job."
        : "We design, document and implement integrated HSEQ Management Systems aligned to ISO 9001, 45001 and 14001, built around how you actually operate."}
      imageSrc="ANIMATION"
      ctaText="Book A Call"
      onCta={() => onNavigate('contact')}
    />

    {tweaks.proofBar && <ProofBar />}
    {/* tweaks.founder removed; founder block deleted entirely */}

    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Why Get Certified"
          title="Three standards. One integrated system."
        />
        <div className="grid-3">
          <ServiceCard icon="control-system" title="ISO 9001: Quality" body="Frames how work is planned, inspected and improved. Consistent delivery across crews and sites." />
          <ServiceCard icon="construction" title="ISO 45001: Health &amp; Safety" body="Hazards identified, risks controlled, WHS evidence in place. Typically a pre-qualification requirement for tier-1 work." />
          <ServiceCard icon="learning" title="ISO 14001: Environmental" body="Waste, water, dust and emissions under control, with the documentation to prove it." />
        </div>
      </div>
    </section>

    {tweaks.leadMagnet && <LeadMagnet />}
    {tweaks.riskReversal && <RiskReversal />}

    {tweaks.integrations && (
      <section className="section">
        <div className="container">
          <IntegrationsBlock onCta={() => onNavigate('contact')} />
        </div>
      </section>
    )}

    <section className="section alt">
      <div className="container">
        <SectionHead
          eyebrow="What We Do"
          title="Setup and ongoing support, end-to-end."
        />
        <div className="grid-2">
          {SERVICES.map((s) => <ServiceCard key={s.title} {...s} />)}
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="How We Get You Certified"
          title="A practical, six-step path to certification"
        />
        {STEPS.map((s) => <Step key={s.n} {...s} />)}
      </div>
    </section>

    <section className="section alt">
      <div className="container">
        <SectionHead eyebrow="Who We Help" title="Australian construction and trade SMEs, 5–100 staff." />
        <div className="grid-3">
          {INDUSTRIES.map((i) => <IndustryTile key={i.title} {...i} onClick={() => onNavigate('who-we-help')} />)}
        </div>
      </div>
    </section>

    <CTABand
      title="Talk to us about your certification."
      sub="Book a call. We'll walk through your business, the standards in scope, and what an engagement looks like."
      ctaText="Book A Call"
      onCta={() => onNavigate('contact')}
    />
  </>
);

const WhoWeHelpPage = ({ onNavigate }) => (
  <>
    <PageHero title="Who We Help" imageSrc="assets/images/pattern-triangle-1.png" />

    <section className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', marginBottom: 80 }}>
        <div>
          <div className="eyebrow">Built For SMEs</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, margin: '0 0 18px', lineHeight: 1.1 }}>
            HSEQ for Australian construction and trade businesses.
          </h2>
          <p className="text-lg" style={{ color: '#3A3A3A' }}>
            ISO certification is multiple standards, hundreds of clauses, an external auditor and a long list of moving parts. Our job is to take that off your plate. We design the HSEQ system around how your team already works, set it up end-to-end, manage the certification body, and stay with you as the system runs in real life.
          </p>
          <div style={{ marginTop: 24, paddingLeft: 18, borderLeft:'3px solid var(--peach-300, #E8B79C)', fontSize:14, lineHeight:1.55, color:'#1A1A1A' }}>
            <strong style={{ display:'block', marginBottom:4, fontFamily:'var(--font-display)', fontSize:15, letterSpacing:'0.02em' }}>Where we focus:</strong>
            Growing SMEs, 5–100 staff, chasing bigger work and tighter operations.
          </div>
        </div>
        <img src="assets/images/pattern-triangle-2.png" style={{ aspectRatio: '1/1', objectFit: 'cover', width: '100%' }} />
      </div>
      <div className="container">
        <SectionHead title="Industries We Work With" />
        <div className="grid-3">
          {INDUSTRIES.map((i) => <IndustryTile key={i.title} {...i} />)}
        </div>
      </div>
    </section>
    <CTABand title="Talk to us about your business." ctaText="Book A Call" onCta={() => onNavigate('contact')} />
  </>
);

const WhyCertifiedPage = ({ onNavigate }) => (
  <>
    <PageHero title={<><div style={{ fontSize: '0.45em', fontWeight: 700, marginBottom: 10, opacity: 0.9, letterSpacing:'0.04em' }}>THE BUSINESS CASE</div>Three letters that decide which tenders you're allowed in.</>} imageSrc="assets/images/pattern-triangle-3.png" />

    {/* ---------- Intro ---------- */}
    <section className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div className="eyebrow">What ISO Actually Means</div>
          <h2 style={{ fontFamily:'var(--font-display)', fontSize:'clamp(32px,4vw,48px)', lineHeight:1.08, margin:'10px 0 20px' }}>Certification isn't a sticker. It's how you run the business.</h2>
          <p className="text-lg" style={{ color: '#3A3A3A' }}>
            A properly built HSEQ Management System formalises how your team plans, delivers, reports and improves work. Health, safety, environmental and quality outcomes stop depending on who's on site that week.
          </p>
          <p className="text-lg" style={{ color: '#3A3A3A' }}>
            Done properly, it makes you more efficient, more credible and more competitive. Done lazily, it's shelfware. The difference is in the build.
          </p>
        </div>
        <img src="assets/images/pattern-triangle-2.png" style={{ aspectRatio: '4/3', objectFit: 'cover', width: '100%' }} />
      </div>
    </section>

    {/* ---------- 5 Business Reasons ---------- */}
    <section className="section alt" style={{ paddingTop: 72, paddingBottom: 72 }}>
      <div className="container">
        <SectionHead eyebrow="5 Reasons It Pays Off" title="What certification can do for your business." />
        <div className="reason-grid">
          <div className="reason">
            <div className="reason-num">01</div>
            <h4>Tender &amp; pre-qual access</h4>
            <p>Tier-1 builders, government departments and resource-sector principals typically require ISO certification (or an equivalent third-party–certified system) at pre-qualification. Without it, you're often filtered out before the tender is reviewed.</p>
          </div>
          <div className="reason">
            <div className="reason-num">02</div>
            <h4>Lower cost of risk</h4>
            <p>Documented processes support fewer defects, near-misses and environmental incidents over time. That can flow through to insurance reviews and project margin, depending on your insurer, claims history and project mix.</p>
          </div>
          <div className="reason">
            <div className="reason-num">03</div>
            <h4>Operational consistency</h4>
            <p>One set of procedures across every site and every crew. New starters get up to speed faster; your best supervisors stop being single points of failure.</p>
          </div>
          <div className="reason">
            <div className="reason-num">04</div>
            <h4>Client confidence</h4>
            <p>Certification shows clients how you manage quality, safety and environment, with evidence rather than claims.</p>
          </div>
          <div className="reason">
            <div className="reason-num">05</div>
            <h4>A scalable business</h4>
            <p>Growing from 10 to 50 to 200 staff is mostly systems work. An HSEQ Management System is the spine the business grows along.</p>
          </div>
          <div className="reason reason-cta">
            <h4>Not sure if you're ready?</h4>
            <p>Book a call to talk through whether certification stacks up for where your business is now.</p>
            <Button onClick={() => onNavigate('contact')}>Book A Call</Button>
          </div>
        </div>
      </div>
    </section>

    {/* ---------- Cost of not being certified ---------- */}
    <section className="section" style={{ background:'#000', color:'#fff', padding:'80px 0' }}>
      <div className="container" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64 }}>
        <div>
          <div className="eyebrow" style={{ color:'#A8A8A8' }}>The Cost of Sitting On It</div>
          <h2 style={{ fontFamily:'var(--font-display)', fontSize:'clamp(32px,4vw,48px)', lineHeight:1.08, margin:'10px 0 20px' }}>What it costs to put ISO off another year.</h2>
          <p style={{ color:'#C8C8C8', fontSize:17, lineHeight:1.6 }}>
            Most clients come to us after losing a tender they should have won, or after an audit finding that exposed a documentation gap. Building the system before you need it is cheaper than building it under pressure.
          </p>
        </div>
        <div className="cost-list">
          <div className="cost-row">
            <div className="cost-amt">Tenders</div>
            <div className="cost-txt">Locked out of tier-1 pre-quals and government panels.</div>
          </div>
          <div className="cost-row">
            <div className="cost-amt">Rework</div>
            <div className="cost-txt">Defects, scope creep and rectification costs eating margin project after project.</div>
          </div>
          <div className="cost-row">
            <div className="cost-amt">WHS Exposure</div>
            <div className="cost-txt">A serious incident without a documented WHS system is hard to defend.</div>
          </div>
          <div className="cost-row">
            <div className="cost-amt">Insurance</div>
            <div className="cost-txt">Higher premiums and tougher renewal terms as insurers tighten WHS and environmental requirements.</div>
          </div>
          <div className="cost-row">
            <div className="cost-amt">Staff Churn</div>
            <div className="cost-txt">When the system lives in one person's head, it leaves when they do.</div>
          </div>
        </div>
      </div>
    </section>

    {/* ---------- Standards overview ---------- */}
    <section className="section alt">
      <div className="container">
        <SectionHead eyebrow="The Three Standards" title="Health, Safety, Environment and Quality, running as one HSEQ system." />
        <div className="grid-3">
          <ServiceCard icon="control-system" title="ISO 9001: Quality" body="Consistent delivery across crews and sites. Higher pre-qualification scores, fewer defects." />
          <ServiceCard icon="construction" title="ISO 45001: Safety" body="Hazards identified, risks controlled, WHS evidence in place. Tier-1 ready." />
          <ServiceCard icon="learning" title="ISO 14001: Environmental" body="Waste, erosion and emissions under control, with the documentation to prove it." />
        </div>
        <div style={{ textAlign:'center', marginTop:32 }}>
          <Button onClick={() => onNavigate('standards')}>Explore the HSEQ System →</Button>
        </div>
      </div>
    </section>

    {/* ---------- FAQ ---------- */}
    <section className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <SectionHead eyebrow="Honest Answers" title="The questions clients ask before they commit." />
        <div className="faq">
          <details className="faq-item" open>
            <summary>How long does certification actually take?</summary>
            <p>It depends on the standards in scope, the size of your business and the deadline you're working to. We work backwards from the date you need it done by. If there's a tender or a client requirement on a fixed date, tell us and we'll build the plan around it.</p>
          </details>
          <details className="faq-item">
            <summary>What does it cost?</summary>
            <p>Two costs: our build fee (fixed, agreed up front based on scope and number of standards) and the certification body's audit fees (paid directly to them). We don't mark those up.</p>
          </details>
          <details className="faq-item">
            <summary>Can we get certified in all three standards at once?</summary>
            <p>Yes, and that's our specialty. Building all three together (ISO 9001, 45001 and 14001) as one integrated HSEQ system is faster, cheaper and far less duplication than running them separately, because they share a common Annex SL structure. That said, if you only need a single standard (say 9001 for a tender), we'll scope the build for that. Just ask.</p>
          </details>
          <details className="faq-item">
            <summary>Do we have to use a particular app or software?</summary>
            <p>No. You get the full toolkit (policies, procedures, registers, forms, inductions and training videos) as Word, Excel and PowerPoint. We can also build it inside the project, safety or document platforms your team already uses, though setting it up and maintaining it inside a platform costs significantly more than the standard document package.</p>
          </details>
          <details className="faq-item">
            <summary>What happens after certification?</summary>
            <p>Certification lasts three years, with surveillance audits each year. We stay on as needed: light-touch support, audit prep, register updates and management-review facilitation.</p>
          </details>
          <details className="faq-item">
            <summary>What if we fail the audit?</summary>
            <p>We don't take you to audit until your system is genuinely ready. We'll walk through the standard with you, run an internal audit, fix the gaps, and only then book the certification body. If a non-conformance does come up, we work through the corrective action with you as part of the engagement.</p>
          </details>
        </div>
      </div>
    </section>

    <CTABand title="Talk to us about your certification." sub="A call to walk through your business and the standards in scope. No pitch." ctaText="Book A Call" onCta={() => onNavigate('contact')} />
  </>
);

const AuditYear = ({ index, label, stages }) => {
  // Component is purely presentational; activation state is driven by parent via a CustomEvent bus on the section.
  const [active, setActive] = React.useState(index === 0);
  React.useEffect(() => {
    const handler = (e) => setActive(e.detail.index === index);
    window.addEventListener('__auditCycleSetActive', handler);
    return () => window.removeEventListener('__auditCycleSetActive', handler);
  }, [index]);

  const setMe = () => window.dispatchEvent(new CustomEvent('__auditCycleSetActive', { detail: { index, source: 'hover' } }));
  const clearHover = () => window.dispatchEvent(new CustomEvent('__auditCycleClearHover'));

  return (
    <div className={`audit-year ${active ? 'is-active' : ''}`}>
      <button
        type="button"
        className="audit-year-label"
        onMouseEnter={setMe}
        onMouseLeave={clearHover}
        onFocus={setMe}
        onClick={setMe}
        aria-pressed={active}
      >
        {label}
      </button>
      <div className="audit-stages">
        {stages.map((s) => (
          <article key={s.marker} className={`audit-stage ${s.cls}`}>
            <div className="audit-stage-marker">{s.marker}</div>
            <div className="audit-stage-eyebrow">{s.eyebrow}</div>
            <h4>{s.titleHtml ? s.titleHtml : s.title}</h4>
            <p>{s.body}</p>
            <div className="audit-stage-meta">{s.meta}</div>
          </article>
        ))}
      </div>
    </div>
  );
};

const WhatIsISOPage = ({ onNavigate }) => {
  // Auto-advance through years 0→1→2→3 every 3.5s. Hover pauses + overrides; mouseout resumes timer.
  const [activeYear, setActiveYear] = React.useState(0);
  const hoveringRef = React.useRef(false);
  React.useEffect(() => {
    const onSet = (e) => {
      if (e.detail.source === 'hover') hoveringRef.current = true;
      setActiveYear(e.detail.index);
    };
    const onClear = () => { hoveringRef.current = false; };
    window.addEventListener('__auditCycleSetActive', onSet);
    window.addEventListener('__auditCycleClearHover', onClear);
    return () => {
      window.removeEventListener('__auditCycleSetActive', onSet);
      window.removeEventListener('__auditCycleClearHover', onClear);
    };
  }, []);
  React.useEffect(() => {
    const id = setInterval(() => {
      if (hoveringRef.current) return;
      setActiveYear((y) => {
        const next = (y + 1) % 4;
        window.dispatchEvent(new CustomEvent('__auditCycleSetActive', { detail: { index: next, source: 'auto' } }));
        return next;
      });
    }, 3500);
    return () => clearInterval(id);
  }, []);

  return (
  <>
    <PageHero title="What ISO actually means." imageSrc="assets/images/pattern-triangle-5.png" />
    <section className="section">
      <div className="container" style={{ maxWidth: 880 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, margin: '0 0 20px' }}>What ISO actually is, in plain terms.</h2>
        <p className="text-lg" style={{ color: '#3A3A3A' }}>
          ISO is the International Organisation for Standardisation, a non-governmental body based in Geneva. Its members are the national standards bodies of around 170 countries. ISO writes voluntary standards: frameworks businesses adopt to run more reliably, safely and consistently.
        </p>
      </div>
    </section>
    <section className="section alt">
      <div className="container">
        <SectionHead title="The three ISO standards in scope." />
        <div className="grid-3">
          <ServiceCard icon="control-system" title="ISO 9001: Quality" body="How work is planned, inspected and improved. Consistent delivery across crews and sites." />
          <ServiceCard icon="construction" title="ISO 45001: Safety" body="How hazards are identified, risks controlled and WHS evidence kept on site." />
          <ServiceCard icon="learning" title="ISO 14001: Environmental" body="How environmental aspects, impacts and obligations are managed across every job." />
        </div>
      </div>
    </section>

    {/* ---------- 3-year External Audit Cycle ---------- */}
    <section className="section audit-cycle-section">
      <div className="container">
        <SectionHead
          eyebrow="The Certification Lifecycle"
          title="What external auditing looks like across the three-year cycle."
          sub="ISO certification runs on a three-year cycle with an external certification body: an initial certification audit, two annual surveillance audits, and a recertification at the end of year three. Here's how it plays out."
        />

        <div className="audit-cycle">
          <div className="audit-track" aria-hidden="true">
            <div className="audit-track-fill" style={{ width: `${(activeYear / 3) * 100}%` }} />
          </div>

          <AuditYear
            index={0}
            label="Year 0: Onboarding"
            stages={[
              {
                cls: 'stage-initial', marker: '01', eyebrow: 'Stage 1 Audit',
                title: 'Documentation review',
                body: "The certification body reviews your management system documentation (manuals, policies, procedures, registers) to confirm it's structured to meet the standard. Major gaps are flagged before Stage 2.",
                meta: '~1–2 days on site or remote',
              },
              {
                cls: 'stage-initial', marker: '02', eyebrow: 'Stage 2 Audit',
                title: 'Certification audit',
                body: 'The full audit. The auditor walks the business, interviews staff, reviews records and verifies the system is operated, not just documented. Any non-conformities raised must be closed before certification is issued.',
                meta: '~2–5 days on site, depending on scope',
              },
              {
                cls: 'stage-cert', marker: '★', eyebrow: 'Certificate Issued',
                titleHtml: 'Certified to ISO\u00a09001 / 45001 / 14001',
                body: 'Your certificate is valid for three years, subject to maintaining the system and passing the annual surveillance audits below.',
                meta: 'Valid for 3 years',
              },
            ]}
          />

          <AuditYear
            index={1}
            label="Year 1: Surveillance"
            stages={[{
              cls: 'stage-surv', marker: '03', eyebrow: 'Surveillance Audit 1',
              title: 'First annual check-in',
              body: 'A shorter audit (typically 1–2 days) covering a subset of the standard. The auditor checks the system is being maintained, reviews internal audit records, management review minutes, and any corrective actions raised at certification.',
              meta: '~12 months after certification',
            }]}
          />

          <AuditYear
            index={2}
            label="Year 2: Surveillance"
            stages={[{
              cls: 'stage-surv', marker: '04', eyebrow: 'Surveillance Audit 2',
              title: 'Second annual check-in',
              body: 'Same format as Year 1, covering the remaining clauses not sampled previously. Across the two surveillance audits, the auditor will have covered every part of the system at least once.',
              meta: '~24 months after certification',
            }]}
          />

          <AuditYear
            index={3}
            label="Year 3: Recertification"
            stages={[{
              cls: 'stage-recert', marker: '05', eyebrow: 'Recertification Audit',
              title: 'Full audit, repeats the cycle',
              body: 'A full-scope audit, similar in depth to the original Stage 2. The auditor reviews how the system has performed over three years (incidents, audits, improvements) and confirms ongoing conformance. Pass it, and a new three-year certificate is issued.',
              meta: 'Before the original certificate expires',
            }]}
          />
        </div>

        <div className="audit-cycle-note">
          <div>
            <div className="audit-note-eyebrow">In between audits</div>
            <p>The system isn't dormant between visits. Internal audits, management reviews, corrective actions, training records and document control keep running. That's the evidence the external auditor samples each year. We support clients through every audit in the cycle, not just the first one.</p>
          </div>
        </div>
      </div>
    </section>

    <CTABand title="Talk us through your business." ctaText="Book A Call" onCta={() => onNavigate('contact')} />
  </>
  );
};

const StandardsPage = ({ onNavigate }) => {
  React.useEffect(() => {
    const id = window.__keuerAnchor;
    if (id) {
      window.__keuerAnchor = null;
      // wait a frame so the nodes exist
      requestAnimationFrame(() => {
        const el = document.getElementById(id);
        if (el) {
          const y = el.getBoundingClientRect().top + window.pageYOffset - 80;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      });
    }
  }, []);

  return (
    <>
      <PageHero title={<><div style={{ fontSize: '0.45em', fontWeight: 700, marginBottom: 10, opacity: 0.9, letterSpacing:'0.04em' }}>YOUR HSEQ SYSTEM</div>Health, Safety, Environment & Quality</>} imageSrc="assets/images/pattern-triangle-1.png" />

      {/* ---------- What is HSEQ ---------- */}
      <section className="section">
        <div className="container" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center' }}>
          <div>
            <div className="eyebrow">One System, Three Standards</div>
            <h2 style={{ fontFamily:'var(--font-display)', fontSize:'clamp(32px,4vw,48px)', lineHeight:1.08, margin:'10px 0 20px' }}>One HSEQ system. Three certifications.</h2>
            <p className="text-lg" style={{ color:'#3A3A3A' }}>
              An <strong>integrated HSEQ Management System</strong> brings Health, Safety, Environment and Quality under one framework aligned to ISO&nbsp;9001, ISO&nbsp;45001 and ISO&nbsp;14001, instead of running three separate systems that overlap, contradict and double the workload.
            </p>
            <p className="text-lg" style={{ color:'#3A3A3A' }}>
              In practice that means a shared policy framework, a single document library and a coordinated audit rhythm. How tightly the three are integrated is a design decision: some businesses run them as one, others keep certain parts separate where it makes sense: a dedicated environmental register on civil projects, or a standalone safety system for high-risk work.
            </p>
            <div style={{ marginTop: 24, paddingLeft: 18, borderLeft:'3px solid var(--peach-300, #E8B79C)', fontSize:14, lineHeight:1.55, color:'#1A1A1A' }}>
              <strong style={{ display:'block', marginBottom:4, fontFamily:'var(--font-display)', fontSize:15, letterSpacing:'0.02em' }}>Our specialty:</strong>
              All three standards, integrated as one HSEQ system. If you only need a single standard, we'll build for that. Just ask.
            </div>
          </div>
          <img src="assets/images/pattern-triangle-2.png" style={{ aspectRatio:'4/5', objectFit:'cover', width:'100%' }} />
        </div>
      </section>

      {/* ---------- Why integrate? ---------- */}
      <section className="section alt" style={{ paddingTop:72, paddingBottom:72 }}>
        <div className="container">
          <SectionHead eyebrow="Why Integrate" title="Three disciplines, one operating system." />
          <div className="grid-3">
            <div className="ims-benefit">
              <div className="ims-benefit-num">01</div>
              <h4>One language across HSEQ</h4>
              <p>Risk assessments, incident reports, toolbox talks and supplier checks share the same structure. Supervisors learn one system, not three.</p>
            </div>
            <div className="ims-benefit">
              <div className="ims-benefit-num">02</div>
              <h4>Combined audit, lower cost</h4>
              <p>Certifiers run integrated audits across ISO 9001, 45001 and 14001, saving days of site disruption and audit fees each year compared with three separate certifications.</p>
            </div>
            <div className="ims-benefit">
              <div className="ims-benefit-num">03</div>
              <h4>One source of truth</h4>
              <p>Policies, forms, registers and training live in one place, inside the apps your crew already uses, not stacked across three disconnected portals.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Jump nav ---------- */}
      <section style={{ background:'#000', color:'#fff', padding:'28px 0', borderTop:'1px solid #1F1F1F', borderBottom:'1px solid #1F1F1F' }}>
        <div className="container" style={{ display:'flex', gap:32, alignItems:'center', flexWrap:'wrap' }}>
          <div className="eyebrow" style={{ color:'#A8A8A8', margin:0 }}>Jump to</div>
          <a href="#iso-9001"  onClick={(e)=>{e.preventDefault();document.getElementById('iso-9001').scrollIntoView({behavior:'smooth',block:'start'});}}  style={{ color:'#fff', textDecoration:'none', fontWeight:600, fontSize:15 }}>ISO 9001 · Quality</a>
          <a href="#iso-45001" onClick={(e)=>{e.preventDefault();document.getElementById('iso-45001').scrollIntoView({behavior:'smooth',block:'start'});}} style={{ color:'#fff', textDecoration:'none', fontWeight:600, fontSize:15 }}>ISO 45001 · Safety</a>
          <a href="#iso-14001" onClick={(e)=>{e.preventDefault();document.getElementById('iso-14001').scrollIntoView({behavior:'smooth',block:'start'});}} style={{ color:'#fff', textDecoration:'none', fontWeight:600, fontSize:15 }}>ISO 14001 · Environmental</a>
          <div style={{ marginLeft:'auto' }}><Button onClick={() => onNavigate('contact')}>Book A Call</Button></div>
        </div>
      </section>

      {/* ---------- ISO 9001 ---------- */}
      <StandardSection
        id="iso-9001"
        code="9001"
        name="Quality"
        tagline="Consistent delivery. Documented. Repeatable."
        body="ISO 9001 is the quality discipline within your HSEQ system. It governs how work is planned, inspected, recorded and improved, turning the way your best supervisor runs a job into the way every supervisor runs a job. Required at pre-qualification by most tier-1 builders and government clients."
        what={[
          'Scope of work and business context',
          'Leadership and quality policy',
          'Risk and opportunity register',
          'Job planning, inspection and testing controls',
          'Non-conformance and corrective action process',
          'Internal audit and management review',
        ]}
        outcomes={[
          'Consistent on-site delivery',
          'Fewer defects and rework costs',
          'Higher tender and pre-qualification scores',
          'Stronger client retention and referrals',
        ]}
      />

      {/* ---------- ISO 45001 ---------- */}
      <StandardSection
        id="iso-45001"
        code="45001"
        name="Health & Safety"
        tagline="Hazards identified. Risks controlled. Evidenced."
        body="ISO 45001 is the health and safety discipline within your HSEQ system. It sets out how hazards are identified, how risks are controlled, and how WHS performance is monitored, with the records to evidence it. The minimum bar for federal, state and tier-1 work in Australia."
        what={[
          'WHS policy and roles',
          'Hazard identification and risk control register',
          'SWMS templates and site induction flow',
          'Incident, injury and near-miss reporting',
          'Contractor and subbie management',
          'Emergency preparedness and response',
        ]}
        outcomes={[
          'Proactive risk management',
          'Fewer lost-time incidents',
          'Tier-1 tender readiness',
          'Clear WHS accountability across the team',
        ]}
        alt
      />

      {/* ---------- ISO 14001 ---------- */}
      <StandardSection
        id="iso-14001"
        code="14001"
        name="Environmental"
        tagline="Environmental risks and obligations, managed across every job."
        body="ISO 14001 is the environmental discipline within your HSEQ system. It frames how environmental aspects, impacts and obligations are identified, controlled and monitored on every job, with the documentation to prove it. Increasingly required on infrastructure, civil and government work."
        what={[
          'Environmental aspects and impacts register',
          'Waste, spill and erosion controls',
          'Water, dust and noise management',
          'Environmental objectives and targets',
          'Compliance obligations register',
          'Environmental incident response',
        ]}
        outcomes={[
          'Waste and erosion under control',
          'Clear environmental policy',
          'Regulatory compliance confidence',
          'Stronger community and client standing',
        ]}
      />

      <CTABand title="Talk to us about your certification." sub="A call to scope the right standards for your business and the engagement that fits." ctaText="Book A Call" onCta={() => onNavigate('contact')} />
    </>
  );
};

const StandardSection = ({ id, code, name, tagline, body, what, outcomes, alt }) => (
  <section id={id} className={`section standard-section${alt ? ' alt' : ''}`} style={{ scrollMarginTop: 80 }}>
    <div className="container">
      <div className="standard-head">
        <div className="standard-code">ISO {code}</div>
        <div>
          <h2 style={{ fontFamily:'var(--font-display)', fontSize:'clamp(32px,4vw,52px)', lineHeight:1.05, margin:'0 0 10px' }}>{name}</h2>
          <p className="text-lg" style={{ margin:0, color:'#3A3A3A', maxWidth:620 }}>{tagline}</p>
        </div>
      </div>
      <p className="text-lg" style={{ color:'#3A3A3A', maxWidth:820, marginTop:28 }}>{body}</p>
      <div className="grid-2" style={{ marginTop:40, gap:32 }}>
        <div className="standard-list">
          <div className="eyebrow" style={{ marginBottom:14 }}>What we build</div>
          <ul>{what.map((x) => <li key={x}>{x}</li>)}</ul>
        </div>
        <div className="standard-list">
          <div className="eyebrow" style={{ marginBottom:14 }}>Intended outcomes</div>
          <ul>{outcomes.map((x) => <li key={x}>{x}</li>)}</ul>
        </div>
      </div>
    </div>
  </section>
);

const ContactPage = ({ tweaks = {} }) => (
  <>
    <PageHero title="Get In Touch" imageSrc="assets/images/pattern-triangle-1.png" />
    <section className="section">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
        <div>
          <p className="text-lg" style={{ color: '#000', fontWeight: 500 }}>
            A 30-minute call to walk through your business, the contracts you're chasing, and the standards you need.
          </p>
          <p className="text-lg" style={{ color: '#3A3A3A' }}>
            If we're a fit, we'll send a fixed-price scope. If we're not, we'll tell you straight.
          </p>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid #EAEAEA' }}>
            <div style={{ fontSize: 14, color: '#707070', marginBottom: 6 }}>Email</div>
            <div style={{ fontSize: 18, fontWeight: 500 }}>info@keuersolutions.com</div>
            <div style={{ fontSize: 14, color: '#707070', margin: '14px 0 6px' }}>Phone</div>
            <div style={{ fontSize: 18, fontWeight: 500 }}>0450 566 114</div>
          </div>
        </div>
        <ContactForm />
      </div>
    </section>
  </>
);

const IntegrationsBlock = ({ onCta }) => (
  <div className="integrations">
    <div>
      <div className="eyebrow" style={{ color: '#A8A8A8' }}>Your System, Your Way</div>
      <h2>A full ISO system, set up for you, run with you.</h2>
      <p>
        Most engagements include the full toolkit: policies, procedures, forms, registers, inductions and training videos, drafted around your business by us. Delivered as a structured document library in Word, Excel and PowerPoint. Building the same system into the apps your team already uses on site is available as an optional add-on.
      </p>
      <Button onClick={onCta}>Book A Call</Button>
    </div>
    <div className="app-col">
      <div className="app-label">What's included</div>
      <div className="app-grid app-grid-2">
        <div className="app">Policies &amp; Procedures</div>
        <div className="app">Forms &amp; Registers</div>
        <div className="app">Inductions</div>
        <div className="app">Training Videos</div>
      </div>

      <div className="app-label" style={{ marginTop: 20 }}>Built inside (optional)</div>
      <p style={{ fontSize: 14, color: '#A8A8A8', lineHeight: 1.6, margin: '10px 0 0' }}>
        Prefer it inside the platforms your team already uses on site? We can build the same system into your existing project, safety and document tools as an optional add-on.
      </p>
    </div>
  </div>
);

Object.assign(window, {
  HomePage, WhoWeHelpPage, WhyCertifiedPage, WhatIsISOPage, StandardsPage, ContactPage,
  INDUSTRIES, SERVICES, STEPS, IntegrationsBlock,
});