// Site sections — trust strip, services, pillars, process, CTA, footer.

// ─────────────────────────────────────────────────────────────────────────
// Trust strip
// ─────────────────────────────────────────────────────────────────────────
function TrustStrip() {
  const isMobile = window.useIsMobile ? useIsMobile() : false;
  // Brand-evocative wordmark approximations. Each uses font weight + tracking
  // + a muted brand-aligned color to nod toward the company's real logo
  // without literally reproducing it. Colors are picked to sit on both bone
  // (light) and ink (dark) backgrounds.
  const logos = [
  // Grill'd — heavy rounded warm-red, lowercase, signature apostrophe accent
  {
    key: 'grilld',
    name: <>grill<span style={{ color: '#c2611f' }}>’</span>d</>,
    style: {
      fontWeight: 900, letterSpacing: '-0.045em', fontSize: 22,
      color: '#a83a2a', textTransform: 'lowercase'
    }
  },
  // Kokoblack — minimal lowercase sans, wide tracking, light weight
  {
    key: 'kokoblack',
    name: 'kokoblack',
    style: {
      fontWeight: 400, letterSpacing: '0.12em', fontSize: 14,
      textTransform: 'lowercase'
    }
  },
  // WSP — heavy uppercase red
  {
    key: 'wsp',
    name: 'WSP',
    style: {
      fontWeight: 900, letterSpacing: '-0.02em', fontSize: 24,
      color: '#d6261d'
    }
  },
  // AHPRA — clean uppercase, regulatory navy, wide tracking
  {
    key: 'ahpra',
    name: 'AHPRA',
    style: {
      fontWeight: 600, letterSpacing: '0.18em', fontSize: 15,
      color: '#2a6b8e'
    }
  },
  // UNOPS — clean uppercase UN-blue
  {
    key: 'unops',
    name: 'UNOPS',
    style: {
      fontWeight: 700, letterSpacing: '0.08em', fontSize: 17,
      color: '#5b92e5'
    }
  },
  // Genus — modern minimal sans, capitalised
  {
    key: 'genus',
    name: 'Genus',
    style: {
      fontWeight: 500, letterSpacing: '0.02em', fontSize: 18
    }
  }];

  return (
    <section style={{ background: 'var(--bg-alt)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{
        padding: isMobile ? '22px 20px' : '28px 32px',
        display: 'flex', alignItems: isMobile ? 'flex-start' : 'center',
        gap: isMobile ? 14 : 32,
        flexDirection: isMobile ? 'column' : 'row'
      }}>
        <span className="mono" style={{
          fontSize: 11, color: 'var(--fg-muted)', letterSpacing: '0.18em',
          textTransform: 'uppercase', whiteSpace: 'nowrap'
        }}>
          trusted by teams globally
        </span>
        <div style={{
          flex: 1, width: '100%',
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(3, 1fr)' : `repeat(${logos.length}, 1fr)`,
          gap: isMobile ? 14 : 24,
          alignItems: 'center'
        }}>
          {logos.map((l) =>
          <span key={l.key} style={{
            fontFamily: '"Hanken Grotesk", sans-serif',
            color: 'var(--fg-muted)', textAlign: 'center',
            opacity: 0.88, lineHeight: 1,
            ...l.style
          }}>{l.name}</span>
          )}
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────
// Services grid
// ─────────────────────────────────────────────────────────────────────────
const SERVICES = [
{
  n: '01',
  name: 'Order to Cash',
  sub: 'Getting paid faster.',
  desc: 'Quote, contract, invoice, collect. AI on the credit checks and automated chasing so revenue lands faster with less manual follow-up.',
  proof: 'avg 12 days off DSO'
},
{
  n: '02',
  name: 'Procure to Pay',
  sub: 'Paying suppliers without the paper chase.',
  desc: 'Requisition to paid invoice. Intelligent matching, approvals, and supplier onboarding — fewer errors, faster cycles, better supplier relationships.',
  proof: '85% touchless invoicing'
},
{
  n: '03',
  name: 'Lead to Customer',
  sub: 'Turning enquiries into customers.',
  desc: 'Inbound enquiry to closed deal. AI qualifies, routes, and nurtures so sales only spends time on opportunities ready to talk.',
  proof: '60% time saved on lead triage'
},
{
  n: '04',
  name: 'Hire to Retire',
  sub: 'Hiring and managing your team.',
  desc: 'Job brief to onboarded team member to managed performance. Screening, admin, and people-data workflows automated end-to-end.',
  proof: 'screening cut from days to hours'
},
{
  n: '05',
  name: 'Record to Report',
  sub: 'Closing the books, faster.',
  desc: 'Close, consolidate, report. AI drafts the variance commentary and board-pack narrative so finance ships in days, not weeks.',
  proof: 'close 3 days faster, no overtime'
},
{
  n: '06',
  name: 'Service to Resolution',
  sub: 'Answering customers 24/7.',
  desc: 'Customer queries triaged, answered, or escalated 24/7 by AI on your knowledge base — humans only on what genuinely needs them.',
  proof: 'first response in 47s, 24/7'
}];


function Services() {
  const isMobile = window.useIsMobile ? useIsMobile() : false;
  return (
    <section id="services" style={{ background: 'var(--bg)' }}>
      <div className="container" style={{ padding: isMobile ? '64px 20px' : '96px 32px' }}>
        <FadeUp from="left">
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr',
            gap: isMobile ? 18 : 56,
            alignItems: 'end',
            marginBottom: isMobile ? 32 : 48
          }}>
            <div>
              <SectionLabel accent="01">What we do</SectionLabel>
              <h2 style={{
                fontSize: 'clamp(34px, 6vw, 56px)',
                fontWeight: 800, letterSpacing: '-0.035em',
                lineHeight: 1.02, margin: '20px 0 0', textWrap: 'balance'
              }}>
                Understanding Business Flows;{isMobile ? ' ' : <br />}Solving Business Pain
              </h2>
            </div>
            <p style={{
              fontSize: isMobile ? 16 : 17, lineHeight: 1.55,
              color: 'var(--fg-muted)', maxWidth: 560, margin: 0, textWrap: 'pretty'
            }}>All engagements, regardless of your business size begins with understanding your business flows and pain points. Then we collaboratively design and build solutions and break these down into agreed deliverables. Where it makes sense to do so, we use AI tools to improve our delivery times and implement AI as part of the solution for your business.

            </p>
          </div>
        </FadeUp>

        <AudienceStrip mobile={isMobile} />

        <QuickWinsPromo mobile={isMobile} />

        <FadeUp delay={80}>
          <a href="services.html" className="hf-lift" style={{
            display: 'block', textDecoration: 'none',
            padding: isMobile ? '22px 22px' : '26px 28px',
            borderTop: '1px solid var(--line)',
            borderBottom: '1px solid var(--line)',
            background: 'var(--paper)',
            marginTop: isMobile ? 24 : 32
          }}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr auto',
              gap: isMobile ? 14 : 24,
              alignItems: 'center'
            }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ember)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                  // six core business flows
                </div>
                <div style={{
                  fontSize: isMobile ? 16 : 18, lineHeight: 1.5,
                  color: 'var(--ink)', marginTop: 8, fontWeight: 500, textWrap: 'pretty'
                }}>
                  {SERVICES.map((s, i) =>
                  <React.Fragment key={s.n}>
                      {i > 0 && <span style={{ color: 'var(--fg-muted)', margin: '0 6px' }}>·</span>}
                      <span>{s.name}</span>
                    </React.Fragment>
                  )}
                </div>
              </div>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap' }}>
                Explore each flow <Arrow />
              </span>
            </div>
          </a>
        </FadeUp>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────
