// CRM Wall, Process, Case Study
function CRMWall() {
  const crms = [
    { name: 'SimPro', file: 'simpro.png' },
    { name: 'ServiceM8', file: 'servicem8.png' },
    { name: 'Tradify', file: 'tradify.png' },
    { name: 'AroFlo', file: 'aroflo.png' },
    { name: 'Fergus', file: 'fergus.png' },
    { name: 'HubSpot', file: 'hubspot.png' },
    { name: 'Xero', file: 'xero.png' },
    { name: 'MYOB', file: 'myob.png' },
    { name: 'Jobber', file: 'jobber.png' }
  ];
  const loop = [...crms, ...crms];
  return (
    <section className="section section-ivory crm-section">
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ justifyContent: 'center' }}>Integrations</div>
          <h3 className="display-h3">Works with the job management software <span className="accent-italic accent-sun">you already run.</span></h3>
          <p style={{ color: 'var(--fg3)', fontSize: 13, marginTop: 14, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>If it has an API, we can talk to it</p>
        </div>
        <div className="crm-rail" aria-label="CRM integrations">
          <div className="crm-track">
            {loop.map((c, i) => (
              <div key={i} className="crm-logo" title={c.name}>
                <img src={`assets/logos/${c.file}?v=2`} alt={c.name} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) e.target.classList.add('reveal-in'); });
    }, { threshold: 0.3 });
    ref.current?.querySelectorAll('.process-step').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
  const steps = [
    ['Audit','A 45-min call. We map where leads enter, where time leaks, and what your tools can already do. You get the map whether we build or not.','Week 1', 'Free'],
    ['Design','One page of plain-English flows. No jargon, no architecture diagrams. You sign off before a single wire is run.','Week 1–2', 'Fixed price'],
    ['Build','Custom-built, wired into the CRM you already use. Tested against your real jobs, not generic demos. Rolled out one flow at a time.','Week 2–4', 'Live in weeks'],
    ['Run & support','We host it, we monitor it, we fix it. Monthly retainer covers tweaks, new flows, CRM changes — we stay in your corner.','Week 4 →', 'Ongoing']
  ];
  return (
    <section className="section section-ivory" id="process" ref={ref}>
      <div className="container">
        <div className="eyebrow">How we work</div>
        <h2 className="display-h2">Built around <span className="accent-italic accent-sun">your week,</span> not ours.</h2>
        <p className="lead">Four clear steps. Fixed price after the audit. No mystery-meat invoices, no "discovery phases" that eat a month.</p>
        <div className="process-grid">
          {steps.map(([t, d, w, tag], i) => (
            <div key={t} className="process-step">
              <div className="pnum">0{i+1} / 04</div>
              <h4>{t}</h4>
              <p>{d}</p>
              <div className="pwhen">{w} · <b>{tag}</b></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudy() {
  const flow = [
    ['01 · TRIGGER','Website form webhook'],
    ['02 · ROUTE','NorthEdge server'],
    ['03 · CLASSIFY','Auto-quote vs human-review'],
    ['04 · CUSTOMER','Lookup · create (SimPro)'],
    ['05 · SITE','Lookup · create (SimPro)'],
    ['06 · PRICE','Line items scaled + priced'],
    ['07 · CRM','Line items pushed to SimPro'],
    ['08 · NOTIFY','Reception → awaiting approval']
  ];
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setStep(s => (s + 1) % (flow.length + 2)), 900);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section section-navy" id="case">
      <div className="container">
        <div className="case-body">
          <div>
            <div className="eyebrow">Case study · Cairns Fencing</div>
            <h2 className="display-h2" style={{ marginBottom: 14 }}>From 3-hour quotes <span className="accent-italic accent-sun">to 43 seconds.</span></h2>
            <p className="case-sub" style={{ marginBottom: 40 }}>Custom quoting bot · SimPro deep-integration</p>

            <blockquote className="case-quote">
              We're approving more quotes faster than ever. Having the speed of in-depth quotes land straight on our CRM has made a huge difference in won jobs — speed is key.
            </blockquote>
            <div className="case-attr">
              <div className="avatar">HJ</div>
              <div>
                <b>Hamish Jenkins</b>
                <div className="role">General Manager · Cairns Fencing</div>
              </div>
            </div>

            <div className="case-kpis">
              <div className="case-kpi">
                <div className="big">43<span className="u">sec</span></div>
                <div className="lbl">Avg quote build time<br/>(was 1–3 hrs)</div>
              </div>
              <div className="case-kpi">
                <div className="big">24<span className="u">/7</span></div>
                <div className="lbl">Quotes built<br/>— even at 2am Sunday</div>
              </div>
            </div>
          </div>

          <div className="flow">
            <div className="flow-head">
              <span>Quoting bot · live trace</span>
              <span><b>43s</b> end-to-end</span>
            </div>
            <div className="flow-body">
              {flow.map(([n, l], i) => {
                const cls = i < step ? 'done' : i === step ? 'live' : '';
                return (
                  <React.Fragment key={n}>
                    <div className={`flow-step ${cls}`}>
                      <span className="n">{n}</span>
                      <span className="label">{l}</span>
                      <span className="check">{i < step ? '✓' : i === step ? '●' : '○'}</span>
                    </div>
                    {i < flow.length - 1 && <div className="flow-arrow">↓</div>}
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CRMWall, Process, CaseStudy });