// Shared UI components for the Keuer Solutions website kit.
// Expose everything to window so sibling babel scripts can use them.

const Logo = ({ size = 28 }) => (
  <div className="logo" style={{ fontSize: size }}>KEUER</div>
);

const ICON_GLYPHS = {
  civil: (<><path d="M3 18h18"/><path d="M4 18c2-3 4-4 6-4s4 2 6 2 3-1 4-2"/><path d="M3 14h18"/></>),
  landscape: (<><path d="M6 21c0-8 6-13 14-13 0 8-6 13-14 13z"/><path d="M6 21l-2 2"/></>),
  plumbing: (<><path d="M3 8h7v4h4V8h7"/><path d="M14 8v8"/></>),
  electric: (<path d="M13 2L4 14h6l-2 8 10-12h-6l1-8z"/>),
  survey: (<><circle cx="12" cy="12" r="6"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><path d="M12 10v4M10 12h4"/></>),
  waterproof: (<path d="M12 3c-3 5-6 8-6 11a6 6 0 0 0 12 0c0-3-3-6-6-11z"/>),
  audit: (<><rect x="6" y="4" width="12" height="17" rx="1"/><path d="M9 3h6v3H9z"/><path d="M9 12l2 2 4-4"/></>),
  checklist: (<><path d="M4 6h3M4 12h3M4 18h3"/><path d="M10 6h10M10 12h10M10 18h10"/></>),
  construction: (<><path d="M4 18h16"/><path d="M5 18a7 7 0 0 1 14 0"/><path d="M9 18V9a3 3 0 0 1 6 0v9"/></>),
  'control-system': (<><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></>),
  learning: (<><path d="M2 9l10-5 10 5-10 5L2 9z"/><path d="M6 11v5c0 2 3 3 6 3s6-1 6-3v-5"/></>),
  policy: (<><path d="M6 3h9l3 3v15H6z"/><path d="M15 3v3h3"/><path d="M9 12h6M9 16h6"/></>),
};

const Icon = ({ name, className = '' }) => {
  const glyph = ICON_GLYPHS[name];
  if (!glyph) return null;
  return (
    <svg className={`icon ${className}`} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
      aria-hidden="true">{glyph}</svg>
  );
};

const renderIconOrImg = (icon, cls) => {
  if (!icon) return null;
  if (typeof icon === 'string' && icon.includes('/')) return <img className={cls} src={icon} alt="" />;
  return <Icon name={icon} className={cls} />;
};

const Button = ({ children, variant = "primary", onClick, href, ...rest }) => {
  const cls = variant === "outline-light" ? "btn btn-outline-light" : "btn btn-primary";
  if (href) return <a className={cls} href={href} onClick={onClick} {...rest}>{children}</a>;
  return <button className={cls} onClick={onClick} {...rest}>{children}</button>;
};