// Audience strip — "same approach, scaled to your stage". Reassures small
// businesses they're not too small, and enterprises they're not too big.
// ─────────────────────────────────────────────────────────────────────────
function AudienceStrip({ mobile }) {
  const stages = [
  {
    k: 'Sole trader / founder',
    v: 'Start with Quick Wins — one pain point, done in usually 2 weeks.'
  },
  {
    k: 'Growing team (5–50)',
    v: 'Pick the flow that hurts most. We map it, automate it, hand it back to your team.'
  },
  {
    k: 'Established business (50+)',
    v: 'Full transformation broken down into agreed periodic deliverables.'
  }];

  return (
    <FadeUp delay={40}>
      <div style={{
        marginBottom: mobile ? 28 : 36,
        padding: mobile ? '20px 22px' : '24px 28px',
        background: 'var(--bg-subtle)',
        border: '1px solid var(--line-soft)',
        borderRadius: 14,
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '0.7fr 2.3fr',
        gap: mobile ? 18 : 32,
        alignItems: 'center'
      }}>
        <div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ember)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
            // scales to your stage
          </div>
          <div style={{ fontSize: mobile ? 18 : 20, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 6, textWrap: 'balance' }}>
            Same approach.<br />Right-sized to you.
          </div>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
          gap: mobile ? 14 : 18
        }}>
          {stages.map((s) =>
          <div key={s.k} style={{
            padding: mobile ? '0' : '0 0 0 18px',
            borderLeft: mobile ? 'none' : '1px solid var(--line)',
            display: 'flex', flexDirection: 'column', gap: 6
          }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-muted)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{s.k}</div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--fg)', textWrap: 'pretty' }}>{s.v}</div>
            </div>
          )}
        </div>
      </div>
    </FadeUp>);

}

