// Paytools Home — new design direction
// Warm earthy palette, Bricolage Grotesque + Hanken Grotesk

const NAV_ITEMS = [
  { label: "Solutions", sub: [
    { label: "Payroll Processing", href: "/features/payroll-operations-software/" },
    { label: "Governance",         href: "/features/payroll-governance/" },
  ]},
  { label: "Resources", href: "/payroll-news/", sub: [
    { label: "Blogs & downloads",  href: "/payroll-news/" },
    { label: "Customer stories",   href: "/customer-stories/" },
    { label: "Webinars & events",  href: "/webinars-and-events/" },
  ]},
  { label: "Pricing",  href: "/pricing/" },
  { label: "Company",  sub: [
    { label: "About us",   href: "/about-us/" },
    { label: "Contact us", href: "/contact-us/" },
    { label: "Customers",  href: "/customer-stories/" },
    { label: "Partners",   href: "/partners/" },
  ]},
];

/* ===== NAV ===== */
function NavBar() {
  const [open, setOpen] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);

  return (
    <nav className={`pt-nav${scrolled ? " pt-nav--scrolled" : ""}`}
         onMouseLeave={() => setOpen(null)}>
      <div className="pt-nav-inner">
        <a href="/">
          <PaytoolsLogo height={scrolled ? 28 : 36} />
        </a>
        <ul className="pt-nav-links">
          {NAV_ITEMS.map(item => (
            <li key={item.label} className="pt-nav-item"
                onMouseEnter={() => setOpen(item.sub ? item.label : null)}>
              {(item.href || item.sub)
                ? <a href={item.href || item.sub[0].href}>{item.label}{item.sub && <span className="pt-nav-caret">▾</span>}</a>
                : <span>{item.label}<span className="pt-nav-caret">▾</span></span>
              }
              {item.sub && open === item.label && (
                <ul className="pt-dropdown">
                  {item.sub.map(s => (
                    <li key={s.label}><a href={s.href}>{s.label}</a></li>
                  ))}
                </ul>
              )}
            </li>
          ))}
        </ul>
        <a href="/demo/" className="pt-nav-cta" style={{display:"inline-flex",alignItems:"center",textDecoration:"none"}}>Chat to sales</a>
      </div>
    </nav>
  );
}

/* ===== HERO ===== */
function Hero() {
  return (
    <section className="pt-hero">
      <div className="pt-hero-center">
        <div className="pt-hero-eyebrow">Payroll Operations & Governance Software</div>
        <h1 className="pt-hero-h1">
          <span className="pt-hero-chip">Payroll</span> that doesn't burn you out
        </h1>
        <p className="pt-hero-sub">
          Paytools takes the operational load off payroll managers, so they can focus on strategy and improvement.
        </p>
        <div className="pt-hero-ctas">
          <a href="/demo/" className="pt-btn-fill" style={{display:"inline-flex",alignItems:"center",textDecoration:"none"}}>Book a demo</a>
          <a href="/contact-us/" className="pt-btn-stroke" style={{display:"inline-flex",alignItems:"center",textDecoration:"none"}}>Get in touch</a>
        </div>
      </div>
      <HomeHeroMock/>
    </section>
  );
}

/* ===== TRUSTED BAR ===== */
const LOGOS = [
  { src: "/design-system/assets/logos/logo-volvo.png",  alt: "Volvo", size: "volvo" },
  { src: "/design-system/assets/logos/logo-bapcor.png", alt: "Bapcor", size: "bapcor" },
  { src: "/design-system/assets/logos/logo-cpa.png",    alt: "Cerebral Palsy Alliance", size: "boost" },
  { src: "/design-system/assets/logos/logo-itw.png",    alt: "ITW Construction", size: "sm" },
  { src: "/design-system/assets/logos/logo-bega.png",   alt: "Bega Group", size: "boost" },
  { src: "/design-system/assets/logos/logo-uoa.png",    alt: "University of Auckland", size: "lg" },
];