const Nav = ({ active, onNavigate }) => {
  const [open, setOpen] = React.useState(false);
  const go = (page) => (e) => { e.preventDefault(); setOpen(false); onNavigate(page); };
  // Lock body scroll when mobile menu is open
  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);
  return (
    <nav className="nav">
      <a href="#" onClick={go('home')}><Logo /></a>
      <div className="nav-links">
        <a className={`nav-link ${active === 'home' ? 'active' : ''}`} href="#" onClick={go('home')}>Home</a>
        <a className={`nav-link ${['services','standards'].includes(active) ? 'active' : ''}`} href="#" onClick={go('standards')}>HSEQ System</a>
        <a className={`nav-link ${active === 'who-we-help' ? 'active' : ''}`} href="#" onClick={go('who-we-help')}>Who We Help</a>
        <a className={`nav-link ${active === 'why-certified' ? 'active' : ''}`} href="#" onClick={go('why-certified')}>Why Get Certified?</a>
        <a className={`nav-link ${active === 'what-is-iso' ? 'active' : ''}`} href="#" onClick={go('what-is-iso')}>What is ISO?</a>
        <a className={`nav-link ${active === 'contact' ? 'active' : ''}`} href="#" onClick={go('contact')}>Contact Us</a>
      </div>

      {/* Mobile hamburger */}
      <button
        className={`nav-burger ${open ? 'is-open' : ''}`}
        aria-label={open ? 'Close menu' : 'Open menu'}
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        <span /><span /><span />
      </button>

      {/* Mobile sheet */}
      <div className={`nav-sheet ${open ? 'is-open' : ''}`} onClick={() => setOpen(false)}>
        <div className="nav-sheet-inner" onClick={(e) => e.stopPropagation()}>
          <a className={`nav-sheet-link ${active === 'home' ? 'active' : ''}`} href="#" onClick={go('home')}>Home</a>
          <a className={`nav-sheet-link ${['services','standards'].includes(active) ? 'active' : ''}`} href="#" onClick={go('standards')}>HSEQ System</a>
          <a className={`nav-sheet-link ${active === 'who-we-help' ? 'active' : ''}`} href="#" onClick={go('who-we-help')}>Who We Help</a>
          <a className={`nav-sheet-link ${active === 'why-certified' ? 'active' : ''}`} href="#" onClick={go('why-certified')}>Why Get Certified?</a>
          <a className={`nav-sheet-link ${active === 'what-is-iso' ? 'active' : ''}`} href="#" onClick={go('what-is-iso')}>What is ISO?</a>
          <a className={`nav-sheet-link ${active === 'contact' ? 'active' : ''}`} href="#" onClick={go('contact')}>Contact Us</a>

          <a className="nav-sheet-cta" href="#" onClick={go('contact')}>Book a call →</a>
        </div>
      </div>
    </nav>
  );
};

const HeroAnimation = ({ words: customWords, tag } = {}) => {
  // Default marquee — used by the home hero.
  const defaultWords = [
    'HEALTH', 'ISO 45001', 'SAFETY', 'ISO 9001',
    'ENVIRONMENT', 'ISO 14001', 'QUALITY', 'HSEQ',
    'AUDIT READY', 'ON SITE', 'DOCUMENTED', 'COMPLIANT',
  ];
  const words = (customWords && customWords.length) ? customWords : defaultWords;
  const tagText = tag || 'KEUER · HSEQ MANAGEMENT SYSTEMS';
  return (
    <div className="hero-anim-f">
      {/* Hairline vertical guide */}
      <div className="haf-guide" />

      {/* Vertical scrolling word column */}
      <div className="haf-scroll" aria-hidden="true">
        <div className="haf-scroll-inner">
          {[...words, ...words].map((w, i) => (
            <div className="haf-word" key={i}>{w}</div>
          ))}
        </div>
      </div>

      {/* Peach accent dot */}
      <div className="haf-accent" />

      {/* Corner ISO tag */}
      <div className="haf-tag">{tagText}</div>
    </div>
  );
};

// Placeholder slot — subtly-striped neutral surface + monospace caption telling
// the team what real photo belongs here. Use ONLY when explicitly passed
// imageSrc="PLACEHOLDER" — does NOT auto-substitute existing photo URLs.
const ImagePlaceholder = ({ hint, tone = "dark", aspectRatio, className = "", style = {} }) => {
  const isDark = tone === "dark";
  return (
    <div
      className={`img-placeholder ${isDark ? 'img-placeholder--dark' : 'img-placeholder--light'} ${className}`}
      style={{ ...(aspectRatio ? { aspectRatio } : {}), ...style }}
    >
      <div className="img-placeholder-stripes" aria-hidden="true" />
      <div className="img-placeholder-caption">
        <span className="img-placeholder-marker">//</span>
        <span className="img-placeholder-hint">{hint}</span>
      </div>
    </div>
  );
};

const Hero = ({ title, body, imageSrc, placeholderHint, ctaText = "Book A Call", ctaCaption, onCta }) => (
  <section className="hero">
    {imageSrc === 'ANIMATION'
      ? <HeroAnimation />
      : imageSrc === 'PLACEHOLDER'
        ? <ImagePlaceholder hint={placeholderHint || "place hero photo"} tone="dark" className="hero-image" />
        : <div className="hero-image" style={{ backgroundImage: `url(${imageSrc})` }} />}
    <div className="hero-content">
      <h1>{title}</h1>
      {body && <p>{body}</p>}
      <div className="btn-row">
        <Button onClick={onCta}>{ctaText}</Button>
      </div>
      {ctaCaption && <p className="hero-cta-caption">{ctaCaption}</p>}
    </div>
  </section>
);