// ─────────────────────────────────────────────────────────────────────────
// Quick Wins promo — the on-ramp for sole traders and very small teams.
// Fixed price, fixed scope, 2 weeks, one win.
// ─────────────────────────────────────────────────────────────────────────
function QuickWinsPromo({ mobile }) {
  return (
    <FadeUp delay={120}>
      <a href="services.html#quickwins" style={{
        display: 'block', textDecoration: 'none',
        marginTop: mobile ? 28 : 40,
        position: 'relative',
        background: 'linear-gradient(135deg, var(--ink) 0%, #2a1d12 100%)',
        color: 'var(--bone)',
        borderRadius: 16,
        padding: mobile ? '28px 24px' : '36px 40px',
        overflow: 'hidden'
      }} className="hf-lift">
        <div aria-hidden="true" style={{
          position: 'absolute',
          top: '-40%', right: '-10%',
          width: 380, height: 380,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(194,97,31,0.35) 0%, rgba(194,97,31,0) 65%)',
          pointerEvents: 'none'
        }} />
        <div style={{
          position: 'relative',
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr',
          gap: mobile ? 24 : 48,
          alignItems: 'center'
        }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ember)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              // start small · ship a win in 2 weeks
            </div>
            <h3 style={{
              fontSize: mobile ? 28 : 36, fontWeight: 800, letterSpacing: '-0.03em',
              lineHeight: 1.05, margin: '14px 0 0', textWrap: 'balance',
              color: 'var(--bone)'
            }}>
              Quick Wins <span style={{ color: 'var(--ember)' }}></span>
            </h3>
            <p style={{ fontSize: mobile ? 15 : 16, lineHeight: 1.55, color: 'rgba(243,238,228,0.75)', margin: '12px 0 0', maxWidth: 520, textWrap: 'pretty' }}>Pick the one thing eating your time. We scope it, build it, install it, train you in. The fastest way to feel what working with HyperFocusOZ can actually do for your business.

            </p>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 14
          }}>
            <QWFact k="duration" v="defined in scope — typically 2 weeks or less" />
            <QWFact k="pricing starting from" v="$2,195 inc GST" featured />
            <QWFact k="outcome" v="one win, live in your business" />
            <QWFact k="includes" v="scoping · build · install · training" />
          </div>
        </div>
        <div style={{
          position: 'relative',
          marginTop: mobile ? 22 : 28,
          paddingTop: mobile ? 20 : 24,
          borderTop: '1px solid rgba(243,238,228,0.12)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 12, flexWrap: 'wrap'
        }}>
          <span className="mono" style={{ fontSize: 11, color: 'rgba(243,238,228,0.6)', letterSpacing: '0.06em' }}>
            examples: website + email · ecommerce · invoice chasing · inbox triage
          </span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 14, fontWeight: 600, color: 'var(--bone)'
          }}>
            See what's included <Arrow color="var(--bone)" />
          </span>
        </div>
      </a>
    </FadeUp>);

}

