/* ============================================================
   Contact page — AusMotion Robotics
   Structure: Hero · Routing tiles · Form + Direct contacts ·
   Offices · Response expectations · Map · FAQ · Emergency CTA
   ============================================================ */

const CONTACT = {
  breadcrumb: ['Home', 'Contact'],
  hero: {
    eyebrow: 'Contact',
    h1: 'Talk to a person who knows the equipment.',
    lede: "Every inquiry is read by an AusMotion engineer or commercial lead — not a chatbot, not a routing queue. Tell us what you're working on and we'll come back within one business day.",
  },
  routes: [
    { id: 'demo', tag: 'Most common', t: 'Book a demo or pilot', b: 'See a robot run on your site, or in our Perth or Brisbane workshop. Best if you have a defined use case in mind.', cta: 'Open form', icon: 'Sparkles' },
    { id: 'quote', t: 'Get a quote', b: 'Rental, purchase, or localization pricing for a specific platform and scope. Quotes typically returned in 5 business days.', cta: 'Open form', icon: 'Package' },
    { id: 'support', t: 'Operational support', b: 'Existing customer with an active deployment. Routes to your assigned support engineer, not the front desk.', cta: 'Support portal', icon: 'Wrench' },
    { id: 'partner', t: 'Partnerships & OEM', b: "Manufacturer, integrator, or distributor exploring an Australian partnership. Routes to commercial leadership.", cta: 'Open form', icon: 'Compass' },
    { id: 'press', t: 'Press & analyst', b: 'Media, industry analysts, and conference programmers. Briefings and product imagery available under embargo.', cta: 'Press contact', icon: 'Mail' },
    { id: 'careers', t: 'Careers', b: 'Most hires come through introduction. We respond to all credible inquiries even when no role is posted.', cta: 'contact@ausmotion.com.au', icon: 'Heart' },
  ],
  direct: [
    { label: 'General', email: 'contact@ausmotion.com.au', phone: '+61 46805588', hours: 'Mon–Fri, 8am–6pm AWST' },
    { label: 'Sales', email: 'contact@ausmotion.com.au', phone: '+61 46805588', hours: 'Mon–Fri, 8am–6pm local' },
    { label: 'Support (existing customers)', email: 'contact@ausmotion.com.au', phone: '+61 46805588', hours: '24/7 on contracted SLAs' },
    { label: 'Press & analyst', email: 'contact@ausmotion.com.au', phone: '+61 46805588', hours: 'Mon–Fri, 9am–5pm AWST' },
  ],
  offices: [
    {
      city: 'Perth',
      role: 'Headquarters',
      addr: ['Level 4, 30 Murray Street', 'Perth WA 6000'],
      phone: '+61 46805588',
      email: 'contact@ausmotion.com.au',
      hours: 'Mon–Fri, 8am–6pm AWST',
      detail: 'Engineering, commercial, compliance. Demo workshop on the lower floor — book ahead.',
    },
    {
      city: 'Kalgoorlie',
      role: 'Regional service hub',
      addr: ['12 Bourke Street', 'Kalgoorlie WA 6430'],
      phone: '+61 46805588',
      email: 'contact@ausmotion.com.au',
      hours: 'Mon–Fri, 7am–5pm AWST',
      detail: 'Field engineering and spares for Goldfields and inland WA operations.',
    },
    {
      city: 'Brisbane',
      role: 'East-coast office',
      addr: ['Level 8, 100 Eagle Street', 'Brisbane QLD 4000'],
      phone: '+61 46805588',
      email: 'contact@ausmotion.com.au',
      hours: 'Mon–Fri, 8am–6pm AEST',
      detail: 'Commercial and field engineering for QLD, NSW, Defence programs.',
    },
  ],
  expectations: [
    { metric: '< 1', unit: 'business day', label: 'Response on every inquiry' },
    { metric: '5', unit: 'business days', label: 'Formal quote turnaround' },
    { metric: '24/7', unit: '', label: 'Support for active deployments' },
    { metric: '100%', unit: '', label: 'Inquiries read by humans' },
  ],
  faq: [
    { q: 'How quickly will I hear back?', a: 'Within one Australian business day on every form submission. Most demo and quote requests get a response within four hours during business hours.' },
    { q: 'Do you do video calls or only on-site visits?', a: 'Both. The first conversation is usually a 30-minute video call to scope. On-site demos and assessments come after — paid for assessments tied to localization, free for rental and purchase scoping.' },
    { q: 'I am outside Australia. Will you talk to us?', a: 'Yes — particularly OEMs and integrators looking at Australian market entry. Route via contact@ausmotion.com.au.' },
    { q: 'Can I just call?', a: 'Yes. +61 46805588 reaches our front desk in Perth. Out of hours, leave a message — we do return them.' },
    { q: 'What information should I have ready?', a: 'A rough description of the use case, the site (industry, location, environment), and the target timeframe. We will not ask for budget on the first contact unless you raise it.' },
    { q: 'How do you handle confidential or sensitive inquiries?', a: 'Anything Defence-adjacent or commercially sensitive can be sent to contact@ausmotion.com.au — that mailbox is monitored under our DISP-aligned protocols.' },
  ],
};

