// Process (stacking cards), Why us, Instant quote band

const STEPS = [
  { t: 'Map the workflow', wk: 'Week 1', d: 'We review how work flows today: forms, Excel files, chat groups, approvals and reporting habits, with the people who use them every day.', img: '/uploads/process_discover.webp' },
  { t: 'Pick the first win', wk: 'Week 2', d: 'You get a practical roadmap that ranks what to build first: a dashboard, an internal system, a customer portal, an automation or an AI assistant.', img: '/uploads/process_design.webp' },
  { t: 'Build with your team', wk: 'Week 3-8', d: 'We ship working screens, test them with the people who will use them and adjust around real constraints before rollout.', img: '/uploads/process_build.webp' },
  { t: 'Roll out and improve', wk: 'After launch', d: 'Training, handover, support and new modules follow as your team moves more work out of spreadsheets and chat groups.', img: '/uploads/process_scale.webp' },
];

function Process() {
  return (
    <section className="process" id="process" aria-labelledby="process-title">
      <div className="process-head">
        <h2 id="process-title" className="t-display reveal">Live in weeks, not months.</h2>
        <p className="t-lede reveal r-d-1">
          We start with one painful workflow, ship a useful first version, then expand into the next area.
        </p>
      </div>
      <ol className="process-list">
        {STEPS.map((s, i) => (
          <li key={s.t} className="step" style={{ '--i': i }}>
            <article className="step-card">
              <div className="step-copy">
                <div className="step-meta">
                  <span>{String(i + 1).padStart(2, '0')}.</span>
                  <span>{s.wk}</span>
                </div>
                <div>
                  <h3 className="t-h3">{s.t}</h3>
                  <p>{s.d}</p>
                </div>
              </div>
              <div className="step-img"><img src={s.img} alt="" width="1024" height="1024" loading="lazy" /></div>
            </article>
          </li>
        ))}
      </ol>
    </section>
  );
}

function Why() {
  return (
    <section className="why" id="why" aria-labelledby="why-title">
      <div className="split">
        <div className="split-head">
          <p className="eyebrow reveal">Why teams call us</p>
          <h2 id="why-title" className="t-display reveal r-d-1" style={{ marginTop: 20 }}>Small team. Rapid build.</h2>
          <p className="t-lede reveal r-d-2">
            Senior software builders working directly with owners, managers and the people who will use the system. The person who scopes your project stays close to the build.
          </p>
        </div>
        <div className="why-cards">
          <div className="why-card reveal">
            <div className="why-row">
              <span className="why-stat">4-8<small>wks</small></span>
              <span className="why-bar"><span /> first system live</span>
            </div>
            <p>Typical time from kickoff to a working first system in your team's hands.</p>
          </div>
          <div className="why-card reveal">
            <div className="why-row">
              <span className="why-stat">1<small>team</small></span>
              <div className="why-chips" aria-hidden="true">
                {['Discovery', 'Design', 'Development', 'AI', 'Training', 'Support'].map((c) => <span key={c}>{c}</span>)}
              </div>
            </div>
            <p>One team takes you from the first workshop to support after launch. No hand-offs between agencies.</p>
          </div>
          <div className="why-card why-card--dark reveal">
            <div className="why-row">
              <span className="why-stat">100<small>%</small></span>
            </div>
            <p style={{ marginTop: 20 }}>You keep everything we build, including source code and documentation. No lock-in.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

const QUOTE_STEPS = [
  ['About you', 'Company and contact'],
  ['Your project', 'What needs fixing'],
  ['Questions', '5-8 smart follow-ups'],
  ['Verify', '6-digit email code'],
  ['Estimate', 'PDFs in your inbox'],
];

const DOC_LINES = ['Workflow discovery', 'Dashboard & reporting', 'Core system module', 'Integrations', 'Training & handover'];

function Quote() {
  const reduced = useReducedMotion();
  const docRef = React.useRef(null);

  // Scroll-linked: the sample quotation fills in line by line as the section scrolls up.
  useScrollFrame(() => {
    const el = docRef.current;
    if (!el) return;
    if (reduced) {
      el.style.removeProperty('--q');
      return;
    }
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight;
    // Starts once the first line is on screen and finishes with the total in view.
    el.style.setProperty('--q', clamp01((vh * 0.78 - r.top) / (vh * 0.66)).toFixed(3));
  }, [reduced]);

  return (
    <section className="quote" id="quote" aria-labelledby="quote-title">
      <div className="quote-grid">
        <div>
          <p className="eyebrow reveal">Instant quote · Free</p>
          <h2 id="quote-title" className="t-display quote-title reveal r-d-1">Price your system in <span className="quote-hl">5&nbsp;minutes</span>.</h2>
          <p className="quote-lede reveal r-d-2">
            Describe your business and the system you need. Our estimator asks a few follow-up questions, then emails you an itemised quotation and a project proposal.
          </p>
          <div className="quote-actions reveal r-d-3">
            <QuoteLink className="btn btn-on-accent">Start my quote</QuoteLink>
            <a href={contactMailto} className="btn btn-white">Talk to a consultant</a>
          </div>
          <p className="quote-fine reveal r-d-3">No account needed. Quotation and proposal arrive as PDFs.</p>
          <ol className="quote-steps reveal">
            {QUOTE_STEPS.map(([b, s]) => <li key={b}><b>{b}</b>{s}</li>)}
          </ol>
        </div>
        <div ref={docRef} className="quote-doc-wrap reveal r-d-2" style={{ '--n': DOC_LINES.length + 3 }} aria-hidden="true">
          <div className="quote-doc quote-doc--back">
            <header><div><b>Project proposal</b><span>Scope · Timeline · Approach</span></div></header>
            <div className="doc-lines">{[80, 64, 72, 50].map((w, k) => <div key={w} className="doc-bar" style={{ width: `${w}%`, '--k': k }} />)}</div>
          </div>
          <div className="quote-doc quote-doc--front">
            <span className="doc-stamp qd-step" style={{ '--k': DOC_LINES.length + 2 }}><span><b>~5</b>minutes</span></span>
            <header className="qd-step" style={{ '--k': 0 }}>
              <div><b>Quotation</b><span>Custom business system</span></div>
              <span className="doc-tag">Sample layout</span>
            </header>
            <div className="doc-lines">
              {DOC_LINES.map((l, k) => (
                <div key={l} className="doc-line qd-step" style={{ '--k': k + 1 }}><span>{l}</span><span>RM ·····</span></div>
              ))}
            </div>
            <div className="doc-total qd-step" style={{ '--k': DOC_LINES.length + 1 }}><span>Estimated total</span><b>RM ·····</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process, Why, Quote });