function QWFact({ k, v, featured }) {
  return (
    <div style={{
      padding: '12px 14px',
      background: featured ? 'rgba(194,97,31,0.18)' : 'rgba(243,238,228,0.05)',
      border: featured ? '1px solid rgba(194,97,31,0.45)' : '1px solid rgba(243,238,228,0.10)',
      borderRadius: 10
    }}>
      <div className="mono" style={{ fontSize: 9, color: featured ? 'var(--ember)' : 'rgba(243,238,228,0.55)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{k}</div>
      <div style={{ fontSize: featured ? 18 : 13, fontWeight: featured ? 800 : 600, color: 'var(--bone)', marginTop: 4, lineHeight: 1.25, letterSpacing: featured ? '-0.02em' : 'normal' }}>{v}</div>
    </div>);

}

function ServiceCard({ n, name, sub, desc, proof, mobile }) {
  return (
    <article className="hf-lift" style={{
      padding: mobile ? '22px 0' : '28px 28px 28px',
      borderRight: mobile ? 'none' : '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      background: 'transparent',
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: mobile ? 0 : 240,
      position: 'relative',
      cursor: 'pointer'
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-muted)', letterSpacing: '0.14em' }}>{n}</span>
        <Arrow size={16} color="var(--fg-muted)" />
      </div>
      <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', margin: 0 }}>
        {name}
        {sub && <span style={{ display: 'block', fontSize: 13, fontWeight: 500, color: 'var(--ember)', letterSpacing: '-0.005em', marginTop: 4 }}>{sub}</span>}
      </h3>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0, flex: 1, textWrap: 'pretty' }}>{desc}</p>
      <div style={{
        marginTop: 4, paddingTop: 12, borderTop: '1px dashed var(--line)',
        display: 'flex', alignItems: 'center', gap: 8
      }}>
        <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--ember)' }} />
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg)', letterSpacing: '0.02em' }}>{proof}</span>
      </div>
    </article>);

}

// ─────────────────────────────────────────────────────────────────────────
// Built-for-outcomes pillars + receipts
// ─────────────────────────────────────────────────────────────────────────
function Pillars() {
  const isMobile = window.useIsMobile ? useIsMobile() : false;
  const items = [
  { t: 'Business-first thinking.', d: 'Project leads come from business backgrounds too — they translate objectives into outcomes.' },
  { t: 'Measurable success.', d: 'Every project has clear success criteria up front, tied to the business case.' },
  { t: 'Right-sized engagements.', d: 'Tailored to your stage — from founders to enterprise teams.' },
  { t: 'No lock-in', d: 'Clean code, documented systems, support plans available if you want them.' }];

  const receipts = [
  { k: '20+ yrs', v: 'per project lead' },
  { k: '1:1', v: 'same lead, end-to-end' },
  { k: 'weekly', v: 'Break down big problems into workable periodic deliverables' },
  { k: '100%', v: 'docs + code handed over' }];

  return (
    <section id="approach" style={{ background: 'var(--bg-inverted)', color: 'var(--fg-on-inverted)' }}>
      <div className="container" style={{ padding: isMobile ? '64px 20px' : '96px 32px' }}>
        <FadeUp from="left">
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1.2fr',
            gap: isMobile ? 36 : 64
          }}>
          <div>
            <div className="eyebrow" style={{ color: 'rgba(243,238,228,0.6)' }}>
              <span style={{ color: 'var(--ember)' }}>02</span> &nbsp;&nbsp; Built for outcomes
            </div>
            <h2 style={{
                fontSize: 'clamp(34px, 6vw, 56px)',
                fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.02,
                margin: '20px 0 0', textWrap: 'balance'
              }}>
              Senior engineers. Modern tools. <span style={{ color: 'var(--ember)' }}>Real transformation.</span>
            </h2>
            <p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.6, color: 'rgba(243,238,228,0.7)', margin: '20px 0 0', maxWidth: 460, textWrap: 'pretty' }}>Every HyperFocusOZ project lead has built systems and run businesses.