const PageHero = ({ title, imageSrc, visual, placeholderHint }) => (
  <section className="page-hero">
    {visual
      ? <div className="page-hero-image page-hero-visual">{visual}</div>
      : imageSrc === 'PLACEHOLDER'
        ? <ImagePlaceholder hint={placeholderHint || "place supporting photo"} tone="dark" className="page-hero-image" />
        : <div className="page-hero-image" style={{ backgroundImage: `url(${imageSrc})` }} />
    }
    <div className="page-hero-content">
      <h1>{title}</h1>
    </div>
  </section>
);

const SectionHead = ({ eyebrow, title, body }) => (
  <div className="section-head">
    {eyebrow && <div className="eyebrow">{eyebrow}</div>}
    <h2>{title}</h2>
    {body && <p>{body}</p>}
  </div>
);

const IndustryTile = ({ icon, title, body, onClick }) => (
  <div className="tile" onClick={onClick}>
    {renderIconOrImg(icon, 'tile-icon')}
    <h4>{title}</h4>
    <p>{body}</p>
  </div>
);

const ServiceCard = ({ icon, title, body }) => (
  <div className="service">
    {renderIconOrImg(icon, 'service-icon')}
    <div>
      <h4>{title}</h4>
      <p>{body}</p>
    </div>
  </div>
);

const Step = ({ n, title, body }) => (
  <div className="step">
    <div className="step-num-col">
      <div className="step-eyebrow">Step</div>
      <div className="step-num">{String(n).padStart(2, '0')}</div>
    </div>
    <div className="step-body">
      <h3>{title}</h3>
      <p>{body}</p>
    </div>
  </div>
);

const CTABand = ({ eyebrow, title, sub, ctaText, onCta }) => (
  <section className="cta-band">
    <div className="container">
      {eyebrow && <div className="eyebrow" style={{ color: '#A8A8A8', marginBottom: 14 }}>{eyebrow}</div>}
      <h2>{title}</h2>
      {sub && <p className="sub">{sub}</p>}
      <Button onClick={onCta}>{ctaText}</Button>
    </div>
  </section>
);

// Public-holiday stub. Add real AU holidays as needed.
const AU_HOLIDAYS = new Set([
  // ISO date strings, e.g. '2026-04-25'
]);

const fmtISO = (d) => {
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const dd = String(d.getDate()).padStart(2, '0');
  return `${y}-${m}-${dd}`;
};
const fmtLong = (d) => d.toLocaleDateString('en-AU', { weekday: 'long', day: 'numeric', month: 'long' });
const fmtTime = (mins) => {
  const h = Math.floor(mins / 60);
  const m = mins % 60;
  const ampm = h >= 12 ? 'pm' : 'am';
  const h12 = ((h + 11) % 12) + 1;
  return `${h12}:${String(m).padStart(2, '0')}${ampm}`;
};