function TrustedBar() {
  return (
    <section className="pt-trusted">
      <div className="pt-trusted-inner">
        <span className="pt-trusted-label">Trusted across AU / NZ by</span>
        <div className="pt-trusted-logos">
          {LOGOS.map(l => (
            <img key={l.alt} src={l.src} alt={l.alt} className={`pt-trusted-logo pt-trusted-logo--${l.size}`}/>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== PROBLEM ===== */
function ProblemCard({ artColor, art, title, body }) {
  return (
    <div className="pt-problem-card">
      <div className={`pt-problem-art pt-problem-art--${artColor}`}>{art}</div>
      <div className="pt-problem-body">
        <h3 className="pt-problem-h3">{title}</h3>
        <p className="pt-problem-p">{body}</p>
      </div>
    </div>
  );
}

function BauArt() {
  return (
    <>
      <div className="pt-art-clock">
        <div className="pt-art-hand pt-art-hand-h"/>
        <div className="pt-art-hand pt-art-hand-m"/>
      </div>
      <div className="pt-art-bau-list">
        {["Pay run #142","Pay run #143","Pay run #144"].map(t => (
          <div key={t} className="pt-art-bau-item">
            <span className="pt-art-bau-check">✓</span>{t}
          </div>
        ))}
        <div className="pt-art-bau-item pt-art-bau-item--strat">
          <span className="pt-art-bau-check pt-art-bau-check--empty"/>Strategic project
        </div>
      </div>
    </>
  );
}

function SpreadsheetArt() {
  const cells = Array.from({length:15}).map((_,i) => (
    <span key={i} className={`pt-art-xls-cell${[2,6,13].includes(i)?" pt-art-xls-cell--hl":""}`}/>
  ));
  return (
    <>
      <div className="pt-art-stack pt-art-stack-1" style={{left:34,top:42}}/>
      <div className="pt-art-stack pt-art-stack-2" style={{left:46,top:34}}/>
      <div className="pt-art-stack pt-art-stack-3" style={{left:58,top:28,boxShadow:"0 8px 18px -8px rgba(0,0,0,.22)"}}>
        <div className="pt-art-xls-head">
          <span className="pt-art-xls-icon"/>
          <span className="pt-art-xls-name">Pay May (use-this).xlsx</span>
        </div>
        <div className="pt-art-xls-grid">{cells}</div>
      </div>
    </>
  );
}

function MemoryArt() {
  const notes = [
    {label:"awards", color:"#FBE7B6", tc:"#7A5E12", rot:-6, l:24, t:26, w:62, h:48},
    {label:"STP",    color:"#F8D2A8", tc:"#9A5410", rot:5,  l:108,t:18, w:54, h:44},
    {label:"PAYG",   color:"#F7CFD7", tc:"#8E3050", rot:-4, l:178,t:30, w:58, h:46},
    {label:"leave",  color:"#D8EBD4", tc:"#2F6B47", rot:7,  l:48, t:84, w:56, h:44},
    {label:"EBA",    color:"#CBDAF0", tc:"#2B567E", rot:-8, l:134,t:88, w:50, h:42},
  ];
  return (
    <>
      {notes.map(n => (
        <div key={n.label} className="pt-art-note" style={{
          background:n.color, color:n.tc,
          transform:`rotate(${n.rot}deg)`,
          left:n.l, top:n.t, width:n.w, height:n.h,
        }}>{n.label}</div>
      ))}
      <div className="pt-art-qmark">?</div>
    </>
  );
}

function Problem() {
  return (
    <section className="pt-problem">
      <div className="pt-section-inner">
        <div style={{maxWidth:680}}>
          <div className="pt-pill pt-pill--red">The problem</div>
          <h2 className="pt-h2">Payroll shouldn't feel like it's running you</h2>
          <p className="pt-section-sub">
            You've built structure. You've created checklists, documented processes, made it work - but the tools you're using to hold it together weren't built for this.
          </p>
        </div>
        <div className="pt-problem-grid">
          <ProblemCard
            artColor="green"
            art={<BauArt/>}
            title="Pay processes are more complex than ever"
            body="Endless steps over several days, in strict order, each needing review and sign-off from people outside the team. Keeping it on track falls to one person."
          />
          <ProblemCard
            artColor="blue"
            art={<SpreadsheetArt/>}
            title="Manual work with no home for the detail"
            body="Payroll still runs by hand: communications, approvals, manual registers. The detail it generates (adjustments, overpayments, exceptions) has nowhere official to live."
          />
          <ProblemCard
            artColor="purple"
            art={<MemoryArt/>}
            title="The memory trap"
            body="Too much of how payroll runs lives in people's heads. When they're on leave or move on, the knowledge walks out the door with them."
          />
        </div>
      </div>
    </section>
  );
}

/* ===== SOLUTION ===== */
function Solution() {
  return (
    <section className="pt-solution">
      <div className="pt-section-inner">
        <div style={{maxWidth:740}}>
          <div className="pt-pill pt-pill--green">The solution</div>
          <h2 className="pt-h2">The operating system for your payroll team</h2>
          <p className="pt-section-sub">
            Paytools gives your team the schedule, the controls and the audit trail all in one place to run calm pay cycles, on time, every time.
          </p>
        </div>

        {/* Row 1: Processing */}
        <div className="pt-feature-row">
          <div className="pt-feature-copy">
            <div className="pt-feature-eyebrow">Payroll processing</div>
            <h3 className="pt-h3">Pay days that end at 5pm</h3>
            <p className="pt-feature-body">
              The whole pay cycle laid out for you. Every task for the main pay run, the ad hoc pays and the clean-up steps, in the order they need to happen, each one owned with deadlines and reminders. A complete record of who did what and when.
            </p>
            <p className="pt-feature-body">
              Complete real-time visibility means nothing gets missed, leadership never has to chase updates & pay day ends on time.
            </p>
            <a href="/features/payroll-operations-software/" className="pt-btn-stroke" style={{display:"inline-flex",textDecoration:"none",fontSize:15.7}}>
              Explore payroll processing
            </a>
          </div>
          <div className="pt-feature-mock-wrap">
            <HomeChecklistMock/>
          </div>
        </div>

        {/* Row 2: Governance */}
        <div className="pt-feature-row pt-feature-row--alt">
          <div className="pt-feature-mock pt-feature-mock-wrap">
            <HomeObligationMock/>
          </div>
          <div className="pt-feature-copy">
            <div className="pt-feature-eyebrow">Governance</div>
            <h3 className="pt-h3">Compliance enhanced and audit ready</h3>
            <p className="pt-feature-body">
              The state of your payroll operation in one view, not scattered across shared files, inboxes, calendars and people's heads. Obligations, risks, controls and issues, all tracked with owners and due dates.
            </p>
            <p className="pt-feature-body">
              When it's time to prove it, auditors get view-only access and find everything they need without your team lifting a finger.
            </p>
            <a href="/features/payroll-governance/" className="pt-btn-stroke" style={{fontSize:15.7,display:"inline-flex",alignItems:"center",textDecoration:"none"}}>
              Explore payroll governance
            </a>
          </div>
        </div>

        {/* Large teams panel */}
        <div className="pt-teams-panel">
          <div>
            <div className="pt-teams-eyebrow">For teams of all sizes</div>
            <h3 className="pt-teams-h3">Trusted by payroll teams of 10 or more</h3>
            <p className="pt-teams-body">
              When payroll runs across multiple streams and entities, the Head of Payroll needs one view of every team's status, a way to give each sub-team only the work that's theirs, and proof of who did what across the whole operation.
            </p>
            <p className="pt-teams-body" style={{marginBottom:0}}>
              And for smaller teams, it's the same calm, structured process - without the old school spreadsheets and heavy mental load.
            </p>
          </div>
          <HomeTeamsMock/>
        </div>
      </div>
    </section>
  );
}

/* ===== WORKS WITH ===== */
function WorksWith() {
  return (
    <section className="pt-works">
      <div className="pt-section-inner">
        <div className="pt-works-grid">
          {/* Layer diagram */}
          <div className="pt-works-layer-card">
            <div className="pt-works-main-box">
              <div className="pt-works-main-eyebrow">The payroll operations layer</div>
              <div className="pt-works-main-name">Paytools</div>
              <div className="pt-works-main-desc">Run the process. Prove it ran. Point to the evidence.</div>
              <div className="pt-works-tags">
                <span className="pt-works-tag">Pay processing</span>
                <span className="pt-works-tag">Governance</span>
                <span className="pt-works-tag">AI-assisted payroll</span>
              </div>
            </div>
            <div className="pt-works-divider">
              <span className="pt-works-divider-lbl">Two neighbours we don't replace</span>
              <span className="pt-works-divider-line"/>
            </div>
            <div className="pt-works-neighbours">
              <div className="pt-neighbour">
                <div className="pt-neighbour-eyebrow">Payroll engine</div>
                <div className="pt-neighbour-name">Calculates &amp; pays</div>
                <div className="pt-neighbour-brands">SAP · Chris21 · ADP · Dayforce · Aurion · MicrOpay · Preceda</div>
                <div className="pt-neighbour-note"><strong>We don't calculate pay.</strong> Paytools runs alongside it — no integration needed.</div>
              </div>
              <div className="pt-neighbour">
                <div className="pt-neighbour-eyebrow">File storage</div>
                <div className="pt-neighbour-name">Stores your files</div>
                <div className="pt-neighbour-brands">SharePoint · Network / UNC drives · Google Drive</div>
                <div className="pt-neighbour-note"><strong>Paytools indexes and links your files where they live.</strong></div>
              </div>
            </div>
          </div>

          {/* Copy */}
          <div>
            <div className="pt-works-copy-eyebrow">Where Paytools fits</div>
            <h2 className="pt-works-h2">Built for what your payroll system can't do</h2>
            <p className="pt-works-body">
              Paytools runs and governs your payroll activities: task ownership, deadlines, compliance evidence and a complete record of who did what and when. We don't calculate pay, move money or host your files - your payroll system, your bank and your document stores keep doing exactly what they do today.
            </p>
            <p className="pt-works-sub">
              Plus native Microsoft Teams notifications, so stakeholders stay informed without needing a Paytools login.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== RESULTS ===== */
const STATS = [
  { target: 50, suffix: "%",    text: "Less manual work when processing a pay run.",                            org: "ITW Construction" },
  { target: 4,  suffix: " wks", text: "For new staff to run a pay run independently (previously 6 months).",   org: "Cerebral Palsy Alliance" },
  { target: 10, suffix: "x",    text: "Stronger governance practices for non-BAU tasks.",                       org: "Avivo" },
];

function useCountUp(target, duration = 1400) {
  const [value, setValue] = React.useState(0);
  const [started, setStarted] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setStarted(true); obs.disconnect(); }
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  React.useEffect(() => {
    if (!started) return;
    const start = performance.now();
    let raf;
    function tick(now) {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setValue(Math.round(eased * target));
      if (progress < 1) raf = requestAnimationFrame(tick);
    }
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [started, target, duration]);

  return [value, ref];
}

function StatCard({ stat }) {
  const [value, ref] = useCountUp(stat.target);
  return (
    <div ref={ref}>
      <div className="pt-result-num">{value}{stat.suffix}</div>
      <p className="pt-result-text">{stat.text}</p>
      <div className="pt-result-org">{stat.org}</div>
    </div>
  );
}

function Results() {
  return (
    <section className="pt-results">
      <div className="pt-section-inner">
        <div className="pt-results-eyebrow">Results from teams using Paytools</div>
        <div className="pt-results-grid">
          {STATS.map(s => <StatCard key={s.org} stat={s}/>)}
        </div>
      </div>
    </section>
  );
}

/* ===== FINAL CTA ===== */
function FinalCTA() {
  return (
    <section className="pt-final">
      <div className="pt-final-glow"/>
      <div className="pt-final-inner">
        <h2 className="pt-final-h2">Up and running in a few short weeks</h2>
        <p className="pt-final-sub">
          Bring a real process. 60 minutes and we'll show you exactly how it fits and how easy it is to get started.
        </p>
        <div style={{display:"flex",flexDirection:"column",gap:18,alignItems:"center"}}>
          <a href="/demo/" className="pt-btn-accent" style={{display:"inline-flex",alignItems:"center",textDecoration:"none"}}>Book a demo</a>
        </div>
      </div>
    </section>
  );
}

/* ===== TESTIMONIALS ===== */
const TESTIMONIALS = [
  { initials:"BK", name:"Beti Kouloumendas",  role:"Director of Operations",   org:"Carer Solutions",           quote:"\"I would strongly recommend Paytools, it's an amazing tool that has added significant value. Plus, it was one of the best implementations that I've ever sat through in my career.\"", link:"/blog/payroll-checklist-carer-soutions/" },
  { initials:"DW", name:"Daniel Watson",       role:"Senior Manager, Payroll",  org:"Cerebral Palsy Alliance",   quote:"\"Before Paytools, we used to have to stay back until 7pm on pay days to complete all tasks. Now we can confidently leave at 5pm knowing everything has been completed accurately.\"", link:"/blog/cpa-payroll-management/" },
  { initials:"NS", name:"Nicole Watson-Spry",  role:"Platform Payroll Lead",    org:"ITW Construction, APAC",    quote:"\"Paytools is a must-have. With features like the shared calendar, centralised registers and obligation library, it's far superior to using Microsoft Office tools and you should absolutely be using it!\"", link:"/blog/payroll-processing-time/" },
  { initials:"GD", name:"Gavin Day",           role:"Financial Controller",     org:"Avivo",                     quote:"\"With Paytools, we've been able to streamline two complex pay runs onto one airtight process. Plus, our governance practices are 10x better — especially with non-BAU tasks.\"", link:"/blog/avivo-payroll-operations/" },
  { initials:"MQ", name:"Mel Quinn",           role:"Head of HR & Payroll",     org:"University of Sydney",      quote:"\"Paytools has allowed us to better identify and track our payroll compliance activities. It provides comfort and oversight to management that essential activities are being completed on time.\"", link:"/blog/assurance-into-payroll/" },
  { initials:"CF", name:"Chris Fletcher",      role:"Chief Financial Officer",  org:"Medical & Aged Care Group", quote:"\"With a new payroll team and a hybrid model, Paytools has been immensely beneficial. We're already experiencing many advantages of the tool, including the ability for anyone to seamlessly step in and complete a pay run.\"" },
];

function Testimonials() {
  return (
    <section className="pt-testimonials">
      <div className="pt-section-inner">
        <div className="pt-testi-grid">
          {TESTIMONIALS.map(t => (
            <div key={t.name} className="pt-testi-card">
              <div className="pt-testi-head">
                <span className="pt-testi-av">{t.initials}</span>
                <div>
                  <div className="pt-testi-name">{t.name}</div>
                  <div className="pt-testi-role">{t.role}</div>
                  <div className="pt-testi-org">{t.org}</div>
                </div>
              </div>
              <div className="pt-testi-stars">★★★★★</div>
              <p className="pt-testi-quote">{t.quote}</p>
              {t.link && <a href={t.link} className="pt-testi-more">Read more →</a>}
            </div>
          ))}
        </div>
        <div className="pt-testi-more-btn">
          <a href="/customer-stories/" className="pt-btn-outline" style={{display:"inline-flex",alignItems:"center",textDecoration:"none"}}>More customer stories</a>
        </div>
      </div>
    </section>
  );
}

/* ===== AI SECTION ===== */
function AISection() {
  return (
    <section className="pt-ai">
      <div className="pt-ai-glow"/>
      <div className="pt-ai-inner">
        <div>
          <div className="pt-ai-eyebrow">Designed for what's coming</div>
          <h2 className="pt-ai-h2">
            Ready for <span className="pt-ai-chip">AI-assisted</span> payroll?
          </h2>
          <p className="pt-ai-body">
            Agentic AI needs governed workflows, structured data and a complete audit trail to operate safely. Paytools is building that layer (with direct read/write access for AI agents) via a Paytools MCP.
          </p>
          <p className="pt-ai-body">
            When your organisation moves toward AI-assisted payroll operations, this is an easy and safe way to get started.
          </p>
          <p className="pt-ai-body">
            <a href="/contact-us/">Speak to our team</a> to learn more.
          </p>
        </div>
        <div dangerouslySetInnerHTML={{__html: `
<div style="background:#F1E8E2;border:1px solid rgba(231,220,210,.7);border-radius:16px;overflow:hidden;font-family:aeonik,'Hanken Grotesk',sans-serif;box-shadow:0 40px 80px -40px rgba(0,0,0,.55);">
  <div style="display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #EEE4DC;">
    <span style="flex:none;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#6F5BE6,#B6A9F5);display:inline-flex;align-items:center;justify-content:center;">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="#FCFAF8"><path d="M12 2l1.9 5.6a4 4 0 0 0 2.5 2.5L22 12l-5.6 1.9a4 4 0 0 0-2.5 2.5L12 22l-1.9-5.6a4 4 0 0 0-2.5-2.5L2 12l5.6-1.9a4 4 0 0 0 2.5-2.5L12 2z"></path></svg>
    </span>
    <div style="line-height:1.2;"><div style="font-size:14.6px;font-weight:700;color:#1A1613;font-family:'Bricolage Grotesque',sans-serif;">Paytools Copilot</div><div style="font-size:11.3px;color:#A0958B;">June cycle · run #143</div></div>
    <span style="margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:10.8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#2F6B47;background:rgba(47,107,71,.1);border:1px solid rgba(47,107,71,.22);padding:4px 10px;border-radius:999px;white-space:nowrap;">↺ Logged &amp; reversible</span>
  </div>
  <div style="padding:18px 16px 8px;display:flex;flex-direction:column;gap:14px;">
    <div style="align-self:flex-end;max-width:82%;background:var(--accent);color:#FFFFFF;font-size:14px;line-height:1.5;padding:10px 13px;border-radius:14px 14px 4px 14px;">What's the status of the current weekly pay run?</div>
    <div style="display:flex;gap:10px;">
      <span style="flex:none;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#6F5BE6,#B6A9F5);display:inline-flex;align-items:center;justify-content:center;margin-top:2px;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#FCFAF8"><path d="M12 2l1.9 5.6a4 4 0 0 0 2.5 2.5L22 12l-5.6 1.9a4 4 0 0 0-2.5 2.5L12 22l-1.9-5.6a4 4 0 0 0-2.5-2.5L2 12l5.6-1.9a4 4 0 0 0 2.5-2.5L12 2z"></path></svg></span>
      <div style="flex:1;min-width:0;">
        <div style="font-size:14px;line-height:1.55;color:#5A514A;">In <span style="font-weight:700;color:rgb(42,36,32);">run #143</span>, <span style="font-weight:700;color:rgb(42,36,32);">6 of 14</span> checks have been completed.&nbsp;</div>
        <div style="margin-top:9px;display:flex;flex-direction:column;gap:7px;">
          <div style="display:flex;align-items:flex-start;gap:9px;background:#FAF6F1;border:1px solid #E7DCD2;border-radius:10px;padding:9px 11px;"><span style="flex:none;width:6px;height:6px;border-radius:50%;background:#E8B43B;margin-top:6px;"></span><div style="flex:1;"><div style="font-size:13.5px;font-weight:600;color:#2A2420;">Timesheet reconciliation</div><div style="font-size:11.9px;color:#8A8078;margin-top:1px;">Pending approval by <span style="color:#3F362E;font-weight:600;">Jane</span></div></div></div>
        </div>
        <div style="margin-top:8px;background:rgba(180,69,47,.06);border:1px solid rgba(180,69,47,.24);border-radius:11px;padding:10px 12px;">
          <div style="display:flex;align-items:flex-start;gap:8px;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#B4452F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:1px;"><path d="M12 9v4M12 17h.01M10.3 3.9l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3l-8-14a2 2 0 0 0-3.4 0z"></path></svg>
            <div style="font-size:13.5px;line-height:1.5;color:#5A514A;"><span style="font-weight:700;color:#8F3623;">John Smith</span> only had a 7-hour break between shifts.</div>
          </div>
          <button style="margin-top:9px;display:inline-flex;align-items:center;gap:7px;font-family:aeonik,'Hanken Grotesk',sans-serif;font-size:12.4px;font-weight:700;color:#FFFFFF;background:#B4452F;border:none;padding:7px 12px;border-radius:8px;cursor:pointer;">Raise an issue in Paytools<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h13M13 6l6 6-6 6"></path></svg></button>
        </div>
      </div>
    </div>
    <div style="align-self:flex-end;max-width:82%;background:var(--accent);color:#FFFFFF;font-size:14px;line-height:1.5;padding:10px 13px;border-radius:14px 14px 4px 14px;">Suggest how I can improve my pay processing checklists.</div>
    <div style="display:flex;gap:10px;">
      <span style="flex:none;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#6F5BE6,#B6A9F5);display:inline-flex;align-items:center;justify-content:center;margin-top:2px;"><svg width="13" height="13" viewBox="0 0 24 24" fill="#FCFAF8"><path d="M12 2l1.9 5.6a4 4 0 0 0 2.5 2.5L22 12l-5.6 1.9a4 4 0 0 0-2.5 2.5L12 22l-1.9-5.6a4 4 0 0 0-2.5-2.5L2 12l5.6-1.9a4 4 0 0 0 2.5-2.5L12 2z"></path></svg></span>
      <div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;">
        <div style="background:#FAF6F1;border:1px solid #E7DCD2;border-radius:10px;padding:9px 11px;"><div style="font-size:13.5px;font-weight:700;color:#2A2420;">Turn reviews into outcomes</div><div style="font-size:12.4px;line-height:1.5;color:#8A8078;margin-top:2px;">&ldquo;Confirm super file totals match&rdquo; instead of &ldquo;Review super&rdquo;.</div></div>
        <div style="background:#FAF6F1;border:1px solid #E7DCD2;border-radius:10px;padding:9px 11px;"><div style="font-size:13.5px;font-weight:700;color:#2A2420;">Duplicate check names</div><div style="font-size:12.4px;line-height:1.5;color:#8A8078;margin-top:2px;">Two checks called &ldquo;SLP&rdquo; &mdash; rename to &ldquo;SLP&nbsp;-&nbsp;STD&rdquo; / &ldquo;SLP&nbsp;-&nbsp;CHEL&rdquo;.</div></div>
      </div>
    </div>
  </div>
  <div style="padding:12px 16px 16px;">
    <div style="display:flex;align-items:center;gap:10px;background:#FAF6F1;border:1px solid #E7DCD2;border-radius:12px;padding:9px 10px 9px 14px;">
      <span style="flex:1;font-size:13.5px;color:#A0958B;">Ask Paytools Copilot&hellip;</span>
      <span style="flex:none;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#6F5BE6,#B6A9F5);display:inline-flex;align-items:center;justify-content:center;"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#FCFAF8" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h13M13 6l6 6-6 6"></path></svg></span>
    </div>
  </div>
</div>
`}}/>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const FAQS = [
  { q:"Is Paytools difficult to set up?",
    a:"No. Most teams are live within a few short weeks. We map your existing pay cycle, import your checklists and documented procedures, and configure owners and reminders with you." },
  { q:"Is Paytools a payroll system?",
    a:"No, Paytools is a payroll operations platform. Think of your payroll system (like SAP, Workday or Chris21) as the engine that calculates the numbers. Paytools is the cockpit — it's where you manage the team, track the deadlines, document the procedures and house the governance that ensures those calculations are correct. We sit on top of your existing software to manage the 'human' side of the process." },
  { q:"How does Paytools handle our payroll data?",
    a:"Paytools stores operational metadata — tasks, owners, deadlines, procedures and evidence — not the pay calculations themselves. Data is encrypted in transit and at rest, hosted in-region for AU/NZ." },
  { q:"What's wrong with using Microsoft Office to manage payroll operations?",
    a:"Spreadsheets and shared docs have no ownership, no version history, no audit trail and no reminders. Critical knowledge lives in individuals' heads, and nothing connects the procedure to the task that uses it." },
  { q:"How does Paytools pricing work?",
    a:"Pricing scales with the size of your payroll team and the number of pay groups you manage. Book a demo and we'll put together a tailored quote." },
  { q:"Does Paytools integrate with Microsoft Teams?",
    a:"Yes — native Microsoft Teams notifications keep stakeholders informed without needing a Paytools login, and reminders land where your team already works." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="pt-faq">
      <div className="pt-faq-grid">
        <div>
          <div className="pt-faq-eyebrow">FAQ</div>
          <h2 className="pt-faq-h2">Common questions</h2>
          <p className="pt-faq-sub">Everything you need to know about getting set up, staying compliant, and running calmer pay days.</p>
          <a href="/demo/" className="pt-faq-chat">Still have questions? Chat to sales →</a>
        </div>
        <div className="pt-faq-list">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`pt-faq-item${isOpen?" open":""}`}>
                <button className="pt-faq-btn" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span className="pt-faq-q">{f.q}</span>
                  <svg className="pt-faq-caret" width="18" height="18" viewBox="0 0 16 16" fill="none">
                    <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
                <div className="pt-faq-a">{f.a}</div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ===== FOOTER ===== */
function Footer() {
  // Load HubSpot once wherever the footer renders. The account ID/snippet
  // lives solely in /lib/hubspot.js — this just references it.
  React.useEffect(() => {
    if (document.getElementById("hs-loader")) return;
    var s = document.createElement("script");
    s.id = "hs-loader";
    s.src = "/lib/hubspot.js";
    s.defer = true;
    document.body.appendChild(s);
  }, []);
  return (
    <>
    {/* Google Tag Manager (noscript) — body fallback; ID single-sourced in lib/gtm.js */}
    <noscript dangerouslySetInnerHTML={{__html: '<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WH6CCNV" height="0" width="0" style="display:none;visibility:hidden"></iframe>'}}/>
    <footer className="pt-footer">
      <div className="pt-footer-inner">
        <div>
          <a href="/" style={{display:"inline-flex"}}>
            <PaytoolsLogo height={44} variant="light"/>
          </a>
          <p className="pt-footer-tagline">
            Payroll operations & governance software, improving the lives of payroll professionals. Melbourne, Australia.
          </p>
          <div className="pt-footer-socials">
            <a href="https://www.linkedin.com/company/paytools" className="pt-social-badge" aria-label="LinkedIn" target="_blank" rel="noopener">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
            <a href="https://x.com/paytoolsau" className="pt-social-badge" aria-label="X (Twitter)" target="_blank" rel="noopener">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <a href="https://www.facebook.com/paytoolsau" className="pt-social-badge" aria-label="Facebook" target="_blank" rel="noopener">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            </a>
          </div>
        </div>
        <div className="pt-footer-col">
          <div className="pt-footer-col-h">By solution</div>
          <ul>
            <li><a href="/features/payroll-operations-software/">Payroll Processing</a></li>
            <li><a href="/features/payroll-governance/">Governance</a></li>
          </ul>
        </div>
        <div className="pt-footer-col">
          <div className="pt-footer-col-h">Resources</div>
          <ul>
            <li><a href="/customer-stories/">Customer stories</a></li>
            <li><a href="/payroll-news/">Blogs &amp; downloads</a></li>
            <li><a href="/webinars-and-events/">Webinars &amp; events</a></li>
          </ul>
        </div>
        <div className="pt-footer-col">
          <div className="pt-footer-col-h">Company</div>
          <ul>
            <li><a href="/about-us/">About</a></li>
            <li><a href="/contact-us/">Contact us</a></li>
            <li><a href="/pricing/">Pricing</a></li>
            <li><a href="/partners/">Partners</a></li>
          </ul>
        </div>
      </div>
      <div className="pt-footer-bottom">
        <span>© 2026 Paytools Pty Ltd. Payroll operations, handled.</span>
        <a href="/privacy-policy/">Privacy Policy</a>
      </div>
    </footer>
    </>
  );
}

Object.assign(window, { NavBar, Hero, TrustedBar, Problem, Solution, WorksWith, Results, FinalCTA, Testimonials, AISection, FAQ, Footer });