AI and automation are the levers we pull; your objectives are what we measure against.
              </p>

            <div style={{ marginTop: isMobile ? 28 : 36, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'rgba(243,238,228,0.10)' }}>
              {receipts.map((r) =>
                <div key={r.k} style={{ background: 'var(--bg-inverted)', padding: isMobile ? '16px 18px' : '20px 22px' }}>
                  <div style={{ fontSize: isMobile ? 24 : 28, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--fg-on-inverted)' }}>{r.k}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'rgba(243,238,228,0.55)', letterSpacing: '0.08em', marginTop: 4 }}>{r.v}</div>
                </div>
                )}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, paddingTop: isMobile ? 0 : 36 }}>
            {items.map((it, i) =>
              <div key={i} style={{
                background: 'rgba(243,238,228,0.04)',
                border: '1px solid rgba(243,238,228,0.10)',
                borderRadius: 14, padding: isMobile ? '18px 20px' : '22px 24px',
                display: 'flex', gap: 18, alignItems: 'flex-start'
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 999, background: 'var(--ember)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, color: '#fff', fontSize: 13, flex: '0 0 32px'
                }}>{String(i + 1).padStart(2, '0')}</div>
                <div>
                  <div style={{ fontSize: isMobile ? 16 : 18, fontWeight: 700, letterSpacing: '-0.015em', color: 'var(--fg-on-inverted)' }}>{it.t}</div>
                  <div style={{ fontSize: 14, color: 'rgba(243,238,228,0.7)', marginTop: 4, lineHeight: 1.5 }}>{it.d}</div>
                </div>
              </div>
              )}
          </div>
        </div>
        </FadeUp>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────
// Process — 4 steps
// ─────────────────────────────────────────────────────────────────────────
function Process() {
  const isMobile = window.useIsMobile ? useIsMobile() : false;
  const steps = [
  { n: '01', title: 'Discovery call', meta: '30 minutes · no charge', blurb: 'A conversation about your goals, constraints, and stack.' },
  { n: '02', title: 'Scoped proposal', meta: 'outcomes · timeline · price', blurb: 'A written plan with success criteria and pricing.' },
  { n: '03', title: 'Iterative delivery', meta: 'working software to showcase, weekly', blurb: 'We provide constant showcases so there are no surprises at the end.' },
  { n: '04', title: 'Handover & support', meta: 'documented · owned by you', blurb: 'Handover call documentation comes standard. Optional ongoing support if you want us.' }];

  return (
    <section id="process" style={{ background: 'var(--bg)', borderTop: '1px solid var(--line)' }}>
      <div className="container" style={{ padding: isMobile ? '64px 20px 24px' : '96px 32px 48px' }}>
        <FadeUp from="right">
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr',
            gap: isMobile ? 18 : 56,
            alignItems: 'end',
            marginBottom: isMobile ? 36 : 56
          }}>
            <div>
              <SectionLabel accent="03">How we engage</SectionLabel>
              <h2 style={{
                fontSize: 'clamp(34px, 6vw, 56px)',
                fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.02,
                margin: '20px 0 0', textWrap: 'balance'
              }}>
                A simple, four-step path {isMobile ? '' : <br />}from idea to live.
              </h2>
            </div>
            <p style={{ fontSize: isMobile ? 16 : 17, lineHeight: 1.55, color: 'var(--fg-muted)', maxWidth: 560, margin: 0, textWrap: 'pretty' }}>You'll know exactly what you're getting and what comes next at every stage.

            </p>
          </div>
        </FadeUp>

        {/* Step diagram — 4 columns desktop, vertical timeline mobile */}
        <div style={{ position: 'relative' }}>
          {/* Connecting line — horizontal on desktop, vertical on mobile */}
          {!isMobile ?
          <div style={{
            position: 'absolute', top: 28, left: '12%', right: '12%', height: 2,
            background: 'repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px)',
            zIndex: 0
          }} /> :

          <div style={{
            position: 'absolute', top: 24, bottom: 24, left: 27, width: 2,
            background: 'repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px)',
            zIndex: 0
          }} />
          }
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
            gap: isMobile ? 28 : 24, position: 'relative', zIndex: 1
          }}>
            {steps.map((s, i) =>
            <FadeUp key={s.n} delay={i * 90}>
                <div style={{
                display: 'flex',
                flexDirection: isMobile ? 'row' : 'column',
                gap: isMobile ? 16 : 14,
                alignItems: isMobile ? 'flex-start' : 'stretch'
              }}>
                  <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: 'var(--bg-elevated)', border: '1px solid var(--line)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, letterSpacing: '-0.02em', fontSize: 18,
                  position: 'relative', flex: '0 0 56px'
                }}>
                    {s.n}
                    <span className="hf-pulse" style={{
                    position: 'absolute', bottom: -3, right: -3,
                    width: 12, height: 12, borderRadius: '50%', background: 'var(--ember)',
                    border: '2px solid var(--bg)'
                  }} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: isMobile ? 18 : 20, fontWeight: 700, letterSpacing: '-0.02em' }}>{s.title}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--ember)', letterSpacing: '0.06em', marginTop: 4 }}>{s.meta}</div>
                    <p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--fg-muted)', margin: '8px 0 0', textWrap: 'pretty' }}>{s.blurb}</p>
                  </div>
                </div>
              </FadeUp>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ─────────────────────────────────────────────────────────────────────────