const SchedulePicker = ({ value, onChange }) => {
  const today = new Date(); today.setHours(0, 0, 0, 0);
  const [viewMonth, setViewMonth] = React.useState(new Date(today.getFullYear(), today.getMonth(), 1));

  // Build calendar grid for viewMonth
  const monthStart = new Date(viewMonth);
  const monthEnd = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 0);
  // Start grid on Monday
  const gridStart = new Date(monthStart);
  const dayIdx = (gridStart.getDay() + 6) % 7; // Mon=0
  gridStart.setDate(gridStart.getDate() - dayIdx);

  const days = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(gridStart); d.setDate(gridStart.getDate() + i);
    days.push(d);
  }

  const monthLabel = viewMonth.toLocaleDateString('en-AU', { month: 'long', year: 'numeric' });
  const canGoBack = viewMonth > new Date(today.getFullYear(), today.getMonth(), 1);

  const isSelectable = (d) => {
    if (d < today) return false;
    const dow = d.getDay(); // 0=Sun, 6=Sat
    if (dow === 0 || dow === 6) return false;
    if (AU_HOLIDAYS.has(fmtISO(d))) return false;
    return true;
  };

  // Time slots 9:00 → 16:30 (last start so 30-min call ends by 5pm)
  const slots = [];
  for (let m = 9 * 60; m <= 16 * 60 + 30; m += 30) slots.push(m);

  const selectedDate = value?.date ? new Date(value.date + 'T00:00:00') : null;
  const selectedTime = value?.time ?? null;

  const pickDate = (d) => {
    if (!isSelectable(d)) return;
    onChange({ date: fmtISO(d), time: selectedTime });
  };
  const pickTime = (mins) => {
    if (!selectedDate) return;
    onChange({ date: fmtISO(selectedDate), time: mins });
  };
  const clear = () => onChange(null);

  return (
    <div className="sched">
      <div className="sched-head">
        <div>
          <div className="sched-eyebrow">Pick a time for your call</div>
          <div className="sched-sub">Mon–Fri · 9am–5pm AEST</div>
        </div>
        {value && (
          <button type="button" className="sched-clear" onClick={clear} aria-label="Clear selection">Clear</button>
        )}
      </div>

      <div className="sched-body">
        <div className="sched-cal">
          <div className="sched-cal-nav">
            <button type="button" className="sched-nav-btn" onClick={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1))} disabled={!canGoBack} aria-label="Previous month">‹</button>
            <div className="sched-cal-month">{monthLabel}</div>
            <button type="button" className="sched-nav-btn" onClick={() => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1))} aria-label="Next month">›</button>
          </div>
          <div className="sched-cal-dow">
            {['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map((d) => <div key={d}>{d}</div>)}
          </div>
          <div className="sched-cal-grid">
            {days.map((d, i) => {
              const inMonth = d.getMonth() === viewMonth.getMonth();
              const sel = isSelectable(d);
              const isSelected = selectedDate && fmtISO(d) === fmtISO(selectedDate);
              const isToday = fmtISO(d) === fmtISO(today);
              return (
                <button
                  type="button"
                  key={i}
                  className={`sched-day ${inMonth ? '' : 'out'} ${sel ? '' : 'dis'} ${isSelected ? 'sel' : ''} ${isToday ? 'today' : ''}`}
                  onClick={() => pickDate(d)}
                  disabled={!sel}
                  aria-label={fmtLong(d)}
                >{d.getDate()}</button>
              );
            })}
          </div>
        </div>

        <div className="sched-times">
          <div className="sched-times-head">
            {selectedDate
              ? <><strong>{fmtLong(selectedDate)}</strong><span className="sched-times-tz">AEST</span></>
              : <span className="sched-times-empty">Select a date to see times</span>}
          </div>
          <div className="sched-times-grid" aria-disabled={!selectedDate}>
            {slots.map((m) => (
              <button
                type="button"
                key={m}
                className={`sched-slot ${selectedTime === m ? 'sel' : ''}`}
                onClick={() => pickTime(m)}
                disabled={!selectedDate}
              >{fmtTime(m)}</button>
            ))}
          </div>
        </div>
      </div>

      {value?.date && value?.time != null && (
        <div className="sched-summary">
          <span className="sched-dot" />
          <span><strong>{fmtLong(new Date(value.date + 'T00:00:00'))}</strong> at <strong>{fmtTime(value.time)}</strong> AEST</span>
        </div>
      )}
    </div>
  );
};