/* ----- HERO ----- */
function ContactHero({ data }) {
  return (
    <section data-swap="HERO" data-screen-label="Contact — Hero" style={{ position: 'relative', background: '#0A0F1A', overflow: 'hidden' }}>
      <img src="assets/pattern-topo.svg" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.12, mixBlendMode: 'screen' }}/>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 50% 70% at 80% 30%, rgba(232,117,61,0.18), transparent 60%)' }}/>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 40px 72px', position: 'relative' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 16 }}>{data.hero.eyebrow}</div>
        <h1 className="svc-hero__h1" style={{ fontFamily: 'Inter, system-ui, sans-serif', fontSize: 60, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.05, color: '#fff', margin: 0, maxWidth: 880 }}>{data.hero.h1}</h1>
        <p className="svc-hero__lede" style={{ fontFamily: 'Inter', fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.82)', margin: '24px 0 0', maxWidth: 720 }}>{data.hero.lede}</p>
      </div>
    </section>
  );
}

/* ----- ROUTING TILES ----- */
function Routes({ data, onSelect, current }) {
  return (
    <section data-swap="ROUTES" data-screen-label="Contact — Routing tiles" style={{ background: '#FAFBFC', padding: '80px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>What can we help with?</div>
        <h2 className="svc-h2" style={{ fontFamily: 'Inter', fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#0A0F1A', margin: 0, maxWidth: 720 }}>Pick the door that fits your inquiry.</h2>
        <p style={{ fontFamily: 'Inter', fontSize: 16, color: '#56606E', marginTop: 12, maxWidth: 640 }}>Each route reaches a specific person on our team — not the front desk. Demo and quote requests open the form below; the rest go straight to the right inbox.</p>

        <div className="ct-routes-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 40 }}>
          {data.routes.map(r => {
            const Icon = Icons[r.icon] || Icons.Mail;
            const active = current === r.id;
            return (
              <button key={r.id} onClick={() => onSelect(r.id)} style={{
                textAlign: 'left', cursor: 'pointer', background: active ? '#0A0F1A' : '#fff',
                color: active ? '#fff' : '#0A0F1A',
                border: active ? '1px solid #0A0F1A' : '1px solid #E6EAF0', padding: '28px 26px 30px',
                position: 'relative', transition: 'transform 180ms, border-color 180ms, background 180ms',
              }} onMouseEnter={e => { if (!active) { e.currentTarget.style.borderColor = '#E8753D'; e.currentTarget.style.transform = 'translateY(-2px)'; } }}
                 onMouseLeave={e => { if (!active) { e.currentTarget.style.borderColor = '#E6EAF0'; e.currentTarget.style.transform = 'none'; } }}>
                {r.tag && <div style={{ position: 'absolute', top: 16, right: 16, fontFamily: 'JetBrains Mono', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D', border: '1px solid #E8753D', padding: '3px 6px' }}>{r.tag}</div>}
                <div style={{ width: 40, height: 40, border: active ? '1px solid rgba(255,255,255,0.3)' : '1px solid #E6EAF0', display: 'flex', alignItems: 'center', justifyContent: 'center', color: active ? '#FFB892' : '#E8753D', marginBottom: 16 }}>
                  <Icon size={20}/>
                </div>
                <div style={{ fontFamily: 'Inter', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{r.t}</div>
                <p style={{ fontFamily: 'Inter', fontSize: 14, lineHeight: 1.55, color: active ? 'rgba(255,255,255,0.78)' : '#56606E', margin: '10px 0 18px' }}>{r.b}</p>
                <div style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: active ? '#FFB892' : '#355A78', display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1px solid currentColor', paddingBottom: 2 }}>
                  {r.cta} <Icons.Arrow size={13}/>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ----- FORM + DIRECT CONTACTS ----- */
function FormBlock({ data, route, setRoute }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', company: '', industry: '', message: '', preferred: 'email', urgency: 'standard', consent: false });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const fieldLabel = { fontFamily: 'Inter', fontSize: 12, fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: '#56606E', marginBottom: 6, display: 'block' };
  const fieldInput = { fontFamily: 'Inter', fontSize: 15, color: '#0A0F1A', background: '#fff', border: '1px solid #D2D8E0', padding: '12px 14px', width: '100%', boxSizing: 'border-box', borderRadius: 0, outline: 'none', transition: 'border-color 140ms' };

  return (
    <section data-swap="FORM" data-screen-label="Contact — Form" id="form" style={{ background: '#fff', padding: '96px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="ct-form-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'start' }}>
          {/* FORM */}
          <div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>Send an inquiry</div>
            <h2 className="svc-h2" style={{ fontFamily: 'Inter', fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#0A0F1A', margin: 0 }}>Tell us what you're working on.</h2>
            <p style={{ fontFamily: 'Inter', fontSize: 15.5, color: '#56606E', marginTop: 12, maxWidth: 540 }}>The more context you give, the more useful our first reply will be. Fields marked with an asterisk are required.</p>

            {submitted ? (
              <div style={{ marginTop: 32, padding: '32px 32px', background: '#F3F5F8', border: '1px solid #E6EAF0' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#0A0F1A', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icons.Check size={20}/>
                  </div>
                  <div style={{ fontFamily: 'Inter', fontSize: 18, fontWeight: 600, color: '#0A0F1A' }}>Thanks — we've got it.</div>
                </div>
                <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.6, color: '#3A424D', margin: '0 0 16px' }}>
                  An engineer or commercial lead will be in touch within one Australian business day. If your matter is urgent, call <strong>+61 46805588</strong>.
                </p>
                <button onClick={() => setSubmitted(false)} style={{ fontFamily: 'Inter', fontSize: 13, fontWeight: 600, color: '#355A78', background: 'transparent', border: 'none', cursor: 'pointer', borderBottom: '1px solid currentColor', padding: '0 0 2px' }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 20 }}>
                <div>
                  <label style={fieldLabel}>What is this about? <span style={{ color: '#E8753D' }}>*</span></label>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    {data.routes.filter(r => r.id !== 'support' && r.id !== 'careers').map(r => (
                      <button key={r.id} type="button" onClick={() => setRoute(r.id)} style={{
                        fontFamily: 'Inter', fontSize: 13, fontWeight: 500,
                        padding: '10px 14px', cursor: 'pointer',
                        background: route === r.id ? '#0A0F1A' : '#fff',
                        color: route === r.id ? '#fff' : '#0A0F1A',
                        border: route === r.id ? '1px solid #0A0F1A' : '1px solid #D2D8E0',
                      }}>{r.t}</button>
                    ))}
                  </div>
                </div>

                <div className="ct-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <label style={fieldLabel}>Name <span style={{ color: '#E8753D' }}>*</span></label>
                    <input required value={form.name} onChange={e => set('name', e.target.value)} style={fieldInput} placeholder="Sarah O'Brien"/>
                  </div>
                  <div>
                    <label style={fieldLabel}>Work email <span style={{ color: '#E8753D' }}>*</span></label>
                    <input required type="email" value={form.email} onChange={e => set('email', e.target.value)} style={fieldInput} placeholder="sarah@example.com.au"/>
                  </div>
                </div>

                <div className="ct-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <label style={fieldLabel}>Company / organisation</label>
                    <input value={form.company} onChange={e => set('company', e.target.value)} style={fieldInput} placeholder="Pilbara Iron"/>
                  </div>
                  <div>
                    <label style={fieldLabel}>Industry</label>
                    <select value={form.industry} onChange={e => set('industry', e.target.value)} style={{ ...fieldInput, appearance: 'none', backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2356606E\' stroke-width=\'1.75\'><path d=\'m6 9 6 6 6-6\'/></svg>")', backgroundRepeat: 'no-repeat', backgroundPosition: 'right 12px center', backgroundSize: '16px', paddingRight: 36 }}>
                      <option value="">Select…</option>
                      <option>Mining & search</option>
                      <option>Hospitality</option>
                      <option>Commercial cleaning</option>
                      <option>Perimeter patrol</option>
                      <option>Coastal surveillance</option>
                      <option>Aged care</option>
                      <option>Defence / government</option>
                      <option>Other</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label style={fieldLabel}>What are you trying to do? <span style={{ color: '#E8753D' }}>*</span></label>
                  <textarea required value={form.message} onChange={e => set('message', e.target.value)} rows={6} style={{ ...fieldInput, resize: 'vertical', minHeight: 140, fontFamily: 'Inter' }} placeholder="A rough description of the use case, the site, and the timeframe is enough for a first conversation."/>
                </div>

                <div className="ct-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div>
                    <label style={fieldLabel}>Preferred contact</label>
                    <div style={{ display: 'flex', gap: 0, border: '1px solid #D2D8E0' }}>
                      {[['email', 'Email'], ['phone', 'Phone'], ['video', 'Video call']].map(([v, l], i, arr) => (
                        <button type="button" key={v} onClick={() => set('preferred', v)} style={{
                          flex: 1, fontFamily: 'Inter', fontSize: 13, fontWeight: 500, padding: '11px 8px', cursor: 'pointer',
                          background: form.preferred === v ? '#0A0F1A' : '#fff',
                          color: form.preferred === v ? '#fff' : '#0A0F1A',
                          border: 'none', borderRight: i < arr.length - 1 ? '1px solid #D2D8E0' : 'none',
                        }}>{l}</button>
                      ))}
                    </div>
                  </div>
                  <div>
                    <label style={fieldLabel}>Urgency</label>
                    <div style={{ display: 'flex', gap: 0, border: '1px solid #D2D8E0' }}>
                      {[['standard', 'Standard'], ['this-week', 'This week'], ['urgent', 'Urgent']].map(([v, l], i, arr) => (
                        <button type="button" key={v} onClick={() => set('urgency', v)} style={{
                          flex: 1, fontFamily: 'Inter', fontSize: 13, fontWeight: 500, padding: '11px 8px', cursor: 'pointer',
                          background: form.urgency === v ? '#0A0F1A' : '#fff',
                          color: form.urgency === v ? '#fff' : '#0A0F1A',
                          border: 'none', borderRight: i < arr.length - 1 ? '1px solid #D2D8E0' : 'none',
                        }}>{l}</button>
                      ))}
                    </div>
                  </div>
                </div>

                <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer', marginTop: 4 }}>
                  <input type="checkbox" required checked={form.consent} onChange={e => set('consent', e.target.checked)} style={{ marginTop: 3, width: 16, height: 16, accentColor: '#E8753D' }}/>
                  <span style={{ fontFamily: 'Inter', fontSize: 13, lineHeight: 1.55, color: '#56606E' }}>
                    I'm happy for AusMotion to contact me about my inquiry. We don't share details, send marketing without opt-in, or sell data — see <a href="#" style={{ color: '#0A0F1A' }}>Privacy</a>.
                  </span>
                </label>

                <div style={{ marginTop: 12 }}>
                  <Button size="lg" type="submit">Send inquiry</Button>
                  <span style={{ fontFamily: 'Inter', fontSize: 13, color: '#7B8593', marginLeft: 16 }}>Reply within 1 business day</span>
                </div>
              </form>
            )}
          </div>

          {/* DIRECT CONTACTS */}
          <aside style={{ position: 'sticky', top: 96 }}>
            <div style={{ background: '#0A0F1A', color: '#fff', padding: '32px 28px 36px', position: 'relative', overflow: 'hidden' }}>
              <img src="assets/pattern-topo.svg" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.08, mixBlendMode: 'screen' }}/>
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 12 }}>Direct contacts</div>
                <div style={{ fontFamily: 'Inter', fontSize: 22, fontWeight: 600, letterSpacing: '-0.01em', marginBottom: 6 }}>Skip the form.</div>
                <div style={{ fontFamily: 'Inter', fontSize: 14, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55 }}>If you know who you need, here are the direct lines.</div>

                <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 0, borderTop: '1px solid #17294D' }}>
                  {data.direct.map(d => (
                    <div key={d.label} style={{ padding: '18px 0', borderBottom: '1px solid #17294D' }}>
                      <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 8 }}>{d.label}</div>
                      <a href={`mailto:${d.email}`} style={{ fontFamily: 'Inter', fontSize: 14, color: '#FFB892', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                        <Icons.Mail size={13}/> {d.email}
                      </a>
                      {d.phone !== '—' && (
                        <a href={`tel:${d.phone.replace(/\s/g, '')}`} style={{ fontFamily: 'Inter', fontSize: 14, color: 'rgba(255,255,255,0.85)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
                          <Icons.Phone size={13}/> {d.phone}
                        </a>
                      )}
                      <div style={{ fontFamily: 'Inter', fontSize: 12, color: '#7B8593', marginTop: 6 }}>{d.hours}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ----- OFFICES ----- */
function Offices({ data }) {
  return (
    <section data-swap="OFFICES" data-screen-label="Contact — Offices" style={{ background: '#FAFBFC', padding: '96px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>Offices</div>
        <h2 className="svc-h2" style={{ fontFamily: 'Inter', fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#0A0F1A', margin: 0, maxWidth: 640 }}>Visit us, on country.</h2>
        <p style={{ fontFamily: 'Inter', fontSize: 16, color: '#56606E', marginTop: 12, maxWidth: 620 }}>Three offices, three time zones. Demos run from Perth and Brisbane workshops; Kalgoorlie is a service hub, drop-ins by appointment.</p>

        <div className="ct-offices-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 40, border: '1px solid #E6EAF0', background: '#E6EAF0' }}>
          {data.offices.map(o => (
            <div key={o.city} style={{ background: '#fff', padding: '32px 30px 36px', display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 8 }}>{o.role}</div>
              <div style={{ fontFamily: 'Inter', fontSize: 26, fontWeight: 600, letterSpacing: '-0.01em', color: '#0A0F1A', marginBottom: 16 }}>{o.city}</div>
              <div style={{ fontFamily: 'Inter', fontSize: 14, color: '#3A424D', lineHeight: 1.55, marginBottom: 16 }}>
                {o.addr.map((l, i) => <div key={i}>{l}</div>)}
              </div>
              <div style={{ fontFamily: 'Inter', fontSize: 13.5, color: '#56606E', lineHeight: 1.55, marginBottom: 20 }}>{o.detail}</div>
              <div style={{ marginTop: 'auto', borderTop: '1px solid #E6EAF0', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <a href={`tel:${o.phone.replace(/\s/g, '')}`} style={{ fontFamily: 'Inter', fontSize: 13.5, color: '#0A0F1A', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icons.Phone size={13}/> {o.phone}
                </a>
                <a href={`mailto:${o.email}`} style={{ fontFamily: 'Inter', fontSize: 13.5, color: '#355A78', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icons.Mail size={13}/> {o.email}
                </a>
                <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.04em', color: '#7B8593', marginTop: 6 }}>{o.hours}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- EXPECTATIONS ----- */
function Expectations({ data }) {
  return (
    <section data-swap="EXPECTATIONS" data-screen-label="Contact — Expectations" style={{ background: '#0A0F1A', color: '#fff', padding: '80px 40px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#FFB892', marginBottom: 16 }}>What to expect</div>
        <h2 style={{ fontFamily: 'Inter', fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.15, margin: 0, maxWidth: 760 }}>We don't waste your time. Here's what response looks like.</h2>
        <div className="ct-exp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginTop: 40, borderTop: '1px solid #17294D' }}>
          {data.expectations.map((e, i, arr) => (
            <div key={i} style={{ padding: '28px 24px 28px', borderRight: i < arr.length - 1 ? '1px solid #17294D' : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 10 }}>
                <div style={{ fontFamily: 'Inter', fontSize: 44, fontWeight: 300, letterSpacing: '-0.03em', color: '#FFB892' }}>{e.metric}</div>
                {e.unit && <div style={{ fontFamily: 'Inter', fontSize: 14, color: 'rgba(255,255,255,0.65)' }}>{e.unit}</div>}
              </div>
              <div style={{ fontFamily: 'Inter', fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.5 }}>{e.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- FAQ ----- */
function ContactFAQ({ data }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section data-swap="FAQ" data-screen-label="Contact — FAQ" style={{ background: '#fff', padding: '96px 40px', borderBottom: '1px solid #E6EAF0' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto' }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#E8753D', marginBottom: 16 }}>Before you ask</div>
        <h2 className="svc-h2" style={{ fontFamily: 'Inter', fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1.1, color: '#0A0F1A', margin: 0 }}>Things people ask before they hit send.</h2>
        <div style={{ marginTop: 40, borderTop: '1px solid #E6EAF0' }}>
          {data.faq.map((f, i) => (
            <div key={i} style={{ borderBottom: '1px solid #E6EAF0' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%',
                padding: '22px 0', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
                fontFamily: 'Inter', fontSize: 17, fontWeight: 600, color: '#0A0F1A', letterSpacing: '-0.005em',
              }}>
                <span style={{ paddingRight: 24 }}>{f.q}</span>
                <span style={{ flex: '0 0 auto', transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 180ms', fontSize: 22, color: '#E8753D', lineHeight: 1 }}>+</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 24, fontFamily: 'Inter', fontSize: 15.5, lineHeight: 1.65, color: '#3A424D', maxWidth: 760 }}>{f.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- BREADCRUMB ----- */
function Breadcrumb({ items }) {
  return (
    <div className="svc-crumb" style={{ background: '#fff', borderBottom: '1px solid #E6EAF0', padding: '14px 40px', fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {items.map((b, i) => (
          <span key={i}>
            {i < items.length - 1 ? <a href="#" style={{ color: '#7B8593', textDecoration: 'none', borderBottom: '1px dotted #D2D8E0' }}>{b}</a> : <span style={{ color: '#0A0F1A' }}>{b}</span>}
            {i < items.length - 1 ? <span style={{ margin: '0 10px', color: '#D2D8E0' }}>/</span> : null}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ----- PAGE ----- */
function ContactPage() {
  const [route, setRoute] = React.useState('demo');
  const handleSelect = (id) => {
    if (id === 'support') { window.location.hash = '#support'; return; }
    if (id === 'careers') { window.location.href = 'mailto:contact@ausmotion.com.au'; return; }
    if (id === 'press') { window.location.href = 'mailto:contact@ausmotion.com.au'; return; }
    setRoute(id);
    document.getElementById('form')?.scrollIntoView ? null : null; // avoid scrollIntoView per guidance
    const el = document.getElementById('form');
    if (el) window.scrollTo({ top: el.offsetTop - 24, behavior: 'smooth' });
  };
  return (
    <>
      <Nav onRequestDemo={() => handleSelect('demo')} onIndustry={() => {}}/>
      <Breadcrumb items={CONTACT.breadcrumb}/>
      <ContactHero data={CONTACT}/>
      <Routes data={CONTACT} onSelect={handleSelect} current={route}/>
      <FormBlock data={CONTACT} route={route} setRoute={setRoute}/>
      {/* <Offices data={CONTACT}/> */}
      <Expectations data={CONTACT}/>
      <ContactFAQ data={CONTACT}/>
      <Footer/>
    </>
  );
}

window.ContactPage = ContactPage;