// Final CTA
// ─────────────────────────────────────────────────────────────────────────
function FinalCTA() {
  const isMobile = window.useIsMobile ? useIsMobile() : false;
  return (
    <section id="contact" style={{ background: 'var(--ember)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute',
        top: isMobile ? -180 : -240,
        right: isMobile ? -160 : -160,
        width: isMobile ? 480 : 640,
        height: isMobile ? 480 : 640,
        borderRadius: '50%', background: '#fff', opacity: 0.08, pointerEvents: 'none'
      }} />
      <div className="container" style={{ padding: isMobile ? '64px 20px' : '96px 32px', position: 'relative' }}>
        <FadeUp from="left">
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr',
            gap: isMobile ? 36 : 56,
            alignItems: 'center'
          }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.8 }}>
                // accepting Q3 engagements
              </div>
              <h2 style={{
                fontSize: 'clamp(36px, 7vw, 64px)',
                fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.0,
                margin: '20px 0 0', textWrap: 'balance'
              }}>
                Have a problem worth solving?
              </h2>
              <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.55, margin: '20px 0 0', maxWidth: 560, opacity: 0.92, textWrap: 'pretty' }}>

              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
                <Btn className="hf-btn" size="lg" variant="onDark" as="a" href="contact.html">Start the conversation <Arrow /></Btn>
                <Btn className="hf-btn" size="lg" variant="ghost" as="a" href="#book" data-booking="discovery" style={{ borderColor: 'rgba(255,255,255,0.4)', color: '#fff' }}>Book a call</Btn>
              </div>
            </div>

            {/* Mini contact card */}
            <div style={{
              background: 'rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.25)',
              backdropFilter: 'blur(10px)',
              borderRadius: 14, padding: isMobile ? 22 : 28
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.8 }}>quick details</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 18 }}>
                <CTARow k="response" v="usually within 1 business day" />
                <CTARow k="format" v="30-min discovery call · no charge" />
                <CTARow k="based" v="Australia · projects worldwide" />
                <CTARow k="from" v="hello@hyperfocusoz.com" />
              </div>
            </div>
          </div>
        </FadeUp>
      </div>
    </section>);

}

function CTARow({ k, v }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 12, borderBottom: '1px dashed rgba(255,255,255,0.25)' }}>
      <span className="mono" style={{ fontSize: 11, opacity: 0.7, letterSpacing: '0.1em', textTransform: 'uppercase', minWidth: 80 }}>{k}</span>
      <span style={{ fontSize: 14, fontWeight: 500, flex: 1 }}>{v}</span>
    </div>);

}

// ─────────────────────────────────────────────────────────────────────────
// Footer lives in site-shell.jsx (shared across pages).
// ─────────────────────────────────────────────────────────────────────────

Object.assign(window, { TrustStrip, Services, Pillars, Process, FinalCTA });