const ContactForm = ({ onSubmit }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [schedule, setSchedule] = React.useState(null);
  const [error, setError] = React.useState('');
  // Simple anti-bot: honeypot field + a math question generated once per mount.
  const captcha = React.useMemo(() => {
    const a = 2 + Math.floor(Math.random() * 7); // 2-8
    const b = 1 + Math.floor(Math.random() * 5); // 1-5
    return { a, b, answer: a + b };
  }, []);
  const handle = (e) => {
    e.preventDefault();
    const f = e.currentTarget;
    // Honeypot — real users leave this empty
    if (f.elements['hp_company_url'] && f.elements['hp_company_url'].value) {
      setError('Submission blocked.');
      return;
    }
    const captchaInput = parseInt(f.elements['captcha'].value, 10);
    if (captchaInput !== captcha.answer) {
      setError(`That answer isn't right. ${captcha.a} + ${captcha.b} = ?`);
      return;
    }
    setError('');
    setSubmitted(true);
    onSubmit && onSubmit();
  };
  if (submitted) {
    const sched = schedule?.date && schedule?.time != null
      ? `${fmtLong(new Date(schedule.date + 'T00:00:00'))} at ${fmtTime(schedule.time)} AEST`
      : null;
    return (
      <div style={{ padding: 40, background: '#F5F5F5', border: '1px solid #EAEAEA', textAlign: 'center' }}>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '0 0 8px' }}>Thanks, we'll be in touch.</h3>
        {sched
          ? <p style={{ margin: 0, color: '#3A3A3A' }}>You're booked in for <strong>{sched}</strong>. We'll send a calendar invite shortly.</p>
          : <p style={{ margin: 0, color: '#3A3A3A' }}>We typically reply within one business day.</p>}
      </div>
    );
  }
  return (
    <form onSubmit={handle}>
      <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '0 0 20px' }}>Contact us</h3>
      <div className="form-row">
        <div className="field"><label>First name</label><input required placeholder="First name" /></div>
        <div className="field"><label>Last name</label><input required placeholder="Last name" /></div>
      </div>
      <div className="form-row">
        <div className="field"><label>Email *</label><input type="email" required placeholder="Email" /></div>
        <div className="field"><label>Phone</label><input placeholder="Phone" /></div>
      </div>
      <div className="field" style={{ marginBottom: 20 }}>
        <label>Tell us about your business and what you're after</label>
        <textarea required placeholder="" />
      </div>

      <SchedulePicker value={schedule} onChange={setSchedule} />

      <div style={{ marginTop: 24 }}>
        <Button>{schedule?.date && schedule?.time != null ? 'Book my call' : 'Send message'}</Button>
        <span style={{ marginLeft: 14, fontSize: 13, color: '#707070' }}>
          {schedule?.date && schedule?.time != null
            ? "We'll confirm via email."
            : "Or skip the picker and we'll reply within one business day to find a time."}
        </span>
      </div>
    </form>
  );
};

const ProofBar = () => (
  <section className="proof-bar">
    <div className="container">
      <div className="proof-grid">
        <div className="proof-stat">
          <div className="proof-num">10+</div>
          <div className="proof-label">Years implementing ISO<br />for Australian businesses</div>
        </div>
        <div className="proof-stat">
          <div className="proof-num">3-in-1</div>
          <div className="proof-label">9001 · 45001 · 14001<br />integrated as one HSEQ system</div>
        </div>
        <div className="proof-stat">
          <div className="proof-num">$0</div>
          <div className="proof-label">Surprise invoices.<br />Fixed scope, fixed fee.</div>
        </div>
      </div>
    </div>
  </section>
);

const FounderBlock = () => (
  <section className="section founder-quote-section">
    <div className="container">
      <div className="founder-quote">
        <div className="fq-eyebrow">About</div>
        <p className="fq-fact">
          10+ years implementing ISO&nbsp;systems for Australian businesses.
        </p>
        <div className="fq-rule" />
        <div className="fq-body">
          <p>
            Keuer was founded to take the complicated parts of ISO certification off the operator's desk. We design the HSEQ system around how your business already runs, set it up end‑to‑end, and manage the auditor on your behalf, so you can stay focused on the work you're actually being paid to do.
          </p>
          <p>
            Our work is with construction, civil and specialist trade contractors across Australia. ISO&nbsp;9001, 45001 and 14001 from gap analysis through certification, with monthly support afterwards if you want it.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const LeadMagnet = ({ onCapture }) => {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (email) { setSent(true); onCapture && onCapture(email); } };
  return (
    <section className="section" style={{ paddingTop: 48, paddingBottom: 48 }}>
      <div className="container">
        <div className="lead-magnet">
          <div>
            <h3>{sent ? 'Check your inbox.' : 'Not ready to chat? Get the ISO Readiness Checklist.'}</h3>
            <p>{sent ? 'The checklist is on its way. Reply if you want to book a call.' : 'A 12-page PDF covering common issues that come up at first audit for construction SMEs.'}</p>
          </div>
          {!sent && (
            <form className="mag-form" onSubmit={submit}>
              <input type="email" required placeholder="you@company.com.au" value={email} onChange={(e) => setEmail(e.target.value)} />
              <button type="submit">Send it →</button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

const RiskReversal = () => (
  <section className="section alt">
    <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
      <div>
        <div className="eyebrow">How We Work</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 40, margin: '8px 0 18px' }}>Clear scope. Fixed price. No surprises.</h2>
        <p style={{ fontSize: 16, color: '#3A3A3A', lineHeight: 1.6 }}>
          Hiring a consultant shouldn&rsquo;t be a leap of faith. Here&rsquo;s how every engagement runs from first call to handover.
        </p>
      </div>
      <ul className="risk-list">
        <li><div><strong>First call.</strong> A conversation to understand your business and the standards you need.</div></li>
        <li><div><strong>Fixed-price scope.</strong> Once we agree the work, you get a fixed price and a fixed deliverable list.</div></li>
        <li><div><strong>Clear scope of work.</strong> A defined deliverable list and project plan, built around what your business actually needs.</div></li>
        <li><div><strong>One point of contact.</strong> You work directly with the founder from first call through to certification audit.</div></li>
        <li><div><strong>Optional ongoing support.</strong> Once you&rsquo;re certified, ongoing maintenance is available if you want it.</div></li>
      </ul>
    </div>
  </section>
);

const StickyCTA = ({ onCta }) => (
  <div className="sticky-cta">
    <div className="txt">Book a call</div>
    <button className="btn btn-primary" onClick={onCta}>Book →</button>
  </div>
);

const Footer = ({ onNavigate }) => {
  const go = (p) => (e) => { e.preventDefault(); onNavigate(p); };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">KEUER</div>
            <p style={{ color: '#C8C8C8', fontSize: 14, maxWidth: 360, margin: 0 }}>
              HSEQ Management Systems for Australian construction and trades.
              ISO 9001, 14001 &amp; 45001 specialists.
            </p>
          </div>
          <div>
            <h5>Contact</h5>
            <a href="mailto:info@keuersolutions.com">info@keuersolutions.com</a>
            <a href="tel:0450566114">0450 566 114</a>
            <a href="#" onClick={go('contact')}>Contact Us</a>
          </div>
          <div>
            <h5>Explore</h5>
            <a href="#" onClick={go('home')}>Home</a>
            <a href="#" onClick={go('services')}>Services</a>
            <a href="#" onClick={go('who-we-help')}>Who We Help</a>
            <a href="#" onClick={go('why-certified')}>Why Get Certified</a>
            <a href="#" onClick={go('what-is-iso')}>What is ISO?</a>
          </div>
          <div>
            <h5>Legal</h5>
            <a href="#" onClick={go('terms')}>Terms of Use</a>
            <a href="#" onClick={go('privacy-policy')}>Privacy Policy</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Keuer Solutions Pty Ltd</div>
          <div>Design System · Built for the web</div>
        </div>
        <div style={{ marginTop: 18, paddingTop: 18, borderTop: '1px solid #1A1A1A', fontSize: 12, lineHeight: 1.5, color: '#707070', maxWidth: 720 }}>
          Keuer Solutions is an independent HSEQ consultancy. ISO certification is issued by JAS-ANZ accredited certification bodies, not by Keuer Solutions.
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {
  Logo, Button, Nav, Hero, PageHero, SectionHead, ImagePlaceholder, Icon,
  IndustryTile, ServiceCard, Step, CTABand, ContactForm, Footer,
  ProofBar, FounderBlock, LeadMagnet, RiskReversal, StickyCTA,
});